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