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.zip130Views1like4CommentsDrawing 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/97Views4likes5CommentsTurning SL course into an app
Hello community. Has anyone found a way to convert SL course into an iPhone app or for Andorid? I found this site and wanted to hear from people who tried or have any success. Love to hear your comments. https://forum.volt.build/t/converting-an-articulate-storyline-course-into-an-app/682 Best,61Views0likes2CommentsUploading Articulate Courses into LinkedIn Learning
Hi All, My company is creating custom training and courses, using Articulate 360 to create the learning and LinkedIn Learning to host it. I have created courses in Rise360 and Storyline 360 and am having trouble uploading those directly into LinkedIn Learning. I have been told that this is impossible, as LinkedIn Learning only allows custom documents and videos to be uploaded. However, I want to 100% confirm before moving onto the next best thing, which I assume is hosting the courses on the web. Has anyone had experience with the linkages of Articulate 360 and LinkedIn Learning? Any advice is greatly appreciated!.60Views0likes1CommentArticulate 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!47Views0likes1CommentWhere do you submit a feature request? Export multiple slides with audio/closed captioning.
Where is the ability to submit a feature request? I'd like to export multiple slides of audio (closed captioning" text into one document. I understand that I'd need to export them and open them in Notepad, but if I have 75 slides, exporting one by one and then opening/copying and pasting is a daunting task. It would be so much better to go to the Media Library, select all or select specific slides, THEN export those selected or ALL into the VTT file. From there I can open the VTT file in Notepad. I understand the reasoning for select slides, but I also understand the need for the entire "script" for a whole training, too. It would also be nice to have an option to include the slide numbers (or not) on the export option.Solved46Views0likes1CommentStudent Adjust Lesson Player
Hello, I am doing some research on authoring tools and LMSs for a college course and would like to know if the end user (learner) can modify the lesson player for an SL or Rise course. If so, to what extent are they able to adjust the player? Thanks in advance!! Jennifer43Views0likes3CommentsBest method for making small edits post-publish?
What's the best way to make small edits to a course after it has been published and loaded into the LMS? Typically, we republish the course, overwrite the SCORM package in our FTP and then our LMS picks up the edits. However, I don't like doing it this way because overwriting a scorm package feels a bit irreversible to me and it's not the most efficient process. It's also not a given that our LMS will pick up on the changes every time. I also don't love the idea of republishing a new version for small, simple edits, but I fear that may be the best option.37Views0likes5CommentsStoryline Course Blank Upon Re-Entry in LMS
Hello everyone, The storyline course in our LMS does not resume or prompt to resume after exiting the module and then going back in. I have reached out to our LMS helpdesk, and they could not identify an issue on their end and advised that it may be the SCORM file, but when I checked the settings within the Player, everything seems fine.37Views0likes3CommentsSoftware Training
Hello! Our company is rolling out a new software to many many offices and we are tasked with creating the training for this software. We are looking for ideas that are new and innovative to help answer the question: "What is the best way to deliver software training in 2024 for online users?" Any suggestions, tools, softwares, etc. would be helpful and appreciated!33Views0likes1Comment