Learning Basic Classic tween, Shape tween and Motion tween in adobe flash action script 2.0.

FAMILIARIZE THE ADOBE FLASH WORKSPACE and the parts which we’re going to use:

adobe flash workspace

• Before everything else, activate onion skin by selecting it at the bottom of the timeline. Onion skin will serve as a guide from the previous frame. We need it for us to be able to align our next shape in our next frame.
• Set the frame per second (fps) to 7. This is to slow down the animation.

CLASSIC TWEEN

Open your adobe flash and choose action script 2.0

Classic tween is one of the most basic used animations in adobe flash.

• ·         In your frame 1, draw a circle then place in the left corner of your stage.

• ·       In your frame number 10, right click and insert keyframe (F6). So that we can still see the same circle in the stage 

• ·        To animate. Right click in between your frame 1 and frame 10. Then select create classic tween from the options.

•  Hit CTRL+Enter to see your progress.
•  With the use of classic tween, you can create moving wheels, rolling ball, moving background and many more.

SHAPE TWEEN

From the word shape, it’s described as the appearance of something. Together with tween it’s going to be like an animation changing something into another form. To make this easy lets go ahead and try it out.

Have a new workspace.

·         Again, create a circle in your stage. Your circle's stroke and fill color must be black.

• ·         In your 10th playhead, right click and insert keyframe (f6) to have the same shape in your stage.
• ·         In your 2oth playhead, right click and insert blank keyframe (f7) to create an empty stage. In the stage, draw a square. Make sure it’s align with the circle

• On the 30th playhead, right click and insert keyframe (f6) so you'd still have the same shape you had in your previous frame.
• The 40th playhead insert blank keyframe (f7) and draw a pentagon. 
• Again insert keyframe (f6) in our 50th playhead.

• ·         Right click on the 10^th playhead and 30^th playhead. Then select create shape tween from the options

·         With shape tween we'll be able to see the circle we have created transform into a square then transform to a pentagon

• ·         To check our work: hold CTRL+Enter

MOTION TWEEN

We’ll now learn how to put an object, a symbol or a picture into motion.

·         By default, you have an empty stage. And in your properties I want you to change the stage color from white to black.

• ·         Now, I want you to draw at least 3stars of different sizes. (S|M|L)
• 
  

• ·         As you can see my stars have black outline but the fill color is yellow.
• ·         We have to convert the star into symbol. Just right click on all the stars and you'll see at the bottom of the options convert to symbol.

• ·         You don't have to alter any changes in the type and registration, leave as it is. But you can change the name.
• 
  

We’re doing this, so that once we select the star, the outline and fill color won't be separated and so that we can create a motion tween out of them.

If you want to separate the 3 stars, you'll have to create another two layers for them. But that’s another lesson to impart because we’re only doing the basic.

• ·         We have created stars, now, let's set them aside. Specifically, just above your stage.
• 
  

• ·         Next select the 25th frame then insert keyframe (f6). So that the stars would still be visible above your stage.
• ·         Lastly, right click in between your keyframes. From the options, select create motion tween.
• ·         Then move your star to the bottom of your stage. You’ll see a green outline that connects from where your stars were located to where you want them to be. 

·         Next let's animate. Hold Ctrl+enter to execute the animation.

Adobe Flash - Transforming Letters With Shape Tween

(Above: figure 1: Adobe Flash workspace)

In this lesson we’re going to learn how to do a shape tween using the alphabet in text.

We’re going to have letter by letter transformation.

Now open your adobe flash and select action script 2.0

Click on text tool icon (see fig1). Then on the center of your stage type in the alphabet letters from “a” to “e” just for this practice (see fig2)

(Figure 2: stage with letters from “a” to “e”)

Select the letters you have in your stage. And in your menu bar (see fig1): under the modify tab, click on the break apart (CTRL+B).

With the break apart option we can now separate the letters and select them individually.

Click on the selection tool (shortcut: V). Cut (CTRL+X) the letters from “b” to “e”. “a” is the only letter supposed to be left in your stage.

(Figure 3: 5^th playhead)

Right click the 5^th playhead in layer 1 of your timeline. You then click on the insert keyframe (F6) option. (See fig3)

You should be able to see the same letter “a” in the same position in your 1^st playhead found in your stage.

On the 10^th playhead: select in the insert blank keyframe (F7) option to create an empty stage. This time, paste (CTRL+V) the letters “b” to “e” in your stage.

Our goal is to keep letter “b” alone in the same position as to where your letter “a” was placed.

Since in the 10^th playhead you won’t see letter “a”, aligning letter “b” with the “a” would take much time. Now, to have it align perfectly is to use onion skin (see fig1). With onion skin, you can view the previous frame even though it’s no longer visible in your current frame. It can help you adjust easily the position of your letter “b” with your letter “a”.

On the 15^th playhead: do the same thing you did in your 5^th playhead by selecting the insert keyframe (F6) option.

For the rest of the letters “c” to “e”: follow the step you had with letters “a” and “b”.

(Figure 4: timeline and playhead)

Once finished you should be able to have the same set of frames in your timeline as you see in the figure above.

Next, click the frames then on your menu bar; under the modify tab; select the option break apart (CTRL+B).

Do the same thing to all the frames. Doing this will make the shape tween option available.

We can now apply the shape tween.

Right click on the frame and select the create shape tween option. Do the same thing to the 5^th, 15^th, 25^th, and 35^th Frames.

We’re creating shape tween alternately since we only have to transform one letter to another.

You should be able to see a green notch right arrow pointing to the next frame.

(Figure 5: applying shape tween)

We’re done. To check your work, just hold CTRL+Enter.