Free Flash Tutorials	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash Tutorial MX - Simple Links

004 Beginners
Flash Compatibility: MX    For Flash 8 click here    For Flash MX 2004 click here

Written by: Phil Schulz

Length: 1350 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. Don't get Flash 'frames' mixed up with HTML 'frames'. They are completely different.

Confused already? Well actually this is not difficult (hopefully)!

Cross Ref: If you wish to learn how to make a hyperlink, a link from a Flash movie to a new web page, go to the beginners tutorial: 15 hyperlinks

My Example: Download the Flash file  Beg 004a

Example of small Flash shockwave movie with buttons linking one 'page' of the flash movie to the next.

Step One: Setting up the document

When you open Flash you automatically get a blank flash file. We need to customise this.

1. Flash is often littered with panels that you do not need. Close them all except for the Time Line and Tools. You can do this in the Window menu.
2. 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' or more accurately the work area.
2. When you have finished typing select the Arrow tool .
3. Go to: Windows > Common Libraries > 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: Circle Buttons > Circle Button - Next. You can move the position of the button by clicking on it with the Arrow 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.
   
4. 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.
5. Save your file

Step Three: Setting up frame 2

Go to the Time Line and place your cursor in frame 2. Right click (control 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. Use your text tool to over write the word 'one' and type 'two'. It should now say Page two. When you have finished typing reselect the Arrow Tool. Go back to the Common Button Library (Windows > Common Libraries > Buttons) and select a button as the back button and drag it onto the stage. Click on the back dot in frame 1 and you will see that the difference between the two frames. Click on the black dot (called a key frame) in frame 2 and add any additional graphic and text elements that you may want. Save your file.

Step Four: Setting up frame 3

1. Right click in frame 3 and 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. This takes you two 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! Right click on key frame 1 (a frame with a black dot in it) and select Actions. This opens the Actions panel.
   
   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.
   
   
   
   
2. The Actions panel has two modes: Normal and Expert. Make sure it is in Normal. You do this by clicking on the side menu button ( ) which is just under the cross on the top right hand side of the panel. Select Normal.
3. Click on the: Plus sign > Actions > Movie Control > Stop.
4. A small a should appear above the black dot in frame one. This indicates that the key frame has some Actionscript attached to it.
5. Test your 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. Go to frame one.
2. If the Actions panel is open select the button by clicking on it.
   If the Actions panel is closed right click on your button and select Actions.
   
   Important: If you have selected the button correctly the Actions panel should say Actions - Button in the top corner.
   
   
   
   
3. Click on the: Plus sign > Actions > Movie Control > Goto.
   Two lines of actionscript will be placed in the panel window and a number of options will appear in the top of the Actions panel.
4. In the options select the radio button: Go To and Stop.
5. In the options, next to the word frame type: 2
   Your action script should look like this:

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.
2. Go to: Control > Test Movie.
3. Click on your button. You should move to frame 2.

Step Nine: Add the Actions to the remaining buttons

Add the actionscript to the remaining buttons and your home and dry. Well done. To do this go back and repeat Step Seven. Except this time do not go to frame 1 but goto 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);
}

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