Flash Explained

Learn Flash easily.

Motion tween animation options

October 10th, 2008 | Author: Luka | Category: Animation

Here, I will show you how to change the shape of a Movie Clip in a Motion Tween animation, its tint, transparency, brightness, position, rotation and all these things combined.

An assymetrical multicolored symbol.

1 Open a new Flash document. Draw something with at least three colors, and that is assymetrical (i.e. don’t draw a single-color circle or rectangle). Select your drawing (all of it, don’t leave any part unselected!) with the Selection Tool (V) and convert it to a Movie Clip symbol by pressing F8 (or choosing Modify > Convert to Symbol).

2 Create a Motion Tween animation: in the Timeline panel, place mouse over a frame, let’s say frame 30 for example, right-click on it and choose Insert Keyframe from the pop-up menu. Next, right click on any one frame between the first and the second keyframe, and choose Create Motion Tween from the pop-up menu. If you are not familiar with all this, I suggest you see the Basic Motion Tween Animation tutorial before you continue.

3 Move the pink playhead on the timeline to the second keyframe you just created. Select your Movie Clip on the stage by clicking on it once. Look at the Properties panel, situated below the scene.

The Properties panel in Flash.

On the left side of the panel, you can see the nice icon which is showing that the selected object on the stage is a Movie Clip. There is a drop-down menu showing the same and with some other options which go beyond the scope of this tutorial. The same goes for the input text field below the drop-down menu (Instance Name). In the section below the icon are the width and height of our Movie Clip (in pixels), and the coordinates of its position on the stage (in pixels also).

To the right, you can see the “Instance of” followed by the name you gave your Movie Clip when you created it. Below, there is a button used for swapping your symbol. Let’s leave it for now.

4 Let’s go to the right side of the Properties panel, where there is a menu named Color that interests us. Click on it. The options shown are None, Brightness, Tint, Alpha and Advanced. Choose the first one, Brightness.

You will see a new option appear to the right of our menu. You can either enter a percentage in the small input text field or move the handle on the right to adjust the value. A positive value means a brighter Movie Clip, with 100% as the brightest option – completely white. A negative value chosen produces a darker Movie Clip, with -100% as completely black.

Choose, for example, 80%. Press CTRL+ENTER or choose Control > Test Movie to test your Flash movie and see the animated change of brightness. You can experiment with other options, too. They won’t be added together. That is, if you select Tint now, the Brightness option is reset back to zero. Alpha is changing the transparency of the Movie Clip. The Advanced option is for setting both the change in color and transparency at the same time. Let’s move and transform our object now. You can leave Alpha, Tint, or whatever you chose before, it can be combined with movement and transformation.

5 Using the Selection Tool (V) or the arrow keys on the keyboard move the Movie Clip on a new position on the stage. Test your movie, if you want, by pressing CTRL+ENTER. Now, to transform our object, select the Free Transform Tool (Q) from the Tools panel. If your Movie Clip is still selected, you will see a black frame appear around it, with handles on corners and between them. If not, select it. Now, if you move the cursor over the corner, it will change its appearance to a two pointed arrow. Click and drag, and you will change the width and height of the Movie Clip. If you want to change it proportionally, hold the SHIFT key while dragging.

The Movie Clip selected with the Free Transform Tool.

If you move the cursor a little bit away from the corner, it will change to a round arrow. Click and drag, and you change the rotation of your object. Holding SHIFT restricts the rotation to 45 degrees. Still another option is to bring the cursor between two black handles. Click and drag, and you skew your Movie Clip.


Submit a comment

  • David Aug 12, 2010 at 11:29 am

    How can I make one motion tween to loop once while another one keeps looping forever? I’ve been using the “stop();” action but that terminates all the motion tweens.

  • gadgets (be/nl) Dec 1, 2011 at 11:38 pm

    Hey there just wanted to give you a quick heads up. The text in your content seem to be running off the screen in Chrome. I’m not sure if this is a formatting issue or something to do with web browser compatibility but I thought I’d post to let you know. The style and design look great though! Hope you get the problem fixed soon. Thanks

You must log in to post a comment.