Student Showcase

We will take a look at any of your new work which is ready to share.

For the “A Little Scene” assignment, we will discuss the following aspects of each:

  • Overall strength of the animation
  • Degree to which the file meets the needs of the assignment

Download

Symbol Exercise Files

Symbol Essentials

Creating a symbol

  • Symbols allow you to reuse an object (such as an image, an animation, a button, or a video) multiple times
  • Modify > Convert to Symbol (or right-click)
  • Convert to Symbol dialog box options
  • The object becomes both a symbol and an instance of a symbol on the stage
  • Editing instances of symbols

Graphic symbols

  • For static images or for building blocks of more complex symbols
  • Can include an animation within the symbol
  • Do not play independently of the timeline they are in
Exercise: Graphic Symbol
  1. Open the GraphicSymbol.fla file in the Symbol Exercise Files folder. When it opens, you will see a scrub jay on the timeline that has a duration of ten frames. Scrub across the timelines, and the bird moves a short distance to the right.
  2. Double-click the graphic symbol—jay—in the Library, and when the Symbol Editor opens, you’ll see that the animation has a length of 60 frames. Double-clicking a symbol on the stage to open the symbol is another way to edit it, and this is called editing in place.
  3. Click the Scene 1 button to return to the main timeline.
  4. Select frame 60 on the main timeline and add a frame (press F5, not F6, as this does not need to be a keyframe.) This time, the bird on the stage can move all the way across the stage because it is matching the movement of the symbol’s nested animation.
  5. Insert another frame at frame 61 of the timeline (again, not a keyframe.) Because the symbol’s internal timeline loops back to frame 1 after frame 60, the bird ops back to the left side of the stage. This is an extremely useful technique to know. If you were to have a bird with flapping wings, you could have the wings flap inside the symbol, and then have the main timeline manage the movement of the bird from one part of the stage to another.
  6. Select the bird on the stage and look at the Properties panel.
  7. Twirl down the Looping area in the Properties panel. The dropdown menu in the Options area lets you choose Loop, Play Once and Single Frame. The field labelled First lets you choose which frame of the graphic symbol’s timeline to display first. We’ll take a more in-depth look at this feature later.
  8. Save and close the file.

Button symbols

  • Have a four-frame timeline—one frame for each button state
    • Up: the mouse is not hovering over it
    • Over: the mouse is hovering over it
    • Down: the mouse just clicked it
    • Hit: the shape/size of the active clickable area
  • Control > Enable Simple Buttons allows you to test the button on your stage
  • You must turn off Enable Simple Buttons in order to edit a button
Exercise: Button Symbol
  1. Open the ButtonSymbol.fla file in the Symbol Exercise Files folder.
  2. Select Control > Enable Simple Buttons. This menu item brings buttons to life on the Flash stage. If you roll over a button and click it, you will see that the button changes in relation to whether it has been clicked or rolled over and whether the mouse is off the button. In this case, nothing happens. Let’s see why.
  3. Select Control > Enable Simple Buttons again to turn it off.
  4. Double-click the button symbol named Button in the Library.
  5. When the Symbol Editor opensw, you will see that each state of the button is in its own keyframe.
  6. Select the Hit keyframe. the button didn’t work in step 2 because the Hit frame is empty. Flash doesn’t have a clue where the mouse should be to make the button work. We are going to fix this by defining a “hot” area in the Hit frame.
  7. Select the Rectangle tool, a draw a large square that covers most of the stage.
  8. Click the Scene 1 button, turn on Enable Simple Buttons again, and drag the mouse over the stage. The over state will appear even though the mouse pointer is not over the button. This is because of the rather large Hit area.
  9. Turn off Enable Simple Buttons, select the button on the stage and press the Delete key.
  10. Drag a copy of the BlowUp button symbol onto the stage and test it, remembering to shut off Enable Simple Buttons when you are done.
  11. Enter the Symbol Editor for the blowUp symbol. Notice that it has an additional layer, with an audio file placed in the Down keyframe.
  12. Save and close the file.

Movieclip symbols

  • Movies within movies: play independently of the timeline they are in
  • When you click a symbol instance on the stage, the Properties panel tells you what symbol it’s from
  • Movieclips can be nested inside of other movieclips
  • Movieclips are programmable with ActionScript
  • Movieclips cannot be viewed in action within the FLA file on the stage; you must view the SWF (Cmd+Return)
Exercise: Movieclip Symbol
  1. Double-click on the MovieclipSymbol.swf file in the Symbol Exercise Files folder. It will launch in Flash Player. You will see a sports car come roaring onto the stage and drive off the right edge of the stage. Its back tire is spinning.
  2. Close the SWF and open MovieclipSymbol.fla.
  3. Drag the playhead across the timeline to see that the car starts moving across the stage in frame 6 and is off the stage by frame 45. Notice that the tire is no longer spinning.
  4. Notice in the Library panel that the cat is actually composed of several symbols.
    • The Car graphic symbol doesn’t contain a rear wheel. Why is it a graphic symbol? It is simply a picture.
    • The Rear movieclip contains the wheel that is rotated over a series of frames in its timeline. Why is this one a movieclip? The answer is the rotating wheel on the movieclip’s timeline.
  5. Double-click the Race movieclip in the Library to open the Symbol Editor. You will see that the car is composed of two layers, and each layer contains a symbol. This is what is meant by nesting. Movieclips can be placed inside other movieclips. This is also true of graphic symbols, but the key difference is that the timelines for the movieclips aren’t controlled by the main timeline (remember our jay bird?)
  6. Notice that each symbol resides in a single frame of its own layer. Even though the Rear movieclip gets one frame of the timeline, it still spins when the SWF is published.
  7. Click the Scene 1 button to return to the main timeline.
  8. Select the car anywhere between frame 6 and 45 on the stage, and view the Properties panel. You will see that the Race movieclip is the symbol used in the final animation.
  9. Scrub the playhead across the timeline. The car gets larger and smaller, thanks to a tween. The tire does not spin inside Flash because animations within movieclips only are activated in the SWF.
  10. Close the file without saving.

Editing symbols

  • Double-clicking the symbol icon in the Library opens the symbol in Symbol Editor
  • Double-clicking the symbol instance on the stage allows you to edit the symbol in place
  • When you make changes to a symbol, it affects all instances of that symbol on the stage
Exercise: Edit a Symbol
  1. Open the EditSymbol.fla file in the Symbol Exercise Files folder.
  2. Double-click on the Star symbol in the Library. The Symbol Editor will open. This technique is know as entering the timeline of a symbol.
  3. Click the Scene 1 button to return to the main timeline.
  4. Double-click on either of the stars on the stage. These are both instances of the Star symbol. This will also open the Symbol Ediot, but you may have noticed that the other content on the stage is visible yet dimmed. This technique is called editing in place.
  5. Make a change of some kind to the Star symbol within the Symbol Editor. Notice how both instances of the Star symbol change their appearance on the stage.
  6. Save the file and close it.

Filters and Blend Modes

  • You can apply multiple filters to a single object
  • You cannot apply multiple instances of a filter to an object
  • Filters take additional processor time
  • The filters available in Flash are:
    • Drop Shadow—places a gray or colored shadow beneath an object
    • Blur—takes the object out of focus
    • Glow—creates a faint glowing outline around an object following its curves
    • Bevel—gives an object a 3D look by createing shadows and highlights on opposite edges
    • Gradient Glow—similar to the Glow filter except that the glow follows a gradient of colors fromthe inside to the outside edges of the object
    • Gradient Bevel—similar to Bevel except that a gradient is applied to the shadows and highlights of the bevel
    • Adjust Color—allows you to adjust the brightness, contrast, hue and saturation of an object
  • Filters area in Properties panel
  • Add Filter botton in bottom-left, select filter of choice
  • Edit the filter’s settings in the Properties panel
  • Make an object invisible but the filter visible by using Hide Object
  • The filter can be transformed by using the Free Tranform tool on the invisible object
Exercise: Filters
  1. Open the Filter.fla file in the Symbol Exercise Files folder. You will see a cartoon man has been placed over an image of people sleeping on a park bench in Paris.
  2. Select the character on the stage and notice in the Properties panel that it is an instance of a movieclip symbol.
  3. Apply a Drop Shadow filter (using the Filters section of the Properties panel.)
  4. Click the Trash can icon at the bottom of the Filters area of the Properties panel to delete the drop shadow.
  5. With the character still selected on the stage, copy it to the clipboard.
  6. Create a new layer and name it Man.
  7. Select Edit > Paste in Place to paste the character in the exact same location on the X and Y axes.
  8. Turn off the visibility of the Man layer.
  9. Select the character on the Shadow layer and apply a Drop Shadow filter again. This time, use these settings:
    • Blur X: 30
    • Blur Y: 7
    • Strength: 70 percent (this is an opacity value)
    • Quality: High
    • Angle: 87 degrees
    • Hide Object: Selected
  10. Notice that the character is hidden but the shadow remains. Now we need to transform it to add perspective, so that it is a cast shadow rather than a drop shadow.
  11. Use the Free Transform tool to scale, rotate and skew the shadow so that it is falling across the pavement.
  12. Turn on the visibility of the Man layer.
  13. Select the shadow on the stage and use the arrow keys to align it with the foot that is on the ground.
  14. Select the Man object and apply the Drop Shadow filter to it.
  15. This time leave the values alone, but select High as the Quality setting, and select Inner Shadow. The character takes on a bit of a 3D llok.
  16. Save and close the file.
Flash CS5 filter drop shadow cast shadow

Playing with blends

  • Blends in Flash are similar to blends in Photoshop
  • Pixel colors are blended between two layers to create a given effect
  • Can only be applied to movieclips and buttons
  • Select the symbol and choose the mode from the Blending drop-down in the Properties panel (Display section)
  • Blend modes are applied in a top-down manner
Exercise: Blending
  1. Open the Blend.fla file in the Symbol Exercise Files folder. When the file opens, you will see that we have two movieclips on the stage in separate layers. The text layer will bethe “source” of the blend, and the fish layer will be the “destination.” The text is filled with a neutral gray color. Blend modes arfe applied in a top-down manner, which means that the effect will do the manipulation using the “source” layer’s pixels and apply the result to the “destination” layer. Anything visible under the “source” will be affected by the transformation.
  2. Select the text movieclip.
  3. Open up the Display area of the Properties panel
  4. Select Normal from the Blending dropdown menu. The Normal mode does not mix, combine, or otherwise play with the color values.
  5. Change the blend mode to Multiply. Now the colors have mixed, and the darker colors make the Source text image darker.
  6. Change the blend mode back to Normal.
  7. Select the fish object and apply the Multiply blend mode to it. Notice that the image gets darker because the stage color is a dark gray color. The text color does not change.
  8. Change the blend mode for the fish back to Normal.
  9. Set the blend mode of the text to Lighten. The lighter color of both the source and destination images is chosen for display. The lighter pixels in the destination image are placing the darker pixels in the source image.
  10. Finally, set the blend mode for the text/source to Difference. This mode is always a surprise. This one works by determining which color is the darkest in the source and destination images, and then subtracting the darker of the two from the lighter color. The result is always a vibrant image with saturated colors.
  11. Save and close the file.
Flash CS5 blend modes multiply lighten and difference

Managing Content on the Stage

Grouping content

  • Modify > Group, or press Ctrl+G (Mac: Cmd+G) to group multiple items so that they can be moved or managed together
  • To ungroup: Modify > Ungroup, or press Ctrl+Shift+G (Mac: Cmd+Shift+G)

Aligning objects by snapping

Using Snap Align
  • Turn on View > Snapping > Snap Align and View > Snapping > Snap to Objects
  • A Snap Align indicator will appear when you move an object close to another object
Snapping to the grid
  • Turn on View > Grid > Show Grid and View > Snapping > Snap to Grid
  • Edit the grid: View > Grid > Edit Grid
Aligning with guides
  • Turn on View > Rulers and View > Snapping > Snap to Guides
  • Click+drag a guide from a ruler out onto the stage
  • Editing guides: View > Guides > Edit Guides
  • Hiding guides: View > Guides > Show Guides
  • Deleting all guides: View > Guides > Clear Guides
Exercise: Grouping and Snapping
  1. Open the ManageContent.fla file in the Symbol Exercise Files folder. The duck on the stage is an instance of a graphic symbol.
  2. Open the duck graphic symbol in the Library.
  3. Click the Mallard layer and you will see that the duck is composed if hundreds of vector shapes. If you wanted to move that image over a couple of pixels, you would need to make sure you always selected each piece in order to move it. There is an easier method.
  4. Select Modify > Group (Cmd+G on the Mac or Ctrl+G in the PC.)
  5. Deselect the duck by clicking on the stage, then click the image of the duck again. You will see the box indicating that the selection is grouped, and you will also see this information in the Properties panel.
  6. Return to Scene 1.
  7. Select View > Snapping > Snap Align (if it is already selected, escape the menu.) When Snap Align is switched on, dragging one object close to another object will show you a dotted line. This line shows you the alignment with the stationary object.
  8. Click the text on the stage and drag them up near the bottom-left corner of the duck image. When you see the text left-aligning with the image, release the mouse.
Flash CS5 snap align duck
  1. Select View > Grid > Show Grid.
  2. Select View > Grid > Edit Grid. Here you can change the color of the grid lines, the size of the squares, and how snapping will be managed by Flash.
  3. Change the grid line color, and increase the vertical and horizontal size of the grid squares, then click OK.
  4. Select View > Snapping > Snap to Grid.
  5. Move the two objects around on the stage and see how they interact with the grid.
  6. Turn off the grid and Snap to Grid.
  7. Select View > Rulers.
  8. Select View > Snapping > Snap to Guides.
  9. Click-and-drag from the left-hand ruler to pull out a vertical guide. Place it at about 150 pixels according to the top ruler.
  10. Click-and-drag from the top ruler to pull down a horizontal guide. Place it at about 50 pixels according to the left-hand ruler. Place another horizontal guide at about 280 pixels.
  11. Move the duck so that its top edge aligns with the top-most guide and its left edge aligns with the vertical guide.
  12. Move the text so that its top edge aligns with the second horizontal guide and its left edge aligns with the vertical guide.
Flash CS5 align to guides duck
  1. Save and close the file.

Stacking order

Stacking objects

  • Objects are stacked within a single layer according to when they were created: the most recent is on top
  • The Modify > Arrange menu will allow you to move a selected object up or down within the stack
  • Modify > Timeline > Distribute to layers will take selected objects within a single layer and give each of them their own layer
Exercise: Stacking
  1. Open the Stacks.fla file in the Symbol Exercise Files folder. There are four flower images all on the same layer. Each object on the stage is an instance of a graphic symbol.
  2. Drag the objects on top of each other, and you will see a stack; the location of each object in this stack is a visual clue regarding when it was placed on the stage. The object added most recently is on the top of the stack.
Flash CS5 symbol instance stack overlapping
  1. Right-click the top-most image (the red rose,) and select Arrange > Send Backward. The red rose moves down in the stack by one position.
  2. Right-click on the red rose again, and select Arrange > Send to Back. The red rose moves to the bottom of the stack.
  3. Right-click on the orange rose and select Arrange > Bring Forward. The orange rose moves up in the stack by one position.
  4. Right-click the orange rose again, and select Arrange > Bring to Front. The orange rose is now at the top of the stack of flower images.
  5. Select all four objects on the stage, and go to Modify > Timeline > Ditribute to Layers. Four things happen:
    • Each symbol instance gets put on its own layer.
    • Each new layer gets named according to the name associated with the symbol instance put onto the layer.
    • The layers are in the same stacking order that you had arranged on the single layer.
    • The original layer (Layer 1) is now emptied out.
  6. Save and close the file.

Using the Align panel

  • Allows you to line up, center, and evenly distribute objects
  • Contains the following subsections:
    • Alignment Options allow you to align objects along a common side or along centers
    • Distribute Options allow you to evenly space out objects accoring to a common side or centers
    • Match Size Options resize selected obects so that they are the same width, height, or both
    • Space Options put equal amounts of spacing between selected objects
    • Align to Stage moves or resizes one or more objects according to the edges/size of the stage; you’ll want this option shut off in most cases
Exercise: Aligning
  1. Create a new Flash ActionScript 3.0 document and save it as Aligning.fla in your Symbol Exercise Files folder.
  2. Create a new graphic symbol named block (Insert > New Symbol…).
  3. In symbol editing mode for block, draw a rectangle of any color.
  4. Select the shape, and in the Properties panel set W to 100 and H to 20.
  5. Click the Scene 1 button.
  6. Drag out four copies of the block symbol onto the stage, and place them anywhere.
  7. Open the Align panel from the Window menu. Make sure that the Align to Stage checkbox is not selected.
Flash CS5 align panel
  1. Select the four blocks on the stage.
  2. Click the Align Left Edge button in the Align panel (in the top-left corner.) The blocks line up along the left edge of the block furthest to the left.
  3. Click the Space Evenly Vertically button in the Align panel (the first one under Space.) The blocks are now spaced evenly along the vertical axis.
Flash CS5 align panel align left space evenly vertically
  1. Click the Align to Stage checkbox in the Align panel.
  2. With all of the blocks selected click the Align Top Edge button in the Align panel (the fourth one in the top row.) The buttons will all pile on top of each other at the top of the stage.
  3. Click the Distribute Horizontal Center button in the Align panel (the fifth one in the second row.) The blocks all spread out along to top of the stage. Keep this in mind when it’s time to create a button bar for website navigation.
Flash CS5 align panel align top to stage distribute horizontal centers
  1. Save and close the file.

Masks and Masking

Creating a simple mask

  • Masks are used to selectively show or hide objects without being destructive
  • The mask and the object being masked must be on separate layers
  • Right-click (Mac: Ctrl+click) on the name of the masking layer in the Timeline, and select Mask
  • Both layers become locked; you may unlock them to temporarily disable the mask (it will reappear when they are relocked)
  • Additional layers may be masked by the same masking layer by dragging them within the Timeline layer stack
Exercise: Simple Mask
  1. Find an image to use as a background, something like a landscape with lots of color throughout it. Pick one that is of medium size, in the neighborhood of 550×400. Save it in your Symbol Exercise Files folder.
  2. Create a new Flash ActionScript 3.0 document and save it as SimpleMask.fla in your Symbol Exercise Files folder.
  3. Import your background image to the stage.
  4. Resize the stage to match your image size:
    1. Modify > Document…
    2. Click the Match Contents radio button.
    3. Click OK.
  5. Add a new layer at the top.
  6. Name the top layer Mask and the bottom layer Masked.
  7. On the Mask layer, draw a simple, closed shape with the Pencil tool using any stroke color.
  8. Fill the shape in with the Paint Bucket tool using any fill color.
  9. Select the entire shape.
  10. Use the Free Transform tool to resize the shape to cover much of the stage but still fit inside of it.
Flash CS5 masking resize mask shape timeline
  1. Right-click on the Mask layer, and select Mask. Four things happen:
    • The image which extends past the mask shape is now hidden.
    • In the Timeline, both layers become locked.
    • The layer icons change to reflect the masking relationship.
    • The Masked layer becomes indented under the Mask layer.
Flash CS5 masking simple mask in play
  1. Add a new layer above the mask and name it Square.
  2. Draw a large square on the new layer.
  3. Drag the Square layer under the Masked layer, and pull to the left so that it does not get indented. You should still be able to see your square peeking out from behind your masking shape.
Flash CS5 masking add layer at bottom
  1. Now drag the Square layer just under the Mask layer and lock it. It will be indented and masked. You can have more than one layer masked at a time.
Flash CS5 masking add layer to mask
  1. Delete the Square layer.
  2. Unlock both remaining layers. The preview of the mask will go away.
  3. Edit the shape on the Mask layer in some way.
  4. Lock both layers again. The mask will reflect your revised shape.
  5. Save the file but do not close it yet.

Creating a masked animation

  • Animated symbols such as movieclips can be masked as easily as other objects
Exercise: Animated Mask
  1. Save your SimpleMask.fla file as a new file named AnimatedMask.fla.
  2. Unlock both layers.
  3. Add a keyframe at frame 72 for both layers.
  4. Bring the playhead back to frame 1.
  5. Select the background image on the stage, and move it to the left so it is just past the edge of your shape.
Flash CS5 animated mask frame 1 position timeline
  1. Move the playhead to frame 72.
  2. On the stage, move the background image to the right so that it is just past the right edge of the shape.
Flash CS5 masking animation frame 72 position timeline
  1. Right-click in the frame span on the Masked layer and select Create Classic Tween.
  2. Test the Movie (Mac: Cmd+Return, PC: Crtl+Enter.) The masked image should appear from the left edge of the shape, travel across the shape, and disappear off its right edge. Note that your do not need the layers locked for the mask to be active in the SWF.
  3. Close the SWF.
  4. Create a Classic Tween in the frame span on the Mask layer.
  5. Click anywhere in this tween in the Timeline, and in the Properties panel locate/open the Tweening section.
  6. Set the Rotate dropdown to CW.
  7. Test the movie again.
  1. Close the SWF, save the FLA file and close it.

Using text as a mask

  • When using text as a mask, be sure to select a font with thick stroke weights so that the image underneath has some room to be seen (the example uses Arial Black)
Exercise: Text Mask
  1. Create a new Flash ActionScript 3.0 document and save it as TextMask.fla in your Symbol Exercise Files folder.
  2. Import your background image to the stage again, resize the stage to match your image size, and name the layer Masked.
  3. Add a new layer at the top named Mask.
  4. Select the Text tool.
  5. In the Properties panel, change the Text type to Classic Text.
  6. Also in the Properties panel, select a font which has very thick stroke weights, such as Arial Black. The font color does not matter and the size will be adjusted later.
  7. Type a short word on the stage in the Mask layer. Type all in uppercase letters.
  8. Use the Free Transform tool to resize the word proportionally to fill the top of the stage.
Flash CS5 text mask free transform
  1. Right-click on the Mask layer and select Mask. Your word will mask out the image which falls outside of the letterforms.
Flash CS5 masking text single word
  1. Unlock both layers.
  2. If you have room, create duplicate copies of your word down the stage: click-and-drag the word while holding down the Option (Mac) or Alt (PC) key. You can also hold down the Shift key to make sure they move straight down.
Flash CS5 text mask three words down
  1. Lock both layers to preview the mask. You will find that only one instance of the word is being used as the mask. In order to have all three words act as masks, we need to convert them into vectorshapes instead of editable text.
  2. Unlock both layers.
  3. Click on frame 1 of the Mask layer to select all of its contents on the stage.
  4. Modify > Break Apart. This takes each word and breaks it up into individual letters which are still editable text.
  5. Break apart again (you can use Cmd+B for the Mac or Ctrl+B for the PC as a shortcut.) This time each letterform is converted into a vector shape.
Flash CS5 text mask break apart text convert to vector shapes
  1. Lock both layers to preview the corrected mask.
Flash CS5 masking text three words
  1. Save and close the file.