Oct 19

Flash Button Tutorial

Wed, 10/19/2011 - 22:25 — julie

Interactive web pages and Rich Internet Applications (RIAs) are one of the best areas of Flash. Making these applications requires a moderate amount of ActionScript knowledge along with the know-how of making the User Interface. In this tutorial I am going to teach you how to make buttons in Flash since buttons are the most important feature of the user interface. This tutorial will only teach you how to design and implement an interactive button in flash, I would not touch the topic of ActionScript here.

Before I start, if you are looking for a very easy way out of this tutorial, you can make a free Flash website with Wix with any Flash buttons you desire. If you still want to read this Flash tutorial, let me continue.

Since flash is optimized for making interactive applications so making a button in flash is a piece of cake. There is a built in method to implement a button. You can start by launch Adobe Flash and creating a new document. Now the first thing you need to do is to make the button symbol. Press the keyboard shortcut Ctrl+F8 .You will see dialogue box open up, here you can name your symbol and select the type of the symbol. You have to set the Type to Button and you can give any name to your button.

When you press OK, you will be taken to the button creation screen. Now take a close look at the timeline, you can see the labels “Up”, “Over”, “Down” and “Hit”. These four frames are the ones on which we will create our button.  Let me explain each of the frames now.

Up : This frame will contain the regular state of our button i.e. when the button is in idle state.

Over: This frame will contain the state of the button when the cursor is over the button.

Down: This frame will contain the state of the button while it is being pressed.

Hit: This frame is an invisible frame, it is used to define the clickable area on the button. Everything you draw on this frame becomes the clickable area but the contents of the frame are never visually displayed in the application.

Now, take a rectangle tool and draw a rectangle on each of the frames and change the color of the rectangle on every frame.

When you have made the first frame, press F6 to go to the next frame. The rectangle will get copied in the next frame and you can just change the color of the rectangle on this frame.

Do the same thing for the Down frame.

We have finished adding all the visual frames. Now we need to add the Hit frame . Anything we draw on this frame will not be visually visible in the application but it will become the clickable area of the button.

Now that you have completed the button, go back to your stage by pressing the “Scene 1” button on top of the drawing area.

Now, press “Ctrl+L” to open the library and drag your button from the library to the stage. Press “Ctrl+ENTER” and you can see your button in action.

Here is how the button will be in the idle state

When we hover the cursor over the button, it will change color.

Now when we click on the button, it will change color again.

You can click on the link below to see a working example of the button.

Click here to see the button in action

You can make changes to your button and see how it behaves under different conditions.

Making buttons is pretty easy and with a bit of practice, you will become an expert at this. You can create all sorts of buttons that interact with the users in different ways.

Keep in mind, if you are having trouble with Flash, I strongly recommend you check out a free drag and drop flash site builder from Wix.

Copyright 2009. E-mail Me
Auto Spare Parts