When designing e-learning, we often look for new ways to bring attention to important information. You might want the learner to remember a keyword, a meaningful graphic, or part of an image.
With Storyline 360, it’s easy to make your own animation effects by combining different features. In this post, we’ll share a few of our favorite ways to create emphasis in Storyline 360. So, continue reading as we put the spotlight on the “as heard in training” question: “How can I create a custom emphasis animation?”
Want to Follow Along? Download the Exercise File!
All the examples we showcase today are available in this Storyline 360 exercise file. Take a moment to download it to follow along.
The Basic Blink
First to the stage is the “basic blinking” technique. In this example, we made it look like the yellow street light is blinking. This method involves duplicating an object on the timeline for very short periods of time. Let’s shed some light on how this was done!
After duplicating the object we wanted to “blink” — in our case, an oval shape we labeled “yellow light” — we spaced them out on the timeline by a fraction of a second.
You may need to preview and make adjustments to the spacing a few times to get the blinking to look exactly how you want it to. But, that’s all there is to it!
Tip: Organize and streamline your timeline by grouping the duplicates using the Drawing Tools | Format | Arrange | Group feature on the toolbar.
Next up is the flashy “pulsing lights” technique. In this example, we create the illusion that objects on the screen are pulsing. This can be helpful to emphasize key terms or objects, or to draw the learner’s attention to a specific area on-screen. Here, we used this technique to make the neon signs appear to blink. Ready to see how this was done in Storyline 360?
Step 1: First, we applied an entrance and exit animation on the object. (Keep in mind that the shorter the duration of the animation, the quicker the image pulses.) We used a Fade animation, as that works best for blinking. But feel free to try out different kinds of animations, like Grow, Zoom, and Wipe, which can also make it look like something is growing or moving!
Step 2: Next, we added two triggers to the two objects that we wanted to pulse. (In our case, these are the “Welcome” and “Slots” signs.)
- The first trigger changes the state of the object to Hidden when the Entrance animation completes.
- The second trigger changes the state of the object to Normal when the Exit animation completes.
Note: Hidden is a built-in state, so you don’t need to build it!
Step 3: Finally, preview your project and adjust the animation duration as needed to make it as flashy as you want!
Another show-stopping technique is to create a “looping animation.” In the following example, one gear stands out from the others by spinning continuously. This method for creating custom emphasis combines layers, triggers, and animation. Let’s shine a light on how we came up with this effect!
Step 1: First, we isolated the object that we wanted to animate or loop (which is the object we named “gear”).
Step 2: Then, we created a layer (named “First Spin”) and pasted the object where we wanted it to be on the slide.
Step 3: Next, we applied a Spin entrance animation to the object, and adjusted the animation duration to 10 seconds.
Step 4: We duplicated this layer and renamed it “Second Spin” for clarity.
Tip: If the spinning object is also on the base layer, you can hide its visibility on the other layers by expanding the Base Layer Objects and “poke out the eyeball” next to the object.
Step 5: We added a trigger on the base layer to Show the layer “First Spin” at the desired point. For our example, we set it to “when the timeline reaches time 1s.”
- On the “First Spin” layer, we added a trigger to Show the “Second Spin” layer when the Entrance animation on the object (“spinning gear”) completes.
- Then on the “Second Spin” layer, we added another trigger to Show the “First Spin” layer when the Entrance animation on the object (“spinning gear”) completes.
Tip: If you wanted an object to start spinning immediately instead of on a delay, you would set the trigger to show the layer “when the timeline starts on this slide.”
Step 6: Preview and voila!
The Rolling Motion Path
Last, but never least, is a “rolling motion path” technique. You can use this to emphasize a graphic by combining a motion path with animation. Here, we used this technique to make it look like a tumbleweed was blowing across the desert. This simple technique involves just a few quick steps.
Step 1: First, we duplicated the “tumbleweed” object (so we have “tumbleweed1” and “tumbleweed2”).
Step 2: On the timeline, we configured “tumbleweed1” to leave the slide exactly when “tumbleweed2” appears on the slide.
Step 3: On “tumbleweed2”, we added a Spin entrance animation, as well as a motion path that moves it across and off the slide.
Tip: When doing this in your own project, consider removing the easing from the motion path applied to your motion path object. The easing controls how smoothly the object begins animation. Let’s see how we did this in our example.
Step 4: With “tumbleweed2” selected, we selected Animations | Path Options and set the Direction to None. This prevents “tumbleweed2” from spinning in place before moving.
Step 5: Preview, and then adjust the duration of the entrance animation and motion path as necessary.
These are just a few examples of how you can use Storyline 360 to customize your animations to add emphasis. Do you have other approaches to creating custom emphasis animations (perhaps using other features, states, or variables)? If so, we’d love to hear from you!
Want to Learn More?
For more on this topic, check out the following posts from Articulate and The Articulate Trainer blog:
We hope this has given you some ideas for making your next project stand out from the crowd!
NEW! The latest version of Storyline 360 now includes emphasis animations such as pulsing, shaking, and teetering. Learn more here!