Question

I created some button states in flash (swc), and I want to use them in a pure AS3 project. They are movie clips with class of neatButton_on and neatButton_off respectively. I call them like this:

public class neatButton extends neatModule
    {
        private var stateOn:neatButton_on;
        private var stateOff:neatButton_off;
        private var modContainer:Sprite = new Sprite();

        public function neatButton() 
        {
            addChild(modContainer);
            modContainer.x = 200;
            modContainer.y = 200;
            stateOff = new neatButton_off();
            stateOn = new neatButton_on();
            modContainer.addChild(stateOn);
            modContainer.addChild(stateOff);

            modContainer.addEventListener(MouseEvent.MOUSE_OVER, hover);
            modContainer.addEventListener(MouseEvent.MOUSE_OUT, unhover);
        }

        private function hover(e:MouseEvent):void
    {
        stateOff.visible = false;
    }

    private function unhover(e:MouseEvent):void
    {
        stateOff.visible = true;
    }
    }

My question is, is this the best way to do this? I’ve also used assets, especially for different states of the same item, where I’ve put everything in one movie clip and then switched frames as needed. Is one way faster than the other? is there a best practice?

Answer 1

I’ll share a simple class I use for creating two state image buttons. I use Tweenlite to effect a alpha tween on rollover.

    package com.b99.display.composite
    {
        import flash.display.*;
        import flash.events.MouseEvent;

        import com.greensock.*;

        /**
         * ...
         * @author Bosworth99
         */
        public class ImgButton extends Sprite
        {
            private var _canvas         :Sprite = new Sprite();
            private var _up             :Sprite;
            private var _over           :Sprite;
            private var _hit            :Shape;

            private var _intent         :String;

            public function ImgButton(intent:String) 
            {
                _intent = intent;

                super();
                init();     
            }

            private function init():void
            {
                constructButton();
                addEventHandlers();
            }

            private function constructButton():void
            {

                this.addChild(_canvas);

                switch (_intent) 
                {
                    case "button1":
                    {
                        _up     = new yourUpClip1()
                        _over   = new yourOverClip1();
                        break;
                    }
                    case "button2":
                    {
                        _up     = new yourUpClip2()
                        _over   = new yourOverClip2();
                        break;
                    }
                    case "button3":
                    {
                        _up     = new yourUpClip3()
                        _over   = new yourOverClip3();
                        break;
                    }
                }

                _canvas.addChild(_up);

                with (_over) 
                {
                    alpha   = 0;
                }
                _canvas.addChild(_over);

                _hit = new Shape();
                with (_hit) 
                {
                    graphics.beginFill(0x00FF40, 0);
                    graphics.drawRect(0, 0, _up.width + 5, _up.height +5);
                    graphics.endFill();
                    x       = -5;
                    y       = -5;
                }
                _canvas.addChild(_hit)

                _up.cacheAsBitmap       = true;
                _over.cacheAsBitmap     = true;
                _hit.cacheAsBitmap      = true;

                this.buttonMode         = true;
                this.mouseEnabled       = true;

            }

            private function addEventHandlers():void
            {
                _hit.addEventListener(MouseEvent.MOUSE_OVER,    over, false, 0, true);
                _hit.addEventListener(MouseEvent.MOUSE_OUT,     out, false, 0, true);
            }

            private function over(e:MouseEvent):void 
            {
                TweenLite.to(_over, .2,     {alpha:1   } );
            }
            private function out(e:MouseEvent):void 
            {
                TweenLite.to(_over, .2,     {alpha:0   } );
            }

            public function destroy():void
            {
                _hit.removeEventListener(MouseEvent.MOUSE_OVER, over);
                _hit.removeEventListener(MouseEvent.MOUSE_OUT,  out);

                _canvas.removeChild(_up);
                _up = null;         

                _canvas.removeChild(_over);
                _over = null;       

                _canvas.removeChild(_hit);
                _hit = null;

                this.removeChild(_canvas)
                _canvas = null;

                this.parent.removeChild(this);
            }
    //+++++++++++++++++++++++++++++++  end ++++++++++++++++++++++++++++++++++++++++
        }

    }

You just need to send in a string that gets fed into a switch statement. This class can be used for multiples cases this way. And then to kill, simply call _imgButton.destroy() in the parent.

This class is essentially similar to yours, just with some added functionality 😉

cheers