Electric Type


About Us



Advanced Flash 3
Lesson 1

by Michael Kay

Page 2 — Morphing a Shape

<IMG SRC=/flash/stuff/day_night.gif" WIDTH=300 HEIGHT=120 BORDER=0>

OK, let's get started. First, launch Flash. A new document window should open by default, but if it doesn't, go ahead and open one yourself. Under Modify:Movie you can change the background color or the dimensions of the movie at any time. For now, however, just leave the dimensions at the default size (550 by 400 pixels).

In Flash, tweening is commonly used to move a symbol around the stage, enlarge it, or fade it in. Tweening can also be used to make one shape morph into another. For example, you can start with a square and tell Flash to gradually change it (morph it) into a circle. Or, say, transform Ally McBeal into a hissing alley cat.

It may look difficult. But it isn't.

Start by renaming Layer 1 "Shape Tween 1" and inserting about 40 frames. To do this, click and drag across both layers. When 40 frames are selected, release the mouse. With the frames still selected, choose Insert:Frame and you'll see an updated time line.

Just so you know, shape tweens do not work with symbols. You need to create two shapes that are independent of any symbols. You can, however, place a pre-existing symbol on the stage and choose Modify:Break Apart to convert it to a plain object. Sometimes you will have to do this more than once, especially if your symbol contains other symbols (i.e., if you have nested symbols). In some cases, you may even need to choose Modify:Ungroup.

So, create an initial shape (either from scratch or broken out from a symbol) in the first frame. For this exercise, use a simple solid shape without outlines, like a yellow circle. Then add a keyframe where you want the tween (morph) to begin: in frame 10.

Next, insert another keyframe at frame 25 of the same layer. Either modify the original shape or delete it and draw a new shape. This will be what the first shape (the yellow circle) will morph into. Any shape will do as long as you make it different and position it in the same place as the first shape.

Using Onion Skin for better selections
The Onion Skin view with Edit Multiple Frames activated allows you to see and edit across many frames simultaneously.

At this point, you can turn on onion-skinning (the top-left button above the layer names) to help you align the images. Clicking the third button (Edit Multiple Frames) at the top, will allow you to select and modify objects in all the frames that onion-skinning reveals. Turn it off when you're satisfied.

Next, double-click on the first of the two keyframes you just created and select Shape tweening from the Tweening menu. Then type play_shape in the Label field (which will be used in the next lesson). Click OK, and you're ready to go.

Those little green dots are the shape hints.In Flash 3, you can control the way your two shapes tween with shape hints. Shape hints tell Flash where to match a particular point on one shape with a particular point on another shape. To add a shape hint, make the first keyframe of the shape tween active and select Modify:Transform:Add Shape Hint, or hit Command-H (Control-H in Windows). Each time you choose that command, a red dot will appear. Move the dot to the desired position in the first keyframe and to the corresponding position in the second keyframe. Sometimes shape hints can help create a smoother morph, and sometimes not - you have to experiment with them to see what they do.

2 Layers of shape morphs

If you want to tween multiple shapes, it's best to create a separate layer for each tween. So say you want to add a typographic morph. Go ahead and create another layer, insert two keyframes - each with a different word - and assign the shape tween to them. Because shape tweens will not work with type objects, you'll have to choose Modify:Break Apart to convert each block of type into graphic objects.

Save the file and hit the Enter key to see what you've made. Pretty, no? Now let's create a button that the user can click to trigger the morph we've just constructed.

next page»


User Blogs  

Teaching Tools  



Programming help  

Advanced Flash  



PHP Coding  

User Blogs

Screen Shots

Latest Updates

Contact Us

Valid HTML 4.01!
Valid CSS!


© ElectricType
Maintained by My-Hosts.com
Site map | Copyright | Disclaimer
Privacy policy | Acceptable Use Policy
Legal information.