Viewing Articulate 360 Content in SharePoint Online
Enabling Custom Scripts in SharePoint Online Custom scripts are now disabled in SharePoint Online for security reasons by default. As a result, Articulate content with the story.html file renamed to story.aspx in the published output that previously worked with SharePoint Online might not work anymore. If you don't need to track learners' progress or results, check out these free or low-cost options for web hosting. If you need to use SharePoint Online, your SharePoint admin may be able to resolve this issue by following the steps below. (Note that we don't provide support for either workaround.) As of July 10, 2024, SharePoint users will find that they are required to reenable the Custom Scripts feature every 24 hours, reverting the Custom Scripts setting to its default and disabled state. Please see Microsoft’s article on Custom Script settings for more information. Enabling Custom Script via the SharePoint Admin Center If you don't need instant access, follow these steps. Go to the SharePoint admin center and sign in with your credentials. In the sidebar to the left of the page, click Settings. (If you're using the Modern admin center, click the classic settings page hyperlink at the bottom of the Settings page.) Scroll to the Custom Script section, then select the options to Allow users to run custom script on personal sites and Allow users to run custom script on self-service created sites. Click OK to save your changes. Note that this change may take up to 24 hours to appear. Enabling Custom Script in SharePoint Online via PowerShell For instant access, follow these steps. Open Windows PowerShell with admin privileges, then run Install-Module -Name PnP.PowerShell Connect-PnPOnline -Url <url> -PnPManagementShell (replace <url> with your SharePoint URL, which will then generate a code for you to insert in your SharePoint admin center.) Run these commands in PowerShell: (replace the URL after -Url in the first command with the link to your static site collection, such as https://companyabc.sharepoint.com/sites/StaticSite). (If you need help creating a SharePoint site, refer to this article from Microsoft.) Connect-PnPOnline -Url https://yourorg.sharepoint.com/sites/StaticSite $site = Get-PnPSite Set-PnPSite -Identity $site.URL -NoScriptSite $false Your SharePoint site is almost ready to host HTML files! We just need to prepare the Articulate published output for upload. Here's how. In SharePoint, choose where you will locate this project. You can create a new folder or use the Documents location created by default with all SharePoint sites. Rename all the files with a .html extension in your unzipped published output folder to .aspx (keep the same file name). To do this, right-click the file, choose Rename, and then replace .html with .aspx. (Most projects only need to rename the analytics-frame.html and story.html files. Finally, upload the published output to your SharePoint site, then click story.aspx to launch your Articulate course. This change should take effect immediately.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/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 Status and Software
I'd like to open a conversation about disconnecting the use of Storyline from the need to constantly authenticate. I am currently in the middle of an important lesson that has a very specific amount of time budgeted for it, and have essentially been locked out of it. As a government contractor creating emergency training material for use in mission-critical space scenarios, I can't afford to keep defending the use of software that is controlled off-premises, and that can be shut down without warning. We have to fight to negotiate for the time and money to create critical training, and it is unhelpful to be signed out of or wholesale lose access randomly. This, the budding inclusion of AI tools, and the heightened need for cybersecurity awareness makes for a convincing argument to move to a different tool platform that does not need to call home to be used. Please consider giving us better options going forward, to ensure that this work stoppage does not hinder future project timelines.Articulate, let's talk pricing...
With the recent release of AI-powered features, a new pricing model is now available for Articulate 360: Let’s take a look at what this actually includes: Storyline 360 with a few AI features: The industry-standard tool for e-learning designers. Some like to call it a "glorified PowerPoint," but it's undeniably powerful. Rise 360: A simplified, web-based version that’s easy to use. Stock Library: A collection of assets to enhance your projects. Screen Recorder: While functional, it's a bit outdated and lacks some advanced features. A few other smaller apps and a review tool to gather feedback. To give you some context, here’s how the pricing for Adobe Creative Cloud stacks up. This includes all the apps (except the 3D Substance suite) with AI functionality integrated into their key products like Photoshop, After Effects, Premiere, and more. Adobe’s offering is over $1,000 cheaper than Articulate’s new AI-feature pricing, per year! And that’s with access to a large suite of tools, many of them advanced and complex: Now, I understand software development isn’t cheap, and Articulate has a strong foothold in the e-learning market, which is fairly niche. But personally, the pricing feels very steep. What do you think? Let’s keep this conversation civil and focused on the topic please.How to Communicate Between Storyline and a mySQL Database
Communicating With a mySQL Database from Inside Storyline 360. Ever wondered how to connect to a database from inside Storyline? Need to run your course from a webserver instead of an LMS and don’t have access to a Learning Record Store to save data? Want to pull data from a large collection that can’t be included in your project? Just want to learn something new? If any of these sound like you, then you may be interested in this article. Demo: https://360.articulate.com/review/content/c3f3c563-bde2-4fa1-96e4-c8ab5b55f991/review Note: If the database in the demo stops working, it is probably because I forgot to renew it. This free site requires weekly renewal. I’ve been toying with parts of this on and off over the last couple of years. When I saw this question come up recently, I thought it might be time to put it all together. This approach was drawn from several online resources, but the specifics on database connections came from this very informative video series. What You Need Storyline 360 An online web server with PHP available A mySQL database that is accessible from the web Some knowledge of JavaScript Passing familiarity with reading and editing a PHP script Basic understanding of mySQL queries (and how to get your data into a database) Overview The overall process is that you build a Storyline slide that includes a web object. This does not need to be visible, but it will point to a web site on your web server that includes an index.php or index.html file (more on that later). You will use some JavaScript to pass your data from Storyline to the web object. The index file on your web server will receive this data. It then determines what to do with the data you passed and sends requests to the database. The database responds to the request, returning new data. The web server then sends this data back through the web object, to Storyline. From there, you can do whatever you want with it. In keeping with the original question, this example queries a database of users using a username that you type. It then returns biographical information and image data to Storyline, which displays it on the slide. In Storyline The required variables are: action - “fetch” for this example, can be made into whatever action you want username – the username you entered in the text entry bio, loc, name – receives data returned from the database (for display) imgTag_1 (and 2) – these are the images used to display the returned image data Since we need to communicate through the web object, the JavaScript used in the trigger first checks to see if the iframe is ready on the slide (bottom of script). It won’t appear until ready, so we need to wait until it is. When it’s ready, it calls the postMessage function. This builds your message from the action and your data (username), specifies who is supposed to receive it (approvedTarget), and uses postMessage to send it to the iframe. The function also creates an event handler to listen for return messages from the iframe. This is where any data returned from the database will get processed. This handler first checks to see if the received message came from where we expected (approvedOrigin). If so, then we use the data found in event.data. For this example, the returned data is a delimited string holding the name, location, biography, image URL, and base-64 image data from the database. Each entry is separated by a double quote. How you assemble and return the data string is up to you (more later). Here, we send the information back to Storyline variables and use the image data to swap the displayed images in our tagged slide pictures. If an empty string is returned, then nothing matched our request. On the Web Server On your web server, you need a basic webpage (index.php) and a folder with a couple of other files. The easiest way to create these files is to create a new folder somewhere on your PC. Inside this, create a file called “index.php”. You also need to secure your website against allowing people to browse your files. In this folder, create a file called “.htaccess”. Make sure the first letter is a period. Inside that file, enter the following one line of text, and then save this file: Options -Indexes Now create another folder called “includes”. Inside includes, create two files called “formhandler.inc.php” and “dbh.inc.php”. When we are done editing these files, you can zip the index.php file and the includes folder together to upload to your website folder on the web server. Then unzip them and you’re ready to go. Delete the zip file after unzipping. index.php (or index.html) This is your webpage. All you need is the basics: <!DOCTYPE html> <html> <head> </head> <body> <script> //JavaScript goes here </script> </body> </html> You will include some JavaScript in this file that will receive the message you sent from Storyline. It will decide how to handle the data you included and then it will make a POST request to transfer that data to another file in the includes folder. That is where the database communication will occur. The POST request here is akin to filling out a web form and clicking a submit button. This page will also listen for return messages from the POST request, and then, in turn, return the data in these messages back to Storyline. The index.php file contains the <script></script> section. This holds the JavaScript. This script has a few functions and a main routine. The main routine first creates an event handler to listen for messages sent from Storyline. It verifies the origin sent with the one specified here to make sure the message is one you want to process. If not, it is ignored. The passed message data is split apart (using comma delimiters). It looks for “fetch” or “put” actions in the first position (we only use fetch here). You can change these to whatever suits your needs (adjust formhandler.inc.php accordingly). Fetch will send your specified username to the database and then return its response. Because we need to wait for the response, we want to use an asynchronous function here. First, we create a request object (for sending the POST). I used XMLHttpRequest because I know how, but there are other possibly better ways. Then we set up an event handler to lister for this object to say it finished its task. If it succeeded, then we can call another function that will return the message with the database data to Storyline. Once the handler is set up, we make the POST request with the data bound for the database and then exit, waiting for a response. formhandler.inc.php The POST request goes to the PHP script on this page. Where JavaScript runs on your webpages in the browser (as you use it Storyline), PHP runs only on the server. It runs before the webpages go to the browser, so it is invisible. No one can see what goes on here. This PHP script verifies that the call to this page was for a POST. If not, it is ignored. If POST, get the passed variable (username). Then establish a database connect by including another PHP script file (dbh.inc.php). Then, we create a mySQL query statement. The passed data is bound separately to the query (instead of including it in the query directly). This separation prevents malicious data from hijacking your query. The statement is executed. We expect a single row to match, so we use fetch() to get it. We assemble the fetched data into a string delimited by a double quote character (use whatever is appropriate for your data). When ready, we use echo to output the text string, which is what gets returned to the POST request. <?php //Note: don’t use a closing tag in this script, leave it open if ($_SERVER["REQUEST_METHOD"] == "POST") { // get data from mySql, and echo output to return the data to the requester $username = $_POST["username"]; try { require_once "dbh.inc.php";//has DB connection information $query = "SELECT * FROM users WHERE username = :username;"; $stmt = $pdo->prepare($query); $stmt->bindParam(":username", $username); $stmt->execute(); $row = $stmt->fetch();//get next line of data (all requested fields) $sep = '"';//specify data seperator for returned data //echo text to return the data to the POST requesting routine echo $row["name"].$sep.$row["location"].$sep.$row["bio"].$sep.$row["url"].$sep.$row["image"];//get column contents //clear the database connecction $pdo = null; $stmt = null; die();//exit script } catch (PDOException $e) { die("Query failed: " . $e->getMessage());//if connection problem, exit script } } else { die("Invalid Request");//if not a POST request, exit script } dbh.inc.php This PHP script is included into the previous script. It contains the connection details for the database and creates the connection. Update the database host, database name, database username, and database password with your own information. Do not share it. <?php //Note: don’t use a closing tag in this script, leave it open $dsn = "mysql:host=hhhhhh;dbname=nnnnnnn"; $dbusername = "uuuuuuuuu"; $dbpassword = "ppppppppp"; try { $pdo = new PDO($dsn, $dbusername, $dbpassword); $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); } catch (PDOException $e) { echo "Connection failed: " . $e->getMessage(); } Final Thoughts Requesting data from the database requires the asynchronous function so your script isn’t stuck waiting for a response. Just sending data to the database (the “put” section of the script in the index.php file) does not have to wait, so it uses a synchronous function. To add additional functionality, you can create more action tags, pass them to index.php, and either make POST requests to additional formhandler script files, or update the existing fornhandler.inc.php file to accommodate more functions. You can have your database on or separate from your web server. As long as you can communicate with it, this should work. I am unfamiliar with other types of databases, so I don’t know what specific changes might be required to connect to them. The database structure is as shown below.Brief flash between slide layers
Hello, I was wondering if anyone knows what I could do to resolve this issue. I keep seeing all the items briefly flash at the beginning of every slide layer. I am not sure why this is. I've made sure these items do not have animations. I've made sure all transitions are "none." The slide properties that are currently checked are "hide other slide layers," "hide objects on base layer," and "prevent the user from clicking on other layer." The flashing is disruptive to the flow of the course because it makes it look like a slide header is reappearing over and over again when in fact, it is not. Could someone please give advice? Thank you!Articulate 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!Uploading 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!.
