Animating Buttons

I have learnt a new method of animating buttons in Storyline 2. By creating gifs using basic shapes in PowerPoint I was able to make the buttons in the presentation below animate on hover over.

Turn your sound on to get the maximum effect


Here is how I did it:

First I created the original state of the image on Powerpoint using basic shapes.

I then added a large transparent square behind the image and saved both of these in a folder calling the picture "1". (adding a large square behind is important so that all your images will be the same size and wont grow and shrink during the animation.)

I then manipulated the image slightly by moving some of the shapes around a bit. For example in the lubricants and sprays button I moved the lever on the bottle back slightly. and added some blue lines for the water effect.

I then saved this new image with the transparent square still behind and saved them as "2"

I then repeated this for every frame of the animation. (To make the GIF's look as smooth as possible I only moved the image one or two millimeters at a time between frames)

I then imported all of my pictures the site for the bottle I had around 20 different pictures. (by numbering my pictures at the earlier stage it meant I could import them all easily and I wouldn't have to change the order of them.

Then I changed the animation speed and downloaded it in a GIF format.

On Articulate Storyline I then added my starting frame of the Gif as a picture and then added a hover state to it. On the hover state I inserted the GIF.



7 Replies
Adele Sommers

Jordan, what a fun, fresh idea for creating buttons! It seems to me that not only can you create your own gifs, as you've done so cleverly, but another variation could be to use pre-made gifs (e.g., from video clips) in the hover state, which could produce an interesting effect. 

Thank you so much for sharing the idea!