Multi-touch Recorder/Player

Question

I have an ArrayCollection that contains x and y values for the path of an object.( a "recording" of each step in the path generated by touchpoints during touchMove of an object). In short, I need a multi-touch recorder/playback.  I have the "recording" working and saving to the database.  Now, I need to animate the playback.  I want the user to be able to hit a play button and see all the objects animate along their previously recorded paths.
How do I do this?  Do I use motionpath/keyframes?  If so, how do I generate the motionpath and keyframes dynamically from the ArrayCollection?
The only examples I see about keyframes/motionpath are static hardcoded keyframes in mxml.  In my case, there can be many keyframes along the path and the number will vary.  And the number of objects in the ArrayCollection will vary as well.  (users touches screen with 4 fingers at same time and moves them).  My initial thought is looping through the ArrayCollection, create the keyframes, then play the animation.  But I don't know how to write the AS3 and there may be a better way?
Any recommendations?
Thanks,
Don
Don Kerr
Manager, Space City Adobe User Group
http://www.spacecityaug.com

Answer 1

With help from Claudia and Chet, I think I'm getting close.  But, I get this error
Error: Property x is not a property or a style on object X105292: TypeError: Error #1006: value is not a function..at spark.effects.supportClasses::AnimateInstance/setupStyleMapEntry()[E:\dev\hero_private_be ta\frameworks\projects\spark\src\spark\effects\supportClasses\AnimateInstance.as:1097]
when running this animatePlay function.  I've verified that my target does have a x property. All of the target Xs and Os are on the screen in the correct locations with the correct x,y initial locations.  I'm guessing it has something to do with the looping, but I don't know what is causing this error?
In the code below touchTargetsDP is an ArrayCollection that stores the saved targets (all the Xs and Os on the screen before the play starts). I loop through each target to populate the keyframes for each target in the inner loop. The keyframes for each target are stored in touchPathDP. All the keyframes and motion paths appear to be populating just fine, but when the the animation starts to play, I get the error.
In theory, there should be instances of motionpaths/keyframes for each target, and each instance of animate should play for each target until all the Xs and Os targets move to their final x,y location.
This is using Hero in Flex Mobile project.
Anyone see anything in this code that might cause the error?  It is really hard to debug since the error is inside the spark AnimateInstance.as.
Thanks,
Don
private function animatePlay():void {
//setup motionpath for each X or O target element on screen
for(var t:int;t < touchTargetsDP.length;t++){
var xmp:MotionPath = new MotionPath();
xmp.property = 'x';
xmp.keyframes = new Vector.<Keyframe>;
var ymp:MotionPath = new MotionPath();
ymp.property = 'y';
ymp.keyframes = new Vector.<Keyframe>;
//temp test time value counter
var timeCounter:Number = 0;
//add keyframes assigned to current target element only
for(var i:int;i < touchPathDP.length;i++){
if(touchPathDP[i].touchTargetID == touchTargetsDP[t].touchTargetID){
timeCounter = timeCounter + 1;
var xk:Keyframe = new Keyframe();
xk.time = timeCounter;
xk.value = touchPathDP[i].x;
xmp.keyframes.push(xk);
var yk:Keyframe = new Keyframe();
yk.time = timeCounter;
yk.value = touchPathDP[i].y;
ymp.keyframes.push(yk);
//play animation for each target element
var a:Animate = new Animate();
a.target = touchTargetsDP[t].touchTargetID;
a.motionPaths = new Vector.<MotionPath>;
a.motionPaths.push(xmp);
a.motionPaths.push(ymp);
a.play();
//finished animating the movement of all Xs and Os in the play