Lecture 9

1. Lecture 9 • Flash • Introduction • Timeline • Layers • Symbol • Keyframe • Tweened Animations • Demonstration • Creating Tweened Animations • Shape Tween • Motion Tween • Classic Tween • Working with Text • Adding & Editing Text • Animating Text • Animating Individual Letters • Morphing Text • Animating Bitmaps • Import Bitmap • Bitmap  Symbol • Animate and Distort Bitmap • Modify Color and Transparency of Bitmap • Animating along Motion Path • Creating Mask Effect

2. Flash • Develop Rich Internet Content and Applications • Design motion graphics or build data-driven applications • Flash Movies = Graphics, Text, Animation, • Mostly compact vector graphics • Can contain imported video, bitmap graphics, and sounds. • Incorporate interactivity • Create nonlinear movies that can interact with other Web apps • Create navigation controls • Animated logos • Long-form animations with synchronized sound • Complete, sensory-rich Web sites • Flash Document = “.fla” filename extension • File > Save / Save As • Publish Flash Document (.FLA)  Flash Movie (.SWF) • Macromedia Flash file format (SWF) is the format for deploying Flash content

3. Workspace • Workspace Settings: Designer or Classic • Timeline • Controls movie’s content over time • Consists of frames and keyframes • Layers to organize content • Stage • Draw or import artwork, add text or media • Compose content for individual keyframes • Properties Panel • Toolbox • Panels • Library:Stores reusable elements called Symbols • ActionScript:Built-in programming language: version 2.0 or 3.0

4. Document Properties and Grid, Rulers & Guides • Create Document and set its Properties • File > New • General: Flash File ActionScript 2.0 used in CS4+ demosActionScript 3.0 for Flash CC (and 2.0 not supported amymore) • Modify > Document • Frame Rate • Dimensions • Background color • Using Grid, Rulers and Guides • Grid • View > Grid > Show Grid / Snap to Grid • Rulers • View > Rulers • Guides • Drag horizontal and vertical guides from rulers onto Stage • View > Guides > Show Guides / Snap to Guides

5. Timeline

6. Layers • Layers = Stack of “transparent sheets of acetate” • Insert > Timeline > Layer or Click “Insert Layer” icon in Timeline • Drag & Drop Layer to change its position in stack • Name (double-click text), Hide, Lock Folder • Layer Folder = Organize Layers • Insert > Timeline > Layer Folder or Click “Insert Layer Folder” icon in Timeline • Modify Layer • Select layer to make it active (only one layer can be active) • Pencil icon = Layer is active • Guide Layers Make drawing and editing easier • Mask Layers Help to create sophisticated effects

7. Resource: Copying Layer & Layer Folder and Paste in Place • Copy Layer • Click layer name to select the entire layer. • Edit > Timeline > Copy Frames. • Click Add Layer button to create new layer. • Select new layer and choose Edit > Timeline > Paste Frames. • Copy Contents of Layer Folder • Click triangle to left of folder name to collapse it, if necessary. • Click folder name to select the entire folder. • Edit > Timeline Copy Frames. • Insert > Timeline > Layer Folder to create new folder. • Select new folder and choose Edit > Timeline > Paste Frames. • Paste in Same Position Edit > Paste in Place

8. Tools Arrow (Selection) tool and Modifiers: snap to, smooth, straight • Reshaping lines and shapes  Reshaping pointer Free Transform tool and its modifiers: scale, rotate, skew etc. • Transform dialog panel: Modify > Transform Lasso tool and its modifiers = polygon etc. Text tool Circle and Square tools and Modifiers: Object Drawing on / off • Stroke and Fill properties of graphic in Property Inspector Pencil tool and Modifiers = straight, smooth etc. Paint Bucket tool and Modifiers = fill large gaps etc. • Apply Gradient and use Fill Transform tool Eraser tool Zoom tool and Modifiers: zoom in, zoom out (or use Alt-click) Line Color Fill Color Tool Options

9. Graphic Objects • Graphic Objects = Items on Stage • Move, copy, delete, transform, stack, align, and group graphic objects. • Link graphic object to a URL. • Keep in mind: modifying lines and shapes can alter other lines and shapes on the same layer if Object Drawing is not selected • Must first Select Object to Modify it

10. Overlapping Shapes in Flash – if shapes were created Object Drawing off • Use Pencil, Line, Oval, Rectangle, or Brush tool to draw line across another line or painted shape, overlapping lines are divided into segments at the intersection points. • Use Arrow tool to select, move, reshape each segment individually • To avoid inadvertently altering shapes / lines by overlapping them • Group shapes • Use Object Drawing • Place on different layers

11. Resource: Object Manipulations • Grouping Objects • Select objects on Stage to group • Modify > Group • Stacking Objects • Within a layer, objects stacked based on the order of creation • Modify > Arrange > Bring to Front or Send to Back Modify > Arrange > Bring Forward or Send Backward • Transforming Objects Free Transform tool in Tools • Modify > Transform > … free transform, rotate, skew, scale, or distort • Modify > Transform > Remove Transform

12. Text • Text tool in Toolbox • Properties Inspector to change text properties • Static Texttype • Appearance determined when you author movie. • Dynamic Texttype • Updated text, such as sports scores or stock quotes. • Input Text fieldstype • Users enter text for forms, surveys, or other purposes. • Transform Text • Rotating, scaling, skewing, and flipping it - and still edit characters • Text  Object & Grouped • Horizontal Text Linked to URLs • Select text and enter URL in Properties Inspector : Options

13. Resource: Reshaping Text • Reshaping Text into its individual letter shapes • Select text with Arrow tool • Modify > Break Apart • Distribute Text Letters to Layers • Select all letters • Modify > Timeline > Distribute to Layers • Organize letters in Layer Folder • Insert > Timeline > Layer Folder • Select layers containing letters • Drag & drop in Layer Folder Static Text • Morph Text • Select Text and apply “Modify > Break Apart” TWICE • Apply Shape Tween !

14. Symbols and Instances • Symbols = Reusable Elements in Document • Symbols = graphics, buttons, video clips, sound files, or fonts • Symbol stored in file's library • Use symbols for every element that appears more than once. • Create Instance • Place symbol on Stage, you create an instance of that symbol. • Modify properties of instance without affecting master symbol • Edit master symbol to change all instances. • Symbols Reduce File Size • Flash stores symbol in the file only once  greatly reduces file size

15. Symbol - Behavior Types • Graphic Symbols for static images • Button Symbols to create interactive buttons • Movie Clip Symbols to create reusable pieces of animation • Insert > New Symbol • Convert Element to Symbol • Insert > Convert to Symbol • Drag the selection to the Library panel • Convert to Symbol from the context menu

16. Keyframes • Keyframe = New Instance of Object Appears • Property Keyframe = Define Object’s Property Change • Use Keyframes to Create Change in Animation • Flash can tween, or fill in, frames between keyframes • Create Keyframe • Select a frame in Timeline • Insert > Timeline > Keyframe • Frame Management • Delete a frame, keyframe, or frame sequence, • Select and Edit > Timeline > Remove Frame or Right-Click (Windows) • Extend duration of Keyframe • Select, hold and then dragkeyframe to new final frame • Change length of a tweened sequence, drag the beginning or ending keyframe left or right.

17. Animation • Animate Objects or Shapes • Change object’s position, shape, size, color, opacity, rotation … • Frame-by-frame Animation • Create a separate image for each keyframe. • Tweened Animation • Create first and last keyframes of animation orSpecify object properties in different frames • Flash creates frames in between Motion or Classic or Shape Tween • Frame Labels useful for identifying Keyframes • Use instead of frame numbers (which can change)

18. Tweened Animation • Select Keyframe, Right Click and Select Tween option • Motion Tween • ChangePosition, Size, Rotation, Alpha of Object • Specify object property in one frame and another value for that same property in another frame. • Classic Tween • Like motion tweens, but more complex to create • Shape Tween • Change Shape • If you want Flash to tween the movement of more than one object, each must be on a separate layer. • Select elements • Use Modify > Timeline > Distribute to Layers

19. Animations – Representations in Timeline • Motion Tween • Black dot at beginning keyframe; intermediate tweened frames have black arrow with a light-blue background. • Classic Tween • Black dot at beginning keyframe; intermediate frames have a black arrow with a blue background. • Shape Tween • Black dot at beginning keyframe; intermediate frames have a black arrow with a light-green background. • Dashed line = • Tween is broken or incomplete Cause? • Final keyframe missing • Classic Motion Tween: does NOT contain symbol, groups or type • Shape Tween: contains symbol, groups or type

20. Motion Tween • Used for tweening: • Instances of Symbol • Type = Text • Instances and type tween: • Position, Size, Rotation, and Skew • Instances tween: • Color shifts and Fade in / out (= Alpha) • To Motion Tween a Bitmap • Bitmap needs to be converted into Symbol • Modify > Convert to Symbol • To tween the color of type  convert into symbols

21. Create Motion Tween • Layer needs to contain Symbols or Type • and uses Property Keyframes • and can have only one object instance • Select keyframe • Insert > Motion Tween orRight click frame, select “Motion Tween” • Select frame and then select object • Move to new location (notice the motion trail)and/or In Properties panel, change object property Repeat steps 3 and 4

22. Classic Tween • Layer needs to contain Symbols or Groups or Typeand uses Keyframes • Create Classic Tween • Create first keyframe • Insert > Classic Tween orRight click frame, select “Classic Tween” Automatically turns content into Graphic Symbol • In last frame, create keyframe and move object to new location • Create starting and ending keyframes • Select two keyframes and frames in between • Insert > Classic TweenorRight click frame, select “Classic Tween” Automatically turns start and end keyframes into symbols

23. Resource: Motion versus Classic Tween • Motion tween uses property keyframes, whereas Classic tween uses keyframes. • Both motion and classic tweens allow only specific types of objects to be tweened. • Motion tween will convert all non-allowed object types to Movie Clip symbols. • Classic tween will convert them to Graphic symbols. • Motion tweens consider text a tweenable type. Classic tweens convert text objects to graphic symbols. • Only classic tweens allow frame scripts. • Only motion tweens can be used to animate 3D objects. • Only motion tweens can be saved as motion presets. • You can use classic tweens to animate between two different color effects, such as tint and alpha transparency. Motion tweens can apply one color effect per tween. • With motion tweens, you cannot swap symbols or set the frame number of a graphic symbol to display in a property keyframe. Animations that include these techniques require classic tweens.

24. Shape Tweening • Similar to Morphing • One shape appears to change into another shape over time • Use Ungrouped Graphics to Tween Shapes • Create or select first keyframe • Create or place artwork in first keyframe • Create second keyframe and select it • Select artwork in second keyframe • Modify shape, color, or position of artwork(e.g. use “Free Transform” tool) • Select first keyframe in Timeline • Insert > Shape Tween orRight click frame, select “Shape Tween” • Properties panel: select option from “Blend” menu: • Distributive: intermediate shapes smoother and more irregular. • Angular: preserves apparent corners and straight lines.

25. Imported Artwork and Video • Bitmap • Can apply compression and anti-aliasing • Place directly in Flash document • Use as a fill • Convert to vector artwork • Video • Import video in MOV, AVI, or MPEG format • Importing video clips as embedded files • Video clip becomes part of the movie, like an imported bitmap or vector artwork file. You can publish a movie with embedded video as a Flash movie. • Fireworks PNG • Can import files as editable objects that you can modify in Flash, or as flattened files that you can edit and update in Fireworks. • File > Import  Fireworks PNG Import Settings dialog box • If you import a PNG file from Fireworks by cutting and pasting, the file is converted to a bitmap.

26. Previewing Movies • Authoring environment • Control > Play • Window > Toolbars > Controller and click Play • Test Movie command • Control > Test Movie or Control > Test Scene • Web Browser • File > Publish Preview > HTML

27. Exporting • File > Export Movie or File > Export Image • Flash Movie • Export entire document as a Flash movie, to place the movie in another application, such as Dreamweaver. • Windows AVI (Windows) • Exports a movie as Windows video, but discards any interactivity • Export a movie directly into a single format: GIF, JPEG, PNG, AVI • Animated GIF, GIF Sequence, and GIF Image

28. Publishing • Flash Document (FLA file)  Flash Movie (SWF file) • By default, creates Flash SWF file and HTML document with inserted movie. If you don’t want HTML, deselect it. • Choose Publishing File Formats: SWF or GIF, JPEG, PNG, and QuickTime • File > Publish • Test Before Publishing • Test Movie and Test Scene commands • Unicode Text Encoding • Exporting vs. Publishing FLA files • Exporting similar to publishing FLA files in alternative file formats, except that settings for each file format are not stored with FLA file.

29. Step 0 – Download files, Launch Flash, Create Document • Download Files • http://scils.rutgers.edu/~aspoerri/Teaching/MPOnline/Lectures/Lecture9/stepbystep/ • Launch Flash • Start > Macromedia > Flash • Create Flash Document and Set its Properties • File > New : General: Flash File (CS4+: ActionScript 2.0; CC: ActionScript 3.0) • Modify > Document or use Property Inspector • Frame Rate = 12 Dimensions = 600 x 400 Background color = White • Using Grid, Rulers and Guides • Rulers View > Rulers • Guides • View > Guides > Show Guides • Drag horizontal (200) and vertical (300) guides from rulers onto Stage

30. Step 1 – Keyframes and Create Shapes • Select Layer 1 and name it “Shape Tween” • Select first keyframe in Timeline • Select Circle Tool and Draw Circle in the center of Stage • Select Arrow Tool to select Circle (both Line and Fill!) • In Property Inspector, set Width = 50 and Height = 50 • In Property Inspector, set Stroke and Fill properties of circle • Create second keyframe at frame = 30 • Select frame = 30 and use Insert > Timeline > Keyframe • Select circle using the Arrow tool in second keyframe • Modify position by moving circle • Modify size by using Free Transform • Select Arrow tool and deselect circle • Modify shape by using “Arrow” tool to change contour (notice how cursor changes)

31. Step 2a – Shape & Motion Tween and Create Layer with Text • Select first keyframe in Timeline • Specify Shape Tweenfor first keyframe • Insert > Shape Tweenor Right Click and Select “Shape Tween” • Properties Inspector: select option from “Blend” menu: Distributive • Play Movie so far • Control > Play or Display Controls: Window > Toolbars > Controls • Create New Layer and Name = Text • Insert > Timeline > Layer and select it • Create Text = “Hello” • Select first frame and Select Text tool and type “Hello” • Specify Motion Tweenfor first keyframe of Text Layer • Create property keyframeat frame = 30 • Select text using the Arrow tool in frame • Modify position by moving text • Modify size, angle and distort by using Free Transform

32. Step 2b – Animating Individual Letters • Create and Select Text in “text” layer at keyframe = 1 • Break Text into Individual Letters using Modify > Break Apart • Distribute Individual Letters to Separate Layers • Modify > Timeline > Distribute to Layers • Select all the keyframes that contain a letter at frame = 1 and apply Motion Tween • Select frame = 30 • Select a letter and move it to desired location • Repeat step 6 for next letter

33. Step 2c – Morphing Text • Create and Select Text in “text” layer at keyframe = 1 • Break Text into Individual Shapesby applying Modify > Break Apart twice! • Create Blank Keyframe at frame = 30 • Create and Select Text in “text” layer at keyframe = 30 • Break Text into Individual Shapesby applying Modify > Break Apart twice! • Select first keyframe and Shape Tween

34. Step 3a – Animating Bitmap • Select first Keyframe • File > Importto Stage “bilbaodog” (creates record in Library) • Convert “bilbaodog” to Movie Clip symbol • Modify > Convert to Symbol: Movie Clip = “dog” • Apply Motion Tween at first keyframe • Insert Frame at Frame = 30 (if needed) • Select instance of “dog” in Frame = 30 and change position • Select instance of “dog” in Frame = 1 and Distort it using Free Transform tool • Select instance of “dog” in Frame = 30 and Remove Transform using Modify > Transform > Remove Transform • Fade in “dog” • Select instance in Frame = 30 and Properties > Color Effect: Set Alpha = 100% • Select instance in Frame = 1 and Properties: Set Alpha = 0%

35. Step 3b – Multi-part Motion Tween • Select Frame = 31 and Insert Blank Keyframe • Select dog in Frame = 30 and Edit > Copy • Select Frame = 31 and Edit > Paste in Place • Select Frame = 46 and Insert Keyframe using Insert > Timeline > Keyframe (instead of Right Click and then Insert Keyframe) • Create Property Keyframes at frame = 55 and 65 • Edit motion path associated with motion tween

36. Step 4a – Create Classic Tween • Select first Keyframe • File > Importto Stage “bilbaodog” (creates record in Library) • Convert “bilbaodog” to Movie Clip symbol • Modify > Convert to Symbol: Movie Clip = “dog” • Insert Keyframe at Fame = 30 • Select instance in Frame = 30 and change position • Apply Classic Tween at first keyframe (should see solid arrow)

37. Step 4b – Classic Tweening along Path • Select layer containing classic tween animation • Right-click layer and choose “Add Classic Motion Guide” • Use Pen, Pencil, Line, Circle, Rectangle, or Brush tool to draw desired path in motion guide • Snap center of instance to beginning of line in the first keyframe, and to end of the line in the last keyframe

38. Step 4c – Creating Mask Layer • Select or create layer with objects to appear inside mask • With layer selected, choose Insert > Timeline > Layer • Mask layer always masks layer(s) immediately below it • Place a filled shape or symbol instance on mask layer • Mask layer can contain tween(s) • Right-click (Windows) mask layer's name in Timeline, and choose Mask from the context menu. • Display mask effect in Flash, LOCK mask layer and masked layer(s)