Link to home
Start Free TrialLog in
Avatar of flashdope
flashdope

asked on

flash as3 complicated button question

say i have 10 movieclips on stage that all have button functionality.
i also have 2 additional buttons.
when i click one of the buttons i want five of the movie clips to be 'deactivated': unclickable and grayed out.
when i click the other button the other five should be deactivated and the first five should be re-activated.

any advice on how i could do that with as3? or if you could point me to a tutorial somewhere.

thanks.
Avatar of Designbyonyx
Designbyonyx
Flag of United States of America image

If you are not dynamically generating the 10 movieclip buttons, then you could try the following bit of code.  Replace each "MovieClip1", "MovieClip2", etc.... with the Instance Names of the movie clips in your movie.  I hope this is pretty self explanatory.  Let me know.

~Ryan
// changeGroupState(GroupNumber:Number, EnabledState:Boolean);
 
var group1:Array = new Array();
var group2:Array = new Array();
var pathToThis:MovieClip = this; // Path to Movie Clips
 
group1.push("MovieClip1");
group1.push("MovieClip2");
group1.push("MovieClip3");
group1.push("MovieClip4");
group1.push("MovieClip5");
 
group2.push("MovieClip6");
group2.push("MovieClip7");
group2.push("MovieClip8");
group2.push("MovieClip9");
group2.push("MovieClip10");
 
button1.onRelease = function():Void {
     changeGroupState(1, false);
     changeGroupState(2, true);
}
 
button2.onRelease = function():Void {
     changeGroupState(1, true);
     changeGroupState(2, false);
}
 
function changeGroupState(g:Number, b:Boolean):Void {
     var thisGroup:Array = pathToThis["group"+ g];
     for(var i:Number=0; i< thisGroup.length; i++){
          var thisClip:MovieClip = pathToThis[thisGroup[i]];
          thisClip.enabled = b;
          thisClip._alpha = (b) ? 100 : 50; // Slight fade out
     }
}

Open in new window

Avatar of flashdope
flashdope

ASKER

thanks ryan,  i'll try this. one question: can one movie clip belong to more than one group?
here's what i will do... in AS3

   

btn1.addEventListener(MouseEvent.CLICK, btnClick);
btn2.addEventListener(MouseEvent.CLICK, btnClick);
function btnClick(e:MouseEvent):void
{
	groupOff();
	groupOn(int(e.target.name.substr(3)));
}
function groupOff():void
{
	for (var i:int=0; i<10; i++)
	{
		this["g"+(i+1)].alpha=.2;
		this["g"+(i+1)].buttonMode=false;
		this["g"+(i+1)].mouseChildren=false;
	}
}
function groupOn($n:int):void
{
	for (var i:int=$n*5; i>$n*5-5; i--)
	{
		this["g"+i].alpha=1;
		this["g"+i].buttonMode=true;
		this["g"+i].mouseChildren=true;
	}
}

Open in new window

yes, you can assign any number of movieclips to any number of groups.  If you want to create another group, just create another array variable (see code below) - var groupN:Array = new Array(); - where N is the number of the group.  And to add a movieclip to a group, just use the syntax -  groupN.push("Movie_Clip_Name"); - again, where N is the number of the group, and Movie_Clip_Name is the Instance Name of your movie (as assigned in the Properties Panel).

It is important to note that if you want to assign a movieclip to multiple groups, then you must call the "disable function" FIRST (meaning, the second parameter of the function MUST be FALSE).  So for example, the code that I posted in my first comment would be incorrect, because in the action for button2, I called the "disable function" last.  So if you want to use my code from the first post, you must modify the actions for button2.  However, I will post the corrected code at the end of this post.

The same movie clip can belong to multiple groups.  In the code below, I have created a third group and assigned MovieClip3 to all three groups.

By the way, I did not mention in my first post that my code was AS2 compliant.  I will include both the AS2 and AS3 compliant code this time ;)  In the AS3 code, I took a slightly different approach to enabling and disabling the movies.  All you have to do is call the function enableGroup(N) and it will automatically disable all groups except for the one you specify, no matter how many groups you create.
// ------- AS2 Compliant --------------
// changeGroupState(GroupNumber:Number, EnabledState:Boolean);
 
var group1:Array = new Array();  // Group 1
var group2:Array = new Array();  // Group 2
var group3:Array = new Array();  // Group 3 
var pathToThis:MovieClip = this; // Path to Movie Clips
 
group1.push("MovieClip1");
group1.push("MovieClip2");
group1.push("MovieClip3");  // belongs to all groups
group1.push("MovieClip4");
group1.push("MovieClip5");
 
group2.push("MovieClip3");  // belongs to all groups
group2.push("MovieClip6");
group2.push("MovieClip7");
group2.push("MovieClip8");
group2.push("MovieClip9");
group2.push("MovieClip10");
 
group3.push("MovieClip3");  // belongs to all groups
group3.push("MovieClip4");
group3.push("MovieClip5");
group3.push("MovieClip8");
group3.push("MovieClip9");
 
button1.onRelease = function():Void {
     changeGroupState(1, false);  // Disable Group 1
     changeGroupState(3, false);  // Disable Group 3
     changeGroupState(2, true);   // Enable Group 2
}
 
button2.onRelease = function():Void {
     changeGroupState(2, false);  // Disable Group 2
     changeGroupState(3, false);  // Disable Group 3
     changeGroupState(1, true);   // Enable Group 1
}
 
function changeGroupState(g:Number, b:Boolean):Void {
     var thisGroup:Array = pathToThis["group"+ g];
     for(var i:Number=0; i< thisGroup.length; i++){
          var thisClip:MovieClip = pathToThis[thisGroup[i]];
          thisClip.enabled = b;
          thisClip._alpha = (b) ? 100 : 50; // Slight fade out
     }
}
 
 
 
// ------- AS3 Compliant --------------
// enableGroup( groupID:int );
 
var group1:Array = new Array();  // Group 1
var group2:Array = new Array();  // Group 2
var group3:Array = new Array();  // Group 3 
var pathToMCs:MovieClip = this; // Path to Movie Clips
 
group1.push("MovieClip1");
group1.push("MovieClip2");
group1.push("MovieClip3");  // belongs to all groups
group1.push("MovieClip4");
group1.push("MovieClip5");
 
group2.push("MovieClip3");  // belongs to all groups
group2.push("MovieClip6");
group2.push("MovieClip7");
group2.push("MovieClip8");
group2.push("MovieClip9");
group2.push("MovieClip10");
 
group3.push("MovieClip3");  // belongs to all groups
group3.push("MovieClip4");
group3.push("MovieClip5");
group3.push("MovieClip8");
group3.push("MovieClip9");
 
button1.addEventListener(MouseEvent.CLICK, buttonAction1);
button2.addEventListener(MouseEvent.CLICK, buttonAction2);
 
trace(typeof(group1));
 
function buttonAction1(e:MouseEvent):void {
     enableGroup(1);
	  /* The above is the same as doing the following:
	 changeGroupState(1, false);
	 changeGroupState(2, false);
	 changeGroupState(3, true);  // Note: disable all other groups before enabling a group
	 */
}
 
function buttonAction2(e:MouseEvent):void {
     enableGroup(2);
	 /* The above is the same as doing the following:
	 changeGroupState(1, false);
	 changeGroupState(3, false);
	 changeGroupState(2, true);  // Note: disable all other groups before enabling a group
	 */
}
 
function enableGroup(n:int):void {
	for(var i:int = 1; typeof(this["group"+ i]) == "object"; i++){
		// Disable ALL groups
		changeGroupState(i, false);	
	}
	// Enable the specified group
	changeGroupState(n, true);
}
 
function changeGroupState(g:int, b:Boolean):void {
     var thisGroup:Array = this["group"+ g];
     for(var i:int=0; i< thisGroup.length; i++){
          var thisClip:MovieClip = pathToMCs[thisGroup[i]];
          thisClip.enabled = b;
          thisClip.alpha = (b) ? 1 : .5; // Slight fade out
     }
}

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Designbyonyx
Designbyonyx
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
thanks ryan for all that work