How Can I Trigger an Object to Change Size?

Perhaps you need to create the illusion of an object moving closer or farther away, maybe you want to animate data in an infographic, or you’re resizing an object to help draw learner focus to it. For these reasons and more, resizing slide elements is a discussion that comes up frequently during our hands-on Storyline 360 training.

The objects in this blog are closer than they appear…as we answer this “as heard in training” question: “How can I trigger an object to change size?”

As with many design solutions in Storyline 360, there are many ways to achieve this effect. Today, we’ll provide two of those options!

In this demo, we’ve made our sheep friend appear to be moving closer to us by triggering its size to grow larger. We’ll discuss how to do this using states or layers…which one is up to you!

For an even closer look, you can download our source file here!

 

States Method

One way we can trigger to resize an object is through using states.

The first step is to create multiple custom states for the object you want to resize, with each state being an incrementally larger version of the object (or smaller, if that’s your goal).

Let’s use the following steps to do just that:

1. Select the object
2. Open the States panel
3. Select Edit States
   
   
4. Create a new state (via the new state button/blank page icon) and give it a name
5. Resize the object in the new state (We resized the sheep image to be larger so it seems like it’s moving closer to us!)
   
6. For each subsequent state, duplicate the prior state you just created (with the duplicate button/double-page icon) and resize even further
   

To resize an object proportionally, resize by dragging from any corner. (If your object is a shape, you’ll also want to hold the Shift key on your keyboard as you resize.) Alternatively, you can right-click on the item, select Size and Position, and adjust the Scale.

Repeat steps 5 and 6 above until you have all the states and sizes you need!

Tip: For precise alignment of each image, turn on the design grid and use Storyline 360’s handy drawing guides.

Now that we’ve created multiple custom states of various sizes, we’ll use triggers to change the state of the object at the desired point(s) in time. By using triggers, you can control how and when the size change occurs.

To help with timing, we would take advantage of cue points here, especially if the effect needs to be synced to accompanying narration, but you can also rely on the timing listed at the top of your Timeline panel.

Once the triggers are built, your effect is complete!

For a more gradual progression, create more images with less of a difference in size and trigger them to change in faster sequence.

 

Layers Method

An alternate approach to achieve the same result is to use layers instead of states!

In this scenario, create duplicate images of the original graphic in various sizes, placing each on a separate layer. Then, build triggers to show your layers at various timestamps.

Tip: If you decide to utilize layers rather than states, just be conscious of Slide Layer Properties! You may need to adjust each layer to “Hide other slide layers” or to “Hide slide layer when timeline finishes,” depending on your design.

A final consideration: whichever method you’ve chosen, you might also bring animation into the mix, adding animations to the images or even transitions to your layers.

As you can tell, like we say in Articulate 360 training, there are many ways to do one thing in Storyline 360. We hope this fun technique will give you even more inspiration for your development—in all sheeps and sizes!

 

 

 

 

~ Tara