Flash CS3 Pro HOT CH 5 Shape Tweening

Shape tweening requirements: Vector-based objects No grouped objects No bitmaps No symbols No type, type must be broken apart into a shape

Keyframes …concept from Animation. They are the important frames which help define what the 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

Tweeningwith 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 (inserted between) by Flash

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 Make sure to select the “Merge Drawing mode” if you want to shape tween. Make sure Object Drawing button is not selected at bottom of tool bar You can not 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 mode shape of object color of object position of object on stage the transformation of object broken apart text gradients No, shape tweening: No object drawing mode (shapes) No grouped objects No symbols No 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 on the properties inspector select Shape from tween options

Shape Morphing in Flash Shape Tweening creates the effect of morphing between: Object shapes Object transformations Gradients Object color Text 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 Shape tween text by clicking anywhere between two key frames and selecting Shape in the properties inspector

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

Adding shape hinting to a shape tween 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

Adding shape hinting to a shape tween 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

Flash CS3 Pro HOT CH 6 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 Symbols Button Symbols Movie 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 attached to it using the Action panel f9 (Actionscript 2.0)

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 stage Make 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