Topics:

• Using the Bone Tool
• Midterm Project: Creating Storyboards

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.

>Week 5 Examples

Midterm Project: Cryptozoic Banner Ads!

Your midterm project, which will be due in stages over the next three weeks, is to create two banner ads for the game and comics company Cryptozoic. The product you will be making these ads for is called “Epic Spell Wars of the Battle Wizards” (yes, really). It’s a collectible card game (like Magic the Gathering, if you are familiar with that). Here are the basic specs of the ads:

• Two sizes: 300×250 and 728×90
• Each ad should be between 10-15 seconds length
• The file size of the ads will be under 100K (we’ll talk about strategies for doing this)

Step 1: Create Storyboards

Usually with a project like this, I’ll get a script with the text that should go on the ads, the art and often the fonts they want used, and some direction on how to use it. I haven’t gotten a script from Cryptozoic for this, just a general explanation of the game. If I don’t get one in by the end of Wednesday, I’ll write one and post it for you. The creative assets are in a Dropbox that I have given you all access to. You should have already gotten an email from me about this.

For next week, what I want you to do is create a storyboard in photoshop for your two ad sizes. Here’s some examples:

Your storyboard should depict each “scene” of the ad, each moment where distinct pieces of the script or action resolve. You should create these in Photoshop, but bring in next week as a PDF.

Homework

1. Make a short animation using the Bone tool – You can create your own character/object and “rig” or use mine.

2. Create storyboards for the two ad sizes.

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

Motion Presets

Flash has a number of motion presets that come with the program. I would recommend against using these extensively without modifying them, they can give your project a “canned” look.

You access the motion preset panel through Window > Motion Presets. To apply a preset, select the object you wish to apply it to, and hit the apply button in the motion preset panel.

You can also create your own preset by selecting a tween on the stage, and hitting the new preset button in the bottom left of the motion preset panel.

Easing

Easing allows you to add more realistic motion to your tweens. When you create a tween between two keyframes, Flash calculates the motion to distribute it equally across the span. If you look at the motion path, you will see that the dots that represent the frames are equally spaced between the keyframes. This means that the object moves at a steady rate during that span. But this isn’t natural! Usually there is acceleration and deceleration when something starts and stops in the real world. This is where easing comes in!

Applying Ease In the Properties Panel

You can apply an ease to a motion tween directly in the properties panel if you have the tween selected, not the object that is tweened:

You can increase or decrease the level of ease by clicking on the number and dragging the mouse left or right (scrubbing).

Easing In vs. Easing Out

Easing in means you start slow and go faster, in other words, the object is accelerating.

Easing out means you start fast, at full speed, and slow down to a stop, the object is decelerating.

When setting ease in the properties panel, easing in is represented by a negative number, and easing out is represented by a positive number.

When you apply ease in the properties panel, it is applied to all tweened properties. If you want to apply ease more specifically, you will use the motion editor.

Applying Ease With the Motion Editor

The motion editor allows you to see all the tweened properties in a span separately in a graphical display. You can access the motion editor in a tab next to the timeline tab, and toggle between them.

Each tweened property is represented as a line on the graph. If no easing is applied, the line will be straight and solid. If easing is applied, there will be a solid line and a dashed line, one representing the eased motion and one representing the original motion. There are easing presets that you can apply to your tween, and then customize, or you can create your own custom easing.

To apply an ease preset, first add it at the bottom of the motion editor, and then apply it using the pull down next to the property name.

You can also create custom easing by selecting “Custom” in the eases pulldown menu, and then editing the ease curve the same way you would a path.

Working With Text

You can work with text in Flash by either bring graphic text into Flash from another program or creating it directly in Flash.

If you want to create text in Flash, use the Type tool. CS5 introduced a new way of handling type: TLF (Text Layout Framework). You get a little more control over the type in CS5, if you are using CS4 it’s more limited. You can also use the old style of text in CS5 by choosing “Classic Text”. When choosing which to use, keep the following in mind:

• TLF text does not support Postscript Type 1 fonts, only OpenType and TrueType
• TLF text does not work as a mask (we’ll talk about what that means later)
• You won’t see the effect of the anti-aliasing settings on TLF text until you test or publish the movie

When creating type for animation, rather than input or output in an interactive application, choose “Read Only” for TLF text, or “Static” for Classic Text. When we get to interactivity, we’ll talk about the other types.

To change type into shapes, choose Modify > Break Apart

 Masks

Any layer can serve as a mask for other layers. A mask layer creates a hole that lets the layers underneath show through. This can make for interesting reveal effects when you are animating. To create a mask layer, control+click on the layer name in the timeline and choose “Mask”:

You can mask multiple layers, but only one layer can be the mask for those layers.

Homework

Take your favorite short poem or verse from a longer poem and animate it. Use a variety of techniques to animate the letters, incorporating what we learned today about masking and easing. Use the write-on technique to animate at least one word (yes, this will take a long time!). You can choose whether to create the type in Flash or to bring it in from Photoshop or Illustrator.

>> 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
• Motion Paths

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 reusable static images. They have no timeline of their own and therefore take up much less space in the file.
• Use Button symbols to create interactive buttons that respond to mouse clicks, rollovers, or other actions.
• Use Movie Clip symbols  to create reusable pieces 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 interactive buttons.

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 are changes.

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. They are accessible through the properties panel:

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 contigious tweens on the same layer, or to split a tween in two.

Homework

1. Create a 10 – 15 second (240 – 360 frames at 24fps) animated scene. Use autumn (even though it doesn’t feel like it outside!) as the theme of your animation. Create the scene first in Photoshop or Illustrator or some combination of the two, then import your files or layers into Flash. Use motion tweens on the timeline as well as in nested animations. Tween all the properties you can as appropriate – scale, position, color effects, filters. Remember that just about anything in the properties and transform panels can be tweened, but stay away from the 3D properties for now, we’ll get to those later.

Topics:

• Introductions
• The Class Blog
• Class Syllabus and Schedule
• Why Flash?
• Introduction to the Flash Interface
• Using the Drawing Tools
• Using Layers to Organize Your Project
• Pulblish Settings, Testing Your Movie

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. Shape
2. Pen
3. Pencil
4. Brush
5. Line
6. Paint
7. Ink
8. Select
9. Sub-selection
10. Eraser
11. Transform
12. Merge Drawing vs. Object Drawing

>> Drawing reference from Adobe Help

Using LAyers and Groups to Organize your movie

1. Adding Layers
2. Deleting Layers
3. Moving Layers
4. Hiding/Showing/Locking Layers
5. Creating 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

In-Class Exercise

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

Homework

1. Create a homework page on your Web site where you will post all your homework for the class. Remember to compress the .fla files before you post them.

2. Using the drawing tools we covered today, create a drawing in Flash of a scene outside a window (in your apartment, bedroom, your favorite coffeeshop). This drawing should be complex and detailed, using as many objects, layers and groups as necessary. Post the .fla and .swf files to your homework page on your Web site, or bring the .fla and .swf files to class next week and be prepared to present it to the class. If possible, bring us a photo of the original scene for comparison.

2. Find a Flash toy, game, art piece, etc online that you are inspired by and want to share with the class.