Hover Craft

Last week I shared my top 10 Storyline Hacks (or creative workarounds as David Anderson & the Articulate staff prefer them to be called).  This week, I’d like to share how I created some of the fun hover animations on both that project and on the Mission Possible project.

Hover Basics

If you are new to or unfamiliar with Storyline, one feature you should get to know is the ability to add states to objects.  There are several built in states, one of which is “Hover”.  Basically, if you add this state to an object it will appear whenever the mouse is hovered over the object.  You can make the Hover state do almost anything including changing the look, adding sound and creating animation.  All these actions can come in handy for communicating directions to users, giving feedback or providing other support.

newstate    hover

 

Visual Changes

Here are some of my favorite visual changes from the Top 10 Hacks project. Note that all of them had some kind of visual change, plus the addition of a word describing the change and corresponding hack.

Randomize

Randomize is just a simple text change.  The Normal state has the text “{}  []  ||”  and the Hover state has the text “RANDOM  []  ||  {}  IZE”.  Yep.  That’s it.

random_1      randomize

 

Scratch

This effect was a simple change in the fill of the object from solid black to a striped pattern.  You can access these additional fill options by going to format shape.  You are able to fill your shape with a pattern, gradient, built in texture, or picture that you import.  Basically, you can fill it with anything.

fill

 

scratch_1      scratch

 

Slide & Scroll

These two are the same… and not the same.  In both, a left to right scroll is imitated, but they were achieved in different ways.  In Scroll, the scroll bar is an image that is flipped in the Hover state.  In Slide, the white circle is simply moved from one end of the slide to the other in the Hover state.

slide_1     slide

 

scroll_1     scroll

 

Hide

There are two ways to hide an object in the Hover state.  If it is an object created in Storyline, you can recolor it to match the background or make it transparent. If it is more complicated, like an imported picture, you can always delete the object from the Hover state.  Interestingly, you can also delete the object from the Normal state so that it appears when you hover.

hide_1      hide

 

Animation

Adding animation to a Hover state is quick and easy, but there is one trick to it: You can’t animate the objects copied from Normal state to Hover state.  Let me explain.

When you create a new Hover state for an object it automatically copies the object over.  You can then edit this object, delete it, add captions and other objects into the Hover state.  Anything that is added can be animated.  For example, in the Zoom animation, the large star burst shape is added to the rectangle’s Hover state so that shape can be animated to grow as it enters.

gif_zoom

 

If you want to animate the original object, you will need to delete or hide the original and then recreate, or paste in a copy of, that object.  This is what I did in the Loop example for the arc.  In addition, the word “LOOP” fades in.

gifloop

 

Audio Changes

The Mission Possible project had a lot of sound effects attached to the Hover states.  The computer turns on, things are written in a notebook, a calendar page flips, a door squeaks open; it was a lot of fun to make.

Just like with animation, this is an easy way to add some interesting audio to a project. All you have to do is insert your sound file while editing the Hover state.  Really – it’s that easy!

Note that the sound will play only while the mouse is hovering over that object.  It will then stop and start over the next time the mouse passes over. If you want to change the way the audio reacts to hovering you can instead add a trigger, and the audio, to the slide.  Your options for this are:

  • Audio plays on hover and does not stop (add a trigger to play the audio when the state of the object is equal to hover, do not add a trigger to pause or stop the audio)
  • Audio plays on hover, pauses when not hovering, and resumes from where it left off on the next hover (add a trigger to play when state is hover, add a second trigger to pause audio when the state of the object is not equal to hover)
  • Audio plays on hover, stops when not hovering, and starts from beginning on next hover – this is the same as it would act if you add audio to the hover state (add a trigger to play when state is hover, add a second trigger to stop audio when the state of the object is not equal to hover)

 

This is really just scratching the surface of what you can do with the Hover state in Storyline. What fun things would you like to create?  How have you used the built in states in an interesting way?  Share in the comments!

 

 

Advertisements

4 comments

  1. Nicely done, Allison! Thanks so much for explaining how you did each one. So nice when effects that are that simple to build can have such an impressive impact in the end. You did a great job!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s