Creating Buttons
Top  Previous  Next


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 File | Samples | Tutorials 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 newbutton 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 displayed 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" saved from the previous tutorial. 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 and 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 inserttext 'Insert Text' button on the Insert Toolbar. Change the word "Text" to "LINK 1", and the Font size to 12

4. Press the cbutton 'Convert to Button' button from the 'Grouping' Toolbar (if you do not have the grouping toolbar visible, you can use the Main Menu to select Modify | Convert | Convert to Button). From the 'Button Object' Panel select the 'Has separate over state', 'Has separate down state', and the 'Has separate hit state' boxes. A button Button icon will appear in the Outline Panel. Click on the (+) icon next to the Button in the Outline panel to display its 'Object' Tree, with four child buttons indicating the button's four states

The 'Outline' and 'Button Object' Panels should look like this:  

Tute4_1  

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 the "Hit Rectangle" 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 playscene Play Timeline 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 stopmovie 'Stop Movie' button to end your preview

10. Save your Movie


Adding Sounds to your Buttons

1. Continue from the section above, or alternatively you can open the 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:

Tute4_2  

4. Select the Script Panel and press the 'Add Script' button and select Events | Button | on (rollOver) from the drop-down Menu. The On (Roll Over) Event will appear and be highlighted in the 'Script' window

5. Press the 'Add Script' button (or right click on the 'on (rollOver)' function) and select Sound | 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 filename "Beep1.wav" will appear at the bottom in the audio content list. Click on the filename within that list to select it for the playSound action.

The 'Script' Panel should look like this:  

Tute4_3  

6. Select the 'Layout' Panel tab and press the playscene 'Play Timeline' button to test your button. When your mouse pointer rolls over the button, you should hear the sound. Press the stopmovie 'Stop Movie' button

7. From the Script Panel, press the 'Add Script' button and select Events | Button | on (press)
8. Press the myfirst-addaction_button 'Add Script' button and select Sound | Play Sound from the drop-down Menu. Press the 'Import...' button, and select "Beep2.wav" from the Samples folder. Import, then select Beep2.wav so it is the parameter of the playSound() Action. The 'Script' Panel should be as shown below:

Tute4_3a  

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

Tute4_4  

10. Go back in to the 'Layout' Panel and press the playscene 'Play Timeline' 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 stopmovie 'Stop Movie' button to end your preview

11.    Save your Movie


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