Tutorial for Flash Animation & Actionscripts
Sometimes, an event or action in a Flash animation or movie is triggered by another event or action: a mouse click, the pressing of a key on the keyboard, or a movie finishing playing, for instance. In order to write ActionScript code that facilitates such triggers, designers and programmers need to be familiar with types of codes called "Event Handlers" and "Event Listeners." By learning some of the basics, you can create ActionScript for Flash that responds in various ways to events.
Other People Are Reading
Instructions
-
Listening Events
-
1
Open a Flash (.fla) file that has one or more symbols on the Stage. In order for a Flash animation to respond to a user-generated event like a mouse click or the pressing of a key on the keyboard, the animation first has to "hear" the event. In ActionScript, this is called a "Listening Event." In other words, code is inserted to the ActionScript to tell the animation to "listen" for a specific stimulus (or event), like a mouse click.
-
2
Choose the "Selection Tool," and click a symbol on the Stage. Say that the symbol is a blue square named "blueSquare," and that when you convert it to a symbol, you classify it as a button. Now you can add code to the symbol to tell it to listen for a mouse click.
-
-
3
Open the Actions Panel ("F9"). Insert a new layer on the Timeline and name it "actions." Click frame 1 of the layer.
-
4
Place your cursor on the first line of the Actions Panel and, without the quotation marks, type "blueSquare.addEventListener(MouseEvent.CLICK, onClick);" Substitute the actual name of the symbol for "blueSquare." In this code, you will be saying that you want a symbol (blueSquare) to listen (addEventListener). Furthermore, the code is saying it should listen for a mouse event type (MouseEvent), rather than, say, a keyboard event. Then the code is telling the symbol which specific mouse event it should listen for (a click), since a mouse can click, move in four different direction, scroll or right-click. Finally, the code is saying telling the symbol to do something once it hears the click (onClick). This code simply tells the symbol what to listen for. It does not tell the symbol what it should actually do once it "hears" the mouse click. For that, you need to add more code that defines "onClick." The type of code you will add is called an "Event Handler."
Event Handlers
-
5
Place your cursor at the end of line 1 of code in the ActionScript Panel and press "Enter" twice. Type "function onClick(event:MouseEvent):void". This sets up the definition for defining the function of what will happen to the symbol once the mouse is clicked. In this case, you will tell the symbol to rotate.
-
6
Press the "Enter" key, and the type an open curly brace ("{"). Press "Enter" and and type "blueSquare.rotation += 45;" press "Enter" and then type a closed curly brace ("}"). This tells the symbol to rotate clockwise 45 degrees once the mouse is clicked.
-
7
Press "Enter" twice and type "blueSquare.buttonMode = true;". This makes the mouse cursor change from an arrow to a hand when the mouse moves over the symbol. It is an intuitive clue to the user that the symbol is click-able and something will happen when it's clicked.
-
8
Save the file and test the movie.
-
1
Tips & Warnings
While the code told the symbol to rotate, you could have used code that would ask it to do any number of other things (fade, move up, move down, change color, etc.). Simply replace the rotate command with the code for a different action instead.
Make sure to copy the format exactly for the code. ActionScript is very picky about how code is formatted and will not run if a period or parentheses is wrong.
