Zooming and Magnifying Parts of an Image in E-Learning #374

David Anderson
By David Anderson

Showing Techniques for Magnifying Parts of an Image in E-Learning #374

Zooming and Magnifying Images in E-Learning #374: Challenge | Recap

A typical design challenge for course designers involves working with high-resolution images in a smaller, mobile-friendly screen size. You can run with Storyline 360's zoom region, markers, and zoom picture tools for quick-hit solutions. All three will quickly give learners a close-up view of detailed images.

But when you're looking for more custom solutions, you have to get creative. And that's what this week's challenge is all about! But first, let's take a look at a few examples.

Using Sliders to Magnify Parts of a Photo

Sliders are most often used to let learners explore cause-and-effect relationships or manipulate data and numeric values. In this example, the slider is used to reveal parts of the photo. 

Using Sliders to Magnify Parts of a Photo

View the example | Download the source

Motion Blur Zoom Effects

Here's a neat example that simulates a motion blur effect to zoom into parts of a painting. The zoom blur effect is created by layering multiple images with varying blur values and progressively revealing each image as the timeline plays.

Simulating Motion Blur Zoom Effects

View the example

Challenge of the Week

This week, your challenge is to share a solution to allow learners to zoom in or magnify parts of an image, graphic, document, or video.

In previous challenges, we covered some features and concepts that could work for zooming and magnifying parts of an image:

Ideas and Examples

Check out the following challenges for some features and design concepts that could be used for zooming and magnifying high resolutions images:

Share Your E-Learning Work

  • Comments: Use the comments section below to share a link to your published example and blog post.
  • Forums: Start  your own thread and share a link to your published example..
  • Personal blog:  If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure.
  • Social Media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can track your e-learning coolness.

Last Week’s Challenge:

Before you zoom into this week’s challenge, check out the restaurant menu inspired examples your fellow challengers shared over the past week:

Course Starter Templates Inspired by Restaurant Menus #373

Restaurant Menu Inspired Course Starters #373: Challenge | Recap

New to the E-Learning Challenges?

The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challengesanytime you want. I’ll update the recap posts to include your demos.

Learn more about the challenges in this Q&A post and why and how to participate in this helpful article. 

Related Content

Zooming and Magnifying Images in E-Learning #114

David Anderson
David Anderson
Director, Customer Training

Image Zoom and Magnification Techniques in E-Learning #226

David Anderson
David Anderson
Director, Customer Training

18 Ways to Zoom and Magnify Images in E-Learning #374

David Anderson
David Anderson
Director, Customer Training
87 Comments
Jodi M. Sansone
almost 2 years ago05/29/22 at 1:20 am (UTC)
Quick Guide to the Organs of the Human Body Demo: https://jodisdemos.s3.amazonaws.com/374+Zoom/story.html Download: https://jodisdemos.s3.amazonaws.com/374+Human+Body+Zoom.story I have an annual physical this week so the state of my organs is on my mind. :) I learned about one of the more mysterious organs--the thymus--while doing this demo.
Daniel Canaveral
almost 2 years ago05/29/22 at 2:48 am (UTC)
Hello heroes! I'm anticipating a very busy upcoming week (despite it being a 4-day work week for most of us here in the USA), so I'm submitting my project a bit earlier than usual. Wish I could have presented more incredible works by Saimir Strati. He's simply a genius! https://360.articulate.com/review/content/ffde0800-83f5-4d88-a919-dee38e355782/review
Chris Hodgson
almost 2 years ago05/29/22 at 4:12 pm (UTC)
This week's challenge is a great opportunity to demonstrate some of the fantastic zoom and animation effects that are possible in Articulate Storyline with some extra CSS and JavaScript code! Here is my entry, an interactive theme park map: https://discoverelearninguk.com/projects/zooming-and-magnifying-parts-of-an-image-in-e-learning/ For anyone interested in how this effect is achieved, I created a video tutorial with all the steps in an episode of my Storyline Magic Series on YouTube. Links to this and future episodes can be found here: https://community.articulate.com/discussions/building-better-courses/storyline-magic-series-a-new-video-series-launched-on-youtube
Ron Katz
almost 2 years ago05/30/22 at 7:08 pm (UTC)
That was a fun contribution, Kyle. I like the build up of the crime scene and the bios of the suspects. The webobject on the computer was well executed. I would have liked a little more explanation about why they people were either guilty or not guilty. I got the answer right the first time through, then tried the other two to see the difference. Maybe you could explain the tought process which lead to each suspect being either guilty or not guilty. As an interaction wiht a zoom effect, however, everything worked as expected. Well done.
Ron Katz
almost 2 years ago05/31/22 at 2:53 pm (UTC)
That was fun, Samuel. Thank you for sharing the download. It was really helpful to see how you put this together. I like the drag-n-drop with no target to control the movement of the plane. I don't think I would have thought of that. Also, the plane moving on a motion path on the bottom, felt a lot like what you experience when you use wifi while on a plane and check to see how close you are to your destination. Initially I thought I was looking at a slider being advanced, but the 59 second motion path was a much better option. Thanks again for the share.
Cristina Graham
almost 2 years ago06/01/22 at 4:56 pm (UTC)
Hey! Just getting back. This is an excerpt from the FIRST course I ever created in Storyline for work. I added the Zoom feature based on the instructor's audio. Oh, and I added a motion path at the end after watching a webinar with Dave on using them. https://kiddwork.s3.us-east-2.amazonaws.com/Anxiety+Module+Course+Sample+-+Storyline+output/story.html
Tracy Carroll
almost 2 years ago06/01/22 at 10:37 pm (UTC)
If you're working from home, do you feel like you're losing the right work/life balance? Here are 4 tips to help! Interactive demo: https://tracycarroll.net/4TipsHomeOffice/story.html Blog post: https://tracycarroll.net/work-from-home-tips/ In this demo, I decided to enlarge the font for the closed captions, and have the cc on by default. The user can click the cc button to turn off the captions, if they desire. The blog post explains the settings for this arrangement.
Hien Bui
almost 2 years ago06/03/22 at 8:45 am (UTC)
Hi Heroes, This is my first-ever submission for challenges. Due to the limit of time, I only add Zoom effect on Van Gogh's Starry Night painting. I tried to add the theme song "Vincent" thorough the course (not be interrupted when changing slide) but I couldn't. Any related help would be much appreciated :) Here is my mini gallery: https://hbelearning.s3.ap-southeast-1.amazonaws.com/Van+Gogh's+iconic+paintings+-+Storyline+output/story_html5.html
Tracy Carroll
almost 2 years ago06/03/22 at 7:02 pm (UTC)
Hi Hien, I frequently use music throughout short Storyline courses by putting everything on one slide, using layers rather than a series of separate slides. The music track is on the base layer, and plays while users visit the various layers. *Don't forget to make sure you have the right to play the music you select, and follow all copyright laws. And always include the volume icon, so users have an easy/quick way to turn off or lower the volume of the music.
Yvonne Urra-Bazain
almost 2 years ago06/03/22 at 1:27 pm (UTC)
I recently heard about a customized map maker, Felt.com, and explored a few of its features to recreate my hiking experience at Lost Maples State Natural Area. I used the park trail map for descriptions and pinned sites, as well as trail color coding, then inserted my own photos from my experiences in the park for a more interactive version of the park's PDF and paper map. Here's my simple demo of magnification using Felt tools: https://360.articulate.com/review/content/c8a8bbfb-0d92-47eb-85f3-2863a9e721c0/review And here's my live, scalable map of Lost Maples trails: https://felt.com/map/Lost-Maples-State-Natural-Area-H6jdZ5dvR9B9BrXAmqo9BqWnA
Janelle Chacon
almost 2 years ago06/07/22 at 9:18 pm (UTC)
For this submission I used three different functions to zoom and magnify images. (1) The first option was to use the built in click to zoom image on slide one. One slide two I (2) inserted a Zoom Region, and (3) used states and buttons to let the user zoom out and in. https://360.articulate.com/review/content/f49d9319-cdaf-4a16-97bf-a50a7edeef52/review
Sign In to Comment