Flash Animation Using Linear Transformations

1. Flash Animation Using Linear Transformations By Kevin Hunter Marcus Yu

2. Linear Transformations • A transformation of matrix A from Rn Rm is called a linear transformation. • Example: This shows that A transforms v into

3. Translation Matrix

4. Translation • Designate an object to a square frame. • Assign the translation matrix to correspond to a set point in the frame. • Since nothing is being done to it yet, it will look like an identity matrix. • Apply the translation to the matrix by adjusting the a and b value of the following matrix: • The a value corresponds to the x value • The b value corresponds to the y value

5. Application of Translation b Any kind of picture inside this square frame a Any kind of picture inside this square frame

6. Rotational Matrix

7. Rotation • Designate a point within the frame of the object to be the axis of rotation. • Attach a vector from the point of rotation to the top left corner of the frame. • Apply the rotation to the vector.

8. How to calculate the rotation • If we want to rotate the picture counter clock wise by 45o: • Input 45 to the θ of the matrix:

9. Application of Rotation θ

10. Combining Translation and Rotation θ b a

11. Scaling Matrix

12. Scaling • Designate an object to a square frame. • Since nothing is being done to it yet, it will look like an identity matrix. • Apply the scaling to the matrix by adjusting the x and y value of the following matrix: • The x value corresponds to the object’s x ratio size • The y value corresponds to the object’s y ratio size

13. Application of Scaling

14. Combining Translation, Rotation, and Scaling Translation & Scaling Original Rotation Final Product of all 3

15. Element of Time in Animation • Animation is movement created through sequences of images linked together in a time frame. • FPS: Frames per Second • In order to create movement using matrices, you have to sequence increments of the translation and rotation within a set time frame. • Divide the total translation and rotation into smaller pieces and place them into the appropriate frames.

16. With a little help from Flash… • Flash’s ActionScript language allows the matrices to be coded to automatically apply the desired transformation over a period of time. • Coded properly, the computer ends up doing most of the calculations internally.

17. Work in Progress!

18. Work in Progress!

19. The Final Product:

20. The Final Product:

21. THE END!:D