How would I give the buttons in this image gallery a rollover effect, as well as assign each of them individual labels?

Question

So I am trying to make these "Buttons" in my image gallery have some sort of rollover effect (text change color) , also instead of saying "Linus0", "Linus1", "Linus2", I would like to assign each one its own label. Am I able to do this with an array? Also - what am I doing wrong thats making it think there are six images total? There are only 5, and I only need 5 buttons. Thanks in advance! Here is my code so far:

var myPics:Array = new Array ("image0", "image1", "image2", "image3", "image4");

var totalItems: int = myPics.length;



function createLabels () : void {
for (var i:int=0; i<=totalItems; i++){
    var btn_label:TextField = new TextField ();
    this.addChild (btn_label);
    btn_label.name = "image"+i;

    var format:TextFormat = new TextFormat ();
    format.font = "Verdana";
    format.color = 0x000000;
    format.size = 12;


    btn_label.defaultTextFormat = format;

    btn_label.x = 55;
    btn_label.y = 50+ (i*20);

    btn_label.text = "Linus"+i;
}
};

function makeMenu ():void {
for (var i:int=0; i<=totalItems; i++) {
    var myBtn:button = new button;
    this.addChild (myBtn);
    myBtn.name = "image"+i;


    myBtn.x = 55;
    myBtn.y = 50+ (i*20);
    myBtn.addEventListener(MouseEvent.CLICK, btnPress);
    myBtn.addEventListener(MouseEvent.CLICK, btnPress);
trace(i);

    }
};

    createLabels ();
    makeMenu ();

    var myFrame: frame = new frame;
    this.addChild (myFrame);
    myFrame.name = "frame";
    myFrame.x = 200;
    myFrame.y = 70;

    var myLoader:Loader = new Loader ();

    function btnPress (event:MouseEvent):void{
        this.enabled = true;
        myLoader.load (new URLRequest("images/"+event.target.name+".jpg"));
        addChild(myLoader);
        myLoader.x = 201;
        myLoader.y = 71;
    };

score 2 · Answer 1 · answered Sep 14 '09 at 08:09

the reason you are getting 6 instead of 5 is that you are use <= rather than <. Because 'i' starts at 0 this means the loop counts 6 times.

As for a rollover effect if you only want to change the text color then this should do:

btn_label.addEventListener(MouseEvent.MOUSE_OVER, labelOver);


function labelOver(e:MouseEvent):void
{
    e.target.defaultTextFormat.color = 0xFF0000;
    e.target.defaultTextFormat = format;
    btn_label.addEventListener(MouseEvent.MOUSE_OUT, labelOut);
}

function labelOut(e:MouseEvent):void
{
    e.target.defaultTextFormat.color = 0x000000;
    e.target.defaultTextFormat = format;
    btn_label.removeEventListener(MouseEvent.MOUSE_OUT, labelOut);
}

score 0 · Answer 2 · answered Feb 02 '10 at 11:00

+1 what oliver said

as for this

also instead of saying "Linus0", "Linus1", "Linus2", I would like to assign each one its own label. Am I able to do this with an array?

yes you can define an array of strings containing valid names and then populate your button labels with that.

How would I give the buttons in this image gallery a rollover effect, as well as assign each of them individual labels?

2 Answers2