#506 - Pan and Zoom for Portrait Images
The Challenge I recently built a Storyline course where I needed to display large portrait images, screenshots of emails we send to our customers. Since emails are typically scrollable documents, the screenshots ended up being quite long. The built-in zoom feature for images is limited to the courses boundaries, so with such long screenshots, zooming barely makes a difference. JavaScript API to the rescue This is where the new JavaScript API came to the rescue! I used the new API to create a pan and zoom interaction. You can view the tutorial and solution here. Copy the final JavaScript snippet for your projects here. Would love to set this up to grab the ID of the picture programmatically so we don't have to set this up on a trigger by trigger basis if any one has any ideas! 😀
Going Under the Hood of a FasterCourse Storyline 360 Course Template
Discover how FasterCourse templates are built in Storyline 360 in this recorded webinar featuring special guest Karlis Sprogis. The session walks through the deconstruction of a template, revealing the design techniques and practical tips used to create efficient, reusable Storyline 360 templates.Fixing Slide Positions For Drag Interactivity On Mobile Using JavaScript
Hey Heroes, I’ve recently been working on a number of client projects that really put the new JavaScript API in Storyline to good use! One challenge I had to overcome was how Storyline behaves on mobile devices. By default, it seems to add a slide-drifting transition when users swipe—great if you're building swipe navigation between slides, but not so helpful when users are meant to interact with objects on the slide itself. For example, trying to drag an object can instead cause the whole slide to shift, which can lead to some confusion and frustration. For this week’s challenge, I’ve put together a demo that showcases the solution I developed to disable this behaviour when needed. You can try out the project here: LINK Copy the JavaScript code snippet for your own projects: LINK I also recorded this video for YouTube showing the results:
Advanced Storyline? Creative Way to Use Button Sets w/ Quizzes
Discover how advanced Articulate Storyline skills aren’t limited to complex variables or JavaScript. In this tutorial, you'll learn a clever technique using button sets in Articualte Storyline 360 to create multiple quiz questions on a single slide.Order a Tree
I took an example from this page Storyline 360: JavaScript Best Practices and Examples to open a new email with pre-filled information because that is something that will be useful for us going forward. Choose the tree with the buttons which will bring up the order button for that tree. Pretty basic. Order a TreeGreat use of Storyline in Rise for Listicles
This basic tab style interaction is made in Storyline for use as an alternate way to present a list of content in Rise. This is simple yet modern enough design to add that extra engagement factor and clearly present text, icons, additional content, and more! The Storyline is designed at 1280x500 to allow for HD width format and still allow for the full interaction to fit (without scrolling) in a smaller screen. Download the Storyline file | See it in action here!
