\n
Zooming and Magnifying Images in E-Learning #374: Challenge | Recap
\n
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.
\n
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.
\n
Using Sliders to Magnify Parts of a Photo
\n
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.
\n
\n
View the example | Download the source
\n
Motion Blur Zoom Effects
\n
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.
\n
\n
View the example
\n
Challenge of the Week
\n
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.
\n
In previous challenges, we covered some features and concepts that could work for zooming and magnifying parts of an image:
\n
\n
Ideas and Examples
\n
Check out the following challenges for some features and design concepts that could be used for zooming and magnifying high resolutions images:
\n
\n
Share Your E-Learning Work
\n
\n- Comments: Use the comments section below to share a link to your published example and blog post.
\n- Forums: Start your own thread and share a link to your published example..
\n- 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.
\n- Social Media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can track your e-learning coolness.
\n
\n
Last Week’s Challenge:
\n
Before you zoom into this week’s challenge, check out the restaurant menu inspired examples your fellow challengers shared over the past week:
\n
\n
Restaurant Menu Inspired Course Starters #373: Challenge | Recap
\n
\n
New to the E-Learning Challenges?
\n
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.
\n
Learn more about the challenges in this Q&A post and why and how to participate in this helpful article.
\n
Way too cool! I'd like to learn how to publish full screen like that.
","body@stringLength":"116","rawBody":"Way too cool! I'd like to learn how to publish full screen like that.
","author":{"__ref":"User:user:441585"},"postTime":"2022-06-01T08:20:02.000-07:00","customFields":[],"attachments":{"__typename":"AttachmentConnection","edges":[],"pageInfo":{"__typename":"PageInfo","hasNextPage":false,"endCursor":null,"hasPreviousPage":false,"startCursor":null}},"repliesCount":1},"Revision:revision:1121908_1":{"__typename":"Revision","id":"revision:1121908_1","lastEditTime":"2022-06-01T13:07:28.000-07:00"},"QueryVariables:ReplyList:message:1121908:1":{"__typename":"QueryVariables","id":"ReplyList:message:1121908:1","value":{"id":"message:1121908","first":10,"sorts":{"postTime":{"direction":"ASC"}},"repliesFirst":3,"repliesFirstDepthThree":1,"repliesSorts":{"postTime":{"direction":"ASC"}},"useAvatar":true,"useAuthorLogin":true,"useAuthorRank":true,"useBody":true,"useKudosCount":true,"useTimeToRead":false,"useMedia":false,"useReadOnlyIcon":false,"useRepliesCount":true,"useSearchSnippet":false,"useAcceptedSolutionButton":false,"useSolvedBadge":false,"useAttachments":false,"attachmentsFirst":5,"useTags":false,"useNodeAncestors":false,"useUserHoverCard":false,"useNodeHoverCard":false,"useModerationStatus":true,"usePreviewSubjectModal":false,"useMessageStatus":true}},"ROOT_MUTATION":{"__typename":"Mutation"},"CachedAsset:text:en_US-components/community/NavbarDropdownToggle-1744833251000":{"__typename":"CachedAsset","id":"text:en_US-components/community/NavbarDropdownToggle-1744833251000","value":{"ariaLabelClosed":"Press the down arrow to open the menu"},"localOverride":false},"CachedAsset:text:en_US-shared/client/components/users/UserAvatar-1744833251000":{"__typename":"CachedAsset","id":"text:en_US-shared/client/components/users/UserAvatar-1744833251000","value":{"altText":"{login}'s avatar","altTextGeneric":"User's avatar"},"localOverride":false},"CachedAsset:text:en_US-shared/client/components/ranks/UserRankLabel-1744833251000":{"__typename":"CachedAsset","id":"text:en_US-shared/client/components/ranks/UserRankLabel-1744833251000","value":{"altTitle":"Icon for {rankName} rank"},"localOverride":false},"CachedAsset:text:en_US-components/tags/TagView/TagViewChip-1744833251000":{"__typename":"CachedAsset","id":"text:en_US-components/tags/TagView/TagViewChip-1744833251000","value":{"tagLabelName":"Tag name {tagName}"},"localOverride":false},"CachedAsset:text:en_US-components/users/UserRegistrationDate-1744833251000":{"__typename":"CachedAsset","id":"text:en_US-components/users/UserRegistrationDate-1744833251000","value":{"noPrefix":"{date}","withPrefix":"Joined {date}"},"localOverride":false},"CachedAsset:text:en_US-shared/client/components/nodes/NodeAvatar-1744833251000":{"__typename":"CachedAsset","id":"text:en_US-shared/client/components/nodes/NodeAvatar-1744833251000","value":{"altTitle":"Node avatar for {nodeTitle}"},"localOverride":false},"CachedAsset:text:en_US-shared/client/components/nodes/NodeDescription-1744833251000":{"__typename":"CachedAsset","id":"text:en_US-shared/client/components/nodes/NodeDescription-1744833251000","value":{"description":"{description}"},"localOverride":false},"CachedAsset:text:en_US-components/messages/ThreadedReplyList-1744833251000":{"__typename":"CachedAsset","id":"text:en_US-components/messages/ThreadedReplyList-1744833251000","value":{"title":"{count, plural, one{# Reply} other{# Replies}}","title@board:BLOG":"{count, plural, one{# Comment} other{# Comments}}","title@board:TKB":"{count, plural, one{# Comment} other{# Comments}}","title@board:IDEA":"{count, plural, one{# Comment} other{# Comments}}","title@board:OCCASION":"{count, plural, one{# Comment} other{# Comments}}","noRepliesTitle":"No Replies","noRepliesTitle@board:BLOG":"No Comments","noRepliesTitle@board:TKB":"No Comments","noRepliesTitle@board:IDEA":"No Comments","noRepliesTitle@board:OCCASION":"No Comments","noRepliesDescription":"Be the first to reply","noRepliesDescription@board:BLOG":"Be the first to comment","noRepliesDescription@board:TKB":"Be the first to comment","noRepliesDescription@board:IDEA":"Be the first to comment","noRepliesDescription@board:OCCASION":"Be the first to comment","messageReadOnlyAlert:BLOG":"Comments have been turned off for this post","messageReadOnlyAlert:TKB":"Comments have been turned off for this article","messageReadOnlyAlert:IDEA":"Comments have been turned off for this idea","messageReadOnlyAlert:FORUM":"Replies have been turned off for this discussion","messageReadOnlyAlert:OCCASION":"Comments have been turned off for this event"},"localOverride":false},"CachedAsset:text:en_US-shared/client/components/nodes/NodeIcon-1744833251000":{"__typename":"CachedAsset","id":"text:en_US-shared/client/components/nodes/NodeIcon-1744833251000","value":{"contentType":"Content Type {style, select, FORUM {Forum} BLOG {Blog} TKB {Knowledge Base} IDEA {Ideas} OCCASION {Events} other {}} icon"},"localOverride":false}}}},"page":"/blogs/BlogMessagePage/BlogMessagePage","query":{"boardId":"e-learning-challenges","messageSubject":"zooming-and-magnifying-parts-of-an-image-in-e-learning-374","messageId":"1121864","replyId":"1121908"},"buildId":"ISAhs0UxT148eG089lpQq","runtimeConfig":{"buildInformationVisible":false,"logLevelApp":"info","logLevelMetrics":"info","openTelemetryClientEnabled":false,"openTelemetryConfigName":"articulate","openTelemetryServiceVersion":"25.3.0","openTelemetryUniverse":"prod","openTelemetryCollector":"http://localhost:4318","openTelemetryRouteChangeAllowedTime":"5000","apolloDevToolsEnabled":false,"inboxMuteWipFeatureEnabled":false},"isFallback":false,"isExperimentalCompile":false,"dynamicIds":["./components/customComponent/CustomComponent/CustomComponent.tsx","./components/community/Navbar/NavbarWidget.tsx","./components/community/Breadcrumb/BreadcrumbWidget.tsx","./components/blogs/BlogArticleWidget/BlogArticleWidget.tsx","./components/messages/MessageView/MessageViewStandard/MessageViewStandard.tsx","./components/customComponent/CustomComponentContent/TemplateContent.tsx","../shared/client/components/common/List/UnwrappedList/UnwrappedList.tsx","./components/tags/TagView/TagView.tsx","./components/tags/TagView/TagViewChip/TagViewChip.tsx"],"appGip":true,"scriptLoader":[]}
