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.zip130Views1like4CommentsRise text editor - Mathematical equations
Hi. After the recent change of the text editor in Rise to TipTap the entries we previously used with LaTeX provided by our SME and input through Equatio do not display in the editor and we are not unable to input new mathematical equations from Equatio as we could previously. I would be interested to know what features from TipTap are available in the Rise editor to allow for mathematical equations and LaTeX input as this is an essential functionality for some of our courses we are in mid development of. Thank you for your help. Cheers Richard101Views0likes4CommentsText Entry-Three Fields
Hello community, I need help with this project I am working on. It requires a login page (attached) that contains a keypad. The goal is for the user to click the numbers on the keypad and fill in each field in order. Here's what I want to happen: The user starts with the Driver ID field and inserts the appropriate credentials After clicking a button (or just clicking in the box), jump to the Tractor Number field and insert appropriate credentials After clicking a button (or in the box), jump to the DC ID field and insert appropriate credentials. Then I want the user to click a button when their login is completed. Step 4 should lead the user to the "Activity Correct" layer. User should be able to click the "Sign In" hotspot in the "Activity Correct" layer to move on to the next step or receive an incorrect layer if they entered something wrong. There also needs to be an "if" condition so they can't move to the next slide unless all the fields = the correct credentials. I am able to click the numbers on the keypad to put the Driver ID in, but the numbers won't appear on the other two fields. I have already tried the following: making them into layers inserting multiple keypad layers putting in three different buttons and changing their states moving my triggers around from the keypad layer to the base layer and back moving the buttons from the keypad layer to the base layer and back Can someone please look at my project and help me figure out what I am doing wrong? Bonus points if you have an example project with something exactly like this :) If this isn't possible to do, alternative suggestions are very, very appreciated!Solved100Views0likes5CommentsDrawing 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/97Views4likes5CommentsClosed Captions Only Displaying on First Line of Video
I'm experiencing an issue with the closed captions on my Storyline 360 imported videos. The captions only appear on the first line of the video and then disappear for the rest of the playback. This is happening even when I manually type the captions or try importing .srt or .vtt caption files. I recently updated Storyline 360 on August 27th, and this issue started occurring after that update. Has anyone else experienced this problem? I've tried troubleshooting it but can't seem to find a solution. Any advice or insights would be greatly appreciated. I'm hoping this is just a temporary bug that will get resolved in a future update, but in the meantime, I'm struggling to get my videos properly captioned. Thank you in advance for your help!90Views2likes4CommentsAI Integration Compatability
Hello! I'm reaching out regarding the forthcoming AI feature in Articulate. If my team adds this feature but works with another team who doesn't add AI, what sort of limitations, if any, will exist if we share a Storyline or RISE file? For example, if I build something in Storyline using AI and then send it to a colleague who doesn't have AI, will they be able to open the file? Edit the file? Edit whatever was added with AI? Thanks!Solved82Views1like2CommentsJavaScript not working
Hello, In an effort to create Dark Mode in JavaScript, I have been attempting using codes that change shapes and text into different colors. For whatever reason, codes that I once used are no longer working and I'm unable to accomplish this. I took a Master Developer course not long ago, and even the JS I entered in there that worked at the time, no longer works. I cannot provide a file due to confidentiality but the codes I am using are below. This one is to target shapes, specifically a star, but I had modified it in the past to change the shape colored based on the Accessibility text. It appears my text does not get recognized. let Shape = document.querySelector('[data-acc-text="darkMode"]'); let pathElement = Shape.querySelector('path'); pathElement.setAttribute('fill', #C0504D); This one is for text, and should change the text color based on the Accessibility text, but also does not work anymore. Both of these are triggered by the click of a button. const texts = document.querySelectorAll(‘[data-acc-text=”darkText”]’); texts.forEach(text => { const txt = text.querySelector(‘text’); if (txt) { txt.style.fill = ‘#C0504D’; } }); The hash color was just for testing. Any advice would be helpful, but essentially it is those codes mixed with Execute JavaScript When User Clicks > ButtonSolved80Views0likes5CommentsOlder Storyline project no longer works
Many years ago I created a gamified course based on Trivial Pursuit. A user clicks a button to roll a die. This determines which of 12 spaces on the circular board they can move to and answer a question about the corresponding category. Each space links to a question pool and the user is assigned a question at random from the pool. Currently the pools only have 3 questions each. I recently dusted it off to show a colleague what SL can do. Everything works fine UNTIL the user has to answer a question from a pool they previously visited. then the course freezes with the "3 white dots" loading animation. All questions are set to reset when revisiting. I used to have multiple result slides (one for each pool) but removed then trying to get it to work again. Any possible ideas on how to fix it?73Views0likes5CommentsHow do button states stack?
I am making a collection of button templates in the style of my company's branding. In doing so, I want to make full use of the functionality that states in Storyline 360 provide, but am having trouble making sense of them. My issues come from the interactions between states that are active simultaneously on an object. In this case, the Hover, Selected and Visited states. Firstly, here's what I want to do: The button has a Normal state with a medium blue fill and black text. The Hover state should set the fill to a light blue. The Selected state should add 6 px. black outline. The Visited state should set the fill to a dark blue and the text colour to white. My resulting states are shown below as they appear in Storyline. For clarity, I added a text box to each state, to see when each one was active. The expected behaviour is that when, for example, the button is Selected and Visited, it should have the black outline, dark blue fill and white text. The resulting behaviour, however, is that the button has the medium blue fill and black text of the Normal state, plus the black outline of the Selected state, as shown here: At first, I assumed that the Selected state was just overwriting the Visited state completely. However, when I added the text boxes I saw that was not the case, as both words were visible at once. In case only the "edited" parts of each state were overwriting each other, I reset each state and edited only the aspects that differed from the Normal state (in case I had accidentally set the Selected state's fill and text colour to the same colour as the Normal state, and that was overriding the Visited state). Unfortunately this had no effect on the results. Is this expected behaviour? And if so, how exactly do different changes from different states overlap? Is there a way to achieve what I want to do without adding several custom states corresponding to each possible combination? Thank you in advance68Views0likes6CommentsTurning 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,61Views0likes2Comments