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
© 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
© Anselm Spoerri
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
© Anselm Spoerri
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
© Anselm Spoerri
Timeline
© Anselm Spoerri
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
© Anselm Spoerri
Copying Layer & Layer Folder
Copy Layer
1. Click layer name to select the entire layer.
2. Edit > Copy Frames.
3. Click Add Layer button to create new layer.
4. Select new layer and choose Edit > 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 > Copy Frames.
4. Insert > Layer Folder to create new folder.
5. Select new folder and choose Edit > Paste Frames.
© 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
Line Color
Fill Color
Tool Options
© Anselm Spoerri
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
© 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, 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.
© Anselm Spoerri
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
© Anselm Spoerri
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 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
© Anselm Spoerri
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 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
© Anselm Spoerri
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 !
© Anselm Spoerri
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
1. Select a frame in Timeline
2. 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.
© Anselm Spoerri
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.
© Anselm Spoerri
Tweened Animation
Motion Tweening
– 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
© Anselm Spoerri
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
© Anselm Spoerri
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
© Anselm Spoerri
Motion Tweening
Use Symbols or Groups or Type to Tween Motions
Create Motion Tween
a) Create first keyframe
– Insert > Timeline > Create Motion Tween
Automatically turns graphic into 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 > Timeline > Create Motion Tween
Automatically turns graphic into symbol
© Anselm Spoerri
Shape Tweening
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
In Properties Inspector
1. Select “Shape” from “Tween” menu
2. Select option from “Blend” menu:
a) Distributive: intermediate shapes smoother and more irregular.
b) Angular: preserves apparent corners and straight lines.
© Anselm Spoerri
Animation – Misc
Moving Entire Animation
1. Lock or hide all the layers don't want to move
2. Click “Edit Multiple Frames” button in Timeline
– “Onion skin” markers appear in Frame view of Timeline
3. Drag onion skin markers to enclose all the frames to select
4. Edit > Select All
5. Drag entire animation to new location on Stage
Extending Still Images
1. Create image in first keyframe of sequence.
2. Select frame to the right, marking the end of the span of frames that you want
to add.
3. Insert > Frame.
Distributing Objects to Layers for Tweened Animation
–
–
Select Objects
Modify > Distribute to Layers
© 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.
© 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
© 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
© 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 QuickTime
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.
© Anselm Spoerri
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
–
Frame Rate = 12
or
use Property Inspector
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
© 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)
© Anselm Spoerri
Step 2a – Shape & Motion Tween and Create Layer with Text
1.
Select first keyframe in Timeline
2.
Specify Shape Tween
3.
–
Select “Shape” from “Tween” menu in Properties Inspector
–
Select option from “Blend” menu: Distributive
Play Movie so far
–
4.
7.
or Display Controls: Window > Toolbars > Controls
Insert > Timeline > Layer and select it
Create Text = “Hello”
–
6.
Control > Play
Create New Layer and Name = Text
–
5.
for first keyframe
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
© Anselm Spoerri
Step 2b – 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.
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
5.
Select first keyframe for the different letters and move each
letter to desired location.
6.
Select all the keyframes that contain a letter at frame = 1
and apply Motion Tween.
© Anselm Spoerri
Step 2c – 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
© Anselm Spoerri
Step 3a – Animating Bitmap
1. Select first Keyframe
2. File > Import to Stage “bilbaodog”
(creates record in Library)
3. Create Keyframe = 30 and Select it
4. Distort Bitmap using Free Transform tool
5. Apply Motion Tween at first keyframe
6. Play Animation
– Control > Play
– Control > Test Movie
© Anselm Spoerri
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.
© Anselm Spoerri
Step 3c – Modify Color and Transparency of Bitmap
1. Drag Symbol with Bitmap onto Stage
Creates instance of symbol.
2. Select first keyframe, then Select Instance on Stage
3. In Property Inspector, select Color pull-down
4. Select “Advanced”, modify “Alpha” & “Color Channels”
5. Select next keyframe, then select instance on Stage
6. In Property Inspector, select Color pull-down and
Select “Advanced”, modify “Alpha” & “Color Channels”
7. Apply Motion Tween
(if not done already)
© Anselm Spoerri
Step 4a – Motion Tweening along Path
Tweening Motion along Path
1. Select layer containing motion-tweened animation
2. Insert > Timeline > Motion Guide
or Right-click layer and choose “Add Motion Guide”
3. Use Pen, Pencil, Line, Circle, Rectangle, or Brush tool to draw
desired path
4. Lock Motion Guide layer
5. 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
a) Drag existing layer below motion guide layer.
All objects on this layer automatically snap to motion path.
b) Create new layer under motion guide layer
Objects tweened on this layer are automatically tweened along
motion path.
c) Select layer below motion guide layer.
Choose Modify > Timeline > Layer Properties and select Guided.
© Anselm Spoerri
Step 4b – Creating Mask Layer
1. Select or create layer objects that 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
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)
LOCK mask layer and
© 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
© Anselm Spoerri