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

2. Linear Transformations A transformation of matrix A from R n  R m is called a linear transformation. A transformation of matrix A from R n  R m is called a linear transformation. Example: Example: This shows that A transforms v into

3. Translation Matrix

4. Translation Designate an object to a square frame. Designate an object to a square frame. Assign the translation matrix to correspond to a set point in the 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. 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: 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 a value corresponds to the x value The b value corresponds to the y value The b value corresponds to the y value

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

6. Rotational Matrix

7. Rotation Designate a point within the frame of the object to be the axis of 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. Attach a vector from the point of rotation to the top left corner of the frame. Apply the rotation to the vector. Apply the rotation to the vector.

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

9. Application of Rotation θ

10. Combining Translation and Rotation a b θ

11. Scaling Matrix

12. Scaling Designate an object to a square frame. Designate an object to a square frame. Since nothing is being done to it yet, it will look like an identity matrix. 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: 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 x value corresponds to the object’s x ratio size The y value corresponds to the object’s y ratio size The y value corresponds to the object’s y ratio size

13. Application of Scaling

14. Combining Translation, Rotation, and Scaling Original Translation & Scaling 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. Animation is movement created through sequences of images linked together in a time frame. FPS: Frames per Second 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. 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. 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. 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. Coded properly, the computer ends up doing most of the calculations internally.

17. Work in Progress!

19. The Final Product:

21. THE END! :D