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 allready 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 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.
New Symbol" height="179" width="417">
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.
Look at this example:
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.
Library Window
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:
Instance menu
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://echoecho.com in the URL field the action looks like this:
On (Release)
Get URL ("http://echoecho.com")
End On
CONTROLING 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 echoecho.com in a new window:
On (Release)
Get URL ("http://echoecho.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.
First look at this example of an advanced button:
CREATING ANIMATED BUTTONS
A button like the one you see above can be created by simply inserting a movieclip in the "over"-frame of your button-symbol.
That is:
1: Create a normal movieclip that does whatever you want to happen when a mouse over is detected on the button.
2: Create a normal button symbol (explained on the previous page).
3: Insert a keyframe in the "over" frame of your button, and place the animated movieclip in this frame.
This will cause the animation to start when a mouse over is detected and disappear again whan a mouse out is detected.
The problem with this type of button is that it lacks "intelligence". The animation disappear in the middle of a sequence as soon as the mouse-out event is detected.
Look at the button below instead:
CREATING TELL TARGET BUTTONS
The simple button described in the above paragraph stopped immediately when a mouse-out event occured.
The advanced button will finish the loop cycle before stopping the animation.
The trick is this:
1: Draw a button graphic.
2: Create a button symbol using the button graphic.
3: Use the exact same button graphic to create a movieclip.
4: In the movieclip: Create whatever animation you want for the button.
Now you have a button-symbol with the fixed button in it AND a movieclip with the entire mouse-over-animation in it.
5: Place the button-symbol in your movie.
6: Add this action to the button:
On (Roll Over)
If (dummy=0)
Begin Tell Target ("/animation")
Play
End Tell Target
End If
Set Variable: "dummy" = 1
End On
On (Roll Out)
Set Variable: "dummy" = 0
End On
The action detects a Roll Over and a Roll Out:
When a Roll Over is detected:
- it tells the movieclip to start playing (The movieclip plays the animation we want when a Mouse Over is detected.). At the same time it sets a variable named "dummy" to the value of 1.
When a Roll Out is detected:
- the variable named "dummy" is set to the value of 0. Nothing else happens here - and THAT is the trick in all this.
The movieclip simply continues to play after the Mouse Out is detected - and that is exactly what we wanted. When the movieclip finishes an animation cycle it will be at the last frame of the moviecip, and this is where the "dummy" variable comes into the picture.
In the last frame of the movieclip we have this action:
If (/:dummy=1)
Go to and Play (2)
Else
Go to and Stop (1)
End If
This means that the movieclip is using the "dummy" variable to determine whether it should continue (Go to and Play (2)) or it should stop (Go to and Stop (1)).
To summarize:
1: We have a Button symbol that we use to detect for Roll Over and Roll Out.
2: On top of this button we have a Movieclip symbol that actually plays the animation we want when a Roll Over occurs.
3: When a Roll Over is detected on our Button symbol we tell the Movieclip Symbol to start playing. At the same time we set a variable called "dummy" to a value of 1.
4: The movieclip will play the entire loop, and when it reaches the last frame it will check the current value of the "dummy" variable. If it is 1 it simply repeats the loop again from frame 2. If it is zero it goes to frame 1 and stops.
5: When a Roll Out is detected the "dummy" variable is set to zero which will cause the Movieclip symbol to stop next time it completes a loop.
Now that the technique behind Tell Target Buttons is in place we just need two tiny comments to it:
First:
We need to add a Stop action to the first frame of the Movieclip symbol - otherwise the movieclip will start looping as soon as it is loaded - rather than stop and wait for a Roll Over event.
Second:
The Movieclip symbol must be given an instance name.
Instance names are entered in the "Properties" dialogue box for your clip.
If you look at the action that we added to the button, you will notice this line:
Begin Tell Target ("/animation")
"animation" is the instance name of our Movieclip.
The reason that Flash requires instance names for movieclips is that the same Movieclip symbol could easily be used in several places at the same time.
For example you could create a movie clip that animated a ball jumping up and down. This movieclip could easily be inserted twice so that you had a ball jumping both at the left and right side of the movie. If you did not add a unique name to each of these two clips it would be impossible for flash to know which one you wanted to control when referring to the movieclip.
The technique for Tell Target buttons is fairly complex compared to the technique behind simple buttons.
Fortunately, it sounds a lot more complex than it actually is - which you will realize when you get your first Tell target button running.
You can click here to download a FLA source file for the Tell Target Button.
From www.echoecho.com
0 nhận xét:
Post a Comment