7 Replies Latest reply on May 6, 2015 12:48 AM by owen_bayley

    Hide/Show Mouse Over - Help?

    SydneyLoiner

      Hi

       

      Im trying to create the effect where when I Mouse Over over a specific area on the stage it triggers a box to appear over the entire stage & then once I Mouse Out the box disappears.

       

      I will attach some screen grabs of what Im trying to achieve.

       

      I have some Terms & Conditions that need to be on my banner but I only want then to appear on Mouse Over.

       

      Any help would be great - Thanks

       

      1.jpg 2.jpg  3.jpg

        • 1. Re: Hide/Show Mouse Over - Help?
          owen_bayley Level 1

          Hey bretti,

           

          You could try adding a shape above the text you want a mouse over on. Then make this shapes opacity to 0 and hide it on trigger 0. Then when you need the mouse over just make the shape visible again. e.g. sym.$("RoundRect").hide();          sym.$("RoundRect").show();

           

          To make sure it work have the shape as the top layer  on the Elements list.

           

          To get a mouse over to work you just need to add mouse over to the shape  and have sym.$("Terms").show(); and have a mouse out with sym.$("hide").show();

           

          Hope this helps

          • 2. Re: Hide/Show Mouse Over - Help?
            SydneyLoiner Level 1

            Thanks Owen.

             

            Im still having a few difficulties. The link below shows in Flash what I am trying to achieve in Adobe Edge Animate.

             

            Flash Banner Creative

            • 3. Re: Hide/Show Mouse Over - Help?
              owen_bayley Level 1

              Hey bretti,

               

              Thanks for the example,

               

              To achieve this I would personally put a rectangle(using edge's built in shapes function) on top of the area you want a mouse over on and make it opacity 0.  This would make an interactive area.

               

              Then on the rectangle I would use the open actions that looks like this { }

              Capture.PNG.

              a menu box should open and on this you want to press the pulse button

              Capture2.PNG

              then you can add "mouseover"(this is what will happen when the user has there mouse over the area) and mouse out(what happens when the mouse leaves the area).  I have a piece of text showing on mouse over and on mouse out, its the same code but it has "hide" in the place of "show"(you can use this method on countless numbers of elements).

              Capture3.PNG

               

              To get it to work like the example you showed me with the animation. I would have the animation in a symbol and play it  from a label in the symbol on a "mouseover" 

              Capture4.PNG

              and then on the mouse out I would do the same but the close animation sym.getSymbol("terms").play("close");

               

              remember the stuff you want to show should be at the top of the elements list, as other items could block the view. This also applies to whatever element has the "mosueover" and "mouseout"  on.

               

              Hope this helps let me know if you have any further questions

              1 person found this helpful
              • 4. Re: Hide/Show Mouse Over - Help?
                SydneyLoiner Level 1

                Thanks again Owen.

                 

                One more thing, the blue "Terms" box seems to play when I preview the banner. How to I get it to only play when I Mouseover/Mouseout?

                 

                I have attached some screen grabs of my workspace. Maybe you can see where I am going wrong. Thanks.

                 

                0 Opacity Rectangle.png

                Blue %22Terms%22 Box.png

                Mouseover.png

                Mouseout.png

                Cheers

                • 5. Re: Hide/Show Mouse Over - Help?
                  owen_bayley Level 1

                  Hey bretti ,

                   

                  I'm not sure what exactly what you mean sorry, but this should hopefully help somehow:

                   

                  Some of the stuff I will go through you have got already but I'll go over it just in case.

                   

                  From what I can see in the examples you have put your animation on the main timeline and not in the Symbol "terms" try putting it into the symbol:

                  Capture9.PNG

                  It should look like this give or take the length of you animations when your done:

                  Capture8.PNG

                  As you can see in my example I have { } on the timeline:

                  Capture6.PNG

                  (this is called a trigger when on the timeline it is made by CTRL+t). Inside of this I have the code

                  Capture7.PNG

                  This will stop the timeline being played past the this point. I also have:

                  Capture5.PNG

                  This is called a label(this is made by CTRL+l) I have renamed mine to "open" and "close". When the  mouse over is uses:

                  Capture4.PNG

                  This code broken down means system go into the Symbol of "terms" and play from the label named "open"(you can use this with any Symbol and label e.g sym.getSymbol("any symbol you have made").play("any lable in the symbol you just named")).It will play the animation from the label this means playing from "close" will play all the animations after the close label until the end or a trigger with sym.stop();

                   

                   

                  Some other stuff I have noticed:

                   

                  do you have a text2? as if not remove:

                  Capture3.PNG

                  If you try to use an element in code that does not exist then it  errors.(edge does not tell you this though).

                   

                  You could remove the hide code for your text and move the text into the symbol of "terms" and animated it with the box so the text does not just appear from nowhere?

                   

                  hope this helps  

                  • 6. Re: Hide/Show Mouse Over - Help?
                    SydneyLoiner Level 1

                    Thanks Owen, Your help has been greatly appreciated - Here is a link to my test banner.


                    Untitled

                    • 7. Re: Hide/Show Mouse Over - Help?
                      owen_bayley Level 1

                      No problem , I'm glad it helped