10 Replies Latest reply on Aug 12, 2016 10:11 AM by ClayUUID

    z-index/layers problem

    JonnyDL Level 1

      I have an animation Im trying to use in a Canvas file. I would like to place it in-between a pre-placed foreground image, and a background image. I've tried placing the script in the middle layer of the timeline, that dosen't work. I then tried a Flash trick and place the script in a Movie-Clip and put that in the middle layer, but that didn't work eithier. It appears to run/place the code on the highest level, and then any thing else is placed according to animate layers? Is there a way set the animation at a certain level/heiarchy/layer?

        • 1. Re: z-index/layers problem
          ClayUUID Adobe Community Professional

          It's impossible to solve your problem without knowing exactly what this code is doing, but I can say that the layer that code is placed on is completely irrelevant. Layers are for organizing visual elements. Code is not visual. Code does not know or care what layer it's on.

          • 2. Re: z-index/layers problem
            JonnyDL Level 1

            Clay

            I figured the layers were unimportant for doing what I wanted, it was my hail Mary attempt. Here is the code hopefully the z-index/hiearchy can be adjusted.

             

            var W = 300; var H = 250;

            var vx= Math.random() * -2 + 1

            for(var i = 0; i < 50; i++)

            {

            new create_particles();

            }

             

            function create_particles() {

            snow = new lib.Snow;

            snow.x = Math.random() * W;

            snow.y = Math.random() * H;

            snow.scaleX = snow.scaleY = Math.random() * .8 - .5;

            snow.vy = Math.random() * 1 + 2;

            //snow.vx = Math.random() * -1 + .3;

            //snow.gravity = 1;

            stage.addChild(snow);

            createjs.Ticker

            createjs.Ticker.setInterval(30);

            createjs.Ticker.setFPS(24);

            snow.addEventListener("tick", animate)

            }

             

            function animate(event)

            {

            event.target.y +=event.target.vy

            event.target.x +=vx

            if (event.target.y > 260||event.target.x>345||event.target.x<-30)

            {

            event.target.y = -20

            event.target.x = Math.random() * W

            }

            }

             

             

            Thanks for you quick response!

            • 3. Re: z-index/layers problem
              Colin Holgate MVP & Adobe Community Professional

              AddChild() will always put the item on top of other things. Read about addChildAt(), that will let you add things between the two existing layers.

              • 4. Re: z-index/layers problem
                ClayUUID Adobe Community Professional

                Get rid of all that Ticker stuff, except adding the event listener. Animate already sets up the ticker when you publish, equal to the document frame rate.

                • 5. Re: z-index/layers problem
                  JonnyDL Level 1

                  The Ticker was something I was trying see what it did if anything (didn't bother to take it out).

                  I'm still having the same problem with layering/indexing in Animate. I have the two objects (bitmaps) placed on the stage, with the effect in a MC in the middle all placed manually. Im looking for the effect (snow) to be between them. The Scripts creates 50 flakes, but I won't let me index anything above 3 (three items on the stage (back, effect(in mc), front).

                  I'm not sure how to index the items to display properly, they just keep building with the effect running onto of the other two images.

                  Do I need to add all the items via the script? Should I run the script outside the mc?

                  Still experimenting

                  suggestions?

                  Sorry, I feel I should be able to figure out the concept, and fix it, so Thanks for the Help

                  • 6. Re: z-index/layers problem
                    JonnyDL Level 1

                    got it (I think) I took it to of the movie clip an placed it on the stage, and then in the animate function added the child with a higher index.

                    function animate(event)

                    {

                    event.target.y +=event.target.vy

                    event.target.x +=vx

                    if (event.target.y > 260||event.target.x>345||event.target.x<-30)

                    {

                    event.target.y = -20

                    event.target.x = Math.random() * W

                    }

                    stage.addChildAt(button,51);

                    }

                    My concerns are that it is adding a button every "tick"? is there a better way.

                    • 7. Re: z-index/layers problem
                      ClayUUID Adobe Community Professional

                      Oy very.

                       

                      Look, your particles are appearing on top of everything else because you're adding them directly to the root stage object. To have them appear under other things, you need to add them to a container object instead. Just create an empty movieclip for the effect, place it on the stage at the depth you want, and name it. Then instead of this:

                      stage.addChild(snow);

                       

                      Do this:

                      this.myParticleEffectContainer.addChild(snow);

                       

                      Actually it's a little more complicated than that. For reasons I'm blanking on at the moment, "this" in functions declared that way is set to the browser Window object, even though they have access to variables in the local scope. So you need to define a local alias to the container object. Also, there is no reason to put "new" in front of the call to create_particles(). And a few of your lines were missing the trailing semicolons. So basically you use this:

                       

                      var W = 300;
                      var H = 250;
                      var vx = Math.random() * -2 + 1;
                      var container = this.myParticleEffectContainer;
                      for (var i = 0; i < 50; i++) {
                          create_particles();
                      }
                      
                      function create_particles() {
                          snow = new lib.Snow;
                          snow.x = Math.random() * W;
                          snow.y = Math.random() * H;
                          snow.scaleX = snow.scaleY = Math.random() * .8 - .5;
                          snow.vy = Math.random() * 1 + 2;
                          container.addChild(snow);
                          snow.addEventListener("tick", animSnow);
                      }
                      
                      function animSnow(event) {
                          event.target.y += event.target.vy;
                          event.target.x += vx;
                          if (event.target.y > 260 || event.target.x > 345 || event.target.x < -30) {
                              event.target.y = -20;
                              event.target.x = Math.random() * W;
                          }
                      }
                      
                      • 8. Re: z-index/layers problem
                        JonnyDL Level 1

                        Ace's Clay (4 of them). Thanks!

                        I had tried placing the code in a movie clip before, but apparently i was still referencing the stage and not the movie clip (this). The "this" Concept/usage still gets me a bit confused.

                        I'm still feel Im behind the curve with Coding in Animate/CreateJS. So thank you (all) for the help.

                        • 9. Re: z-index/layers problem
                          JonnyDL Level 1

                          I ran the code above, and Im getting an error, and I'm not sure why.

                          I have a Empty MC on the stage Between two other images

                          In the movie clip is the above code.

                          Ive named the linkage of the MC myParticleEffectContainer.

                           

                          when I run it I get:  undefined is not an object (evaluating 'container.addChild')

                          Is it not recognizing/finding the MC

                          I can't seem to see/understand the problem.

                          • 10. Re: z-index/layers problem
                            ClayUUID Adobe Community Professional

                            That code is not supposed to go in the movieclip, it's supposed to go on the timeline containing the movieclip. If it's in the movieclip then of course var container = this.myParticleEffectContainer; will fail, because it's not going to find itself inside itself.