Flash Animation Using Linear
Transformations
By
Kevin Hunter
Marcus Yu
Linear Transformations

A transformation of matrix A from Rn  Rm is
called a linear transformation.

Example:
1 0 
A  2  1
 3 4 
1 0 
1
1  
 

Av  2  1     3 
 1

 3 4 
 1
 1
v 
 1
This shows that A transforms v into
1
  
w3
  1
Translation Matrix
1
0

0
0
1
0
a

b
1 
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
1 0 a 
0 1 b 


0 0 1 
Application of Translation
b
a
Any kind of picture
inside this square
frame
Any kind of picture
0 square
a  v
inside1this
0 1 b  u 

frame
0 0
1 
1
0

0
0
1
0
0 1
0 0
1 0
0
1
0
a  1
b   0
1  0
0
1
0
a
b 
1 
Rotational Matrix
cos
 sin 

 0
 sin 
cos
0
0

0
1
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.
How to calculate the rotation


If we want to rotate the picture counter
clock wise by 45o:
Input 45 to the θ of the matrix:
cos
 sin 

 0
 sin 
cos
0
0

0
1
Application of Rotation
θ
1 0 0 cos
0 1 0  sin 


0 0 1  0
 sin 
cos
0
0 cos
0   sin 
1  0
 sin 
cos
0
0
0
1
Combining Translation and Rotation
θ
b
a
cos
 sin 

 0
 sin 
cos
0
a
b 
1 
1 0 a  cos
0 1 b   sin 


0 0 1   0
 sin 
cos
0
0 cos
0   sin 
1  0
 sin 
cos
0
a
b 
1 
Scaling Matrix
x
0

0
0 0

y 0
0 1 
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
x
0

0
0 0

y 0
0 1 
Application of Scaling
1 0 a  v 
0 1 b  u 


0 0
1 
1
0

0
1 0 a  v 
0 1 b  u 


0 0
1 
0
1
0
0 1
0 0
1 0
0
2
0
0 1
0  0
1 0
0
2
0
0
0
1
Combining Translation, Rotation,
and Scaling
Translation &
Scaling
1 0 0  x 0 a  cos
0 1 0 0 y b   sin 



0 0 1 0 0 1   0
Original
 sin 
cos
0
Rotation
0  x cos
0   y sin 
1  0
 x sin 
y cos
0
Final
Product of
all 3
a
b 
1 
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.
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.
Work in Progress!
Work in Progress!
The Final Product:
The Final Product:
THE END!
:D