Buttons Control In Flash

by Hiroshi on October 20, 2008

in Actionscript, Adobe Flash, Control

In Adobe Flash buttons are essential part and play specific role in control and animation of movie. I will explain here about how to animate the button or trigger a smooth animation by movie clip onmouseover of a button and onmouseout. We create an invisible button mostly and give it a target movie clip which is visible part of a button. When someone mouseover or mouseout from button then button trigger some animation into movie clip.

Button has four states; up, over, down, hit.
Go inside the button by double clicking it and there you will find these states. When you place actual object (i.e. rectangle) at hit state, then it will not be visible. That’s how we create an invisible working button by placing its content at just hit state. Download example below for explanation.

Target Animation Onmouseover and Onmouseout Event By Button
ActionScript
on (rollOver) {
tellTarget ("_root.movie") {
gotoAndPlay(2);
}
}
on (rollOut) {
tellTarget ("_root.movie") {
gotoAndPlay(11);
}
}

Download Button Example

Events of a Button

Following are some events of button on which we can trigger some animation.

on (press, release, releaseOutside, rollOver, rollOut, dragOver, dragOut, keyPress "<Enter>") {
play();
}
Button On Off Control – When One Button Is On (active), Others Are Off

This is a complex bit of example. We mouse over a button and it goes down and we mouse out a button it goes up. What about on clicking button and it remains in down position? I mean what if we want to show the active state of a button and current state of navigation? On clicking any other button, previously pressed button gains normal state and newly clicked button goes down, in active state. Now that’s the control which a navigation must have. In following example I have used two buttons. On clicking one it remains in clicked state. When we click other, first one gains normal position and second one goes in clicked state.

Download Button On Off Control Example

MovieClip Moves With Button Click or Mouse Move Over Buttons

Consider the image above. The current active button is about button. That black background is a movie clip behind the button. We can move this movie clip as we move mouse over different buttons or when we click at single button that black background will be dragged to the position behind that clicked button. Below are both examples in downloadable form.

Download Button Roll over Example

Download Button Clicked Example

Related Posts

Previous post:

Next post: