Adding in more than one toggle button

[kim shep]

Hi,

I am having problems when adding multiple toggles. I am unable to work out what its actually doing as occasionly when i click on toggle 2, its firing toggle 1 and the sometimes its doing it the other way around -clicking on toggle 1 will fire toggle 2.

Any help is much appreicated.

My code below:

//Adding flows to stage
var flow0:MovieClip = new mov_flow_0();
this.addChild(flow0);
flow0.y = 235.80;
flow0.x = 142.50;
var flow1:MovieClip = new mov_flow_1();
this.addChild(flow1);
flow1.y = 287;
flow1.x = 314.60;
////////////////////////////////////////////
//Stop Flows
stopFlow();

//Setting up buttons
var totalButtons:int = 2;
var buttonArray:Array = new Array();
setUp();
function setUp()
{
 for (var i:int = 0; i<totalButtons; i++)
 {
  var mc = root["toggleBtn_" + i];
  buttonArray = mc;
  mc.buttonMode = true;
  mc.addEventListener(MouseEvent.CLICK, btnClicked);
  mc.btn.x = OFF_POSITION;
 }
}
function btnClicked(e:MouseEvent):void
{
  var id = e.target;
 var index:int = getIndex(id,buttonArray);
 onState = !onState;
 
 var mc = root["toggleBtn_" +index];
 
 var flowToUse = root["flow" + index];
 
 trace ("mc: " + mc.name);
 trace ("flowToUse: " + flowToUse);
 if(onState)
 {
  //mc.btn.x = ON_POSITION;
  TweenMax.to(mc.btn, 0.5, {x:ON_POSITION});
  flowToUse.flow.startFlow();
 }
 else
 {
  //mc.btn.x = OFF_POSITION;
  TweenMax.to(mc.btn, 0.5, {x:OFF_POSITION});
  flowToUse.flow.stopFlow();
  } 
}
// function to search an array to find a given entry
function getIndex(id_to_find:Object,array_to_search:Array)
{
 for (var i:int = 0; i<array_to_search.length;i++)
 {
  if (id_to_find == array_to_search)
  {   
   return i;
   break;
  }
 }
}
function stopFlow()
{
 flow0.flow.stopFlow();
 flow1.flow.stopFlow();
}

[Ned Murphy]

One thing you should do is change from using

var id = e.target;

to:

var id = e.currentTarget; // but you don't need this if you only use it once in the next line

just to be sure you are dealing with the button and not something that dwells within it.

Next, you can use the indexOf() method to find the index rather than the getIndex function you created.

var index:int = buttonArray.indexOf(e.currentTarget);

lastly, is onState a shared variable or is it supposed to be unique to each button.  As is it is treated as if both buttons control the same variable... this might be the issue you are having.

[kim shep]

Hi Ned,

Thanks for your reply!

You are right.. each button needs a unique variable.

Im not too sure on the best way rectify the code for this currently..

Would the best way to create a if statement for each button/ onstate variable? Or is there a shorter dyanmic approach?

Thanks again

[Ned Murphy]

It appears the buttons are MovieClip objects, so you can assign an "onState" property to each one and toggle that... using that id variable you have...

id.onState = !id.onState;

[Andrei1-bKoviI · Accepted solution]

Try this:

import flash.display.MovieClip;
import flash.events.MouseEvent;
//Adding flows to stage
var flow0:MovieClip = new mov_flow_0();
this.addChild(flow0);
flow0.y = 235.80;
flow0.x = 142.50;
var flow1:MovieClip = new mov_flow_1();
this.addChild(flow1);
flow1.y = 287;
flow1.x = 314.60;
////////////////////////////////////////////
//Stop Flows
stopFlow();
//Setting up buttons
var totalButtons:int = 2;
setUp();
function setUp():void
{
          for (var i:int = 0; i < totalButtons; i++)
          {
                    var mc:MovieClip = root["toggleBtn_" + i];
                    mc.buttonMode = true;
                    mc.addEventListener(MouseEvent.CLICK, btnClicked);
                    mc.btn.x = OFF_POSITION;
                    mc.onState = false;
          }
}
function btnClicked(e:MouseEvent):void
{
          var mc:MovieClip = MovieClip(e.currentTarget);
          var flowToUse:MovieClip = MovieClip(root["flow" + String(mc.name).match(/\d+/)[0]]);
          if (mc.onState)
          {
                    TweenMax.to(mc.btn, 0.5, {x: ON_POSITION});
                    flowToUse.flow.startFlow();
          }
          else
          {
                    TweenMax.to(mc.btn, 0.5, {x: OFF_POSITION});
                    flowToUse.flow.stopFlow();
          }
          mc.onState != mc.onState;
}
function stopFlow():void
{
          flow0.flow.stopFlow();
          flow1.flow.stopFlow();
}

[kim shep]

Thanks to both of you. I have it working! I added in the lines:

var mc:MovieClip = MovieClip(e.currentTarget);

and

if (mc.onState)

I also added in

mc.mouseChildren = false;

in the setup as it wouldnt work when clicking on the btn inside the toggle