Sunteți pe pagina 1din 28


Flash is one of the most popular technologies on the internet, with thousands of websites using
it for introductions, animations and advertisements. Although many people feel that these
animations are sometimes unnecessary, Flash has created a way of including multimedia on
web pages, which will run over a standard internet connections. The recent release, Flash 5,
has brought many changes to the creation of Flash animations. Many of the techniques covered
in this tutorial will also apply to past versions of Flash, as well as Flash MX, the very latest
version, though. If you are not sure what a Flash animation is like click here for an example. If
this does not work you will need to download the Flash Plugin.

Why Use Flash?

Flash is one of the best multimedia formats on the internet today for several reasons. Firstly, the
Flash plugin (required to view the animations) is installed on nearly every computer connected
to the internet. All the major browsers come with it installed by default and, for those who don't
have it, the download is very small. Secondly, Flash is a 'vector based' program, which means
the animations and graphics created by it have much smaller file sizes than a video or
streaming media version of the same animation would be. You can also include sound, graphics
and dynamically created information in your animation.

Flash provides a versatile and easy way for webmasters to create animations for their users.

What Do I Need?

As mentioned above, all you need to view a Flash animation is a modern web browser with the
Flash plugin. To create Flash animations, though, you will need some software. Although there
are other Flash creations on the market, Macromedia's Flash 5, is by far the best and, as
Macromedia created the Flash format, it always has the latest features in it. Unfortunately, the
software costs $400, but you can download a free 30 day trial from Macromedia.

Once you have downloaded and installed the trial (or bought the software) you will be ready to
start creating Flash animations.

The Flash Interface

When you first open Flash you will find an interface that looks something like this:
I will quickly cover the different aspects of this screen.

In the centre is the large white 'Stage'. This is the actual movie where you will place all the
objects you want to include in it.

Across the top of the screen is the timeline. This is where you insert all the actions that happen
in your movie so that they happen at the correct times. It is split up into frames.

Down the left hand side of the screen is the 'Tools' pallette. This is where you will find all the
tools for inserting objects and text into your animation.

There are also four floating pallettes on the screen. The 'Mixer' pallette allows you to choose the
colours you will be using in your animation. It will change the colours of the currently selected
object. The' Info' pallette will allow you to find out a bit of information about the object you have
selected and will allow you to make changes to the properties of a tool you are using. The
'Character' pallette contains all the text formatting tools. Finally the 'Instance' pallette contains
all the tools for changing objects when you are animating them, including sound and several
other tools for making changes to your animation.

Each of the parts of the Flash window does many different things. Instead of going through each
tool explaining what it does, I will show you examples and explain how to create them, showing
you how to use each tool while doing so.
Part 2 - Drawing
• Part 1 - Introduction
• Part 2 - Drawing
• Part 3 - More Tools
• Part 4 - Symbols & Animation
• Part 5 - More Symbols
• Part 6 - Layers & Buttons
• Part 7 - Actions
• Part 8 - Sound
• Part 9 - Exporting Your Animation

In the last part I showed you the Flash interface and explained exactly what Flash is. In this part I will
show you how to use Flash's drawing and painting tools to put something into your animation. At this
point there will be no interactivity and nothing will move but once you know the basics you can develop
this futher.

Basic Drawing

The first thing you need to learn how to do is to draw basic shapes in Flash. We will start with the most
basic shape, the circle/oval. Before you start you might want to move some of the floating pallettes so that
you can see enough of the stage to work on.

Firstly, choose the Oval tool from the Tools bar on the left:

Then, draw the oval or circle you want on the stage (just as you would in a normal graphics program).
Holding down shift will force the object drawn to be a circle. Once you have drawn your circle you will now
notice a few things about it. Firstly, there is a line around the circle and a fill inside it. These are changed
using the colors section of the Tools bar:

The first option (set at black in this example) is the line colour and the bottom option (blue in this example)
is the fill colour. To change them click on the box filled with colour. You will get a menu with a selection of
colours. If you want to match the colour to a colour on your screen click on anything on the screen and its
colour will be used.

Now, try drawing another circle or oval, but this time change the fill and line colours.
The next tool you will use is the rectangle tool:

As with the circle tool, this works in exactly the same way as in any standard grapics program, you can
drag out a rectangle you want to draw and hold down shift to force a square. Like the circle, the
rectangle's line and fill colours are set using the colors section of the Tools bar.

The rectange tool, unlike the oval, has some options which can be set. These appear in the Options
section of the Tools bar:

There is only one option for the rectange, the Round Rectangle Radius. This creates rectangles with
rounded corners like this:

Click on the option. A box appears asking for the radius in pixels. The example above used a radius of 20
pixels but it is best to experiment to find the best setting for what you want. After you have set this draw
another rectangle. This one should have rounded corners. Remember: Flash will remember this setting so
before you draw another standard rectange you should set it back to 0.

Like any other drawing program, Flash also has a straight line too:

This works in exactly the same way as the line tool in graphics software.

The objects you have drawn can also be moved. You must be careful, though, as Flash treats the fill and
the line separately, so to move both together you must double-click in the object before dragging it if you
want to move them both.

Drawing Or Painting?

Flash is a very strange program for editing grapics. It is really a cross between a drawing and a painting
program with some special features of its own. It is like a drawing program because you can move and
change objects once you have drawn them but it acts like a painting program with fills etc. For example if
you drew two circles, a large one with a black line and a blue fill and a small one with a black line and no
fill, then moved
the small one on top of the bigger one. You could then use the fill tool to fill in the middle of the small
circle, changing only part of the big one.

Flash also allows you to break up graphics using other ones. If you now moved the small circle away from
the larger circle it would leave a white space behind where it used to be. This feature can be extremely

Special Fills

AS well as filling a shape with a single colour you can also use Flash's premade fills. They are found at
the bottom of the fill box. There are three gradient fills but the best are the radial fills. These allow you to
fill in any shape with a radial gradient (going from light to dark). The special thing about them is that the
lightest part will be where you click your mouse when using the fill option:

so you can very effectively make 3D looking circles, which are excellent for buttons.

Part 3 - More Tools

• Part 1 - Introduction
• Part 2 - Drawing
• Part 3 - More Tools
• Part 4 - Symbols & Animation
• Part 5 - More Symbols
• Part 6 - Layers & Buttons
• Part 7 - Actions
• Part 8 - Sound
• Part 9 - Exporting Your Animation
In the last part of the tutorial I showed you some of the basic drawing tools in Flash. Before I show you
how to create animations in Flash, I will first explain some more of the tools available to you. These tools
are not as important as the ones I showed you last week but, to create good animations, it is useful to
know how to use all the tools.

Ink Bottle

The ink bottle tool is quite useful. If you have a block of colour (for example one created with the
paintbrush - which will be covered later in this tutorial) you can click on it to add a line round the edge.
The colour of the line placed round the edge will be the same as the colour selected as line colour on the
tools bar.

Dropper Tool
The dropper tool, like the ones in graphics software, is used to pick a colour off one part of the screen and
use it as the fill or line colour. If you click on a fill, the fill colour will be set and the pointer will change to
the fill tool. If you click on a line, the line colour will be set and the pointer will change to the ink bottle tool.

Eraser Tool

The eraser tool is used to rub things out on the stage. It is used by just clicking and holding down the
mouse. It does have a few options though:

The large section at the bottom is used to select the size and shape of the eraser brush. On the right at
the top is the faucet tool. This makes the eraser work like the fill tool - you just have to click once to
remove the fill from an area. The part on the left is the special option. This allows you to choose the type
of eraser you use. The default is Erase Normal, which works like a normal eraser tool. Some of the other
options are:
• Erase Fills which will leave all lines intact as you use the eraser but will rub out fills
• Erase Lines which leaves fills but rubs out lines
• Erase Inside which allows you to erase inside a shape without harming the edges

Paintbrush Tool

The paintbrush tool will paint lines all the time you have the mouse button held down. It has some options,
though, which are like the eraser tool options:
• Paint fills, will only paint inside a shape
• Paint Behind, which will paint behind all shapes and fills

Pencil Tool

The pencil tool allows you to draw lines on the screen. It is different to a normal freehand tool, though, as
it has three options which can be set:
This option will allow you to choose what flash does to your line once you have drawn it. The default
option is Straighten. Flash will straighten out your line so that any part of it that is almost straight will be
made into a straight line. The two other options are smooth and ink. Smooth will change your line so that
it is smoothed out to make curves. The ink option will not make so many changes to your line but will still
smooth it a bit and straighten some lines.

The Text Tool

The text tool is used for adding text to your flash movies. Just click on the stage where you want the text
to appear and a cursor will appear, where you can type in your text. To make chan
ges you need to use the character palette:

The options here are quite self explanitary. The font section lets you choose the font for the text. With
flash all fonts are embeded in the file so the user does not need to have the font on their computer. Below
that is the size box which lets you choose the text size. Next to that are the normal bold, italic and colour
options. Below that is the Tracking option. This allows you to choose how spaced out the characters are.
At 0 the spacing is normal. If you increase this, spaces will be left between your characters. If you
decrese it, your characters will start to overlap. The option below this is the superscript/subscript option
and below this you can specify a URL for a link.

Part 4 - Symbols & Animation

• Part 1 - Introduction
• Part 2 - Drawing
• Part 3 - More Tools
• Part 4 - Symbols & Animation
• Part 5 - More Symbols
• Part 6 - Layers & Buttons
• Part 7 - Actions
• Part 8 - Sound
• Part 9 - Exporting Your Animation

Over the last few parts you have learnt how to use most of the standard drawing tools in Flash. In this part
of the tutorial I will show you how to create your first Flash movie with animation.


In order to animate something in Flash it must first be changed into a Symbol. There are three types of
symbol: Graphic, Button and Movie. In this part of the tutorial I will just deal with Graphics.

To start, draw a filled circle in the middle of the screen, a few centimetres high. Choose the arrow tool and
double click on the circle to select it and the line around it. Then press F8 on the keyboard. You will get a
window called Symbol Properties. In this window you can give a name to your symbol so that you can
refer to it later. Type 'Circle' (without the quotes) in the box and then select Graphic and click OK.

You will now notice that the circle apears with a blue line around it. The next thing you will want to do is to
animate this circle.

The Timeline

To create animation in flash you must use the timeline:

The timeline window shows all the frames that make up your animation and all the layers (which will be
covered later). Each small box in the timeline is a frame. The animation runs at 12 frames per second
(shown at the bottom) as standard but this can be changed. As you can see above, there is a black dot in
the first frame. This signifies that it is a keyframe.


Keyframes are very important in flash as they are used whenever something is changed. For instance if
you wanted the circle to appear in another position later in the movie you would create a keyframe in the
frame where you want it to change and then you could move the circle without affecting the rest of the
movie. That is exactly what you are going to do now.
Right click in frame 50 on the timeline and choose Insert Keyframe. This will insert a new keyframe into
the animation at frame 50 and it will contain the same information as the previous keyframe. You could
have also chosen Blank Keyframe which will make a new blank keyframe but you want the circle to be in
both keyframes in your movie.

Now, click in frame one and press Enter to play the movie. As you can see you now have a 4.1 second
long movie of a circle in the middle of the screen - not very interesting.

To make something happen you will need to change the second keyframe. Click on it (frame 50) and the
symbol of the circle will be selected. Now, with the arrow tool, click and drag the circle to the upper left
hand corner of the stage. Then click in frame one again and press Enter to play the movie.


The movie you have created now has a circle which moves on the screen but, as you will have noticed, it
stays in the same place and then suddenly moves in the last frame. Animations, like television and film,
are made up many frames, each of which has a slight change from the last one. As they are played very
fast (12 frames per second in flash) the object looks like it is moving. Luckily, flash has been built so that
you don't have to do all of this manually.

Acutally, animating the circle on the screen is amazingly easy because of the Flash feature called Motion
Tweening. This feature will automatically create all the frames to go between two keyframes to animate
an object which you have moved (in this case the circle). All you have to do is right click in any frame
between your two keyframes and choose Create Motion Tween.

Once you have done this the frames will change from being grey to being blue with an arrow across them.
This signifies a motion tween. Click in frame one and press Enter to view your movie. As you can see,
now flash has made your circle move smoothly accross the screen and, if you click i
n the frames between your keyframes you will see that it has created all the frames in between.


Motion Tweens can be used for other things as well as moving objects. You can also change their size.
For this you will use the scale tool. Right click inn frame 80 and create a new keyframe.Your circle will be
selected. Now choose the Scale tool:

from the Options section on the tools pallette (if it is not available make sure you have the black pointer
tool selected). This tool allows you to change the size of objects. 6 white boxes will appear at the edges of
the circle, just like in any other image application. Use the bottom right hand one to drag the circle size
until it is considerably larger. You will also notice that the circle grows equally around its centre point.
Now, as before, right click in between frames 50 and 80 and choose Create Motion Tween.

Part 5 - More Symbols

• Part 1 - Introduction
• Part 2 - Drawing
• Part 3 - More Tools
• Part 4 - Symbols & Animation
• Part 5 - More Symbols
• Part 6 - Layers & Buttons
• Part 7 - Actions
• Part 8 - Sound
• Part 9 - Exporting Your Animation

In the last part I introduced you to Symbols and how you can use them to create animations in Flash.
There are other things you can do to symbols, though, as well as moving them around and changing their
size. In fact, almost any change to a symbol can be animated.


Resizing a symbol is not the only thing you can do to it. Symbols can also be rotated. To do this create a
movie and draw a large red square in the middle. Then, select the square and make it a symbol (F8).
Give it a name and choose Graphic as the type. Then go to frame 30 and insert a keyframe. In this new
keyframe choose the black arrow from the Tools menu and then click on the Rotation option:

which is found next to the Scale option under the Options section for the arrow. Then click on one of the
white handles that appear round the rectangle and drag the mouse until the rectangle rotates to about 90
degrees (or any rotation). Then all you have to do is right click between frames 1 and 30 and choose
Create Motion Tween to animate your rotation.

Animating Text

Text, like images can be made into symbols and animated in exactly the same way as images can. The
technique is exactly the same except for one difference: even when it is a symbol you can still edit text by
double clicking on it. Apart from this you can rotate it, scale it, move it and perform any other changes that
you normally could.

Importing Images

You can import any graphic into Flash and then use it as you would as if it had been created in Flash.
This is especially useful for pictures such as photos which could not be created using Flash's graphics
tools. To import an image is very simple: just go to File then Import... find the image on your hard drive
and then click Open. The image will then appear on the stage. You can now resize it and make it a
symbol if you want to.

Symbol Effects

There are several effects you can apply to a symbol which are slightly different to what you have already
done. This involves using another one of the floating palettes. Firsly, click on a symbol to select it. Then
find the Effects pallette. If it is not immediately visible look for the Instance pallette then click on the
Effects tab. You will get a pallette like this:

There are four different options. First, select Brightness. This will allow you to change the brightness of
the symbol. You can either type in a percentage (between -100 (for darkest) and 100 (for lightest) where 0
is the current value) or you can use the slider which can be accessed using the little arrow next to the
percentage box.

Tint allows you to place a tint colour over the symbol. On this part you have a few options. Firstly you can
specify the percentage for the tint between 0 (no tint) and (100) fully coloured. Values around 50% usually
give quite good results. You can also choose your colour and there are three options for this. You can use
the standard Flash colours menu, choose it from the large Colour Selector at the bottom or you can enter
an RGB value in the three boxes.

Alpha is a very useful option. It allows you to make your symbol partially or fully transparent. You can
choose from a percentage (like for the brightness) where 0 is invisible and 100 is the normal symbol. This,
as you can probably work out, is how you create fading effects in Flash. You create a symbol and start it
and alpha 0% then use a motion tween to animate it to 100% for a fade in and the opposite for a fade out.

The fourth option, Advanced just combines these three effects.

These effects are quite hard to explain so 02this Flash movie shows you all the different effects in action.

Multiple Animation

You don't only have to change one thing at once when you animate a symbol. For example create a
symbol of a square. Create a keyframe at frame 30. Then click on the symbol in frame 30. Use the scale
tool to make it much bigger. Then use the rotate tool to turn it to a different angle. Finally use the effects
pallete to set the alpha at 100%. Now go back to frame 1 and click on the same square. Go the effects
pallette and set the Alpha to 0. Then create a motion tween between frames 1 and 30 and play your

You now have a square which rotates and grows while fading in.

Part 6 - Layers & Buttons

• Part 1 - Introduction
• Part 2 - Drawing
• Part 3 - More Tools
• Part 4 - Symbols & Animation
• Part 5 - More Symbols
• Part 6 - Layers & Buttons
• Part 7 - Actions
• Part 8 - Sound
• Part 9 - Exporting Your Animation
In the last parts I have taught you how to create simple animations. In this part I will explain how Flash's
layers work and how you can create simple buttons.

One major feature of Flash is that, like several image editing programs, everything you do is put into
layers on the screen. Layers are like pieces of transparent plastic. You can put pictures text and
animation on them. Layers higher up have their content over the top of layers lower down. So far
everything you have done has been contained in one layer, though.

Layers are controlled through the timeline, which you have seen before:

As you can see, there is only one layer in this animation, Layer 1. The first thing you should do is to
rename this layer. Although your animation will work with it being called Layer 1 it is much easier to
understand what you are doing if you use proper names for your layers. Doubleclick on the name and
type in Scrolling Text.

Now you will want to put in some content for this layer. Make a symbol with the text:

This is my Flash Animation

And make it a symbol. Now move it right off the left edge of the stage. Insert a keyframe at frame 120 and
in that frame move the text to off the other side of the stage. Now make a motion tween. Your text should
'scroll' across the screen.

Now you can add another frame. Click the little icon on the timeline with a + sign on it. This will add a new
frame above the one you are currently using. Rename this to Circle.
In this layer make a circle which is very small, make it a symbol and then animate it to grow much bigger
in 120 frames.

This should show you how, when you create a second layer it is completely independent of the other
layers but that layers above another layer overlap them.

For the second part of this tutorial I will show you how to make basic button. Create a new movie. In the
first frame draw a rectangle. Then put some text on it using the text tool saying 'Frame 2'. Now select both
the text and the rectangle and create a symbol. This time make it a Button.

Now double click on the new symbol and the button editor will open. This is slightly different to what you
have seen before. The timeline now only has three frames, each with its own name:
• Up - The normal state of the button

Down - How the button looks when your mouse is over it

Click - How the button looks when your mouse button is down

Hit - The area which will trigger mouse events

You will need to create a keyframe in each of these frames. Go to the second frame and change the
colour of the rectangle. Then do the same in the third frame. The fourth frame does not need changing. It
is invisible but, as the button image is in there, the correct area will trigger the button. Now click on Scene
1 at the top above the timeline.

You are now returned to your movie. Create a new Blank Keyframe in frame 2 and just insert the text
'Frame 2'. This will allow us to see when the button has worked. Press Ctrl+Enter on the keyboard to test
the movie (so that the buttons work). As you can see, it just loops the 2 frames continuously. Click the
close button to return to the editor.

To stop Flash from repeating the frames over and over you will need to insert a frame action (more about
these in the next part). Right click in frame 1 and choose Actions. Double click on Stop in the left column
and then close the box. Now use Ctrl+Enter to play your movie again. This time only frame one will be
displayed and you can test your button. It does not yet take you to frame 2 though.

To do this, return to the editor and right click on the button. Choose Actions (like you did for the
frame). Double click on GoTo. This will bring up some options at the bottom of the screen. Frame Number
is already selected so type 2 in the Frame box. As you want the movie to stop when you arrive there,
uncheck the Goto and Play option. Close the Actions box and play your movie.

Now when you click the button it will show frame 2, just as you wanted.

Part 8 - Sound
• Part 1 - Introduction
• Part 2 - Drawing
• Part 3 - More Tools
• Part 4 - Symbols & Animation
• Part 5 - More Symbols
• Part 6 - Layers & Buttons
• Part 7 - Actions
• Part 8 - Sound
• Part 9 - Exporting Your Animation

In the past 7 parts of this tutorial I have showed you how you can create visual effects using Flash. In this
part I will show you how you can create an even better user experience by using sound in your animation.

Importing Sounds

Before sounds can be used in your animation they must be first made available for the software to use.
To do this you must use the standard Import menu. To access this go to File, Import. From here you can
select each file you want to import (just as you did in an earlier part with images). The only confusing
thing about this is that once you have imported your sound you will see nothing special on the screen.
This is because the sound has been added to the library.

The Library

The library is not only for sound, but is actually one of the most useful parts of Flash when you start to
create large movies with many elements. Basically, the library contains all the objects you have in your
movie, the three types of symbol (movie, button and graphic) and all sounds. This can be very useful as,
to add something to the movie from the library you just drag it to the position you want it on the stage.

You can also preview all the objects here, graphics will appear in the top window and if you select a
button, sound or movie clip you can watch or listen to it by clicking the little play button which appears in
the preview window. You should be able to see and preview any sounds you have added here.

Adding Sound

Sound is added using the sound palette. This is in the same palette as Instance, Effect and Frame. If it is
not on the screen go to Window and choose Panels, Sound. The sound palette will probably be 'greyed
out' at first. Insert a keyframe into your movie and click in it to make all the options available.
In the first 'Sound' box you can select the sound you want to play. If no sounds appear here, you have not
yet imported any into your movie. Check the Library to see if any appear.

Now the effect box will be available. This is not particularly important just now. The next box is the Sync
box. You can choose Event, Start, Stop and Stream. The only ones you really want to learn about at the
moment are Event and Stream. They each have their own features.


Streaming sounds work like streaming audio on the internet. The sound does not need to be fully loaded
before it starts playing, it will load as it plays. Streaming sounds will only play for the number of frames
that are available for it (until the next keyframe). This is fine for background sounds but it will not work
very well for a button.


Event sounds are mainly used for when someihtng happens in your movie. Once they have started
playing they will continue until they end, whatever else happens in the movie. This makes them excellent
for buttons (where the button moves on to another frame as soon as it is clicked). The problem with Event
sounds, though, is that they must fully load before they can play.

Adding A Streaming Sound

It is much easier to manage your sounds if you put them on a separate layer. Insert a new layer and place
a keyframe at the beginning. Using the sounds palette select the sound you want to play and select
Stream from the Sync. If you want the sound to loop change the value in the Loops box (for some reason
a value of 0 (default) will cause the sound to play once).

Now you must insert some frames to give the sound time to play. Insert a frame (or keyframe) at about
frame 500 in the movie (this will give most sounds time to play). When working out how many frames are
needed remember that the movie will play at 12 frames per second. A graphical representation of the
sound will appear in the frames it will be playing during so
that you can see how much space it takes up. Press CTRL + Enter to preview your movie.

With the sound on a separate layer you can have your movie running on other layers while the sound
plays in its own layer.

Adding An Event Sound to a Button

Adding an event sound to a button is nearly as easy as adding a streaming sound. Either create a button
or use a pre-made one and right click and choose Edit. This will allow you to see the 4 different states of
the button (as you learned about in part 6. Usually sounds are placed in the Over or Down frames. To
make a sound play when the mouse moves over the button choose Over and to hear it when the button is
clicked choose Down.

Insert a new frame and then put a keyframe for the button state you want to use. Click in the frame and
use the sounds palette to add an Event sound. You don't need to put in any extra frames as an event
sound will play until it finishes. Now return to the movie and use CTRL + Enter to test it with the button.


The effects option allows you to add a variety of effects to the sound as it plays. The preset ones are quite
self explanitary but you can also use the Edit.. button to create your own. This will open a window with the
the waveform representation of the sound (left speaker at the top, right at the bottom). On the top of this is
a line which is the volume control (the top is full volume (the volume the sound was recorded at) and the
bottom is mute). By clicking in the window you can insert little squares. The line goes between these
squares. You can also drag them around the screen. By doing this you can change the volume of the
sound at different points throughout its playing time, and make it different for each speaker.

Flash 5 Tutorial Introduction

Welcome to the Flash 5 tutorial section. In this tutorial, we will cover all the basics of Flash and a few
advanced features it has to offer. First thing you need is the software. You can download a demo of the
software at the Macromedia site, click here. If you have the software and have not installed it yet, click
here to go to the Installation tutorial.

What is Flash?

Flash is a vector graphic based application. It is used worldwide to produce movies, animation,
presentations and more. You can use it to create presentations for your company, equipped with an up to
date database to show the right information at the right time to creating a button for your web site. An
example would be a Stock Ticker. Flash is very easy to use and a very effective tool in the web
development industry. One advantage to Flash is it is a cross-browser platform, which means you can
show your movies in any browser out there, such as Internet Explorer or Netscape Navigator.
Work environment:

Flash is a little like the program Paint for Windows. Although it is used mainly for animation, if you have
ever used Paint, creating graphics and artwork in Flash is the same way. You have all the same tools that
Paint uses, such as the square/rectangle tool, the circle tool and the line tool. The work environment in
Flash consists of four major parts:
1 – The Stage

The stage is the area in which you will be working. The stage is basically your drawing board, where you
can create, add and delete your work. The stage(s) are the only areas in which you can put in graphics,
and while your movie is in play on a web site, and only the content in the stage will be displayed. You can
also use special features and import your graphics from other programs.
2 – Timeline

The timeline is the area that represents moving objects in your stage. The timeline is consisted of frames
and layers. Each frame is a brand new image. Using simple tweening motions will allow you to modify
your objects in your timeline to produce a quick movie. Layers represent each layer of transparency on
your stage, you can have as many layers as you want and you can only see objects on the layers.
3 – Library

The library is just a small database where Flash stores all your graphics and symbols. From the library,
you can click and drag symbols onto your stage area, which saves you a lot of time, instead of re-creating
new graphics.
4 – Panels

The panels used in Flash 5 allow you to control anything you do, such as modifying your text, of setting
effects for a symbol. The advantage about the panels is that they can be hidden allowing you more work
space to work on. Go to Window > Panels for a complete list of your panels.
Flash 5, now allows you to import MP3 sound files. This new feature allows you to play music, add sound
effects to your buttons, etc. This new feature is only useful using supported sound files, such as .mp3 and

Remember to open a new document for each tutorial. This will make it easier to work with, and a lot
To begin, continue to Chapter II.

Using the drawing tools, usually located on the far left section of flash, you can create artwork, buttons,
even layouts for a flash movie or a flash web site. This section will show you how to use these tools and
let you try them out for yourself as we go. With these tools, you can draw lines, circles, squares and other
shapes. These tools are pretty much what you have expected them to be, simple drawing tools.


The pointer in Flash is basically the cursor. You will need the pointer to move, select, resize different
objects in your movie. To select an object, you can either double click on it, or click and drag over it.
The oval tool:

Select the oval tool from your Tools menu and then click and drag a circle shape onto your stage.
You can start from anywhere from your stage, and once you are satisfied with the size and shape of your
circle, let go of your mouse. Tip: If you hold down your “shift” key, while drawing a circle, you will obtain a
perfect circle. Once this is done, you have a new circular shape on your stage area.
The rectangle tool:
Select the rectangle tool from your Tools menu and then click and drag a square or rectangle onto
your stage. You can do this the same way you did to create a circle. Tip: If you hold down your “shift” key,
while creating a rectangle, you will notice a perfect square being created. Once you are satisfied with the
size and shape, let go of the mouse.
Rounding over a rectangle/square:

To create a rounded rectangle/square, select your rectangle tool from the Tools menu, then select the

“Rectangle Radius Modifier” tool. Set the size to 5, then click on OK. Create your shape, and notice
how the edges are rounded while you are drawing.
The pencil tool:

The pencil tool allows you to draw shapes on your stage freehand. This means that you and your hand

control the position, length and curves in your line. Select the pencil tool from your Tools menu and
draw a line on you stage. You’ll notice the line isn’t perfect, but there is a way to improve it. Select the line

by clicking on it two times, and then go to your line options and select the straighten button. Once
this is selected, your line will become more straight then it was before. You can also add the smooth

option which will make your line perfectly smooth and clean. Now you have perfect lines, the way you
want them to be displayed.
The paint brush tool:

This tool is practically the same as the pencil tool, since it uses the same options as well as giving you the

same appearance you would get from your pencil tool. Select the brush tool, and draw some lines in
your stage. Play with the straighten and smooth options and notice the resemblance to the pencil tool.
The paint bucket tool:

Once you have deleted all the shapes and lines on your stage, create a new square on your stage. Now

you will notice the colors in the square are the colors you have selected earlier. Choose the paint

bucket tool, and then select a color from your “fill” menu . Now that you have selected a new
color, click in the square with your paint bucket, and your new color will be applied. You can do this with
any color you wish, and as many times as you want. If you want to apply a gradient to your square, simple
choose the color menu, and select one of the default gradients. You can click in your square, and for a
more effective result, click and drag the paint bucket while in the square. You will notice a gradient being
produced and moved in your square. Later I will show you how to create your own gradients. Now you
have a good idea on how to fill in your shapes.

Each shape you create such as triangles, squares and circles have an outline, which is a line surrounding
the shape. Select your line, by double clicking it, and go to your line color menu, and choose a
color for your line. Now while your line is still selected, go to Window> Panels> Stroke where a panel
containing stoke options will appear. Choose the Dashed option and notice your line will have a new look
along with the color you have just added to it. That’s it, you now know how to add style to your lines.
Now that you have completed the Drawing section, please make sure you close this document and open
a new one for the next section, Symbols.

In Flash, a symbol represents a movie clip, button or graphic that you have created. Symbols make it
easier to use the same object over and over again without having to re-create it, which is a waste of time.
In this section, we will learn how to create, modify and remove symbols you have created. We will also
learn how to add effects to these symbols, enhancing your movie.

Converting to symbols:

In the stage area, draw a graphic of your choice, using any tool and colors of your choice. Once you have
a new shape on your stage, select it. Your drawing is now selected, from the menu, go to “Insert> Convert
to Symbols”. A window will appear in the middle of your screen called “Symbol Properties”. Choose the
graphic option, then name your symbol “my drawing”. (Shown in figure 1.9)

(Figure 1.9)

Click OK and you will be taken back to your stage. Select your drawing by clicking it once now, and you
should notice a line surrounding it.


Flash takes it upon itself to add all your graphics and buttons to a small database called the Library. This
is where flash allows you to view, edit and remove items you have created. To view the Library, hit
CTRL+L and it will show up. (Shown in figure 2.1)
(Figure 2.1)

Resizing and Rotating:

Using the shape you have converted into a symbol, select it, and click on the resize button, and

resize it to any size you want. Select your symbol again, and this time click on the rotate button, and
rotate your symbol by dragging it in a circular motion using the little white circles surrounding it. When you
are done, deselect your symbol.

(Shown in figures 2.2 and 2.3)

(figure 2.2 and 2.3) Resizing and Rotating symbols

Adding effects:

Select your symbol, and from the menu, go to “Window> Panels> Effects”. You can set any effect you
want to your drawing, in this sample, I used my light yellow happy face and turned into a light blue happy
face using the Advanced Effects. You can play around with these options by selecting one of the options
in the pull down menu, until you get the result you want.
(Figure 2.4)

Editing, Renaming and Deleting symbols:

Select your symbol on your stage, and hit DELETE. Your graphics is now gone from the stage, but not
from the library. In the library, choose your symbol, and now slide it onto the stage area. Now you have
your drawing back where it used to be. To rename, edit, delete or duplicate, you must right click on your
symbol in the library, and select one of the above. Click on Edit, and you will be taken to a new stage,
where you will be able to edit your drawing, and once you are done, go back to Scene 1 by clicking on the

“Scene 1″ button above your timeline. Now rename your symbol to My First
Drawing. If you are getting tired of your little drawing, now’s the time to get rid of it, right click on it in the
Library, and select DELETE. An alert window will show up, and you must click YES to completely delete
it. Now you are left with a blank movie clip, perfect for the next lesson.
This concluded the Symbols section, please proceed to the Layers section.

Layers are simple transparent sheets that are placed one on top of each other. These layers can be
moved around, added and they can also be deleted. They organize your movie and all you to affect
objects without affecting the rest of your movie.

When editing object on a layer, the layer selected will be the only layer that is being modified. To activate
another layer, you must click on it to select it. While it is selected, the layer will be highlighted until you
deselect it. To let you know if a layer is active, you will notice a small pencil beside the layer name.

(Figure 2.5)

The image above is what layers look like. You see here that there are three layers, and layer “one” is
Creating and modifying layers:

Create two more layers by clicking the new layer button. A new layer is created. Now do it one more
time to have a total of three layers. Perfect, now you must rename your layers. To do this, you must click
on your layer, and then double click it, you can now change that names of the layers. In layer 1, rename it
to Square, then in layer 2, rename it to Triangle, and finally rename layer 3 to circle. Once this is done,
you should have the layers looking like Figure 2.6 below.

(Figure 2.6)

Now, in the Square layer, draw a small square image located at the far left of your stage. Now select the
Triangle layer, and draw a triangle in the middle of your stage, but make sure that you fill in the triangle,

and you can use the line tool to create, and finally select the Circle layer, and draw a circle at the far
right end of your stage. Once this is done, you have three different shapes that go with three different

You can set the order of your layers, to minimize the appearance of some objects, or just to be more
organized. To set the order, you simply click and drag the layer up or down to the position you want.

(Figure 2.7)

Set the order of your layers to Circle, Triangle and then Square. You now see how easy it is to create,
rename and move layers.

Locking and Hiding layers:

Locking layers is useful at times to protect other work while you are drawing more graphics. To lock or

unlock a layer, you simple click on the pad lock button and it will display a locked layer. To hide a

layer, you simple click on the hide button, and all the content from the layer you just hid will be
invisible until you unhide the layer.
This concludes the Layers section, please proceed to the Type and Text section

Type and Text

Having text in your Flash movie is a good thing to have. You let users have the chance to read a little
about yourself, or about your company. Having a Flash web site without any text would be kind of boring.
You can transform text into symbols and give them effects to make it look more attractive, but you can
also make it look excellent using a little Action Script. In this section, we’ll learn how to create normal,
input and dynamic text, as well as how to modify your text.

Inserting Basic Text:

Select the text tool, and click anywhere on the stage. You will notice a small text box, with a blinking line it
it, waiting for you to type. Type in a line of text, and you will notice that your line will always remain one
line. This is due to this text box NOT being word wrapped. You can type forever and it will always be one
line until you hit “Enter” to start on a new line. If you want to set a specific width, select the text tool once
again, and this time, instead of just clicking, click and drag a text box of your size onto the stage. You can
now type, and as soon as you get to the end of your text box, it will automatically start a new line.
Creating Input boxes:

When you create input boxes, this will allow users to type in the box in the movie. You can use this to
create Flash forms, or just to play around with. Open you text panel “Window> Panels> Text” and go to
the Text Options tab. Select Input Text from the drop down menu, and you can now insert a text box on
your movie. Click and drag a box, then go text it out by hitting CTRL+ENTER on your keyboard. You can
type text into it from the movie you just created.
Creating Dynamic Text:

Dynamic text is the most important tool you can use regarding text. This allows you to add any text you
want, but you need to make the text box a variable and have it load from some Action Script. From the
text panel, choose Dynamic Text from the Text Options tab. (figure 2.7) Then select multiline from the
second drop down menu. This is the hard part, making it a variable and adding text to it.

(figure 2.7)

Now you see how this should look from the Text Panel, call it text, and hit Enter. Now, go to frame 1 on
your stage, and right click on frame 1. Go to Action, and select the Actions category from the menu.
Choose “Set Variable” from the list, and in the “Variable” field, type in text, then in the “value” field, enter
some lines of text. Once this is done, test your movie by hitting CTRL+ENTER, and you should see some
text on the stage area in your movie.

Modifying text:

If you want to modify your text, there are a few different ways of doing it. You can change it’s color, or
change it’s alignment, change it’s size or make it Bold. Any text modifications are made through the
Character panel. Go to Window> Panels> Characters. Now select your text box, and from the Character’s
panel, change the text to the color green, it’s size to 20 and make it Italic. Now you have text the way you
want it to look. You can do this until you have the results you want and then deselect your text box. Figure
2.8 is what the Character Panel looks like.

(Figure 2.8)

Now you know how to add text to your document, please proceed to the Buttons section.

The button symbol is equiped with the ability to change it’s appearance according to what state the button
it. Theree exists four states, Up, Over, Down and Hit. You can see buttons in their normal state which is
the Up state. You can then interact with it by rolling your mouse ‘over’ the button. When you click on the
button, it’s state will be ‘down’ as long as the mouse remains pressed. A button can also have an
assigned action when a certain state is reached, because of this, there are four frames to define each
state of your button.

States of the button:

1. Up is the state used whenever the mouse pointer is not over the button.

2. Over is used when the mouse pointer is over the button.

3. Down is the state attained when the button is clicked.

4. Hit is invisible and defines the area where the button will react to the mouse pointer.

Creating Buttons:br> To create a button, you need to first have a symbol. On your menu, go to “Insert”
and choose “New Symbols” or hit CTRL+F8 on your keyboard. The “symbols Properties” window will
open, choose button, and call it button 1. Click OK.
(As shown in figure 2.9)

(Figure 2.9)

You will be taken to a new stage, called button 1. In this stage, you will notice four frames. Frame 1, “UP”
is the main frame. This will be the button, when nothing is being done to it by the user. Frame 2, “Over” is
the 2nd part of the button. When the user’s mouse is on your button, Frame 2 will appear, and frame 1 will
disappear. Frame 3, “Down” is the part of the button that is clicked on. When a user clicks on the button,
they will see the image on Frame 3. Finally frame 4, “Hit” is the frame that lets you decide where you want
the button to be activated. Example, if you have a square button, and the “Hit” frame is a circle shape,
when you are viewing your movie with the button in it, only a circle around the square will be considered
by Flash the button.

(Frames shown in figure 3.0)

(Figure 3.0)

In frame 1, draw a rectangle shape, and then add some text to it. The drawing you just added to frame 1
is now what users will see. Now, click on frame 2, and hit F6 on your keyboard, this will add a new
keyframe, and you will notice your button from frame 1 is copied over. You can either leave it as is, but
that’s not exciting or change it’s look. Give the text a bold look, and change the color of your square.
When users put their mouse over the button, they will now see what’s on frame 2. Select frame 3, and hit
F6 once again. You do not have to do this if you do not want to. Frame 3 is only viewed if the user clicks
on your button, but then again, it’s up to you. The image from frame 2 is now copied onto frame 3, you
can modify it the way you want it to look. Select frame 4, and hit F6 again. In frame 4, you do not have to
change anything, because no matter what, no one will ever see what’s on frame 4. You now have a new
button, return to the stage, and from the library, slide you new button onto it. Now
you may want to add some actions to your button, read the following for more details on how to do so.

Adding Actions:

You have created a button, you may want to assign an action to it now. This could server useful if this
button will be used on a web site, you can redirect users to another web page with it. From your stage,
right-click on your button, and select “Action”. You are now in the Action Panel. From the Basic Actions
button, select the getURL command. Now type in a URL of your choice, and close the Action Panel.

(As shown in Figure 3.1)

(Figure 3.1)

Your button has now a link assigned to it. If you want to test it out, go to “Control> Enable Simple Buttons”
or press CTRL+ALT+B and you can now click on your button.

Save your movie as button 1.fla and continue to the Sound section, you will need your button for this next

Adding sounds to movies and buttons really enhances your movie’s experience. In this section, you will
need to create a new button by following this guide here or if you have done the “Button” section already,
just open your button1.fla document and we can begin.
Importing the sounds:

To import sounds, you must go to File> Import and select the sound files you want to import. For this
tutorial, we will be using 2 sound files called “Over” and “Down”. You can download them both into a ZIP
file by clicking here. When you have the sounds downloaded, unzip them and import them into your
movie. Now that you have them imported, you want to make sure you have them imported for sure, go to
your library “CTRL+L” and see if your files are there.
Adding sounds to events:

Now that we have our sounds, we can now start using them. First sound called “Over” will be used in the
button we have created earlier as a mouseover effect. Once a use puts his mouse on your button, it will
play the sound. Second sound we have is called “Down” which will be used on the button as well. When a
user clicks on the button, the sound will be heard. Now, from your stage, right-click on your button and
choose Edit from the menu. You are now in your button’s stage. In your timeline, select frame 2 “Over”
and then open your sound panel “Window> Panels> Sound”. Figure 3.1 shows you the “Sound Panel”.

(Figure 3.1)

From the drop down menu in your sound panel, select the over.wav file, and now you will notice in your
“Over” frame, a line across the frame. This means that the sound has been successfully added to this
frame. Now for frame 3 “Down”, you will add the down.wav sound. To do this, select frame 3 and from the
sound panel, select down.wav from the drop down menu. That’s it, you have inserted all your sounds into
your button and you can now save your document.

Exporting your button:

Now you will have to export this button if you want to have it on your web site. From the File menu,
choose Export. Save your button as button.swf, and click OK. Another screen will pop up called “Export
Flash Player”, just click OK and you’re movie is now exported and ready to be used.

Please proceed to the Animation section.

Flash is mainly used for animation worldwide, now let’s learn how to make some. In this section, we’ll
learn how to create Motion Tweens and Shape Tweens. You can also have animation’s change colors,
resize, rotate and more.

Creating Tweened Symbols:

From your menu, go to ‘Insert> New Symbol’. Choose ‘Movie Clip’ from the options and name it my clip.
You will be taken to a new stage area similar to the main stage. Draw a small circle, then select it, and go
to ‘Insert> Create Motion Tween’. Choose frame 25 from your timeline and hit F6 on your keyboard. All
the frames from frame 1 to frame 25 are now purple, and have an arrow line pointing to frame 25.

While frame 25 is still selected, take your circle shape, and move it to another spot on your stage. Hit
Enter, and you’re circle will move on it’s own.

Creating Shape Tweens:

Shape tweens are a different source of tweening. You do not need to have symbols, just basic drawings.
Create a new symbol, choose movie clip and name is my clip 2. Create a circle, select frame 1, then open
your Frame Panel, CTRL+F. From the panel, select Shape from the drop down menu, and now select
frame 25 and hit F6. This time you will notice a green set of frames.

On frame 25, delete your circle by selecting it and draw a square. Hit ENTER and you’ll see your circle
morphing into a square. That’s it for shape tweening.

Saving Flash Files

To save your work, you simply have to save and export it. To save your movie, go to ‘File> Save as’ and
save it as what you want to. To Export your movie, so you can use it on your web page, go to ‘File>
Export Movie’ and save your movie as what you want. Normal Flash movies are saved as .swf format.

Publishing your movie can be done in different way. You can publish an HTML document, have your .swf
file and some other files such as gifs, jpgs, or bmps. To set up your publish settings, go to ‘File> Publish
Settings’, select the types of publishing you want, then select OK. To publish the movie, go to ‘File>
Publish’ or hit F12 on your keyboard. That’s it, you can now use your movie on the web.