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:

Topics:

• Homework Review
• Using the Timeline
• Timeline components and views
• Frames vs. Keyframes
• Selecting, moving, copying and deleting frames
• Creating Frame-by- Frame animations
• Frame by Frame animation
• Extremes and In-betweens
• Onion skinning
• Basic Animation Principles: Squash and Stretch
• Ball bounce in class exercise – Part I
• Using Shape Tweens
• Ball Bounce Part II
• Basic Animation Principles: Walk cycles

Using the Timeline

As we’ve already seen, frames are the basic unit of the timeline, represented as rectangles on the timeline. Each layer has it’s own frames that can be manipulated independently.

A keyframe is a frame on which something changes from the previous frame or frames. This is how we create animation. Keyframes are represented on the timeline by a dot inside the frame’s rectangle.

Inserting Frames

There are two ways you can insert frames or keyframes. First, select the layer and frame of the timeline where you want to insert, then through the Insert Menu:

Insert > Timeline > Frame

or

Insert > Timeline > Keyframe

or

Insert > Timeline > Clear Keyframe

You can also call up a contextual menu (I much prefer this) by right-clicking or Control+click on a frame on the timeline. This gives you access to all the frame controls:

Timeline Contextual Menu

Selecting Frames

Flash offers two different methods for selecting frames in the Timeline. In frame-based selection (the default), you select individual frames in the Timeline. In span-based selection, the entire frame sequence, from one keyframe to the next, is selected when you click any frame in the sequence. You can specify span-based selection in Flash Preferences.

• To select one frame, click the frame. If you have Span Based Selection enabled, Control-click (Windows) or Command-click (Macintosh) the frame. You can enable this in the Preferences panel.
• To select multiple contiguous frames, Shift-click additional frames.
• To select multiple non-contiguous frames, Control‑click (Windows) or Command-click (Macintosh) additional frames.
• To select all frames in the Timeline, select Edit > Timeline > Select All Frames.
• To select an entire span of static frames, double-click a frame between two keyframes. If you have Span Based Selection enabled, click any frame in the sequence.

Moving Frames

To move a keyframe or sequence of frames, click and drag.

To increase or decrease the length of a span, contol+drag.

Topics:

• Introductions
• The Class Blog
• Class Syllabus and Schedule
• Why Flash?
• Introduction to the Flash Interface
• Creating and editing graphics in Flash
• Using the Drawing Tools
• Object Mode vs. Merge Mode
• Selecting and Modifying Shapes
• Grouping objects
• Color Palettes and swatches
• Gradients and gradients editor
• Transformation tools
• Transparency
• Alignment
• Using Layers to Organize Your Project
• Publish Settings, Testing Your Movie
• Saving down to older versions

Introduction to the Flash Environment

1. Opening Flash and Choosing a Document Type
2. The “Stage” and Pasteboard
3. Panels
1. Properties
2. The Toolbar, Toolbar Options
3. Color
4. Align
5. Info
6. Transform
4. Toolbar
5. Timeline

Using the Drawing Tools

1. Shapes -
1. Merge Drawing vs. Object Drawing
2. Regular Vs. Primitives
3. Rectangle
4. Oval
5. Polystar
2. Pen
3. Pencil
4. Brush
5. Line
6. Paint
7. Ink
8. Select
9. Sub-selection
10. Eraser
11. Free Transform

>> Drawing reference from Adobe Help

Using Layers and Folders to Organize your movie

1. Adding Layers
2. Deleting Layers
3. Moving Layers
4. Hiding/Showing/Locking Layers
5. Creating and using Folders

Viewing and Navigating the Stage, Organizing Your Workspace

1. Zooming
2. Hand Tool (Spacebar)
3. Viewing Modes
4. Workspaces and Creating Your Own

Publish Settings and Test Movie

1. Publish Settings
2. Test Movie
3. Publishing your .swf file

In-Class Exercise

Try to recreate this picture using the drawing tools in Flash:

Homework

Using the tools we covered today, create a self portrait in Flash. This drawing should be complex and detailed, using as many objects, layers and groups as necessary. Bring the .fla and .swf files to class next week and be prepared to present your portrait to the class.