2D Animation NC III

Sample Activities

TYPES OF ANIMATIONS AND ITS STEPS

TWEENING
1. Create an object;
2. Convert the object to symbol;
3. Click on Frame 1 using Arrow Tool > Click on Insert> Convert to
symbol or F8;

Frame1

* Note: Symbol window will appear. Indicate symbol name>choose

graphic> then click ok;

4. Choose an end frame;

5. Using arrow tool> move the object to other location within the
stage;
6. Back to frame 1> right click> choose create motion tween;

7. Press Control+Enter (Test Movie).

By: Ivy D. Villareal, Dev.Ed.D. -1-

2D Animation NC III

SCALING
1. Create an object;
2. Pick Frame1> Convert the object to symbol;
Press F8>Indicate symbol name>choose graphic>click OK;
3. Choose an end Frame > Choose an end frame> Press F6;
4. Using Free-transform tool > Scale the object;

Nudge/Resizing Button

To resize>Hit one of the nudges using your mouse;

o See to it that your mouse pointer is turned into a
double headed arrow;
Click, hold and drag to scale or re-size;
5. Back to Frame 1>right click> Create motion tween;
6. Press Ctrl + Enter (Test Movie).

ROTATION
1. Create and object or add text (use rainbow color);
2. Convert the object to symbol;
Click frame 1
Press F8
Indicate Symbol name
Choose Graphic > Click OK
3. Choose an end frame > Press F6;
4. Back to frame 1 > right click > create motion tween;
5. In the property inspector panel > Choose Rotate (CW or CCW)>
indicate the number of rotation;
6. Press Ctrl + Enter (Test Movie).

CHANGING COLOR
1. Create an object (use any solid color);
2. Convert the object to symbol;
Click frame 1
Press F8
Indicate Symbol name
Choose Graphic > Click OK
3. Choose an end frame > Press F6;

By: Ivy D. Villareal, Dev.Ed.D. -2-

2D Animation NC III

4. Back to frame 1 > right click > create motion tween;

5. Choose an end frame > Pick on the object> In the property
inspector panel > Color> choose tint from the list> choose another
color;

6. Press
Ctrl + Enter
(Test Movie).

FADING (IN AND OUT)

1. Create an object (use any solid color);
2. Convert the object to symbol;
Click frame 1
Press F8
Indicate Symbol name
Choose Graphic > Click OK
3. Choose an end frame > Press F6
2. Back to frame 1 > right click > create motion tween;
3. Choose end frame > Pick on the object> In the property inspector
panel > Color> choose > change its property to 0%;
Fade In > Alpha (1st Frame 0% - End Frame100%)
Fade Out > Alpha (1st Frame100% - End Frame
0%)
4. Press Ctrl + Enter (Test Movie).

MORPHING
1. Create an object ;
Note : Do not convert the OBJECT to symbol
In terms of images or text: apply breaking apart of objects
Pick on the frame or object
Press Control + B (twice)

2. Choose an end frame > Press F5 ( to insert a blank keyframe );

3. Create another object ( make sure that objects are not converted
to symbol;
4. Back to frame 1>In the Property Inspector Panel > Tween > Choose
Shape (green colored arrow will connect the frames);
5. Press Ctrl + Enter (Test Movie).

By: Ivy D. Villareal, Dev.Ed.D. -3-

2D Animation NC III

GUIDE LAYER
1. Create an object or import a picture of a plane;
2. Convert the object to symbol;
3. Choose an End Frame > Press F6;
4. Add motion tween;
5. Insert or add layer guide (by clicking on layer guide button;

Guide Layer
Button
6. Using pencil tool make a path;

7. Back to layer 1>pick on the object> using the arrow tool move the
object to the starting point of your path;

8. Pick end frame > move the object to the end point of your path;
9. Test Movie (Ctrl + Enter).

MASKING
1. Import image or picture;
2. Convert the object to symbol;
3. Choose an end frame;
4. Add layer on top of Layer1 (Mask Layer);
Click on Add Layer Button

Insert Layer Button

5. Create an Obejct that will serve as mask > convert the object to
symbol;
* Note : Object in the mask layer will serve as window for us to see the
masked object.
6. Animate the mask object along the image;

By: Ivy D. Villareal, Dev.Ed.D. -4-

2D Animation NC III

7. Add motion tweening;

8. Pick on Mask Layer(Layer2) > right click > create motion tween;

Mask Layer

Masked
9. PressLayer
Ctrl + Enter ( Test Movie ).

BUTTONS
Button is a type of symbol with a special Timeline. The timeline for a
button has (3) three frames.
Up
Over
Down
o The Hit Frame defines the area of the button that responds
to the mouse
1. Create an object or enter text;
2. Covert the object to symbol;
Click frame 1
Press F8
Indicate Symbol name
Choose Button > Click OK
3. Pick on the object > right click > edit in place or double click on the
object;
* Button Timeline will appear.

4. Pick on over > Press F6 ( do the same with down);

* Change the object color in each keyframe
5. Back to scene 1 > Test Movie.

By: Ivy D. Villareal, Dev.Ed.D. -5-

2D Animation NC III

ACTION SCRIPTING ( Example: Play and Stop Button)

1. Create an object> convert to symbol ( Movie Clip )
2. Right click on the object > edit in place
3. Do a simple animation
a. Pick frame 1 > Press F8 > Graphic
b. Choose an end frame > F6
c. Add motion tweening
d. Back to frame 1 > right click > actions
1. Choose Actions
2. Movie Control
3. Double click stop
4. Add two layers
5. Create 2 objects for play and stop button in two separate layers
6. Convert the objects to symbol to button (both)

( For Play Button )

7. Right click on the play button > actions > movie control > double click
play

( For Stop Button )

8. Right click on the stop button > actions > movie control > double click
stop
9. Back to scene 1 > Test Movie

By: Ivy D. Villareal, Dev.Ed.D. -6-

2D Animation NC III

LEAF FALLING

1. Create a leaf (on the upper center of the stage)

2. Convert the object to symbol > Graphic
3. Click on frame 50 > press F6 (to add keyframe)
4. Move the object to the opposite location (lower-center of the stage)
5. Right click on frame 1 > create motion tween
6. Add motion guide > using pencil tool draw a path for a falling leaf

Lock guide layer

7. Back to layer 1 >click on frame 1 (move the leaf to the first point of the
guide)

8. Click on the end frame (frame 50) > move the object to the other end
of the path

By: Ivy D. Villareal, Dev.Ed.D. -7-

2D Animation NC III

9. Back to layer one > add more keyframes ( 5, 13, 21, 33, 40)

10. Rotate and skew the leaf in each keyframe

11. Apply also changing color in each keyframe

Frame 1 - RGB ( 0, 102, 51 )

Frame 5 - RGB ( 0, 153, 102 )
Frame 13 - RGB ( 153, 204, 0 )
Frame 21 - RGB ( 153, 153, 51 )
Frame 33 - RGB ( 204, 204, 51 )
Frame 40 - RGB ( 153, 51, 0 )
Frame 50 - RGB ( 153, 102, 51 )

12. To add or fake wind effect > add easing in the properties panel
Ease ( -30 )

13. Ctrl + Enter > Test Movie

By: Ivy D. Villareal, Dev.Ed.D. -8-

2D Animation NC III

ANIMATED BUTTON

1. Create an Object ( that will serve as your button )

* Example = Circle
2. Select the object > right click copy
3. Add another layer (LAYER 2) > right click on the stage > paste in place
* Hide and lock layer 2
4. Now work on your layer 1 object > Click on the first frame > Convert
the object to MOVIE CLIP
5. Right click on the object > Edit in place
( another window will appear Symbol 1)
6. Click on frame No.1 > Convert the object to Graphic
( for you to animate)
7. Do any animation (Example = Scaling and fade in/out)
* Now your animation is ready.
8. Back to Scene1 > Right click on the first frame of layer 1> choose copy
frames > hide and lock layer 1 > unhide and unlock layer 2
9. Click on frame 1 of layer 2 > convert the object to BUTTON >using
arrow tool > right click on the button object > edit in place
10. Right click on OVER > paste frames
11. Right click on UP > Copy Frames > Paste it to Down and Hit Frames
12. Back to Over > Align the two object by looking at its positive sign at the
center of it.
13. Back to Scene > Delete Layer 1
14. Ctrl + Enter (Test Movie)

By: Ivy D. Villareal, Dev.Ed.D. -9-

2D Animation NC III

MAGIC CURSOR

1. Create an object ( using line tool create a star )

2. Click on frame 1 > Click modify > shape > convert lines to fills
3. Open color mixer panel (Shift + F9) > Choose Radial
4. First Gradient White > Second gradient Red
* Change the stage color to Red
* Close Color Mixer
5. Click again frame 1 > Press F8 (convert to symbol) MOVIE CLIP
6. Right click on the object > Edit in place
* New window will appear (Symbol 1)
7. Click on frame 2 > Press F8 > Graphic
8. Add keyframe > click frame 20 > Press F6
* Do any animation ( example tweening with rotation and fading)
9. Back to frame 2 > right click create motion tween
10. Click on frame No.1 > Press F8 > Convert frame 1 to button
11. Right click on the button object > Edit in place
12. Click on HIT > Press F6 > Back to UP > Press Delete
13. Back to symbol 1 > Right click on the frame 1 > Actions
14. Choose actions > movie control > double click STOP
* Close Actions Panel
15. Right click on OBJECT-BUTTON > choose actions > Movie Control >
Choose GOTO and PLAY - FRAME 2 > change mouse event to
ROLLOVER
* Close actions panel
16. Back to Scene 1 > Fill in the whole stage with the created object
(by pressing Ctrl+ click hold and drag your mouse)
17. Test Movie

By: Ivy D. Villareal, Dev.Ed.D. -10-

2D Animation NC III

MOUSE TRAIL

1. Open New Movie > View Gridlines ( by Pressing Ctrl + )

2. Draw a small square on the first grid (remove the border)
3. Click again frame 1 > Press F8 (convert to symbol) MOVIE CLIP
4. Right click on the object > Edit in place
* New window will appear (Symbol 1)
5. Click on frame 2 > Press F8 > Graphic
6. Add keyframe > click frame 20 > Press F6
* Move the object to two grid lower
7. Back to frame 2 > right click create motion tween
8. Click on frame No.1 > Press F8 > Convert frame 1 to button
9. Right click on the button object > Edit in place
10. Click on HIT > Press F6 > Back to UP > Press Delete
11. Back to symbol 1 > Right click on the frame 1 > Actions
12. Choose actions > movie control > double click STOP
* Close Actions Panel
13. Right click on OBJECT-BUTTON > choose actions > Movie Control >
Choose GOTO and PLAY - FRAME 2 > change mouse event to
ROLLOVER
* Close actions panel
14. Back to Scene 1 > Fill in the whole stage with the created object
(by pressing Ctrl+ click hold and drag your mouse)
15. Test Movie

By: Ivy D. Villareal, Dev.Ed.D. -11-

2D Animation NC III

BUTTONS WITH LINK

1. Input Text ( Click here to goto Yahoo)

2. Click on frame 1 > Press F8 (to convert the object to symbol) BUTTON
3. Right click on the object > choose actions
4. Click Actions > Click Browser or Network
5. Double Click > Get URL
6. Open a file that will serve as your link or copy Address of a WEBSITE
7. Paste the copied address to URL
8. Change mouse event to > PRESS
9. Close actions panel
10. Right click on the object BUTTON > Choose Edit in Place
11. Add keyframes to OVER, DOWN and HIT
a. Change color in each keyframe
12. Test Movie

By: Ivy D. Villareal, Dev.Ed.D. -12-