Attached I have an .fla with 3 movieclips (myButton1, myButton2, myButton3), underneath each of those "myButtons" are movieclips (mc1, mc2, mc3), which are not visible by default.
The overall goal is:
On clicking a button: the movieclip underneath will be displayed
On mouseOut: the movieclip will go back to not being visible
The current issue:
This works successfully for the first button. After that, it doesn't.
Whenever myButton2 or myButton3 are clicked, it cycles through stating it's been clicked, mouseOver, and mouseOut (per the output window).
My guess, is that I'm using setIndexChild() incorrectly, which may be causing button2 / button3 to sit behind the mc2 / mc3, hence the reason I'm here.
If there's a better way to achieve this, I would love to know as I've been scratching my head over this for quite a few hours.
The code:
Code:
stop();
import flash.events.MouseEvent;
import flash.display.DisplayObject;
mc1.visible = false;
mc2.visible = false;
mc3.visible = false;
var retailers:int = 3
var retailArray:Array = new Array(retailers);
var movieClipArray:Array = new Array(retailers);
function loadArrays()
{
for(var i:int = 1; i < retailers + 1; i++)
{
retailArray[i] = this["myButton"+i];
retailArray[i].buttonMode = true;
setChildIndex(retailArray[i], i);
retailArray[i].addEventListener(MouseEvent.CLICK, retailClick);
retailArray[i].addEventListener(MouseEvent.MOUSE_OVER, retailMouseOver);
retailArray[i].addEventListener(MouseEvent.MOUSE_OUT, retailMouseOut);
movieClipArray[i] = this["mc"+i];
}
}
function retailClick(event:MouseEvent):void {
trace(event.target.name + " clicked");
trace(getChildIndex(DisplayObject(event.currentTarget)) + " clicked");
var getClipIndex:int = getChildIndex(DisplayObject(event.currentTarget));
movieClipArray[getClipIndex].visible = true;
}
function retailMouseOver(event:MouseEvent):void {
trace(event.target.name + " mouseOver");
trace(getChildIndex(DisplayObject(event.currentTarget)) + " mouseOver");
}
function retailMouseOut(event:MouseEvent):void {
trace(event.target.name + " mouseOut");
trace(getChildIndex(DisplayObject(event.currentTarget)) + " mouseOut");
var getClipIndex:int = getChildIndex(DisplayObject(event.currentTarget));
movieClipArray[getClipIndex].visible = false;
}
loadArrays();
Thanks for taking the time to check this out. Appreciate any help that's given.
var retailers:int = 3;// number of retail spaces var retailArray:Array = new Array(retailers);// create array size based on retail spaces var movieClipArray:Array = new Array(retailers);// create array size based on retail spaces
var correctMovieClipNumber:Number = 0;
function loadArrays() { for (var i:int = 1; i < retailers + 1; i++) {
retailArray[i] = this["myButton" + i];// instance name of individual buttons (as movieClips) retailArray[i].buttonMode = true;// allows movieClip symbol to act as a button
//setChildIndex(retailArray[i], i); // sets depth of each 'button' (movieClip) retailArray[i].addEventListener(MouseEvent.CLICK, retailClick);// calls function when clicked on movieClip retailArray[i].addEventListener(MouseEvent.MOUSE_OVER, retailMouseOver); // calls function when rollover on movieClip; retailArray[i].addEventListener(MouseEvent.MOUSE_OUT, retailMouseOut); // calls function when rollout on movieClip; movieClipArray[i] = this["mc" + i];// instance name of movieClips } }
function retailClick(event:MouseEvent):void { trace(event.target.name + " clicked");// output "button name clicked" trace(getChildIndex(DisplayObject(event.currentTarget)) + " clicked");// output "index number of button clicked" (should match the number on each button) var getClipIndex:int = getChildIndex(DisplayObject(event.currentTarget));// assign index number to getClipIndex // find the correct movieClip correctMovieClipNumber = findCorrectMovieClip(event.currentTarget); movieClipArray[correctMovieClipNumber].visible = true;// makes movieClip visible when clicked } function findCorrectMovieClip(target:Object) { for (var i:int = 1; i < retailers + 1; i++) { if (retailArray[i] == target) { return (i); } } }
function retailMouseOver(event:MouseEvent):void { trace(event.target.name + " mouseOver");// output "button name clicked" trace(getChildIndex(DisplayObject(event.currentTarget)) + " mouseOver");// output "index number of button mouseOver" (should match the number on each button) }
function retailMouseOut(event:MouseEvent):void { trace(event.target.name + " mouseOut");// output "button name clicked" trace(getChildIndex(DisplayObject(event.currentTarget)) + " mouseOut");// output "index number of button mouseOut" (should match the number on each button) var getClipIndex:int = getChildIndex(DisplayObject(event.currentTarget));// assign index number to getClipIndex // find the correct movieClip correctMovieClipNumber = findCorrectMovieClip(event.currentTarget); movieClipArray[correctMovieClipNumber].visible = false; }
loadArrays();
Here a function (findCorrectMovieClip) finds the button number in the array, and uses that to reference the corresponding movieclip in the movieClip array.