Thursday, October 28, 2010

Make a Simple ActionScript 2 Button in Flash CS5

For the sake of simplicity I will show how to make a very simple button. I'll not go into detail with the up/over frames. Let's start by creating some text:

You don't want this text acting like text so you're going to turn it into a graphic. Go to Modify -> Break Apart.
This will leave your text looking like this:

Repeat the same action Modify -> Break Apart. This turns your text into graphics AND eliminates the need to embed your fonts (neat!).

Go back to Modify -> Convert to Symbol. You'll get this window:

Make sure type is Button, name your object (start_btn) then click Export for ActionScript. Make sure what you have looks like the above picture. Now, double click your text and it should open up another timeline for your graphic. Name your current layer "text" and lock it. Create a new layer above it and name it "overlay".

What we're doing is creating a "click area". If we didn't add this, it would be difficult or even impossible for the user to move their mouse over the physical area of our text. Use the rectangle tool and create a rectangle covering our text. It doesn't matter what color.
With this shape still selected, go to your Properties window and change the Alpha to 0%.


Now go back to your main timeline. Make sure your movie clip is selected and go back to your properties window and give it an instance name. In this case we named it clickBtn.

Now for the coding. In your main timeline create a layer called "actions". Click on the frame and open your actions window. Here's all the code you need:

stop();

clickBtn.onRelease=function()
{
//add stuff that happens when clicked
gotoAndStop("play");
}


In this case I told my button to go the frame labeled "play".

And you now have a cool button!



[download] .fla source

No comments: