[RESOLVED] Tween via Array?

[Bryguy]

Hi there;

I'm working on a for-fun project where I have a bunch of letters, in a row, that are jumbled. What is supposed to happen is that if you press one of the letters, then press another, and it is supposed to tween the two of them to the others position. For some reason though, the tween doesn't seem to be working (Since there are about 12 or 13 letters, I was planning on temporarily placing the two to be tweened into an array, and then tween them via the array)

Here is my code

import flash.events.MouseEvent
import flash.geom.Point
import com.greensock.TweenLite;
import com.greensock.easing.*;

var tempPoint:Point = new Point(0,0);
var movePoint:Point = new Point(0,0);
var queue:Array = new Array;
var i:int = 1

hint_mc.visible = false;


trace(tempPoint);

hint.addEventListener(MouseEvent.MOUSE_UP, giveHint)

function giveHint(me:MouseEvent):void{
    switch(hint_mc.visible){
    case(false):
        hint_mc.visible = true;
        break;
    case(true):
        hint_mc.visible = false;
        break;
    }
}

a_text.addEventListener(MouseEvent.MOUSE_UP, switchA)
h_text.addEventListener(MouseEvent.MOUSE_UP, switchH)

function switchA(me:MouseEvent):void{
    if(tempPoint.x == 0 && tempPoint.y == 0){
        tempPoint.x = a_text.x 
        tempPoint.y = a_text.y
        queue[0] = a_text
        trace(tempPoint);
    }else if(movePoint.x == 0 && movePoint.y == 0){
        movePoint.x = a_text.x
        movePoint.y = a_text.y
        queue[1] = a_text
        trace(movePoint)
        i = 0
    }else{
        return;
    }    
                
}

function switchH(me:MouseEvent):void{
    if(tempPoint.x == 0 && tempPoint.y == 0){
        tempPoint.x = h_text.x 
        tempPoint.y = h_text.y
        queue[0] = h_text 
        trace("The temporary point is " + tempPoint);
    }else if(movePoint.x == 0 && movePoint.y == 0){
        movePoint.x = h_text.x
        movePoint.y = h_text.y
        queue[1] = h_text
        trace("The movement point is " + movePoint)
        i = 0;
    }else{
        return;
    }    
                
}



while(i < 1){
    TweenLite.to(queue[0], 1, {x:movePoint.x, y:movePoint.y,  ease:Linear.easeNone, delay:0, overwrite:false});
    TweenLite.to(queue[1], 1, {x:tempPoint.x, y:tempPoint.y,  ease:Linear.easeNone, delay:0, overwrite:false});
    tempPoint.x = 0
    tempPoint.y = 0
    trace("The tween should have worked. If it did not, then there is something fatally wrong with your coding. Eat a taco and then try again.")
    movePoint.x = 0;
    movePoint.y = 0;
    i++;
} 

[5TonsOfFlax]

Your while statement never executes because i starts at 1. I think you were trying to trigger the tweens by setting i to 0, but by the time that happens, the while has already been evaluated and won't get evaluated again. What you need to do is put the content of the while loop in a function, and call that function instead of setting i = 0.

Off the top of my head, I'd have a container sprite for the letters and give it a mouse click listener that catches the bubbled events from the contained letters. The listener should check whether there is already a "first" letter chosen. If there isn't, set the clicked letter as first. If there is, set the clicked letter as second, and call a swap method.
Swap will set up the tweens, then set first and second back to null.

var firstLetter:DisplayObject;
var secondLetter:DisplayObject;

letterContainer.addEventListener(MouseEvent.CLICK, checkLetters);

function checkLetters(e:MouseEvent):void{
  if (!(e.target instanceof TextField)){
    return;
  }
  if (firstLetter == null){
    firstLetter = e.target;
  }else{
    secondLetter = e.target;
    swap();
  }
}

function swap():void{
  TweenLite.to(firstLetter, 1, {x:secondLetter.x, y:secondLetter.y,  ease:Linear.easeNone, delay:0, overwrite:false});
  TweenLite.to(secondLetter, 1, {x:firstLetter.x, y:firstLetter.y,  ease:Linear.easeNone, delay:0, overwrite:false});
  firstLetter = null;
  secondLetter = null; 
}

[Bryguy]

I've never used DisplayObjects before, how exactly do these work?
Also, what exactly is a container sprite? I've attempted to google it, and the only thing I've found is Sprite, which I was unaware could be used as containers. Are you able to use Sprites to hold movie clips or textfields?

[5TonsOfFlax]

DisplayObject is a superclass of everything that can appear on stage. By using it, the code does not care whether the reference it is set to is a textfield or movieclip, or anything else on stage. But it does still have x and y properties.

By. "container sprite" I just mean a sprite with no appearance of its own that you add children to.

[Bryguy]

How exactly do I add children to the spite? I've attempted the following

var container:Sprite = new Sprite
var aLetter:A = new A();

container.addChild(aLetter);

aLetter.x = 96.95;
aLetter.y = 190.95;

But the letter then doesn't appear. The first attempt that I made to do this seemed to work fine, but now it won't work at all.

[5TonsOfFlax]

That's mostly correct. You just need to add the container to the displaylist as well.

var container:Sprite = new Sprite();
addChild(container);
var aLetter:A = new A();
container.addChild(aLetter);
aLetter.x = 96.95;
aLetter.y = 190.95

[Bryguy]

AH that'd make sense.
Thanks for your help

[Bryguy]

The firstLetter = e.target; and secondLetter = e.target; lines are giving me problems, mainly this error

1118: Implicit coercion of a value with static type Object to a possibly unrelated type flash.displayisplayObject.

Why might it be giving me this error?

[5TonsOfFlax]

Because the target property is of type Object, but the variables are of type DisplayObject, which is more specific. Since we know that they really are DisplayObjects, we can cast.

firstLetter = DisplayObject(e.target);

Do the same for secondLetter.

[Bryguy]

Thanks, that works now
But the tweens don't seem to... it will move them both a tad bit and then stop.
Looking at the code it looks like it should work, yet it doesn't... do you know why that might be? I've attempted adding a delay to the second tween, but that doesn't seem to help, and I'd need them both to tween at the same time anyway.

function swap():void{
    TweenLite.to(firstLetter,  1, {x:secondLetter.x, y:secondLetter.y,  ease:Linear.easeNone, delay:0, overwrite:false});
    TweenLite.to(secondLetter, 1, {x:firstLetter.x, y:firstLetter.y,  ease:Linear.easeNone, delay:0, overwrite:false});
    firstLetter  = null;
    secondLetter = null;
}

[5TonsOfFlax]

I don't know. I just built this as a test for the swap tweens. It seems to work.

package 
{
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.KeyboardEvent;
    import flash.events.MouseEvent;
    import gs.TweenLite;
    
    /**
     * ...
     * @author srs
     */
    public class Main extends Sprite 
    {
        private var green:Sprite;
        private var red:Sprite;
        
        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);
            // entry point
            green = makeCircle(0x00ff00);
            green.x = 10;
            green.y = 100;
            addChild(green);
            green.addEventListener(MouseEvent.MOUSE_DOWN, drag);
            green.addEventListener(MouseEvent.MOUSE_UP, undrag);
            red = makeCircle(0xff0000);
            red.x = 200;
            red.y = 100;
            addChild(red);
            red.addEventListener(MouseEvent.MOUSE_DOWN, drag);
            red.addEventListener(MouseEvent.MOUSE_UP, undrag);
            stage.addEventListener(KeyboardEvent.KEY_DOWN, swap);
        }
        
        private function swap(e:Event = null):void {
            TweenLite.to(green, 1, { x:red.x, y:red.y } );
            TweenLite.to(red, 1, { x:green.x, y:green.y } );
        }
        
        private function drag(e:Event):void {
            Sprite(e.currentTarget).startDrag();
        }
        
        private function undrag(e:Event):void {
            Sprite(e.currentTarget).stopDrag();
        }
        
        private function makeCircle(color:uint):Sprite {
            var s:Sprite = new Sprite();
            s.graphics.beginFill(color);
            s.graphics.drawCircle(0, 0, 10);
            s.graphics.endFill();
            return s;
        }
        
    }
    
}

[5TonsOfFlax]

And then to test whether it works with more than just two, I built this:

package 
{
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.KeyboardEvent;
    import flash.events.MouseEvent;
    import gs.TweenLite;
    
    /**
     * ...
     * @author srs
     */
    public class Main extends Sprite 
    {
        private var first:Sprite;
        private var second:Sprite;
        
        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);
            // entry point
            for (var i:int = 0; i < 10; i++) {
                var s:Sprite = makeCircle(uint(Math.random() * 0xffffff));
                s.x = Math.random() * stage.stageWidth;
                s.y = Math.random() * stage.stageHeight;
                addChild(s);
                s.addEventListener(MouseEvent.MOUSE_DOWN, drag);
                s.addEventListener(MouseEvent.MOUSE_UP, undrag);
            }
            stage.addEventListener(KeyboardEvent.KEY_DOWN, swap);
        }
        
        private function swap(e:Event = null):void {
            TweenLite.to(first, 1, { x:second.x, y:second.y } );
            TweenLite.to(second, 1, { x:first.x, y:first.y } );
            first = null;
            second = null;
        }
        
        private function drag(e:Event):void {
            Sprite(e.currentTarget).startDrag();
        }
        
        private function undrag(e:Event):void {
            var s:Sprite =  Sprite(e.currentTarget);
            s.stopDrag();
            if (first == null) {
                first = s;
            }else {
                second = s;
                swap();
            }
        }
        
        private function makeCircle(color:uint):Sprite {
            var s:Sprite = new Sprite();
            s.graphics.beginFill(color);
            s.graphics.drawCircle(0, 0, 10);
            s.graphics.endFill();
            return s;
        }
        
    }
    
}

[Bryguy]

I've been working on this all day and I still can't get the tween to work at all. The two letters will still just move a tad bit towards each other and then stop. Sometimes they'll move a bit towards each other (or in some cases away), but they don't ever switch spots, and I can't seem to figure out why.

[5TonsOfFlax]

Your code appears to be frame script. Is it perhaps re-executing the same frame script over and over? This might be the culprit. Put a trace at the top of the script to determine whether it's executing more than once.

[Bryguy]

Yeah, its in frame script mainly because I've had troubles with converting it to a package code.

Nope, only get one of the trace. The problem is definitely in the tween function, but I don't know what. From what I understand it should be working fine, but instead it isn't. If I replace firstLetter and secondLetter in the tween with just two of the instance names of the letters to be tweened, then it tweens them fine, but otherwise they'll just move a tad bit and stop. Could this be the problem?

Edit: Did some experimentation, and I think that the problem is occurring when I'm trying to tell it what to tween with TweenTo(firstLetter... and TweenTo(secondLetter... . I don't know why this is though, but it does seem to be the problem

[5TonsOfFlax]

I don't see how. Are you sure swap is only being called once? If it is called each frame then that might cause it to screw up since after the first frame those variables will be null.

[Bryguy]

THeres only 1 frame, so I don't think its that, and I also added a trace that increments by one each time the swap function is called, so its not continually running. The problem seems to be where I tell it that the object being tweened is firstLetter and secondLetter, as I found that if I replace these with the different instance names of two of the objects, then it works (Although keeping the coordinates to be tweened to as firstLetter.x/y and secondLetter.x/y moves them both off the screen towards the upper right corner, but at least that gives me movement)

[5TonsOfFlax]

I'm not sure what's wrong then. I'd suggest perhaps taking some of the code I posted above as a re-starting point.
Are you using the debug player? Are you getting any errors about null objects?

[Bryguy]

Ok I think I found the problem. It doesn't seem to be that the referencing what it is to be tweened thats the problem, but rather this part of the code

firstLetter = Display(e.target)

secondLetter = Display(e.target)

When I change it so that the instance name of two of the objects replace e.target in both (With only one instance name in each of course) then everything works like a charm. Is there any way which I could use something other than e.target?

[5TonsOfFlax]

That should have been DisplayObject, not Display.

You could add a listener to each letter instead of a single listener in the container. See my code above. In that case, you would use e.currentTarget.