PROGRAM A BUTTON IN AS 3

//head table

Adobe Animate. Action Scripting	Alejandra Jarabo MAT 116
Media Arts & Technologies. Santa Barbara City College	PROGRAMING CONCEPTS

ACTION SCRIPTING 3.0 (AS 3) HOW TO PROGRAM A BUTTON

There are 3 things you need to take care of when you are ready to add code to a button:

1. You need to name the instance of the button, so AS3 can find it
(the script will not be attached to the button but to a keyframe).

2. You need to DECLARE a function with what the button is going to do,
Inisde that function,you will define the action or actions you want that function to perform when it gets called.

3. You need to DECLARE an event listener (attached to the button-instance-name with dot syntax), so the button knows:
what state will trigger an action (ROLLOVER, CLICK),
what action to trigger (the name of the function from step 2).

Remember to follow my movie on how to name an instance of a button, HERE (link also provided in the Help page for module 9 in Canvas)

1. Declare the function (the action that will happens when the user activates the button)

function toAnswer1(event:MouseEvent)
{
gotoAndPlay(5);
}

toAnser1 is the name I have invented for this function. gotoAndPlay is a METHOD (a ready-made function used to navigate the timeline)

Main methods in AS 3.0:

play();
stop();
gotoAndStop(n);
gotoAndPlay(n);
previousFrame();
nextFrame();

Some methods don't need any extra information to run: like play(), stop(), previousFrame() and nextFrame()
Some other methods need some extra information called parameters, and you placed them within the parenthesis.

See some different parameters the methods gotoAndStop and gotoAndPlay can use:

gotoAndPlay(20); Using a frame number.
gotoAndPlay(¨begin¨); Using a Frame-label (written is quotes because it is considered a String variable)
gotoAndPlay(¨secondScene¨,3) Using a frame-label and a differnt scene as a destination

Follow my movie on how to use frame labels HERE (link also provided in the Help page for module 9 in Canvas)

2. Name the button instance by selecting it on the Stage and naming it in the Properties panel, using the text field on the top.
In the code, write down the instance name (in the text example in the page is play_btn, in the image is orange_btn)

3. Write down the event listener that will work with the button.
Think of an event listener as an "antenna" that detects activity to help ActionScripting work more efficiently.
The event listener begins with the name of the object (the button in this case), then a DOT, then a structure that defines when this button should activate an interactive action (defined by the MouseEvent) and what to do if that happens (the name of the function).

This type of a structure, using the object name (working as a subject in the phrase), then the dot, then the description of what to do related to that subject is called DOT SYNTAX.
It allows a very simple and efficient construction of code.
Notice that dot syntax is also used when defining what type of Mouse Event over the button will trigger the function.

play_btn.addEventListener(MouseEvent.CLICK, playBlueMovie);

target	DOT	addEventListener	(	MouseEvent	DOT	EVENT_NAME	,	function to play by target	)

play_btn	•	addEventListener	(	MouseEvent	•	CLICK	,	toAnswer1	)

NOTICE how to spell addEventListener: The ¨a¨ in lowercase, capitalized E and L.
NOTICE how to spell MouseEvent: M and E must be capitalized.

A Mouse Event occurs when the user moves the mouse in the user interface of ab application.
Mouse Events are always referred to in AS3 in Uppercase (this is new in AS 3, it didn't´t use to be like that!)

The events defined for the MouseEvent class are:

CLICK
ROLL_OVER
ROLL_OUT
MOUSE_DOWN
MOUSE_UP
MOUSE_MOVE
MOUSE_OUT
MOUSE_OVER
MOUSE_WHEEL

The extra sample file for the assignment (MouseEvents.fla) has examples of buttons activated with each one of those MouseEvents.

Here you see the complete code to program an instance called play_btn
that on click of the button calls a function called toAnswer1, that takes the playhead to frame n5 and plays from there on.

function toAnswer1 (event:MouseEvent)
{
gotoAndPlay(5);
}

play_btn.addEventListener(MouseEvent.CLICK, toAnswer1);

Remember to follow my movie on how to to program a button in As 3.0, HERE (link also provided in the Help page for module 9 in Canvas)

Before you test the movie
to see the interactivity in action, you need to go to FILE>PUBLISH SETTINGS
and make sure you are using
the current Flash player (in the target field)
and ActionScript 3.0 as a Scroipt language in the script field.

To other AS 3.0 pages:

On functions

On variables