Create and use a Button class on AS3.0

Question

I am currently working on a game and it is all going well. On the shop screen there are several buttons that affect the player's stats for when the player restarts the game.

The button's names (with a text on the left), however, are rather cryptic and it's hard to figure out what they do unless you test or something.

So the solution I came up with, is to create an InfoBox with an InfoText inside so that when the cursor is over the button it appears with the description, cost and etc.

This I managed to do too however, the way I was about to do it would mean that I had to create 3 event listeners per button (CLICK, ROLL_OVER, ROLL_OUT) and, obviously, 3 functions connected to each event listener.

Now, I don't mind much about having 1 event listener per button, for the click, but since the other events are just to make a box appear and disappear as well as display some text, I thought it was way too much of a mess of code.

What I tried to do: I created a new class called InfoBoxButton, and this is the class' code: package {

import flash.display.SimpleButton;
import flash.display.MovieClip;
import flash.ui.Mouse;
import flash.events.MouseEvent;

public class InfoBoxButton extends SimpleButton
{
    public var description:String;
    public var infoBox:InfoBox;

    public function InfoBoxButton(description)
    {
        this.addEventListener( MouseEvent.ROLL_OVER, displayInfoText, false, 0, true);
        this.addEventListener( MouseEvent.ROLL_OUT, hideInfoText, false, 0, true);
    }

    private function displayInfoText()
    {
        infoBox.infoText.text = description;
        infoBox.visible = true;
    }

    private function hideInfoText()
    {
        infoBox.infoText.text = "";
        infoBox.visible = false;
    }
}

}

But now I don't have an idea how to associate it with the button, I have tried this: public var SoonButton:InfoBoxButton = new InfoBoxButton("This is merely a test");

The SoonButton is a button I made on the shopscreen, SoonButton is it's instance name, but I can't think of a way of associating one button to the other... I have been fiddling with the code for like 3 hours yesterday and no luck... can anyone give me some pointers on how I should go about doing it?

--EDIT--

I tried to trace the SoonButton after it is created like this: public var SoonButton:InfoBoxButton = new InfoBoxButton("This is merely a test");

    trace(SoonButton, "whut?");

and I got an error saying: 1120: Access of undefined property SoonButton.

if I separeted the first line a bit to: public var SoonButton:InfoBoxButton; SoonButton = new InfoBoxButton("This is merely a test");

    trace(SoonButton, "whut?");

I would get the same error but two times, for each SoonButton... so clearly it must be the InfoBoxButton that isn't being created... what am I missing?

Answer 1

You have to make an instance of the InfoBox in your code:

 public function InfoBoxButton(description) {
    this.infobox = new InfoBox();
    this.addChild(this.infoBox);
    this.infoBox.visible = false;
    infoBox.infoText.text = description;
    // add some formatting here - x,y postions etc.

    this.soonButton.addEventListener( MouseEvent.ROLL_OVER, displayInfoText, false, 0, true);
    this.soonButton.addEventListener( MouseEvent.ROLL_OUT, hideInfoText, false, 0, true);
 }

 private function displayInfoText() {
    infoBox.visible = true;
 }

 private function hideInfoText() {
    infoBox.visible = false;
 }