Parkland College > CSIT Dept > Web Technology > CSC 121 >
Calendar > Lesson 13


CSC 121 WEB SITE DESIGN
Lesson 13: Flash Banner Ad (Beethoven)
Instructor: Paul Young

 

 

 

Objectives

 

 

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

Download starter file

 

 

 

Procedure

 

 

Overview: Convert art to symbols, create keyframes and tweens for animation. Add a mask to hide art. Test, publish to server.

preparing for the exercise

  1. move download files into appropriate folder
  2. duplicate "beethoven-start.fla", rename "beethoven.fla"
  3. open renamed file in flash
  4. window > panel sets > default layout
  5. window > library (cmd L)
  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)

publishing the movie

  1. file > publish settings, format (.swf), flash (version 4, loop), publish
  2. test movie in browser (drag and drop .swf file onto browser icon, note size)
  3. publish your finished .swf file as a pop-up window (insert > media > flash; scale=exact fit), then link it from your personal web site

 

 

BACK TO TOP

______________________________

Last updated: 10/28/05 • Webmaster: Paul Young

 

 

Student
Exhibition

Influential
Designers

Internet
Resources

Tips, Tricks
& Handouts