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
  • ErinGozia's avatar
    ErinGozia
    Community Member
    When I click on a picture to zoom in, the objects in the background are showing up on top of the zoomed picture. Any ideas how to keep them in the background? I tried right clicking and choosing send back, this did not work.
    • TracyFarris-ed4's avatar
      TracyFarris-ed4
      Community Member
      I'm having the same issue - any advice would be very helpful! Thanks!
      • TracyFarris-ed4's avatar
        TracyFarris-ed4
        Community Member
        I've actually figured it out - instead of using the "states" of each image, create & use layers & then set triggers on the main layer to show the layer that contains the zoomed image. You'll also need to create a trigger on the zoomed image layer to hide that layer when the user clicks on it & it'll take the user back to the original layer. I also copied all the images from the main layer & overlayed it with a mask with a light opacity. Works like a charm!
  • 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?