Macromedia Flash tutorial

(This page may take a while to fully load due to it's many graphics)

Welcome to the webfreebees macromedia flash tutorial. This quick guide will show you how to get on your feet with Macromedia flash, by creating a very simple flash movie. Note that to go on, you will need the Flash 4 plugin, and of course the Macromedia Flash program itself, both of which are available over here. If you can't afford to buy the software itself, don't worry, you can download the 30-day trial version.

So let's start!

What will be showed to you today, will allow you to transform a blank flash movie to this (click on the text to restart the movie so you can see what happens):

So the above movie may not be much but it contains some really important parts of any-well made flash movie:

Object scaling (the circle getting smaller and smaller)
Object fading in (the text appearing)
Interactivity (clicking on the text restarts the movie)

The first thing you need to do is open up Macromedia Flash and work on the circle. You will want to reduce the total size of the movie, to 300 pixels by 300 pixels. You can do this by going into the Flash menu "MODIFIY" and then to MOVIE.

A new window will appear showing you various options you can change in your flash movie. All you need to concern yourself with is the "dimensions" fields. Set them both to "300 px". Your end result should be like this:

Flash Movie properties

Next you will want to create the blue colored circle. One of the nice things about flash, is that the "vector" graphics allow you to create some rich images, but without them being huge in size. For example, the above movie is only 1.47 KB, taking less than a second to load for people with a 28.8 modem.

Now to create that circle, you will need to use the Oval tool, displayed here:

Macromedia Flash toolbox: Oval tool

You will also have to define the line color and shape, and define the fill color. Right below the toolbox, you will see several items. The first is the line color. Make sure it's black. The second is the point size of the line. Make sure it's set to 1.0. Next is the line shape. Set it to solid. Finally there is the fill color. Click on it, and select the empty color (it will be located in the upper left corner of the color palette).

Once done, it should look like this:

Flash oval tools properties

Now to draw the circle. This is relatively easy, just follow these steps:

With the oval tool, set the crosshairs edges in the upper left corner of the movie, so they align with the upper and left border of the movie.
Press your mouse button and slowly drag the oval tool to the lower right corner, so the oval tool crosshairs edges align with the lower and right border of the movie.
Release the mouse button, and you have a perfect circle, like this:

The circle you just created with flash should look like this

Now it's time to fill this circle with color. As you have noticed in the flash movie above, the colors has some sort of shading. With other graphical programs such as Photoshop or Paint Shop Pro, this is usually not an extremely simple task; well at least not compared to Flash.

This is how it's done:

First, select the Paint bucket tool:

Flash paint bucket tool

Second, just like the Oval tool above, go below the toolbox to the color section. Click on the color box, which is named "Fill color". In the color palette that appears, you will see at the bottom 6 different gradient colors. Click on the blue one to select it.

The paint bucket color

Then ...

And it's palette

Next with your Paint bucket tool, click in the upper left area of the circle. You will see that the circle will now be blue, with a subtle lighting effect. Your end result should look a like the flash movie above.

Fantastic! The first object of your flash movie is now complete. If you perhaps decided to use a different color, that's fine. Actually I encourage you to try different things then what's actually shown here. Experimenting will allow you to learn much more than just a simple step-by-step guide.

Now to the second part, where you'll be making the text.

First thing you will want to do is create another layer. Layers are a kinda like separate sheets of paper, where you can work on each independently, without disturbing what you did in a previous. Then once all the layers are done, you can combine each one of these "sheets" to produce the final result.

So to create another layer, simply click on the Add layer button:

Macromedia Flash layer list and the add layer button

After pressing this button, you will see a new layer appear in your layer list, right above the one named "Layer 1". At this point you may also want to make layer 1 invisible, so it does not obstruct your work. To do this, simply click in the little circle in layer 1, directly under the Eye icon in the layer list. You'll see that the blue circle disappeared. Don't worry, it's still there, it's just hidden.

Now make sure layer 2 is selected (simply click on it). Next select the Text tool:

The text tool

What you will want to do now with the Text tool, is to click near the upper center part of the movie once. This will create a box where you can type in some text. We'll call this "editing mode".

Type in: Wow! now I know Flash! (make sure you hit enter right before the word flash to create a second line)

Once that's done, select the text (you should still be in editing mode), by dragging your mouse over the text, or pressing CTRL and A, and then go to your text properties area, which is below the toolbox, and set these settings:

Make the font style arial narrow.
The font size should be 36 points.
Change the color from black (or whatever else you have set) to the second shade of gray, which is the fourth color to the right from the black.
Set the text bold and italic.
And then center the text.

The text properties should be set like this:

The text properties in Macromedia Flash

And the final text should look like this:

This is how the text you just created should look like

If the text is not exactly centered, you can do so by using the Arrow tool (it's the little mouse in the upper left part of the toolbox) and then moving the entire text field around.

If you would still like to play around with creating graphics and text with Flash, by all means go for it! While the available tools are not the kind you would find in a fine computer graphic program such as Photoshop, it pretty much satisfies the basic needs.

You can always import graphics (menu FILE, then IMPORT) to add to your movie(s) and still do cool effects with them.

Like I mentioned above, experimenting will allow you to learn so much more. So save your work, and start playing around, you'll be amazed at how many things you can learn on your own just by messing with the various tools and options.

( Part 2 was inadvertantly overwritten we are re-doing it and will have it up soon. sorry there is a lot here to work with and you may have grasped enough of an understanding to try and experiment on your own with it.)

This site offers free Flash Movies for your site be sure to check out Good Web Designer

Please visit Dissymmetry. A web development and design company offering free tutorials detailing how to incorporate Flash into your HTML