Skip to main content
Participant
September 10, 2013
Answered

Adding in more than one toggle button

  • September 10, 2013
  • 2 replies
  • 1234 views

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();
}

This topic has been closed for replies.
Correct answer Andrei1-bKoviI

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();

}

2 replies

Andrei1-bKoviICorrect answer
Inspiring
September 10, 2013

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 shepAuthor
Participant
September 11, 2013

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

Ned Murphy
Legend
September 10, 2013

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 shepAuthor
Participant
September 10, 2013

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
Legend
September 10, 2013

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;