Drawing Annotation on Storyline Slide
Demo: https://360.articulate.com/review/content/518383b2-1161-408d-b9f5-adb9a6f57a11/review Inspired by code discussed on: https://img.ly/blog/how-to-draw-on-an-image-with-javascript/ Using Charts in your Storyline | Articulate - Community About This is a brief example of using an HTML canvas element to enable annotation on a Storyline slide. The example displays an image on a slide, sets a few variables, and the accessibility tags of a some slide objects. It then triggers a JavaScript trigger to create a canvas over the image, and then watches the mouse buttons and movement to allow drawing on the canvas. How it works A canvas element is created, filled with the specified base image, and inserted below a small rectangle (canvasAnchor) that is the same width as and placed directly above the image. Another rectangle (canvasClickArea) overlays and is sized to match the image. This is the area that allows drawing on the canvas (where the mouse is watched). Brush width and color can be controlled. The drawing can be cleared. It also resizes with the slide. To improve The events to watch the mouse and clear button should be better handled to allow removal when a new canvas is created. A mechanism to allow a blank base (clear) should be reinstated. Right now it just relies on the use of the initial image from the slide. Both options have their uses. Since the canvas is a raster image, resizing to very small and then very large results in poor image quality. The image can be extracted from the canvas. This could be saved or printed. More drawing options are available with the canvas element. Credit: X-ray images from https://learningradiology.com/Designing eLearning Automation with Agentic AI - A Demo Using OpenAI Realtime + Storyline360
Hello Heroes! I’m thrilled to share my latest YouTube video that begins to scratch the surface of what agentic AI controls can deliver to the Articulate Storyline user experience! 🚀 In this video, I demonstrate how generative AI, powered by OpenAI’s Realtime API, can be used to actively shape, guide, and adapt eLearning experiences in real time. 🌟 What You’ll See 🌟 Agentic AI in Action: Discover how AI can guide learners, answer their questions, and foster curiosity during eLearning modules. Function Call Demonstration: Watch AI dynamically trigger actions in Storyline 360, like changing slides based on user input, to enhance interactivity. Real-Time Audio Streaming: Explore how audio data is processed and streamed almost instantaneously, creating seamless learner-AI interactions. 🌟 Why It Matters 🌟 Customised Learning Sessions: See how session-based instructions allow AI to personalise responses, aligning them with specific learning goals. Data-Driven Insights: Learn how AI-driven function calls can unlock rich learning analytics, making adaptive learning a reality. A Vision for the Future: Imagine self-healing courses that evolve based on learner behaviour and feedback. 📢 What’s Next? Integrating real-time audio transcription for dynamic closed captions. Expanding session data capabilities to unlock even greater personalisation and interactivity. Generative AI is reshaping how we design and deliver eLearning, and this is just the beginning. Join me on this journey by watching the video here: YouTube Link. Don’t forget to subscribe to the Discover eLearning channel for more insights and demos to elevate your training projects! Let me know your thoughts or questions below—I’d love to hear how you think agentic AI development will have an impact on learning experience design! 😊 --- My name's Chris Hodgson, an eLearning developer and software trainer based in the UK. I enjoy creating fun, unique, and engaging online experiences using Articulate software! Connect with me on LinkedIn - https://www.linkedin.com/in/chrishodgson44/
Search Section titles
I've turned on the ability to search in my Rise course, but it won't search the Section titles. It will only search Lesson titles and content within the lessons. I also noticed when I publish a .pdf the Section titles aren't listed with their lessons either. So if my outline had: Day 1 (Section) Introduction (Lesson) Daily definitions (Lesson) Application (Lesson) Summary (Lesson) Day 2 (Section) Introduction (Lesson) Daily definitions (Lesson) Application (Lesson) Summary (Lesson) Then the .pdf prints out with all the content smashed together like this: -Introduction (Lesson) -Daily definitions (Lesson) -Application (Lesson) -Summary (Lesson) -Introduction (Lesson) -Daily definitions (Lesson) -Application (Lesson) -Summary (Lesson) This makes edits from our partners very difficult. These seem like related issues, so I was wondering if anyone has run into these disappearing Section issues? Does anyone know away to fix this, or should I need to submit a Rise bug/fix?How to Use Green-Screen Images and Videos in Storyline 360 – Keying-Out Colors on the Fly
I’m sure you’ve seen the various images and even videos on offer in Storyline’s content library with green-screen backgrounds. You know, the ones often used to key in alternate images into the green areas. There are even more freely available on the web. Maybe you have your own custom green-screen media from other projects. Unfortunately, Storyline does not offer a built-in way to utilize these media, so they’ve been of limited use. You can certainly try masking out the green in images and that often works, but green-screen video in particular has no real options outside of editing in outside applications. Here, I will describe an actually pretty simple approach that allows you to apply chroma-key and other color effects to these media, right inside your finished project. This removes most of the need for other tools and opens the possibility for more dynamic effects that can be applied to your media on the fly. Process video demos: https://360.articulate.com/review/content/5b1051ff-0a85-4675-9041-462c5e10c357/review https://360.articulate.com/review/content/cc586179-8ed2-41fb-b489-ae9a30aa78db/review Project demos: Apply Effect in Slide Filter Tester Approach This approach uses a single SVG filter called feColorMatrix. See the links below for additional details. https://alistapart.com/article/finessing-fecolormatrix/ https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feColorMatrix This filter allows us to customize how the colors in an SVG are displayed in a web page. One effect is that you can make a color transparent, essentially keying the color out and allowing what’s below to show through. It also allows us to change the colors displayed. Media in Storyline Images in storyline are generally placed inside an SVG structure. The image may be raster, but it’s put inside an SVG to allow easier handling and manipulation. It also allows things like borders to be added. Videos are placed inside regular <div> elements, but with a little JavaScript we can move them into an SVG to make handling them similar to regular images. Once it’s in the SVG, we can apply SVG filters. The Script There are two project files included with this post. One shows a simple application of this effect to an image or video on a slide. The steps are as follows: A media file (image or video) is placed on your slide. A variable called tag is set to match the first unique portion of the media’s alternate text (right click media on timeline, select Accessibility). A variable called filterValue is set with the correct settings for your desired filter. A trigger then runs a script that looks in your slide for the media referenced in tag. If it is an image, then the details for the filter (in filterValue) are inserted into the existing SVG wrapping the image. If it is a video, then a new SVG is created, the filter inserted, the video inserted, and then the SVG placed where the video used to be. This all happens when you click the Key It! button. It is quite easy to add to a slide and apply. You could apply this to multiple media on one slide by changing tag and filterValue before each additional triggering of the script. There is another variable called filterName that holds a reference to the filter you set on the media. If you wanted to change the effect later, you can use this to access and replace the filter values (see the scripts inside the other Tester project for details). Note, if you wanted to dynamically update multiple filtered media on one slide, you would need to modify the scripts slightly to load and save the filter references to a sequential set of SL variables rather than just one. Getting the filterValue Settings Since our filter is using a matrix of values, the exact settings can be difficult to wrap your head around. I’ve included another project called Tester that lets you insert your desired media onto the slide, set the tag variable, and then publish the project to determine the settings you need. You can stack media so your keyed media will overlay any other media you plan to use. This lets you judge the final effect. Once published, you will see your media, a set of controls on the side, and a final filter value at the bottom. Use the dials to adjust your matrix values. The RGBα headers represent the rows and columns linked to the red, green, blue, and alpha (transparency) values of the filter. The X column has multipliers which are included since they are part of the filter. The numeric values will show below the dials. The matrix is represented by a text string at the bottom, which you can copy and paste into your SL filterValue variable once you are satisfied. You can reset the matrix rows or columns by clicking on the corresponding header. Reset the whole matrix by clicking on circled plus in the top left corner.. If your desire is to key out background colors, like green or black, you will mostly be adjusting the bottom row of dials. Depending upon the exact color and the other colors in your media, your settings may vary. Trial and error will give you the best results. The upper dials are useful for changing the displayed colors in the media. Try different values and combinations to achieve your goals. Limitations This approach is super easy and simple to incorporate into Storyline, but since it is just one filter, it has its limits. You may not be able to get every bit of color completely keyed-out every time. You may lose some detail depending upon how similar your media colors are. If this is unacceptable, you may need external applications. There are many SVG filters available. You could always add additional filters to improve the output. They can be inserted and applied the same way feColorMatrix is. I’ve done only limited testing, and I have not investigated using this on SL media that have other effects, cropping, or color filters applied. If the DOM structure changes from what is expected, this this will not work. Best to just use the base media (as it is imported). Resizing is fine, but make sure to test it on any other changes. The attached project files include several media that you can experiment with. Remember to watch the Peek videos linked above for the basics of keying out green and black backgrounds.How long does it take to build a 20-minute e-learning module or course?
I had someone ask me how long they should tell their company to expect when building e-learning courses. This is a question I hear a lot from new instructional designers, and the answer isn't as straightforward as you might think. While you'll often hear that it takes about 40-50 hours to develop one hour of e-learning content (which is a good starting estimate), let's break this down into something more practical for you. For a 20-minute module, you might start by estimating 15-20 hours of development time. But here's the thing – several factors can stretch that timeline, and knowing these up front can help you plan better and set realistic expectations with your stakeholders. Here's what tends to affect your development time: Content Organization: Starting with messy content can really slow you down. Think about the difference between working with a clear training manual versus piecing together information from several email threads and meetings with subject matter experts. The second scenario will definitely take more time. Visual Design Needs: Using a template your company already has? Great – that'll save time. Need to create something from scratch or hunt down specific images? That's going to add several hours to your project. Level of Interactivity: Simple click-through slides are quick to build. But if you're creating scenarios where learners need to make decisions, or adding complex interactions, you'll need more time. Each interactive element you add means more development and testing time. Audio and Video: Adding narration isn't just about recording. You'll need time for editing, making sure it syncs with your slides, and often re-recording sections after reviews. The same goes for video content. Review Process: This one often surprises new developers. Getting feedback from stakeholders, making revisions, and going through multiple review rounds takes time. Sometimes a lot of time, especially if multiple people need to sign off on the content. Your Tool Experience: Be honest about your comfort level with your e-learning tools. If you're still learning Storyline, Captivate, or whatever tool you're using, build in extra time. What might take an experienced developer two hours could take you a full day – and that's perfectly normal when you're starting out. Testing Time: This is easy to forget, but you need time to check everything works right. Does your course work in different browsers? Do all your quiz questions give the right feedback? Do your animations play smoothly? Take the above tasks and assign an approximate time commitment to each. For example, organizing content may take 8 hours. Then add all those hours together and that gives you a good estimate. It also gives you a checklist you can offer your organization to show what steps need to be taken and why you made the estimate you did. Here's a tip from experience: whatever time estimate you come up with, add about 30% to it. This gives you breathing room for the unexpected things that always seem to pop up during development. Question for the community: What has surprised you most about development time in your e-learning projects? I'd love to hear about your experiences in the comments below.Chernobyl. Blended learning 360 degree image interaction. Certificate interaction.
𝐂𝐨𝐦𝐫𝐚𝐝𝐞 𝐬𝐨𝐥𝐝𝐢𝐞𝐫𝐬, 𝐭𝐡𝐢𝐬 𝐢𝐬 𝐭𝐡𝐞 𝐦𝐨𝐬𝐭 𝐢𝐦𝐩𝐨𝐫𝐭𝐚𝐧𝐭 𝟗𝟎 𝐬𝐞𝐜 𝐨𝐟 𝐲𝐨𝐮𝐫 𝐥𝐢𝐟𝐞. Made this iconic scene with interactions in Articulate Storyline. Tried to demonstrate blended learning. It's just a simple interactive made in Storyline 360. For access 👉 Go to this link: CHERNOBYL - Cleaning the roofs I hope it will be the best 90 seconds of your life.Seeking Experienced Instructional Designer/SME for Education Projects (Contract Work)
Over a decade ago, I connected with two amazing contractors on this platform, and now I'm seeking another professional to join my team on a contract basis. My main instructional designer is transitioning to a full-time role, and I need someone who can collaborate with me on creating scripts and content for a variety of education-specific subjects. This is contract work, and projects will be assigned as needed. Ideal candidates will have a background in instructional design, research, or subject matter expertise in education. You’ll work closely with me to ensure the content is engaging, accurate, and meets the high standards required for educational development. If you are interested, please reach out with your portfolio or samples of previous work. I’m looking forward to hearing from you! ErikaProject Kickoff Questions
Are you starting a new project, but aren’t sure what to ask your Subject Matter Experts? Then download and customize this project kickoff questionnaire to help guide the conversation. If you found this document helpful, then check out: Make Working With SMEs a Breeze with These 3 DownloadsE-Learning Storyboard
Do you need help organizing content and resources into a slide-based e-learning course? Before you start developing, download and customize this Microsoft Word Storyboard template to clearly outline the learning content for your Subject Matter Experts. If you found this document helpful, then check out: Make Working With SMEs a Breeze with These 3 Downloads
