{"id":283,"date":"2012-05-16T13:52:53","date_gmt":"2012-05-16T19:52:53","guid":{"rendered":"http:\/\/www.shscomputers.com\/wordpress\/?page_id=283"},"modified":"2016-11-28T10:55:56","modified_gmt":"2016-11-28T17:55:56","slug":"shape-tweening","status":"publish","type":"page","link":"https:\/\/www.shscomputers.com\/wordpress\/?page_id=283","title":{"rendered":"Shape Tweening"},"content":{"rendered":"

How to use Shape Tween in Flash<\/h2>\n

Tutorial adapted from Flashtutor.org, and Adobe.com Flash Help files.<\/p>\n

Shape tween is an animation that involves transformation of one shape to another. You\u2019ll learn how to create the flash animation below.\u00a0In shape tweening, you draw a vector shape at one specific frame in the Timeline, and change that shape or draw another shape at another specific frame. Flash Professional then interpolates the intermediate shapes for the frames in between, creating the animation of one shape morphing into another.<\/p>\n

<\/object><\/p>\n

Firstly, draw a circle using the Oval tool. Now we\u2019ll try converting the frame to a shape tween.<\/p>\n

Let\u2019s click on the 1st frame.<\/p>\n

\"\"<\/a><\/p>\n

Select frame 10 of the same layer and add a blank keyframe by choosing Insert > Timeline > Blank Keyframe or pressing F7.<\/p>\n

\"\"<\/a><\/p>\n

Now you are supposed to draw the rectangle. But, you probably can\u2019t place the rectangle in perfect alignment with the circle, because you can\u2019t see it. A nice feature called \u201cOnion Skin\u201d in Flash can help you view frames before or after a selected frame. You can use Onion Skin to align your rectangle with the circle.<\/p>\n

\"\"<\/a><\/p>\n

Make sure the last frame is selected. Then, click on the onion skin icon. You can\u2019t see the circle\u2019s \u201cshadow\u201d yet, this is because the onion skin did not affect the frame where the circle is placed in.<\/p>\n

\"\"<\/a><\/p>\n

 <\/p>\n

So, we\u2019ll drag the onion skin box located above the frames to encompass all frames.<\/p>\n

\"\"<\/a><\/p>\n

 <\/p>\n

The circle\u2019s semi transparent shadow should now show on the stage of the last frame.<\/p>\n

\"\"<\/a>Now you can draw a rectangle on the stage, it should be positioned close to the circle.<\/p>\n

\"\"<\/a><\/p>\n

Right-Click on Frame one and choose “Create Shape Tween”. Preview your movie.<\/p>\n

The shape tween is done!<\/p>\n

Here is a very fast tutorial and explanation of Shape Tweening by Alan Becker:<\/p>\n