Welcome to the Gidgit Girl Flash MX for Beginners Tutorial.

In this
tutorial, you will learn how to use the basic features of the
Macromedia application Macromedia Flash MX. This tutorial
was designed by Kristine Kopelke.

Flash MX is a program used to create rich Multimedia content for both web,
multimedia presentations and CD-Roms. Flash can be seen on hundreds of
thousands of websites including www.flashkit.com, www.uptoten.com and
www.brainpop.com.

Flash is used to create content such as:

- 2D animations
- websites
- banner advertisements
- animated gifs
- games
- e-cards
- CD-Rom presentations

In this tutorial, you will learn how to:

use the menu, draw tools and modifiers

work with the timeline and layers
create a simple 2D animation using traditional animation technique
create an animation which contains a motion tween
create an animation that contains a shape tween.
save your work in different file formats

If you have earlier versions of Flash, you should be able to refer to the
Lessons in the Help Menu to learn similar skills. If you don’t have Flash, you
can download a trial version at
http://www.macromedia.com/software/trial_download/
Anytime you are working in a new application, it is good to take a good look
around the interface to see what is available to be used.

Look at the diagram below and then explore the interface of your version of
Flash MX.

MENUBAR TIMELINE PANEL SETS

The menu bar contains drop
down menus that allow you
to choose options that edit,
open, close or control your
movie.
The timeline is made up of
hundreds of frames. A frame
that contains a black circle is
called a keyframe.
In the section at the right of
the screen, we have Panel
Sets. Panel sets have items
we can change that relate to
the movie you are creating.

WORK AREA or STAGE

This is the area where you
create your movie. You can
draw images, import media
and develop animations in
this area.

TOOLS ACTIONS - PANEL PROPERTIES PANEL

The tools panel contains the
tools you can use to select,
draw, paint, fill, resize, rotate
and manipulate your images.
The bottom half of the tools
panel contains the modifiers.
Modifiers are the options you
have for the different tools.
The actions panel can be The properties panel
expanded to allow you to contains the options you
create actionscripting. have for the tool or object
Actionscripting allows you to you are working with.
make your movie interactive
with buttons and special
effects.
The tools panel is used frequently in Flash MX. It has 16
tools that can be used as well as view, colour and tool
options.

Each time you click on one of the tools in the top section, the
Options section will change. This is important to note because
you may find your tools are doing strange things.

Strange??

Well, an example of this is when you try to use the pencil tool.
When you open Flash MX for the first time, the pencil tool is
set on the straighten option. This means that when you try to
draw, all the lines will be made straight. If you want to draw a
curved or wriggly line, you will need to click on the straighten
option button and change it to smooth or ink. This will enable
you to draw the shape you want.

TASK 1.

Experiment with every tool and the options it has. You will find
these tools are very powerful for an image editing program and
will provide you with hundreds of easy ways to change the look
and feel of the image you are making.

There are also additional options or properties relating to the

tool in the Properties Panel shown below. The contents of
this panel will change depending on what you have selected
on the stage.
ANIMATED ANIMAL

You should now be familiar with

the tools and properties sections of
the Flash MX Interface.

We will now create a simple

animation using traditional
animation techniques.

The difference between traditional

animation and computer animation
is that the traditional technique
involves you creating every frame of
the animation sequence. In computer
animation, the computer can create
many of the frames. We will look at this concept further as we work through
this tutorial.

Let’s get started.

1. To begin, draw a character of your choice in the stage. My example above

shows a bear that I have created using a number of oval shapes.

2. Give the stage a background colour by clicking on a blank part of the stage
and changing the Background option in the Properties panel.

To create our animation, we are going to use the timeline and create a series
of keyframes where the bear’s face changes slightly. My bear has a blank
expression with his straight mouth. We are going to make him smile. You
could also change other parts of your character such as the eyes or nose.
3. If you look at the Timeline at the
right, it will look like yours. It has
one layer named Layer 1 and one
keyframe. The keyframe is in Frame
1 of the timeline. You can tell a
keyframe from a normal frame
because it contains a dot.

We will now name the layer after our animal or image. I am going to call my
layer Bear.

To change the layer name, double click on the words Layer 1. You can now
edit the text.

IT’S TIME TO ANIMATE!

4. Click on Frame 2 of the timeline. The frame will turn blue to show you
have it selected. Select Insert > Keyframe from the menu. This will put
a new keyframe in Frame 2.

5. Click on Frame 1 and you will see that in it there is the picture of your
animal. Click on Frame 2 and you will see the same picture.

6. To create the animation, we simply need to change the image in Frame 2.

You can adjust your animal’s mouth or face by selecting the black arrow
tool and moving it close to the feature. It will change and you will be able
to alter the mouth or feature’s shape.

I have change the bear’s mouth in Frame 2 to make him smile.

Frame 1 Frame 2
7. You can check out your short animation by selecting
Control > Test Movie.

Your image will change quickly as the animation moves through the 2
frames.

8. You can make your animation even longer by adding more keyframes and
changing your character’s expression in each frame.

Your animation could have hundreds of frames – but because this

technique is the traditional one – you will be creating every frame.

If that sounds like a lot of work, save your animation now and continue with
the next activities.

You should save your animation as animal.fla and then export it as

animal.swf.

If you want you can then set up your animation to be viewed on any computer.
Simply go to Publish Settings and select .exe (Windows) or Macintosh
Projector (Mac). Then click on Publish.

Your animation is ready to view. Well done!

If you’re ready to let the computer do the hard work, go to the next page for
the next activity!
The purpose of making a motion tween is to get Flash to make some of the
changes for us in an animation. For example, if you wanted to make a
butterfly fly across the sky, you could use the traditional technique above.

To do it that way you could add a keyframe and move the butterfly slightly in
each keyframe until it moved completely across the sky.

We are going to get Flash to move it for us.

1. Start by making two layers.

Name one of them Butterfly
and the other Flowers. You
should have the Butterfly
layer on top. If it is below,
simply click and drag it above
the Flowers layer.

2. Draw your butterfly on the

butterfly layer and your
flowers on the flowers
layer. You could have
other layers containing
objects of your choice.
Use your imagination.

3. To be able to animate your butterfly, it will

need to be grouped or converted into a
symbol. We will just group it in this exercise
by selecting it with the black arrow tool and
clicking on Modify > Group.

Your butterfly is now ready to be animated.

4. Click on Frame 25 on the Butterfly layer and add a keyframe by selecting
Insert > Keyframe or pressing F6.

5. Then click on Frame 25 of the Flowers layer and add a keyframe by

selecting Insert > Keyframe or pressing F6.

6. Click on Frame 25 of the Butterfly layer again and then click on the buttefly
picture. Move the butterfly in this frame to the other side of the screen.

The butterfly will appear in one spot for the first 24 frames and will then
change to the new spot in Frame 25. My frames look as follows:

Frame 1- 24 Frame 25

7. We are now going to get Flash to create a motion tween to move the
butterfly gradually from the position in Frame 1 to Frame 25.

To do this, right click on one of the frames between Frame 1 and Frame
25 and select Create Motion Tween. Your timeline will look like this.
8. Your animation should now work. Click on Enter to view your butterfly
fly or press Control > Test Movie.

9. Your butterfly will fly from the one point to the next in a straight path. If you
want the butterfly to fly in a different way, you can simply add in extra
keyframes and move the butterfly’s position.

I added extra keyframes

between Frame 1 and 25, a
and now my butterfly
flies up and down from one
side to the other.

10. Save your work and

export or publish it so
it is ready to show off!

Get ready to shape tween on the next page.. The fun is just beginning!
A motion tween makes an object move around the screen. A shape tween
changes the object from it’s original shape to a new one.

We are going to change one image into another. This process is also called
morphing.

1. Start by drawing a shape of your choice in frame one of your animation.

It is good practice to name your layer but for this activity it isn’t necessary.

2. If your shape has an outline, double click on the outline and remove it.
This will make your shape tween cleaner.

I have drawn a rectangle

in the first frame.

The first frame contains

a black filled circle which
shows that it is a
keyframe with an image
in it.

3. Click on a frame later in the timeline. I chose Frame 25 again but you can
select any frame you want. The more frames you leave, the longer the
rectangle will take to tween or morph into our next shape.

4. Insert a keyframe at the frame you have selected by pressing F6.

5. At this new keyframe, delete the rectangle and add a new shape such as
a circle or star. Remove any outlines as we did earlier.
6. My timeline now contains a purple rectangle in Frames 1 – 24 and a red
star in Frame 25. We will now create the Shape Tween to morph the
rectangle into the star.

b
7. Click on any Frame between 1 and 25 and in the Properties panel at the
bottom change the Tween option from None to Shape.

8. Press Enter to see your first shape change into the next shape. You can
add even more frames further along and make new shapes to make a
series of shape tweens.

You can even make words change into shapes or other words. To do this
you must type the text in using the Text tool and then break the text apart.
To break it apart select the text and choose Modify > Break Apart.

9. Once you are happy, save and publish your work.

You have completed the first Gidgit Girl Flash MX Tutorial.

© This tutorial was developed by Kristine Kopelke. If you wish to use this at any workshops or
conferences, please contact her at the kxkop0@woreess.qld.edu.au to seek permission. It may be
used in classrooms and by individuals to develop skills in Flash MX.