Topics:
- Understanding Symbols:
- Symbol Types: Graphics, MovieClips, and Buttons
- Symbols vs. Instances, The Library Panel
- Break Apart
- Nested Animations and Timelines
- Blending Modes and Filters
- Importing Graphic Assets
- Bitmaps vs. Vectors
- Preparing Your Resource Files
- Import Options and Settings
- Distribute to Layers
- More Tweens: Motion vs. Classic
Understanding Symbols: Graphics, MovieClips, and Buttons
So far we’ve been working with simple shapes on the timeline called drawing objects. The only animation we can do with drawing objects is frame-by-frame or shape tweens, and we’ve created these objects by drawing the in Flash. To do more sophisticated animations and use the additional tween types we need to start using symbols. These will also be necessary when we start to use interactivity.
A symbol is a reusable graphic object within your Flash project. You create a symbol by selecting the objects on the stage and converting them to a symbol by one of these methods:
- Select Modify > Convert To Symbol.
- Drag the selection to the Library panel.
- Right-click (Windows) or Control-click (Macintosh) and select Convert To Symbol from the context menu.
- Use the keyboard shortcut F8
When you convert objects to a symbol, you will be given three choices for the type of symbol it is:
- Use Graphic symbols for objects that will not be interactive. They have a timeline, and you can preview their frames on the main timeline and sync them with other movement.
- Use Button symbols to create interactive buttons that respond to mouse clicks, rollovers, or other actions. They have a timeline with just four frames for the up, down, active and hit states.
- Use Movie Clip symbols to create interactive loops of animation. They have their own multiframe Timeline that is independent from the main Timeline, allowing you to create nested animations. You can also use these for buttons if you want more specialized behavior.
There are also font symbols, we’ll talk about those next week.
When you create a symbol, it is automatically added to your project’s library and will be visible in the library panel.
- The Library Panel
You can create a new blank symbol either from the Insert menu, the library panel, or the keyboard shortcut Command+F8
You can edit any symbol by double-clicking on the symbol on the stage, or in the library.
Symbols vs. Instances:
Symbols are stored in the library, and can be used multiple places in a project.
Once you place a symbol on the stage, this is an instance of that symbol.
Edits that you make to that instance on the main timeline, like scaling, only apply to that instance of the symbol.
When you edit the symbol itself, all instances of that symbol change.
If you wish to convert an instance back into drawing objects or groups on the stage, choose Modify > Break Apart or Command+B
Color Effects, Blending Modes and Filters
You can apply these transformations to button or movieclip symbol instances, but not graphics, drawing objects, or groups. All of these properties can be animated over time.
Color Effects include changing the alpha channel, tint, and brightness.
Blending Modes will be familiar from Photoshop and Illustrator.
Filters include blurs, glows, and drop shadows
All of these effects are accessible through the properties panel when you have the symbol selected, and will only affect that instance of the symbol:
Importing Graphic Assets
Bitmaps vs. Vectors
Vectors. All the art you create within Flash is in vector format. A vector is an image that is stored as a set of instructions for how to recreate the image as paths and fills. Vectors can be scaled with no loss of quality.
Bitmaps. Bitmaps, or raster graphics are stored as pixel data. Bitmaps lose quality when scaled up because the computer has to invent new pixels to enlarge the image.
Flash can import both vectors and bitmaps.
You can import native layered files from both Photoshop (.psd) and Illustrator (.ai), as well as bitmap images that are .gif, .png, or .jpeg. There is a full list of file formats that are supported for import here, but I’d suggest you stick to the ones I’ve listed, as they are web formats and will translate better.
Preparing your files for import
Some tips:
- For layered files, organize them into named layers that match the layers you want in the timeline
- For flattened bitmaps, create or resize them for the largest size you will use in your Flash project, but not larger, as this just adds unnecessary file size
- If you want a bitmap to have a transparent background in Flash, save it as a .png
Import Options and Settings
From the File menu, choose either Import to Stage (Command+R) or Import to Library depending on whether you want the imported files to appear. If the file is a bitmap, it will be imported immediately. If it is a layered file from Photoshop you’ll see this dialog:
- Import from Photoshop
If there are layer comps in your file, these will show up in the pulldown at the top. You can choose to import the layers as Flash layers or keyframes.
If you import from Illustrator, you will see this dialog:
- Importing from Illustrator
Distribute to Layers
If you end up with a bunch of objects on a single layer that you want on multiple layers, you can do this is one step by selecting Modify > Timelines > Distribute to Layers
More Tweens: Motion vs. Classic
Motion Tweens and Classic Tweens are basically two ways of doing the same thing. Classic Tweens are what Motion Tweens were in earlier versions of flash. These tweens can only be applied to Graphic, MovieClip and Button symbols.
In a classic tween, the tween takes place between two keyframes in a layer. In a classic tween, all properties are tweened at each keyframe.
In a motion tween, you select a span to tween, and can place as many property keyframes along it as needed. You can select which properties are affected by the tween. Properties that can be manipulated are:
- 2D X and Y position
- 3D Z position (movie clips only)
- 2D rotation (around the z-axis)
- 3D X, Y, and Z rotation (movie clips only)
- Skew X and Y
- Scale X and Y
- Color effects
- Filter properties (filters cannot be applied to graphic symbols)
Motion Paths
These tweens create a motion path that is a visual representation of the path the tweened object takes on the stage. The dots on the motion path represent frames. The closer the dots are together, the slower the object is moving. You can edit a motion path with pen, selection, subselection and transform tools, just like any other path on the stage.
Join Motion and Split Motion
Under the Modify or contextual timeline menus, these commands allow you to join two contiguous tweens on the same layer, or to split a tween in two.
Homework
1. Take your walkcycle exercise from this week, and, using what we learned today, do the following:
- Turn your walkcycle into a symbol so it can walk continuously for the length of a longer movie.
- Create a scene for your character to walk through. It should have at least two layers. Create this scene outside of Flash in Photoshop or Illustrator, and then import the layers into Flash
- Integrate the walk and the scene in Flash. You can choose to either move the character across the scene, or have the scene scroll behind the character.
Project 1: Create an Animated Valentine’s Day ECard
Create a 15-30 second animated greeting card with a Valentine’s Day theme. Here’s some inspirations:
You will have two weeks to complete this project, the final animated version will be due February 21st.
Due Next week: Storyboards. You can either do this in Photoshop or Illustrator, or right in Flash. Bring the storyboards in as a PDF so we can review them in class. Your storyboards should represent each major statement of the animation, we should be able to look at them at get a very good sense of the look and flow of the finished piece. Each panel should be 100% of the final design, so use multiple pages as needed.
Here’s an example of a storyboard for a banner ad:
- Storyboard for a banner ad
And here is the finished ad that was made from that storyboard:
