Tutorial: Creating Links within a Flash Movie	Home • Members • Tutorials • Forum • iSnapChat • Contact Us

Tutorial: Creating Links within a Flash Movie

Free Flash Tutorial

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. This tutorial explains how to link one part of a Flash Movie with next part of the Movie.

Note: 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 different web page, go to the tutorial: Hyperlinks

 

Click by Click: If you would like to view this tutorial without all the notes: Click by Click

My Example: Download the Flash file  Beg 004a

Click on the triangle button.

  See Demo Movie of how to build this Flash file

Example of small Flash Movie with buttons linking one 'page' or Frame of the Flash Movie to the next.

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: You should now have a new Flash document open.

Optional Extra: Close all the Panels except for: Timeline, Edit Bar and Tools. See: Workspace

2. We are now ready to customise the document. Go to: Modify > Document (Ctrl J)
3. Type in the dimensions that you want for your Movie. The one above is: 200 x 130 px (pixels)


The Movie is set to 200 x 130 pixels.

4. Select a Background Colour by clicking on: Background Color


Selecting the Background colour.

5. Click: OK
6. Save your file: File > Save (Ctrl S)

   Tip: It is better if you do not use spaces when typing your file name. Also do not use unusual characters. You should only use letters, numbers, _underscore or - hyphen only. Like this:
   
   

   myFlashMovie01

   my-Flash-Movie-01

   my_Flash_Movie_01

   Not: my Flash Movie 01
   
   The reason that you do not use spaces is because Internet address never have spaces and so if you want to upload your work to the Net it is better to have the file name in the correct format from the start.

Step Two: Setting up Frame 1

1. Select the Text Tool:
2. Click and then Type on the Stage (work area): Page One


Text goes inside a Text Box.

Note: It is possible for the Text Box to be smaller than the words that you type:


The Text Box is not wide enough so the words do not fit on a single line.

Tip: If the Text Box is too small stretch it by dragging the white square. You can also double click the white square:

Note: You can only change the size of the Text Box whilst you are using the Text Tool:

3. When you have finished typing go back to the Selection tool:
   
   
4. If you want to change the Font colour, style or size you can do so in the Property Inspector: Window > Properties (Ctrl F3)
   
   
   I selected the Font Verdana.
   
   

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:




5. Go to: Windows > Common Libraries > Buttons
   
   
6. Choose a button. To look at the buttons you need to double click on the folders:
   
   I selected: Classic Buttons > Circle Buttons > Circle Button - Next  
   
   
   Scroll down until you find the right button.
   
   
   

Important Note: If you take a different button from the Common Button Library avoid Knobs, Faders and Component buttons as they work differently.

7. Drag the button onto the: Stage (work area)

Note: You can move the position of the Button and the Text by clicking on it with the Selection Tool and dragging it

8. Save your file: File > Save (Ctrl S)

Step Three: Setting up Frame 2

1. Go to the Timeline and place your cursor in: Frame 2
2. Right click (Ctrl click on a Mac) and select: Insert Keyframe
   
   
   Select: Insert Keyframe not Insert Blank Keyframe!
   
   You will now have a black dot in both Frames 1 and 2:
   
   This copies all the contents from Frame 1 and places them onto Frame 2. It is similar to copy and paste. Your stage should look the same as before you clicked in Frame 2 but now you are actually in a different place in the Movie. The red Play Head should now be in Frame 2:
   
   
   Two black dots in the Timeline represent the Keyframes. The red Play head represents your current position.
   
   
3. Use your Text Tool to over write the word 'one' and type: two
   
   It should now say: Page two
   
   
   The text in Frame 2 has now been changed.
   
   
4. When you have finished typing reselect the Selection Tool:
5. If the Button Library is closed open it: Windows > Common Libraries > Buttons
6. Drag onto Stage the: Previous Button
   
   
   Drag the Previous Button onto the Stage.
   
   Your Stage should look similar to this:
   
   
   Both Buttons are in place.
   
   

Note: Click on the Keyframe (back dot) in Frame 1 and you will see that the difference between the two Frames.


Frame 1.

7. Save your file: File > Save (Ctrl S)

Step Four: Setting up Frame 3

1. Right click in Frame 3 and select: Insert Keyframe
   

Note: You will now have black dots in Frames 1, 2 & 3:

2. Use your Text Tool to over write the word 'two' and type: three
   
   It should now say: Page three
   
   
   The text in Frame 3 has now been changed.
   
   
3. When you have finished typing reselect the Selection Tool:
   
   
4. Delete the: Next Button
   
   Your stage should now look similar to this:
   
   
   There should only be one button.
   
   
5. Save your file: File > Save (Ctrl S)

Step Five: Testing the Movie

1. Time to test your Movie. Go to: Control > Test Movie
   
   This takes you to a new Window where you should see something like this:
   
   
   The Test Window.
   
   
   

Note: 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 Test Window. You do this by clicking on the Red Cross:

   Note: This will only close the Test Window and not your file.

Step Six: Stopping the Movie from Auto Playing

As you will have seen in the previous section, Flash automatically animates your Movie. That is it plays from Frame 1 to the last Frame and then returns to Frame 1 and plays again. This is the default for Flash but in this Movie we do not want it to animate. To stop the Movie from animating you will need to do some very simple programming! Welcome to ActionScript. ActionScript is the Language that Flash uses to program Movies. You are about to learn how easy it is to do some basic ActionScripting.

1. Select: Frame 1 (the first Frame with a black dot in it)
   
   
   Frame 1 is selected.
   
   
2. Open the Actions Panel: Window > Actions (F9)
   
   Important: This will open the Actions Panel. 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:
   
   

Cross Ref: The Actions Panel has two modes. Script Assist On and Script Assist Off. As a beginner it is much easier to work with Script Assist switched on. If you want to learn more about Script Assist see the tutorial on the Actions Panel

3. Click on the Menu Down Arrow on the top left corner of the Actions Panel and tick: Script Assist

Important Note: The following instructions will not work unless Script Assist is on.

Script Assist is on if ticked in the Action Panel Menu:    >  

4. Click on the: Plus Sign > Global Functions > Timeline Control > Stop
   
   Your Actions Panel should display the following ActionScript:
   
       stop();
   
   
5. Close the Actions Panel by clicking on the cross: (F9)

Note: A small a should appear above the black dot in Frame one. This indicates that the Keyframe has some Actionscript attached to it.


Note the little 'a' in Frame 1.

6. Test your Movie: Control > Test Movie (Ctrl Enter)
   
   Your Movie should not animate anymore but it should be stopped on Frame 1. If you try and click on the Next Button it will not yet work. You will make the buttons work in the next part of the tutorial.
   
   
   The Movie no longer animates but the button is yet to work.
   
   
7. Close the Test Window:
   
   
8. Save your file: File > Save (Ctrl S)

Step Seven: Attaching Actionscript to the First Button - Frame 1 Next

Now it is time to make the Buttons work. This is also done with ActionScript.

1. In the Timeline, if you are not already on Frame 1, click on: Frame 1

Note: When you click on the Keyframe (black dot) you will find that all the objects in that Frame are selected. In this case the objects are the text and the button. You know that objects are selected by the blue rectangles:



When attaching ActionScript to buttons it is important that only the button is selected otherwise the actions may get attached to the wrong object. Thus the first step is to de-select all the objects.


2. Click off Stage so that all the objects are: De-Selected (Ctrl Shift A)


All the objects are now de-selected.

3. On the stage click on the: Button


Only the Button is selected.

4. Open the Actions Panel: Window > Actions (F9)

Important: If you have selected the button correctly the Actions Panel should say Actions - Button in the top left corner. In my experience beginners often make the error of attaching their ActionScript to the wrong object. Get into the habit of checking what the Actions Panel says in the top left corner:


Always Check what it says in the top left corner of the Actions Panel before applying Actions.

Note: Script Assist should still be ticked:    >  

5. Click on the: Plus Sign > Global Functions > Timeline Control > Goto (Esc G O)
   
   You will see the following ActionScript:

    on (release) {
           gotoAndPlay(1);
       }
   
   This means that when the mouse button is released you will go to and Play Frame 1. You will need to make an adjustment so that the button takes you to Frame 2 and Stops.

6. For Frame type the number: 2


The Button will now take you to Frame two and will Play.

Now you need to make sure the Movie does not animate by changing the Play to a Stop.

If you were to test the Movie this is what would happen:


Press the Button to test.

You will see that when pressed the Movie animates and returns all the way back to Frame 1 and stops.

Play means to animate so we need to get rid of the Play and replace it with a Stop.

7. In the Actions Panel select the Radio Button:


This means that when the mouse button is released you will go to Frame 2 and Stop. Which is what is needed!

8. Close the Actions Panel by clicking on the cross: (F9)
   
   
9. Time to test again. Go to: Control > Test Movie (Ctrl Enter)


Click on your button. You should move to Frame 2 and Stop.

The buttons in Frame 2 will not work yet as you have yet to set the ActionScript for these.

10. Close the Test Window by clicking on the cross:
    
    
11. Save your file: File > Save (Ctrl S)
    

Step Eight: Add the Actions to the Frame 2 Button - Next

This button takes you onto the next Frame which is Frame 3.

1. In the Timeline, if you are not already on Frame 2, click on: Frame 2
   
   
2. Click off Stage so that all the objects are: De-Selected (Ctrl Shift A)


All the objects are now de-selected.

3. On the stage click on the: Next Button


Only the Next Button is selected.

4. If closed, open the Actions Panel: Window > Actions (F9)


Check what it says in the top left corner of the Actions Panel: Actions - Button

5. Click on the: Plus Sign > Global Functions > Timeline Control > Goto (Esc G O)
   
   
6. For Frame type number: 3
   
   
7. In the Actions Panel select the Radio Button:


This means that when the mouse button is released you will go to Frame 3 and Stop.

8. Close the Actions Panel by clicking on the cross: (F9)
   
   
9. Save your file: File > Save (Ctrl S)

Step Nine: Add the Actions to the Frame 2 Button - Previous

This button takes you back to Frame 1.

1. In the Timeline, if you are not already on Frame 2, click on: Frame 2
   
   
2. Click off Stage so that all the objects are: De-Selected (Ctrl Shift A)


All the objects are now de-selected.

3. On the stage click on the: Next Button


Only the Previous Button is selected.

4. If closed, open the Actions Panel: Window > Actions (F9)

Check what it says in the top left corner of the Actions Panel: Actions - Button

5. Click on the: Plus Sign > Global Functions > Timeline Control > Goto (Esc G O)
   
   
6. For Frame check that is says: 1 (this is the default so it should already say: 1)
   
   
7. In the Actions Panel select the Radio Button:

The Actions should look like this:

    on (release) {
        gotoAndStop(1);
    }

8. Close the Actions Panel by clicking on the cross: (F9)
   
9. Save your file: File > Save (Ctrl S)

Step Ten: Add the Actions to the Frame 3 Button - Previous

This button takes you back to Frame 2.

1. In the Timeline click on: Frame 3
   
   
2. Click off Stage so that all the objects are: De-Selected (Ctrl Shift A)
   
   
3. Select the: Previous Button


Only the Previous Button is selected.

4. If closed, open the Actions Panel: Window > Actions (F9)
   

Check what it says in the top left corner of the Actions Panel: Actions - Button

5. Click on the: Plus Sign > Global Functions > Timeline Control > Goto (Esc G O)
   
   
6. For Frame number type: 2
   
   
7. In the Actions Panel select the Radio Button:

The Actions should look like this:

    on (release) {
        gotoAndStop(2);
    }

8. Save your file: File > Save (Ctrl S)

Step Eleven: Testing All the Buttons

1. Time to test again. Go to: Control > Test Movie (Ctrl Enter)


Click on all your button. You should be able to move back and forth through all the Frames.

2. Close the Test Window by clicking on the cross:

You should now be home and dry. Well done!

Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here