15 Replies Latest reply on Apr 3, 2013 8:38 PM by AhMei99

    z-index / overlapping animations

    edgedesign

      Edge Animation newbie here...

       

      Trying to figure out the best way to handle overlapping symbols that expand on rollOver. Here's my sample: http://beta.edgedesign.net/color_meanings/

       

      Row 2 won't animate because the symbols are on a lower level than the symbols on row 1. Moving row 2 symbols a level above row 1 will obstruct the view of row 1 dropdowns.

       

      I tried animating the visability of the dropdown panel and text box within the symbols, but that didn't seem to work. I also played around with clipping path and the symbol stage size, but got nowhere.

       

      Can this be solved within Edge Animation or does it require additional coding?

        • 1. Re: z-index / overlapping animations
          TimJaramillo Level 4

          Hi edgedesign,

           

          The display "off" and "on" props have to be applied to the parent symbol, they don't seem to work as expected on nested symbols.

           

          In this case, the jQuery hide() and show() methods will come to your rescue.

           

          You'll basically want to start by running hide() on all the nested panels, so all buttons will be accessible. Then on mouseenter (or rollover), run show() on the corresponding button. Then at the end of the rollout animation, you'll want to call hide() on the corresponding button again.

           

          Let me know if you need help implementing these methods.

          1 person found this helpful
          • 2. Re: z-index / overlapping animations
            edgedesign Level 1

            Hey Tim,

             

            I get the gist of what you are saying, just not exactly sure how/where to implement.

             

            Here's how my file is set up:

            • Each animated panel is a symbol containing a transparent hit element over the color swatch.
            • mouseover and mouseout code is attached to the hit element and these send the playhead to labels on the timeline within. sym.play("show"); & sym.play("hide");
            • There is a stop trigger on frame 1: sym.stop();

             

            Here's what I tried:

            I added the following code to the frame 1 trigger before sym.stop();

             

                 sym.$("list").hide();

                 sym.$("panel").hide();

                 sym.$("transparent_panel").hide();

             

            These are the 3 elements/layers that overlap the row 2 symbols.

             

            I then added the following code to the mouseover code that is attached to my hit element (before sym.play("show");):

             

                 sym.$("list").show();

                 sym.$("color_tile").show();

                 sym.$("panel").show();

             

            That didn't work, so I guess I'm doing something wrong.

             

            PS: Just started using Edge Animate this week, so still figuring out best approaches. I have a Flash background which sort of helps, but I'm no hardcore Actionscript or Javascript coder. Would it be better to call my animation from outside the symbol rather than from within? Also, I already see some playReverse(); code that would make my test file more effecient.

            • 3. Re: z-index / overlapping animations
              DarioMatson

              Hi,

               

              Maybe my solution helps somehow.

              When i create the object (by createchildsymbol) i add a default z-index:

                      var stage = sym.getComposition().getStage();

                      var zindex = stage.setVariable("z-index",100);

               














              currentButton =someMenu.createChildSymbol("Button", "Buttons");













              currentButton.getSymbolElement().css({"position":"absolute", "z-index":zindex});

               

              Every time i click on one of the items, i increase it (onclick), so that the last one is always on top:

                       var stage = sym.getComposition().getStage();

                       stage.setVariable("z-index",stage.getVariable("z-index")+1);

                       sym.getSymbolElement().css({"z-index": stage.getVariable("z-index") });

               

              Te good thing i noticed about this is that the objects that are set in front in edge, aren't affected by this. E.g. the zIndex only works for the objects that are in this "buttons" container. And that's just what i want.

              • 4. Re: z-index / overlapping animations
                TimJaramillo Level 4

                Hey Dario- that's a good tip, and it may work if he were to set the z-index of the top row items to sit below the bottom row items, at the end of each rollOut animation. In this case, it would not be very extensible in the case that he were to move objects around- as it would not solve the underlying issue of the panel rollover object covering other objects.

                 

                edgedesign- rather than putting the mouseover and hide/show code inside each button, I would definitely put all that functional code on the Stage.compositionReady event. This way all your code would be in one place, making it easy to update.

                 

                edgedesign- it's hard to debug without seeing your file- can you can post a link to a zip of your files?

                • 5. Re: z-index / overlapping animations
                  edgedesign Level 1

                  Thanks Dario/Tim for the assistance.

                   

                  You can download the file here: http://beta.edgedesign.net/coding_tests/edge_animate/color_meanings/color_meanings.zip (the red_panel contains the added code mentioned above)

                   

                  I've also moved the sample: http://beta.edgedesign.net/coding_tests/edge_animate/color_meanings/

                   

                  I have experience calling actions from outside movieclips using Actionscript 2.0. I aim to understand best approaches for using Edge Animate, but I'm more of a designer and a novice with Javascript. This project is just a test to see what EA can do. Feel free to make suggestions on better approaches.

                  • 6. Re: z-index / overlapping animations
                    TimJaramillo Level 4

                    Hi edgedesign, in order to open the file in Edge Animate, I need the whole project, not just the .an file. Can you repost all the source files?

                    • 7. Re: z-index / overlapping animations
                      edgedesign Level 1

                      The .an file doesn't use any outside resources. All files were published via the .an file, then I modified the HTML slightly for layout.

                       

                      Modified HTML & background PNG: http://beta.edgedesign.net/coding_tests/edge_animate/color_meanings/web_files.zip

                      • 8. Re: z-index / overlapping animations
                        TimJaramillo Level 4

                        edgedesign, the .an file does in fact require other files in order to open. As an example, try copying your .an file into a new directory, and then try opening that .an in Edge. It won't open.

                         

                        In order for me to open the Edge file, I need all the files that Edge references to build the project. These files include:

                         

                        xxx_edge.js

                        xxx_edgeActions.js

                        xxx_edgePreload.js

                        xxx.an

                        xxx.html

                        edge_includes (directory)

                        images (if you have images)

                        • 10. Re: z-index / overlapping animations
                          TimJaramillo Level 4

                          Hi edgedesign, first thing- I'd reccommend removing the spaces from your file name. It is considered bad practice to have spaces in file names, especially files that will be living on servers.

                           

                          Below are the fixed files. I moved all the functional code to Stage.compositionReady, added the hide() and show() methods, and also specified the height() of the panel, in order to enable the buttons in the bottom row:

                           

                          example:

                          www.timjaramillo.com/code/edge/nav_overlap_fix/test.html

                           

                          source:

                          www.timjaramillo.com/code/edge/_source/nav_overlap_fix.zip

                           

                          I put a bunch of comments in the code explaining everything, but let me know if you have any Q's!

                           

                          Note that to see all the code, press Command+E in Edge. Then on the left you can look through all the code in the app.

                          • 11. Re: z-index / overlapping animations
                            edgedesign Level 1

                            Yeah... I didn't realize my AE filename would be passed onto the published filenames and code. Flash always added an undscore for spaces and allowed you to change published file names.

                             

                            Anyway... thanks for getting it to work. Now, I'm just trying to understand what you did.

                             

                            It looks like you attached code to the stage via the event document.compositionReady (by clicking the '+' next to Stage via the Code panel?) then added an action to frame 1 of the main timeline to load it.... yes?

                             

                            Going thru the document.compositionReady code...

                            1. You set up an array for the buttons
                            2. You created functions for setup, onOver, onOut, onOutAnimDone & cutString
                            3. You show() and hide() the overlapping elements via the functions

                             

                            Again, I get the gist of it, but would never have figured it out on my own. Safe to say, you need to understand Javascript and/or Edge Animate API fairly well to deal with such issues?

                             

                            Can you explain these points a little further?

                             

                            // get clean reference to btn ID from "Stage_red_panel_hit"

                            // get clean reference to btn ID

                             

                            Any recomendations on learning more about the coding side of EA? Is there a place that covers the use of events like document.compositionReady? Best to focus on learning javascript or EA API? The current tutorial videos only get you so far.

                             

                            Thanks for your time!

                            • 12. Re: z-index / overlapping animations
                              TimJaramillo Level 4

                              Hi edgedesign,

                               

                              Explaining this line: // get clean reference to btn ID from "Stage_red_panel_hit"

                              If you look at the hit button mouseover event, I'm sending in "e.target.id", to dynamically be able to tell which button was rolled over. When you trace "e.target.id", you get "Stage_red_panel_hit". We aren't interested in that whole string, we only want the part in the middle: "red_panel". So I manipulated the string with the "cutString" function, to remove the front and end parts.

                               

                              Learning javascript will GREATLY increase what you can do in Edge. I'd also reccommend becoming very familiar with the Edge API:

                              http://www.adobe.com/devnet-docs/edgeanimate/api/current/index.html

                              • 13. Re: z-index / overlapping animations
                                AhMei99

                                Hi,

                                 

                                Can someone help look into my code too?

                                 

                                I've been having the same overlapping issue and I've tried the hide() and show() method as suggested here.

                                 

                                I have successfully solved it on the 2nd run but not initially.

                                 

                                To get to the error :

                                1. Load the indexAL.html file in edgeAnimate. Preview by Ctrl-Enter.

                                2. After green text loaded, click Yellow rectangle. Here is the problem, except for the 3rd logo from 1st row, all other logos should have a "hand" cursor, but it doesnt show. The last logo has 3 different cursors if u hover around it.

                                3. Click on blue, or black, or green... Go back to yellow. Now all logos that shd have hand cursor shows correctly.

                                 

                                Here is my zip file.

                                http://www.gulin.sg/andrea/AL20130403.zip

                                 

                                Thanks for all the suggestions for fix.

                                • 14. Re: z-index / overlapping animations
                                  TimJaramillo Level 4

                                  Hi there, 

                                   

                                  Here is your revised file, with all images showing the hand cursor:

                                  http://www.timjaramillo.com/code/edge/_temp/AL20130403_TJ.zip

                                   

                                  I removed most of the individual hide calls on Stage.compositionReady, and instead added these:

                                   

                                  sym.$("black").hide();

                                  sym.$("green").hide();

                                  sym.$("blue").hide();

                                  sym.$("yellow").hide();

                                   

                                  Then, on each button click, I show the content for the clicked button and hide the content for all others. So on yellow button click, I add this:

                                   

                                  sym.$("black").hide();

                                  sym.$("green").hide();

                                  sym.$("blue").hide();

                                  sym.$("yellow").show();

                                  • 15. Re: z-index / overlapping animations
                                    AhMei99 Level 1

                                    Thank you so much, Tim!

                                     

                                    Works well, just commented the Green one cos I needed it to show when loaded.

                                     

                                    Edit: instead of hiding the symbols at the buttons, i hide when leaving the symbols so that my animations for the ending will show.

                                     

                                    THANKS again!!

                                     

                                    Warmest regards,

                                    Andrea