Blog Post

Articles
2 MIN READ

How to Create Your Own Zoom Picture Effect in Storyline

MikeEnders's avatar
12 years ago

The image zoom is a great built-in feature in Storyline. You simply add a picture, select the zoom feature, and—voila!—your image expands when learners click on it.

A community member recently asked about creating a custom zoom feature to trigger an automatic “unzoom” of a zoomed-in image (useful when you have items entering the screen at different times and don’t want the learner to unintentionally miss them because they’re blocked by the zoomed image). Luckily, Storyline makes it easy to create a modified zoom effect, like this:

Step 1: Insert your image

Size the image to its unzoomed size and position in your project.

Step 2: Make your zoom the selected state

With the selected state active, increase the dimensions of the image, and position it where you want it to appear (centered on the canvas is a good starting point).

Step 3: Preview your basic zoom effect

Click your image once to enlarge, and again to shrink it back down.  Pretty easy right?

Step 4: Add a trigger to automate the image unzoom

Now that you’ve created your basic zoom effect, you can add a simple trigger to unzoom the image when a new image appears on the screen. The trigger will change the state of the pre-existing images to normal when the timeline starts for the new items. Note: You’ll need one trigger for each of the pre-existing images.

 

If you want to try this yourself but don't have Storyline, no problem. Just sign up for a fully functional, free trial. And don't forget to post your questions and comments in the forums! We're here to help. For more e-learning tips, examples, and downloads, follow us on Twitter.

Published 12 years ago
Version 1.0
  • MichelDaw's avatar
    MichelDaw
    Community Member
    I have had some success with something similar (though I changed the order a bit). The trick requires two objects, the original at full size, and a second object at the final desired size. First, set the original object's Exit Animation to Shrink. The second copy, scaled to the final size is introduced in the timeline and stacked above the original, and centered on the original at about the time when the original has shrunk to that size. The original object will continue shrinking, but since it will be stacked BEHIND the second copy, it will appear to have stopped shrinking at the desired size. Then add a motion path to the second object to position it.
  • OK, So I got the image to enlarge but how do I get it to go back to the normal size?
  • Hey Team!
    I have a learning module that I am updating. I am trying to remove the zoom feature for a graphic that is a document. I deleted the previous document and added a new document, and something weird happened. I still see a zoomed picture of the old document instead of the new one! Help! How do I get rid of the old image, which seems to be a ghost here?
  • Hi Mike,

    This was a really helpful tutorial!

    I have two images on one slide. So, I added two triggers to hide the image that is not active. For example, when a learner hovers over Picture A, the hover state will Zoom that image. For the trigger, I added "Set state of Picture B to Hidden when the user hovers over Picture A. Restore previous stat when the user hovers out" and I did the same for Picture B. It works like a charm!
  • KevinGowdy's avatar
    KevinGowdy
    Community Member
    Is there any way to use a layer to zoom in on a table or graph just by hovering over the image?