1. Lecture 9 Flash Introduction Demonstration 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. Develop Rich Internet Content and Applications
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. Layers to organize content Stage
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 = 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.
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 = 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. Grouping Objects Stacking Objects Transforming Objects
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. Property Inspector to change text properties Static Text type
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 fields type
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 Transform Text Horizontal Text Linked to URLs
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 fields type
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 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. Keyframe = Define Change in Animation
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. Frame-by-frame Animation
Animate Objects
Change object’s position, shape, size, color, opacity, rotation and 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. Motion Tweening Shape Tweening Tweened Animation
Change Position, 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. Position, Size, Rotation, and Skew
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. Create Motion Tween Motion Tweening
Use Symbols or Groups or Type to Tween Motions
Create Motion Tween
Create first keyframe
Insert > Timeline > Create Motion Tween Automatically 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 Tween Automatically turns graphic into symbol

21. Use Ungrouped Graphics to Tween Shapes
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. Moving Entire Animation
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. Authoring environment
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. File > Export Movie or File > Export Image Flash Movie
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. Flash Document (FLA file)  Flash Movie (SWF file)
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”)
Launch Flash
Start > Macromedia > Flash
Create Flash Document and Set its Properties
File > New
Modify > Document or use Property Inspector
Frame Rate = Dimensions = 600 x 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 and apply 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 Shapes by applying Modify > Break Apart twice!
Create Blank Keyframe at frame = 30
Create and Select Text in “text” layer at keyframe = 30
Select first keyframe and Shape Tween

32. Step 3a – Animating Bitmap
Select first Keyframe
File > Import to 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 Guide or 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 layer Objects 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. Authoring environment
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