SLIDE 1 1
Aaron Stevens
(with special thanks to Raphael Arar)
2 March 2009
CS101 Lecture 18 Flash Animation: Images
2
Overview/Questions
– Review: image types and data requirements – How to import images to Flash? – How to manipulate images in a slideshow? – Image motions and effects.
SLIDE 2 Review: Image Formats
Raster vs. Vector images Data requirements
– Example: bitmap at 1024 * 768 @ 24 bit color
Compression
– Example: medium quality JPEG is about 90% savings versus bitmap.
Preparing Images for Flash
Flash .SWF files can be huge, especially with embeded images (and sounds). Plan in advance for reasonable download:
– Resize images to desired size (e.g. 550 * 400) in Photoshop before importing. – Create medium quality JPEGs.
SLIDE 3
About File Sizes:
The pictures I downloaded from Picasa were already “small” -- 640 by 480 pixels: I resized further to 550 * 400
Adjusting Image Size...
In Photoshop… Be sure to check “Constrain Proportions”
SLIDE 4
Importing Images
Import images to the stage, and then convert them to Movie Clips.
Convert to Symbol/MovieClip
– Right click on the image to “Convert to Symbol”. – You’ll have several movieclip symbols in the library…
SLIDE 5
Setting Image Properties
From library, edit image Properties… Select the “allow smoothing” option for for images which will be used in motion tweens or free transform.
Using Stage/Timeline
Drag an image onto the stage in frame 1, and then insert a keyframe in frame 48. In frame 48, delete first image and drag a new image onto the stage.
SLIDE 6
Motion Tween with Images
We’ll need to add an extra KeyFrame at frame 47 (before KeyFrame at frame 48).
– The end of the motion is separate from the new image on frame 48.
Create the motion tween, …
Here I’ve created a motion tween between frames 1 and 47, and then changed the image size on frame 1.
SLIDE 7
Combining Tweens and Stills
To make a tween followed by a still image:
– Add an extra keyframe in the middle of the tween – Delete the tween after this new keyframe. – Adjust the tween in the first half.
Alpha Fade
The classic effect you need to know is the “fade in” or “fade out”. Alpha refers to the transparency of a pixel. TrueColor assigns 8 bits for Alpha.
– 0 is totally transparent – 255 is not transparent at all
SLIDE 8 Alpha Fade (continued)
To create an Alpha Fade:
– Begin with a motion tween between two keyframes. – Select the movie clip, and then in the properties box (bottom of screen) select Color : Alpha.
- Fade from 100% to 0% or vice versa
Working with Layers
Effects such as motion tween or alpha fade apply to all movie clips on a frame. To do multiple motions or fade between images, use multiple layers. (example in class)
SLIDE 9 17
Take-Away Points
– Image sizes, etc. – Importing Images to Library – Timeline management with KeyFrames – Alpha fade
18
Student To Dos
– Readings:
- Flash CS3 tutorial: (all week)
http://www.adobe.com/designcenter/flash/articles/flacs3_createfla.html
– HW07 (name animation) is due TUE 3/3 – HW08 (slideshow) will be posted by WED 3/4
