These are the notes to the BasicFlashAnimation session of the TepFlashClass . If you have any questions or notice any errors, please let me know at robbins_c@usp.ac.fj

---

Motion Tweens

The technique we will use most often for our animation is called a Motion Tween. To create a motion tween, you must first create a Symbol. You will then insert 2 keyframes to create 2 instances of that symbol, and then tween between those two instances, or keyframes.

In other words, you create the starting point of your animation. Then you create the ending point. Finally, you insert a Motion Tween to let the computer do all the work in between.

Get it? Here is a step by step breakdown:

1.Turn your shape into a symbol by selecting your shape and, from the menu on top, Insert >> Convert To Symbol. Make it a Graphic.

2. With your symbol on the stage in frame 1, place your cursor in the same Layer at frame 10 and choose Insert >> Keyframe. Your timeline should look like this.

3. Now, do whatever changes you want to the second instance of your symbol. That is, click the symbol in frame 10 and transform it how you like. You can move it, scale it, rotate it, skew it, fade it, change it's color or alpha, do just about anything you like with it.

4. Once you are done with your tranformations, click the first instance, choose Insert >> Create Motion Tween, and flash will do all the inbetween work for you.

Transformations and Motion Tweens

Here are some of the transformations you can do to a symbol:

Scale/Rotate/Skew

Use the Transform Panel (Window>>Transform in Flash MX/ Window>>Panels>>Transform in Flash 5) to change the size, skew or rotation of a symbol by entering numbers. First select the symbol, then enter the numbers into the transform panel.

You can also Scale, Rotate or Skew by hand by using the Free Transform Tool in Flash MX, or the Scale or Rotate tool in Flash 5. These can be found in the tool bar in either program.

Alpha / Color

With the Color or Effect option, you can change the Alpha, Tint and Brightness of any symbol. Alpha can be thought of as Opacity, or the inverse of how transparent the symbol is.

An Alpha of 100% means the symbol is completely Opaque - that is, you cannot see through it at all. An Alpha of 0% means the symbol is invisible. A dirty window might have an Alpha of 15%, murky water maybe 50%, etc.

Tint and _Brightness both change how dark or bright the symbol looks. Brightness changes this by actually changing the color to a brighter or darker one, while tint merely lightens the existing color. On a white background, a tint of 10% looks a lot like an alpha of 10%, except that you cannot see through the tinted symbol.

To get to these options in Flash MX, select the symbol and change the pulldown menu marked color:

In Flash 5, choose Window>> Panels >> Effects, and you will get a window with the same options:

Take some time to play around with all these options so you get a feel for how they all work. You can Motion Tween between any of these transformations, coming up with some often surprising and exciting results.

Remember, the steps to a Motion tween are:

1. Create 2 instances of the same symbol on the same layer.
2. Modify the instances as you like, either by moving, scaling, skewing, rotating or by changing their alpha, tint and/or brightness.
3. Select the first instance and Tween it by choosing Insert >> Create Motion Tween.

Shape Tweens

We will not be using Shape Tweens much in the animations for this project, but it is good to know how they work anyway. A Motion Tween is a tween between 2 symbols. The symbol itself does not change in a Motion tween; we apply certain transformations to that symbol, and then tell Flash to calculate the intermediate values for all those transformations, displaying the results at each frame in between the two keyframes of the tween.

A shape tween actually changes the shape of the object. You do not use symbols for shape tweens, but raw shapes. Shape Tweens can be though of as morphs actually mutating one shape into another.

In the sample below, notice how the Shape Tween is actually changing the nature of the shape, while the Motion Tween changes its location and alpha:

To create a shape tween, draw a shape (not a symbol) at 2 separate instances in the same layer. Then, chose the first instance and insert a shape tween.

In Flash MX, you do this in the Properties Panel (Window >> Properties)

In Flash 5, you do this in the Frame Panel (Window >> Panels >> Frame)

Masking

Masking is another important method for animating. As the name suggests, a mask hides and reveals certain parts of an image. Wherever you see the mask is where you will see the image. All other parts of the image will be invisible. For instance, if we masked this photo with the letter A, the result would look like this:

Let's do that. First, create a new flash file by choosing File >> New.

Now, import an image into that filewith File >> Import. If you would like to use the photo I used, simply right click it on the page here and choose Save image as... or Download file to disk. Then import it.

Now, create a second layer (Insert >> Layer) and using the Type Tool (the icon that looks like the letter A in the tool bar ) type the letter A into this layer.

Make it a nice big font, like 60 pixels or so. You can change the type size in Flash MX through the Property Panel when your text is selected, or through the Character Panel in Flash 5 (Window >> Panels >> Character).

Once you have created the letter A, convert it into a shape by selecting Modify >> Break Apart . Then move the letter so that it covers your image.

Your flash file should look like this:

Now, right-click the layer that has the letter on it, it should be the layer on top of the photo letter, right-click this layer and choose Mask. Your flash file should look like this:

When you combine animation with masks, you can make it seem like something is being drawn as we watch on screen. This is very valuable for our project.

Let's combine a Motion Tween with a Mask to make an arc appear on our screen:

First, use the oval tool to draw a circle on the screen. If you have forgotten how to do this, please review our previous session DrawingInFlash. Name that layer Circle.

Now, create a new layer, and name it Mask. In this new layer draw a square. Turn this shape into a Graphic symbol. To do this, select the shape, then choose Insert >> Convert To Symbol and select Graphic as the type. We are going to use a Mask and a Motion Tween on this symbol to make it slowly reveal the arc beneath it.

Place the square symbol to the left of the Arc, on the Mask layer above it.

Now, in Frame 10 of the layer with the square, insert a Keyframe. When you go to that new frame, you will find that the Circle has disappeared. We need to extend the Circle layer to frame 10 as well. Click in Frame 10 of the Circle layer and choose Insert >> Frame. The Circle should have re-appeared.

Back on frame 10 of the Mask layer, move the square so that it covers one quarter of the circle.

Now, back at frame 1 of the Mask layer, choose Insert >> Create Motion Tween. If you rewind and hit return to test the animation, your Square should move from left to right to cover a quarter of the Circle.

Now, select the Mask layer, right-click (or control-click on mac) and choose Mask. This is what your time line should look like in Flash MX:

If you test your animation now, this is what you should see, an arc that starts from the left and curves around to the right, over and over.

Motion Guides

A Motion Guide is like a train track that forces a symbol to follow a certain path in an animation. When creating a Motion Tween without a Motion guide, a symbol will always follow the shortest path between your two instances of a symbol: a straight line. If you draw a squiggly motion guide between tose two instances, then the symbol will follow that custom path.

Let's do that. Frist we will create a Motion tween without a Motion guide, and the symbol will move in a straighjt line. Then we will add a Motion guide to make it's path more interesting.

First, create a symbol called Ball that looks like a ball (Insert >> Convert to Symbol) . Place it in the first frame of your movie. Now, select the 10th frame and insert a keyframe (Insert >> Keyframe). Select the second instance of the ball, the one in the 10th frame, and drag it to the right.

Now, select the first frame and choose Insert >> Create Motion Tween. If you test your movie now you should have a ball that flies from left to right in a straight line.

We are going to make that ball follow a wobbly path instaead of a straight one. To do this we will create a special layer known as a Motion Guide by pressing the icon beneath the timeline.

In Flash MX:

In Flash 5:

This will create a new layer. Draw a squiggly path from one instance of the ball to the other. You may have to move the ball slightly at each instance so that it snaps to the path.

Now when you test your movie the ball should follow the new squiggly path.