Beginning Flash: Motion Tween


Introduction
The Motion Tween is the newest upgrade to Adobe Flash, and arguably the most confusing. This tutorial aims to solve common issues related to the process, and to go step-by-step through many of the primary elements, such as rotation, scaling, easing, 3D movement, and combining them together to make even greater animations.

Preface
This tutorial is for Adobe Flash CS4. Due to several changes and upgrades in CS4, prior versions of Adobe Flash will not work the same as the latest version.

Programs you will need:
-Adobe Flash CS4

Rotation:

Step 1
Open Flash and create a document that is 550 px by 400 px, and set the frames per second to 24.

props

Step 2
Create a rectangle 40 px wide and 200 px tall. Choose any color for the object, and then center it.

rect

Step 3
Right Click (CTRL + Click on Mac) on the rectangle, and select Convert To Symbol.

Picture 2

Step 4
Name the rectangle “rect_mc” and save it as a Movie Clip.

rect_mc

Step 5
Go to the Timeline and right click on Frame 30. Select Insert Frame. You can also press F5 to insert the frame.

insert

Step 6
Click anywhere on the Timeline and select “Create Motion Tween.”

Step 7
Be sure that the rectangle is selected on Frame 30 and go into the Motion Editor.

Step 8
Find the “Rotation Z” option and change the number from “” to “360º.”

rotate

Step 9
Press CTRL + Enter (Command + Enter on Mac) to test the movie. Your rectangle should move like the animation below.

rect

Scaling/Easing:

Step 1
Repeat Step 1 in the Rotation section.

Step 2
Create a pentagon measuring 125 px by 125 px. Choose a color and center the object.

pent

Step 3
Right Click (CTRL + Click on Mac) on the pentagon, and select Convert To Symbol.

Step 4
Name the pentagon “pent_mc” and save it as a Movie Clip.

pent_mc

Step 5
Go to the Timeline and right click on Frame 50. Select Insert Frame. You can also press F5 to insert the frame.

Step 6
Be sure that the pentagon is selected and go into the Motion Editor.

Step 7
Scroll down towards the Transformation section, and locate the Scale X & Y settings. Change their percentages to 250% each.

scale

Step 8
Change the easing on the right to “Simple (Slow).”

Step 9
Scroll down further to the “Eases” section, and change the number to 100.

ease

Step 10
Press CTRL + Enter (Command + Enter on Mac) to test the movie. Your pentagon should get larger, but nearing the end, slowing down, as depicted in the animation below.

pent

3D Rotation:

Step 1
Repeat Step 1 in the Rotation section.

Step 2
Create a circle with the dimensions 150 px by 150 px. Choose any color and center the object.

circle

Step 3
Right Click (CTRL + Click on Mac) on the pentagon, and select Convert To Symbol.

Step 4
Name the circle “circle_mc” and save it as a Movie Clip.

circle_mc

Step 5
Go to the Timeline and right click on Frame 45. Select Insert Frame. You can also press F5 to insert the frame.

Step 6
Click on the 3D Rotation Tool, and click and drag the right side of the Y Axis (green line) over to the opposing side of the circle. while holding Shift. This may take a couple of tries, so be patient with the process.

3d

Step 7
Press CTRL + Enter (Command + Enter on Mac) to test the movie. Your pentagon should get larger, but nearing the end, slowing down, as depicted in the animation below.

flip

Next week, Filters and Color Effects in the Motion Tween will be analyzed, and used in conjunction with some of the above techniques.

If you have any questions or comments, please feel free to e-mail me at matthew.bitley@gmail.com.

This entry was posted in Tutorials and tagged . Bookmark the permalink.

One Response to Beginning Flash: Motion Tween

  1. Stone Deft says:

    I hope you’ll follow this one with motion tweening using action scripts