26 Replies Latest reply on Jun 26, 2006 1:17 PM by spinz2112

    Two simultaneous movie clip motions

    spinz2112 Level 1
      I figured out how to "record" the path of a single movieclip being dragged by the mouse, and then to play it back. Here is what I do:
      I have an array of 3 objects, the mc instance name (actually for just moving one mc i dont even need this...but i might for the actual problem stated), the x co-ord and the y co-ords. using setinterval i store the location of the mc instance in an onClick->startdrag function.
      to play back, i have a function that iterates through the array, picks up the mc instance name and the co-ords and then just "plays" back.

      im trying to figure out what the best way to create an instance where i would have two mc's being moved simultaneously.
      how would the user "drag" these mc's (considering you can only drag one clip at a time)? i would probably record the motion using the array, but how would i let my play function figure out that this is a simulataneous motion (how to store this in the array) and then eventually how to play it back.

      anyone have any suggestions?
        • 1. Re: Two simultaneous movie clip motions
          2m Level 2
          Why don't you just "group" the two clips into one partent clip, and move the parent clip on press of clip one, then the siblin will move with it?
          • 2. Re: Two simultaneous movie clip motions
            Level 7
            spinz2112,

            > im trying to figure out what the best way to create
            > an instance where i would have two mc's being
            > moved simultaneously.

            I would use an event that occurs frequently, such as
            MovieClip.onEnterFrame or MovieClip.onMouseMove, and assign a function to
            the event for the dragged instance that updates the MovieClip._x and
            MovieClip._y properties of the other clip.

            > how would the user "drag" these mc's (considering
            > you can only drag one clip at a time)? i would probably
            > record the motion using the array

            There's really no reason to record anything, unless you wanted to "play
            back" the motion later. If you want simultaneous movement, simply update
            the second clip's _x and _y properties according to an offset of the first
            clip's position.

            clipA.onEnterFrame = function() {
            clipB._x = this._x + offsetX;
            clipB._y = this._y + offsetY;
            }

            ... where offsetX and offsetY are variables that represent the distance
            originally between the two clips, for _x and _y.

            Does that make sense?


            David
            stiller (at) quip (dot) net
            Dev essays: http://www.quip.net/blog/
            "Luck is the residue of good design."


            • 3. Re: Two simultaneous movie clip motions
              spinz2112 Level 1
              ahh...alas..only after viewing some responses did i forget to mention one key important fact. when i meant simultaneously moving two movie clips...i did mean moving two movie clips...but not necessarily in the same pattern or direction. i am trying to figure out what hte best method would be to move one clip in a (eg. curved) path and the other in a completely different path and "record" this motion for play back. i can move drag them seperately ...im more concerned that when i play it back, they play simulataneously. hence trying to figure out also, what the best way to store this in the array would be...as mentioned first.
              • 4. Re: Two simultaneous movie clip motions
                2m Level 2
                I still don't fully get it:

                Is it you record a move with clip1 (dragging it),
                afterwards you record the movement (dragging) of clip2

                then you glick a button and make both clips move their recorded way starting a once?
                • 5. Re: Two simultaneous movie clip motions
                  Level 7
                  > I still don't fully get it:

                  Yeah, I'm kind of lost, too.

                  > Is it you record a move with clip1 (dragging it),
                  > afterwards you record the movement (dragging) of clip2

                  That's also my guess.

                  > then you glick a button and make both clips move their
                  > recorded way starting a once?

                  That's how I see this goal. And if that's it, the OP already has it
                  solved. I say that, because he/she already knows how to record and playback
                  movement for a single clip. Well, for two (or three, or four, etc.) just
                  update the _x and _y properties for each clip in turn. Just base location
                  of each property in relation to the first clip's _x and _y.


                  David
                  stiller (at) quip (dot) net
                  Dev essays: http://www.quip.net/blog/
                  "Luck is the residue of good design."


                  • 6. Re: Two simultaneous movie clip motions
                    spinz2112 Level 1
                    well..essentially yes. i have two questions rolled up here, il be more concise:
                    (1) exactly waht you stated above, two clips...dragged to different directions, independant of each other. Im trying to figure out what the best way to store this information...currently i have an array of 3 objects, the mc instance name, and the x, y co-ords.
                    i use an interval function on the onclick->start drag, and onrelease->stop drag, with an interval of 30. so basically i get a series of co-ords.
                    since these are just increments at time, the array consists of chronological x,y coords. i need to have some mechanism that says that these clips are being dragged simultaneously...they could be dragged individually too. i was thinking of a flag in the array..but this gets confusing. thoughts?

                    (2) once i have a method of dragging them, i really want to play the motion back simulataneously..if they were actually supposed to be simultaneous motions (cause they could be individual movements as well). i will loop through the array and geting the x and y co-ords. but this plays them one mc after the other.

                    any suggestions?

                    • 7. Re: Two simultaneous movie clip motions
                      2m Level 2
                      It really seems your very very close to what you want. Actually I'm having a hard time guessing where you are stuck - it just seems you have it all figuered out.

                      If you have a fla available, I'll happily look into it, and maybe ich can point you in the right direction.
                      • 8. Re: Two simultaneous movie clip motions
                        spinz2112 Level 1
                        last attempt to explain the situation...for you 2m and anyone else who reads this.
                        imagine i have a movie clip of a 'dog' and a 'stick'. now imagine the 'dog' and 'stick' moving to some point on the stage.

                        now im trying to assign the path of the stick and the dog by dragging them.

                        currently i can drag the dog first, and then the stick (or vice versa) record the coords of the path and then replay them back.

                        im trying to figure out what the best way to assign the path of the dog and stick using the mouse and then play them back simultaneously.

                        its not always going to be simultaneous tho, there could be a time where i just drag the dog, or just the stick. (i have this part figured) need to add a mechanism of assigning simulataneous motion. maybe a combination of 'spacebar' and drag which triggers a flag in the array. not even sure how to do keyclick and mouse motion combos tho.

                        hope this helps.
                        • 9. Re: Two simultaneous movie clip motions
                          2m Level 2
                          You really get me going, I can hardly refrain from starting a new fla and start coding.

                          BUT: Though I do understand your dog stick thing iI'm not sure about the rest. If I was to use the appliction, what would I have to do.
                          Drag to record.
                          Click the dog to replay it's motion?
                          Click a bone to replay all recorded simulations at once?

                          It's easy to play two recorded animations simultanious if I want, but what do you want and when?

                          I'm sure a lot of people here could do the coding, but only if the understand the task.

                          Indeed a lot of times it is the hardest part of making an application is definig what it should do when - in a undisputable way.
                          • 10. Re: Two simultaneous movie clip motions
                            Level 7
                            > I'm sure a lot of people here could do the coding, but
                            > only if the understand the task.
                            >
                            > Indeed a lot of times it is the hardest part of making an
                            > application is definig what it should do when - in a
                            > undisputable way.

                            Agreed. spinz2112, you should take up 2m on the offer of looking at
                            your FLA. I do that, too, from time to time, but at the moment I'm in the
                            middle of some intense business management. (I'm in the process of going
                            full time freelance, woo hoo!) I'm afraid I have somewhat fallen off the
                            face of the earth, so to speak, and will probably be off in the cosmos for
                            another week or so.


                            David
                            stiller (at) quip (dot) net
                            Dev essays: http://www.quip.net/blog/
                            "Luck is the residue of good design."


                            • 11. Re: Two simultaneous movie clip motions
                              spinz2112 Level 1
                              ok all..so i couldnt figure out how to attach an fla, so i just added the code. to get it to work, just create two movie clips and call them offense1 and offense2 and another little mc called playButton.

                              here is the as for the record and play.
                              ************
                              var recInterval:Number;
                              var playInterval:Number;
                              var motionArray:Array = new Array();

                              offense1.onPress = function():Void {
                              this.startDrag(true);
                              recInterval=setInterval(recordMotion, 45, offense1);
                              }

                              offense1.onRelease = function():Void {
                              this.stopDrag();
                              clearInterval(recInterval);
                              }


                              offense2.onPress = function():Void {
                              this.startDrag(true);
                              recInterval=setInterval(recordMotion, 45, offense2);
                              }

                              offense2.onRelease = function():Void {
                              this.stopDrag();
                              clearInterval(recInterval);
                              }


                              playButton.onRelease = function():Void {
                              playInterval=setInterval(playMotion,45);
                              }


                              function recordMotion(mcOffense:MovieClip):Void {
                              motionArray.push({mcObject:mcOffense._name, x:mcOffense._x, y:mcOffense._y});

                              updateAfterEvent();
                              }

                              function playMotion():Void{
                              var mcPlay:MovieClip;
                              mcPlay=_root[motionArray[0].mcObject];
                              mcPlay._x=motionArray[0].x;
                              mcPlay._y=motionArray[0].y;

                              motionArray.splice(0,1);
                              if (motionArray.length==0){ clearInterval(playInterval);
                              }
                              }

                              ******

                              ok... reinstating the problem:
                              so im trying to figure out what the best way to record / playback a simultaneous motion of off1 and off2. as yet i havent come up with anything solid.
                              obviously, only one mc is dragable at a time, so i need to figure out how to let the array know that there is something else that needs to happen with the record/playback of this mc is going on.

                              any suggestions now?

                              • 12. Re: Two simultaneous movie clip motions
                                2m Level 2
                                I have two mice and a tablet connected to my computer, but still i only have one pointer, so even if I ask my wife for hael, I could not imagin how to drag do different clips in to way's at the same time.

                                Only thing I could think of is mofing one clip via the keyboard (arrows), while dragging the other - provided that I am a coornation genius or have help.

                                Is that what we are talking about, or am I totaly off the track?
                                • 13. Re: Two simultaneous movie clip motions
                                  spinz2112 Level 1
                                  haha thanks for the humor! no, you are kindof off track.

                                  well..my situation is that im trying to figure out what the best way to do this using the only one mouse pointer that we have. i think i have come up with some sort of viable situation, coding it is gonna be tricky. let me know if anyone can think of an easier way to do this.

                                  currently i only have one array that records the motions of the mc's chronologically. this is fine for cases where i am assigning paths to each mc seperately.
                                  as for the advanced problem of playing back the motions, and also cases where there is two mc's to be dragged, how about somethign like this:::?

                                  i have an array of 3 dimensions for each mc. a sequence dimension, an x co-ord and a y co-ord. apart from this i am going to have another array which stores the sequences, this will have dimension relative to the number of mc's there are..in this case 2.

                                  there should be somethink on the stage that the user can increase (or decrease...maybe later on when i have the increase figured out) a counter which is going to be a sequence counter.

                                  so sequence 0: move mc1 to the left ..in the seq array (0,0)=mc1 (0,1) is going to be empty (no simulataneous motion of mc2. once the seq array is done and while mc1 is dragged, mc1 array gets updated with teh sequence #(0) and the coords.

                                  then the user increases sequence counter to 1... move mc1 to the right and mc2 down simultaneously so the first thing the user does is drag mc1 to the right ..seq array gets updated with (1,0)=mc1 mc1 array gets updated with the sequence #(1) and hte coords then the user drags mc2 down ..seq array gets updated with (1,1)=mc2 mc2 array gets updated with the sequence #(1) and the coords.

                                  user increase sequence counter to 2...sequence 2: move mc1 up ..in the seq array (2,0)=mc1 (2,1) is going to be empty (no simulataneous motion of mc2. once the seq array is done and while mc1 is dragged, mc1 array gets updated with teh sequence #(2) and the coords.


                                  playback:
                                  get the sequence order from the sequence array and get the matching seq# and coords from the mc name array.


                                  theoretically this seems to work.
                                  i may still have one more glitch....during a simultaneous playback say i have the coords for the mc1 movement in mc1 array and the mc2 coords in the mc2 array....how do i play them back simulataneously??


                                  does the above make sense to anyone?

                                  • 15. Re: Two simultaneous movie clip motions
                                    Level 7
                                    spinz2112,

                                    > anyone?
                                    >

                                    I'm sorry, man ... honestly, I feel confused, too. I'm honestly not
                                    sure where you're stuck. Early in this thread, you said you already had a
                                    solution for recording and playing back the motion of a single movie clip.
                                    To me, that's the hardest part of this whole project.

                                    Pick a movie clip to be the "main" clip and use the current technique to
                                    record and play back its motion. Any other clips will "piggy-back" off the
                                    main one. When you're dragging the main clip, you're either recording or
                                    you aren't. If you are, store your array of objects; if not, don't. In
                                    either case, another clip is either piggy-backing or it isn't. If it is,
                                    adjust that clip's MovieClip._x and MovieClip._y properites at the same time
                                    as the adjust those properties of the main clip (don't use
                                    MovieClip.startDrag(), but rather, update the clip's _x and _y onMouseMove,
                                    for example).

                                    You only ever have to record the position of a single clip. The motion
                                    of any other clip(s) is/are based on the main clip's motion plus an offset,
                                    noted beforehand.


                                    David
                                    stiller (at) quip (dot) net
                                    Dev essays: http://www.quip.net/blog/
                                    "Luck is the residue of good design."


                                    • 16. Re: Two simultaneous movie clip motions
                                      Level 7
                                      spinz2112,

                                      Okay, here's something I whipped together. I'm hoping a picture is
                                      worth a thousand words, here. Assuming a brand new FLA and two movie
                                      clips -- one with the instance name mcSquare and one with the instance name
                                      mcCircle -- the following ActionScript moves *both* when mcSquare is dragged
                                      and plays back *both* when mcSquare is released.

                                      If you'd like a line by line explanation, let me know.

                                      var clipMotion:Array = new Array();
                                      var clipOffsetX:Number = mcCircle._x - mcSquare._x;
                                      var clipOffsetY:Number = mcCircle._y - mcSquare._y;
                                      mcSquare.onPress = function() {
                                      this.onMouseMove = drag;
                                      };
                                      mcSquare.onRelease = function() {
                                      this.onMouseMove = null;
                                      playback();
                                      };
                                      function drag() {
                                      this._x = _root._xmouse;
                                      this._y = _root._ymouse;
                                      mcCircle._x = this._x + clipOffsetX;
                                      mcCircle._y = this._y + clipOffsetY;
                                      clipMotion.push({x:this._x, y:this._y});
                                      }
                                      function playback() {
                                      var counter = 0;
                                      var id = setInterval(function () {
                                      mcSquare._x = clipMotion[counter].x;
                                      mcSquare._y = clipMotion[counter].y;
                                      mcCircle._x = clipMotion[counter].x + clipOffsetX;
                                      mcCircle._y = clipMotion[counter].y + clipOffsetY;
                                      counter++;
                                      if (counter == clipMotion.length) clearInterval(id);
                                      }, 40);
                                      }


                                      David
                                      stiller (at) quip (dot) net
                                      Dev essays: http://www.quip.net/blog/
                                      "Luck is the residue of good design."


                                      • 17. Re: Two simultaneous movie clip motions
                                        spinz2112 Level 1
                                        Hey David,
                                        im sorry for not explaining this better. ive been trying to find the words to explain the situation. the offset idea will NOT work because im not expecting both MC's to be moving in the same path...so dragging one mc and using an offset relative to its path will not work for the situation i have in mind.

                                        what im trying to accomplish is a mechanism with which i can define (one at a time) a path of an mc that is completely independent of a path of another mc.

                                        That means, there are two mc's. The situation is that they both need to "play" at the same time (aka simulataneously). So the first step was to define the path of one mc and then define the path of the other mc (both are completely independent to each other..and not offset relative to each other).

                                        Heres what im trying to do on the stage: have some mechanism which says these two mc's need to be played back simulataneously. Drag one mc around the stage to define its path, store the path in an array. Then, I drag the second mc around a completely different path and store its path in an array. Now i have two completely independent paths defined in an array (or maybe two different arrays). When I click a play button, the two mc's move in the pre defined path at the same time.

                                        • 18. Re: Two simultaneous movie clip motions
                                          Level 7
                                          spinz2112,

                                          > what im trying to accomplish is a mechanism with which
                                          > i can define (one at a time) a path of an mc that is
                                          > completely independent of a path of another mc.

                                          Aha. Yes, that does change things considerably.

                                          > Heres what im trying to do on the stage: have some
                                          > mechanism which says these two mc's need to be played
                                          > back simulataneously. Drag one mc around the stage to
                                          > define its path, store the path in an array.

                                          I'm with ya.

                                          > Then, I drag the second mc around a completely different
                                          > path and store its path in an array.

                                          Okay.

                                          > Now i have two completely independent paths defined in
                                          > an array (or maybe two different arrays).

                                          Two arrays may be easier, for sure. You could even store each of these
                                          arrays in an array.

                                          > When I click a play button, the two mc's move in the pre
                                          > defined path at the same time.

                                          Shouldn't this be a matter of using your current mechanism for each
                                          array? When it's time to play back, use setInterval() to step through your
                                          array(ies) with a single increment variable. -- Or use
                                          MovieClip.onEnterFrame; whichever suits you better.

                                          Of course if the recording for one clip lasts longer than for the
                                          other -- very likely, if the recording is determinded by human dragging --
                                          you'll have to build in some logic to handle what occurs when one array's
                                          index goes out of range.

                                          But unless I'm still misunderstanding you, it should be practically as
                                          easy to update the coordinates of two movie clips as it is one.


                                          David
                                          stiller (at) quip (dot) net
                                          Dev essays: http://www.quip.net/blog/
                                          "Luck is the residue of good design."


                                          • 19. Re: Two simultaneous movie clip motions
                                            2m Level 2
                                            spinz2112,

                                            actually I thought that that was what you wanted some time ago, but then when I asked you said it wasn’t that way – maybe my explanation was as understandable as yours.

                                            I fear that David might have solved the puzzle for you while I was making a little example.

                                            It has 3 clips on the stage:
                                            dog_mc
                                            bone_mc
                                            and play_mc

                                            and the code goes:

                                            function recordMovement(clip:MovieClip):Void{
                                            clip.onEnterFrame = function():Void{
                                            var pos = new Object();
                                            pos.x = this._x;
                                            pos.y = this._y;
                                            this.movement_array.push(pos);
                                            }
                                            };
                                            function rePlay():Void{
                                            frameCount = 0;
                                            longerAni = Math.max(dog_mc.movement_array.length, bone_mc.movement_array.length);
                                            this.onEnterFrame = function():Void{
                                            dog_mc._y = dog_mc.movement_array[frameCount].y;
                                            dog_mc._x = dog_mc.movement_array[frameCount].x;
                                            bone_mc._y = bone_mc.movement_array[frameCount].y;
                                            bone_mc._x = bone_mc.movement_array[frameCount].x;
                                            frameCount++
                                            if (frameCount > longerAni){
                                            delete this.onEnterFrame;
                                            }
                                            }
                                            }
                                            dog_mc.onPress = function():Void{
                                            this.movement_array = new Array();
                                            this._parent.recordMovement(this);
                                            startDrag(this, false);
                                            }
                                            dog_mc.onRelease = function():Void{
                                            delete this.onEnterFrame;
                                            stopDrag();
                                            }
                                            bone_mc.onPress = function():Void{
                                            this.movement_array = new Array();
                                            this._parent.recordMovement(this);
                                            startDrag(this, false);
                                            }
                                            bone_mc.onRelease = function():Void{
                                            delete this.onEnterFrame;
                                            stopDrag();
                                            }
                                            play_mc.onRelease = rePlay;



                                            You could make it more flexible, but I tried to keep a balance between short and understandable.

                                            You can download it form http://www.markus-mathieu.de/files/dogAndBone.fla


                                            PS: To be honest I din't deal with the problem of length difference other tha relying on flash silently failing, when trying to read from am array index that is absent. I feel a little bit guilty, but it can be done easily
                                            • 20. Re: Two simultaneous movie clip motions
                                              spinz2112 Level 1
                                              2m,
                                              this was exactly what i was trying to accomplish...to a certain extent. the simultaneous motion is just fine, but the seqeuencing is where the problem is.

                                              im trying to figure out a mechanism with which you can have each segment of motion be tracked....the reason that i am triyng to do this is because my motions of the dog and bone does not always have to be simultaneous. imagine a situation where the dog has to piss and poop first, so hes gonna run around the stage, find a nice spot, do the deed.
                                              and then, someone throws the bone, the dog may or may not decide to fetch the bone at the same time that bone is thrown. he can run while the bone is thrown, or after the bone has finished landing on the ground.

                                              sorry about the humor above, haha. im glad that you find this problem intriguing tho! you have me going back to my actionscript bible to figure out some of the as code and all that, but thats ok...more stuff to learn the better.
                                              thanks!
                                              • 21. Re: Two simultaneous movie clip motions
                                                2m Level 2
                                                so how dou you to instruct your dog to take a leak, or dou you want a randomly controled "bladder" object ;-)

                                                Click on the object that has to pause?
                                                • 22. Re: Two simultaneous movie clip motions
                                                  spinz2112 Level 1
                                                  well...i was thinking more along the lines of having an array called "Sequence" and at the bottom of the screen have a sequence counter. sequence 1...just move the dog to take a leak. seq 2...move the bone, and the dog (this is the simulataneous motion)...and so on. if there are multiple motions in a seqeunce, then assume simulatneous.

                                                  this was teh only way i could "tell" if the motion was simulataneous or not, and also have a sequence of events.

                                                  i dont want to have any randomness involved in this, just what the user drags.
                                                  • 23. Re: Two simultaneous movie clip motions
                                                    2m Level 2
                                                    The randomness was ment jokingly.

                                                    The solution would be to ad a new "movement array" each time you drag, and make check-lists which movements to play on which clip.
                                                    • 24. Re: Two simultaneous movie clip motions
                                                      spinz2112 Level 1
                                                      2m,
                                                      its been a while since i posted back regarding this...but ive been having difficulty to control the timing on your earlier example. do you have any possible solution to have them play to the same time length?

                                                      also..you mentioned have a movement array with checklists to figure out the simultaneous and individual motions...how would i model such an array?? i thought of having a sequence array and storing the movieclip names..but didnt really go far with that. any thoughts?
                                                      • 25. Re: Two simultaneous movie clip motions
                                                        2m Level 2
                                                        You again!

                                                        ;-)

                                                        Nice to hear from you again.
                                                        The solution to your first question would be to determin the lenght of the longer motion array, mulitping it with the framerate, and then you would have the duration of movment one. Dividing that duration through the lenght of the second array and plaing it not with on enter frame but with setInterval you should get quite an exact timing.

                                                        Regarding your second question: I would put all movementst of a clip into an array of arrays (multidimensional array) and provide a method of choosing the movement that should be played before playing it. Of course I think that you would want to play the moves not from the point where they where recorded at but from the point where "dog" or "bone" are at any given moment.
                                                        • 26. Re: Two simultaneous movie clip motions
                                                          spinz2112 Level 1
                                                          2m,
                                                          nice to hear from you again...too!!

                                                          man, that second part is killing me. heres what i thought of doing,
                                                          having an array called sequence...and then in that have a 2d array, the user is going to manipulate each 'stage' of the movement. for example, from initial sequence 0, the user stores the starting points. then when he 'forwards' the sequence he can manipulate what happens in this scene, does the bone move alone..or does the dog move alone...or do they move together. so start (0,1) dog (0,1) bone....and then if the dog and bone move (1,1)=dog and (1,2)=bone, in the next seq if only bone moves(2,1)=bone..and so on. easy enough to do...pretty complicated to code.
                                                          im getting confused as to how to get both the names, and play and also, keep loosing my coords for each dog and bone motion...they keep starting from the first stop, and not from the last point.
                                                          i tried for a couple of weeks, hoped i can figure it myself, but had to come back here!

                                                          thanks for the help!