Button with rollOver
Top  Previous  Next


Description
This is a step-by-step tutorial for creating an animated button that changes size when the mouse is positioned over it.

Aim
This tutorial demonstrates the on(rollOver), on(rollOut) Button Events as well as the _xscale and _yscale properties.

.swi file
"button1.swi"


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  

scripttute4_1

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:  
scripttute4_2
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:  
scripttute4_3

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:  
scripttute4_4

Uncheck the 'Roll over' checkbox and check the 'Roll out' checkbox.  
The resulting script should look like this:  

scripttute4_5

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:  
scripttute4_6


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)  

Analysis
Additional Event Handling routines were added to the button to handle the on(rollOver) and on(rollOut) Button Events. When the on(rollOver) Event occurs, the button is scaled to 150% of its original size. When the on(rollOut) Event occurs, the button is scaled to 100% of its original size.

The scaling is achieved by changing the _xscale and _yscale properties. As the button is an Object that occurs in the main Movie, its properties can be referenced via _root.b1.<property>.

By design, Button Events are designed to work on the containing Object. Consequently, if the commands in the Button Event routines were entered as this._xscale = ... or simply _xscale = ..., the Effect would be to scale the main Movie, not the button. In contrast, the onSelfEvent() routine works on the current Object.