Question about multiple buttons.

[Zenor]

Hello everyone!

So, I've built a project which contains some buttons and every one has an instance name.

My code works great, but if I have, let's say 20 buttons on the stage, I would need to use the same code I used below, 20 times?
I remember that in AS2 we could create a function and use it for every button without using it's instance name. Is that possible on AS3 so that my code doesn't get huge?

Thanks in advance!:hugegrin:


btn1.addEventListener(MouseEvent.CLICK, btnClicked)
btn1.addEventListener(MouseEvent.MOUSE_OVER, btnOver)
btn1.addEventListener(MouseEvent.MOUSE_OUT, btnOut)
btn1.buttonMode = true;


function btnClicked(event:MouseEvent):void
{
btn1.navigateToURL(new URLRequest("http://www.google.com"));
}

function btnOver(event:MouseEvent):void
{
btn1.gotoAndPlay("over");
}

function btnOut(event:MouseEvent):void
{
btn1.gotoAndPlay("out");
}

[Zenor]

Hello again,
So this time I tried this code:

var buttons:Array = [btn1,btn2];


function btnClick(event:MouseEvent):void
{
trace(buttons.indexOf(event.target));
}


stage.addEventListener(MouseEvent.CLICK, btnClick);
stage.addEventListener(MouseEvent.CLICK, btnClick)

but I am getting -1 on trace, instead of the instance name of my buttons.
Why so? Could it be because my buttons(btn1,btn2) contain animated movieclips inside them?(I have converted them to symbols twice so I can animate the buttons)

[snickelfritz]

// select all of the buttons on the stage.
// press F8 to create a new MovieClip
// give it an instance name of "buttonContainer"

// list of buttons
var buttonArray:Array = new Array();
// list of links for the buttons
var buttonLinks:Array =
[
"http://www.google.com",
"http://www.google.com",
"http://www.google.com",
"http://www.google.com",
"http://www.google.com",
"http://www.google.com",
"http://www.google.com",
"http://www.google.com",
"http://www.google.com",
"http://www.google.com",
"http://www.google.com",
"http://www.google.com",
"http://www.google.com",
"http://www.google.com",
"http://www.google.com",
"http://www.google.com",
"http://www.google.com",
"http://www.google.com",
"http://www.google.com",
"http://www.google.com"
];

// dynamic variable is defined when a button is clicked
var targetID:int = 0;
// number of buttons within the container
var n:int = buttonContainer.numChildren;

// assign properties to the buttons and populate the arrays
for (var i:int = 0; i < n; i++)
{
var b:MovieClip = MovieClip(buttonContainer.getChildAt(i));
b.addEventListener(MouseEvent.CLICK, btnClicked);
b.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
b.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
b.buttonMode = true;
b.mouseChildren = false;
b.id = i;

buttonArray.push(b);
}

function btnClicked(event:MouseEvent):void
{
targetID = event.currentTarget.id;
navigateToURL(new URLRequest(String(buttonLinks[targetID])));
}

function btnOver(event:MouseEvent):void
{
event.currentTarget.gotoAndPlay("over");
}

function btnOut(event:MouseEvent):void
{
event.currentTarget.gotoAndPlay("out");
}

BTW, if the buttons are in simple rows or columns, it's usually easier to instantiate them in actionscript, and the code is simpler to troubleshoot and maintain.

[Zenor]

Great, that worked thanks.

One question though. Is it possible to create a code that will help preventing duplicate/swap of every movieclip inside the button?
It's a pain to duplicate and swap movieclips of animated buttons, just wondering if there is a better way of doing it.

[snickelfritz]

Is "duplicate/swap" is referring to the klunky/tedious process of duplicating movieclips on the stage, then swapping the source in the properties panel?
If this is correct, then the answer is yes, there are much better/easier ways to build Flash applications.

I would start by moving the over/out animations to actionscript if possible. (TweenMax to be specific)
ie: forget about using the timeline for this.
This dramatically simplifies setup, and allows for easy tweaking of the animation.
Is your animation complicated? (shape morphing, for example, requires the animation be done on the timeline).
Or is it just a simple x/y/scale/rotation/color/alpha transformation?

Assuming your animation is conducive to Actionscript:

Dynamically load the graphics as bitmaps from an external directory using an external XML data source.
This is really an excellent way to build Flash apps, since you can make changes to the XML data and external files without having to recompile the SWF.
The code is also more robust than timeline based apps, since the process of associating a given URL with a specific bitmap is essentially automatic.

For example, the path to the bitmap file, and the associated destination url are stored as attributes in the XML <image> nodes.
(this example uses google, but you would give each node a unique source path and url.


<?xml version="1.0" encoding="UTF-8"?>
<nav>
<image src="images/google.jpg" link="http://www.google.com"/>
<image src="images/google.jpg" link="http://www.google.com"/>
<image src="images/google.jpg" link="http://www.google.com"/>
<image src="images/google.jpg" link="http://www.google.com"/>
<image src="images/google.jpg" link="http://www.google.com"/>
<image src="images/google.jpg" link="http://www.google.com"/>
<image src="images/google.jpg" link="http://www.google.com"/>
<image src="images/google.jpg" link="http://www.google.com"/>
<image src="images/google.jpg" link="http://www.google.com"/>
<image src="images/google.jpg" link="http://www.google.com"/>
<image src="images/google.jpg" link="http://www.google.com"/>
<image src="images/google.jpg" link="http://www.google.com"/>
<image src="images/google.jpg" link="http://www.google.com"/>
<image src="images/google.jpg" link="http://www.google.com"/>
<image src="images/google.jpg" link="http://www.google.com"/>
<image src="images/google.jpg" link="http://www.google.com"/>
<image src="images/google.jpg" link="http://www.google.com"/>
<image src="images/google.jpg" link="http://www.google.com"/>
<image src="images/google.jpg" link="http://www.google.com"/>
<image src="images/google.jpg" link="http://www.google.com"/>
</nav>

You would then load this XML file into Flash, then load the bitmaps and urls into parallel arrays in a for loop, then construct your application from the arrays.