Funding for 'IT Lab' Project, Phase 1: Progress of sticker sales. Purchase a sticker to help us reach our target.Updated: 2010-02-28 11:53
10.7%
Home » Volume 01 Issue 08 September 2009 » Study Guide
Flash

Chamila de Alwis



Shape Tweening


This article continues after a brief silence because I was stuck with some study work. But the hard times are over and we are back on Flash. As promised in the last article this month we are going to create animations using a concept called Shape tweening.

In the last article you came to know about an animation concept called Motion Tweening. Motion tweening involved symbols. It could change sizes, colors and positions. But the shapes had to be static and could not change during the tweening. Shape tweening, on the other hand, is a similar concept but it changes shapes dynamically. Shape tweening cannot be done on symbols, so as you guess we are not going to deal with any kind of symbols in this article.

We will create a small banner like thing (sounds familiar, doesn't it?) with a small message in it. The message will be "Are you ready?", a bit overrated phrase but suitable for our purposes. The dimensions of this banner will be as same as the last one we made in the Motion Tweening article, i.e. 500x80 pixels. Go to the Document Properties window and change the stage settings to this .



Now let's go ahead and type in the words we want. The first part is "Are". So select the Text tool from the toolbar and type in "Are" in the left side of the stage.


Shape tweeining works on Shapes, and not on symbols and other static objects. Text are static objects and not shapes with a fill and an outline. So in this case we have to break this text in to shapes. To do this, select the text you just typed in, go to Modify Menu, select Break Apart. Alternatively you can use the short cut (which I recommend) CTRL + B. If you break this text once you will notice that the text just got broken in to seperate letters which are still individual text. So we have to break them again to convert them to text. CTRL+B once again.





Now you no longer can edit this text using the text tool.

The next step is to create some frames so the text "Are" would be visible for a short period of time. To do this click on frame 10 (assuming your frame rate is 20. If not either select an appropriate frame or change the Frame rate to 20 using the Document Properties window) and press F6. Then again click on frame 30 and press F6 to insert a key frame. After making sure that the 30th frame is selected (chech whether the red icon is on the 30th frame) delete the shape "Are" by selecting and pressing Delete. The keyframe you just made would become a blank key frame (white). This is where we enter the next part of the phrase. Select Text tool from the tool box and type in "You". Break Apart it twice (CTRL + B). Then insert some frames to make it visible for sometime (frame 40).



Then go to frame 60 and press F6. Delete the shape "You" and insert a new text "Ready?". For something new we will change the color of this text. You can either do this after converting it to a shape or before when it still is a text. After changing the color and breaking it apart, go to frame 70 and insert a keyframe (F6) to make it visible. Now the whole timeline should look like the following diagram.


We have created our basic timeline structure. Now it is time to insert shape tweening in the proper places. The text "Are" should change to "You" between the frame 10 and frame 30. So let's right click on a frame between 10 and 30 and select "Create Shape Tween" from the menu. Do the same for the frames between frame 40 and 60. After this the timeline should look like the following diagram.


If you can recall Motion tweening, the tweened frames are displayed in a purple color. In shape tweening the tweened frames are displayed in a green color. The arrow should be complete. If there is a broken arrow between the frames start all over and follow instructions carefully.

Press CTRL+ENTER. What you will see is Shape Tweening in action. From the movie you would understand what shape tweening is better than from a bunch of words. If you did as I did in this article you would see something like the below movie.

Shape tweening works on shapes that have fills and outlines. They change the shapes from an initial state (ex:"ARE") to a final state (ex:"You"). During this change several parameters, like color, size, shape can change simultaneously. What is more interesting is that you can even control how this tweening occurs using Shape hints. We will look into Shape Hints in the next article. Until then practice with Shape tweening, use whatever the idea you get in your head. Experiment (as I always preach!!!).







Previous Article

Post new comment

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options