Online Payday Loan Online Payday Loan

Follow me on Twitter

Simple Flash Buttons with ActionScript 3.0


January 30, 2009

This post will tell you how to create a simple button that can jump to another frame in Adobe Flash using ActionScript 3.0. I’m fairly new to ActionScript, however I have found this function quite useful in my own projects thus far.

It will be easiest if you begin with a new file, and set up three separate layers, one for the actual content (button), one for Labels, and one for Actions, then label them accordingly (with the “actions” layer on top). Next you must create the button you want to perform the action. To do this you must simply provide content (text, a shape, an imported image, etc.) and place it on the stage in the “content” layer. Then select your object and under the Modify menu choose “Convert to Symbol”. In the dialogue box,  give the button a name (in this demo I will use “button_btn”) and click the “button” option.  After this, you should give the button an instance name which is located in the field below the button name in the properties bar. In this example I have named the button “begin_btn” and given it my button an instance name of “PlayEnd”. The button name you gave should then appear in your library, and you can begin to style it if you wish.

By double clicking the button you will bring up a new time line that has four states, Up, Over, Down, and Hit. Here you can style the button just like you would an HTML button in a style sheet as you see in the image below.

Once you have taken care of your button states you can select the frame that the button is on, however on the “Actions” layer you set up this time. Next you will need to open your actions window under the “window” menu, making sure you have the same frame number selected as the one your button is on. What you’ll want to do first is import the mouse event you will be using, in this case we want to skip to another frame when the button is clicked, so we will be using a CLICK event.

In the actions window you will begin by typing:

import flash.events.MouseEvent;

This will import all your mouse events. It is not necessary to take this step for the button to work, but I have been told it is a good habit to get into. You may also want to apply a stop action to stop the flash from playing through, to do this you simply type “stop();” above everything else in the actions window. Next you will need to add an event listener to your button, which will “listen” for the users’ events, in this case a CLICK event. Your script should read something like this for that:

button_btn.addEventListener(MouseEvent.CLICK, PlayEnd);
function PlayEnd(event:MouseEvent):void{
gotoAndStop(“End”);
}

You can see where the event listener is being added to my button (begin_btn), with the instance name (PlayEnd) following it. The line of script below it is simply the syntax for defining the function of our event. In other words, it is to set up exactly what happens when the button is “clicked”; and below that you can see the gotoAndStop command, which tells the animation to go to and stop at the frame labeled “End” with additional content that I would like my button to jump to. You may also replace the “End” with the frame number you would like to jump to, however inside the parentheses, do not include the quotations if using only a frame number. In addition, to jump to a new frame and continue playing, simply substitute gotoAndPlay where you currently see gotoAndStop.

Syntax is very important in ActionScript, and I would suggest consulting other sources such as a good AS 3.0 book, or your favorite tech bloggers to learn the basics first. Things such as capitalizations and small punctuation can make a nightmare for you if you miss them in the beginning, so pay attention to what you’re typing and good luck!

{ Posted in design | No Comments »}

LEAVE A COMMENT.

No Comments »

RSS feed for comments on this post. TrackBack URL

Leave a comment