Adding Interactivity to Your Movie

Adding Interactivity to Your Movie

Top Previous Next

This is a tutorial includes step-by-step instructions to creating links in your Movie. This tutorial illustrates some of the features seen in the "first.swi" file in the File | Samples | Tutorials Menu.

Linking to a Sprite and using the gotoAndPlay() Action

1. Open "myfirst.swi" saved from the previous tutorial.

2. Check that Scene_2 appears in the Scene row on the Timeline Panel. If Scene_2 does not appear in the 'Timeline' Panel, select Scene_2 from the Outline Panel. In the 'Scene' Object Panel, check the 'Stop playing at end of scene' checkbox

3. From the Outline Panel click on the plus (+) symbol next to the Menu Sprite Object and select the 'LINK 1' button. Make sure that the plus (+) symbol appears next to this button's icon, and that this button's states are not visible

Note: Make sure that none of the button's states are selected when you add your Actions, as you cannot add Actions to the button's state. Objects inside button states are not allowed to have Actions and SWiSH will ignore them

The Outline Panel should look like this:

The gotoAndPlay() Action is used to communicate with a Sprite and the Movie's Main Timeline. In the following example, we will use the gotoAndPlay() Action to call the pop-up Sprite

The 'Script' Panel should look like this:

Select the Layout tab and Test your Action by pressing the 'Play' button to review the entire Movie. When the Movie ends, press the 'LINK 1' button. This should cause the text contained within the pop-up Sprite to be displayed. As this Scene will not loop, you can retest by pressing the X Text Object and the 'LINK 1' button again. Press the

'Stop Movie' button

Note: The X Text Object can accept Actions, and behaves like a button without the different states

6. Select the pop-up Sprite from the Timeline then press the

'Copy' button. Select Scene_2 from the Timeline then press the

'Paste' button

Note:

·	If you do not select Scene_2 on your 'Timeline' or 'Outline' Panels before pasting, you will paste the copy of your Sprite inside the original

·	By copying and pasting your "pop_up" Sprite, you can save time using it as a Template. This can be done before you add your text, or you can change your text later using the original text as a guide for positioning your new text, then deleting the original

7. Select the Sprite Panel and in the 'Name' edit box. Change the name from "Copy_of_pop_up" to "pop_up2"

Note: Giving your Sprites unique names makes it easy to specify each one as an individual target which gives you more control over the actions you assign to each.

8. From the 'Outline' Panel click on the plus (+) symbol next to the Menu Sprite Object and select the 'LINK 2' button. Make sure that the plus (+) symbol appears next to this button's icon, and that this button's states are not visible

From the Script Panel, select the playSound("beep2.wav") Action in the on(Press) Event function. Press the 'Add Script' button, and select Movie Control | gotoAndPlay | gotoAndPlay(FRAME) from the Menu. Press the arrow to the right of the 'Target' name box and select "_parent.pop_up2" from the Menu. Change the value from 1 to 2 in the 'Frame' box. Leave the 'Play' box checked. In a similar way, add the line "_parent.pop_up.gotoAndPlay(10);" above the current line. This will cause the LINK 1 dialog box (if displayed) to close. Your script should now look like this:

10. From the 'Outline' Panel click on the plus (+) symbol next to the pop_up2 Sprite to access the Sprite's child objects. Select the link 1 Text Object, and from the 'Text' Panel, select all of the text within the text edit box and type "This is different text to show that the 'LINK 2' button is linked to a different Sprite." You may want to split this text onto a number of lines. Name the text "LINK 2"

11. Test your scripts for the 'LINK 1' and 'LINK 2' buttons by selecting Scene_2 in the 'Outline' Panel and pressing the

'Play Timeline' button and then pressing the 'LINK 1' and 'LINK 2' buttons. Press the

'Stop Movie' button

12. Save your Movie

Linking to another Scene

1. Select Scene_2 from the Outline Panel. From the Edit Menu select

Copy Scene and then Edit Menu |

Paste Scene. A new Scene will be created. Click on the Scene name to rename the new Scene to "Scene_3"

2. From the Scene Panel, change the background color to a light green by clicking on the color swatch and selecting the color from the Color Palette. Note that you should select an alpha value greater than 0%, otherwise the colour will not be visible

3. Select Scene_2 from the Outline Panel and Left-Click on the (+) symbol to expand this Scene.

4. From the 'Outline' Panel click on the plus (+) symbol next to the Menu Sprite and select the 'LINK 3' button. Make sure that the plus (+) symbol appears next to this button's icon, and that this button's states are not visible

5. From the 'Script' Panel select Play Sound "beep2.wav" under the On (Press) Event. Press the

'Add Script' button, and select Movie Control | gotoAndPlay | gotoAndPlay(FRAME) from the Menu. Press the arrow to the right of the 'Target' name box and select Scene_3 from the Menu. Enter 1 into the 'Frame' field. Leave the 'Play' box checked. Your script should be as shown below:

6. Test your Action for the 'LINK 3' button by selecting File | Test |

Test in Player and pressing the 'LINK 3' button. Close the Player window

Note: If the movie went straight to Scene_3 without giving you the chance to test 'LINK 3' - make sure you have checked the option "Stop playing at end of Scene" on the Scene panel for Scene_2.

7. Save your Movie

Linking to another Web page

1. From the 'Outline' Panel click on the plus (+) symbol next to the Menu Sprite in Scene_2 to access the Sprite's child objects. Select the 'LINK 4' button. Make sure that the plus (+) symbol appears next to this button's icon, and that this button's states are not visible

2. From the 'Actions' Panel select Play Sound "beep2.wav" under the On (Press) Event. Press the

'Add Script' button, and select Browser/Network | Get URL from the Menu. In the 'URL' edit box, type "http://www.swishzone.com". For the 'Window' box select _blank from the pull-down Menu. Your script should be as shown below:

Note: When playing Movies within SWiSH, you can use the Tools Menu | Preferences | Player, and select the option at the bottom to have the player launch a browser for testing getURL() actions.

3. Test your Action for the 'LINK 4' button by selecting File | Test |

In Browser and pressing the 'LINK 4' button.

If you are online, you will be brought to the SWiSH web site. This page will open in a new window

4. Save your Movie

Linking to the Visitor's E-mail Client

1. From the 'Outline' Panel click on the plus (+) symbol next to the Menu Sprite in Scene_2 to access the Sprite's child objects. Select the 'E-MAIL' button. Make sure that the plus (+) symbol appears next to the button's icon, and that the button's states are not visible

2. From the 'Actions' Panel select Play Sound "beep2.wav" under the On (Press) Event. Press the

'Add Action' button, and select Browser/Network | Mailto from the Menu. In the 'To' edit box, type your e-mail address e.g., me@myaccount.com

3. Leave the 'CC' field blank (this can be used to copy emails to other recipients)

4. In the 'Subject' edit box, type "Your First SWiSH Movie"

5. The window below the 'Subject' edit box is the message body area. Type "I really like your Movie, can't wait to see the next one you create." in the 'Field' edit box

When the Mailto Action is executed, the Flash Player will start the default e-mail client. The fields you have specified will be already filled in. The user can edit any of these or fill in any that you may leave blank before sending the message.

6. The Script panel should appear similar to this:

tute7_6

7. Save your Movie

You are ready to continue with the Creating a Preloader tutorial.