7 Replies Latest reply on Aug 22, 2013 7:46 AM by sinious

    Problem with layer ordering when using 3D rotation tool

    twarrior4dc

      Hello, I really hoping that someone might have an answer for this. I am trying to rotate a bunch of movie clips around the X axis (I think its the X in a sort of wheel. Basically what I did is I create a 9-sided polygon, made it a movie clip and then added 9 movie clips 3D rotated perpendicular to each 'face' of the polygon. Then, I made the entire thing a movie clip and 3D rotated the movie clip so that the perpendicular faces are facing forward, and then using 3D rotation to cause it spin, like the wheel on the Price is Right or a rollsign. However when the movie clips that are in back are rotated around the front, the movie clips that were in the front reappear, though backwards. I am guessing this is because they are higher up in the layer order. Here are screenshots of what I am describing: The "Success" should be in the back with a different one in the front, but it is showing up front, though upside down and backwards as it should be in the back. I am using CS5, AS3 and working mainly on the timeline as my coding skills for animation are not that good. Any suggestions?

      Screen shot 2013-08-21 at 11.00.11 AM.pngScreen shot 2013-08-21 at 11.00.44 AM.png

        • 1. Re: Problem with layer ordering when using 3D rotation tool
          sinious Most Valuable Participant

          As it rotates you're probably going to need to set the layer order via code. You can do it by index or by specifying the child, see the DisplayObject reference here:

           

          http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/DisplayOb jectContainer.html#swapChildren()

           

          As it rotates you can use either a timer, interval, a custom event the spinning itself emits or go as far as an ENTER_FRAME loop that watches the current rotation of the wheel. At various rotation points you can swap the depth of the images to be sure the correct picture is on top.

          1 person found this helpful
          • 2. Re: Problem with layer ordering when using 3D rotation tool
            twarrior4dc Level 1

            Thank you so much for the help, sinious. I'll see if I work with that.

            • 3. Re: Problem with layer ordering when using 3D rotation tool
              sinious Most Valuable Participant

              If you're using the timeline to animate the rotation instead of code just add in some frame scripts at the appropriate time to swap children. The easiest thing to do is to set a childs index to the top of the stack.

               

              In a timeline script where you know, for example, image_5 is coming around and you want it to be in the front, you could do something like this:

               

              // move image_5 to the top of the display list

              carousel_mc.swapChildren(carousel_mc.image_5,carousel_mc.getChildAt(carousel_mc.numChildren - 1));

               

              Not trying to make it overly complex but where you put the code matters. If you put it inside your carousel itself (I'm loosely calling carousel_mc in my examples) then you'd replace "carousel_mc" with "this", e.g.:

               

              this.swapChildren(image_5,this.getChildAt(this.numChildren - 1));

               

              Sprinkle those on the timeline where you know any specific image is supposed to be front facing.

               

              If you're rotating the carousel via code then you'll just need to pay attention to the rotation property and at specific points run this same type of code to position the image stack correctly.

              1 person found this helpful
              • 4. Re: Problem with layer ordering when using 3D rotation tool
                twarrior4dc Level 1

                This is great, thanks again! I will be rotating the carousel using motion tweening on the timeline of the parent so your first example sounds like it will be perfect. I am thinking, since I will be rotating it several times, it will be easier to just make a movie clip of one rotation and play it in a loop in between the start and finish animations. I'll let you know how it turns out.

                • 5. Re: Problem with layer ordering when using 3D rotation tool
                  sinious Most Valuable Participant

                  That'd probably be the easiest if you like timelines. Be sure to swap the proper children as soon as they enter or exit the display. Just for posterity I think you'd figure it out anyhow but the code to swap a child behind all other objects is sticking it at the bottom of the display stack (getChildAt(0)):

                   

                  carousel_mc.swapChildren(carousel_mc.image_5,carousel_mc.getChildAt(0));

                   

                  Good luck!

                  • 6. Re: Problem with layer ordering when using 3D rotation tool
                    twarrior4dc Level 1

                    Your solution of calling the children as they enter the rotation was perfect. However, instead of swapping z-indexes I decided that it would be better to just change the alpha levels with only the two or three that are showing in the front with alpha=1. This worked out because a secondary issue that I was having was being able to the see images that were in the back in between the gaps of the images that were in the front. I had originally tried placing a white background behind all of the images as to cover-up the background, but the alignments weren't perfect and they sometimes overlapped each other. Using alpha, I was able to simply hide the images in the back. Thanks for your help again!

                    • 7. Re: Problem with layer ordering when using 3D rotation tool
                      sinious Most Valuable Participant

                      If you don't swap you'll end up seeing those low opacity elements over the others and worse, they will cause "hit" issues if the purpose ever becomes to click on the items. Sending the objects to the bottom of the display list will ensure the items you see in front are actually on top and are what will receive the mouse click (or finger touch).

                       

                      I'd reconsider and do both. I'd fade out the background to make sure the foreground pops and also swap the depths to make sure the user clicks on the correct item and also don't see a ghosted (low alpha) version of what's behind coming in front (unless you're actually doing alpha=0).

                       

                      Even if you do alpha=0 the hit issue will still exist. However If you do .visible=false, the hit issue will go away.

                       

                      You're welcome and good luck!

                      1 person found this helpful