Browse Articles

Browse Articles

Storyline 1: Publishing a Project for Web

Article Last Updated

This article applies to:

If you want learners to be able to access your course via the Internet or an intranet, and if you don't need to track their completion or progress, then web publishing is for you. (If you do need tracking capabilities, you'd want to instead publish to an LMS.)

In this tutorial, we'll take a look at how to use Storyline's web publishing option to turn your project into web-ready content:

Step 1: Enter Title, Description, and Folder Location

  1. On the Home tab of the Storyline ribbon, click the Publish button. (Or, from any other tab on the ribbon, you can click the small triangle under the Preview button, and then choose Publish.)
  2. When the Publish window appears, click the Web tab.
  3. Check the text that appears in the Title field, and customize it if you like. This text defaults to the name of your Storyline file. If you change it, it'll change the title text that Storyline uses in the following places (but it won't change your actual file name):
    • The folder that Storyline creates to contain your published output. For example, if the Title field contains the words MSDS Course, Storyline creates a new folder on your hard drive called MSDS Course Output when you publish.
    • The browser title bar, when learners view your published course in a browser window.
    • The top bar of your course player, if you've opted to include the title as one of the player features. 
    • If you publish your content for use with the Articulate Mobile Player, the course title is also used on the HTML launch page from which learners can add the course to their player. Once they do that, the title is added to the list of course names in the mobile player library.
  4. In the Description field, you can enter some descriptive text about your course if you like. If learners view your course on an iPad with the Articulate Mobile Player, your description text appears below the course thumbnail in the mobile player library.
  5. In the Folder field, indicate the place on your computer where you want Storyline to create your published output. You can 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 play your course.
    • Important! Always publish to a local drive on your computer. Publishing to a network drive or a USB drive can create problems with your published output. After you publish your course to a local folder, you can move the output to a web server and test it.

Step 2: Enter Additional Project Info for the Articulate Mobile Player (Optional)

If learners will view content on iPads with the Articulate Mobile Player, you can add more information by clicking the ellipsis button (...) next to the Title field on the Publish window. The following Project Info window appears:

  1. The Title and Description are the same as what you entered on the Publish window; you can change the text here if you'd like.
  2. When learners browse content in their Articulate Mobile Player library, the thumbnail below the Title field will appear for this course. By default, Storyline uses an image of the first slide in your course, but you can choose a different image for the thumbnail. Just click the blue text below the image. Then select a different slide, or click Picture from File and choose an image.
  3. Author, Email, Website, Duration, Date, and Version appear on the content information cards in the Articulate Mobile Player library.
  4. Identifier applies only to content published for LMS.
  5. 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 fields on this window, click OK to return to the Publish window.

Step 3: Choose HTML5 and/or Mobile Publishing (Optional)

If some or all of your learners will access your content with an iPad or some other mobile device that doesn't support Flash, you can use the following options on the Publish window to make your course viewable in HTML5, the Articulate Mobile Player, or both. If you do this, be sure to also check out the feature comparison matrix here so that your content looks and behaves the way you expect when viewed in a non-Flash environment.

  • Include HTML5 output: This prepares your course so that it's viewable as HTML5 content if a learner doesn't have the Flash player and they view your course in an HTML5-compatible browser. Keep in mind that not all browsers handle HTML5 content equally. This article identifies which browsers your learners should use if they need to view your course as HTML5 content.
  • Use Articulate Mobile Player on iPad: This prepares your course so that learners receive the best possible viewing experience on an iPad. Users view the content through Articulate's free mobile player app, which they'll be prompted to install the first time they attempt to use their iPad to view a Storyline-published course. To find out why the Articulate Mobile Player provides a richer learning experience than viewing content as HTML5, check out this article.
  • Allow downloading for offline viewing: Mark this box to give your learners the option of downloading your course to their Articulate Mobile Player. Once learners download the course, they can view it at any time, even if they don't have internet access, and even if you remove the course from the location where you've hosted it. The course stays in your learners' mobile player library until they remove it. (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, at any time, or if you plan to update the course and are concerned about learners viewing previously downloaded content that becomes obsolete.) 

Step 4: Check Player Properties and Quality Settings

The Properties section of the Publish window allows you to make any last-minute changes to your course player, or to change the compression settings Storyline uses when publishing. 

  1. The Player field shows the name of the player that Storyline will use when you publish. (The player is the interface that users see when they view your course, and it can include things like player controls, resources, a glossary, a menu, and other features.) Click the player name if you'd like to make some final adjustments to your player or switch to a different player. If you need help choosing your player settings, see the tutorials on Customizing the Storyline Player.
  2. The Quality field allows you to control the compression settings Storyline uses for any audio, video, and pictures you've added to your course. The settings here default to whatever you used the last time you published a Storyline project. To change the quality settings, click the blue text and change any of the fields as noted below; then click OK.
    • Choose Standard if you want to use the default settings. If you mark this option, the values on the window revert back to their defaults (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 click and drag the slider on any of the three values to change the compression. Using higher values means higher-quality output, but also larger file sizes (which means longer download times). Lower values mean 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 any changes to the options on the Publish window, just click the Publish button.

Storyline creates your published output in the location you specified. When publishing is complete, you'll see the following pop-up, and you can choose whichever option suits you:

  • View Story: This launches your course in your web browser so you can take a look at your output. Important note about viewing your published content: Since your files have been prepared for deployment over the web, in some situations you might encounter unexpected behavior if you try to view the presentation from a local drive (such as your computer's hard drive). When publishing for web, it's always best to upload your published output to its final destination and test it there, rather than testing it from a local source.
  • Email: This opens up 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 an SME or other reviewers, or if you need to send it to someone who will place it in the location from which it'll be deployed. If your audience is larger than just a few, though, it's usually better to move your files to a web server instead, and send your audience the link to player.html (the file which launches your course). This way, you're less likely to logjam your email system with attachments, your recipients won't need to fuss with saving and unzipping your file, and you won't have to resend revised files to a slew of people every time you update the course.
  • FTP: This pops up a window where you can enter your FTP credentials and transfer your output to your website.
  • ZIP: This creates a zipped file of your output in the location you specified on the Publish window.
  • Open Folder: This opens a file viewer where you can see the files Storyline just created. There will be a story_content folder, a file called story.swf, a meta.xml file containing some project info, and a file called story.html (which is the file that launches your course). If you've opted to include HTML5 output and/or make your course viewable on the Articulate Mobile Player, there will also be some additional files to support these options. When you move your files to a web server, you'll need to send your users a link to story.html so they can view your course. Depending on the device and browser learners use, they'll automatically get directed to the appropriate format. (See below for more info on that.)

What Do I Do with My Published Files?

Now that you've published, it's time to move your web-ready course to your website or server, give it a test run, and then send your users a link to the story.html file so they can access your course.

If You Publish for HTML5 and/or the Articulate Mobile Player...

When learners open the course via story.html, they'll automatically see the right type of content based on the device and browser they're using:

  • They'll see the Flash content if their browser supports it.
  • If they're using an iPad, and if you chose the Articulate Mobile Player option when you published, they'll see a launch page that allows them to view the course in the Articulate Mobile Player. (And if they don't have the player installed on their iPad yet, they'll see an option to install it.)
  • If they're using an iPad and you didn't choose the Articulate Mobile Player option when you published, but you did choose HTML5, they'll see the HTML5 output.
  • If they're using some other non-Flash compatible browser and you chose to publish for HTML5, they'll see the HTML5 output.