Creating Buttons

This is a step-by-step tutorial for creating a simple button. This tutorial illustrates some of the features seen in the "first.swi" file in the Samples Menu.

The Button Object makes it easy to add mouseover Effects to your Movie without interrupting the Movie's main Timeline.

You can create an empty button by pressing the Insert Button on the Insert Toolbar, or you can choose an existing object and convert it into a button by selecting Modify | Convert | Convert to Button or by pressing the 'Convert to Button' icon from the Grouping Toolbar. The 'Grouping' Toolbar can be can be accessed by selecting 'View | Toolbars | Grouping Toolbar'.

Note: In most circumstances, it is best create your text or shape first and then use the 'Convert to Button' option (remove any Actions attached to a shape before converting it into a button). This will save you the time of adding the text or shape for each state; you need only to go into the Button Object's 'Outline' tree, to make your adjustments to the different states


To Create a Button

1. Open "myfirst.swi". Your introduction has ended and the visitor will now enter your main site. This is a good time to create a new Scene

2. From the Main Menu, select Insert | Scene, a new Scene named 'Scene 2' will be created. Check that Scene 2 appears in the Scene row on the Timeline Panel

3. Press the 'Insert Text' button on the Insert Toolbar. Change the word "Text" to "LINK 1", and the Font size to 12

4. Press the 'Convert to Button' buttom from the Grouping Toolbar. A Button icon will appear In the Outline Panel with an 'Object' Tree, with four child buttons indicating the button's four states

The 'Outline' Panel should look like this:

The Up State represents the button's appearance when the mouse pointer is not over it. The Over State represents the button's appearance when the mouse pointer is over it. The Down State represents the button's appearance when the mouse is clicked. The Hit State represents the button's active region

5 From the button's 'Object' Tree select LINK 1 from the button's Up State, and from the Text Panel, change the color from black to a dark green

6. Select LINK 1 from the button's Over State, and from the 'Text' Panel, change the color to a medium gray

7. Select LINK 1 from the button's Down State and change the color to a dark gray

8. Select LINK 1 from the button's Hit State. You should see a black rectangle. This rectangle represents the button's active region - the area that will respond to the mouse cursor. This state is not visible when the Movie is playing


9. Press the Play Scene button on the 'Control' Toolbar, and test your button. Your button should change to a gray when the mouse pointer is over it and to a dark gray when you press the button. Press the 'Stop Movie' button to end your preview

10. Save your Movie


Adding Sounds to your Buttons

1. Open file "myfirst.swi"

2. From the Outline Panel, select Scene 2

3. Select your 'LINK 1' button from the Outline Panel. Click on the minus (-) symbol to the left of the button icon, so that the 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:


4. Select the Actions Panel and press the 'Add Event' button and select On Rollover from the drop-down Menu. The On (Roll Over) Event will appear and be highlighted in the 'Actions' window


5. Press the 'Add Action' button and select Play Sound from the drop-down menu. Press the 'Import...' button and the 'Import Sound' dialog box will appear. Navigate to the Samples folder within your SWiSH application folder, select "Beep1.wav" and press Open

The 'Actions' Panel should look like this:

6. Press the 'Play Scene' button to test your button. When your mouse pointer rolls over the button, you should hear the sound. Press the 'Stop Movie' button

7. From the Actions Panel, select On (Roll Over) and press the 'Add Event' button again and select On Press. The 'Add Event' button will change into an 'Add Action' button

8. Press the 'Add Action' button and select Play Sound from the drop-down Menu. Press the 'Import' button, and select "Beep2.wav" from the Samples folder. Press Open

9. Select the Button Panel. In the 'Name' text entry box, type in LINK 1, and check the Track as Menu box.


10. Press the 'Play Scene' button to test your button. When your mouse pointer rolls over the button, you should hear the first sound you imported, and when you click the button, you should hear a second sound. Press the 'Stop Movie' button to end your preview


11.    Save your Movie


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

[Previous] [Main] [Next]