Creating a button in Adobe Flash CS4 (action script 2.0)

In this tutorial, you will learn how to create a simple basic button and linking it to another frame in flash CS4. Really its very simple, just a little code but nothing to get you scared. You can download the source file at the end of this tutorial.

Lets get started.

Create a new action script project 2.0, you can name it button or whatever you wish.

Your screen should look like this when selecting your project

Now that you have your new project set, we need to have a background, you can design your background here on the first layer. There is a background in the source file of this tutorial just export that in here. To do that, click on file at the top panel of the software and then select import to stage, select the background and click open.

We need to change our movie dimension to fix the background we exported. To do that click on properties and edit size to 641*654 px.

Your screen should look like this:

Name our first layer to “bg” from Layer 1. (you need to name all your layers for easy access when refering to them later), Now we need to expand our timeline to say, frame 30, look at the image below:

Simple right?

Let’s create our button. Create another layer and name it button 1 then go to the shape tool and select the rectangle shape, draw a simple small size rectangle and add some colors to it. I did a very simple grayish gradient to match our background.

Right click on the shape created and click on covert to symbol, on the type panel select button and name your symbol to “click_btn”, your screen should look like this:

Click ok and double click on your button you created and your timeline brings out four different states. The up state, the over, down and hit states.

Your timeline should look like this

Click on F6 to create your over-state (what our button will look like when the mouse icon is on it). Hope you’re getting the gist? Now change the color of the shape to have a different feel when the mouse moves over it, I used a lighter Grey. Then click on F6 again the red bar moves to the down-state you can create any other effect to your shape for the downstate.

The down state is what happens to your button when you click on it, I didn’t change mine. The final state is the hit-state. Here is what triggers your button to be active, click on F6 again and the red bar moves to the hit-state, select your rectangle tool and draw a bigger rectangle across your button so anytime your mouse moves towards the rectangle it triggers your over-state. I’m sure you understand this.

Still on the button panel, click on new layer to create our button label. Here I named my button label “click me”. Now your button panel should look like this

your button should look like this

Let’s add some action script

Click on scene 1 to go back to our main movie

Add a new layer and name it actions, add another layer and name it label.

We need to name our labels because that’s what our codes will make reference too

On our label layer click on the first frame and go to the properties panel, on the name tab, name our frame “home”,
Your properties panel should look like this:

still on the label layer, go to frame 14 and press F6 on your keyboard, it creates a key frame on the frame, go the properties panel and name it “click”, our timeline should look like this

On our action layer, click on the first frame and put the stop and the button’s code

stop();
click_btn.onRelease = function() {
  gotoAndPlay("click");
};

Explanation

Here we told the button (“click_btn”) that when clicked should go to the label called “click” and remember our click label it’s on frame 14, that’s just the simple explanation.

Now let’s move our timeline to frame 14. On frame 14, click on the button 1 layer and press F7
Note: the red bar has to be under frame 14 before u click on F7. This clears out the “click me” button after it gets to the frame.

Now lets create our content

Create another layer and name it content, click F6 under frame 14.
Click on the text tool and type whatever you want on it.

Go to your action label and click on F6 under frame 14 , select your action panel and type in the stop code stop();

To test our movie press “ctrl + enter” on your keyboard

I have to stop here but we achieved the creation of the button and the linking to another frame you can download the source file and check how I did it.

Thanks and don’t forget to ask any questions.

Resources

Download Source

Leave a Reply

Your email address will not be published. Required fields are marked *