Parkland College > CSIT Dept > Digital Media  > CIS 152 >
Calendar > Lesson 12


CIS 152 WEB DESIGN I
Lesson 12: Flash (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

 

 

 

Discussion

 

 

Flash began as a vector drawing program similar to Adobe Illustrator and Freehand. Vector art (also known as "outline-fill") is computer graphics defined by lines instead of pixels. Since lines can be described as mathematical formulas, vector art can be very small in file size.

Today, Flash is a complete multimedia development environment with its own "action script" programming language. Macromedia claims 500,000 developers and over 325 million Web users of the Flash Player, making the Flash plug-in the most widely distributed piece of software on the Internet.

Creating Flash animation involves the process of "tweening" (short for "in between" frames). This process allows the animator to design two (or more) "key" frames and then lets Flash draw all the "in between" frames. This very powerful and efficient way of animating allows one to create complex motion with very little effort.

Benefits of using Flash to create animation include:

  • relatively small file sizes (vector vs. pixels)
  • scalable art (Flash files can be blown up to any size without loss of resolution)
  • ability to embed fonts (can use any font on a Flash web page)
  • complex interactivity (can create entire web sites in Flash)
  • multimedia support (can embed video and sound)
  • can export to Quicktime (can be used for television, movies)

 

 

 

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
  6. inspect layers

animating "beethoven"

  1. go to "beethoven" layer (hide others)
  2. select type, convert to graphic symbol (RMB or F8)
  3. in frame 150: insert > keyframe (RMB or F6)
  4. in frame 150: move art off stage to left
  5. in frame 1: add motion tween (RMB)
  6. modify > movie: make background black
  7. go to "beethoven small" layer (hide others)
  8. select type, convert to graphic symbol (RMB or F8), cut (ctrl + X)
  9. in frame 150: insert > blank keyframe (RMB or F7)
  10. edit > paste in place (ctrl + shift + V)
  11. in frame 180: insert > keyframe (RMB or F6)
  12. in frame 180: color: alpha = 0%
  13. in frame 165: insert > keyframe (RMB or F6)
  14. in frame 150: move art off stage down
  15. add motion tween to frame 150, 165 (RMB)
  16. window > toolbars > controller: play (ENTER)

animating "the complete..."

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

animating "alex"

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

animating months

  1. reveal months layers (hide others)
  2. select art on all three layers (click, shift + click)
  3. edit > timeline > cut frames (ctrl + opt + X)
  4. go to frame 115: select all three layers (click, shift + click); insert > blank keyframe (RMB or F7)
  5. paste frames (ctrl + opt + V)
  6. in frame 125: insert > frame (RMB or 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 (RMB or 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 (RMB or F8) "lines1"
  5. select other set of grouped art, convert to graphic symbol (RMB or F8) "lines2"
  6. move "lines2" symbol to a new layer
  7. start with keyframes at 50, 100, 150 (adjust later)
  8. move symbols, add motion tween to sequence
  9. add new layers as needed to fill screen
  10. on some layers, try color: tint: white
  11. pay particular attention to the ending
  12. return to scene 1
  13. extend art on "lines" layer to frame 150 (RMB or F5)
  14. window > toolbars > controller: play (ENTER)

masking the lines

  1. go to "mask" layer
  2. draw black box for area to be revealed
  3. extend mask art to frame 180 (RMB or F5)
  4. convert layer to a mask layer (ctrl + click on layer name)
  5. window > toolbars > controller: play (ENTER)

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. move .swf file to your upload folder
  4. in Dreamweaver, insert > media > flash (scale=exact fit)
  5. publish, then link it from your personal web site

 

 

BACK TO TOP

______________________________

Last updated: 11/29/06 • Webmaster: Paul Young

 

 

Student
Exhibition

Influential
Designers

Internet
Resources

Tips, Tricks
& Handouts