Thank you so much, that's very useful!!
In your project, there is a reverse animation taking each image back to its original state - is there a code which allows this to play when another image is selected?
So, what I'm hoping to achieve is
- Animation starts on mouse over, animation reverses on mouse out on all images all the time (similar to the link above).
- When one is clicked the animation holds, until another is clicked and the animation reverses while the next holds.
I've had a go with the code on your menu project but I've not had much luck, sorry! I really appreciate your help already so anything more would be bloomin' brilliant!
Like I said it wasn't the complete effect you want.
I need you to look at the click handler code for each of the images, and similarly add some code for the mouseover and mouseout for those images.
And you might have to add some more trigger in the timeline, to get the reverse effect working when mouse moves out of any image.
Along the same vein as Vivekuma's response, here is an example you can explore that mimics the sample reference website.
I used a symbol scenario so you can easily replicate for additional icon rollover effects.
Thanks Vivekuma and Heathrowe!!!
Sorry for the delay getting back to you both.
Heathrowe - in your animations, when you move the curser from one icon to another - you get a nice in / out movement. When a second icon is selected on mine, the first jumps back to the original state rather than animating back - any idea why? (I'd rather keep the timeline as it is rather than using symbols for easy editing).
I'd also like to add in a 'click' to hold the animation, and to have each one animate out when another is clicked on. Could you help at all with the code? I've had a play but I'm very new so haven't got very far...
Here's my project in case it helps to see it to understand what I mean!! http://we.tl/bMJVc71F2h
Good job with that.
The only difference is in my example I encased each animation to a Symbol Element instead of having everything 'bulked' onto the main timeline.
If you do the above process, then you 'click' operation will be easier to implement.
Ah okay - I'll give that a go then!
Ooh okay - thanks Heathrowe - I see what you mean about using the symbols to group animations, does seem much simpler!
So, putting the question back out there...
I've managed to implement the mouse rollover states;
- mouseenter: sym.getSymbol("Concept").play('Over');
- mouseleave: sym.getSymbol("Concept").playReverse();
When each one is clicked, it holds;
- click: sym.getSymbol("Concept").play('Click');
Now I need to figure out the code to make each symbol continue to hold after it's been clicked on (even if the mouse rolls over them again), and playReverse ONLY when another symbol is clicked. My plan is to have information appear under this banner which changes depending on which tab is selected.
Here's my project if it helps to see... http://we.tl/u8r6sZNvdA
Any help would be hugely appreciated!!