Digital Media Production Anselm Spoerri Ph D MIT

Digital Media Production Anselm Spoerri Ph. D (MIT) SC&I @ Rutgers University aspoerri@rutgers. edu anselm. spoerri@gmail. com Digital Media Production © Anselm Spoerri

Lecture 10 - Overview 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 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 Lectures – Week 10 Content http: //comminfo. rutgers. edu/~aspoerri/Teaching/DMPOnline/Lectures. html#week 10 Digital Media Production © Anselm Spoerri

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 Digital Media Production © Anselm Spoerri

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 Action. Script: Digital Media Production Built-in programming language: version 2. 0 or 3. 0 © Anselm Spoerri

Document Properties and Grid, Rulers & Guides Create Document and set its Properties – File > New – General: Flash File (Action. Script 2. 0) for this class – 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 Digital Media Production © Anselm Spoerri

Timeline Digital Media Production © Anselm Spoerri

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 Digital Media Production © Anselm Spoerri

Resource: Copying Layer & Layer Folder and Paste in Place Copy Layer 1. Click layer name to select the entire layer. 2. Edit > Timeline > Copy Frames. 3. Click Add Layer button to create new layer. 4. Select new layer and choose Edit > Timeline > Paste Frames. Copy Contents of Layer Folder 1. Click triangle to left of folder name to collapse it, if necessary. 2. Click folder name to select the entire folder. 3. Edit > Timeline Copy Frames. 4. Insert > Timeline > Layer Folder to create new folder. 5. Select new folder and choose Edit > Timeline > Paste Frames. Paste in Same Position Edit > Paste in Place Digital Media Production © Anselm Spoerri

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 Digital Media Production © Anselm Spoerri

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 Digital Media Production © Anselm Spoerri

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 Digital Media Production © Anselm Spoerri

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 Digital Media Production © Anselm Spoerri

Text tool in Toolbox Properties 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 fields type – Users enter text 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 Digital Media Production © Anselm Spoerri

Resource: 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 ! Digital Media Production © Anselm Spoerri

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 Digital Media Production © Anselm Spoerri

Symbol - Behavior Types Graphic Symbols Button Symbols for static images 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 Digital Media Production © Anselm Spoerri

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 1. Select a frame in Timeline 2. 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 drag keyframe to new final frame – Change length of a tweened sequence, drag the beginning or ending keyframe left or right. Digital Media Production © Anselm Spoerri

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 or Specify 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) Digital Media Production © Anselm Spoerri

Tweened Animation Select Keyframe, Right Click and Select Tween option Motion Tween – Change Position, 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 Digital Media Production © Anselm Spoerri

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 Digital Media Production © Anselm Spoerri

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 Digital Media Production © Anselm Spoerri

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

Classic Tween Layer needs to contain Symbols or Groups or Type and uses Keyframes Create Classic Tween a) Create first keyframe – Insert > Classic Tween or Right click frame, select “Classic Tween” Automatically turns content into Graphic Symbol – In last frame, create keyframe and move object to new location b) Create starting and ending keyframes – Select two keyframes and frames in between – Insert > Classic Tween or Right click frame, select “Classic Tween” Automatically turns start and end keyframes into symbols Digital Media Production © Anselm Spoerri

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 3 D 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. Digital Media Production © Anselm Spoerri

Shape Tween Similar to Morphing – One shape appears to change into another shape over time Use Ungrouped Graphics to Tween Shapes 1. Create or select first keyframe 2. Create or place artwork in first keyframe 3. Create second keyframe and select it 1. Select artwork in second keyframe 2. Modify shape, color, or position of artwork (e. g. use “Free Transform” tool) 4. Select first keyframe in Timeline 1. Insert > Shape Tween or Right click frame, select “Shape Tween” 2. Properties panel: select option from “Blend” menu: a) Distributive: intermediate shapes smoother and more irregular. b) Angular: preserves apparent corners and straight lines. Digital Media Production © Anselm Spoerri

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. Digital Media Production © Anselm Spoerri

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 Digital Media Production © Anselm Spoerri

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 Digital Media Production © Anselm Spoerri

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. 1. Choose Publishing File Formats: SWF or GIF, JPEG, PNG, and Quick. Time 2. 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. Digital Media Production © Anselm Spoerri

Step 0 – Download files, Launch Flash, Create Document Download Files http: //comminfo. rutgers. edu/~aspoerri/Teaching/DMPOnline/Lectures/Lec 10/Steps Launch Flash Create Flash Document and Set its Properties – – File > New : General: Flash File (Action. Script 2. 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 Digital Media Production © Anselm Spoerri

Step 1 – Keyframes and Create Shapes 1. Select Layer 1 and name it “Shape Tween” 2. Select first keyframe in Timeline 3. 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 4. 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) Digital Media Production © Anselm Spoerri

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

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

Step 2 c – Morphing Text 1. Create and Select Text in “text” layer at keyframe = 1 2. Break Text into Individual Shapes by applying Modify > Break Apart twice! 3. Create Blank Keyframe at frame = 30 4. Create and Select Text in “text” layer at keyframe = 30 5. Break Text into Individual Shapes by applying Modify > Break Apart twice! 6. Select first keyframe and Shape Tween Digital Media Production © Anselm Spoerri

Step 3 a – Animating Bitmap 1. Select first Keyframe 2. File > Import to Stage “bilbaodog” (creates record in Library) 3. Convert “bilbaodog” to Movie Clip symbol – Modify > Convert to Symbol: Movie Clip = “dog” 4. Apply Motion Tween at first keyframe 5. Insert Frame at Frame = 30 (if needed) 6. Select instance of “dog” in Frame = 30 and change position 7. Select instance of “dog” in Frame = 1 and Distort it using Free Transform tool 8. Select instance of “dog” in Frame = 30 and Remove Transform using Modify > Transform > Remove Transform 9. 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% Digital Media Production © Anselm Spoerri

Step 3 b – Multi-part Motion Tween 10. Select Frame = 31 and Insert Blank Keyframe 11. Select dog in Frame = 30 and Edit > Copy 12. Select Frame = 31 and Edit > Paste in Place 13. Select Frame = 46 and Insert Keyframe using Insert > Timeline > Keyframe (instead of Right Click and then Insert Keyframe) 14. Create Property Keyframes at frame = 55 and 65 15. Edit motion path associated with motion tween Digital Media Production © Anselm Spoerri

Step 4 a – Create Classic Tween 1. Select first Keyframe 2. File > Import to Stage “bilbaodog” (creates record in Library) 3. Convert “bilbaodog” to Movie Clip symbol – Modify > Convert to Symbol: Movie Clip = “dog” 4. Insert Keyframe at Fame = 30 5. Select instance in Frame = 30 and change position 6. Apply Classic Tween at first keyframe Digital Media Production (should see solid arrow) © Anselm Spoerri

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

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