Animation on hover out
Oct 02, 2015
Hello,
I have an object(Obj1) that I have set an entrance animation and a exit animation. As default I have set the state to 'hidden' and have created a trigger to change the state to 'normal' when the user hover on another object (Obj2).
When I test this, the entrance animation works fine when I hover on Obj2, but it will not work when I leave the object. The state will change to 'hidden' but the exit animation will not play.
Basically I am trying to mimick this template so I know it is possible...
Any help would be appreciated.
16 Replies
are you able to upload your .story file I will take a look.
Hard to say without seeing your work. it could be a number of things.
Don't mind taking a look at all.
You'll probly notice that on that example, when you "Hover out" your actually Hovering ON to something else. There is a trigger for Hovered over, but not hovered out.
You could try setting a trigger for
When State of (hovering object) is NOT hover, run the hover out animation.
Or you can use hotspots outside of the object and use hover over triggers there.
There are other possibilities too, but you need to get creative when the function you want, simply doesn't exist in the software your using.
Thanks for yor quick answers and interest. Here is my .story file if you want to have a look. https://drive.google.com/file/d/0B3jnn3eSISfKN3ZnN3JnVlZMRTg/view?usp=sharing
Midi Prefix, I am not sure how to create such logic as you describe. How can I make logic to run a specific animation?
The only way to "run a specific animation" that I know of, is to show a layer.
When a layer is shown, it plays it's time line. That could include the "animations" that storyline uses for objects.
It took me a minute to work out what you'd done, but essentially, your trying the same thing really, just using a state.
When you set the state of the dark rectangle object to normal (from hidden) it is effectively like showing a layer, in that it's timeline begins.
As you are using the entrance and exit animations, if you keep the mouse over the rectangle, it will play the entrance animation, then, when it reaches the end of it's timeline, it will play the exit animation. This isn't really what your after.
It SEEMS like it would make sense if when you used the "Restore on mouse leave" function within a trigger, it would then run the exit animation, but that's not what happens. It just resets the object to the hidden state, there's no timeline involved, so it instantly disappears.
I've come up with a way of doing it, though it's needlessly complicated, someone else may have a better way, and I'd be interested in seeing it.
The way I've done it, is I have made two layers for each square. One of the object with a short entrance animation on it (but not exit animation) and one with the exit animation (but no entrance animation)
When you hover over one of the squares, it shows the relevant ENTRANCE layer. Within this layer, it also sets a variable, which tracks which object is being hovered over.
When you hover OVER any other square, it checks which square you were hovering over (the above mentioned variable) and shows the relevant EXIT layer.
This means you need a variable for each square, two layers each square, and 8 or so triggers for each square as well, which is.... complex really. But it would do what you wanted it to do.
I have attached a .story file, which has just one of the squares set up (the purple one at the top) and leaves what you had there in place. Hopefully this helps you somewhat.
When previewing it, try hovering over the purple square, then mouse off to anywhere but the blue squre you already had set up, as that one could interfere with it still.
Thank you. I see what you have done there and it will work as long as the user stays on the colored squares, but if they move the mouse outside of the 'board', they will keep their state. In the example I am trying to copy, the 'exit animation' runs also when they leave.
And I also think that there will be a lot of triggers for this. I really appreciate your time and help and I will keep on looking for a simpler way. If not I will try to use your suggestion.
Thanks again.
Yep, you'd need hotspots outside of the menu area for that, though it fills the entire slide in this instance.
Looking again at the example... You'll notice that the text gets blurred during the animation stage. It's possible they are actually using video files for the animations, which might have more functionality.
The problem is still going to be that there is no native "Mouse off" trigger though I would think.
It was easier than I thought. Each colored square have three states, normal, hover & visited
On the state 'hover' i put the dark rectangle, and also made an entrance- and exit animation.
Now, the entrance animation will play on 'hover in' and the exit animation will play on 'hover out'.
Strange. When I click animations whilst editting states, they are greyed out.
Any chance you can upload the story file for that?
Yes, I got that too, but then I right clicked on the hover state and selected properties or whatever and then I could set the animations. Here is my updated .story file
https://drive.google.com/file/d/0B3jnn3eSISfKY2NzblFmbXdkeXM/view?usp=sharing
Yes, I noticed that too and it was very convenient. :)
I can't see any properties when right clicking?
Michael,
To create an animation for a hover state on Object1.
Create object2 that is what you want the hover state to be, and set an animation on it. Then copy object2. Edit object1's state and create a hover state. Paste Object2 as the hover state. When you do that, it keeps its animation, and you can edit it using the animation tab.
In short, I don't think you can add an animation to a state, but you can add an object that has an animation, and it keeps it.
What a remarkably intuitive method!
Nice one for finding this though, useful stuff.
:)
Thanks Walt, Now working, very very excellent trick to know...!
Glad that Walt was able to assist you here Michael :)
This discussion is closed. You can start a new discussion or contact Articulate Support.