Can I Create an Animated “Selected” State?

Storyline makes it easy to create a custom state for any object on your slide. There may be a time where you’d like to use animation instead of a static state change. One question we received recently was, “Can I create an animated Selected state?”

The short answer is “Yes,” …so let’s take a look at how you can do it!

Add the Selected State

To add and/or edit the Selected state of an object, select the item and open the States tab below the slide. Click Edit States and the “New” icon to add a new state.

 

While you could create a custom state at this point, Storyline has a built-in Selected state, so it’s best to choose Selected from the drop-down menu and click Add.

Using the built-in state eliminates the need for adding a trigger to change the state. If you go the custom route, the state will never be activated unless it’s triggered to show. The built-in states save a lot of development time, so we always recommend using them when they do the job!

Edit the Selected State

After you click Add, you are still editing the state. Now you can either add an animated .gif or add an image you’d like to animate. The benefit of using a .gif is that its animation can continue to loop (if that is how the .gif was created). You can animate a static image once, but since you are inside a state, you cannot loop the animation. After your image is in place (and animated) click Done Editing States.

Tip: There are many resources for animated .gifs. A good place to start is downloading a set of free animated icons at here!

Using Format Painter

To easily apply the same Selected state to each button on your slide, use Format Painter on the Home tab to paint the state onto each of the buttons (or objects) on your slide.

Once you have used Format Painter on each of the objects, preview your slide to make sure all the selected states are working well.

Tip: Another option is to create the first button with its customized Selected state and duplicate as needed.

Create a Button Set (Optional)

At this point, your user would see the animated Selected state of all buttons clicked unless they click on the button again to un-select it. If you want to create the effect of only the actively selected button being animated, simply create a Button Set for your objects.

First, select all objects with the customized Selected state (this can be done by pressing Ctrl while clicking on each object). Then, right-click and choose Button Set. “Button Set 1” is there by default, but you can also create a button set with a custom name, if you wish.

Summary

An animated Selected state is a great way to make a Storyline interaction visually “pop.” See our example in action at this link or download your copy of the story file here so you can take a look at it under the hood. What are your ideas for using Selected states or .gifs in Storyline? Let us know in the comments below!

Happy Developing!

~Katie