Button with rollOver
|
Top Previous Next |
1. | Continue from previous button tutorial, or load the "button.swi" file and save the file as "mybutton1.swi".
|
2. | Check the 'Target' checkbox in the Button Panel. This makes the button a Scripting Object, which allows us to access and manipulate the properties associated with it
|
3. | Select the 'b1' button in the 'Outline' Panel, if not already selected. Select the 'Script' Panel and add an on(rollOver) Button Event for the button by selecting the Menu items Add Script | Events | Button | on(rollOver)
|
4. | Use the right mouse button to click on the on (rollOver) function then add the script _root.b1._xscale = 150;
|
This is added via the menu items Add Script | Statements | name = expr;
|
In the 'Target' field, enter _root.b1
|
In the 'Name' field, select _xscale using the drop-down menu.
|
Leave the 'Operator' field as =
|
In the bottom section enter the number 150.
|
|
The resulting script should look like this:
|
Use a similar procedure (or use right click, Copy and Paste then modify parameters) to enter the statement:
|
_root.b1._yscale = 150;
|
|
The resulting script should look like this:
|
5. | Create an on(rollOut) Button Event to return the button to its original size when the mouse moves away from the button. This Event can be created by repeating Step 4 using the on(rollOut) Event function. A quicker way to create the new Event is to copy the existing one and modify it appropriately, as shown below:
|
|
Use the right mouse button to right-click on the on (rollOver) { function definition. Use the Copy and Paste options to duplicate the existing function. The resulting script should look like this:
|
Uncheck the 'Roll over' checkbox and check the 'Roll out' checkbox.
|
The resulting script should look like this:
|
Now modify the statements contained in the on (rollOut) Event function so that they are:
|
_root.b1._xscale = 100;
|
_root.b1._yscale = 100;
|
The resulting script should look like this:
|
6. | Test the button by select the Debug tab among the Panels displayed on the right hand side of the 'Layout' Panel. Press the 'Play' button to run your Movie. Moving the mouse over the button, should cause the button to become larger. Once the mouse moves away from the button, the button should return to its normal size. Pressing the left mouse button while the mouse is positioned over the button will cause the words "Button Pressed" to be displayed in the 'Debug' Panel (which was covered in the 'Button' tutorial)
|