RSS twitter

How to create a shape tween in flash

Download the project source shapetween.zip

In this toturial We will learn how to create a tweened animation with  Shape Tweening.

What we will do:

We will create 2 different objects:

  • 1- Circle.
  • 2- Square.

Because there’s Shape Tween, flash gradually changes the shape of the circle to square when it gets to the 15th frame.

Note: You can place Text instead of the square, make sure you break it apart.

Step 1

Start by clicking on the first frame of “Layer 1“, just to be sure the object we are going to draw will be placed there.

  • Now draw a circle on the stage using the “Oval Tool“, as shown in Fig 1.

Next, we are going to apply “Shape Tween” to the KeyFrame.

First you need to make sure the object is broken apart, you can not apply “shape tween” to a grouped object.

  • Select the object, go to “Modify>Break Apart

Example  in Fig 1, the dotted circle means the object is broken apart.

Fig 1

Step 2

  • Click on the first frame and, and click on the “Tween” drop down menu and select “Shape” in the “Properties” toolbar below, as show below. (Windows>Properties)

  • Right-click on the, let’s say.. the 15th frame, and select “Insert Keyframe” as shown in Fig 2 on the right.

We’re going to see an arrow with green background connecting the first frame with the 15th, as an indication there’s “Shape tween” between the 2 keyframes we made.

We have a  “Shape tween” now, but.. how are you going to see the change in the shape while both keyframes have the same shape of an object? Therefore, we are going to change one of the objects, let’s say the second one on frame 15, and place a square instead.

Fig 2

Step 3

  • Select the 15th frame (Fig 3), and press “delete” on your keyboard.
  • Make sure the selection is still on the 15th frame, now draw any other shape other than the circle, let’s say a square.
  • Got to the “Control” menu, and select “Test Movie“. We`re going to  notice the animation going in loop, just like in Fig 3.

Fig 3Step 4

  • To stop the animation when it reaches frame number 15, which is the end of the movie, right click on the 15th frame and select “Actions”
  • In the left column, under Actions>Movie Control, double click on “stop”
  • Test your movie, it should stop when the animation ends, unlike Fig 4
Fig 4
that’s all folks

Similar Posts:

5 Comments

  1. [...] See the original post here: How to create a shape tween in flash | Flash tutorials | Flash … [...]

  2. [...] How to create a shape tween in flash | Flash tutorials | Flash … [...]

  3. [...] How to create a shape tween in flash | Flash tutorials | Flash … IndiaVision News – 'Yoga' polymer shifts shape with changing …Does History Shape Society's Attitude Towards Genetics? « The DNA …Shape of Pinokios to Come?A Parent's Guide to myspace.com | jellofart's blogSilicon Valley Moms Blog: Single Parent Downsizing Home LifeFormer council member to learn sentence | WIVB.comMember not able to submit works / Questions and General Enquiries …Can A Fellow Parent Recommend A Vehicle? | babyJCP&L parent buying power rival Allegheny Energy | CleanTechies NewsParent Helpers Needed | Electrifying Eight View the Contact Powered by Search [...]

  4. [...] How to create a shape tween in flash | Flash tutorials | Flash … [...]

  5. [...] How to create a shape tween in flash | Flash tutorials | Flash … [...]

Leave a Reply