8 Replies Latest reply on Mar 4, 2015 8:25 AM by theshyguys

    Help with coding - MouseEnter/Leave and Click commands for animated tabbed panel

    theshyguys Level 1

      Hello!

       

      I've asked a question similar to this but unfortunately couldn't figure it out!  I'm hoping someone may be able to help now as I'm much clearer about what I need...!

       

      Here's my Edge Animate project - http://we.tl/JEOuvnK4SX  It's going to be embedded on a Muse website.

       

      At the moment, it works well, with the animations happening as the mouse is rolled over each icon at the top.  What I'd love to achieve is something very similar but with click actions - When the icon at the top is rolled over it plays and reverseplays but the panel below is only played when the icon is actually clicked - and it holds until another is clicked (so the mouse can wonder around the screen without the information dissappearing), it should then playreverse before the new one appears.

       

      I'd also like it to begin with 'Concept' pre-selected so users can see the first panel.  At the moment there's a big empty space which makes it look like there's actually something missing.

       

       

      So I'd like something like this (hopefully this makes sense!):

       

      TO BEGIN - ICON (Concept) and PANEL (Concept_1) already activated (CLICK) (see image).  It would also be quite nice if this began as the user scrolled down the page as I already have a few scroll effects on the Muse project.

       

      MOUSE ENTER:

      sym.getSymbol("ICON").play('Over');

       

      MOUSE LEAVE:

      sym.getSymbol("ICON").playReverse();

       

      CLICK:

      < find currently activated "ICON" .playReverse(); >

      < find currently activated "PANEL" .playReverse(); >

      sym.getSymbol("PANEL").play('Over');

       

      I've been racking my brain over this but I think I just don't know enough code!  Any help would be MASSIVELY appreciated!!  Thanks

      Screen Shot 2015-02-13 at 2.08.34 pm.png