Overview/Questions Review: image types and data requirements How - PDF document

CS101 Lecture 18 Flash Animation: Images Aaron Stevens (with special thanks to Raphael Arar) 2 March 2009 1 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. 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.  Processing time

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”

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…

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.

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.

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

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)

Take-Away Points – Image sizes, etc. – Importing Images to Library – Timeline management with KeyFrames – Alpha fade 17 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 18