First time here? First time here? Newsletter Signup Newsletter
Search tutorials
Author: Chris Hitchchott | Website: http://www.utoverload.co.uk

Morphing objects

Normal graphics created with flash (like shapes) do not need to be traced. Morphing is when flash morphes one object into another.

Now you have got the frames with an arrow and a plane, you can morph them. This is very similar to a motion tween, but it is done in a different way than you might. Click on the first frame of the top layer (the one with the arrow), and go to the properties menu. In there you should see a drop-down menu. Change it to 'shape'. An arrow, like a motion tween should appear between the frames, but the background is green.

There you go: your first morph. This techneque can look really crap, but it can also look good.

Adding hints

The morph looks crap - am I right? You need to add 'hints' to tell flash where to move the edges to.

With the first frame, top layer highlighted, press 'Ctrl, Shift & H' you will see a small red circle with the letter 'a' appear. Move the 'a' to the head of the arrow. Add another hint, by pressing the button combo again, and move the 'b' to the bottom of the arrow.

I finnished here, but you can add more if you want, at the tips of the triangle.

Now, with all the hints placed on the first frame, go to the last keyframe, with the plane. You should see the letters again, grouped in the middle. Now, move the same letters to the equivelent location on the arrow - this should make a smooth morph.

Not working? Make sure the letters are placed right on the edge, where the 'stroke' (outline) should go. If they are placed correctly, the red will turn to green.

Motion Guides.

After the morph, you will have to make a new layer, and call it plane (for the sake of the tutorial). On the frame directly above the end of the movie (6th or 5th frame, depending on where you added the blank keyframe), make a new blank keyframe, and paste the plane in the exact location to where it is in the lower frame. Use 'Ctrl, Shift & V' to do this. Now, right click on layer, and select add motion guide.

On this new layer, which looks different to the others, draw (with the PENCIL tool, not brush) a line (using the curved option), to create the path that the plane will follow. You can make a loop if you want. Now you can forget about this layer for a while, and go back to the layer underneith (the one with the silhouette of a plane only). After clicking the keyframe with the plane in, hold F5 down for a couple of seconds, to allow a flight.

Add the same amount to the top frame, so they both end at the same time (be careful not to add another keyframe, though.)

Now, on the 'plane' layer, click the keyframe with the plane, and in the properties box, use the dropdown box we used to make a shape tween, and select 'motion'. Now, on the first frame move the plane's regestration point (the circle in the middle) in line with the start of the path you drew. The point should altomatically click into place when you get witing proximity.

Click the last frame of the plane layer, and move the pane to the end of the path.

voilà! a motion tween with a path.

When you test your movie, you will see that the plane follows, the path, but doesnt change direction. To sort this out, you just have to slect anywhere in the tween, and click - ' Orient to path '.

So - there's all the stuff I promised in the title. It doesnt look exactly like mine, but you can add your own little frills accordingly.

Cheers for reading - vote me good.

Keep in mind I used cool colours... and arial...

» Level Basic

Added: 2004-04-23
Rating: 8 Votes: 61
(10 being the highest)
» Author
Started flash about a year ago, but i learnt quite alot on the way.
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!


  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
Featured Flash FLA
» Author: Inocreato
» Title: RaiseTheBlocks
» Description: Raise all the blocks to win the game
Featured Sound Loops
Image for equalize

Audio Player

» Author: TomCat Carty
» Title: The Wood
» Description: Just a little game ending or it can maybe be looped. Recorders with music box and percussion to give the feel of well, I don't know, the woods? Free to use, just credit me. thank you
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: Davisigner
» Description: Hmm... what to say about this one? It's reminiscent of the closing notes of the opening music from the Three Stooges done in a church organ style with a closing cymbal crash. I'll give this one away gratis, but feel free to check out my free loops and potential upcoming license-mandated ones over in the respective part of Flashkit.