Parkland College > CSIT Dept > Women in CSIT > Web Workshop for Girls >
Calendar > Lesson 6


WEB WORKSHOP FOR GIRLS
Lesson 6: Introduction to Flash
 Instructor: Paul Young

 

 

Objective

To become comfortable in the Flash environment by creating a simple animation similar to this sample:

 

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 outlines 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 type to symbols for tweening. Adjust timing. Export as a web page and link to your web site.

Creating the art for animation

  1. launch Flash, file > save as "animated_type.fla" (on desktop)
  2. practice navigation shortcuts (space; space+cmd; space+cmd+option; cmd+1, cmd+2, cmd+3)
  3. rename "layer 1" as "bg"
  4. modify > document: 700x350 (fps=12)
  5. type tool: type your name (hint: all caps might animate better)
  6. choose font, size, color
  7. select tool: modify > break apart
  8. make each letter into a graphic symbol (F8 or RMB)
  9. name symbol appropriately
  10. select all symbols
  11. modify > timeline> distribute to layers
  12. delete "layer 1"
  13. save

Animating the type

  1. in all layers: insert > keyframe on frame 10 (F6 or RMB)
  2. frame 1: insert > timeline > create motion tween (or RMB)
  3. frame 1: ease out +100 (properties)
  4. frame 1: select art, make color=alpha 0 (properties)
  5. window > toolbars > controller: play animation (or ENTER)
  6. start animated sequence of each letter on a different frame
  7. frame 40: insert > timeline > frame (F5 or RMB)
  8. optional: move first letter up or down
  9. optional: spin one letter by adding 4 key frames; modify > transform > rotate 90 degrees CW
  10. optional: modify > document, change bg color
  11. test animation
  12. file > publish settings: formats=HTML & SWF; flash version=4; HTML match movie, loop=no,
    click PUBLISH
  13. save

Publishing to your web site

  1. in Google Page Creator, upload both HTML and SWF files
  2. make a link to the HTML page from your links page

 

 

BACK TO TOP

______________________________

Last updated: 6/23/06 • Webmaster: Paul Young