Question

How could I do:

To attach a movieclip (e.g. ‘footsteps’), along a path (other movieclip).

That would be within a interval for attaching one movieclip at a time.

I would need rotation, i.e, the footsteps, should rotate according with the path direction.

Thanks.

Answer 1

1. Create an array of coordinates – this is your path. There are a number of ways you can approach actually creating the array, but the result should look similar to this:

var path:Array = [
    Point(0, 0),
    Point(20, 12),
    Point(60, 72),
    Point(67, 118)
];

2. Set up your nextStep() function or similar – this will gather information about the next step in the path such as the angle between it and your current step. You will also need to keep track of your current step, which can be represented by simply storing the index of where you’re at in the path array. Altogether, it may look like this:

var currentStep:int = 0;

function nextStep():Object
{
    // Object to return.
    var out:Object = {
        hasDestination: false,
        destination: null,
        radians: 0
    };


    var current:Point = path[currentStep];

    // Check that you're not on the last step first.
    if(currentStep != path.length - 1)
    {
        currentStep ++;

        var next:Point = path[currentStep + 1];
        var t:Point = next.subtract(current);

        out.nextDestination = true;
        out.destination = next;
        out.radians = Math.atan2(t.y, t.x);
    }

    return out;
}

3. Use the above information to move – the object returned from nextStep() can be used to alter the position and rotation of a DisplayObject of your choice.

Assuming that entity is your DisplayObject:

var stepInfo:Object = nextStep();

if(stepInfo.hasDestination)
{
    entity.rotation = stepInfo.radians * 180 / Math.PI;
    entity.x = stepInfo.destination.x;
    entity.y = stepInfo.destination.y;
}
else trace("End of path reached.");

4. Tidy up (optional) – Consider creating your own class to be the result of nextStep() for tidyness, example:

public class StepInfo
{
    public var hasDestination:Boolean = false;
    public var destination:Point;
    public var radians:Number = 0;
}

I’d even suggest moving all of the above into a Path class so you can simply do stuff like:

var path:Path = new Path();
path.generate(); // create this yourself, generates the path array.

var step:StepInfo = path.nextStep();

trace(path.currentStep);

etc

Hope this helps.