Start the Flash program. Click "New" from the "File" menu on the main Flash menu bar. Click the file type "Flash File(ActionScript 3.0) from the "New Document" dialog box that appears. Click the "OK" button to close this dialog box.
Select the "Actions" option from the "Window" menu on the main Flash menu bar to open the "Actions" editor. Position your mouse cursor on the first line of the Actions code editor.
Declare a "MovieClip"object to use as a button. Specify the button shape as a rectangle with the "drawRect" method, and add it to the stage with the "addChild" method. Type the code listed below into the Actions editor to specify this rectangle shape (the button). It will have a name ("instance name") of "buttonRoll" and will be: a MovieClip, drawn with a 1 pixel wide border line, the color red, 50 pixels high and 100 pixels long, positioned on the stage at the Flash coordinate grid position (200,200), and will be placed on the stage when the movie plays. Here's the code:
var buttonRoll:MovieClip= new MovieClip();
buttonRoll.graphics.lineStyle(1);
buttonRoll.graphics.beginFill(0xFF0000);
buttonRoll.graphics.drawRect(200,200, 100, 50);
buttonRoll.graphics.endFill();
stage.addChild(buttonRoll);
Attach an event listener to the "buttonRoll" object with the "addEventListener" method. Specify the "ROLL_OUT" mouse event as the first parameter in the "addEventListener" method. Specify a function named "buttonRollout+fn" as the second parameter in the "addEventListener" method.Type the code listed below into the Actions editor to code this event listener:
buttonRoll.addEventListener(MouseEvent.ROLL_OUT, buttonRollOut_fn)
Declare the "buttonRollOut_fn" function on the next line of the Actions editor. so that a message will be displayed after the mouse cursor leaves the boundaries of the red rectangular button. Within the function code, include a "trace" statement that will display the message "you have moved out of the button's boundaries." Type the code, as listed below, in the Actions editor to declare the function and add the trace functionality.
function buttonRollOut_fn(eventOne:MouseEvent):
void {trace ("you have moved out of the button's boundaries")};
Review the complete code you typed, as listed below, for syntax errors and correct them as necessary. Copy and paste this code into the Actions editor, if you have not already typed it in.
var buttonRoll:MovieClip= new MovieClip();
buttonRoll.graphics.lineStyle(1);
buttonRoll.graphics.beginFill(0xFF0000);
buttonRoll.graphics.drawRect(200,200, 100, 50);
buttonRoll.graphics.endFill();
stage.addChild(buttonRoll);
buttonRoll.addEventListener(MouseEvent.ROLL_OUT, buttonRollOut_fn)
function buttonRollOut_fn(eventOne:MouseEvent):
void {trace ("you have moved out of the button's boundaries")};
Click the "TestMovie" option in the "Control" menu on the main Flash menu bar to play the animation. Move your mouse cursor over the button and then out of its boundaries. Observe that the message you entered into the trace statement -- "you have moved out of the button's boundaries" -- is displayed in the "Output Panel."