AS3 Architecture : How to tween a single instance of an object on multiple calls?

Question

I am new to actionscript and am having a trouble displaying a single instance of an object, using FlashDevelop.

I have a main.as in which I am displaying an image as background. Then I display a rectangle containing some text that tweens as the mouse hovers a target (appearing/disappearing on the stage). The rectangle is in a class TextBox.as .

I know my code is quite messy because it creates a new instance of the rectangle everytime I reach the target (calling the tween). But if I try to switch it around it gives me errors. Also I cannot seem to remove my rectangle (with removeChild()) once it is created, it cannot find the child.

Could anyone indicate me what is the architecture I should use so that only one instance of the rectangle is created?

Here's a bit of my code:

//IMPORT LIBRARIES
import Classes.TextBox;
import flash.display.Bitmap;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import com.greensock.TweenLite;

// Setup SWF Render Settings
[SWF(width = "620", height = "650")]

public class Main extends Sprite 
{
    //DEFINING VARIABLES
    [Embed(source="../lib/myimage.jpg")]
    private var picture:Class;
    private var myTween:TweenLite;

    //CONSTRUCTOR 
    public function Main():void 
    {   
        addChild(new TextBox);
        addChild(new picture);
        addEventListener(MouseEvent.MOUSE_OVER, appear);
    }

    //ROLLDOWN FUNCTION
    public function appear(e:MouseEvent):void 
    {
        trace("Appear");
        var text:TextBox = new TextBox();
        addChild(text);
        addChild(new picture);

        if (picture) {
            removeEventListener(MouseEvent.MOUSE_OVER, appear);
            //addEventListener(Event.COMPLETE, appearComplete);
            myTween = new TweenLite(text, 1, { y:340 , onComplete:appearComplete, onReverseComplete:disappearComplete} );
        }
    }

Thanks in advance.

Answer 1

i dont know what tweening you want to achieve but you should reuse your textbox instance, e.g.:

import Classes.TextBox;
import com.greensock.TweenLite;
import flash.display.Bitmap;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;

[SWF(width = "620", height = "650")]
public class Main extends Sprite {

    [Embed(source="../lib/myimage.jpg")]
    private var pictureClass:Class;

    private var picture:Bitmap;
    private var textbox:TextBox;

    public function Main():void {
        if (stage)
            init();
        else
            addEventListener(Event.ADDED_TO_STAGE, init);
    }

    private function init(e:Event = null):void {
        removeEventListener(Event.ADDED_TO_STAGE, init);

        picture = new pictureClass();
        textbox = new TextBox();

        addChild(picture);
        addChild(textbox);

        addEventListener(MouseEvent.MOUSE_OVER, tween);
    }

    public function tween(e:MouseEvent):void {
        removeEventListener(MouseEvent.MOUSE_OVER, tween);
        TweenLite.to(textbox, 1, { y:340, onComplete:reverse } );
    }

    private function reverse():void {
        TweenLite.to(textbox, 1, { y:0, onComplete:tweenComplete } );
    }

    private function tweenComplete():void {
        addEventListener(MouseEvent.MOUSE_OVER, tween);
    }
}