SLIDE 1 1
Aaron Stevens
21 March 2011
CS101 Lecture 21 Flash Animation: Images
2
What You’ll Learn Today
– Review, Q&A: Flash Tweening – Using Flash as a multimedia content delivery platform. – 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 Multimedia Content Delivery
Flash is a great way to assemble and deliver multimedia content via the Web:
– Vector images – Animations – Raster images – Sounds – Video
First step: gather your content.
Review: Image Formats
- Raster vs. Vector images
- Data requirements
– Example: bitmap at 1024 * 768 @ 24 bit color
– Example: medium quality JPEG is about 90% savings versus bitmap.
SLIDE 3 Preparing Images for Flash
Flash .SWF files can be huge, especially with embedded 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.
About File Sizes:
The pictures I downloaded from my Camera were 1600 * 1200 pixels (2 megapixles): I resized further to 550 * 400 using Photoshop
SLIDE 4
Adjusting Image Size...
In Photoshop, resize to 533 * 400 Be sure to check “Constrain Proportions”
Importing Images
Import images to the stage, and then convert them to Movie Clips.
SLIDE 5
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.
SLIDE 6
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 60).
– The end of the motion is separate from the new image on frame 60.
SLIDE 7
Create the motion tween, …
Here I’ve created a motion tween between frames 1 and 60, 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.
SLIDE 8 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 (right of screen) select Color : Alpha.
- Fade from 100% to 0% or vice versa
SLIDE 9 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)
Spotlight effect - Masking
- Put image/text/etc on one Layer
- Create another layer for the mask
– Mask layer must be immediately above “content” layer
- Use a shape tween to create a
“spotlight” or other masking effect
SLIDE 10 Spotlight Effect - Masking
- Right-click on layer to create “Mask” effect
- Flash will lock both layers, but you can unlock
to make changes.
A few other tricks…
- Brightness adjustments
- Motion tween on images
- Free transform tool
SLIDE 11 21
What You Learned Today
– Image sizes, etc. – Importing Images to Library – Timeline management with KeyFrames – Alpha fade – Brightness effect – Creating Motions with MovieClips
22
Announcements and To Do List
– HW09 (name animation) is due WED 3/23 – HW10 (slideshow) will b due WED 3/30 – Readings:
http://www.mediacollege.com/adobe/flash/
http://www.w3schools.com/Flash/default.asp
– You might want to download the 30-day trial version of Flash CS4: http://www.adobe.com/go/tryflash
