15 Replies Latest reply on Nov 11, 2012 10:08 AM by resdesign

    multiple elements overlapping each other


      Hello everyone,


      I've just started playing with Edge and I love it, but I have one problem that's driving me crazy!

      I have an animation where I click a page and the next page slides in from the right, and if I click on that page the next page slides from the right and so on.

      The problem is eventhough the next screen is not placed on stage yet, they seeem to cover the whatever pages underneath. In other words, the top page(which takes up the whole screen) covers all the elements underneath. Currently I use display on & off keyframes to workaround it but I was wondering if there is any other way.



        • 1. Re: multiple elements overlapping each other
          elainecc Adobe Employee

          Hi, Matthew-


          Have you tried changing the Z-order of the elements?  It would help to see what you're struggling with - could you post your project files for us to look at?





          • 2. Re: multiple elements overlapping each other
            daeeki Level 1

            Hi Elaine,


            thanks for the reply, so where do you change z-order of the element? And is z-order separate from the order of layers in element panel or timeline panel? As for the project files, I can't post the files in public space



            • 3. Re: multiple elements overlapping each other
              NWphotodev Level 1

              Just a question -- are you referencing your experience in the UI or the outcome in the browser?


              I've noted that if, for example, triggers are used to "play" a symbol animation the only way to see the sequence of animation is to view it in the browser.  The work around in the UI would be to put the "play" on the symbol's timeline by pressing the play icon in the symbol's layer (on the left), but that's sometimes not practical either.


              One thing that you might check is the size of the elements on the stage and the setting for overflow. Not that that really should have anything to do with it though.


              Are there any other elements that may be interfering?


              Another thought -- if you can, do a test --  first though backup your project files to a safe backup location.  This assumes that your pages are saved off as symbols to preserve the work you've done (e.g. front, page_1, page_2, etc.). If you don't want them actually as symbols, do this symbol making in a replica of your original project. In this case you'd actually have made 2 copies of the original, one to make the symbols and another "fresh" one.


              Next start a new "clean" project. I usually use the names "test.htm" or "debug.htm" to make it clear this isn't a production project.

              In this test project, set the stage up like your original. Then, drag your cover page symbol onto the stage and make any adjustments to its animation.

              Next drag in your second page and make adjustments.  With just these 2 pages see if you can shine a light on what might be going on to obscure your book pages.


              Don't know if this is on the mark, but might be worth a shot.


              It would be interesting to see what you find...




              • 4. Re: multiple elements overlapping each other
                elainecc Adobe Employee



                You can change the Z-order in the elements panel.



                1 person found this helpful
                • 5. Re: multiple elements overlapping each other
                  daeeki Level 1

                  Thanks NWphotodev and Elaine,


                  the problem I'm having is the outcome in the browser. You can think of my file as a slideshow, and the slideshow advance when a user clicks on a certain part of the page. Once the user clicks on the hot spot, the next slide slides in and lays on top of the previous slide, covering the previous slide completly. And because the new slide(or new element) is on top of the previous slide, it's covering the clickable hot spot as well. If I temporaliy move away the slides from the hot spot, then I have no problem clicking it.

                  • 6. Re: multiple elements overlapping each other
                    NWphotodev Level 1

                    How about trying something like this?


                    Add a new element that is at the top of the layers and remains visible (visibility = ON) for the whole time the slides are being displayed.

                    Put your click action/event on that new element -- not on your individual slides.

                    That new element should be transparent and scaled to cover the entire area you wish to be clickable.

                    I say scaled as it seems a 1px transparent *.png or *.gif should work and yet not add a great deal to the "weight" of your animation.

                    Since its a transparent *.png or *.gif the image shouldn't obscure what lies underneath.

                    Clicking the new element should trigger the swap of the slides lying underneath, yet still enable you to see them though the new element lies "on top" of them.


                    Just a thought. I haven't tried it, but seems it may work.


                    Another option might (again untested) be to make the slides the background of a div element and have people click the div element and have that changes the background to a new slide.

                    That doesn't sound as helpful though as the first idea.


                    Worth a shot?




                    1 person found this helpful
                    • 7. Re: multiple elements overlapping each other
                      resdesign Adobe Community Professional & MVP

                      I use hide() and show() where something can be clicked when it has show() and not when it has hide();


                      Another way is to use one container in which you load elements from an array and swap images. This way there is one button for all the different slides.


                      Simple sample using array here:




                      But of course I do not know how your composition is structured and what it actually does. So I could be totally wrong.

                      1 person found this helpful
                      • 8. Re: multiple elements overlapping each other
                        daeeki Level 1

                        Thanks everyone,

                        I'm using a single transparent button (one that NWphotodev suggested) plus using keyframes on visibility. Once again thanks everyone and have a great weekend!



                        • 9. Re: multiple elements overlapping each other
                          NWphotodev Level 1

                          Thanks for letting us know what direction you decided to go with it.


                          It would be interesting to see once you have it up (if it's in a public web).


                          Hope it works out!




                          • 10. Re: multiple elements overlapping each other

                            Hi redesign,


                            I'm building an interactive animation that I believe needs to use the method you referenced above.  I would like to view the array file you cited. but nothing is there. Could you repost?  You can scroll to the bottom of this page to view the edge animation.  The concept is to have users click on the controls of a clicker to step through 15 presentation slides.  Each slide is captured as a jpeg.  Hover over the large round button on the left-hand side of the remote.  I only have the first slide running, because I can't get my head around how to properly code the trigger behavior.  Each time a user clicks the button the next slide should appear. 






                            • 11. Re: multiple elements overlapping each other
                              resdesign Adobe Community Professional & MVP

                              Here is a possible code:


                              index= 0;



                                   sym.play("frameName" + index);   // you can put whatever you need here  frames could be p0, p1, p3   or you could have an update function to update images and text, etc...


                              • 12. Re: multiple elements overlapping each other
                                robertsimpson3 Level 1

                                Thanks resdesign,


                                I've been studying the Edge forum and reviewing Edge tutorials. 


                                I appreciate your response, but here's what is not working or I'm having difficulty coding:

                                • click action for the symbol "button" using your suggested code does step through the slides using timeline labels
                                  • problem 1- the first click doesn't run the first slide.  On the 2nd click the first slide runs, 2nd click second slide runs. 
                                  • problem 2- can't figure out a method to return to first slide once all slides have been viewed.  Using a timeline trigger action will jump back to the s1 label, but the Qwizdom remote animation restarts.  How can the timeline jump back to the 0 mark when it's given a label later on the timeline?
                                • slide 3 is a question slide, I want a bar graph symbol to launch when symbol "button2" is clicked. (It's a separate button on the remote, under number 9 on keypad).  The bar graph plays but:
                                  • it repeats when the button2 is clicked again.  How do you play the symbol once?
                                  • the bargraph_container3 does position the symbol.  How do you change background color?  I'm confused about how to code a container for playing a symbol versus having a instance of the symbol on the timeline. 
                                • Bar graph animations (symbols) are tied to specific question slides.  Once users click "button" the bar graph symbol should hide and the next slide appears.
                                • "button2" needs to launch a specific q symbol.  The click event should only launch one assigned bar graph symbol.  Any ideas?


                                Here's the project file



                                I would appreciate any help.  Since this is my first Edge project using code it has been a steep learning curve. 



                                • 13. Re: multiple elements overlapping each other
                                  resdesign Adobe Community Professional & MVP

                                  Note1: I prefer to put the code for buttons in composition ready rather than the button itself. If you put the code on the button then you do not need the click function - only what is between the {}. If you keep your code in composition ready then you have it all in one place and it is easy to maintain the code. It is better in my estimate.

                                  To read the code in composition ready, click on the stage {} on the right side.

                                  Note 2: I made your button 2 OFF on s1 and s2 ON on S3 and OFF on s4.

                                  I will try to post screenshots tomorrow. I have a glitch on this computer that started after I installed Windows 8. I cannot take screenshots.

                                  Note 3: if you add elements then you will need to change the number of the frame in the button code - right now it is 4 because you have nothing on s5.

                                  Corrected file here: https://www.box.com/s/dd8irtx3zp51j57yx8sl

                                  • 14. Re: multiple elements overlapping each other
                                    robertsimpson3 Level 1

                                    Thanks redesign for the speedy reply!  Your help is really appreciated as I slog through this project.  Sorry you are having issues with WIN8. 


                                    I now have the slides functioning properly and the if statement returns the last click event back to the 1st slide. 


                                    I've seen examples of code being used on the Composition Ready panel, but wasn't sure what the benefit was until now.

                                    The first question slide (3rd slide) calls the bar graph symbol when button2 is clicked.   The next question slide (4th slide) calls another bar graph.  Using display On and Off hides button2 and reveals button3 on the timeline to launch the next bar graph.  I repeated the Composition Ready code and updated the variables. 


                                    How do I clear the bar graph symbol? It makes sense from a UI perspective that clicking on the next slide would clear the first symbol from the bargraph_container. 


                                    Here's the lastest working example. 



                                    Thanks again for your help.


                                    • 15. Re: multiple elements overlapping each other
                                      resdesign Adobe Community Professional & MVP

                                      To tell you the truth I am not really good at working with symbols children.

                                      Here is my attemps to make this work. All the explanation is on composition ready. I used the symbols on the stage instead of the created children.



                                      I will keep on trying to make the original work as you want.