15 Replies Latest reply on Sep 15, 2007 5:08 AM by Iron_Mike

    Mooving picture to differnt coordinates...

    Iron_Mike
      Hi,

      I have a problem here that I can't seem to figure out with my limited action script skills... ;)

      I have this picture which has the dimensions 5599x660 and it's kinda like a moving background, it's moving to the left.

      Now, when it reaches the end I want it to be replaced by the same pic...

      Stage size is 950x720.

      I came up with two possible options:

      1. make a duplicate of the pic movieclip and place it on stage right behind the first one and then when the first one is off stage place it right behind the second one and so on...

      2. have flash duplicate the pic automatically and place it right behind the original one (I read about that option somewhere I think it's called DuplicateMovieclip)

      Now I tried to go with option #1, here's the code:

      var xspeed:Number = 20;
      function moveLeft() {

      if (this._x < -5600) {
      this._x = 5598;
      }
      this._x -= xspeed;
      }


      img.onEnterFrame = moveLeft;
      img2.onEnterFrame = moveLeft;



      --> 'img2' is place right behind 'img' on stage

      So here's the problem:

      1. it works, but after the first round - it goes through image 1 (img) then through image 2 (img2) perfectly and then when it's supposed to place image 1 right behind image 2 there's a space of about 100 pixels between them... I don't know why because I gave the right x coordinates in the code...

      2. now when u still go on and u go through (the misplaced) image 1 (img) and then u come to the point where it's supposed to place image 2 (img2) right behind image 1 there's also a space between them but only maybe of 5 pixels...

      How come that with the same pictures with the same code for both of them it's doing something different both times ?

      Any help is greatly appreciated and I thank u in advance for that !!

      Regards,

      Mike
        • 1. Re: Mooving picture to differnt coordinates...
          clbeech Level 3
          Sounds like you have the right basic idea, but that's a really big image to be dealing with, let alone two of them. Flash has difficulty handling images of more than 2880 pixels, and it said throughout the docs that it may or may not work correctly and you may get 'unexpected' results.

          I would think you should consider this. Take the original image and break it into even sections, say 5 at 1120pixels each. make them into MCs and give them linkage identifiers, bg1_mc, bg2_mc ... and so on. Then what you would want to do is put the list of instance names into an array for accessing the each piece when needed in order, so now then:

          var bg:Array = ["bg1_mc", "bg2_mc", ...];

          Now, you would place the first image on the Stage or into a MC, and begin the movement function while tracking the position of the piece currently on Stage, when the first piece plus the width of the peice reaches the edge of the Stage, attach a new piece at that position from the next bg in the array, then move both pieces until the first piece reaches 0, then remove it. repeat the process with each piece, you will have to track two variables that are associated to the onStage peices. This way there will only ever be two at a time, and this should also speed up performance, additionally, when the last peice in the array is used return the index tracking variable to 0 and start the procedure over again.

          Here's a quick basic example: FLA FILE
          • 2. Re: Mooving picture to differnt coordinates...
            Iron_Mike Level 1
            @ clbeech

            Thank your for your reply.

            Code looks great and works in your example, it doesn't work in my file although I renamed the pics etc.

            I played around in your .fla file file as well and it stops working as well when u change the stage size for example to 900x700.

            I think that is because the stage is bigger than each single clip...

            How can we implement to tell flash where on stage to place the first clip (x / y values)

            Also, Is it possible to control which layer flash places the pics in ?

            Otherwise - as of right now - it places them always in the top layer which is no good for a background... ;)

            Thanx for your help !!!

            • 3. Re: Mooving picture to differnt coordinates...
              clbeech Level 3
              quote:

              Originally posted by: Iron_Mike
              @ clbeech

              Thank your for your reply.

              you're welcome, glad to help.

              quote:

              Code looks great and works in your example, it doesn't work in my file although I renamed the pics etc.

              I played around in your .fla file file as well and it stops working as well when u change the stage size for example to 900x700.

              I think that is because the stage is bigger than each single clip...

              this is exactly the case, correct.

              quote:

              How can we implement to tell flash where on stage to place the first clip (x / y values)

              it will depend on the size of your clips and the Stage. although the first clip should be at _x=0, _y=something depending on how you want it set. _y will always remain the same in your system, so once you position it (and it could be a negative a value, above the stage) it will not be changed and all other clips should be set to this position. I don't have _y positions being passed in the code example, because it run ons x=0,y=0. IF your Stage is the hieght of the clip set _y to 0.

              quote:

              Also, Is it possible to control which layer flash places the pics in ?

              yes, we use the clips 'depth' as a control for this. in the code example each time a movie is attached it is set to the depth of 'index' which was just convenient for me here becuase it is increamented with each attachment and mirrors the array index at the time. you can also use 'swapDepths()' to control the layering, but by using the index in the array you ensure that no clip is attached to the same level, which would replace any clip currently at that depth.

              quote:

              Otherwise - as of right now - it places them always in the top layer which is no good for a background... ;)

              ah yes, all other elements are drawn to the Stage, hmmm ... let me think about that a bit, this is how the depth stack is constructed by Flash for items placed on the Stage starting from the lowest depth of -16383 and up from there, hmmm... might need place holders at the deepest depths, not sure I'll post back.

              • 4. Re: Mooving picture to differnt coordinates...
                Iron_Mike Level 1
                Hi everybody,

                so I managed to come up with a code that kinda works, at least it reproduces the image perfectly...

                code: #

                function moveLeft() {
                var xspeed:Number = 15;
                img._x -= xspeed;
                if (img._x < 0) {
                //create a loop statement to control the duplication
                for(var i:Number = 0; i<100; i++){
                //duplicate the movie clip
                var ref:MovieClip = img.duplicateMovieClip("img"+i+"_mc",i);
                //x coordinate of duplicated movieclips
                ref._x += img._width*i;
                }
                for (h = i-1; h < i; h++)
                {
                removeMovieClip ("img"+h+"_mc");
                } // end of for

                }
                }

                img.onEnterFrame = moveLeft;

                #
                Still have some questions though:

                1. How can I assign that the duplicated movieclips are on the same level as the original movieclip they got duplicated from ?

                My image is a background, therefore on the lowest layer and unfortunately the first duplicate already is on the highest level covering everything else...

                2. Until right now I was only able to come up with that 'for' function - which is working - but probably not the best solution performance wise because it generates 100 duplicates.

                How can I assign that only one duplicate is produced at a time (endlessly) ?

                3. I implemented the 'removeMovieclip' function. Is there any way I can control if this is actually doing what I want it to do (removing the movieclips that are off stage and not needed anymore) ??

                In the Flash player, I looked under 'Debug' --> List objects but I guess it does not show removed objects....

                As always thanx for your help & advise in advance...

                Mike
                • 5. Re: Mooving picture to differnt coordinates...
                  clbeech Level 3
                  OK mike, your getting there, trying different things is a good way to learn. But yes you don't want to produce 100 movieclips, and then remove them, which is knid of what's happening with your code there. also this will happen on the very first move and all moves thereafter, because img._x will become less than 0 right away. Did you split up the bg into multiple pieces?

                  to your questions:

                  1) This is acutally the solution to the bg problem that I had mentioned previously. First, create a 'blank' mc that is in the bg position on the Stage, then you'll attach the bg images to the mc at that position (depth). you won't move the 'container' you'll still move the images but within that mc. And actually the controling code could be within that mc. I'll construct an example of this.

                  2) yes need to ace this method, sorry. You only want to attach the next clip needed at the time. and then remove a clip once it leave the stage to the left.

                  3) yes it can be controled but you need to apply it to a particular mc, this is one of the reasons for placeing the clips into an array, and also the reason I use a two holder 'tile' method in the example, this way it doesn't matter which tile has moved off the stage or what was attached, it will remove the mc when reaching the limit and satisfing the condition.

                  OK, here's a new example, this uses a single mc to produce the bg, but is mounted on a mc holder to keep it behind the other animation, the code here is much simpler than the previous system: FILE
                  • 6. Re: Mooving picture to differnt coordinates...
                    Iron_Mike Level 1
                    clbeech,

                    thanx for your help, I looked at your file and it works perfectly (your file only) but there some things that are just weird...

                    1. when I delete your 'image_mc' from the library and import a different image into the library & name it 'image_mc' the file doesn't work anymore....

                    --> even stranger is that when I rename your 'image_mc' to something else the clip still works... how's that possible ???

                    2. why did u put a transparent shape into ur 'bg_mc' container ? the container mc I worked with so far (loading swf) were always empty...

                    3. I assume this line in your code " if(bgAr ._x+bgAr._width == 400)" refer to the stage width ?

                    Thanx again.

                    Mike
                    • 7. Re: Mooving picture to differnt coordinates...
                      Iron_Mike Level 1
                      got it,

                      because I start with my image on stage, I just converted my image_mc into another symbol (basically nesting it inside another movieclip) and then adjusted the action script code:

                      function moveLeft() {
                      var xspeed:Number = 20;
                      img_container.img._x -= xspeed;
                      if (img_container.img._x < 0) {
                      //create a loop statement to control the duplication
                      for(var i:Number = 1; i<2; i++){
                      //duplicate the movie clip
                      var ref:MovieClip = img_container.img.duplicateMovieClip("img"+i+"_mc",i);
                      //x coordinate of duplicated movieclips
                      ref._x += img_container.img._width*i;
                      }
                      if (img_container.img._x + img_container.img._width < 0)

                      img_container.img._x += ref._width;


                      }
                      }

                      img_container.img.onEnterFrame = moveLeft;

                      Now we have only one duplicate...

                      clbeech thanx again for your help !!!
                      • 8. Re: Mooving picture to differnt coordinates...
                        clbeech Level 3
                        you're welcome mike, but you're not quite there yet, I'll explain, but answer some of the questions first from above.

                        1) this would be because you didn't give the new clip a 'linkage identifier' which is how the AS finds and bring the clip to the Stage. To create a linkage identifier, right click on the imported clip and select 'linkage...' select the check box 'import for ActionScript' and enter a name.

                        1b) Same reason really, when you changed the name of the clip, that did not change the name of the 'linkage indentifier', so the clip was still being called to the Stage regardless of the clips name.

                        2) because in this case, I wanted the clip to be set at a certain layer (bg) point, and I wanted to illustrate how this was functioning with a mc acting as a container. The 'container' clip never moves and is only used to bring the other pieces to the Stage, in a particular 'z' order, or layer, this way we can keep the background clips behind other animated elements, and control the placement at runtime. I put a 'blank' box in the mc(s) just to illustrated that they were taking a position at that point, they would not need to contain anything.

                        3) yes it does, however in this case I used a 'hard' number to ensure that the condition was met. Also with the way I have things set up in the swf you're referring to, the 'step' of each mc's movement must be a divisor of the total Stage width, in this case 400.

                        OK in the code you have above, first, there is no reason to use the 'for' loop, you're only counting 1, so this is not necessary, and will just slow your code down. second, you're using duplicateMovieClip which is fine, but you do not need the 'i's in the statement for the same reason, you're only duplicating the same clip 'img1_mc', at a depth of 1 every time. Third, you don't have a method of removing a previous clip, however, this is working because when you duplicate or attach a clip to an occupied depth, the contents of that depth are replaced with the element being attached, so this is working as a method of removal. However, you are creating the name of 'ref' for the new clip, which is not being used to move the newly created clip in other areas of the code, so I'm surprised that this actually appears to be functioning. And at the moment I'm at a loss to explain why :) I'll study this code a little and post again later.
                        • 9. Re: Mooving picture to differnt coordinates...
                          Iron_Mike Level 1
                          here's what I thought what's happening:

                          the original image gets duplicated once, when the original moves off stage (on the left) I place it behind the duplicate again.

                          The duplicate always follows the actions of the original because those get duplicated as well with the 'duplicatemovieclip' function. (--> at least that's what I think.... ;))

                          I checked the objects under --> Debug --> List Objects and it shows only two images - the original and the one duplicate...
                          • 10. Re: Mooving picture to differnt coordinates...
                            clbeech Level 3
                            well kind of, yes. but a few things. the reason it may only show two clips, is that durring each iteration of the loop it is duplicating the movieclip again and again over an over. if you only need two clips, this is not particularly efficient, but the reason it doesn't show more, is that it is replacing the old clip at a depth of 1 with the new clip at the same depth. although this works, it's going to be hard on the processor. Also in this case you only need to track the postions of the two clips and move one to the end of the other when it leaves the Stage to the left (just what you doing but, without, duplicating it, just moving it)

                            Here's a new group of examples, I'd also done some work on for another thread, but I made a new example using this principle of just swaping the postions of two clips (there are more levels though :) HERE
                            • 11. Re: Mooving picture to differnt coordinates...
                              Iron_Mike Level 1
                              oh yes, the 'linkage'... haha... totally forgot about that.... never really used it, usually I work with my stuff directly on stage and only use instance names... ;)

                              anyways, looked at your files... very nice and clean, but here's another thing that is a riddle to me...

                              I took part of your code from example three and used it for a testfile with my bg pic (5599x660)

                              linkage to image: image_mc (in library)

                              image container instance name: bg_mc (on stage at 0/0)

                              here's the code that I used:

                              stop();

                              var BGspeed:Number=20;

                              var BG1:MovieClip = bg_mc.attachMovie('image_mc', 'BG1', bg_mc.getNextHighestDepth(), {_x:0, _y:30});
                              var BG2:MovieClip = bg_mc.attachMovie('image_mc', 'BG2', bg_mc.getNextHighestDepth(), {_x:BG1._width, _y:30});

                              onEnterFrame = function() {

                              if(BG1._x+BG1._width == 0) {
                              BG1._x = BG2._x+BG2._width-BGspeed;
                              }else{
                              BG1._x -= BGspeed;
                              }

                              if(BG2._x+BG2._width == 0) {
                              BG2._x = BG1._x+BG1._width-BGspeed;
                              }else{
                              BG2._x -= BGspeed;
                              }

                              }

                              --> here's the problem: it puts the two images BG1 & BG2 on stage (checked that in Debug option) it attaches them right behind each other, but when they're offstage (e.g. BG1._x+BG1._width == 0) and should be placed behind the other image (e.g. BG1._x = BG2._x+BG2._width-BGspeed) NOTHING happens... they don't get placed at that position...

                              And that's just weird to me because it works in your example three (BGpan3), but not in my file....

                              In my first post here I had a similar approach (simpler but similar ;) ) and it just doesn't work... maybe it's the size of my pic that doesn't work with those methods...

                              • 12. Re: Mooving picture to differnt coordinates...
                                clbeech Level 3
                                Mike, although these images are REALLY big :) for Flash to handle, I think the reason why it doesn't function is due to the odd width number. the image is 5599, which doesn't divide evenly to zero by 20, so the script is looking for the x position+width to be zero before making the position change, therefore it never =0 and the image just keeps on going.

                                you will need to change the image by one pixel to be 5600, if it's in a MC you could just 'stretch' it with the width property in the panel by entering a number, or edit hte original, the appearence difference should be negliable. then this system should work. OR you could change the condition to read that if the x+w<0 then change positions.

                                But remember, you're using images that are far beyond the range of Flash, it's recommended that images be less then 2880 pixels, or you may experience 'unexpected' results or the image wont be plotted at all. AND you're using two of them ... pushing the limits for sure. this is why I had recommended breaking the picture into smaller pieces and using an array system to bring them in and remove them as needed, this way you would only have two images at 1120 on the screen at one time, still a lot for the processor, but it would be better.
                                • 13. Mooving picture to differnt coordinates...
                                  Iron_Mike Level 1
                                  clbeech,

                                  changed the width to a number that's a multiple of 20 and now your code works...

                                  Why does the width has to be a number that is a multiple of 20 ?

                                  Because my speed is set to 20 ?

                                  So if I set the speed to 1 it should work without changing the width ?

                                  Also, just to clarify - using ur code (instead of the one that I came up with) would have the advantage that the processor usage would be less ?

                                  Mike
                                  • 14. Re: Mooving picture to differnt coordinates...
                                    clbeech Level 3
                                    >Why does the width has to be a number that is a multiple of 20 ?
                                    >Because my speed is set to 20 ?

                                    Yes, it is moving the image to the left at 20 pixels per iteration, so in order for the x position+ the width of the clip to become equal to zero, the width must be a number that is multiple of the speed. Both the width and the speed could be any number as long as they correspond to each other, so setting the speed to one would work fine, but would be very slow for you super large image.

                                    As to the differences in the codes, yes the current one is much less processor intensive, because it's not constantly duplicating the two very large MCs and repositioning them as well. In the current code, the two MCs are on Stage and only being moved around, never being duplicated at all, when a clip moves off the Stage to the left, it simply gets moved back to the end of the line at the right, and continues the process. Additionally, in the other code, the duplication was happening on each cycle of the loop, when it was not necessary for it to be duplicated until the clip left the screen. It was not appearent that this was happening because the clip was replacing the one at that same depth on each iteration of the loop.

                                    glad you've got it working now :)
                                    • 15. Re: Mooving picture to differnt coordinates...
                                      Iron_Mike Level 1
                                      well, thanx TO YOU I got it working....

                                      Thanx again !!!!!!! ;)