Page 1 From http://www.webwasp.co.uk/tutorials/a01-simple-links/index.

php

Flash Tutorial MX 2004 - Simple Links 01 Beginners Flash Compatibility: MX 2004

Written by: Phil Length: 1500 words
This tutorial is designed for people who have little or NO Experience of using flash. The aim of the tutorial is
to show you how to link one Flash 'page' with another 'page'. Page is in inverted commas because Flash does
not really have pages but frames, but the idea is the same.

Step One: Setting up the document

We are going to open a new Flash document and customise it.

1. Go to: File > New > General Tab > Flash Document > OK

Note: The work space in Flash is often quite cluttered with Panels.
Panels are tool boxes and although useful - much of the time time you
don't need them and I think for beginners they are confusing. For this
reason we are going to close then all except for the Timeline and
Tools. You can turn these Panels off and On in the Windows Menu.
Only the Timeline and Tools are open.
Note: You should also close all the Panels that you will find in the sub
menus. The sub menus can be accessed via the little triangles:
2. We are now ready to customise the document. Go to: Modify >
Document.
3. Type in the dimensions that you want for your movie. The one above
is 200 x 130 px (pixels).
4. Select a background colour by clicking on the coloured swatch.
5. Click: OK.
6. Save your file
Your Document Properties should look
like this.

Step Two: Setting up Frame 1

1. Using the Text Tool on the tool bar

type: 'Page One' on the stage. The stage
is the visible 'page'.
2. When you have finished typing go back to
the Selection tool .
3. If you want to change the colour, style or
size of the font you can do so in the
Property Inspector: Window > Properties
4. Note: If you want to change the type settings the text must be selected. If you click on your text with the
Selection Tool the text will have a blue rectangle around it:
Go to: Windows > Common Libraries > Buttons > Classic Buttons
To look at the buttons you need to double click on the folders . Choose a button and drag it out on to
the stage. I selected: Classic Buttons > Arcade Buttons. You can move the position of the button by
clicking on it with the Selection Tool and dragging it.
Note: If you take a different button from the Common Button Library avoid Knobs, Faders and
Component buttons as they work differently.
 Page 2 From http://www.webwasp.co.uk/tutorials/a01-simple-links/index.php
5. Place anything else that you may want on the first frame. You can draw with some of the tools on the
tool bar or copy and paste clip art from other programs such as Word. You can also paste from graphics
programs like Freehand, Illustrator or CorelDraw.
6. Save your file.

Step Three: Setting up Frame 2

1. Go to the Timeline and place your cursor in frame 2.
Right click (Ctrl click on a Mac) and select: Insert
Keyframe
You will now have a black dot in both frames 1 and 2.
This copies all the contents from frame one and
places them onto frame 2. It is the same as copy and
paste. Your stage should look the same as before you
clicked in frame two but now you are actually in a
different place in the movie. The red play head should
now be in frame two:
Two black dots in the timeline represent the
Keyframe's.
2. Use your Text Tool to over write the word 'one' and type 'two'. It should now say: Page two
3. When you have finished typing reselect the Selection Tool:
4. Go back to the Common Button Library (Windows > Other Panels > Common Libraries > Buttons)
and select a button as the back button and drag it onto the stage.
5. Click on the back dot in frame 1 and you will see that the difference between the two frames.
6. Click on the black dot (called a keyframe) in frame 2 and add any additional graphic and text elements
that you may want.
7. Save your file.

Step Four: Setting up Frame 3

1. Right click in frame 3 and select select: Insert Keyframe
2. Make any changes to frame 3 as you did for frame 2.
3. Save your file.

Step Five: Testing the Movie

1. Time to test your movie. Go to: Control > Test Movie
Note: This takes you to a new window. Your movie should be jumping from frame to frame non stop.
You should be able to see a clear difference between all three frames.
2. Close the window. You do this by clicking on the lower of the two crosses in the top right hand corner
of your screen. This will not close your file but only the test window.

Step Six: Stopping the Movie from Auto Playing

1. Welcome to ActionScript. Your first bit of programming! You

need to select frame 1 (the first frame with a black dot in it):
Click on key frame 1
2. Open the Actions Panel. On the keyboard press: F9
Important: If you have selected the Frame correctly the Actions
panel should say Actions - Frame. Beware it is easy to attach your Actions to the wrong thing! Get in the
habit of checking the top of the Actions panel before you use it.
Always check what it says in the top left corner of the Actions Panel.
 Page 3 From http://www.webwasp.co.uk/tutorials/a01-simple-links/index.php
3. Click on the: Plus Sign > Global Functions > Timeline Control > Stop
Your Actions Panel should display the following ActionScript:

stop();

4. Close the Actions Panel - on the keyboard press: F9

Note: A small a should appear above the black dot in frame
one. This indicates that the key frame has some Actionscript
attached to it.
Note the little 'a' in frame 1.
5. Test your movie:Control > Test Movie
Your movie should be stopped on frame one.
6. Close the test Window.
7. Save your file.

Step Seven: Attaching actionscript to the buttons

1. In the timeline, if you are not already on frame 1, drag the red Play Head to: Frame 1
2. On the stage select the: Button
3. Open the Actions Panel - on the keyboard press: F9
Important: If you have selected the button correctly the
Actions panel should say Actions - Button in the top corner:
Always check what it says in the top left corner of the Actions
Panel.
4. Type the following code into the Actions Panel:

on (release) {
gotoAndStop(2);
}

This means that when the mouse button is released you will go to frame 2 and stop.

Step Eight: Testing the button

1. Time to test again. Go to: Control > Test Movie

2. Click on your button. You should move to frame 2.
3. Close the test Window by clicking on the cross:

Step Nine: Add the Actions to the remaining buttons

Add the actionscript to the remaining buttons and you are home and dry. Well done. To do this go back and
repeat Step Seven. Except this time do not go to frame 1 but go to frame 2 and select first one button and then
the next.
Your actionscript will look slightly different as you the buttons will be moving you to different frames. The
actionscript that moves you from frame 2 to frame 1 will look like this:

on (release) {
gotoAndStop(1);
}
 Page 4 From http://www.webwasp.co.uk/tutorials/a01-simple-links/index.php
The actionscript that moves you from frame 2 to frame 3 will look this:

on (release) {
gotoAndStop(3);
}

When you have done both of these buttons will also need to go to frame 3 and set the actionscript for that
button.

Remember to keep testing your movie: Control > Test Movie

Flash Tutorial MX 2004: Animation - Tweening 02 Absolute Beginners Flash Compatibility: MX

2004 Written by: Phil Length: 1200 words
Show you how to create a simple animation with a technique called Tweening.
Step One: Setting up the Document

1. Go to: File > New > General Tab > Flash Document > OK
2. We are now ready to customise the document. Go to: Modify > Document.
3. Type in the dimensions that you want for your movie. The one above is: 200 x 130 px
4. Select a background colour by clicking on the coloured swatch.
5. Click: OK
6. Go to: File > Save

Step Two: Creating a symbol

In Flash whenever you use an object more than once you create a symbol. This saves on download time as the
symbol downloads only once. Even though you may use it many times the original symbol is simply repeated as
many times as need be without repetitive downloads. In Flash when you animate with a technique called
tweening you must use a symbol. Tweened animation only use symbols.

1. If the Edit Bar is not open, open it: Window > ToolBars > Edit Bar
2. Go to: Insert > New Symbol
3. Give your symbol a name: Bounce Grafx
4. For behavior select: Graphic
5. Click: OK
Note: This takes you to
a new work area to
create your symbol.
This is not the main stage.
The Edit Bar enables you to see that you are working in a symbol called: Bounce Grafx.
6. Create your new symbol in this work area:
You can type a word or draw something simple. As long as you have something to animate. I used the
Text tool to type the word: Bounce
7. Once you have finished typing (or drawing) go back to the: Selection tool
8. Return to the main stage by clicking on the Scene 1 button in the Edit Bar:
Note: Scene 1 is the main stage or main work area.

Step Three: Placing your symbol on the main stage

 Page 5 From http://www.webwasp.co.uk/tutorials/a01-simple-links/index.php
1. The main stage should be empty. Don't panic you haven't lost your symbol. It should be in the library.
Click on: Window > Library
2. Drag your symbol onto the main stage.

Step Four: Animating your symbol

1. Go to frame ten in the Timeline and right click. Select:

Insert Keyframe
This copy and pastes whatever is in frame 1 into frame
10.
2. Use the Selection tool to drag the symbol (in frame 10)
to a new position on the main stage. This will not move
the symbol in frame 1.
3. In the Timeline right click (Mac: Ctrl click) the Keyframe
(black dot) in frame 1 and select: Create Motion Tween

Note: In the TimeLine you should now see an arrow between the two keyframes. This will have a
mauve background colour.

How a Motion Tween should look in the timeline - An arrow with mauve background.
There is no Tween here so there is no arrow or mauve background.
A broken Tween has a dotted line instead of an arrow.

Note: A Motion Tween has the same symbol in each end of the Tween or in each Keyframe. The most common
reason for a broken Tween is that there is the symbol plus an addition object in one of the Keyframes. If you
need a button or additional text or drawings these should be placed in a different Layer to the Tween. To create
a new Layer click on the Insert Layer button:
Remember: Tweens cannot be mixed with other objects.

Step Five: Test your animation

1. If the red Play Head is not in frame 1, Click on frame 1 to place it back at the beginning of the movie.
2. Press Enter on the keyboard to test your animation.

Step Six: Extending your tween

1. Right click on frame 20 and choose: Insert Keyframe

2. Drag the the symbol in frame 20 to a new position.
3. Right click in frame 10 and select: Create Motion Tween
Continue to repeat this every time you want the symbol in a new position.
Extending or reducing the Tween
To slow the animation down go to the Timeline and click in-between the any two Keyframes and press F5 on
your keyboard. This will add frames to your tween and the more frames there are the slower the movie will
play.
Do the same but use Shift F5 to delete frames in the Tween, which speeds the animation up.
Free Transformation Tool - Try changing the size of the symbol with the Free Transformation Tool. To do
this click on your symbols with the Free Transformation tool and drag one of the little square handles. You
can also rotate and shear a symbol with this tool.
 Page 6 From http://www.webwasp.co.uk/tutorials/a01-simple-links/index.php
Transform Panel

You can change how a symbol looks in the Transform Panel. Try and change the width, height, rotation and
skew using this panel. The change will be incorporated in the animated
Motion Tween.

1. Go to: Window > Design Panels > Transform

2. Select the symbol on stage with the Selection tool:
3. Change some of the settings in the Transform Panel
The Transform Panel
4. Move the Play Head back to: Frame 1
5. Test your movie by pressing: Enter

Properties

The Property
Inspector also enable
you to change how
your symbol looks.
You can change:
Width, height and X
Y axis (position on the stage). You can also change the colour or transparency of your symbol.

The Property Panel.

To change the colour or transparency of a symbol:

1. Go to: Window > Properties

2. Select the symbol on stage with the Selection tool:
3. Select the drop down arrow next to the word: Color
4. Select: Either:
• Brightness: To make a symbol dull or bright.
• Tint: This will effect the colour of the symbol.
• Alpha: This will effect the transparency of the symbol.
• Advanced: You can set both Tint and Alpha at the same
time.
• Remember to keep testing your work: Control > Test Movie

Flash Tutorial - Tweening with Motion Guides - 03 Beginners Flash Compatibility: MX 2004
Written by: Phil Length: 1400 words Assumed Knowledge : Tweening
The aim of the tutorial is to learn how to tween symbols
using motion guides. Ordinarily with a Tween an object
moves in a straight line from one point to the next. Motion
guides allow you to move an object in a curve or spiral
between one point to the next.

Step one: Setting up the Document

1. Go to: File > New
2. Go to: Modify > Document
3. For Dimensions type: 200 x 160 px
 Page 7 From http://www.webwasp.co.uk/tutorials/a01-simple-links/index.php
4. If you wish change the Background colour.
5. When everything is correct click: OK

Step two: Create a Symbol

1. Go to: Insert > New Symbol

2. Give the symbol a name: Spiral
Select Behavior: Graphic
Click: OK
3. Use the text tool and type: Spiral
Note: You can of course type anything you like. You could also use a drawing tool like the Brush to
draw something. You could also copy and paste from another program. This could be clip art (from a
program like Word) or a drawing from a graphics program such as: Freehand, Illustrator or CorelDraw.
4. When you have finished typing (or drawing) use the Selection tool to move the text (or drawing) to the
centre of the symbol. You will see a cross which is the registration point or centre point of the symbol.
Note: If you want to centre something with accuracy use the Align Panel. Select the object you want to
align.
a. Go to Window > Design Panels > Align
b. Select the To Stage button:
c. Click the Align Vertical Centre:
d. Click the Align Horizontal Centre:
5. If the Edit Bar is closed, open it: Window > Tool Bars > Edit Bar
6. When you have finished return to the main stage by clicking on the Scene 1 button:

Step three: Motion Tween

The next step is to create a standard Motion Tween:

1. Open the Library: Window > Library

2. Drag the symbol Spiral on to the Main Stage.
3. In the Timeline right click (Mac Ctrl click) on: Frame 40
4. A menu appears - select: Insert Keyframe
You should now have a solid dot at each end of the timeline:
Timeline with
two keyframes.
5. If the Property
Inspector is
closed, open it:
Window > Property
6. In the Timeline click on: Frame 1
7. In the Property Inspector select: Tween > Motion
Your Timeline should now look like this:

If the Tween is correct you have an arrow in between the two keyframes (black dots) with a blue
background.
 Page 8 From http://www.webwasp.co.uk/tutorials/a01-simple-links/index.php
8. Rename Layer 1. In the Timeline double click on the words Layer 1 and type: Tween
For the moment we are done with the Tween.

Step four: The Motion Guide

1. In the Timeline
click on the
Button: Add
Motion Guide

The new Guide Layer above the Tween.

2. If your Tools are not open, open them: Window > Tools
3. Select the: Pencil Tool
4. In the Options section at the bottom of the Tool Panel select: Smooth
Selecting the Smooth setting for the Pencil tool.
5. In the Guide
Layer select:
Frame 1 Frame
1 of the new
guide layer
selected.
6. With the Pencil
tool still
selected: Draw
a spiral
The Stage with
both Layers.
Note: Make
sure that spiral
(or any other
curve that you
want to draw)
must not cross
over itself.
7. Go to the
Selection tool:
8. Click on the
spiral line to
select it.
9. If the Property Inspector is closed, open it: Window > Property
10. The Property Inspector will now display information about the Pencil tool. If it is not
set to a line width of 1 point (or less), select: 1
Setting the Pencil tool to a Stroke Height (width) of 1 point.
11. In the Guide Layer click on the: Lock Button
The Guide Layer is padlocked.
This is done to ensure that the spiral guide drawing is not
selected by mistake.
 Page 9 From http://www.webwasp.co.uk/tutorials/a01-simple-links/index.php
12. Go to: View > Snapping > Snap to Objects
Snap to Objects should be ticked:
Note: This is not essential, but it makes it easier because you
will clearly see the Spiral Symbol snap onto the guide line.
13. With the Selection Tool grab the centre point of the 'Spiral:
text and drag it onto the beginning of the spiral line. You
should see the text jump as the text symbol snaps onto the
guideline.
The Spiral text centre point snapped onto the begriming of the
guideline.
Note: It is the registration point in the centre of the symbol
which snaps to the guide. The registration point must be
directly over the top of the guideline. It is easiest to pick up the
symbol by the registration point.
14. Move the Playhead to: Frame 40
Playhead on frame 40.
15. Drag the "Spiral" text onto the end of the spiral guideline. You
should see the text jump as the text symbol snaps onto the
guideline.
Symbol snapped onto end point of guideline.
16. The Motion guide is now complete. To test the movie, on the
keyboard press: Enter
The word "Spiral" should move in around the spiral guide.
Note: The guideline will not be visible in the final published
movie. To preview what it will look like when finished goto: Control
> Test Movie

Step five: Background

In my example movie at the top of the page I have a spiral background:
Spiral Background.
This spiral is simply drawn in a Layer of it's own and is not related to the
Tween or Motion Guide. To create a background do the following:

1. In the Tween Layer click on the: Lock Button

Both the Tween and Guide Layer should now be locked and
you should see the padlock icon in both layers.
2. In the Timeline click on the Button: Insert Layer
3. Re-name this Layer: Background
4. This new Layer will not be in the correct place. It should be at the bottom of the stack of Layers. Drag
this new Layer so that it is underneath the others.
All three layer in the correct order and the top two locked.
5. Use the Brush tool to paint a spiral or other shape.
6. Save and test your movie.
 Page 10 From http://www.webwasp.co.uk/tutorials/a01-simple-links/index.php
Note: In the Illustration above the Layer name 'Background' is indented to
the left of the Layer labeled 'Tween'. If your labels are not indented but
straight in-line one under the other as in the illustration below, the two
layers are part of the same group.
If the under the guide are in a in-line they are part of the guide group. It
does not need part of this group. Drag the Label 'Background' down and to
the left. This will remove in from the group like this:
To place a layer back the group drag it slightly up and to the right. In this way you can have more than one
object attached to the same guide, each with its own individual Tween

Flash Tutorial - Tweening Shapes 04 Beginners Flash Compatibility: MX 2004

Written by: Phil Length: 1000 words
Assumed Knowledge : Tweening on stage, attaching simple actions to buttons and the time line.
The aim of the tutorial is to learn how to morph shapes in Flash. In Flash this is called tweening shapes. This is
a simple form of animation that changes one shape into another.

Step one: Creating a Shape

1. Open a new document.
2. Select an appropriate size and background colour by going to:
Modify > Document
The size of my movie is: 200 x 130
3. Type the word: one
The layer I shape tweened starts with nothing but the word: one
Note: Anything you shape tween must be on the same layer, so make sure that objects that are not going
to be shape tweened are in a separate layer.
4. You may wish to change the size of your text with the free transformation tool .
5. Select your arrow tool .
6. With the word 'one' still selected go to: Modify > Break Apart
This breaks the word up into individual letters.
7. Do the same thing again: Modify > Break Apart
The second break apart creates shapes.
When a shape is selected, it is dotty.
If it is not dotty when selected, but has a rectangle around it, it is not a shape, which means you cannot
shape tween it!

Step two: Selecting the frame to shape tween

1. If the Property panel is not open, open it by going: Window > Properties
2. The shape tween is a frame property. To display the frame details in the Property panel click on the
keyframe in frame one (the dot under the play head).
3. You should now see the word Tween in the Property panel. From the drop down menu select: Shape
There are now other options visible in this section of the Property panel, none of which you have to use!
Tween options visible in the Timeline when the tweened frame is selected.
Ease: A positive value will speed the tween, so that the shape changes very
rapidly, then slows down. A negative number does the opposite. Quite
honestly it does not make a big difference.
Blend - Distributive: Creates more smooth but irregular shapes in the
animation.
Blend - Angular: Preserves angles and straight lines during the animation.
If there are no angles or straight lines, Flash will revert back to Distributive without asking!
 Page 11 From http://www.webwasp.co.uk/tutorials/a01-simple-links/index.php
Note: As the tween is not finished, you will not see what these settings do, so don't change them now, come
back to frame 1 and play with these settings when you have finished the tween.

Step three: Your second shape

For a shape tween to work you must have two shapes.

1. Right click (Mac: Ctrl click) on frame 15 and select: Insert Keyframe.
The time line should now have a arrow between frame 1 and 15.
This is the symbol for a tween. If your time line does not have an arrow, you have done something
wrong
At this stage you can either change the shape of your existing art work, or delete it and create a new
shape. I am going to do the latter.
2. Delete the word: one The word will still be in frame 1.
3. Type the word: two
4. If you wish, change its size, position, rotation or colour.
5. With the word 'two' still selected go to: Modify > Break Apart
6. Do the same thing again: Modify > Break Apart

Step four: Test your movie

Your shape tween should now be finished.

1. Save the movie

2. Go to: Control > Test movie

Step five: Shape hints

You do not need to use shape hints and I did not use them in the movie above, but often shape tweens throw up
unexpected results. To control the way the shape changes as it moves you use shape hints.

1. Go back to frame 1
2. Go to: Modify > Shape > Add Shape Hint
This will place a disk marked with a letter: A
3. Drag this to point to a new position that you want to mark on the word: one
4. Go to the last frame of the shape tween: frame 15
The disk will already be there.
5. Drag it to mark a corresponding point on the word: two
6. Test the move to see the difference.
7. Change the position of the disks and test again.

• If you place additional disks in frame 1, they will be marked B, C, D etc. You can only have 24 disks.
• If the disks are not visible go to: View > Show Shape Hints
• It is best to place the first disk in the top left hand corner of your shape and work anti-clockwise around
the shape with subsequent disks.

Step six: Tips

For the best results try not to make the shapes too complicated. Otherwise you may get unexpected results.
 Page 12 From http://www.webwasp.co.uk/tutorials/a01-simple-links/index.php
You can shape tween things you draw or type, but if they are groups, instances or text, they must be broken
apart (Modify > Break Apart). Text has to be broken apart twice! Some groups or other objects may need to be
broken apart several times. Remember if the object is not dotty, you cannot shape tween it.

The simplest thing to shape tween is something you have drawn on stage.

You can also break apart and shape tween a bitmap, but it does not work very well.

Flash Tutorial - Creating simple buttons 05 Beginners

Flash Compatibility: MX 2004 For Flash MX click here Written by: Phil Length: 1500

This tutorial is designed for people who have little Experience of using Flash. The aim of the tutorial is to be
able to create your own buttons, how to Align objects to the stage and create layers.

States of the button

The button can change it's appearance according to what 'state' it is in. There are four states: Up, Over, Down
and Hit.

1. Up: Is when the mouse pointer is not over the button.

2. Over: Is when the mouse pointer is over the button.
3. Down: Is when the mouse pointer is over the button and the mouse button is down.
4. Hit: Is an invisible area of the screen. This area defines when the mouse pointer is 'over' the button or not.

Roll your mouse over the button below and click to see the Up, Over and Down states. You can't see the Hit
area as it is invisible. The button has no actions so does not do anything.

Step one: Setting up the Document

1. Set the size of the Flash Movie: Modify > Document

The movie above is: 200 x 130px

Note: You can either have a Flash movie which contains a number of buttons or you can have a
Flash movie that is a single button and no more.

Step two: Creating the button symbol

A button is a type of Symbol, so the first to do is

create a 'Button Symbol'.

1. Go to Insert > New Symbols

(or hit CTRL+F8 on your keyboard)
The "Symbols Properties" dialogue box
will open.
2. Name it: Button 1
3. For Behavior select: Button
4. Click: OK
 Page 13 From http://www.webwasp.co.uk/tutorials/a01-simple-links/index.php
You will go to a new stage, called Button 1. In this stage, you will have
four frames:

Frame 1 - Up
Frame 2 - Over
Frame 3 - Down
Frame 4 - Hit

Step three: Creating the up state

1. In the middle of the stage draw a rectangle with the rectangle tool:
When you have finished drawing your rectangle, make sure you go back to the Selection tool:
If you do not do this you will draw more rectangles by mistake.
2. With the selection tool , single click on the rectangle fill and select any colour you may want with the
Fill Color tool:
3. You need to align your rectangle to the centre of the stage using the Align panel. Go to: Window >
Design Panels > Align (Ctrl K)
4. Double click on the coloured fill of the rectangle. This should select both the fill and the stroke (outline).
Fill and stroke highlighted: Both are dotty!
Warning: If the fill and stroke are not both highlighted you will only move part
of your rectangle. Often the stroke will get left behind, even if the stroke is white, and cannot be seen, be
careful not do to do this, as this 'debris' may cause problems latter.

5. In the Align panel click the 'To Stage' button:

6. With the rectangle selected click on the Align Vertical centre button:
7. Click on the Align Horizontal centre button:
8. Use the Text tool to type 'Click Here' (or whatever else else you might want your button to say).
Note: If you are familiar with the use of Layers in Flash it would be better to have the text in its own
layer. This makes it easier to change the rectangles colour or shape latter (you simply need to lock the
text Layer). Having said that it not essential, so I have not used layers in this tutorial.
9. The text must be set to Static. To check this open the Property panel: Window > Properties.
With the text still selected the panel should say: . If it does not, use the drop down arrow to
select static text.
10. Select your text with the Arrow tool:
11. In the Align panel the 'To Stage' button
should still be selected (it will be
white, not gray, see picture below).
12. Click on the Align Vertical centre
button:
13. Click on the Align Horizontal centre
button:
14. After you have finished the text you
may need to re-size your rectangle.
Because the text is on top of the
rectangle it may be difficult to select.
If need be just move the text out of the
way - you can always re-position it
using the Align Panel later.

To re-size the rectangle double click on it with the: Selection Tool

 Page 14 From http://www.webwasp.co.uk/tutorials/a01-simple-links/index.php

Then either use the: Free Transform Tool

Or use the Property Inspector and type in the size you want. If it is not open go to:
Window Properties
After you have re-sized your rectangle you will need to re-centre it with the Align Panel. You may also
need to re-centre the text.

Step four: The over state

1. Right click in the 'over' frame in the 'text' layer and select: Insert Keyframe
You will notice the play head has moved to the 'over' frame and your text and rectangle from frame 1 is
copied to the over frame.
2. Select the text with the Selection tool and change the text to bold by going to Text > Style > Bold
Note: Instead of changing the text to bold you could do any other change you wanted such as size,
colour or position.
3. You may need to align the text centre of the stage again.
4. Right click in the 'over' frame in the 'background' layer and select Insert Keyframe.
5. Change the rectangle to another colour by single clicking the fill colour of the rectangle (only the fill
will be dotty). Select a colour by clicking on the Fill Color tool:

Step five: The down state

Do the same as step three by:

1. Inserting new Keyframes in the Down frames of

both layers.
Your timeline should look like this: Note the keyframes - black dots.

2. • Change the colour of the rectangle and/or...

• Change the colour or the look of the text.

Step six: Placing the button on the main stage:

1. Click on the Scene 1 Tab:

You will return to the main stage, which should be empty. Don't panic you haven't lost your symbol.
2. Click on Window > Library. Your symbol will be in the library.
3. Drag your symbol from the Library onto the main stage.

Step seven: Actions

The hit state

The hit area is normally the same as the rectangle. You do not need to create this unless the hit area is different
to the original rectangle you created on frame one.
Note: If your button does not have a solid background (in this case a rectangle) but only text, you will have to
create a rectangle (or other solid shape), in the hit area frame. Otherwise when the mouse pointer goes over the
gaps between the letters, the button will go back to frame one: The over state.
Very slowly move the mouse over button 1 below and you will see the problem.
Move the mouse slowly over the Buttons to see the difference.
Button 1 is not stable and moves between states with small movements of the mouse.
Button 2 is stable. Button 2 has a rectangle in the 'Hit' frame. This is not visible in the movie, but controls the
'Up', 'Over' and 'Down' states.
 Page 15 From http://www.webwasp.co.uk/tutorials/a01-simple-links/index.php

Flash Tutorial - Animated Masks 06 Beginners Flash Compatibility: MX 2004

Written by: Phil Length: 1000
The aim of the tutorial is to show you how to make a simple animated mask in Flash. A mask is an object which
hides something. In the example below you can see through the circle, which is animated, and everything else is
masked.
Flash movie with an animated mask.

Step one: Create a New Movie

1. Create a new movie.

2. Go to: Modify > Document
3. Set the: Size. I set my movie size to: 550 x 170 pixels
4. Set the: Background colour. I set mine to: White
5. Click: OK
6. In the Timeline re-name Layer 1 to: Background
7. Create an image or text to go on the first Layer. You could also import a photo. My Background Layer
looks like this:
The dark gray background is drawn onto the
stage then the text typed over the top. If I did
not paint a background you would not see the
shape of the gray circle but only the letters.

Note: The text must be set to Static text. If you

are not sure if your text is static select the text
with your Selection tool and look at the settings in the Property Inspector (Windows > Properties). It
should say: Static Text.

Text set to Static.

Tip: To make the text fit exactly into the area you want resize it with the Free Transform Tool:
8. Save the file. I called mine: animated-mask
Note: For file names do not use spaces or any punctuation. You may use letters, numbers, underscore _
and hyphen - only! You can use capitals if you want.
Step two: Create a symbol to animate
1. Go to Insert > New Symbol
2. Name the symbol: Circle
3. For Behavior select: Graphic
4. Click: OK
5. Draw a circle (or whatever). The colour of the circle makes no difference.
6. Return to the main stage by clicking on the tab on the top left of the stage.
 Page 16 From http://www.webwasp.co.uk/tutorials/a01-simple-links/index.php
Step three: Create the mask layer

1. Create a new Layer above your background layer by clicking on the Insert Layer Button:
2. Name the layer: Mask
3. Open your Library: Window > Library.
4. Drag the circle symbol
into the new mask layer.

Step four: Create the animation

1. Align the circle to the left

of the stage by opening
your align panel:
Window > Design
Panels > Align
2. Select your circle with the
Selection tool:
3. Click on the button:
Align to stage
4. Click on the button:
Align Vertical Centre
5. Click on the button: Align Left Edge
Your file should look like this.

Step five: Creating the animation

1. Right click
(Mac: Ctrl
click) on
frame 60
of the
mask layer
and select:
Insert
Keyframe
2. Right click
on frame
30 of the
mask layer
and select:
Create Motion Tween
3. Drag the circle from the left side of the stage to the right. This will automatically place a keyframe in
frame 30.
4. If you wish use the Align panel to nudge the circle into place.
Note: The background has disappeared!
 Page 17 From http://www.webwasp.co.uk/tutorials/a01-simple-links/index.php
Step six: Adding frames to the
background

1. Right click on frame 60

of the background layer
and select: Insert
Frame
Your background
should re-appear.

Step seven: Creating the Mask

1. Right click on the Layer

label 'Mask' and from
the menu select: Mask

Note that when you create a mask the layers become automatically locked. The lock icon appears next
to the layer labels. If you wish to edit the layers you will need to unlock the layers by clicking on the
lock icon . The mask will appear to be gone, in actual fact if you test the movie you will find it makes
no difference. To make the mask appear again (at least on stage) re-lock the layers.
See how the layers are now locked and the Layer Symbols have now changed from: to:

Step eight: Test your Movie

Either: Go to Control > Test Movie.

Or: Drag the red play head to see the animation move.
Or: Press 'Enter' on the keyboard to see the animation play on stage.

Flash Tutorial - Mask Attached to the Mouse 07 Beginners Flash Compatibility: MX

2004 Written by: Phil Length: 1100 words
The aim of the tutorial is to learn how to create a mask which follows the mouse.
Step one: Creating the graphics

1. Set up the document size and colour by going to: Modify

> Document
The movie above is set at: 550 x 280 px
The background colour is: White
2. Click: OK
3. Draw a rectangle on stage which is slightly larger that the
white rectangle (representing your page). I drew a dark
blue rectangle. Blue rectangle and text on Layer 1
4. Create any text or graphics that you want to be hidden and then reveled by the mask. Make sure that the
rectangle, text and graphics are all in layer 1.
Note: Use standard typefaces only. Do not use any font that starts with underscore ( _ ) or other unusual
characters such as brackets etc. The text should also be set to Static Text. If you are not sure if your text
is static select the text with your Selection tool and look at the settings in the Property Inspector
(Windows > Properties). It should say: Static Text.
Tip: To make the text fit exactly into a particular area you want resize it with the Free Transform Tool:
 Page 18 From http://www.webwasp.co.uk/tutorials/a01-simple-links/index.php
Step two: Attaching the circle to the mouse
1. Create a new layer by clicking on the Insert Layer button:
2. On this new layer draw use the Oval tool to draw a: Circle
3. Delete the outline by double clicking on the outline with the Selection tool and pressing delete on your
keyboard (outlines can cause all sorts of errors in
masks).
4. Right click (Mac - Ctrl click) on the Circle and
from the menu select: Convert to Symbol...
5. You can leave the default name as it is: Symbol 1
6. For behavior select: Movie Clip
7. For Registration select centre:
8. Click: OK
9. With the new symbol still selected on your
keyboard press: F9

Note: This will open the Actions

panel. At the top of the panel it will
say:
If it does not say this you do not have
the correct circle symbol selected (or
you did not select Movie Clip in the
previous step). The most common
error in using ActionScript is attaching
it to the wrong object. Get into the
habit of checking that you are
attaching the script in the right place.
Always see what is says at the top of
the Actions panel.

10. Type in the following ActionScript:

onClipEvent (enterFrame) {
startDrag(this, true);
}
Your script and options should look like this.
Note: All the text is in blue yours should be the same. If it is not you have made a typing error.

ActionScript Explained

onClipEvent (enterFrame) {
Do the following every time the Play Head enters the frame. This would normally be 12 times per second.
startDrag(this, true);
Start to drag this object (the circle symbol). The true centres the object to the middle of the mouse.
}
End of the clip event.

You want to test your movie: Control > Test Movie

Your circle should stick to the centre of the mouse cursor.

 Page 19 From http://www.webwasp.co.uk/tutorials/a01-simple-links/index.php
You may wish to try and test the movie without the true so that you can see the difference. Change the line of
code so that it looks like this: startDrag(this); and test it again.

Cross Ref: You can only attach one object at a time to the mouse this way. If you wish to attach several objects
to your mouse you will need to use a different method see the Intermediate tutorial: Creating a Magnifying
Glass

Step three: Creating the mask

1. Right click on the frame Label where it says:

From the drop down menu select: Mask
Note: The Layer Symbols have now changed from: to:
Note: When you create a mask the layers become automatically locked. The lock icon appears next to
the layer labels. If you wish to edit the layers you will need to unlock the layers by clicking on the lock
icon . The mask will appear to be gone, in actual fact if you test the movie you will find it makes no
difference. To make the mask appear again (at least on stage) re-lock the layers.
You can only see the objects that are under the circle - everything else is masked.

2. It is probably worth saving and testing your movie at this stage: Control > Test Movie

Step four: Hiding the cursor

1. If the Actions panel is closed, open it by pressing: F9

2. Click on Frame 1 of Layer 2
3. Check the top of the Actions panel. It should say:
4. Type the following ActionScript:

Mouse.hide();
This hides the default mouse cursor.
5. Test your movie.

Step five: Creating the visible graphics

1. Click on the layer label:

2. Create a new layer (Layer 3) by clicking on the Insert
Layer button:
3. Create any graphics and text that you want to be visible and not affected by the mask.
My third layer is not affected by the mask.

Note: To make your text vertical:

1. Type your text with the text tool:

2. With the text still selected go to the Free Transformation tool:
3. Pull the handles to make the text larger.
4. Place your mouse just outside of the corner handles and your cursor will change to a rotate icon:
5. When you see this cursor pull, and the text will rotate.

Step six: Test your movie

1. Go to: File > Save.

 Page 20 From http://www.webwasp.co.uk/tutorials/a01-simple-links/index.php
2. Go to: Control > Test Movie

Flash Tutorial - Nesting: Tweens within Tweens 08 Beginners

Flash Compatibility: MX 2004 Written by: Phil Length: 1200 words
Assumed Knowledge : Tweening , attaching simple actions to buttons and the Timeline.
Nesting is a fundamental concept when building Flash Movies. For beginners it is a difficult concept to grasp
but it is worth the effort as nesting enables you to create Flash Movies that are far more flexible and less linear.
That is the user has more options about what is to happen next. In other words nesting enables you to create
Movies which are more interactive and less predictable. It is my belief that once a beginner really understands
nesting and how nested objects talk to one another (target paths) then you are well on the way to understanding
the basic fundamentals of how Flash works.
Cross Ref: If you do not know how to create a Tween on stage or how to attach a ActionScript to a buttons and
the timeline you should do the these previous tutorials first:

1. Simple Links
2. Animation - Tweening

The aim of the tutorial is to show you how symbols are placed within symbols. This is a fundamental concept in
Flash.
Note: In this example the word web animates independently to the opening animation. Click the play button
and watch the word web. It animates irrespective of what the word wasp does. This is little concept enables
you to do so much. It means that one object - such as an animated word (or group of objects) react in ways
which is not dependant on what other objects are doing. This gives you tremendous flexibility and fluidity when
building your Flash Movies.
Step one: Creating the first symbol In the example above my first symbol was the word web.

1. Go to: Modify >

Document (Ctrl J)
2. Set your Movie
size to: 500 x 120
3. Select a:
Background
Colour
4. Click: OK Select the Font colour and style of your choice: web
5. Select the Text Mine looks like this:
tool:
6. Click on the Stage and type the word:
web
7. Select the text with the selection tool:
8. If the Property Inspector is closed,
open it: Window > Properties (Ctrl
F3)
9. With the word web still selected go
to: Modify > Convert to Symbol (F8)
10. In the dialog box type a name: Web
11. Select Graphic.
Click: OK
12. On the Main Stage delete the Word: web (Don't worry it is now safely in the Library).
Page 21 From http://www.webwasp.co.uk/tutorials/a01-simple-links/index.php
Note: If you open the Library you will see your symbol: Window > Library (F11)
Your first Symbol in the Library. Step two: Animating the first symbol

1. Click on: Insert > New Symbol.

2. In the dialog box type a name: Web MC
3. Select Movie Clip.
C
l
i
c
k
:

O
K
4. If you Library is closed, open it: Window > Library (F11)
5. Drag the first Symbol that you created into the middle of the Stage:
Note: You need to drag the Graphic Symbol not the
Movie Clip. If you drag the wrong Symbol you will get an error
message:
Error Message.
Note: You can tell a movie clip from a graphic by
the icon the Library.
Make sure you select the
Movie Graphic Graphic Symbol.
Clip
6. In the Timeline right click (Mac: Ctrl click) in frame 30 and select: Insert Keyframe
Note: This copy and pastes whatever is in frame 1 into frame 30.
7. Right click in the Timeline on
frame 1 and select: Create
Motion Tween
Your Timeline should look like
this:
The Timeline with a Motion
Tween.
8. In the Property Inspector
select: Rotate > CW (clockwise)
Making the symbol rotate.

Note: If you press Enter on your keyboard you should find that your
animation looks similar to this:
If your animation does not exactly like this it does not matter as the tutorial is
about nesting (placing one symbol inside another) not about animation
techniques. What is important is that the word web animates.
If your symbol does not rotate around the central axis but like this:
The symbol is not rotating around the centre of the word.
To correct this select the Free Transformation Tool and click on the symbol. Drag the little circle to
the centre of the symbol:
The Symbol rotates around the little circle. Move the circle and the animations central point changes.
 Page 22 From http://www.webwasp.co.uk/tutorials/a01-simple-links/index.php
9. If the Edit Bar is closed, open it: Window > Toolbars > Edit Bar
10. To return to the Main Stage clicking on the Scene 1 Tab:
Note: This will take you back to the stage. Remember your animation is not on the stage but in the
Library.
11. Save your Flash Movie.

Step three: Test your movie

1. If your Library is closed, open it: Window > Library (F11)

2. Drag both your symbols onto the main stage from the Library.
3. Go to: Control > Test Movie.
Note: One of your symbols should be static and the other animated:
Close the Test Preview by clicking on the small cross in the top right of the window:
The Nesting: The original text that you typed is in the Symbol web. This is then nested inside the Movie
Clip Web MC and lastly this is all placed on the Main Stage. The nesting looks like this:
Note: If you double
click on the Movie Clip
you will find yourself
editing inside the Web
MC symbol. On your
Edit bar you will see
this:
If you then double click
on the Symbol again
you will find yourself
editing inside the
original Web Graphic
where the text is:

The Edit Bar shows

what symbol you are
currently editing and
the Property Inspector
shows the attributes of the object/s (text) inside that symbol.
Important: Make sure you return to the Main Stage clicking on the
Scene 1 Tab:
4. Delete both symbols from the Main Stage. Remember they are still in the
Library:
Library with two Symbols.

Step four: Create a New Symbol

1. Go to: Insert > New Symbol.

2. In the dialog box type a name: webwasp MC
3. Select: Movie Clip
4. Click: OK
5. Select the Text tool:
6. Click on Stage and type the word: wasp
7. Return to using the Selection tool:
 Page 23 From http://www.webwasp.co.uk/tutorials/a01-simple-links/index.php
8. In the Property inspector (and with the text still selected) choose a Font colour and style: Font Style
9. If the Library is closed, open it: Window > Library
(F11)
10. Drag your animated Symbol Web MC onto the stage.
Web MC Important: Make sure you select the
animated Movie Clip Web MC and not the static
Graphic Symbol: Web
Your Stage should look like this one:
The Movie Clip Web MC and the text nested inside the
new symbol called Webwasp MC.
11. Return to the Main Stage clicking on the Scene 1 Tab:

Step five: Testing the new Symbol

1. Save your Movie: File > Save (Ctrl S)

2. You should be on the Main Stage and it should be blank. If there is anything on the Main Stage delete it.
3. If the Library is closed, open it: Window > Library (F11)
4. Drag out the new Movie Clip: Webwasp MC
5. Go to: Control > Test Movie (Ctrl + Enter)
Testing the Movie Clip: Webwasp MC
6. Close the Test Preview by clicking on the small cross in the top right of the window:

Step six: Animating the main stage.

1. Animate it as you would any other Tween. You do this by:

• Going to a new frame, lets say 40, right click, select Insert Keyframe.
• Move the symbol on frame 40 to a new position.
• Right click in the time line in-between the two Keyframe. Select: Create Motion tween.
• Repeat this as many times as you want.
The Tween that I made simply moves from off stage left to the right side of the Main Stage like this:
The Tween that I made on the Main Stage goes from left to right.

2. If the Actions Panel is closed, open it: Window > Actions (F9)
3. At the end of this animation I would like the animation to stop. To do this you will need to select the last
Keyframe in your Timeline. In mine this is frame 40. Type the following into the Actions Panel:
stop();
If you wish to test your Movie again it should now play once and then stop.

Step seven: Adding a button

You will need a new layer for your button. If you do not do this your Tween may end up in a muddle.

1. In the Timeline click on the Insert Layer button.

2. Find the last frame of your animation in the time line and right click in your new layer just above this
frame.
3. Select: Insert Blank Keyframe.
4. Go to: Window > Other Panels > Common Libraries > Buttons.
5. Open one of the button folders by double clicking on it.
6. Select a button and drag it onto the: Main Stage
 Page 24 From http://www.webwasp.co.uk/tutorials/a01-simple-links/index.php
Note: If you take a button from the Common Button Library avoid Knobs, Faders and Component
buttons as they work differently. I selected one of the Oval Buttons.
7. With the Button still selected type the following in the Actions Panel:

on (release) {
gotoAndPlay(1);
}
Step eight: Test your movie
It is time to see if your movie works. Good Luck!
1. Save your Flash movie.
2. Go to: Control > Test Movie.