Graphic Design Exercises
Flash: Tweening Symbols (Cirque)
Objective
To be introduced to Flash's toolbox, symbols, timeline, and library. To be introduced to tweening in Flash by recreating this flash
banner ad by John Havlik:
download starter file
Overview
Bring artwork from Illustrator into Flash. Snap art to motion
path, tween art. Work with transparency. Publish actual size, view
in browser window.
Procedure
prep file
download Flash keyboard shortcuts launch flash: new file (actionscript 2)
file > save as "jane_cirque.fla"
window > workspace > default
modify > document: 400 x 225 px; bkgd=black
file > import > import to stage "cirque.ai"
align art with stage
inspect layers; lock all layers
practice navigation shortcuts (space; space+cmd; space+cmd+option; cmd+1, 2, 3)
hint: unlock only one layer at a time
animating "figure 1"
go to "figure 1" layer (lock others)
select art: modify > convert to symbol "figure 1"
(graphic) (F8); note center point
insert > motion guide (or RMB on layer)
pen tool: draw curve from start center to end center;
stroke=red
frame 90: insert > frame (F5) (or RMB on frame)
go to "figure 1" layer (lock others)
frame 1: snap center to beginning of path
frame 90: insert > keyframe (F6); snap center to end of path,
rotate
frame 1: insert > create motion tween (or RMB
keyframe); drag playhead to test
frame 1: ease out (+100)
frame 90: color = alpha 0%; control > play (RETURN)
animating "figure 2"
go to "figure 2" layer (lock others)
select art; insert > convert to symbol "figure 2"
(graphic) (F8)
free tansform tool: change center of rotate to lower left corner
frame 15: insert > keyframe (F6); move figure to center
frame 75: insert > keyframe (F6); rotate figure (counter
clockwise, no more than 180 degrees), move figure to lower left
frame 120: insert > keyframe (F6); rotate figure (counter
clockwise, about 90 degrees), move figure to right
insert > create motion tween (3x); control > test movie
(cmd+RETURN)
frame 1 & 120: color = alpha 0%
animating type
go to "breathtaking" layer
frame 20: insert > frame (F5) (or RMB on frame)
go to "unforgettable" layer
drag keyframe to frame 21; insert > frame on 40 (F5)
go to "cirque eloize" layer
drag keyframe to frame 41; insert > frame on 60 (F5)
go to "cu sumphony" layer
drag keyframe to frame 61; insert > frame on 80 (F5)
go to "cirque orchestra" layer
cut art from frame 1, go to frame 81, insert > blank keyframe
(F7),
insert > convert to symbol "cirque type" (graphic)
(F8)
insert keyframes on 90, 105, 120 (F6)
frame 81, 120: color = alpha 0%
frame 90: color = tint (white)
insert > create motion tween (2x); control > test movie
(cmd+RETURN)
animating "box"
go to "box" layer
insert > convert to symbol "box" (graphic) (F8)
drag keyframe to frame 19
insert keyframes on 21, 25 (F6)
frame 19: color = tint (purple), make small
frame 21: color = tint (purple)
insert > create motion tween (2x); drag playhead to test
frame 26: insert > blank keyframe (F7)
select frames 19 thru 26 (click, shift + click)
edit > copy frames (cmd + opt + C)
frame 39: insert > blank keyframe (F7); edit > paste frames
(cmd + opt + V)
frame 59: repeat
go to "layer 1"
frame 118: repeat; control > test movie (cmd+RETURN)
adding one more figure
go to "figure 2" layer
frame 15: copy art
add new layer "figure 3"
frame 90: insert > blank keyframe (F7); paste art, move to
upper left corner
insert > keyframes on 100, 105, 120 (F6)
frame 90 & 120: color = alpha 0%
insert > create motion tween (2x); control > test movie
(cmd+RETURN)
publish movie
file > publish settings, format (.swf & .html), flash
(version 6), html (match movie); publish; save
open HTML file in dreamweaver, zero out margins, bg=white
center movie: select <body>, align=center (adds <div>)
test movie in browser (drag and drop HTML file into browser
window)
link HTML file from your projects page and publish
BACK TO TOP
Version 1.0 • Last updated:
7/16/09
• Webmaster: Paul
Young
