Week 5: Project 1 Presentations

Posted on March 5, 2012 by cgarnier

TOPICS:

  • Project 1 Presentations
  • Optimizing Your Flash Files

HOMEWORK

Based on todays critique, revise your greeting card and turn in the final version next week!

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.
Posted in Uncategorized | Leave a comment

Week 4: Advanced Motion, Text, Masks

Posted on February 27, 2012 by cgarnier

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

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:

Applying Ease in the Properties Panel

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.

The Motion Editor – No Ease Applied

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.

 

In-Class Exercise: Using Masks to Create a Write-On Effect

You can use a series of masks to create the illusion that text or other linework is being written on to the stage by an invisible pen.

This movie requires Flash Player 9

Here’s some tips for making this method work:

1. You must break your letters into individual pieces. Everytime you would pick up the “pen” or one stroke crosses another, you will need to break the letter into a piece. Everyone thinks they can skip this step and just use one mask. You can’t. Believe me. I’ve tried.

2. Each piece must have its own masks.

3. If the shape tween gets funky in the middle, create another keyframe! In my example I could get away with just two keyframes, but if your letter has curves or corners, you will have to create some intermediary keyframes.

4. Masks only work with fills, not strokes. So you can use a brush as your mask, but not the pencil.

Homework

Animate your greeting card! Use all the skills you have learned so far, as appropriate. Combine these techniques as appropriate:

– Frame-by-Frame Animation
– Tweens: Shape, Classic, and Motion
– Using MovieClips or Graphic Symbols for nested animation
– **REQUIRED! Text and Masks: Try the write-on technique for at least one word of your animation!

Next week you will present your cards in class!

Posted in Lessons | Leave a comment

Week 3: Symbols, Importing, Motion Tweens and Paths

Posted on February 21, 2012 by cgarnier

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:

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:

JibJab

Blue Mountain

American Greetings

Jaquie Lawson

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:

This movie requires Flash Player 9

 

 

 

Posted in Uncategorized | Leave a comment

Week 2: Animation Basics

Posted on February 6, 2012 by cgarnier

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.

Pages: 1 2 3 4 5
Posted in Lessons | Leave a comment

Week 1: Welcome to Interactive Animation

Posted on January 29, 2012 by cgarnier

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
  • Keyboard Shortcuts
  • 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

1. 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. When you get to class, put it in my dropbox on the ADGA server.

2. Check your Citytech email for your OpenLab account and activate it, then find the course under “Courses” and request membership to the course.

Posted in Lessons | Leave a comment