Lesson 11 - pressing buttons
The second symbol
So far we have learned how to make a shape or bitmap into a movie clip symbol. While this can make for some interesting animations, our movies are still completely devoid of interactivity. This is easily solved by creating another type of symbol called a Button. Buttons, like movie clips, are created and added to the library for use at any time. Also like movieclips, you can have an unlimited number of instances. You can even change a buttons properties and tween buttons. The key difference is that buttons can have Actions applied to them. So let's begin!
To create a button, let's go to our main menu bar and go to Insert > New Symbol.
Name your new symbol and click the radio button that says "Button". You will now be inside your button editing it.
The four states
If you look at the top of the timeline you will see that instead of having a timeline in frames, your button has four frames. Buttons have four frames: Up, Over, Down, and Hit. These frames do not play in sequence as the main timeline does, but are dependent on the user. Here is a short description:
Up- Up is what the user sees when the button is on the stage, this is its normal state.
Over- Over is similar to a:hover in CSS, it is what the user sees when the mouse is over the hit area.
Down- Down is similar to a:active in CSS, it is what the user sees when the hit area is clicked.
Hit- Hit is the area that activates the button. The hit area is the area affected by the mouse and is never actually seen. Therefor color doesn't matter in a hit area, whatever is drawn in this frame will be considered the hit area.
Just like any other timeline, any frame can be keyframed. This means that you can draw a different picture in each frame if you key frame all of them. And there is one other huge option...
In flash, symbols can be put inside of other symbols. Symbols only occupy one frame. This means that you can drag a movieclip symbol into the Up frame of a button and so on. Try it out!
Actions
Now that you have finished making your button, click back to Scene 1 (your main timeline) in the upper left corner of your timeline. Now that created your button, it is in the Library for your use. So let's drag it out onto the stage.
Now that you ahve created your button, you can apply actions to it. The first thing you will have to is open up your actions Panel. To do this we go to Main Menu > Window > Development Panels > Actions (or F9). Now we should have the Actions Panel open. Applying actions to a Button is very similar to how you have applied them to Frames with one major difference. Flash is an "Event Based" language, meaning that actions happen on events. When a frame is reached, that is an event and the action occurs. For a button, we need to make the event that activates the button. This takes place in the form of an "on handler". This is how you designate how the button works. The most common handler is "on(press)". This means that when we press on the hit area, the button's actions occur. Other handlers include "on(release)", "on(rollOver)". The syntax is written like a normal frame action, with the handler around the action. It is written as such:
on(handler) {
function(parameter);
}
In this code handler, function and parameter would all be replaced with the appropriate code.
Actions are only tied to a single instance of a Button symbol, and can be changed at any time.
What this means for web
Now we created a button and applied actions to it. Wow, the floodgates have just opened. Flash has many similarities to HTML, including the ability to link to images and open external files. This is where the real fun begins.