Ch. 7 Flash

1
Ch. 7 Flash

• Fun Stuff!

2
Flash creates movie files for Web sites!Basic
Vocab

• Tools Panel contains tools for drawing,
  painting and selecting.
• Timeline correlates images to a frame in a
  movie.
• Stage area used to create a Flash movie.
• Library place where images, graphics, symbols
  will stored and can be accessed later
• Property Inspector contains options to modify
  object properties.
• Saving a Flash file
• Flash files are automatically saved in .FLA
  format, but this cannot be used in a Web page
  document.
• Press CtrlEnter to view your movie as it will
  appear on the Web and to create a .SWF movie
  file, which can be used in a Web page.
• You may also export the animation as a movie to
  get into the .swf format required for use in
  Dreamweaver.

3
Setting Flash Document Properties

• Size sets the size of the stage in pixels.
  Click the button next to size in the Property
  inspector to change the size of the stage.
• Background Click the box next to Background to
  change the background color of the movie.
• Frame Rate number of animation frames to be
  displayed every second (default is 12 fps.).

4
The Flash Tools PanelImages drawn in Flash are
vector graphics, which are composed of lines
connected by points. The file size is much
smaller than a bitmap graphic.

• Arrow tool (black arrow) selects objects
• Line, Oval, Rectangle tools draw basic shapes
• Text tool creates a text block
• Pen tool draws straight or curved lines
• Pencil tool draws free-form lines and shapes
• Brush tool paints with brush-like strokes
• Paint Bucket tool fills enclosed areas with a
  selected color
• Eraser tool deletes parts of a shape
  (double-click to remove everything on the stage)
  Try not to use this!
• Colors Section
• Stroke Color changes outline color of the tool
• Fill Color changes the fill color of the tool

5
Snapping

• Guesses how you would like one shape to be
  related to another and snaps them together
• Sometimes this can be annoying!!!
• You can turn snapping options on and off by going
  to View and selecting Snapping.

6
Creating a flash movie Frames

• Frame contains an image
• Playhead can be dragged to a specific frame to
  display the image for that frame on the stage
• Keyframe a frame that contains an image
  different from the image in the previous keyframe
• Static Frame contains the same image as the
  previous frame (known just as a frame)
• Elapsed Time total length of the animation

7
Keyframe Types

• Insert Blank keyframe inserts a BLANK frame
• Insert Keyframe inserts an exact copy of the
  previous keyframe

8
Frame-by-Frame Animation

• Frame-by-frame animation is a movie created from
  a set of specified images a beginning image is
  drawn and then altered slightly in each frame to
  produce animation.
• Adding a keyframe clicking a new frame on the
  Timeline and selecting Insert Keyframe adds
  the image from the previous keyframe in the new
  keyframe and creates static frames in between the
  two keyframes.

9
Creating Symbols

• Symbol a graphic that is imported into a
  library which can be used throughout a Flash
  movie
• Symbols reduce the size of a movie file because
  the browser downloads the graphic only once.
• When you use a symbol in a movie, it becomes an
  instance on the stage.
• Creating a symbol
• Select the artwork.
• Go to the Modify menu and choose Convert to
  Symbol (F8)
• Give the symbol a descriptive name and choose the
  behavior (we will use graphics)
• Go to Window, Library to view your symbol.

10
Motion Tweening a single symbol is tweened to
move from a start location to an end location.

• Create artwork on the first frame of the tweening
  and select it.
• Convert to a symbol (YOU MUST CONVERT IT)
• Insert a keyframe on the frame where you want the
  tweening to end.
• Move artwork to a new position on the new
  keyframe.
• Select a between frame.
• Go to the Property inspector and set Tween to
  Motion.
• The timeline should have a solid arrow and turn
  light purple! (a dotted lien means something is
  not right)

11
Motion Tweening with a Motion Path

• Create a motion tween.
• Select the first frame.
• Go to Insert, Timeline, Motion Guide to add a
  Guide Layer.
• Click on the Guide Layer to draw a motion path
  using any drawing tool (The pen is a good idea)
• In the first frame, snap the graphic to the
  beginning of the line.
• In the last frame, snap the shape to the end of
  the line.

12
Shape Tweening

• Create artwork on the first frame (Dont convert
  to a symbol).
• Insert a blank keyframe on the last frame.
• Create new artwork on the new keyframe.
• Select a between frame.
• In the Property inspector, set Tween to Shape.
• The timeline should have a solid arrow and turn
  light green!

13
Animating Text (Morphing)

• Create a text block.
• Add a keyframe (you can use a blank one, but its
  easier if you dont) and change the text.
• It is good practice to add and change all text
  before you start to break apart (see next step)
• Select the text, and go to Modify, Break Apart.
  Text must be broken apart twice to turn it into
  separate shapes. Do this in ALL keyframes for
  all text.
• Create a shape tween (this should usually be the
  last thing you do)

14
Using Layers

• Layers are used with more complex movies. They
  allow you to combine several different types of
  animation in one movie.
• Layers are like transparent sheets of paper that
  can be placed on top of one another. You can
  modify one image without affecting other images.
• To add a new layer
• Go to Insert, Layer or click on the icon at the
  bottom of the Timeline (or right click on an
  existing layer and select insert layer)
• Double-click on the layer name to rename the
  layer.
• Layers can be locked (to prevent accidental
  changes) or hidden so that it is easier to edit
  individual layers.
• To edit a layer, make sure the layer you are
  editing is highlighted.
• Naming your layers descriptively can help when
  you are working with multiple layers

15
Creating Multiple Animations

• Each animation should be created in a SEPARATE
  LAYER!!!!!!
• If you try to do multiple animations on a single
  layer, things will NOT go well!

16
Hiding a layer

• You will no longer see this easier
• It is usually easier to work with on layer at a
  time with the other layers showing

Locking a layer

• Prevents you from making any changes to this
  layer
• Helps in preventing accidental changes

17
Ad Banners

• Create/edit all graphics/pictures in fireworks
  and make them all the same size (usually small
  for ads).
• Import these pictures into the library or stage
  into your flash movie.
• Adjust the size of your stage to match the size
  of your images.
• Every 12 frames (or however long you wish) insert
  a new blank key frame and a new advertisement
  image.
• You could also do this in fireworks using an
  animated gif.

18
Adding Music

• To add music to your webpage using dreamweaver,
  follow the instructions on the following handout
• This process can be slightly modified to add
  music to your movies as well
• Click here