Immersive Phone Conversation in Storyline
Download this cool (FREE) Phone Conversation template for Storyline; perfect for any scenario with two characters talking. It’s layered with voiceovers, triggers, animations, and clean layouts. It also uses animated APNGs, which look way smoother than jagged GIFs that struggle with transparency. Preview it here: https://www.craftuxd.com/product-page/sellsmart-freebie Check out tutorial here: https://youtu.be/kMpUcYJRNnE?si=jON1XKQtA-4AsIRPUnexpected Encounter Template
I was recently challenged to develop creative eLearning templates where content can be added around a fun adventure, designed to captivate and engage learners. The result is the "Unexpected Encounter", where instructors can seamlessly integrate custom content into an intriguing narrative structure, allowing participants to dive deeper into the material through scenario-based learning. This template follows the journey of Alex, whose routine conclusion to a training workshop unexpectedly shifts into a mysterious experience that he can only resolve by explaining what he just learned in the workshop. The template offers numerous possibilities, from knowledge checks and avatar selection to badge earning and more. You can be as creative as you want! Hopefully it will spark some ideas. To view the template, use this link: Link to Unexpected EncounterFlip animation using GSAP in Articulate Storyline to have smooth flip animation.
We recently faced a challenge with the built-in swirl animation in Storyline (SL). Our client found it cluttered and pointed out that the animation flipped twice, which logically should result in showing the same side again. We agreed with this feedback and decided to explore alternative solutions. After some research and experimentation, we discovered that using GSAP (GreenSock Animation Platform) provided a much cleaner and more logical flip animation. GSAP allowed us to create a smooth and visually appealing flip effect that only flips once, addressing the client's concerns effectively. By integrating GSAP with Storyline, we were able to enhance the overall user experience and meet the client's expectations. This solution not only resolved the issue but also opened up new possibilities for creating more sophisticated animations in our e-learning projects. Hope it will be helpful..Collection of Carousel Templates
Some experiments! Hope this gives you some inspo. Vertical Sliding Interaction (Light): Preview Notes: Uses hover layers which don't work on mobile. Features: Two options for vertical progress bars, swipe forward and back animations Horizontal Swipe Interaction (Dark): Preview Notes: Uses hover layers which don't work on mobile. Features: "Dot" progress animationsUsing multiple sliders as an alternative to drag-and-drop, with dynamic Z-index control
Hello! For this week's ELH Challenge (#489), DavidAnderson asked us "to share an interactive example that shows people how to set a table. Go formal, go casual, or mix it up. It is totally your call." So, of course, I built a pirate-themed demo inspired by The Goonies.... This is my latest experiment using customised sliders as an accessible alternative to drag-and-drop. As shown below, by replacing the slider thumb with an image, it's possible to build an 'on rails' drag-and-drop that is also accessible from the keyboard: Being a bit of a perfectionist, I also used Javascript to change the Z-index position of the 'goblet' slider, so it passes in front of the knife and fork when it is moved, despite initially appearing beneath them. (We're setting a table - everything needs to be in the right place!) Z-index is a CSS property that defines the order of overlapping HTML elements. Elements with a higher index will be placed on top of elements with a lower index. Changing the z-index number with Javascript means I can move the goblet from its starting position behind the knife and fork, placing it in front of the knife and fork when appropriate. This also helped to make all of the sliders 'grabbable' within such a small area, where otherwise the larger slider could block out the other two. This code moves the goblet to the very top: let controls = document.querySelector("[data-model-id='5xjQeS51pKT']"); controls.style.zIndex = "999" This code returns it to its starting position: let controls = document.querySelector("[data-model-id='5xjQeS51pKT']"); controls.style.zIndex = "4" And this IF/ELSE trigger moves the goblet to the back when the slider is at position 0 and 2.5, or to the very front when it is in any other position: For good measure, I also added a trigger that moves the slider to the very front whenever it is clicked. For more information on manipulating the z-index number of objects in Storyline, check out JeffBatt-bf4917's brilliant tutorial here. But hang on a minute Testing my demo, I found that the sliders for the knife and fork were accessible from the keyboard, but the slider I used for the goblet was not. It appears that changing the z-index of the slider also knocks out the accessibility controls. While I could still highlight the slider using the tab key in the usual fashion, I could no longer change its position using the arrow keys. It took a bit of lateral thinking, but I found a workaround... document.querySelector("#acc-5xjQeS51pKT").addEventListener("keydown", function(e) { if (e.key === "ArrowLeft") { let currentVal = GetPlayer().GetVar("GOBLET"); if (currentVal > 0) { GetPlayer().SetVar("GOBLET", Math.max(0, currentVal - 0.5)); } } else if (e.key === "ArrowRight") { let currentVal = GetPlayer().GetVar("GOBLET"); if (currentVal < 10) { GetPlayer().SetVar("GOBLET", Math.min(10, currentVal + 0.5)); } } }) When the user highlights the goblet with the Tab key, the above code listens for whether they then press the left or right arrow keys. If they press the left arrow, the code checks the current position of the goblet and moves it half a step to the left - but won't let it go below zero. If they press the right arrow, it does the same thing but moves it half a step to the right - but won't let it go above ten. I've basically replaced the accessibility controls that were affected by the z-index changes, all to ensure the goblet appears in front of the cutlery... 😃 Every day's a school day! I've attached my master file for anyone who'd like to take a closer look at this. My original idea was to dynamically change the z-index position of all three sliders in relation to each other, to ensure they are all consistently 'grabbable', but I just couldn't get this to work smoothly. But for my money, this technique presents a viable alternative to drag-and-drop that has potential if explored further. Let me know what you think! EDIT: I've also now attached v2 of the master file which incorporates Nedim's debugging. The z-index of all three sliders are now dynamically controlled to maintain the perspective throughout the interaction, and the accessibility controls are working without additional code.
Interactive Job-Aid Checklist for Hotel Industry
Here is a simulation of an interactive room turnover app for hotel workers. Users can find step-by-step instructions on how to perform the task and then fill out the form to submit to their supervisor as they complete the cleaning of the room. You can download the working file here.
