19 Replies Latest reply on Sep 5, 2013 2:30 PM by heathrowe

    Please help me with a visibility symbol issue

    Joel Bondoux Level 1

      Hi,

       

      I've created a horizontal navigation bar which has an animation when you hover over the various links.  This animation is a bubble that pops up behind the nav bar that has a brief description of the link.  I have composed the nav bar as a symbol and the bubbles as a seperate symbol, the stage for the Nav_Bubbles takes up the horizontal space that the bubbles take up all the way along the nav bar.  When you click on a link in the Nav_Bar, not only does the Nav_Bubble animate from the apprpiate cue point (because the mouse is clearly hovering over the link) but the main stage then animates the build up of the content for that link.  This main content lies behind the Nav_Bubbles (so you can continue to see the small bubbles should you hover over the nav links)

       

      The problem this creates is this:

       

      The main stage content will have scrollable or clickble content depending on the link clicked, however all this content that lies beneath the Nav_Bubbles stage area is unclickable.

       

      edge-animate-symbol-layer-example.jpg

       

      To keep the bubbles functioning and correctly positioned I seem to have had to keep the bar and bubbles in seperate symbols.  So I cannot for the life of me see how I can keyframe the visibility of the Nav_Bubbles to only when a bubble appears.  Is there an alternative to the visibility option to allow the Page_Content to be clickable through the bubbles stage area (dotted area in attached image)?

       

      I hope that all makes sense?!

       

      Many thanks

        • 1. Re: Please help me with a visibility symbol issue
          robboerman Level 4

          i had that problem ones to, i solved it by using the clipping tool.

          so clip to the navbar for normal, and when hovering buttons and the bubbles start, undo the clipping.

           

          it will also be solvable by z-index css

          (normally behind the scene, and push it foward when bubbles happen)

          1 person found this helpful
          • 3. Re: Please help me with a visibility symbol issue
            Joel Bondoux Level 1

            Hmm, ok can't get it to work...

             

            I am launching the Nav_Bubbles symbol at a specific timeline location from a 'mouseover' command in the Nav_Bar symbol (for each menu option).  So I cannot keyframe the clip tool, for instance, on the main timeline as the Bubble can be called upon at any moment.  I also don't think I can keyframe the clipping of the Nav_Bubbles stage size (or indeed any other stage size property) from within the same symbol.

             

            Alternatively, I did think that possibly I could do it programatically.  So in the action script for 'mouseover' not only do I call Nav_Bubbles to play at a certain timeline location but perhaps I could provide the clipping or z-index changes in this command line?  Is this even possible?

             

            I hope that also all makes sense..?

            • 4. Re: Please help me with a visibility symbol issue
              heathrowe Most Valuable Participant

              What happens when you try to move

                Nav_Bar and Nav_Bubbles below Content_Contacts in the Elements Panel.

               

              Your source file is missing the /edge_includes folder, as well as, each of the ajax .html files, so it crashes Edge everytime I try to access the content text element within any of the content symbols.

               

              Darrell

              • 5. Re: Please help me with a visibility symbol issue
                Joel Bondoux Level 1

                Hi Heathrowe,

                 

                I've sent you a new zip file in a PM.

                 

                If I were to move the bubbles below the content layer then the bubbles (which appear when hovering over the links) would appear under the content body text.

                 

                You will see from the source files that I originally made all the bubbles seperate entities (they still exist in the symbol library - just incase I revert to using them again), but to allow them to scale correctly on a resized browser and continue their functionality I ended up re-creating them in their own symbol (Nav_Bubbles) and that has caused the issue.  If I were able to clip or resize the the symbol within a script - from within the symbol itself -  then I might get around this, but I am not sure if that is even possible?

                 

                Cheers,

                Joel

                • 6. Re: Please help me with a visibility symbol issue
                  Joel Bondoux Level 1

                  OK, still having difficulties here.

                   

                  So having succesfully implermented an if else to conditionally apply an action to an element I thought I'd try that out on the symbol.  However, this time the if statement would hide, crop or transform the symbol Nav_Bubbles.  But still no luck, the if else is working fine it is just the command to alter the symbol.  Here is what I think it should be:

                   

                  sym.getComposition().getStage().getSymbol("Nav_Bubbles").hide();

                   

                  or

                   

                  sym.getComposition().getStage().getSymbol("Nav_Bubbles").css("display","none");

                   

                  Any help would be appreciated.

                   

                  Cheers,

                  • 7. Re: Please help me with a visibility symbol issue
                    Joel Bondoux Level 1

                    no-one out there who can help me with this?

                    • 8. Re: Please help me with a visibility symbol issue
                      robboerman Level 4

                      could you post your project maby or send it trough pm?

                      so we can help you better.

                       

                      - Rob

                      • 9. Re: Please help me with a visibility symbol issue
                        Joel Bondoux Level 1

                        Hi Robboerman,

                         

                        Thanks,  please look out for my PM.

                        • 10. Re: Please help me with a visibility symbol issue
                          heathrowe Most Valuable Participant

                          Joel - apologies for the delay.

                           

                          I am not seeing the overall issue - The only time the navbubbles are visible is on mouseover of the nav menu items. They disappear before you even get a chance to interact with the content of the individual content pages.

                           

                          Aside from the above observation, if you go into Nav_Bubbles symbol, at the start of each xxx_Hover label postion, place a Display: On, then at the end of that transition play a Display: Off. See capture.

                           

                          What you have for some of them, not all, is Display: On, but never turning them off, even though they fade out.

                           

                          off.png

                           

                          hth

                          Darrell

                          • 11. Re: Please help me with a visibility symbol issue
                            Joel Bondoux Level 1

                            Hi Darrell,

                             

                            Thanks again for looking at this.

                             

                            So I can see what you mean about not all of the elements inside Nav_Bubble not having their display triggered on and off.  I have resolved that but it does not really solve the problem.  Still the Nav_Bubbles Symbol on the main stage is blocking any interaction with the content below.

                             

                            If you don't mind, please revisit the test page, this has the latest published files.  Browse to Hire for instance and notice if you move your mouse just above the nav bar your mouse wheel will not scroll the content, yet if you take the mouse above the area of the nav bubbles the wheel will scroll fine.  This, of course, applies to clickable areas too.   What I feel I need to achieve is to toggle the display of the Nav_Bubbles symbol dynamically.  I was thinking of doing so with a variable which wouldn't be too hard (the variable toggles whenever a bubble is about to display or disapear), but I don't know how to toggle the display property of the whole symbol programatically.  Perhaps I'm overthinking this now, but I am truely stumped as to find a way to do this inside the Edge UI.

                             

                            If you've still got some free time to review this I'll drop you a PM with the link to the latest files.

                             

                            Cheers,

                            Joel

                            • 12. Re: Please help me with a visibility symbol issue
                              heathrowe Most Valuable Participant

                              I undestand now

                               

                              I'll have to see a way around it, the way you have it set up, is not making it 'what should' be as simple as enable/disable Display property.

                              Will have to dig a little deeper....

                               

                              Darrell

                              • 13. Re: Please help me with a visibility symbol issue
                                heathrowe Most Valuable Participant

                                All I did was set the Nav_Bubbles dispplay to toggle On/Off at just the right moment(s) along the timeline.

                                 

                                See capture -

                                on.png

                                 

                                updated file sent to your pm.

                                 

                                Darrell

                                • 14. Re: Please help me with a visibility symbol issue
                                  Joel Bondoux Level 1

                                  hilarious!  Clearly shows my misunderstanding of the process.  Because the Bubbles symbol needed to action the hover animations at any time, not just the moment a page content is visible I didn't even presume that would do the job.

                                   

                                  I'll grab the files and have a closer look.

                                   

                                  Thank you so much!  I owe you a beer, or thirty!

                                  • 15. Re: Please help me with a visibility symbol issue
                                    heathrowe Most Valuable Participant

                                    I actally scratched my head over it:)

                                    Luckily because the main timeline 'matches' the timeframe of the bubble transitions, the above worked fine.

                                     

                                    cheers

                                    Darrell

                                    • 16. Re: Please help me with a visibility symbol issue
                                      Joel Bondoux Level 1

                                      Hi Darrell,

                                       

                                      Hmm, sorry that was premature celebrations.  Try clearing your browser cache and re previewing your show file.  What's happening now is the bubble pops up only after you click on a link and then pop's away again almost immediately.  But this kind of makes sense, with the whole symbol being invisible when the playback head is at any of the stop commands on the main timeline (particularly the 'start' position) the bubble animations will simply not appear.

                                       

                                      This is where Edge Animate is a strange beast.  I altered my current show with your suggested changes, uploaded the show and it was working!  I didn't really understand why, but it was working!.  I was then changing the content html pages and I needed to clear the browser cache for them to view correctly (this brings another question - for another day I think...).  All of a sudden the bubbles stopped functioning.  Going back to your zip file to see what I messed up in translation I CTRL-ENTered to preview and cleared the browser cache and then re-previewed, sure enough the bubbles stopped working!

                                       

                                      Now I think the display toggle is a good choice of action, it's just not from the main timeline, afterall these bubbles need to appear at ANY point on the timeline.  There must be a way to do so whenever a bubble gets called upon to play (ie on the menu hover action)

                                       

                                      Yes you're right.  This is a bit of a head-scratcher!

                                       

                                      Many thanks,

                                      Joel

                                      • 17. Re: Please help me with a visibility symbol issue
                                        heathrowe Most Valuable Participant

                                        Ah bumed!

                                         

                                        Yes I see it is working on the first attempt, but after any first click of a menu it goes haywire.

                                        Hopefully someone can spot the missing piece.

                                         

                                        Darrell

                                        • 18. Re: Please help me with a visibility symbol issue
                                          Joel Bondoux Level 1

                                          OK, fixed!

                                           

                                          For those interested in what was required here, a simple line of code:

                                           

                                          sym.getComposition().getStage().$("Nav_Bubbles").hide();

                                           

                                          The hide and show were placed either side of the bubbles that animated inside the Nav_Bubbles symbol.  We tried this as you can see above in the timeline but because the hover animations needed to happen at any time not just the times we set in the timeline for the display toggle we needed to achieve this programmatically.

                                          • 19. Re: Please help me with a visibility symbol issue
                                            heathrowe Most Valuable Participant

                                            no way:)

                                             

                                            I tried them all as well, including css methods to display none/block, but obviously at the wrong locations.

                                             

                                            good stuff

                                             

                                            Darrell