{"id":255,"date":"2012-05-15T22:13:22","date_gmt":"2012-05-16T04:13:22","guid":{"rendered":"http:\/\/www.shscomputers.com\/wordpress\/?page_id=255"},"modified":"2019-12-11T15:24:03","modified_gmt":"2019-12-11T22:24:03","slug":"motion-tween-animation","status":"publish","type":"page","link":"https:\/\/www.shscomputers.com\/wordpress\/?page_id=255","title":{"rendered":"Motion Tween"},"content":{"rendered":"

In this tutorial, you\u2019ll learn how to animate in Flash by applying motion tween, layers and other features in Adobe Animate. Below is a simple animation made using motion tween<\/strong>.<\/p>\n

\n

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

1- Create a new Layer<\/h2>\n

In a new Standard (640 x 480) Document, create a layer by clicking on the new layer icon.<\/p>\n

\"\"<\/a>The new layer shows\u00a0 up on the timeline.<\/p>\n

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

2- Adding motion tween<\/h2>\n

Motion tweening moves, rotates or resizes an objects in an animation. Here\u2019s how you use motion tween.<\/p>\n

First, select layer 1<\/span>, then draw a square using the Rectangle tool. Then, click on layer 2<\/span>, and draw a circle using the Oval tool. Use any colors you like.<\/p>\n

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

You\u2019ll notice that the occupied frames show that they have objects in them.<\/p>\n

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

Then, right click on the frame in layer 2, and select \u201cCreate Motion Tween\u201d. You will get a message about converting to a symbol. Click yes. Notice that Animate has automatically moved to Frame 30! Using the Move tool, drag the ball in Layer 2 to the Right Side of the Scene.<\/p>\n

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

Do the same for layer 1, only this time drag the Square in Layer 1 to the Left side of the Scene. You will need to start in Frame 1 again to find the Square and create the Tween.<\/p>\n

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

Click the Play button. If you did it right, you should see an animation where the Circle and Square swap places.<\/p>\n

What you just did was tell Animate that you want the object (or Symbol) in Frame one, to be in a new location in Frame 30. This is called a TWEEN<\/strong>. Animate fills in all the frames beTWEEN frame 1 and frame 30 for you.<\/p>\n

Frame one and Frame 30 are important and have a special name. These are called Keyframes<\/strong>. A keyframe designates a position and a time on your timeline.<\/p>\n

In this example the keyframes were setup for you. There are several ways to insert keyframes where you want them to be, such as pressing F6 after clicking on a frame. Another way is to right click on the timeline, and select \u201cInsert Keyframe\u201d. Working with Keyframes is one of the most important concepts to master in animation and video.<\/p>\n

3- Create fading effect<\/h2>\n

Now let\u2019s create the fading effect. Click on the Circle Symbol\/Layer in Frame 30. If not already open, expand the Properties toolbar. Click the Object Tab, then expand the Color Effects category. Select \u201cAlpha\u201d from the menu and set the value to 0 (Zero). Now the circle should be invisible. Do the same procedure for the square, being sure to start on Frame 30 of the layer containing the Square.<\/p>\n

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

Now it\u2019s done! Test your movie by pressing Ctrl+Enter to view your animation. What happens if we set the Alpha to 0 in Frame 1 instead of in Frame 30?<\/p>\n<\/div>\n

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