Extending Articulate Storyline 2’s Animations

Josh Stoner | 07/16/2015

Articulate’s Storyline 2 has answered the call for more animation effects for its users. With an appropriate balance of use, animations can be a great enhancement for any course.  When using them in a course, I often like to make use of subtle animations that create a more fluid experience when users interact with onscreen content, buttons, or interface elements.  Here are some of my tricks for enhancing and extending the standard animation options available within Storyline 2 to add a subtle flair for your next course.

Placing objects within another object’s state

This can sound a bit complicated at first but can be applied in a simple manner for very interesting results.  Taking a base object, such as a rounded rectangle to represent a card with information, it will appear as a designated button with user interaction but will also be closeable and will exit the screen.  We can do this using two layers, one for the entrance and one for the exit. However, we can also ease this development time by inserting the objects within another’s state.  With the base card object set up, we can build up any text or colors we want to add.  When a design is decided on, all of the objects except for the base card object are selected and then Cut (Ctrl+X).  Following, we select the base and open the States panel. Click on the ‘EDIT STATES’ button and Paste (Ctrl+V) the objects we just cut.  Once you click ‘DONE EDITING STATES’ all the objects are now nested as a whole to the base.

What is the benefit of this? We can have the base card and all of its nested objects jump between “hidden” and “normal” states with entrance and exit animations attached to just the base.  This will integrate entrance and exit animations with less triggers since all the nested objects are treated as one.  This additionally removes the need for duplicating layers, adjusting layer timelines, adding/removing layer transitions and linking layers.

1_objects_nested_in_states

An additional benefit of nesting objects within another object’s state can shift the origin of an animation effect, such as growing from the center of the host object rather than the center of the individual object. 

2_objects_nested_in_states2

Group animations with individual nested object animations

When you group objects together and use a group animation, did you know that you can attach individual animations to each nested object within the group?  A group’s main animation will remain intact with the animation of each nested object combined with the individual object animation.  Results are often better with a slower group animation timing aligned with faster animation timing of the nested objects.

3_grouped_objects

 

Duplicate layers

This may not sound like much of an animation trick, but have you ever noticed when a screen of new information appears that it is often a nice flow of content in, but when the content leaves, it looks as though it just flashed off?  I find this sometimes jarring, disconnecting from the original smooth introduction of content that was present. 

For a quick fix and an alternative to the first trick, simply duplicate the content on a layer.  The initial layer will provide the entrance effect(s) of content and the duplicated layer will provide a corresponding exit effect.  The key when using duplicated layers, specifically on the exit layer, is to remove any layer transition effect and shorten the timeline to the minimum of 0.25 seconds. This allows all of the objects to disappear at the start of the timeline.  It is also important to check out the layer properties and ensure “Hide slide layer when timeline finishes” is checked.

Another great use of duplicating layers for an animation is to provide a looping effect for a continuing effect or replay.  This is accomplished by resetting a layer to the initial state when revisiting and jumping to the relevant layer when the timeline ends. 

 

4_duplicate_layers

5_duplicate_layers2

Trigger animations via the timeline

In Storyline 2, triggers can be initiated upon a certain time point on the timeline whether this is set via a specific time (e.g., Timeline reaches 1.5 seconds) or a cue point (e.g., Timeline reaches cue point 3) or even the basic timeline starts/ends.  The benefit of this combined with an animation effect, such as motion paths, can trigger objects on a base layer to emerge and leave based on the exit or entrance of a layer. For example, with the use of cards again, the cards slide in from the sides upon the entrance of the base slide.  When a user clicks on one of the cards to open up a new layer the cards will exit via the sides they had entered and the new layer of content emerges.

6_timeline_trigger_animation

Josh Stoner

Josh is a Content Developer with Cursim