Flash Lecture 9: Introduction to Tweened Animations, Shape Tweening, Motion Tweening

1. Lecture 9 • Flash • Introduction • Timeline • Layers • Keyframe • Tweened Animations • Demonstration • Creating Tweened Animations • Shape Tweening • Motion Tweening • Working with Text • Adding & Editing Text • Animating Text • Animating Individual Letters • Morphing Text • Animating Bitmaps • Import Bitmap • Animate and Distort Bitmap • Bitmap  Symbol • 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 • 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 frames • Property Inspector • Toolbox • Panels • Library • Stores reusable elements called Symbols • ActionScript • Built-in programming language

4. Document Properties and Grid, Rulers & Guides • Create Document and set its Properties • File > New • Modify > Document • Frame Rate • Dimensions • Background color • Using Grid, Rulers and Guides • Like in Fireworks • 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 > 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 > 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. Copying Layer & Layer Folder • Copy Layer • Click layer name to select the entire layer. • Edit > Copy Frames. • Click Add Layer button to create new layer. • Select new layer and choose Edit > 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 > Copy Frames. • Insert > Layer Folder to create new folder. • Select new folder and choose Edit > Paste Frames.

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 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, and reshape each segment individually. • To avoid inadvertently altering shapes and lines by overlapping them, group shapes or use layers to separate them • Overlapping lines that you create with the Pen tool do not divide into individual segments at intersection points, but remain connected.

11. 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 • Property 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 Property Inspector

13. Text • Text tool in Toolbox • Property Inspector to change text properties Static Text type • Appearance determined when you author movie. Dynamic Text type • 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 • Horizontal Text Linked to URLs • Select text and enter URL in Property Inspector

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

15. Keyframes • Keyframe = Define Change in Animation • Flash can tween, or fill in, frames between keyframes • Change length of tweened animation by dragging keyframe in Timeline. • Create Keyframe • Select a frame in Timeline • Insert > Timeline > Keyframe • Only Keyframes are Editable • 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 drag keyframe to new final frame • Change length of a tweened sequence, drag the beginning or ending keyframe left or right.

16. Animation • Animate Objects • Change object’s position, shape, size, color, opacity, rotationand other properties. • Frame-by-frame Animation • Create a separate image for each keyframe. • Tweened Animation • Create first and last keyframes of animation • Flash creates frames in between Motion Tweening Shape Tweening • Frame Labels useful for identifying Keyframes • Use instead of frame numbers (which can change) when targeting frames in actions such as Go To.

17. Tweened Animation • Motion Tweening • ChangePosition, Size, and Rotation • Shape Tweening • Change Shape • Select Keyframe and in Property Inspector select “Tween” option • If you want Flash to tween the movement of more than one graphic, each must be on a separate layer. • To quickly prepare elements in document for tweened animation • Select elements • Use Modify > Timeline > Distribute to Layers

18. Animations – Representations in Timeline • Motion Tweens • Black dot at beginning keyframe; intermediate tweened frames have black arrow with a light-blue background. • Shape Tweens • 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 • Motion Tween: does NOT contain symbol, groups or type • Shape Tween: contains symbol, groups or type

19. Motion Tweening • Used for tweening: • Instances of Symbol • Groups • Type = Text • Bitmap • Instances, groups, and type tween: • Position, Size, Rotation, and Skew • Instances and type tween: • Color shifts and Fade in / out (= Alpha)  Bitmap needs to be converted into Symbol • To tween the color of groups or type, you must make them into symbols. • Animate individual text characters separately • Break text apart • Place letters on separate layers

20. Motion Tweening • Use Symbols or Groups or Type to Tween Motions • Create Motion Tween • Create first keyframe • Insert > Timeline > Create Motion TweenAutomatically turns graphic into 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 > Timeline > Create Motion TweenAutomatically turns graphic into symbol

21. 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 In Properties Inspector • Select “Shape” from “Tween” menu • Select option from “Blend” menu: • Distributive: intermediate shapes smoother and more irregular. • Angular: preserves apparent corners and straight lines.

22. Animation – Misc • Moving Entire Animation • Lock or hide all the layers don't want to move • Click “Edit Multiple Frames” button in Timeline • “Onion skin” markers appear in Frame view of Timeline • Drag onion skin markers to enclose all the frames to select • Edit > Select All • Drag entire animation to new location on Stage • Extending Still Images • Create image in first keyframe of sequence. • Select frame to the right, marking the end of the span of frames that you want to add. • Insert > Frame. • Distributing Objects to Layers for Tweened Animation • Select Objects • Modify > Distribute to Layers

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

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

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

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

27. Step 0 – Download files, Launch Flash, Create Document • Create folder “mp9” in “My Documents” folder • Download Files (select zip file & extract into “mp9”) • http://scils.rutgers.edu/~aspoerri/Teaching/MPOnline/Lectures/Lecture9/stepbystep/ • Launch Flash • Start > Macromedia > Flash • Create Flash Document and Set its Properties • File > New • 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

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

29. Step 2a – Shape & Motion Tween and Create Layer with Text • Select first keyframe in Timeline • Specify Shape Tween for first keyframe • Select “Shape” from “Tween” menu in 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” • Create second keyframe at frame = 30 • Select frame = 30 and use Insert > Timeline > Keyframe • Select text using the Arrow tool in second keyframe • Modify position by moving text • Modify size, angle and distort by using Free Transform • Specify Motion Tween for first keyframe of Text Layer

30. 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 • Create keyframe at frame = 30 for all the created text layers • Shift Select the column of frames = 30 andapply Insert > Timeline > Keyframe or right click and select Insert Keyframe • Select first keyframe for the different letters and move each letter to desired location. • Select all the keyframes that contain a letter at frame = 1 and apply Motion Tween.

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

32. Step 3a – Animating Bitmap • Select first Keyframe • File > Importto Stage “bilbaodog” (creates record in Library) • Create Keyframe = 30 and Select it • Distort Bitmap using Free Transform tool • Apply Motion Tween at first keyframe • Play Animation • Control > Play • Control > Test Movie

33. Step 3b – Modify Color and Transparency of Bitmap • Bitmap needs to be part of Symbol so that color and transparency can be changed • Insert > New Symbol and select “Movie Clip” • Flash opens a new symbol for editing in symbol-editing mode. • 2. On the Timeline, click Frame 1 on Layer 1 • 3. Drag “bilbaodog” bitmap from Library or use “File > Import” • When finished creating symbol content, do one of the following to return to movie-editing mode: • Click the Back button at the left side of the information bar above the Stage. • Choose Edit > Edit Document. • Click the scene name in the information bar above the Stage.

34. Step 3c – Modify Color and Transparency of Bitmap • Drag Symbol with Bitmap onto Stage • Creates instance of symbol. • Select first keyframe, then Select Instance on Stage • In Property Inspector, select Color pull-down • Select “Advanced”, modify “Alpha” & “Color Channels” • Select next keyframe, then select instance on Stage • In Property Inspector, select Color pull-down and Select “Advanced”, modify “Alpha” & “Color Channels” • Apply Motion Tween(if not done already)

35. Step 4a – Motion Tweening along Path • Tweening Motion along Path • Select layer containing motion-tweened animation • Insert > Timeline > Motion Guideor Right-click layer and choose “Add Motion Guide” • Use Pen, Pencil, Line, Circle, Rectangle, or Brush tool to draw desired path • Lock Motion Guide layer • Snap center of graphic to beginning of line in the first frame, and to end of the line in the last frame • Link Layer to Motion Guide Layer • Drag existing layer below motion guide layer.All objects on this layer automatically snap to motion path. • Create new layer under motion guide layerObjects tweened on this layer are automatically tweened along motion path. • Select layer below motion guide layer. Choose Modify > Timeline > Layer Properties and select Guided.

36. Step 4b – Creating Mask Layer • Select or create layer objects that 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 • 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)

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