Just when you thought you had learned Flash 5, and could now devote resources to becoming a Flash master, Flash MX comes along. Flash MX is really not a complicated program, but there are numerous enhancements that will take a while getting used to.

This tutorial will help you to learn the very basics of Flash MX - basics such as layers, tweens, colors, text, lines, shapes, and more. By the end of this tutorial, you will have created the following animation:

[ you will create the above animation ]

Setting Up the Movie

Before you can create your Flash masterpiece, you have to adjust the actual movie. Not all movies are created the same, and many movies feature varying background colors, widths, heights, and more. The next few steps will explain how to setup the movie for creating the above animation:

1. Create a new document in Flash MX by going to File | New. A new, blank Flash MX movie will be displayed.
    
2. First we need to modify the movie's properties such as background color, dimensions, speed, and more. Click anywhere in your movie and the Properties panel will display near the bottom of the screen.
    
3. Press the Size 550x440 button in the Properties panel near the bottom-center of your Flash window. The Document Properties dialog box will appear. In the width and height text fields, enter the values 300 and 200 respectively.
    
4. Now, press the Background Color square in the Document Properties dialog box. Pick a light yellow or beige color from the list of colors visible.
    
5. The final step involves changing the value for the frames per second (fps). In the Frame Rate field, enter a value of 25.
    
6. Your  Document Properties dialog box should look like the following image after completing the above steps:

[ the modified document properties dialog box ]

7. Press OK to accept the changes you made to the Document Properties dialog box. Your Flash movie will now reflect the changes you made.

I recommend that you save your file now. Saving often can help save hours of frustration when an unforeseen error causes you to lose all of your work!

Now that the movie is set-up, let's add some text, lines, and shapes to the stage. Click the next section link below to go to the next section!

---

Before we get to animating, we need to create the objects. An object in Flash can be anything ranging from a line to text to a polka dot. You can convert objects into buttons, graphics, and movie clips, but I will discuss that later in another tutorial.

For now, the following instructions will tell you how to add the box outline and text as seen in the example in the previous section:

1. Press the Text Tool icon in the Tools panel on your left side of the Flash MX program:

[ the text tool icon ]
 

2. After pressing the Text Tool icon, click near the center of your movie area, and drag a rectangular shape. You will see a text field appear in the spot where you clicked. Enter the words "Flash MX". Press the Arrow Tool on the Tools panel after you entered the words.
    
3. With the Arrow Tool selected, you are no longer in the Text mode. Select the Flash MX text you entered. You will see the Properties panel displayed below.
    
4. From the Properties panel for the words "Flash MX", make the following changes:
   1. Set the font to Verdana.
   2. Make the font size 25.
   3. Press the 'B' icon to make the text bold.
   4. Change the color on the text to a pale green.

   Your Properties panel should look like the following image:

[ the properties panel from which the text was modified ]
 

5. While the changes were being made, you may have noticed that the text changes in real-time to each change you make. Your text should look like the following image:

[ the modified text ]

6. You have just completed creating the text. I think it is time we animated the text don't you?

Animating

With the text created and formatted, let's animate the text. The following instructions will explain how to animate the 'Flash MX' text you entered:

1. Select the text and drag it to your left where it is not visible on the main working area. In other words, ensure that the text is moved left so that no portion of the text is visible on the beige background:

[ move the text to your left ]

2. Go to your timeline. The timeline is the series of vertical, rectangular boxes with numbers set in intervals of 5. Right click on the vertical box below the 25 and select 'Insert Keyframe':

[ the insert keyframe command ]

3. Once you select the Insert Keyframe command, you will see a small black dot displayed in the box under 25. The box under 25 is called a frame. From hereafter, when I refer to Frame 25, I am referring to the box under Frame 25:

[ you should see two keyframes: one on frame 1 and one on frame 25 ]

4. Select the keyframe on Frame 25. Note that the text on your work area is also selected. Select the text with your mouse cursor, and press the right arrow to move the text to your right. I recommend you press Shift + Right Arrow to make the text move to your right even faster. Stop once the text has gone of the movie area on the right:

[ the text is now on the right side of the movie ]

4. Now, we are ready to animate the text between frame 1 and frame 25. Select the keyframe on Frame 25. Notice that the Flash MX text is on the left of the window. Flash's job is to seamlessly make the text transition from the left side of the drawing area to the right side of the drawing area.
    
5. Select all the frames in your timeline by clicking on Frame 1 and dragging all the way to Frame 25. Make sure that you are not dragging the actual keyframe toward Frame 25. Once you have selected all the frames, your timeline will be blackened as seen in the following image:

[ the frames in the timeline are now selected ]

6. The frames should be selected. Right click on any selected frame and choose 'Create Motion Tween':

[ create motion tween command ]

7. Your timeline will now be shaded a purple color. Click anywhere on the timeline, and you will notice that your text is moving from the left to the right.

You have just animated the text in Flash MX. Save the file now. Go to File | Publish Preview | HTML. You will see the animation scrolling from left to right inside your browser. Wohoo!!

We are still not done with this tutorial. We still have to add a background and use some layers. Click the next section link to progress through the tutorial.

---

In this final page out of our three page tutorial, we will look at using layers to create some background shapes for the animation. Before you can add a background design, we need to learn about layers.

Layers

Flash uses layers to organize various objects in an animation. In fact, we have been using a layer all this time. Look at your timeline. The text that says 'Layer 1' signifies a layer. We will be editing and adding another layer. The following instructions explain how to do that:

1. You should have noticed the text, Layer 1, in the timeline. The text 'Layer 1' is just not descriptive enough for what is actually contained on the layer: the Flash MX text.
    
2. Double click on the Layer 1 text to the left of the timeline. You will notice that the text is now selectable. Enter the word "text" to replace Layer 1":

[ renaming the layer to make it more descriptive ]
 

3. Now, let us add another layer to house the background. Right click on the 'text' layer and select Insert Layer. You will notice a layer labeled "Layer 2" is displayed above your text layer. Rename that layer background by double clicking on the Layer 2 text. The left side of your timeline should look like the following image:

[ another layer has been added ]

4. Notice that the background is above your text layer. Layers are like floors in a building. The furniture in the top floor is above the furniture in the bottom floor. Similarly, the contents of the top layer will go above the contents in a bottom layer. Because we want to create a background, the content in the background layer should be displayed below the text layer. Click on the background layer and drag it below the text layer. Your timeline should look as follows:

[ the background layer has been moved down]

As mentioned previously, the background layer has been moved below the text layer. If the background layer was above the text layer, the text will be hidden from view by the background (after you add one).

Adding a Background

Let's add a background to make the animation look cooler. The following instructions will guide you in adding a background design:

1. Select the first empty keyframe of the background layer. You will notice that the empty keyframe is selected. Everything you add to your animation will now be on the background layer because you just selected it by clicking the empty keyframe.
    
2. Select the Oval Tool (the circle) from the Tools panel. You will notice that your properties window reflects the circle properties such as line color, fill color, and more.
    
3. Click the color box for the line (Stroke) of the circle from the Properties menu. Select the no color option from the top-right of the menu. The no-color option is the box with a red line through it:

[ the no color option for the line]

4. After you select the no-color option for the outline of the circle, click the fill icon on the Properties panel. From the color menu that appears, select a white fill color. Your Properties panel should look like the following image:

[ the property panel for the circle ]

5. Now, it is time for you to draw circles for the background of your animation. Click anywhere in your movie and drag. You will notice a circle in the size and shape of your dragging is created. Release the mouse to set the circle in place.
    
6. Repeat the above step (step v.) until you have numerous randomly sized circles dotting your movie. The following image shows how I arranged my circles:

[ how I arranged the circles in my animation ]

7. Save this file and go to File | Publish Preview | HTML. You will now see your animation with the text 'Flash MX' going over the circles.

You have just completed creating a basic animation in Flash MX. By completing this tutorial, you were introduced to various topics such as formatting text, layers, animating (tweening), shapes, and more!

Like I always do, I have provided you with the actual Flash file that I used to write this tutorial. Click the link below to download the file and to see how my animation looks:

---

Discuss in Flash MX Forum

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇