Course notes
syllabus | schedule | topics | projects | class notes | resources | students | ARTC courses
 Lectures:
Lecture A: The Flash Interface Lecture 4: User Input
Lecture B: Animation Lecture 5: Extras & Game Design
Lecture 1: Drawing with Code and ActionScripting Lecture 6: Linking up the Nucleus
Lecture 2: Graphics Application Development Lecture 7: Brainstorming Game Types
Lecture 3: Working with Movieclips Lecture 8: Topics for Discussion
  Lecture 9: Preloaders and JavaScript Windows
 
Lecture B: Flash Animation and Rollover Buttons

With Flash you can: move an object across the stage, change its size, rotate, change color, fade in and out, or change the shape of an object, and any combination of these. There are two types:

  • Frame-by-Frame (keyframe in every frame, change item in every frame) = bigger file

  • Tweened (start / end keyframes, Flash does the rest) = smaller file size

  • You must insert frames to animate. Although you can see rectangles that look like frames on the timeline, those frames are EMPTY.  You must ADD FRAMES before starting your animation. (F5 or Insert > Frame).

  • Inserting a frame ADDS a frame to your animation, increasing the overall length, pushing frames down

  • You must also insert KEYFRAMES at the beginning & end of your animation sequence (F6 or Insert > Keyframe OR F7 Insert > Blank Keyframe

  • Each animated item must be in its OWN SEPARATE LAYER!

Tweening: 
Must be a group, text block or an Instance (Drawn objects must be converted to symbols first), or Flash will turn it into a symbol (called "Tween1") in the library.

-            Two types:  Motion - position, size, rotation, skew, color or alpha
                                   Shape - change the shape or make new object

Prep: Make an image and convert it to a GRAPHIC symbol - make sure you name it

1.            Make a new Layer (click the +) and name it Position   Drag an instance from the Library into it

2.            With the keyframe selected, Insert > Create Motion Tween

3.            Select a frame to be the last frame (or next keyframe) of the animation

4.            If there are no frames in your animation that go this far then Insert > Keyframe (F6) or (F5) new frame

5.            Select the Arrow Tool and move the Instance on the stage;  Repeat for each keyframe.

6.            Control > Rewind (OPT + CMD + R)    Hit Enter to Play

** NOTE: Flash will create a new keyframe within a motion tween when you move an object on the stage.


Preview:  Control > Play  OR  Windows menu- Toolbar - Controller, click Play

Test MovieControl menu - Test Movie,  Creates a .swf temp file in separate window (must do this for interactivity and movieclips)

1.            Make a new layer and name it Scale - Select the frame that you want your animation to start on

2.             If it doesn't have a keyframe Insert > Keyframe or F6 and drag a new Instance into it

3.            Insert > Create Motion Tween

4.            Select last frame of the animation, if it goes beyond the existing animation, F5 (Insert > Frame)

5.            Hit F6 (Insert > Keyframe)

6.            Select the Free Transform Tool and Scale the Instance on the last frame

To Move a keyframe:

1.            Select the keyframe (click once)

2.            Click again and drag to move it

(if you are using CS4 you need to use the Command key to unlock the timeline layer to move the keyframe)

To add more keyframes to an existing animation:

1.            Select a keyframe

2.            Hold OPT and drag it to where you want the new keyframe (A + appears on the grabber)

            (takes info from the last keyframe and copies it to the new keyframe)

Layer Visibility and Locking:

Disable the layers you are not working on by locking them and making them invisible

•            Click the eye and lock columns


1.            Make a new layer and name it Rotate - Select the frame that you want your animation to start on

2.            If there isn't a keyframe there Hit F6

3.            Drag a new Instance to it

4.            Click on the keyframe and select Insert > Create Motion Tween

5.            Select the last frame of the animation

6.            Hit F6 (Insert Keyframe)

7.            Rotate the Instance on the last frame

8.            Select the first keyframe on the timeline (NOT the graphic) and select the Property Inspector

9.            Select Rotation: 

Older versions of Flash: None, Automatic (finds the shortest path to reach final destination), Clockwise, or Counterclockwise and specify how many times you want it to rotate

CS4: Times (drag to left or right), Degrees - little + and o (drag to left and right), Direction (clockwise, counter clockwise)

Easing IN or Out with Tweening Parameters: (accelerate/decelerate start/end)

Older Flash: In the Frame Panel select Easing: drag slider up or down for IN (- num) or OUT (+  num)
CS4: Click the frame in the timeline then in the Properties EASE - watch the path on the stage change
(always effects after the keyframe)

1.            Make a new layer and name it Color - Select the frame that you want your animation to start on

2.            Hit F6 and drag in an Instance and Insert > Create Motion Tween

3.            On the last Frame hit F5 (if necessary) & F6

4.            Select the Instance image in the first or last frame of your new animation

5.            In the Property Inspector, (Color Effect) Select Brightness, Tint or Alpha and change them

To use Advanced:  (to change transparency AND color)
            First column = percentage of effect   OR   Second Column = the direct value of the effect
            Use them together to create the effect you want;  Combine color and fade

To make animations take more time (slow them down):
Make sure you have no layers selected and then:

Go to the middle of the animation and hit F5 (Insert > Frame)

**Can insert an entire section if in a tween, instead of just one frame, so be careful!

To make animations take less time (make them faster): (with no layers selected)

Go the middle of the animation and hit Shift F5 (Insert > Remove Frames)

For best results place only one shape on the layer.  Multiple shapes have unpredictable results!
Must be a shape NOT a SYMBOL, group, Instance, text block, or bitmap (this is the opposite of Motion Tweening)

  • Draw a NEW object,   OR   select an instance and  Modify > Break Apart to make it a shape

1.            Make a layer and name it Shape

2.            Make a keyframe if necessary then draw a circle on the start frame of the animation

3.            Make a keyframe for the last frame of the animation

4.            On the last frame make a square or modify the old image

5.            Select the 1st frame in the timeline

6.            Insert menu - Shape Tween

7.           Look in the Property Inspector and set Blend:           
                  Distributive - inbetweens are smoother and irregular
                  Angular - preserves corners & straight lines  (use if you have corners & straight lines)

8.            Set the Ease IN

Shape Hints:
•            Hints identify areas that should correspond in start and end frames
•            Can have up to 26 shape hints
•            Might need to draw some inbetween shapes if the morph does not work well

To Use Shape Hints:                                   
Prep:  Make a Shape Tween using steps 1-8 above


1.            Select 1st keyframe for shape tweened animation

2.            Modify > Shape > Add Shape Hint (CMD + shift + H)

3.            Move the Red hint (a) to a spot on a problem point on the shape

4.            Select last frame and move the hints to their corresponding spots on the new shape

5.            Repeat for each additional hint added; Add COUNTERCLOCKWISE from last hint (test after each one)

6.            Use Onion Skinning to help! (see below)

To turn off and on hints visibility:                        View > Show Shape Hints  (CMD + OPT + H)

To Remove an existing shape hint:            Drag hint off of the stage (you cannot actually remove a single hint)

To remove all hints:                                                Modify > Shape > Remove All Hints


Makes larger files that are much slower to load but you have the flexibility to do incredible things

1.            Make a new layer and name it Frame by Frame

2.            Click frame and Add a keyframe

3.            Draw a picture

4.            Click the next frame and Add a Keyframe (Will duplicate contents of previous frame)

5.            Draw a new picture or modify existing one

  •       Repeat procedure until the animation is done

Allows you to see more than one frame of your animation at a time

onion skinning

-            Turn ON Onion Skinning by clicking the Onion Skin button  

-            Clicking Onion Skin Outline makes an outline of each object in each frame

-            To change the range of onion skinned frames drag the markers in the timeline

-            Edit Multiple Frames button - lets you work on more than 1 image without going to the frame

-            Locking Layers prevents them from showing up in the onion skin

Modify Onion Markers button:  (To change display of onion skin markers)

•            Always Show Markers - shows the onion skin range whether or not Onion Skin is ON or OFF

•            Anchor Onion Marks - keeps the range permanently fixed on a set of frames (won't move)

•            Onion 2 - displays 2 frames on either side of the selected frame

•            Onion 5 - displays 5 frames on either side of the selected frame

•            Onion All - displays all frames on either side of the selected frame

To move an entire animation to somewhere else on the stage:

1.            Unlock all layers you want to move (lock ones you don't want to move)

2.            Click the Edit Multiple Frames button in the timeline

3.            Drag the Onion skin marker to select a section

4.            Edit > Select All or use the Arrow tool to draw a rectangle around the contents you want to move

5.            Drag the entire animation to a new spot on stage

Using the animation in more than one spot:

1.            Select all the frames (get all keyframes) - on CS4 you need to use the Command Key to get the keyframes (except keyframe 1)

2.            Edit - Timeline - Copy Frames  (Control click on a selected frame to get Contextual menu)

3.            Select new frame and Edit - Timeline - Paste Frames
           

To Move frames:

1.            Select the frames (in CS4 you may have to Command click to select them)

2.            Drag them to new frame

Deleting Images from the keyframes

            Select it and Modify menu - Timeline - Clear Keyframe  (Shift + F6)

Deleting Extra frames

            Select the frame - Edit - Timeline - Remove Frames  (Shift + F5)

(Use for repetitive motion / cyclic action i.e. bird wings)

- Enables you to reuse or manipulate an instance; plays separately from main timeline.

1            Select all the animation frames in all the layers you want to use.

2            Edit - Timeline - Copy Frames (or CTRL+ Click…Copy Frames)

3            Make sure nothing is selected on the timeline (or deselect frames)

3            Insert > New Symbol

4            Name it and select Movie Clip; Puts you in Symbol Editing Mode (look at the top left part of the window).

5            In the symbol editor, click the first frame of the timeline and Edit - Timeline - Paste Frames

6            Edit - Edit Document or click the Scene 1 box to get back to main timeline

7           Delete the original movie on the Scene 1 and you can use the Movieclip on a single frame


1            Make an image that will be used as a button.

2            Select it and Modify - Convert to Symbol (F8)

3            Name it and select Type: Button

4            Then on Scene 1 on a separate layer make a movie clip animation for the button's rollover state.

5            Select it and Modify - Convert to Symbol (F8)

6            Name it and select Type:Movie Clip

7            Edit the BUTTON symbol (double click the button in the library)

8            Insert a keyframe for Over (F6)

9            Delete the image for Over

10            Drag the movieclip animation from the Library to the scene

11            Go back to Scene 1

12            Control > Enable Simple Buttons

13            Control > Test Movie