hover effect

This is part of a previous problem that i have not been able to find a solution for. 

I am trying to animate a plane ( as a compass) when hovering over a button. I was recommended to use States and insert an animated Gif inside each state. 

Now I use a trigger: change State of  X to State Y when Mouse hovered over.

Restore on mouse leave.

but it will not jump back to the initial NORMAL state. 

And I don't see a onMouseRelease option ?  


11 Replies
ahssan moshref

New Storyline file to test the function:

Green rectangle is the button. 

The plane (compass) has two instances. each instance is a video clip of the animated plane. 

The idea is to hover over the button and have the plane instance change. 

The problem is when I hover out then instance is empty ( the video does not display) 

Are you guys able to help me resolve it?

ahssan moshref

Sorry Wendy. I should clarify. I am using the button to control animation in another object. 

So I hover over the cloud and want the plane to move. and when I hover out, I want to plane to move back. I created two animations and placed them in instance of a graphic. please see above storyline. Your suggestion is not applicable to my problem.

Wendy Farmer

Just a thought - I'm flying interstate so don't have access to SL for the moment. I often use offstage objects to control things on stage especially hover movements. . Could you have an object offstage that changes state when the mouse is hovered over and on that state change another trigger to play animation/video?

ahssan moshref

There is a MouseHoverOver trigger, but no MouseHoverOut trigger. And I can't use timeline because I am using it for other functions.

Man I really miss Macromedia Flash. They had all these primitive functions figured out. Yet when I use Storyline it becomes rocket science. And this is not the first time.

I spend 3 days on this. I am gonna move on.  And in the future focus on building less Storyline Modules and more Web style Modules.

Thanks for your feedback,



Luke Benfield


Attached are the best two options I can come up with. Since the plane does not start and stop in the same places for the up and down animations, it still looks a bit choppy.

However, hopefully one of these will work for you, or at least give you a few other methods to experiment with.

Option 1 is using layers. There's an up button and a down button. I know this isn't quite what you were looking for, but you might be able to put a larger down button behind the up button so that when you move from hovering on the up button, it will hover over the down button.

Option 2 is my attempt of the states method you were referring to. It's the closest I could get.

One other idea (Option 3) might be to use motion paths. - You would need two graphics - the blue background of the animation, and then a graphic of the plane with a transparent background. I think you could accomplish what you're looking to with much less of a headache using motion paths to move the plane up and down. I did a quick mockup for you to see how it would work.

Again, don't know if any of these will be solutions for you. Good luck.

ahssan moshref

Hi Luke, thanks for the hard work. My apology for not giving you more context. 

ya the first two options are not working given that I have 3 buttons in one layer that use motion path to slide in and out of the scene. It will be very chaotic to put all those transparent layers.

Option 3 works for this animation but not for the remaining two which requires the plane to pivot to the left and pivot to the right.  There is just no pivot option in Storyline.

However you did use animation completed trigger which i did not know it could be used that way.  I just have to keep reminding myself not to expect too much when using Storyline.

Anyways Thanks.


Luke Benfield

To mimic a Pivot - You could potentially use the Spin animation and set one animation to a quarter spin, counterclockwise, and the other animation a quarter spin clockwise.

You could probably set up similar triggers as the motion paths to accomplish that with your other buttons.

ahssan moshref

Spin animation - I have that on the buttons i hover over. You know what happens when I hover out and hover again. It continues where it left off.

I can't spend anymore time on this effect without the certainty that something might work. Else the most expensive component of the project will be pivoting an icon of a plane.