Lecture 3

Animation (Movement) in
Flash

Tutorial 2:

Tweened Animation
 Motion Tween
Motion tween is nothing but tweening a Symbol's movement from one
.position to another,
To implement Motion Tween all that you have to do is, provide Flash
with Symbol's initial position and the end position.

6. Move a ball from Left to Right by using Motion Tween Animation :-

Steps to follow:
 Open a new flash file (Ctrl+N) .
 Select the first frame. Import your image onto stage, upon which you would
want to implement motion tween:
File>Import>Import to Stage, or just press (Ctrl+R),
or you can even draw your own object, you can either choose Rectangular
tool or Oval tool from the tool box and draw your desired shape.
 Now select your object on the stage and press F8 to convert this image to a
Symbol. Or by right –click and select Convert to Symbol
 Convert to Symbol window will pop-up .
 Name your Symbol whatever you like.
 Select Graphic behavior and press OK.

(Note: You can create motion tween only on symbols. So any object upon which
you would want to implement motion tween, First convert the object to a Symbol).
12
Prepared By :Jaseela Azees
Lecture 3

 Right now your Symbol is in frame1 of Layer1. Select frame 20 and press F6
to insert a new keyframe.

 Still keeping playhead on frame 20, move your Symbol to any other position
other than the present one.

 Select any frame between, 2 to 19 and select Motion from the tween pop-up
menu in the Property inspector. Now your Layer will look something like the
one shown below .

 Now press (Ctrl+Enter) to view your work.

7. Move a ball from Right to Left by using Motion Tween Animation :-

13
Prepared By :Jaseela Azees
Lecture 3

Other changes can be applied:

Motion Tween is a change in the location of the object from one frame to
another, so we can apply the principle of change in other properties of the
object such as:
1- Rotate: Click on the first frame and then select what you want from the
four options Rotate:
 None lack of rotation.
 Auto If you have rotate the item in the last frame, it will be
spinning in the same direction.
 CW rotate in a clockwise direction.
 CCW rotate Reverse clockwise direction.

2 –Color : Click on the symbol in the stage, and then from the list of Color
in the Properties down the stage and select the desired color effect:

 None which is the default option and mean keep of color as it is.
 Brightness to adjust brightness or lighting.
 Tint to adjust the color by many of precise controls in the three RGB
channels: red, green, and blue.
 Alpha to adjust the degree of transparency.
 Advanced Modify accurate RGB channels and the degree of
transparency together.

8. Move a square from left to right and rotate to CW by using Motion Tween Animation:-

9. Move a square from right to left and rotate to CW by using Motion Tween Animation:-

14
Prepared By :Jaseela Azees
Lecture 3

10. Move 2 balls from 2 sides by using Motion Tween Animation:-

11. Move 2 Squares from 2 sides by using Motion Tween Animation:-

12. Move a square in 4 directions and rotate to CCW by using Motion Tween Animation:-

13. Bouncing ball from up to down and down to up using Motion Tween :-

 Open a new flash file (Ctrl+N) .

 Select the first frame. Import your image onto stage, upon which you would want to
implement motion tween:

 Draw the ball using Oval tool from the tool box.

 Now select your object on the stage and press F8 to convert this image to a Symbol. Or by
right –click and select Convert to Symbol

 Convert to Symbol window will pop-up .

 Name your Symbol whatever you like.

 Select Graphic behavior and press OK.

 (Note: You can create motion tween only on symbols. So any object upon
which you would want to implement motion tween, First convert the object to a
Symbol).

15
Prepared By :Jaseela Azees
Lecture 3

 Right now your Symbol is in frame1 of Layer1. Select frame 20 and insert a new keyframe.

 Still keeping playhead on frame 20, move your Symbol to down.

 Select any frame between, 2 to 19 and select Motion from the tween pop-up
menu in the Property inspector. Now your Layer will look something like the
one shown below.

16
Prepared By :Jaseela Azees
Lecture 3

 Select frame 40 and insert a new keyframe. Still keeping playhead on frame
40, move your Symbol to up.

 Select any frame between, 21 to 39 and select Motion from the tween pop-up
menu in the Property inspector. Now your Layer will look something like the
one shown below.

 Select frame 60 and insert a new keyframe. Still keeping playhead on frame
60, move your Symbol to down.
17
Prepared By :Jaseela Azees
Lecture 3

 Select any frame between, 41 to 59 and select Motion from the tween pop-up
menu in the Property inspector. Now your Layer will look something like the
one shown below.

 Now press (Ctrl+Enter) to view your work.

14. 2 Bouncing ball from 2 directions from up to down and down to up using Motion Tween :-

15. 4 Bouncing ball from 4 directions from up to down and down to up using Motion Tween :-

18
Prepared By :Jaseela Azees
Lecture 3

Tutorial 3:
Shape Tween
By tween shape, you can create an effect similar to morphing, making one shape
appear to change into another shape over time. Flash can also tween the location,
size, and color of shapes .

16. Change Oval shape to Rectangle by using Shape Tween Animation:-

Steps to follow:
 Open a new flash file (Ctrl+N) .
 Select the first frame. Now go to your working area and draw any object. To
start off with, may be you can draw a circle by Oval Tool. This is going to be
your initial object.
 Select frame 20 and press F6 to insert a new keyframe .
 Still keeping playhead on frame 20, delete the object present in your working
area. Now draw a different object, may be a square.

 Select any frame between, 2 to 19 and select Shape from the tween pop-up
menu in the Property inspector. Now your Layer will look something like the
one shown below.

19
Prepared By :Jaseela Azees
Lecture 3

 Now press (Ctrl+Enter) to view your work.

17. Change Rectangle shape to Oval by using Shape Tween Animation:-

18. By using Shape Tween Animation change oval shape to any other different shapes :-

Steps to follow:
 Open a new flash file (Ctrl+N) .
 Select the first frame. Now go to your working area and draw any object. To
start off with, may be you can draw an Oval by Oval Tool. This is going to be
your initial object.
 Select frame 20 and press F6 to insert a new keyframe .
 By using subselection tool make it into different shapes.
 Select any frame between, 2 to 19 and select Shape from the tween pop-up menu in the
Property inspector.

19. By using Motion Tween Animation move a circle from one side and move rectangle from
other side and in apply center shape tween :-

20. Change star to any other shape using Shape tween :-

20
Prepared By :Jaseela Azees