Objective

To learn motion design by example. To learn Flash animation techniques by recreating this banner ad by John Havlik.

Overview

Convert art to symbols. Manage keyframes on timeline. Insert motion tweens. Work with transparency. Publish actual size, view in browser window.

Procedure

preparing for the exercise

1. download starter file
2. download Flash keyboard shortcuts
3. open "beethoven.fla" in Flash
4. window > workspace > default
5. practice Flash shortcuts: cmd+1, cmd+2, cmd+3
6. inspect layers

animating "beethoven"

1. go to "beethoven" layer (hide others)
2. select type, convert to graphic symbol (F8)
3. in frame 150: insert > keyframe (F6)
4. in frame 150: move art off stage to left, tween (motion)
5. modify > movie: make background black
6. go to "beethoven small" layer (hide others)
7. select type, convert to graphic symbol (F8), cut (cmd+X)
8. in frame 150: insert > blank keyframe (F7); paste in place (cmd +shift+V)
9. in frame 180: insert > keyframe (F6)
10. in frame 180: effects: alpha=0%, tween (motion)
11. in frame 165: insert > keyframe (F6)
12. in frame 150: move art off stage down
13. control > play (RETURN)

animating "the complete..."

1. go to "the complete" layer (hide others)
2. select type, convert to graphic symbol (F8)
3. insert > keyframe (F6) in frames 15, 55, 70
4. in frames 1 and 70: effects: alpha=0%, tween (motion)
5. in frame 70: move art to right

animating "alex"

1. go to "alex" layer (hide others)
2. select type, convert to graphic symbol (F8), cut (cmd+X)
3. in frame 70: insert > blank keyframe (F7); paste in place (cmd +shift+V)
4. insert > keyframe (F6) in frames 85, 115
5. in frame 70: effects: alpha=0%, tween (motion)
6. in frame 70: move art to right

animating months

1. reveal months layers (hide others)
2. select art on all three layers (shift+click)
3. cut frames (cmd+opt+X)
4. go to frame 115: select all three layers (shift+click); insert > blank keyframe (F7)
5. paste frames (cmd+opt+V)
6. in frame 125: insert > frame (F5) on all three layers
7. in february layer: delay art 10 frames
8. in april layer: delay art 20 frames

animating lines

1. go to "lines" layer (hide others)
2. select art, convert to graphic symbol (F8) "lines animated"
3. double-click on symbol (stage is ghosted) (you are now editing the symbol)
4. select one set of grouped art, convert to graphic symbol (F8) "lines1"
5. select other set of grouped art, convert to graphic symbol (F8) "lines2"
6. move "lines2" symbol to a new layer
7. start with keyframes at 50, 100, 150
8. move symbols, tween (motion)
9. add new layers as needed to fill screen
10. on some layers, try effects: tint: white
11. pay particular attention to the ending
12. return to scene 1
13. extend art on "lines" layer to frame 150 (F5)
14. control > play (RETURN)

masking the lines

1. go to "mask" layer
2. draw black box for area to be revealed
3. extend mask art to frame 180 (F5)
4. convert layer to a mask layer (ctrl click on layer name)
5. control > play (RETURN)

publish movie

1. file > publish settings, format (.swf & .html), flash (version 4, loop), html (match movie); publish; save
2. open HTML file in dreamweaver, zero out margins, bg=white, center
3. test movie in browser (drag and drop HTML file into browser window)
4. link HTML file from your projects page and publish