Storyline Carousel Template
Struggling to fit all your content on one slide? Been there! 🙋‍♂️ Check out the Articulate Storyline 4-Sliders Template I just released! It's perfect for chunking your content into manageable sections. Preview it here: https://360.articulate.com/review/content/4bcea717-0796-411f-8cc4-33bed0f4f964/reviewVimeo - "Sorry, we're having a little trouble."
Hello there: I'm adding some Vimeo videos in a course in Storyline 360, but lately some students are complaining about that they are trying to watch the video it appears: "Sorry, we're having a little trouble." This happens with random videos at random times. I've contacted with Vimeo but all their are being useless. The videos are embebed as unlisted. Any solution to this? Thanks!Storyline 360 Pros — What’s Your Favorite “Hidden Gem”? 💎
As someone who’s spent a lot of time working with (and on!) Storyline 360, I’ve come to appreciate the power in the little things — those lesser-known features that quietly make our lives easier. Here's one of my personal favorites: 🎧📽️ Cue Points with the “C” Key: I recently spoke with a customer who struggled to time trigger actions to audio and video media on their slides. They would preview the slide, make note of when a trigger should be fired, then return to slide authoring view to add a cue point to the timeline to tie into the trigger event. This would require a lot of manual back-and-forth between authoring and previewing. I often have to do the same thing, and there is an easier way. If you use stage preview (accessible via the "Play" icon" in the lower-left corner of the Timeline panel), Storyline will stay in the slide authoring view and play the timeline of the slide, including any audio or video media that's present. As it plays, you can press the "C" key on your keyboard to have cue points added to the current playback position. It’s a simple way to place cue points in real time, right where they’re needed — perfect for syncing trigger actions to specific moments in your media. cting Storyline 360's UI and using the "C" key to drop cue points on the timeline. Now I’m curious: What’s your favorite under-the-radar Storyline feature? Something small, subtle, maybe even a little obscure — but that you personally couldn’t live without. Drop it in the comments — I’d love to learn what little gems you rely on. 👇Simplified Approach to Adding Transparent Videos to Storyline
Demo: https://360.articulate.com/review/content/6534ea7f-0df5-4a02-813b-70811843fbf0/review Updated: Added an option for overall video transparency. Allows for see-through videos. For example, if you wanted to project them against a surface, like a wall, or overlay them onto a graphic background. Disclaimer Some time ago, Matt Kurtin published some instructions on adding webM videos to storyline to support transparent videos. Other discussions have also addressed this issue, utilizing web objects to contain transparent videos inside Storyline. I typically used web object for my projects, but recently developed an approach very similar to Matt's to make handling transparent videos more flexible. See: https://www.innovativelg.com/resources/enabling-videos-with-transparent-backgrounds-in-articulate-storyline/ I had not actually read his article before making this. I do want to acknowledge his work though. My approach expands upon the concept somewhat. Transparency on the web Videos with transparent videos are popular online. They are great for overlaying action onto otherwise static backgrounds. Support for transparent video formats is limited by your browser, however. A widely supported, but quite old format is webM. This uses the V9 codec, and it supports an alpha channel, which provides the transparency option. It is supported by the primary Windows browsers (Chrome, Firefox, Edge, etc.). These browsers on a Mac also support webM. The Safari browser on a Mac does not support webM, however. It supports an HEVC format that can be packaged as an MP4. Incidentally, the codec is tied to Mac hardware, so you cannot generate transparent video in this format unless you have Mac hardware (unfortunately for Windows users). To fully support both platforms, you need to offer both formats. Storyline and Transparency Storyline currently does not directly support video transparency. Import options are limited and any inserted videos are converted to a uniform format during publication. Even if you are able to insert a video that includes an alpha channel, it will be lost when published. The Web Object Approach My traditional approach to inserting transparent videos into Storyline has been to load them into web objects and display them as if they were their own webpages. This way, I could use any format you wanted. I would place the video files and an index.html containing the webpage structure into the web object. Controlling these from Storyline could be difficult but was doable. The biggest problem with web objects, however, is that they don’t render during the design phase, and properly sizing what they contained could be a hassle, requiring a lot of trial and error. Overall, using web objects was fairly straightforward, but cumbersome. An Alternative Approach Here, I offer another approach to inserting transparent videos into Storyline. This method still uses web objects to convey the video files into the Storyline project but is more friendly on the design side. Technically, you could also modify this solution to accommodate using the URLs of web-hosted videos and eliminate the web objects all together. I’ll leave that to you to play with. For this method, we insert a video (any video clip will do, since we’re not really using it) into our slide in one of the usual manners. I use the default Storyline settings of Show Video in Slide, Play Automatically, and Show No Controls. We will then simply replace the video source specified by Storyline with one of our own, using our transparent video and some JavaScript. Since this is done in real-time, after the project is published, Storyline does not prevent us from utilizing our transparent video formats. As long as we have access to the video files, we can use them instead. I mentioned that any video can be inserted to start. You should use a video with the same dimensions as your desired video, so the proportions are correct. You could also just resize the video placeholder to the appropriate dimensions. You can use a version of your actual video if you want. I just create a very short clip from my video, maybe the first few frames, and insert that. That way it remains small. It’s just a placeholder after all. Benefits The benefit of this approach is that the video is now easy to reposition and resize on your slide, without having to hassle with modifying and possibly re-inserting your web object each time. Any changes to the video’ size and position will be reflected in the transparent video that is swapped in to replace it. You also still have control over the video player through Storyline, without having to take extra steps. Making it Work Add a Poster: On the design side, in Storyline we can specify the image displayed by the inserted video placeholder. You just right click the video and click on Set Poster Frame. Create an image (for example, a single frame of your video) that is saved as a transparent .png file. Make the image the same dimensions as your video. This way, the displayed video placeholder will accurately represent your video. Accessibility Tag: You will need to edit the Accessibility tag for the video in SL (right click on the video in the timeline). Make the tag the same as the actual filename of your transparent video, without the extension. For example, for “Petals.webm”, just use Petals as the tag (no quotes). If you include both a .webm and an .mp4 version of your video file, make sure the base filename is the same. Create Transparent Videos: You need to have transparent videos ready. You can make your own or convert some green screen videos that can be downloaded from the web or through the Storyline media library. You will need a way to key out the green screen and then convert the video formats to webM (from Chrome, etc.) or HEVC MP4 (for Safari). If you have Adobe products, then After Effects and Premiere would work. You can also use the free version of Davinci Resolve to remove green screen in videos. Search for “3D Keyer Davinci Resolve” on YouTube for help. Save in ProRes format with the include alpha channel option checked. Output will be a .MOV file. These are very large, which is why it’s best to convert them into HEVC MP4s with a smaller size for web use, if you are supporting Safari. If you have access to a Mac, you might be able to use something like Rotato Converter to create both WEBM and HEVC MP4 formats. For shorter clips, you could use a free online converter (for example, https://www.aconvert.com/video/mov-to-webm/). This will convert the transparent MOV file into a webM file. You can also adjust the bitrate. Adobe Premiere can export webM with alpha using a plugin (https://www.fnord.com/). This is what I use to create webM files, make short placeholder clips, and extract a single frame to use as the poster image. Create the Web Object: The transparent video files should have the same base name, one that matches the accessibility tag you assign to the Storyline video. These go into the web object folder, along with an empty index.html file. This folder gets inserted into your Storyline project (say in a separate scene). See this discussion for more details on getting and setting the woFolder name inside Storyline. Notes on accessing files inside a web object: See the last section of this article Set the vidParameters Variable: This passes the details to the JavaScript that swaps the video on your slide. It specifies the identifying tag and other features such as autoplay, muting, and time indexes. It uses a string of text with commas separating each field. The script and this variable set up the initial swap of video when your slide loads and can also control your video further while your slide is visible, if you desire. See slide #1 in the demo to see how this works. The tag name is required, all the other fields are optional. Trigger the Script: Trigger the JavaScript to create the initial swap. For control later, place a “C” in the second field, and model the variable string as shown on Slide #1. Slide #2 shows a very simple example, with the minimum elements needed to make the video swap work. The buttons shown on the slide are optional. It should work on Chrome, Firefox, etc. browsers (I did not include the transparent Safari file). You can find the clip in Storyline by searching for “petals green” under insert video. Slide #1 should work on Safari as well, although I did not have a Mac handy to check. The clip was from another project. I’ve attached a sample .story file and the web object folder used in the demo. The script is commented. Feel free to modify it as you see fit. Still can't attach the zip file. https://paedagogus.org/VidSwapRsc/woFolder+Project.zipArticulate Sign in "Couldn't Open Port"
Launched my Storyline 360 desktop app and was prompted to sign in. Typically clicking 'sign-in' launches a browser window where I sign in and then have access on the desktop as well. Today I received the attached message in the application when I clicked sign-in. "Couldn't Open Port" "Unable to open a port for authentication responses." Steps taken: Closed out and relaunched desktop application Restarted entire computer and relaunched Went directly to Articulate360 website to sign in Got into website, but did not connect me to the desktop app. Peers in my organization are not experiencing the same issue. Thoughts? Thanks!3D objects in Storyline
Hi Articulate Team, Are there any plans to bring support for 3D objects (such as .obj files) into Storyline? Essentially I'm referring to a 3D model viewer component function added to Storyline allowing for some basic manipulation of the 3D object itself such as rotate and move in X/Y/Z axis, exploded view, and part isolation. This would work wonders for so many learning projects and enhance the actual learning being achieved by the learner. Whilst Storyline has an insert web object feature, this requires additional overhead of the resource itself already being suitably hosted online or in a folder that can be hosted online (i.e. it contains HTML like files - index.html, etc. which is effectively asking for it to be web-ready). This isn't always suitable or practical for every company and their respective IP assets/resources. I have come across multiple threads asking for such a feature. Here's a few of them: 3D Models in Storyline | Articulate - Community Import 3d shapes into articulate storyline 360? | Articulate - Community How to put/import 3D moldels in Storyline | Articulate - Community In one of the threads I came across, there was a reply from Katie Riggo who stated "We're working on the ability to add 360° media assets to your courses". However, later on in the thread this turned out to be referring only to 360-degree images despite the thread being filled with people asking and requesting for 3D object support in terms of 3D models and being able to manipulate them like they can in PowerPoint. You can chalk this up as another +1 to the feature request for native 3D object support by way of being able to import and, to a basic level, manipulate them. Kind regards, SamIssue with the last Storyline 360 update
Hi E-learning Heroes, Since the last update, I encountered an issue with the storyline Triggers window. It doesn’t display the triggers after 5 to 10 minutes. The triggers only appear again once we close and reopen the file. Additionally, when you switch slides, it shows the triggers from the previously visited slide. Furthermore, if we choose to downgrade, the update files are not accessible in the old version.Using Rive in Storyline - States
On LinkedIN i allready posted how to get this done. Starting a series how to use Rive directly in Storyline here too. All the interactive elements in Rive can be triggered by Javascript. To get it working you need a proper Rive with named states. These you can trigger with Javascript. Like this.. https://360.articulate.com/review/content/1ea72b55-9a69-4b0e-a8d2-a566e0c59ed1/review Basically you add the Rive animation as a WebObject. The index.html used for the WebObject has a Canvas, the Rive Web runtime and specific code. <canvas id="canvas" width="404px" height="332px"></canvas> <script src="https://unpkg.com/@rive-app/canvas@2.7.0"></script> You have to replace the 'src' url for the Rive file with your own. Or add it somehow as file and target that. src:"https://public.rive.app/hosted/204711/199760/iEdeOxzF3UinRiSlCE08yA.riv", Using 'postmessage' to communicate with an iframe you can then trigger any state in the rive. window.message = ""; window.addEventListener("message", function(event) { let data = event.data; changeState(event.data); }); I am adding the .story and index file for anyone interested. Rive does have a great new functionality, 'Layouts' that change animations based on screensize. For Storyline that is quite useless as Storyline isnot responsive but scales the view. For Rise360 however this can be great. Next step for me is discovering exactly how 'Layouts' work in Rive and getting that to work in Rise360. #Rive #Interactivity
