Question

working on (as the title states) a menu with dynamically loaded options with mouse overs.

The chain of events as I see it (this could be flawed) is:

•Use loop to place one empty MovieClip for each entry in the XML file, down a number of pixels each time. We will call these ‘entries’.

•Inside each entry add a textField (text from XML), draw a rectangle with alpha=0 (to be the highlight on mouseover), and add another movieclip from the library.

•Add mouseover & mouseout eventListeners to each ‘entry’ which set the invisible rectangle to alpha=1, and change the color of the text and movieclip from library.

Following is the function that initiates all of this. *edit: Fixed more really dumb stuff.

//Load List Options
function loadHighlight():void
{
    var yTmp:Number = 0; 
    for (var i:Number = 0; i < photo_total; i++)
    {
        var Highlight:MovieClip = new MovieClip();
        photoHighlights[i] = Highlight;
        photoHighlights[i].addEventListener(MouseEvent.MOUSE_OVER, highlightOvr);

        //Draw Invisible Rectangle
        var rectngle:Shape = new Shape();
        rectngles[i] = rectngle;
        rectngles[i].graphics.beginFill (0x0DAC54);
        rectngles[i].graphics.drawRect(0, 0, 1170, 144);
        rectngles[i].graphics.endFill();
        rectngles[i].alpha = 0;
        rectngles[i].y=yTmp;
        rectngles[i].x= 0;
        photoHighlights[i].addChildAt(rectngles[i], 0);


        //Load photosArray
        var photoname = photo_data[i].@TEXT;;
        var photolist:TextField = new TextField();
        photosArray[i] = photolist;
        photosArray[i].textColor = 0x0DAC54;
        photosArray[i].x = 26.95;
        photosArray[i].y = 92.65;
        photosArray[i].embedFonts = true;
        photosArray[i].antiAliasType = AntiAliasType.ADVANCED;
        photosArray[i].defaultTextFormat = listformat;
        photosArray[i].selectable = false;
        photosArray[i].wordWrap = true;
        photosArray[i].text = photoname;
        photosArray[i].autoSize = TextFieldAutoSize.LEFT;
        photosArray[i].mouseEnabled = false;
        photoHighlights[i].addChildAt(photosArray[i], 1);


        //Load thumbFrames
        var thumbFrame:thmbFrame = new thmbFrame();
        thumbFrame.x= 962;
        thumbFrame.y= 21;
        photoHighlights[i].addChildAt(thumbFrame, 1);
        thmbFrames.push(thmbFrame);

        MediaPage.photoSelect.photoList.addChild(photoHighlights[i]);
        yTmp = yTmp + 153;
    }
}

function  highlightOvr(event:MouseEvent):void
{
    event.target.rectngles.alpha=1;             
    event.target.photosArray.textColor = 0x000000;
    event.target.thmbFrames.color = 0x000000;
    event.target.addEventListener(MouseEvent.MOUSE_OUT, highlightOut);  
}

function  highlightOut(event:MouseEvent):void
{
    event.target.rectngles.alpha = 0;
    event.target.photosArray.textColor = 0x0DAC54;
    event.target.thmbFrames.color = 0x0DAC54;
    event.target.removeEventListener(MouseEvent.MOUSE_OUT, highlightOut);
}

The issue now has become one of referring back to the children of the placed movieClips. I know this isn’t right:

event.target.rectngles.alpha = 0;

I just don’t know what is. How do I refer to the generated movieClips and their children?

I know there is a simple way to do this, but I don’t know what it is.

Also, it seems the way I’m doing this is a bit convoluted according to ShaunHusain’s response. Any links to clearly worded resources explaining more efficient ways of accomplishing this are much appreciated.

Thanks Once Again,
-T.

EDIT: Fixed some incredibly stupid stuff I did.

Answer 1

The very simple answer I was looking for was the use of the getChildAt command. So instead of:

function  highlightOvr(event:MouseEvent):void
{
    event.target.rectngles.alpha=1;             
    event.target.photosArray.textColor = 0x000000;
    event.target.thmbFrames.color = 0x000000;
    event.target.addEventListener(MouseEvent.MOUSE_OUT, highlightOut);  
}

It should be:

function  highlightOvr(event:MouseEvent):void
{
    event.target.getChildAt(0).alpha=1;             
    event.target.getChildAt(1).textColor = 0x000000;
    event.target.getChildAt(2).color = 0x000000;
    event.target.addEventListener(MouseEvent.MOUSE_OUT, highlightOut);  
}

I might add that the .color command was being used incorrectly. I was trying to apply it to a movie clip, when instead I needed to create a new ColorTransform variable with my desired color, and apply it like so:

var MyColorTransform:ColorTransform = new ColorTransform();
MyColorTransform.color = 0x000000;

event.target.getChildAt(2).transform.colorTransform = MyColorTransform;