>Week 6 Examples

Topics:

• Trace Bitmap
• Swapping symbols
• Motion Presets
• Using
• Saving
• Bone Tool

Trace Bitmap

Flash has the ability to take an imported bitmap and turn it into vector shapes via the Modify > Bitmap > Trace Bitmap command. The success of this will greatly depend on the image you start with.

Motion Presets

Flash ships with a number of these, which are basically canned motion tween animations. Use these sparingly, and always customize them for your project. “Out of the box” they are very recognizable and make you look like an amateur. More interesting is the ability for you to save your own motion presets, handy when you are doing a project where you are going to use the same transitions multiple times.

Using the Bone Tool

The Bone tool allows you to create an armature of “bones” using either shapes or symbols to create dynamically linked characters or objects that use something called “inverse kinematics” to animate them. You can use bones on either a series of linked symbols or a shape, to different effect.

The Bone Tool only works with CS4 and above, with Actionscript 3. There are some small differences between CS4, CS5 and CS5.5.

Homework

Create a 10 second animation using the Bone Tool, either using linked symbols or shapes. This can be a character animation, something mechanical, something abstract, it’s up to you.

Topics:

• Project 1 Presentations
• Optimizing Your Flash Files

Homework

None … Unless you want  it. If you aren’t satisfied with your greeting card after today’s critique, you can turn in a revised version next week and improve your grade!

Optimizing Your Flash Files

If we have time ….

Since most Flash projects are meant to be seen on the Web, you have to be mindful of how large the file size is. The larger the file size, the longer it will take to load, and the more annoyed the viewer will get! Here’s some tips for keeping the file size down:

Strategies for keeping file size low:

• Lower the frame rate. The lower it is, the smaller the file. Warning, if you do this after you start animating, it’s going to slow everything down, and you will have to adjust your animation to compensate.
• Flatten effects in Photoshop. Flash will import layer effects like strokes, drop shadows and glows as separate layers, which really adds up to increase file size. If you forget to do this, you can also select multiple Flash layers and use “Convert to Bitmap” in the Modify menu to merge them into a single bitmap.
• Recreate layer effects in Flash, especially if you are planning to scale the objects they are applied to
• Recreate text in Flash, especially if you are planning to scale it
• Adjust publish settings for image compression
• Adjust individual bitmap settings for image compression
• Don’t import bitmap art at a larger size than you need it! This will make your file HUGE.

>> week 4 examples

Topics:

• Motion Presets
• Using
• Saving
• Easing
• In the Properties Panel
• With the Motion Editor
• Working with Text
• Using Classic Text (CS4)
• Using TLF Text (CS5)
• Masks

More Tweens: Motion  vs. Classic

Last week we talked about Classic Tweens. 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 explicitly create keyframes or go to the frame, make changes, and the keyframe will be dynamically created.

With Motion Tweens, 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 Tweens look like this in the timeline:

A Motion Tween on the Timeline

The first and last keyframes of the tween are represented by black circles, the property keyframes between them are black diamonds.

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.

Week 3 Example Files

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: