MouseEvent and Arrays Question.

[jkmak]

Hello,

I am very new to ActionScript. I need help with this problem I am having regarding two Arrays. I have one application and two components. What I need is whenever there is a MouseOver event on a button, the Canvas will appear. Here is the code for my main application.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="comp.*"
creationComplete="createMenu()">

<mx:Script>
<![CDATA[
import comp.TargetCanvas;
import comp.MenuLButton;

var sampleArray:Array = ["one", "two", "three"];

private function createMenu():void {

for (var i:Number = 0; i < sampleArray.length; i++) {

var testLinkButton:MenuLButton = new MenuLButton();
var testTargetCanvas:TargetCanvas = new TargetCanvas();

testLinkButton.label = sampleArray[i].toString();
testLinkButton.x = 1.0;
testLinkButton.y = 25 + (19 * i);

testTargetCanvas.id = "canvas" + i.toString();
testTargetCanvas.x = 1.0;
testTargetCanvas.y = 25 + (19 * i);

testLinkButton.addEventListener(MouseEvent.MOUSE_O VER, showCanvas);
testLinkButton.addEventListener(MouseEvent.MOUSE_O UT, hideCanvas);

menu.addChild(testLinkButton);
targetCanvas.addChild(testTargetCanvas);

function hideCanvas(event:MouseEvent):void {
targetCanvas.getChildAt(0).visible=false;
}

function showCanvas(event:MouseEvent):void {
targetCanvas.getChildAt(0).visible=true;
}
}
}
]]>
</mx:Script>

<mx:Canvas id="menu"
width="100" height="200"
left="10" y="200"
backgroundColor="white">
</mx:Canvas>
<mx:Canvas
id="targetCanvas"
width="100"
height="200" left="110" x="1" y="200"
mouseEnabled="false"
backgroundColor="green"
>
</mx:Canvas>
</mx:Application>

Here are my two components:

<?xml version="1.0" encoding="utf-8"?>
<mx:LinkButton xmlns:mx="http://www.adobe.com/2006/mxml"
textRollOverColor="#ffffff"
mouseOver="moveImage()"
mouseOut="moveImageBack();"
textAlign="left"
>
<mx:Script>
<![CDATA[

import mx.controls.Alert;

public function moveImage():void {
moveLinkButton.end();
moveLinkButton.xTo=this.x.valueOf()+20.5;
moveLinkButton.play();
}

public function moveImageBack():void {
moveLinkButton.end();
moveLinkButton.xTo=this.x.valueOf()-20.5;
moveLinkButton.play();
}

]]>
</mx:Script>
<mx:Move id="moveLinkButton" target="{this}"/>
</mx:LinkButton>

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
width="50" height="20"
showEffect="{fadeIn}" hideEffect="{fadeOut}" backgroundColor="blue" visible="false"
>
<mx:Fade id="fadeOut" duration="500" alphaFrom="0.6" alphaTo="0.0" target="{this}"/>
<mx:Fade id="fadeIn" duration="500" alphaFrom="0.0" alphaTo="0.6" target="{this}"/>
</mx:Canvas>

What I want is whenever the mouse is over a button, the corresponding canvas fades in. However, I can't seem to make the work. Can someone help me out? I know I hardcoded the value 1 into the showCanvas() and hideCanvas() methods in order for this to work. I can't seem to get the correct i value into there.

Thanks,

John

[dr_zeus]

Try rollOver and rollOut instead. You might be having trouble with bubbling events from mouseOver and mouseOut.