AS3 create a trail of movieclips following each other

Question

So, I'm trying to get a few movieclips to follow it's precursor and have the last one follow the mouse. The problem is I'm creating them from code instead of using the interface and, since I'm not an expert, I can't get them to work.

All I have in the library is a MovieClip(linkage:"LETRA") which contains a textField inside(instance name:"myTextField").

Here's what I have:

import flashx.textLayout.operations.MoveChildrenOperation;
import flash.display.MovieClip;
import flash.events.Event;

//this are the letters that will be following the mouse
var phrase:Array = ["H","a","c","e","r"," ","u","n"," ","p","u","e","n","t","e"];

//variable to spread them instead of creating them one of top of each other
var posXLetter:Number = 0;

//looping through my array
for (var i:Number = 0; i < phrase.length; i++)
{
    //create an instance of the LETRA movieclip which contains a text field inside
    var newLetter:MovieClip = new LETRA();

    //assing a letter to that text field matching the position of the phrase array
    newLetter.myTextField.text = phrase[i];

    //assign X position to the letter I'm going to add
    newLetter.x = posXLetter;

    //add properties for storing the letter position
    var distx:Number = 0;
    var disty:Number = 0;

    //add the listener and the function which will move each letter
    newLetter.addEventListener(Event.ENTER_FRAME, moveLetter);

    function moveLetter(e:Event){

        distx = newLetter.x - mouseX;
        disty = newLetter.y - mouseY;

        newLetter.x -= distx / 10;
        newLetter.y -= disty / 10;
    }

    //add each letter to the stage
    stage.addChild(newLetter);

    //increment the next letter's x position
    posXLetter +=  9;
}

With that code, only one letter is following the mouse (the "E") and the rest are staying where I added them using addChild and the posXLetter variable.

Also, I'm trying to get it to behave more like a trail, so if I move up, the letters will lag beneath me; if I move to the left, the letters will lag to my right but I think that with my current approach they will either A) move all together to the same spot or B) always hang to the left of the cursor.

Thanks for any possible help.

Answer 1

This is a kind of motion called Inverse Kinematics and it is a quite popular way to make rag dolls in games. It uses a design pattern called the Composite Pattern where one object adds another object as a child of its and then when it's update() function if called, it calls all of its (usually one) child's update() functions. The most common example of this is of a snake. The snake's head follows your mouse, and the rest of the snake's body pieces move with the snake, and it looks immensely realistic. This exact example is explained and build here although it does not include joint restrictions at all.

This example is in the middle of a book, and so may be hard to start reading, but if your somewhat familiar with design patterns and/or have some intermediate experience with programming, then i'm sure you can understand it. I advise that you, after reading and understanding the example, scratch what you have now because it is not very elegant coding. You may feel that this example uses too many classes, but trust me, its worth it as it allows you to very easily edit your code, if you decide to change it in the future, with no drawbacks.

Also, i know that this snake is not what you want, but if you understand the concept then you can apply it to your own specific needs.

I hope this helps.

Answer 2

I think it is a scoping issue. You might need to modify your handler

function moveLetter(e:Event){
    trace(e.target); //check if this is the right movie clip
    distx = e.target.x - mouseX;
    disty = e.target.y - mouseY;

    e.target.x -= distx / 10;
    e.target.y -= disty / 10;
}