Flash I

            Course Instructor Guide

 

 

 

Outline:

 

  1. Introduction to Macromedia Flash
  2. What is Flash used for?
  3. The work environment in Flash
  4. Create vector graphics using various tools
  5. What to do before creating an animation
  6. Create a symbol
  7. Create multiple instances
  8. Go into symbol editing mode
  9. Create the first movement
  10. Use motion tween to animate the entire movie
  11. View the animation in a browser
  12. Create more realism in the animation
  13. Saving and final preview
  14. Next week
  15. Open for Q&A

 

 

In Detail:

 

  1. Introduction to Macromedia Flash
    1. http://www.macromedia.com
    2. Discuss raster and vector graphics
    3. Discuss .gif animations vs. Flash animations
  2. What is Flash used for?
    1. Discuss uses of Flash
    2. Show examples of Flash on the web
    3. Discuss file types, .fla .swf, .exe (application)
    4. Why make an HTML site and a Flash site
    5. Cover ADA and other possible accessibility concerns
  3. The work environment in Flash
    1. Open Flash
    2. Show where palettes and panels are located
    3. Show how to use palettes
    4. Close all palettes except the Tools, Properties, and Timeline

                                                              i.      The tools palette is where all of your tools reside that will help you create vector graphics

                                                           ii.      The Properties palette is where you can find and change the properties of whatever you select.

                                                         iii.      The Timeline is the frame-by-frame action of the Movie

    1. Discuss the stage
    2. Discuss the Work area
  1. Create vector graphics using various tools
    1. Use the line, Oval, Rectangle, and text tools to make basic vector graphics
    2. For each tool demonstrate how to make, edit, and delete each object

                                                              i.      Make sure to use the Arrow to and the Subselection tool to select, move, and alter anchor and direction points

    1. Discuss the stroke and fill
    2. Show how to group objects
    3. Show how to work with different colors
    4. Show how to create no stroke and no fill
    5. Create a grouped object
    6. Then Clear everything off the stage
  1. What to do before creating an animation
    1. First save the file

                                                              i.      Where you save is the same place that Flash will save your other files

    1. On the menu toolbar choose Modify > Document

                                                              i.      Discuss the options

                                                           ii.      The recommended frame rate is between 12 and 25 FPS

  1. Create a symbol
    1. Create an oval in the top left-hand corner of the stage

                                                              i.      No stroke

                                                           ii.      Fill, any color

    1. Discuss keyframes and blank keyframes
    2. Convert the oval object to a symbol

                                                              i.      Select the oval

                                                           ii.      On the menu toolbar choose Insert > Convert to Symbol

1.      Discuss what these are and when they are used

a.      Movie Clip

b.      Button

c.      Symbol

                                                         iii.      Give the symbol a name

                                                          iv.      Select Graphic behavior

  1. Create multiple instances
    1. Select the 20th frame
    2. Insert a key frame

                                                              i.      Choose Insert > Keyframe (F6 is the keyboard shortcut)

    1. Discuss the instance of the symbol on every frame from 1 to 19 and the significance of the one in the 20th frame
  1. Go into symbol editing mode
    1. Show how to go in to the Library

                                                              i.      Window > Library

                                                           ii.      Double Click on the ball in the Library

    1. Show how to go back to scene one
    2. Show how to double click on the instance of the symbol on the stage to go into symbol editing mode
    3. Go back to scene one
  1. Create the first movement
    1. Select the 20th frame
    2. Using the Arrow Tool move the instance of the symbol to it’s bounce-point
    3. Select the 1 st frame
    4. In the properties palette choose Tween > Motion
    5. Check to make sure that everyone’s ball drops
    6. Everyone should now have an arrow

                                                              i.      A dashed line means that a mistake was made

                                                           ii.      In case of a dashed line do Edit > Undo and do it again

  1. Use motion tween to animate the entire movie
    1. Insert keyframes in frames 40, 55, 70, 80, 90, and 98
    2. Move the bal up in the 40th frame
    3. Select the 20th frame
    4. In the properties palette choose Tween > Motion
    5. Since the ball is already down on the 55th frame you only need to insert another motion tween.
    6. Go back and forth doing this until you get to the 98th frame
  2. View the animation in a browser
    1. On the menu toolbar choose File > Publish Preview > Default HTML
    2. The browser should open and play the animation
    3. Discuss HTML and the .swf file now located on the desktop
  3. Create more realism in the animation
    1. Select the 1st frame
    2. In the properties palette, choose ease > in -75

                                                              i.      This will start the animation slowly and then pick up speed the closer the movie gets to the next keyframe

    1. Add easing to the 20th frame (ease out +100)

                                                              i.      This makes the ball start off fast, but then slow down as it gets closer to the next keyframe

  1. Saving and final preview
    1. Save the .FLA
    2. Do a final preview in the browser
    3. Discuss file types again
  2. Next week
    1. Working with multiple layers, creating movie clips and buttons, inserting sound and raster graphics, action script, labels, an more intermediate aspects of Flash
  3. Open for Q&A