Part 2: How to Use ActionScript (for beginners, like me)

Okay, so now it’s time to add some cool effects to our previously designed rectangle. We’re going to create a mouse event, so that whenever we click on the rectangle, it will rotate in 3D.

Open up your .fla file from the last blog post. Now, insert a new keyframe on your actions layer about 3-5 frames before the stop(); action.

Alright, click on your rectangle first and make sure you have an instance name. If not, create one. Mine is “pinktangle.”

Now, go to the new keyframe and click on your actions panel. First, type in your instance name. Then you are going to add an event listener by using the .addEventListener property. Next, you are going to add a mouse event and what kind of mouseevent you would like by adding (MouseEvent.CLICK ,onClick).  The second part in the parenthesis will be our function, telling flash what to do whenever that mouseevent occurs. Then add in a semicolon, for this line of code is complete. For this example, we’re going to do a mouseclick. So far, your code should look like:


Now, you are going to add the function “onClick”. Note: You can call your function whatever you want..onClick just makes sense to me. To create a function, you are going to go to a new line and type this code.

function onClick(e:MouseEvent):void

Obviously, the function is onClick since we defined that earlier…then the “e:” stands for event, you can also use the word event. MouseEvent, well it’s a mouseEvent so that’s why that is there. Void is used to tell Flash that you don’t want it to return a value. Is AS2, it was used to tell Flash that there are no parameters.

This is the code you should have so far:


function onClick(e:MouseEvent):void

Okay, and finally we add what we want the function to do. Go to a new line and add opening brackets { ..then go to another new line and we are going to insert the gotoAndPlay property, which will go to the desired frame and play it.

so add gotoAndPlay(1);

or whatever frame you want your animation to start from whenever the button (or rectangle in this case) is clicked. Then just go to a new line and add the closing brackets }…

This is what your code should look like..

Now, test your movie and click it. Voila, you’ve created a click event!

To see this blog in action, click here, then hover over Digital Composition and click how-to blogs.


Tiffany Nebraska.

~ by spiffytiffy2009 on April 4, 2010.

%d bloggers like this: