Adding Interactivity to Your Movie

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 Samples Menu.


Linking to a Sprite and using the Tell Target Action

1. Open "myfirst.swi"

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

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:  
 
tute7_1.png  



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

4. From the 'Actions Panel', press the panels-timeline-addaction.png 'Add Action' button, and select Play Sound "beep2.wav" under the On (Press) Event. Press the panels-timeline-addaction.png 'Add Action' button, and select Tell Target from the Menu. Press the arrow to the right of the 'Target Name' box and select "/pop-up" from the Menu. Press the panels-timeline-addaction.png 'Add Action' button again and select Go to Frame from the Menu. Change the value from 0 to 1 in the 'Frame Number' box. Leave the 'Play' box checked. Select the 'Tell Taget' action you just added. Press the panels-timeline-addaction.png 'Add Action' button, and again select Tell Target from the Menu. Press the arrow to the right of the 'Target Name' box and select "/pop-up2" from the Menu. Press the panels-timeline-addaction.png 'Add Action' button again and select Go to Frame from the Menu. Change the value from 0 to 5 in the 'Frame Number' box. Leave the 'Play' box checked.

The 'Actions' Panel should look like this:  
 
tute7_2.png  


5. Test your action by pressing the playscene.png 'Play Scene' button and then pressing the 'LINK 1' button. As this Scene will not loop, you can retest by pressing the X Text Object and the 'LINK 1' button again. Press the stopmovie.png '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.png Copy button. Select Scene 2 from the Timeline then press the paste.png '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  

7. Select the Sprite Panel and in the 'Name' edit box. Change the name from "pop-up1" to "pop-up2".

Note: Giving your Sprites unique names makes it easy to use the Tell Target action; as SWiSH will add each Sprite to the 'Tell Target' list, which you can access from the 'Tell Target' edit box within the Actions Panel

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

9. From the 'Actions' Panel, press the panels-timeline-addaction.png 'Add Action' button, and select Play Sound "beep2.wav" under the On (Press) Event. Press the panels-timeline-addaction.png 'Add Action' button, and select Tell Target from the Menu. Press the arrow to the right of the 'Target Name' box and select "/pop-up2" from the Menu. Press the panels-timeline-addaction.png 'Add Action' button again, and select Go to Frame from the Menu. Change the value from 0 to 1 in the 'Frame Number' box. Leave the 'Play' box checked. Select the 'Tell Taget' action you just added. Press the panels-timeline-addaction.png 'Add Action' button, and again select Tell Target from the Menu. Press the arrow to the right of the 'Target Name' box and select "/pop-up" from the Menu. Press the panels-timeline-addaction.png 'Add Action' button again and select Go to Frame from the Menu. Change the value from 0 to 5 in the 'Frame Number' box. Leave the 'Play' box checked.

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." Uncheck the 'Has Name' box

11. Test your actions for the 'LINK 1' and 'LINK 2' buttons by pressing the playscene.png 'Play Scene' button and then pressing the 'Link 1' and 'Link 2' buttons. Press the stopmovie.png 'Stop Movie' button

12. Save your Movie


Linking to Another Scene

1. Select Scene 2 from the Outline Panel. From the File Menu select copy.png Copy Scene and then File | paste.png Paste Scene. A new Scene named "Scene 3" will be created. It will be added to the 'Outline' Panel, and you will be taken to that Scene

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

3. Select Scene 2 from the Outline Panel

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 'Actions' Panel select Play Sound "beep2.wav" under the On (Press) Event. Press the panels-timeline-addaction.png 'Add Action' button, and select Tell Target from the Menu. Press the arrow to the right of the 'Target Name' box and select '/' from the Menu ( '/' refers to the main Timeline). Press the 'Add Action' button again and select Go to Frame from the Menu. From the Scene option drop-down Menu select Scene 3. Leave the 'Play' box checked

6. Test your action for the 'LINK 3' button by selecting File | testplayer.png Test in Player and pressing the 'LINK 3' button. Close the Player window

7. Save your Movie


Linking to another Web page

1. From the 'Outline' Panel click on the plus (+) symbol next to the Menu Sprite 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 panels-timeline-addaction.png 'Add Action' button, and select Go to URL from the Menu. In the 'URL' edit box, type "http://www.swishzone.com". Leave the 'Target' box empty

Note: When playing within SWiSH, Goto URL actions are not performed

3. Test your action for the 'LINK 4' button by selecting File | Test | testbrowser.png 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 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 panels-timeline-addaction.png 'Add Action' button, and select Mailto from the Menu. In the 'To' edit box, type your e-mail address e.g., 'me@myaccount.com'

3. In the 'CC' edit box, type 'sales@swishzone.com'. This will send a copy of the e-mail

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. Save your Movie

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






[Previous] [Main] [Next]