Can I Import States?

In Storyline 360, States help us change the formatting of objects as learners move through an e-Learning—from indicating which items are interactive, to which have been visited, or which objects aren’t yet available. We utilize states all the time in developing courses, not to mention that states are one of the foundational concepts in our hands-on Articulate 360 training.

During Storyline 360 training, we learn to create custom states manually. However, while states are always simple to use, you might have premade graphics on hand that you simply want to import! So, let’s investigate those steps and answer this “as heard in training” question today: Can I Import States?

Let’s say, for instance, you have illustrations with your branding in mind, and you want to use those images to create an interactive object in your e-Learning, like our example here!

I’m happy to share how we can easily import those graphics as states in the steps to follow, since one of my favorite things to show people are shortcuts! Our motto at Yukon Learning is “Making e-Learning Easy for Everyone,” but I always love to say “…and faster too!”

Let’s get started.

Step 1: Name the Image Files

Here’s our first tip: name your image files accordingly!

We hold naming conventions during development to the highest degree. Naming significant elements when developing e-Learning is so near and dear to us, in fact, that you’ll often hear Yukoners singing “If you like it then you shoulda put a name on it!”

That’s no different today. Naming images to be imported as states is also extremely important to consider.

When images are imported as states, the names of your image files will become the names of your states in Storyline 360.

In this project, we named our image files:

• Normal
• Hover
• Visited
• Disabled

Be sure to use this naming tip with built-in states too!

If you name an image file “Hover,” Storyline 360 will automagically assume you want that image to be used for the Hover state of the object…so cool! (A “Hover” state is the automatic formatting of an item when learners move their cursor over it, no trigger required…again…so cool!)

Step 2: Select the Item

OK, with image files now named, let’s dive into Storyline 360.

We’ll get started by selecting the object that we’re adding states to. Should you not have that item, go on and create it!

You can bring my example imagery into your own project (Download them here!) by navigating to the Insert tab | Picture | Picture from file and selecting our file named “Normal.png,” thereby inserting the initial item onto your slide! This will act as the Normal state of the object we’ll be starting with. (The rest of the images will be used for the other states.)

Now, we like it, so we should “put a name on it” in the Timeline. Double-click to rename your starting object whatever makes the most sense to you. “Button 1” is what we named ours!

Step 3: Import

“Stefanie, how do we import the remaining states,” you ask?

With our object selected, we’ll open the States tab | Edit States | and select the photo icon/the Insert Pictures as States button.

Navigate through your computer to find and select the pictures you want to import. (Multi-select if you prefer, then select Open.)

When you’re finished importing, be sure to select Done Editing States in the States panel, and just like that…you’ve imported states in a flash!

Feel free to download our example file here, and if you have unique use cases for importing states or tips that you want to share, “import” your thoughts into the comments below!

~Stefanie