5 Replies Latest reply on Dec 14, 2010 3:20 PM by Don Kerr

    Multi-touch Recorder/Player

    Don Kerr Level 3

      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?







      Don Kerr

      Manager, Space City Adobe User Group


        • 1. Re: Multi-touch Recorder/Player
          Claudiu Ursica Level 4

          If you want to use keyframes, here is the as code the creates and uses them, you

          need to have time ,x, y not sure how you get them but once you have them you can

          use something like this:

                      private var _animator:Animate;


                      _animator = new Animate();

                      _animator.motionPaths = new Vector.();


                      var num:Number = yourKeyframesCollectio.length;

                      var i:uint;


                      //not sure how and where you store the time but you can iterate

          through the collection and push the time x and y



                      for (i = 0; i < num; i++)


                          get time  i

                          get x and y and push into keyframes

                          var xKeyframe:Keyframe = new Keyframe(time, x);


                          var yKeyframe:Keyframe = new Keyframe(time, y);








          • 2. Re: Multi-touch Recorder/Player
            Don Kerr Level 3

            Thank you Claudia! this helps a lot. I appreciate it.


            Chet suggested also storing the time of the touchEvents and using that to get the time for keyframes.  He said it would give a more natural replay.  So, I think I'll try that approach.



            • 3. Re: Multi-touch Recorder/Player
              Don Kerr Level 3

              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.







              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;




              var yk:Keyframe = new Keyframe();

              yk.time = timeCounter;

              yk.value = touchPathDP[i].y;






              //play animation for each target element


              var a:Animate = new Animate();

              a.target = touchTargetsDP[t].touchTargetID;

              a.motionPaths = new Vector.<MotionPath>;







              //finished animating the movement of all Xs and Os in the play



              • 4. Re: Multi-touch Recorder/Player
                Chet Haase Level 3

                This error always comes from the inability of the system to find a named property (in this case, "x") on the

                target object of an animation. You set the target here:


                a.target = touchTargetsDP[t].touchTargetID;


                I can't tell what these objects are, but it seems that you're simply setting the target to an ID (touchTargetID), and not to one of your actual X/O objects. Animations don't work with IDs, but with references to the objects themselves.



                1 person found this helpful
                • 5. Re: Multi-touch Recorder/Player
                  Don Kerr Level 3

                  Thank you so much Chet!


                  switching from id to object worked!



                  I appreciate you coming over from Android to help me out!  You are missed and will be missed for a very long time!