shape tweening

Shape Tweening

Shape Tweening

Shape tweening requirements:

Vector-based objectsNo grouped objectsNo bitmapsNo symbolsNo type, type must be broken apart into a shape

Keyframes

…concept from traditional Animation.

They are the important frames which help define what the major motion changes will be.

Tweening

•Borrowed from traditional cel animation terminology, slang for “in-betweening”

•The “in-betweener” (animator) draws all the frames in between the key frames that the lead animator drew

Tweening with Computers

•Computers automate the tweening process by interpolating the frames in between two keyframes

•Interpolate means the computer creates or draws the frames between keyframes

•The animation software interpolates the changes and draws the changes frame by frame

Shape Tweening in Flash

•Animates between keyframes containing shape objects

•Animates (morphs) colors, shapes, gradients, positions, transformation, broken apart text, etc.

•Differences interpolated by Flash (frames drawn between keyframes)

Shape Tweening Merge Objects

•When using the shapes tool to draw shapes there are two drawing modes

Merge mode (default)Object drawing mode

Merge Objects vs Drawing Objects

•Recommended to select the “Default/Merge Drawing mode” if you want to shape tween.

•Make sure Object Drawing button is not selected at bottom of tool bar

•You can shape tween an object displayed as a “Drawing Object ” on the property inspector. This object was created in the “Object drawing mode”.

Shape Tweening

Yes, shape tweening:Shapes drawn in merge modeshape of objectcolor of objectposition of object on stagethe transformation of objectbroken apart textgradients

No, shape tweening:No object drawing mode (shapes)No grouped objectsNo symbolsNo text (unbroken)

Successful Shape Tweening

•Green Solid line arrow (on layer in timeline) signifies an active shape tween

•Broken line with no arrow signifies that tween is not working

Extending a tween

•Selecting both layers (using shift key) and then pressing F5 will add one more frame to animation and extend the tween/animation time

•Selecting a particular frame will extend frame out to that frame

Shape Tweening Demo

•Create a new project•Draw a circle on stage, make sure to draw in “merge mode”•Select frame 12, F6(Insert Keyframe), move to new position•Create a new layer, draw a square, select frame 12, F6 (Insert keyframe), change position and size•Create a new layer, select the Text tool, on stage type the letter x, while x is selected Modify>Break Apart (converts to shape)•Add a keyframe to frame 12, change position and color•Tween layers, select all three layers and control+click/cmnd+click and select shape tween

Shape Morphing using Shape Tweening

Creates the effect of morphing between:

Object shapesObject transformationsGradientsObject colorText that is broken apart and tweened into a dif shape

Shape Morphing Text

•Using the type tool type your name on stage•Select the text and break apart by pressing cntrl+b (pc) cmnd+b (mac), press a second time to convert to shape (must press cmnd+d 2x)•Insert a blank key frame at frame 24•Draw a circle at frame 24, make sure to draw in merge mode•Duplicate circle control+d/cmnd+d•Duplicate circle so you have the same amount of cirles as letters in the first keyframe•Shape tween text by clicking anywhere between two key frames control+click/cmnd+click and select shape tween

Shape Hinting

•Shape hinting provides more options than the automation that occurs with regular shape tweening.•Use shape hinting to control more complex or improbable shape changes.•Shape hints identify points that should correspond in starting and ending shapes•Shape hinting useful for undesired effects of shape morphing

Adding shape hinting to a shape tween

•Select the first keyframe

click Modify>Shape>Add Shape Hint•Red circle displays shape hint (can move)•Go to the next keyframe and drag red circle (shape hint) to new location•This second shape hint should turn green if accepted•Shape hint helps define the shape morphing/tweening


•Shape hints contain letters (a through z) for identifying which points correspond in the starting and ending shape.•You can use up to 26 shape hints.•Shape hints are yellow in a starting keyframe, green in an acceptable ending keyframe, and red when not on aceptable


•Shape hints work best if you place them in counterclockwise order beginning at the top left corner of the shape •In complex shape tweening, create intermediate shapes and tween them instead of just defining a starting and ending shape•Make sure that shape hints are logical•For example, if you're using three shape hints for two dif triangles, they must be in a similar position on the original triangle and on the new triangle to be tweened more desirable

Shape hinting continued

•You can add multiple shape hints by repeating these steps

•Select the next keyframe

click Modify>Shape>Add Shape Hint•Remove any hints by going to first frame of tween where shape hint was added and Ctrl+click(pc) or Cmnd+click(mac) to remove

View All Shape Hints

•To View all Shape Hints:•Select View > Show Shape Hints. The layer and keyframe that contains shape hints must be active for Show Shape Hints to be available•To remove a shape hint, drag it off the Stage•To remove all shape hints:•Select Modify > Shape > Remove All Hints.

Distribute to Layers

•When different objects are on the same layer and you want to Shape Tween each object individually, the distribute to layers options will move each object to its own layer•Click on frame 1 of the desired layer. •Select all, cmnd+A or ctrl+A•Modify>Timeline>Distribute to Layers

Symbols and Instances

Symbol and Instances

Chapter Overview-Symbol and Instance Structure-Creating graphic symbols-Library-Registration point-Creating Symbol Instances-Editing Symbols-Editing Symbol Instances-Color Styles-Animating Graphic Symbols-Alpha Transparency-Animating Instances by Modifying the

Registration Point

Flash has 3 Types of Symbols

Graphic SymbolsButton SymbolsMovie Clip Symbols

The Structure of Symbols and Instances

•Symbols represent an object saved or stored to the library •A symbol can be reused in a movie•Each re-use of a symbol is referred to as an instance•An instance is simply a copy of the symbol•The original symbol is stored in the library and an instance is a copy of it on stage

Graphic Symbols

•Can consist of static or animated content•Graphic symbols have their own timelines with infinite layers•Graphic symbols are “Timeline Dependent” •Means they play only when the main timeline is playing and the main timeline must contain the same number of frames as in a graphic symbols timeline in order for the entire graphic symbols timeline to play

Button Symbols

•Control interactivity•Button symbols have their own unique timeline with 4 frames representing the Up, Over, Down, and Hit states of a buttton•A button can have an Action associated with its Instance Name

Movie Clip Symbols

•Can consist of static or animated content•Movie clip symbols have their own timelines with infinite layers•Movie clip symbols are “Timeline Independent” •Means they play no matter what is happening in the main movie timeline, if the Scene 1 timeline has stopped and the movieclip still appears in that frame then it will continue to play its own timeline

Creating a symbol

•Drag object from stage into the library using selection tool•Or select object and Modify>Convert to Symbol (F8)•Name •Choose Graphic or Movie clip or Button•Choose middle box for its Registration (center point)•Click on OK•Symbol is now in Library and an instance is on stage

Creating a symbol 6 dif ways

• Select the Insert Menu and New Symbol • Drag artwork from the stage to the library•Select the object and from the Modify Menu, select Convert to Symbol•Keyboard shortcut, Ctrl+F8(pc) or Cmd+F8 (Mac)•New Symbol in the Library Option menu (top right library)•Click on the New Symbol Button (lower left of the library)

Symbol vs Instance

•Symbols help flash create smaller swf files•Symbols are easy to update•Create symbols for any of the objects that you plan to reuse in a movie.•Change to the original symbol effect all instances•Instances are copies of the symbol•Instances can be modified individually via the property inspector•Infinite use of instances still reference the original symbol

Symbol Naming

•Symbols are referenced in Flash’s scripting language (ActionScript)•It is important to follow specific naming conventions•Use lowercase letters (a-z) and numbers (1-9).•Don’t use spaces. Word names should be separated with underscores or caps•Don’t use special characters (!, @, # $, %, & , etc.) or forward slashes/ since slashes are interpreted as a path•Don’t use periods to separate the file name with the exception of the extension.

Symbol Naming Example

Acceptable naming:

myBox or my_box

Begin names with a lowercase letters and use caps

(upper case letters) for all of the sequential words

Not acceptable:

Don’t use periods to separate the file name with the exception of the extension.

Movie.fla normal naming

my.first.movie not acceptable

Don’t use double extensions (myFirstMovie.fla.html).

Instance modifications

•Add instances onto the stage by dragging any symbol in the library out to the stage•Select an instance on the stage and apply a transformation•Select an instance on the stage and adjust the registration point with the transformation tool•You can modify each instance individually using the property inspector•Delete one of the instances from the stage but doesn’t affect original symbol•Open the original symbol and change its color, it effects all instances

Editing a symbol

•In order to edit an existing symbol double click on the symbol either on stage or in the library•It will take you to the symbols timeline•Make changes and then exit by clicking on the Scene 1 link or the arrow, located at the top of the timeline (on the Edit Bar Toolbar)•All instances of the symbol will take on these changes

Modifying Symbols Demo

•Create a symbol, add several instances to the stage

•Double click on any instance of symbol to edit the original symbol, change its color

•Or double click on symbol in library, exit symbol

•Both methods allow you to modify symbol and all instances of symbol will have these changes

•Once changes have been made you will have to exit symbol edit screen by clicking on the Scene 1 link or the back arrow both located above the timeline (on the Edit Bar Toolbar)

Parent Child Relationship

•The parent child relationship helps describe how the dif objects relate to each other• Instances on the stage are related to the master symbols in the library•Instances can be thought of as the child or children•Changes made to a symbol will affect all instances•A symbol can be thought of as the parent

Symbols demo

•Window>Library (opens library panel)•Drag objects from stage into the library using selection tool

Or Modify>Convert to Symbol (F8)•Name, choose Graphic or Move clip, choose middle box for its Registration (center point), click on OK•Symbol is now in Library and an instance is on stage•Deleting an instance does not delete from library• To delete the graphic symbol forever, select it in the library and click on the trash can.

Modifying Instances Only

To edit a particular instance only, meaning only change one instance and not the symbol where all instances are changed you can do the following:

•Select the desired instance on stageMake sure the properties inspector is open

(Window>Properties>Properties)

•Select the Color drop down box and select Brightness and adjust the Brightness level using the % bar (other options, Tint, Alpha (Transparency), Advanced, or none)

Note: In order to animate individual instances you will want to put each instance on a separate layer

Graphic symbols demo

•Draw a shape or import a graphic to your stage•Open Library panel Window>Library (or CMD L)•Drag object from stage into the library using selection tool or select object and click on Modify>Convert to Symbol (F8)•Name, choose Graphic, choose middle box for its Registration (center point), click on OK•Symbol is now in Library and an instance is on stage (can have infinite instances of a symbol)•Deleting an instance on stage does not delete from library•Double click instance to edit symbol in place•Must exit symbol edit screen in order to return to project timeline•Single click to edit only edit instance using prop. insp.•Or edit symbol by double clicking on symbol in the library

Symbol Instances demo

•Draw a star using the polystar tool•Select start and convert to symbol (f8)•Name the object, choose Graphic, click on OK•The symbol is now in the Library and an instance of it is on stage•Add 5 more instances onto the stage•Modify each instance individually using the prop inspect •Select the Color drop down box and select Tint and adjust (other options, Brightness, Alpha, Advanced)•Open the original symbol and change its color, all instances will now be changed

Duplicating a Symbol

•You can duplicate an existing symbol to create a new symbol with unique features•Select the symbol in the library•From the Library drop down menu, select duplicate and give the symbol a new name•Or select symbol in library and control+click (mac) or rt+click (pc) and pick duplicate•A new symbol appears in the library, unrelated to the previous symbol•Double click on its name to rename•Double click on symbol icon in library to edit in the symbol’s timeline

Animating graphic symbols demo

•Create a symbol•Double click on symbol in library•Within the graphic symbol timeline create a blank key frame on frame 24 and draw a new object•Shape tween between the two objects•Create a key frame on frame 48 and using the color mixer (shift f9) set the alpha to 0 (select fill color then modify alpha)•Shape tween this key frame•Exit symbol timeline (click on Scene 1)•Drag instance of symbol onto timeline•Add frames to Scene 1 timeline (must have 48 frames to play symbols timeline)

Copy frames and paste frames

•To copy certain frames select the desired frames•Hold down the shift key to select multiple frames•Select Edit > Timeline > Copy Frames•Or control+click (mac) or rt+click (pc) and pick copy frames•Move playhead to new frame Edit > Timeline > Paste Frames •Or control+click (mac) or rt+click (pc) and pick paste frames•To copy a layer, click the layer name in the Timeline to select the entire layer•Select Edit > Timeline > Copy Frames•Insert a new layer, then Edit > Timeline > Paste Frames

Modifying registration point demo

•Create a symbol (picture, square, or circle gradient) •Edit symbol•Modify registration point using the free transform tool•Add key frame on frame 24•Transform or move shape at second key frame•Create motion tween (within symbol timeline) •Exit symbol timeline by clicking on Scene 1•Add frames to Scene 1 timeline (must have 24 frames to play symbol graphic)•Add a blank key frame to frame 25•Add a second symbol instance to this frame•Motion tween between all key frames•Select first key frame and under the Properties insp. for “rotate:” select CW and type 5 for "times“

Adding Alpha Transparency

•Objects like shapes you can use the Color Mixer•If you are editing a shape, NOT a graphic or movie symbol instance, use the fill or color mixer to adjust the alpha setting•Select the desired keyframe of the shape (appears as a dotted mesh on the stage)•Open the color mixer and adjust the alpha setting, top right•Objects like Graphic or Movie Clip symbols use the Properties Inspector•Select instance of symbol and then set the alpha on the prop insp

-end

shape tweening

Documents