Need an object to fade out in AS3

[AngryGamerProductions]

So, i have a game, where there is a spawned square, and the goal is to click it, when you click it, it changes locations, as well as colors and sizes. What I want to happen is this: I want my square to fade out instead of just dissapearing and changing locations when clicked. To do this, im assuming that I need to have another identical square on top of it, that fades while the other square changes locations, but I cannot figure out how to have two identical squares, do two seperate things, since I am using AS files, and my timeline and stage are blank, as well as my actions.

Here is my code for the square and everything that it does(Square.as) :

package 
{
    import flash.geom.ColorTransform;
    import flash.display.MovieClip;
    public class Square extends MovieClip
    {
        var score:Number = 0;
        public var square_x:Number;
        public var square_y:Number;
        public var square_height:Number = 0;
        public function Square()
        {
            height = Math.round(Math.random() * 160 + 50);
            width = height;
            square_height = height;
            square_x = Math.round(Math.random() * 385 + (width / 2));
            square_y = Math.round(Math.random() * 700 + (height / 2));
            x = square_x;
            y = square_y;
            trace("X:" + x, "Y:" + y, "Height and Width:" + height);
        }
        public function changeParameters():void
        {
         var myColor:ColorTransform = transform.colorTransform;
        var colorNumber:Number
        colorNumber =  Math.round(Math.random() * 15);
        trace(colorNumber)
        if(colorNumber == 1) { myColor.color = 0xCEEB5A;}
        if(colorNumber == 2) { myColor.color = 0xF38612;}
        if(colorNumber == 3) { myColor.color = 0x31A915;}
        if(colorNumber == 4) { myColor.color = 0x590FE3;}
        if(colorNumber == 5) { myColor.color = 0x741004;}
        if(colorNumber == 6) { myColor.color = 0x458AD9;}
        if(colorNumber == 7) { myColor.color = 0xC28460;}
        if(colorNumber == 8) { myColor.color = 0x880AAA;}
        if(colorNumber == 9) { myColor.color = 0xEFED70;}
        if(colorNumber == 10) { myColor.color = 0x49BDB8;}
        if(colorNumber == 11) { myColor.color = 0x71E02A;}
        if(colorNumber == 12) { myColor.color = 0x543BD3;}
        if(colorNumber == 13) { myColor.color = 0xEA26F2;}
        if(colorNumber == 14) { myColor.color = 0x723A4D;}
        if(colorNumber == 15) { myColor.color = 0x207D1A;}
        transform.colorTransform = myColor; 
            trace("Object Clicked");
            height = Math.round(Math.random() * 160 + 50);
            width = height;
            square_x = Math.round(Math.random() * 385 + (width / 2));
            square_y = Math.round(Math.random() * 655 + (height / 2));
            if (square_x + (width/2) > 480)
            {
                edgeCorrect();
                square_x = square_x - 25;
            }
            if (square_y + (height/2) >750)
            {
                edgeCorrect();
                square_y = square_y - 25;
            }
            if (square_x + (width/2) > 480)
            {
                edgeCorrect();
                square_x = square_x - 25;
            }
            if (square_y + (height/2) >750)
            {
                edgeCorrect();
                square_y = square_y - 25;
            }
            x = square_x;
            y = square_y;
            score = score + 1;
            trace(score);
        }
        public function edgeCorrect():void
        {
            if (square_x + (width/2) > 480)
            {
                square_x = square_x - 10;
            }
            if (square_y + (height/2) >750)
            {
                square_y = square_y - 10;
            }
            if (x + (width/2) > 480)
            {
                x = x - 10;
            }
            if (y + (height/2) >750)
            {
                y = y - 10;
            }
        }
    }
};

Im guessing that I would have it fade out in the changeParameters, because that is what is triggered when the square is clicked. Remember, I want to have it fade out, while there is still another square that changes places, so that the user does not have to wait for it to finish fading before they can click the next square.

In case this is of any importance, here is my document class Game.as:

package 
{
    import flash.events.MouseEvent;
    import flash.display.MovieClip;
    import flash.utils.Timer;
    import flash.events.TimerEvent;
    import flashx.textLayout.formats.BackgroundColor;
    public class Game extends MovieClip
    {
        public var myTimer:Timer = new Timer(5);
        public var square:Square;
        public var square2:Square;
        public var background:Background;
        public function Game()
        {
            background = new Background();
            square = new Square();
            square2 = new Square();
            addChild ( background )
            addChild ( square )
            addChild ( square )
            square.addEventListener(MouseEvent.CLICK, fl_click);
            square2.addEventListener(MouseEvent.CLICK, fl_click);
            myTimer.addEventListener(TimerEvent.TIMER, timerListener);
            myTimer.start();
        }
        private function timerListener(e:TimerEvent):void
        {
            square.edgeCorrect();
        }
        private function fl_click(event:MouseEvent):void
        {
            square.changeParameters();
        }
    }
}

[Ned Murphy]

If you need to create another square then just declare a new instance of it and place it wherever it needs to go.

To fade a square you can use the built-in Tween class or get one of the better thrid-party tweening classes like Tweenlite.

[AngryGamerProductions]

Yes, but if both of the squares use the same Square.as file, they will both have random colors, locations, and sizes, how would I make them both have the same values?

[Ned Murphy]

Create a function within the class that clones an existing square rather than creating it randomly.  You could make it so that you pass the existing square as an argument when creating the class, and if it see the square being passed in it clones it, if it doesn't it creates one in its current random fashion.  Try thinking it thru.

[Andrei1-bKoviI]

First of all, it is not easy to help you because it looks like the code you show has a lot of overkills and redundancies. It seems that the classes below accomplish the same functionality with less verbose code. Check it our and see if my assumptions are correct.

As for fading, do you want fading to occur at the same time square jumps?

package
{
          import flash.display.MovieClip;
          public class Game extends MovieClip
          {
                    private var background:Background;
                    private var numSquares:int = 3;
                    public function Game()
                    {
                              background = new Background();
                              drawSquares();
                              addChild(background)
                    }
                    private function drawSquares():void
                    {
                              while (numSquares--)
                              {
                                        var square:Square = new Square();
                                        addChild(square);
                              }
                    }
          }
}

package
{
          import flash.display.MovieClip;
          import flash.events.Event;
          import flash.events.MouseEvent;
          import flash.geom.ColorTransform;
          import flash.geom.Rectangle;
          public class Square extends MovieClip
          {
                    private var score:Number = 0;
                    private var colors:Array = [0xCEEB5A, 0xF38612, 0x31A915, 0x590FE3, 0x741004, 0x458AD9, 0xC28460, 0x880AAA, 0xEFED70, 0x49BDB8, 0x71E02A, 0x543BD3, 0xEA26F2, 0x723A4D, 0x207D1A];
                    public function Square()
                    {
                              if (stage)
                                        init();
                              else
                                        addEventListener(Event.ADDED_TO_STAGE, init);
                    }
                    private function init(e:Event = null):void
                    {
                              randomiseDimensions();
                              addEventListener(MouseEvent.CLICK, onClick);
                    }
                    private function onClick(e:MouseEvent):void
                    {
                              changeParameters();
                    }
                    private function randomiseDimensions():void
                    {
                              height = width = int(Math.random() * 160 + 50);
                              // place to 0 to define bounds
                              x = y = 0;
                              // get bounds
                              var bounds:Rectangle = this.getBounds(parent);
                              // place within visible area
                              x = Math.random() * (stage.stageWidth - bounds.width) - bounds.x;
                              y = Math.random() * (stage.stageHeight - bounds.height) - bounds.y;
                              trace("X:", x, "Y:", y, "Height and Width:", height, this.getBounds(parent));
                    }
                    public function changeParameters():void
                    {
                              trace("Object Clicked");
                              var myColor:ColorTransform = transform.colorTransform;
                              myColor.color = colors[int(Math.random() * colors.length)];
                              transform.colorTransform = myColor;
                              randomiseDimensions();
                              score = score + 1;
                              trace(score);
                    }
          }
}