Flash TUTORIAL-BUTTON

BUTTON TUTORIAL

The only object type in Flash, that can detect mouse events is the Button object.

This means that there is only one way to make buttons with Flash: Creating a button object.

This may sound a bit too simplified, but many are confused by the techniques behind the more sophisticated buttons, that we will cover later in this tutorial.

Creating a button that changes upon mouseover-events is extremely simple. All you really have to do is to tell Flash how you want the button to look 1) in normal state, 2) when the mouse moves over the button and 3) when the user clicks the button.

Once you've learned this 3-step technique you can create buttons in seconds.

However, the buttons you create this way are: simple (that's why they're so easy to make anyway).

If you want to create really fancy buttons you should use a slightly different technique based on movie clips.

THE THREE DIFFERENT OBJECT TYPES

Flash handles three types of objects:

Graphics
Buttons
Movieclips

Graphics objects
You probably already noticed that when you edit Graphics objects you have the entire timeline available for it.
This means that Graphics objects aren't limited to static elements. You can easily create looping animations - simply by creating Graphic objects that uses more than one frame in the timeline.

Button objects
Buttons are different from this. When you create a Button object you only have four frames in the timeline.

One is for drawing the button in normal state.

Another is for drawing the button when a mouse-over is detected.

The third is for drawing the button as you want it to look when the user clicks the button.

The last frame is used to specify which area you want mouse events to react to. That is: you can create a button that only reacts to mouseevents on certain areas of the drawing, - like the center of the button for example.

Movie clip objects
The final object-type: Movieclips, is similar to Graphics objects - on the surface.

In both cases you can create entire animations that can be dragged onto your main movie. But while animations made as Graphics objects simply loops over and over you can control the Movieclips completely.

THE TRICK BEHIND FANCY FLASH BUTTONS

You can create more fancy buttons based on very simple programming. (You do not have to be a programmer to learn to do this!).

Actions added to frames give complete access to controlling movieclips. This means that you can use "Play", "Stop", and "Goto Frame" commands on a movieclip, that is triggered when a certain mouse event is detected on a button.

Now - if the button is invisible and placed on top of the movie clip it will work as if the movieclip itself was able to detect mouse events.

The next pages will teach you - step by step - how to create both simple and advanced buttons.

SIMPLE BUTTONS

The easiest way to create buttons with Flash is creating a Button object.

First look at this example of a simple Button object:

CREATING A BUTTON

To create a Button object, do this:

1: Choose Insert->New Symbol in the menu (Or press Ctrl-F8)
and the Symbol Properties Box appears.

Add a name for your button and make sure the Button option is selected.

2: Click OK and the button editor opens.
As you see it looks exactly the same as the standard Flash editor, with one exception:
You only have four frames in the timeline.

Timeline: Button object editor

3: Draw a button the way you want it to be when no mouse event is detected.
Notice that the active frame is labelled "Up" in the timeline.

4: Insert a keyframe in the frame labelled "Over" in the timeline.
(To do this: Click on Layer 1 in the white cell below where it says "Over". Then press F6.)

5: Draw a button the way you want it to be when a mouseover event is detected.

6: Insert a keyframe in the frame labelled "Down" in the timeline.
(To do this: Click on Layer 1 in the white cell below where it says "Down". Then press F6.)

7: Draw a button the way you want it to be when a mouseclick event is detected.

That's it - you've created a button with three looks that will change upon mouse events.

You still need to specify which area should be clickable as well as what should happen when the button is clicked.
Proceed to learn about these steps.

DEFINING THE CLICKABLE AREA

The last frame, labelled "Hit" is special. It is simply used to specify the area that triggers mousevents.
If you leave this frame blank - then mouse events will be triggered when the mouse moves over the visible button.
But if you draw an area that is bigger than the button - then the mouse event will occur as soon as the mouse gets even close to the button. On the contrary you can draw an area that is smaller than the button, so that mouse events are only triggered when the mouse is at the center of your button.

However, the real power of the "Hit" frame is a bit more sophisticated.
If you draw something in the hit area that is outside the area covered by the visible button - then the button will react to mouseevents in the Hit area. That means that you can make something happen on one part of the screen when the user moves the mouse over another part of the screen.

ADDING ACTIONS TO THE BUTTON

The button we created so far is still in the Button object editor. We still haven't dragged it onto our main movie.
If you look above the timeline you see two Icons labelled "Scene 1" and "mybutton".

Timeline: Button object editor

1: Click the "Scene 1"-icon to return to the main movie.

2: Click on the button in the Library window and drag it onto the movie.

If your Library is not visible choose Window->Library (or press Ctrl-L) to make it visible.

3: Once the button have been placed correct in your movie right click on it and choose "Properties" in the menu that appears.
An Instance menu appears.

4: Select "Actions"

Instance menu

5: Click the plus Icon and select the "OnMouseEvent" option.

6: Select "Release" in the list of event triggers.

The action now says:

On (Release)
End On

This means that we have told Flash that it should react on a mouse-click release event.
But we still haven't told what should happen when the event is detected.
We have several options available. The most important ones are listed below:

Jump to another Frame
Click the plus once more and select the "Go To" option.
Now, the action says:

On (Release)
Go to and Stop (1)
End On

Eventually use the options to specify the frame you want to jump.
If you don't want the movie to stop, once the jump has been made, you should select the Go to and Play option at the bottom.

If, say, you entered frame 20 and selected the Go to and Play option, the action would be:

On (Release)
Go to and Play (20)
End On

And the Instance menu would look like this:

Load another page
Instead of jumping to another frame you could make the button work as a normal hyperlink.
Click the plus and select the "Get URL" option.
Now the action says:

On (Release)
Get URL ("")
End On

If you enter http://cartoonbangladesh.com in the URL field the action looks like this:

On (Release)
Get URL ("http://cartoonbangladesh.com")
End On

CONTROLLING WINDOWS TO LOAD URL
You can control which window the URL should be loaded into.
In the Window filed you have four options:

_self : Opens the URL in the current window. (Same as if you did not specify any window)
_blank : Opens the URL i na new window.
_parent : Opens the URL in the parent frame (only works with framesets).
_top : Opens the page in the current window - if it's a frameset all frames are cancelled.

This action would open cartoonbangladesh.com in a new window:

On (Release)
Get URL ("http://cartoonbangladesh.com", window="_blank")
End On

PASSING VARIABLES TO THE URL THAT IS LOADED

The last option, "Variables" allows you to pass variables from the flash movie to programs running on the server.
If you choose either "Send using GET" or "Send using POST" Flash will open the specified URL as if it was requested by a form-submission. We will not cover the subject further here, since it really belongs to the more advanced tutorial on Flash programming.

For more information, call: +8802 01711424490

back to Home