Hello
I have created 5 movieclip buttons and added them on the stage. How can I disable the button that is clicked and enable the remaining and so on…?
There are a lot of way to do this. A simple way would be to simply remove the event listeners of the buttons you want disabled.
Thanks for that but how would I know the last button that was clicked cuz i have to enable event listener for that one. So is there an efficient way of keeping track of the parent.
just create a var and pass a ref there.
When u click new button check if one exist there, then attach listeners back and replace with new button
Hi Felixz
Thank you for the repsonse can you please explain this a bit more?
var currentButton:Sprite;
function clicked(event:MouseEvent):void {
if (currentButton) currentButton.addEventListener(MouseEvent.CLICK,clicked);
currentButton=event.currentTarget;
currentButton.removeEventListener(MouseEvent.CLICK,clicked);
}
Okay great this sort the problem when one button is clicked. we remove click eventlistener for that can you please tell the next time some other buttons is clicked then how can we enable this button again. I hope I making sense here.
Like how can I keep track of the previously clicked button so that I can enable it?
Thanks for your help.
this does that already
Okay I will try to implement this and then I will let you know how I got on.
Thanks for your help
Hi Felixz
I tried that code you supplied but its not working properly. I am posting the code for you.
On the main time line I am creating two buttons and adding them to stage.
var btn:DisablingButton = new DisablingButton("btn1");
addChild(btn);
var btn1:DisablingButton = new DisablingButton("btn2");
btn1.y = 50;
addChild(btn1);
The code for my button class i.e DisablingButton is given below
package
{
import flash.display.*;
import flash.text.*;
import flash.events.*;
public class DisablingButton extends MovieClip
{
private var currentButton:MovieClip;
public function DisablingButton(nam:String)
{
this.name = nam;
currentButton = this;
this.addEventListener(MouseEvent.CLICK,clicked);
}
public function clicked(e:MouseEvent):void
{
if (currentButton)
{
trace(this.name);
currentButton.addEventListener(MouseEvent.CLICK,clicked);
currentButton=MovieClip(e.currentTarget);
currentButton.removeEventListener(MouseEvent.CLICK,clicked);
}
}
}
}
Thanks for your help in advance.
var currentButton:CustomButton;
for (var i:int=0;i<10;i++) {
var button:CustomButton=new CustomButton();
button.addEventListener(MouseEvent.CLICK,react);
button.addEventListener(MouseEvent.CLICK,clicked);
button.x=(button.width + 10) * i;
}
function clicked(event:MouseEvent):void {
if (currentButton) {
currentButton.addEventListener(MouseEvent.CLICK,clicked);
currentButton.enabledState();
}
currentButton=event.currentTarget;
currentButton.removeEventListener(MouseEvent.CLICK,clicked);
currentButton.disabldState();
}
function react(event:MouseEvent):void {
trace(event.currentTarget);
}
package
{
import flash.display.;
import flash.text.;
import flash.events.*;
import flash.geom.ColorTransform;
public class CustomButton extends Sprite
{
private var btn:int;
public function CustomButton(nam:int)
{
btn = nam;
}
public function disabledState():void
{
var newColorTransform:ColorTransform= new ColorTransform;
newColorTransform.color = 0x0195fd;
this.transform.colorTransform = newColorTransform;
}
public function enabledState():void
{
var newColorTransform:ColorTransform= new ColorTransform;
newColorTransform.color = 0x000000;
this.transform.colorTransform = newColorTransform;
}
public function overState():void
{
var newColorTransform:ColorTransform= new ColorTransform;
newColorTransform.color = 0xffffff;
this.transform.colorTransform = newColorTransform;
}
public function outState():void
{
var newColorTransform:ColorTransform= new ColorTransform;
newColorTransform.color = 0x000000;
this.transform.colorTransform = newColorTransform;
}
}
}
Okay I got the button working when user clicks it changes color and becomes diable but I cant seem to figure out how to do the ove r and out events. I have posted the code and fla file if you can help that would be good.
Hi Felixz
I got it working thanks for your help. I must say that is one intelligent piece of code really amazing. How long have you been working in AS3?
And for the rest of you interested in this thread I changed by enabled and disabled function inside CustomButton Class I am giving the complete working code for this class and the main timeline code as well here. And yes on the over, out and down state I am just changing the colors of my button you can do whatever u want there.
Once again thanks Felixz for your help.
// CustomButton class code
package
{
import flash.display.*;
import flash.text.*;
import flash.events.*;
import flash.geom.ColorTransform;
public class CustomButton extends Sprite
{
private var btn:String;
public function CustomButton(nam:String)
{
btn = nam;
this.addEventListener(MouseEvent.MOUSE_OVER, overState);
this.addEventListener(MouseEvent.MOUSE_OUT, outState);
}
public function getName():String
{
return btn;
}
public function disabledState():void
{
var newColorTransform:ColorTransform= new ColorTransform;
newColorTransform.color = 0x0195fd;
this.transform.colorTransform = newColorTransform;
this.removeEventListener(MouseEvent.MOUSE_OVER, overState);
this.removeEventListener(MouseEvent.MOUSE_OUT, outState);
}
public function enabledState():void
{
var newColorTransform:ColorTransform= new ColorTransform;
newColorTransform.color = 0x000000;
this.transform.colorTransform = newColorTransform;
this.addEventListener(MouseEvent.MOUSE_OVER, overState);
this.addEventListener(MouseEvent.MOUSE_OUT, outState);
}
public function overState(e:MouseEvent):void
{
var newColorTransform:ColorTransform= new ColorTransform;
newColorTransform.color = 0xffffff;
this.transform.colorTransform = newColorTransform;
}
public function outState(e:MouseEvent):void
{
var newColorTransform:ColorTransform= new ColorTransform;
newColorTransform.color = 0x000000;
this.transform.colorTransform = newColorTransform;
}
}
}
// main timeline code
var currentButton:CustomButton;
for (var i:int=0;i<3;i++)
{
var button:CustomButton=new CustomButton("btn" + i);
//button.addEventListener(MouseEvent.CLICK,react);
button.addEventListener(MouseEvent.CLICK,clicked);
button.x= (button.width + 10) * i;
addChild(button);
}
function clicked(event:MouseEvent):void
{
if (currentButton)
{
currentButton.addEventListener(MouseEvent.CLICK,clicked);
currentButton.enabledState();
}
currentButton = CustomButton(event.currentTarget);
currentButton.removeEventListener(MouseEvent.CLICK,clicked);
currentButton.disabledState();
}
Here’s a kludge that works: I simply cover the offending button with a movieclip when clicked. (in this example, it is within the “removePage” function, instance name “disabler_mc.disabler”.
The upside is that the “disabler” can be tinted, tweened, rotated, whatever… as part of the navigation feedback.
[COLOR=“Blue”][U]Example[/U][/COLOR]
stop();
import gs.TweenMax;
import fl.motion.easing.*;
stage.scaleMode = StageScaleMode.NO_SCALE;
//variables
var p1:MovieClip = pageGroup.page1;
var p2:MovieClip = pageGroup.page2;
var p3:MovieClip = pageGroup.page3;
var p4:MovieClip = pageGroup.page4;
var p5:MovieClip = pageGroup.page5;
var button:String = "";
var tweenPage:TweenMax;
var buttons:Array = [buttonGroup.b1, buttonGroup.b2, buttonGroup.b3, buttonGroup.b4, buttonGroup.b5];
//Initialize movieclip positions
TweenMax.allTo([p2, p3, p4, p5], 0, {alpha:0, scaleX:.1, scaleY:.1, x:450, y:300});
TweenMax.to(p1, 0, {alpha:1, scaleX:1, scaleY:1, x:450, y:300});
//event listeners
buttonGroup.buttonMode = true;
buttonGroup.mouseEnabled = true;
disabler_mc.disabler.mouseEnabled = false;
buttonGroup.addEventListener(MouseEvent.CLICK, removePage, false, 0, true);
buttonGroup.addEventListener(MouseEvent.MOUSE_OVER , rollover, false, 0, true);
buttonGroup.addEventListener(MouseEvent.MOUSE_OUT, rollout, false, 0, true);
function rollover(event:MouseEvent):void {
button = event.target.name;
trace(button);
switch (button){
case "b1" :
TweenMax.to(event.target, 1, {scaleX:1.5, tint:0xFF00FF, ease:Elastic.easeOut});
break;
case "b2" :
TweenMax.to(event.target, 1, {scaleX:1.5, tint:0x00FFFF, ease:Elastic.easeOut});
break;
case "b3" :
TweenMax.to(event.target, 1, {scaleX:1.5, tint:0xFFFF00, ease:Elastic.easeOut});
break;
case "b4" :
TweenMax.to(event.target, 1, {scaleX:1.5, tint:0x0000FF, ease:Elastic.easeOut});
break;
case "b5" :
TweenMax.to(event.target, 1, {scaleX:1.5, tint:0x00FF00, ease:Elastic.easeOut});
break;
}
}
function rollout(event:MouseEvent):void {
TweenMax.to(event.target, .5, {scaleX:1, tint:null, ease:Linear.easeOut});
}
function removePage(event:MouseEvent):void {
button = event.target.name;
TweenMax.allTo([p1, p2, p3, p4, p5], .7, {alpha:0, scaleX:.1, scaleY:.1, ease:Back.easeIn, onCompleteAll:loadPage});
TweenMax.sequence(disabler_mc.disabler, [{time:.2, scaleX:.01}, {time:.2, y:event.target.y}, {time:.2, scaleX:1}]);
}
function loadPage():void {
trace(button);
if (button == "b1") {
TweenMax.removeTween(tweenPage);
tweenPage = TweenMax.to(p1, 2, {delay:0, alpha:1, scaleX:1, scaleY:1, tint:0xFF00FF, ease:Elastic.easeOut, overwrite:false});
} else if (button == "b2") {
TweenMax.removeTween(tweenPage);
tweenPage = TweenMax.to(p2, 2, {delay:0, alpha:1, scaleX:1, scaleY:1, tint:0x00FFFF, ease:Elastic.easeOut, overwrite:false});
} else if (button == "b3") {
TweenMax.removeTween(tweenPage);
tweenPage = TweenMax.to(p3, 2, {delay:0, alpha:1, scaleX:1, scaleY:1, tint:0xFFFF00, ease:Elastic.easeOut, overwrite:false});
} else if (button == "b4") {
TweenMax.removeTween(tweenPage);
tweenPage = TweenMax.to(p4, 2, {delay:0, alpha:1, scaleX:1, scaleY:1, tint:0x0000FF, ease:Elastic.easeOut, overwrite:false});
} else if (button == "b5") {
TweenMax.removeTween(tweenPage);
tweenPage = TweenMax.to(p5, 2, {delay:0, alpha:1, scaleX:1, scaleY:1, tint:0x00FF00, ease:Elastic.easeOut, overwrite:false});
}
}
Wow that’s brilliant and a lot of code for me to sink in 
I will get cracking on this. Thanks for this code
