In this tutorial, we'll look at how to use Articulate Storyline's web publishing option to turn a standalone course into web-ready content.
Step 1: Enter Title, Description, and Folder Location
- Go to the Home tab on the Storyline ribbon and click Publish.
- When the Publish window appears, select the Web tab on the left.
- Enter the course Title the way you want it to appear in your published output. It defaults to the name of your Storyline project file. (Changing the title won't affect the name of your project file.)
- Use the Description field to give learners a synopsis of your course. Currently, the course description only appears on information cards in the Articulate Mobile Player app.
- Use the Folder field to indicate where you want to publish your course (for example, your computer desktop). Click the ellipsis button (...) to browse to a specific location. Storyline will create a new folder in that spot with all the files needed to operate your course.
Important: Always publish to your local hard drive. Publishing to a network drive or a USB drive can cause problems with your published output. After publishing to your local hard drive, upload the output to a web server for testing.
If learners use mobile devices with the Articulate Mobile Player app, you can add more project information by clicking the ellipsis button (...) next to the Title field, which opens the Project Info window.
- The Title and Description fields are the same as those on the Publish window.
- The image below the Title field will be the course thumbnail in the Articulate Mobile Player library. By default, Storyline uses an image of the first slide in your course, but you can choose a different image. Just click the blue slide title text, then select a different slide or click Picture from File to choose an image on your hard drive.
- Author, Email, Website, Duration, Date, and Version appear on the content information cards in the Articulate Mobile Player library.
- Identifier applies only to content published for LMS.
- Keywords aren't currently used. They'll be used in a future version of the Articulate Mobile Player app.
When you're finished customizing the project information, click OK to return to thePublish window.
Step 3: Choose HTML5 and/or Mobile Publishing Options
If learners will view content on a device that doesn't support Flash, use the following options to make your course viewable in HTML5, the Articulate Mobile Player app, or both.
- Include HTML5 output: This prepares your course so that it's viewable as HTML5 content. Bear in mind that not all web browsers handle HTML5 content equally. See this article for supported HTML5 browsers.
- Use Articulate Mobile Player for iOS or Android: This prepares your course so learners have the best viewing experience on iPads and Android tablets, using Articulate's free mobile player app.
- Allow downloading for offline viewing: Mark this box to let learners download your course to their Articulate Mobile Player library. After downloading the course to their library, learners can view it at any time with or without Internet access, even if you remove the course from the web server where it’s hosted.
A downloaded course will stay in the learner's library until it's deleted. For this reason, you might not want to mark this option if you don't want learners to be able to access the course indefinitely.
The Properties section of the Publish window lets you make last-minute changes to your course player and the compression settings Storyline uses when publishing.
- The Player field shows the name of the player currently assigned to the project. (The player is the interface that learners see around the perimeter of your slide content.) Click the player name if you'd like to make adjustments or switch to a different player. If you need help choosing your player settings, see this tutorial.
- The Quality field lets you control the compression settings Storyline uses for audio, video, and pictures in your course. The quality settings default to whatever you used the last time you published a course. To change them, click the blue text, make your adjustments, then click OK.
- Choose Standard if you want to use the default settings: video quality of 5, audio bitrate of 48kbps, and image quality of 80%.
- Choose Custom if you want to define your own quality settings, then drag the slider for any of the three values to change the compression. Using higher values gives you higher-quality output but also results in larger file sizes (which means longer download times). Lower values give you smaller file sizes and faster download times, but the visual and audio quality will be lower as well.
Step 5: Publish
When you're finished making selections, click the Publish button. When the publishing process is complete, you'll see the Publish Successful dialog.
- View Project: This launches the published course in your web browser.Important: Since your files have been prepared for web deployment, you might encounter unexpected behavior when viewing the course from your local hard drive. It's always best to upload your published output to its final destination and test it there.
- Email: This opens a new email message with a zipped file of your published output attached. This might be helpful if you need to share your course with a subject matter expert (SME) or if you need to send it to your web server administrator to be deployed. If your audience is larger than just a few people, it's better to move your files to a web server, then send your audience the link to the story.html file (which is the file that launches the course).
- FTP: This opens a window where you can enter your FTP credentials and transfer your output to a web server.
- Zip: This creates a zipped file of your output in the location you specified on thePublish window.
- Open: This opens a file viewer where you can see the files Storyline just created. After you move the files to a web server, send your learners the link to the story.html file (which is the file that launches the course). Depending on the device and browser being used, learners will automatically be directed to the right format. (See below for details.)
- HTML5: This launches the HTML5 version of the published output in your default web browser. Important: Since your files have been prepared for web deployment, you might encounter unexpected behavior when viewing the course from your local hard drive. It's always best to upload your published output to its final destination and test it there. Also, be sure you're using a supported HTML5 browser.
Step 6: Distribute Your Published Course
Now that you've published, it's time to move your web-ready course to a website or server, give it a test run, and send learners a link to the story.html file for viewing.
When learners launch the story.html file, they'll see the right type of content based on the device and browser being used.
- Learners will see the Flash version of your course if their browser supports it.
- If learners are using iPads or Android tablets and you selected the Articulate Mobile Player option when you published, the course will launch in the app. (If they don't have the app installed, they'll be prompted to install it.)
- If learners are using iPads or Android tablets and you didn't select the Articulate Mobile Player option when you published, but you did select HTML5, the HTML5 output will launch in their mobile browser.
- If learners are using a browser without Flash and you marked the HTML5 option, they'll see the HTML5 output. (Click here for a list of supported HTML5 browsers.)