Question

I have the following problem / bug:

I made a custom button-class (called CustomBlitButton) where a button is defined. The roll over-states of the button are defined inside of the class CustomScreen. That’s because a custom screen holds one or more buttons. I can create a button when using the createButton-function of the CustomScreen-class.

So if I want to make a screen with a menu, i.e. several buttons I do this like that (this is just an excerpt):

private var buttonOff:ButtonOff = new ButtonOff(0, 0);
private var buttonOver:ButtonOver = new ButtonOver(0, 0);

private var buttonOff2:ButtonOff = new ButtonOff(0, 0);
private var buttonOver2:ButtonOver = new ButtonOver(0, 0);

private var creditsButton:CustomBlitButton;
private var settingsButton:CustomBlitButton;


titleScreen = new CustomScreen(FrameWorkStates.STATE_SYSTEM_TITLE,     stageWidth, stageHeight, 0, 0, testPic,
                                           false, 0x000000);            

titleScreen.createButton(creditsButton, buttonOff, buttonOver, "Credits", new Point(centerX - 50, stageHeight / 2 + 25), 100, 20,
                                     screenButtonFormat, 2);

titleScreen.createButton(settingsButton, buttonOff2, buttonOver2, "Settings", new Point(centerX - 50, stageHeight / 2 + 50), 100, 20,
                                     screenButtonFormat, 2);

But it’s not working!:( On the screen appear several buttons and each of them has its own eventListener but only the last button I created changes its color when I move the mouse over it. All other buttons don’t change their colors when moving with the mouse over them.

Please, can someone help me out with this problem? Thank you very much.:)

This is the code where a custom screen with roll over-states of the custom button is defined.

package com.framework_mod.src
{
import flash.display.*;
import flash.events.*;
import flash.geom.Point;
import flash.text.*;



public class CustomScreen extends Sprite {

    private var displayText:TextField = new TextField();
    private var backgroundBitmapData:BitmapData;
    private var backgroundBitmap:Bitmap;
    private var okButton:SimpleBlitButton;
    private var custButton:CustomBlitButton;
    private var settingsButton:SimpleBlitButton;
    private var creditsButton:SimpleBlitButton;
    private var instructionsButton:SimpleBlitButton;
    private var highscoreButton:SimpleBlitButton;
    private var levelButton:SimpleBlitButton;
    private var testButton:CustomBlitButton;


    private var id:int;


    public function CustomScreen(id:int, width:Number, height:Number, xPos:int, yPos:int, image:BitmapData,
                                isTransparent:Boolean, color:uint) {
        this.id = id;

        backgroundBitmap = new Bitmap(image);
        this.x = xPos;
        this.y = yPos;
        addChild(backgroundBitmap);
    }



    public function createDisplayText(text:String, width:Number, location:Point, textFormat:TextFormat):void {
        displayText.y = location.y;
        displayText.x = location.x;
        displayText.width = width;
        displayText.defaultTextFormat = textFormat;
        displayText.text = text;
        displayText.selectable = false;
        displayText.mouseEnabled = true;
        displayText.embedFonts = true;
        displayText.blendMode = BlendMode.LAYER;
        displayText.alwaysShowSelection = false;
        addChild(displayText);
    }



    public function createButton(button:CustomBlitButton, btnOff:ButtonOff, btnOver:ButtonOver, text:String, location:Point, width:Number,
                                     height:Number, textFormat:TextFormat, positionOffset:Number = 0):void {

        custButton = button;

        custButton = new CustomBlitButton(btnOff, btnOver, location.x, location.y, width, height, text,
                                        textFormat, positionOffset);
        addChild(custButton);

        custButton.addEventListener(MouseEvent.MOUSE_OVER, buttonOverListener, false, 0, true);
        custButton.addEventListener(MouseEvent.MOUSE_OUT, buttonOffListener, false, 0, true);
        custButton.addEventListener(MouseEvent.CLICK, buttonClickListener, false, 0, true);


    }


    public function setDisplayText(text:String):void {
        displayText.text = text;
    }



    public function buttonClickListener(e:MouseEvent):void {
        dispatchEvent(new CustomEventButtonId(CustomEventButtonId.BUTTON_ID, id));
    }


    private function buttonOverListener(e:MouseEvent):void {
        custButton.changeBackGroundColor(CustomBlitButton.OVER);
    }


    private function buttonOffListener(e:MouseEvent):void {
        custButton.changeBackGroundColor(CustomBlitButton.OFF);
    }

}

}

This is the code where the button is defined:

package com.framework_mod.src
{
import flash.display.*;
import flash.text.*;


public class CustomBlitButton extends Sprite
{
    public static const OFF:int = 1;
    public static const OVER:int = 2;

    private var offBackGroundBD:BitmapData;
    private var overBackGroundBD:BitmapData;

    private var imageBg:BitmapData;

    private var positionOffset:Number;
    private var tempText:TextField = new TextField();

    private var buttonBackGroundBitmap:Bitmap;
    private var buttonTextBitmapData:BitmapData;
    private var buttonTextBitmap:Bitmap;

    public function CustomBlitButton(imageOff:BitmapData, imageOver:BitmapData, x:Number, y:Number, width:Number,
                                     height:Number, text:String, textformat:TextFormat, positionOffset:Number = 0)
    {
        this.positionOffset = positionOffset;
        this.x = x;
        this.y = y;


        offBackGroundBD = imageOff;
        overBackGroundBD = imageOver;

        buttonBackGroundBitmap = new Bitmap(offBackGroundBD);

        tempText.embedFonts = true;
        tempText.blendMode = BlendMode.LAYER;
        tempText.autoSize = TextFieldAutoSize.LEFT;
        tempText.defaultTextFormat = textformat;
        tempText.selectable = false;
        tempText.setTextFormat(textformat);
        tempText.text = text;

        buttonTextBitmapData = new BitmapData(tempText.textWidth + positionOffset, tempText.textHeight
                                              + positionOffset,true,0x00000000);

        buttonTextBitmapData.draw(tempText);
        buttonTextBitmap = new Bitmap(buttonTextBitmapData);
        buttonTextBitmap.x = ((buttonBackGroundBitmap.width - int(tempText.textWidth))/2)-positionOffset;
        buttonTextBitmap.y = ((buttonBackGroundBitmap.height - int(tempText.textHeight))/2)-positionOffset;

        addChild(buttonBackGroundBitmap);
        addChild(buttonTextBitmap);
        this.buttonMode = true;
        this.mouseChildren = false;
        this.useHandCursor = true;
    }

    public function changeBackGroundColor(typeval:int):void
    {
        if (typeval == CustomBlitButton.OFF)
        {
            buttonBackGroundBitmap.bitmapData = offBackGroundBD;
        }
        else
        {
            buttonBackGroundBitmap.bitmapData = overBackGroundBD;
        }
    }


}

}

Answer 1

your code is very messy, but want to point out some glitches i found that maybe will make your code work:

first, when you create your buttons in a single instance of CustomScreen, they are linked to the same variable: CustomScreen.custButton

then, custButton is the one who have the listeners, and not the reference of the linked buttons: creditsButton and settingsButton

so, everytime you create a button, you link custButton to other object, also linking the listeners, and the previous button become unlinked, and not listening for events

i recommend you to create a real Button class wich every button must derive from, this “mother” class, must to implement it’s own listeners and dispatch events for the mouse events you like…

this is what i do:

first, create a Button Interface if u want some order:

package buttons 
{
    import flash.events.MouseEvent;

    /**
     * ...
     * @author Joe Cabezas
     */
    public interface IButton 
    {
        function onClick(e:MouseEvent):void;
        function onRollOver(e:MouseEvent):void;
    }

}

then, create the Button Class wich every kind of Button must derive from:

package buttons 
{
    import flash.display.Sprite;
    import flash.events.MouseEvent;
    /**
     * ...
     * @author Joe Cabezas
     */
    public class Button extends Sprite implements IButton
    {

        public function Button() 
        {
            this.agregarListeners();
        }

        private function agregarListeners():void 
        {
            this.addEventListener(MouseEvent.CLICK, onClick);
            this.addEventListener(MouseEvent.ROLL_OVER, onRollOver);
        }

        /* INTERFACE botones.IButton */

        public function onClick(e:MouseEvent):void
        {

        }

        public function onRollOver(e:MouseEvent) :void
        {

        }

    }

}

Next, every time you want to create a button, just extend the Button Class above, and it will automatically have it’s own listeners already setup, see this example of a MenuButton extending the Button Class.

package buttons
{
    import com.as3joelib.generators.TextFieldGenerator;
    import flash.display.Sprite;
    import flash.text.TextField;
    import flash.text.TextFieldAutoSize;
    import flash.text.TextFormatAlign;
    /**
     * ...
     * @author Joe Cabezas
     */
    public class BotonMenuSuperior extends Button 
    {
        //constantes de diseño
        private const padding:Number = 10;

        private var fondo:Sprite;
        private var color:uint;

        private var text_string:String
        private var text_field:TextField;

        public function BotonMenuSuperior(text:String, color:uint) 
        {
            super();

            this.text_string = text;
            this.color = color;

            this.setup();
            this.dibujar();
        }

        private function setup():void 
        {
            //crear textfield
            this.text_field = TextFieldGenerator.crearTextField(this.text_string, {
                //border:true,
                size:15,
                embedfonts:false,
                color:0xffffff
            });
            this.text_field.x = this.padding*0.75;
            this.text_field.y = this.padding*0.75;

            //crear fondo
            this.fondo = new Sprite();

            this.fondo.graphics.beginFill(this.color);
            this.fondo.graphics.drawRect(0, 0, this.text_field.textWidth + 2*this.padding, this.text_field.textHeight + 2*this.padding);
            this.fondo.graphics.endFill();
        }

        private function dibujar():void 
        {
            this.addChild(this.fondo);
            this.addChild(this.text_field);
        }


        //overriding functions to create the custom behavior of this button when mouse events happens
        override public function onClick (e:MouseEvent):void{
            //do here whatever you like when user clicks this button, like:
            this.scaleX = this.scaleY = 1.5;
        }


    }

}

As you can see, this class have not defined/created it listeners because already have it, then you can create your custom events, of modufy the Button Class to bubble it’s events…

hope this helps you!

also, a tip, in your code:

public class CustomScreen extends Sprite {

    ...

    public function createButton(button:CustomBlitButton, btnOff:ButtonOff, btnOver:ButtonOver, text:String, location:Point, width:Number,
                                 height:Number, textFormat:TextFormat, positionOffset:Number = 0):void {

    custButton = button; //<-- this

    custButton = new CustomBlitButton(btnOff, btnOver, location.x, location.y, width, height, text,
                                    textFormat, positionOffset);
    addChild(custButton);

    ...
    }
}

how the first parameter will be usefull with that code?

it’s like:

public funcion(a:Number, b:number):Number{
    var xa:Number = a;

    xa = 2;

    return xa + b;
}

please, create interfaces, it will make your code more orderly

bye!

PD:i speak spanish, so, sorry if bad english