Tutorial: Creating Links within a Flash Movie	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Click by Click: Creating Links within a Flash Movie

Full Version: This is a shortened click by click version of a: Full Length Tutorial

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.

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

1. Go to: File > New > General Tab > Flash Document > OK
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. My Movie is: 200 x 130 px (pixels)
4. Select a Background Colour by clicking on: Background Color
5. Click: OK
6. Save your file: File > Save (Ctrl S)

Step Two: Setting up Frame 1

1. Select the Text Tool:
2. Click and then Type on the Stage (work area): Page One
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)
5. Go to: Windows > Common Libraries > Buttons
6. Choose a button. I selected: Classic Buttons > Circle Buttons > Circle Button - Next  
7. Drag the button onto the: Stage (work area)
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
   
3. Use your Text Tool to over write the word 'one' and type: two
   
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
   
7. Save your file: File > Save (Ctrl S)

Step Four: Setting up Frame 3

1. Right click in Frame 3 and select: Insert Keyframe
   
2. Use your Text Tool to over write the word 'two' and type: three
   
3. When you have finished typing reselect the Selection Tool:
   
4. Delete the: Next 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
   
2. Close the Test Window. You do this by clicking on the Red Cross:

Step Six: Stopping the Movie from Auto Playing

1. Select: Frame 1 (the first Frame with a black dot in it)
   
2. Open the Actions Panel: Window > Actions (F9)
   
   
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)
6. Test your Movie: Control > Test Movie (Ctrl Enter)
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
2. Click off Stage so that all the objects are: De-Selected (Ctrl Shift A)
3. On the stage click on the: Button
4. Open the Actions Panel: Window > Actions (F9)
5. Click on the: Plus Sign > Global Functions > Timeline Control > Goto (Esc G O)
   
6. For Frame type the number: 2
7. In the Actions Panel select the Radio Button:

The Actions should look like this:

    on (release) {
        gotoAndStop(2);
    }

8. Close the Actions Panel by clicking on the cross: (F9)
   
9. Time to test again. Go to: Control > Test Movie (Ctrl Enter)
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)
3. On the stage click on the: Next Button
4. If closed, open the Actions Panel: Window > Actions (F9)
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:

The Actions should look like this:

    on (release) {
        gotoAndStop(3);
    }

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)
3. On the stage click on the: Next Button
4. If closed, open the Actions Panel: Window > Actions (F9)
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
4. If closed, open the Actions Panel: Window > Actions (F9)
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)
2. You should be able to move back and forth through all the Frames: Click the Buttons
3. Close the Test Window by clicking on the cross:

You should now be home and dry. Well done!

Full Version of this: Tutorial