Engage '13: Publishing a Standalone Interaction for Web

Article Last Updated

This article applies to:

If you want learners to have access to a standalone interaction 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'll want to publish to an LMS instead. Or, if you need to incorporate your interaction into an Articulate Presenter course, see this tutorial.)

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

Step 1: Enter Title, Description, and Folder Location

  1. On the Engage ribbon, click the Publish button. (Or, click the small triangle under the Preview button and select 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'd like. This text defaults to the type of interaction you're building. If you change it, it'll change the title text that Engage uses in the following places (but it won't change your actual file name):
    • The folder that Engage creates to contain your published output. For example, if the Title field contains the words MSDS Interaction, Engage creates a new folder on your hard drive called MSDS Interaction - Engage output when you publish.
    • The browser title bar, when learners view your published interaction in a browser window.
    • The top bar of your interaction player, if you've opted to include the title as one of the player features
    • If you publish your content for the Articulate Mobile Player app, the interaction title is also used on the HTML launch page and the list of content names in the mobile player library.
  4. In the Description field, you can enter text about your interaction. If learners view your interaction with the Articulate Mobile Player, your description text appears below the interaction thumbnail in the Articulate Mobile Player library.
  5. In the Folder field, indicate where on your computer you want Engage to create your published output. Click the ellipsis button (...) to browse to a specific location. Engage will create a new folder in that spot with all the files needed to play your interaction.
    • Important! Always publish to your local hard drive. Publishing to a network drive or a USB drive can create problems with your published output. After you publish your interaction to a local folder, upload the output to a web server to test it.

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

If learners use 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 interaction. By default, Engage uses an image representing the type of interaction you built, but you can choose a different image for the thumbnail. Simply click the blue text below the image. Then click Picture from File and choose an image.
  3. AuthorEmailWebsiteDurationDate, 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 learners use mobile devices that don't support Flash, mark the following options to make your interaction viewable in HTML5, the Articulate Mobile Player, or both. 

  • Include HTML5 output: This prepares your interaction so that it's viewable as HTML5 content if a learner doesn't have the Flash Player and they view your interaction 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 interaction as HTML5 content.
  • Use Articulate Mobile Player for iOS or Android: This prepares your interaction so learners have the best viewing experience on iPads and Android devices. Learners view the content with the Articulate Mobile Player app, which they'll be prompted to install when they launch the interaction if they don't already have it.
  • Allow downloading for offline viewing: Mark this box to let learners download your interaction to their Articulate Mobile Player library. Once learners download the interaction, they can view it at any time with or without Internet access, even if you remove the interaction from the web server where you've hosted it. Your interaction stays in the learner's Articulate 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 interaction indefinitely or if you plan to update the interaction 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 last-minute changes to your interaction player or the compression settings Engage uses when publishing. 

  1. The Player field shows the name of the player that Engage will use when you publish. (The player is the interface that users see when they view your interaction.) 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 Customizing the Engage Player.
  2. The Quality field lets you control the compression settings Engage uses for audio, video, and pictures you've added to your interaction. The settings here default to whatever you used the last time you published an Engage 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 gives you higher-quality output but also 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.
  3. The Theme Colors field shows the colors you've applied to your interaction. Click the link if you want to switch to a different theme or make last-minute adjustments to the colors and effects used in your interaction. (More about theme colors.)
  4. The Playback Mode field lets you control how learners navigate through your published interaction. To change the playback mode, click the blue text and select any of the following options:
    • Choose Interactive if you want to give learners the freedom to view steps in any order. If you mark this option, you can also mark the box to Show preview/next buttons to provide navigation buttons in the lower right corner of the player. Unmark this box if you'd prefer not to include previous and next buttons.
    • Choose Linear if you want to make sure learners view all the steps in order.
    • Choose Presentation if you want the interaction to advance by itself. If you choose this option, learners won't be able to interact with your published output (i.e., they won't be able to jump to different steps in the interaction, rewind videos, or launch hyperlinks). When you choose presentation mode, you can also control the default duration for steps that don't contain any audio or video by typing the desired number of seconds into the field provided.
    • Some interaction types also include Segment Order options. Use these options to specify where the interaction should start and in which direction the segments should proceed.

Step 5: Publish

When you're finished making changes to the options on the Publish window, click the Publish button.

Engage creates your published output in the location you specified. When publishing is complete, you'll see the following pop-up, and you can choose the option that works for you.

  • View Interaction: This launches your interaction 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 interaction from your local hard drive. After publishing for web, it's always best to upload your published output to its final destination and test it there.
  • 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 interaction with a subject matter expert (SME) or other reviewer, 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 usually better to move your files to a web server, and then send your audience the link to the interaction.html file (which is the file that launches your interaction). This way, you're less likely to burden 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 every time you update the interaction.
  • FTP: This opens a window where you can enter your FTP credentials and transfer the 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 Engage just created. There will be an interaction_content folder, a meta.xml file containing project info, an interaction.swf file, and a file called interaction.html (which is the file that launches your interaction). If you've opted to include HTML5 output and/or make your interaction viewable in the Articulate Mobile Player, there will also be some additional files to support these options. After you move your files to a web server, send learners a link to the interaction.html file so they can view your interaction. Depending on the device and browser learners use, they'll automatically get directed to the appropriate format. (See below for more info on that.)

Step 6: Distribute Your Published Interaction

Now that you've published, it's time to move your web-ready interaction to a website or server, give it a test run, and send learners the link to the interaction.html file for viewing.

When learners launch the interaction.html file, they'll see the right type of content based on the device and browser being used.

  1. Learners will see the Flash version of your interaction if their browsers support it.
  2. If learners are using iPads or Android devices and you selected the Articulate Mobile Player option when you published, the interaction will launch in the app. (If they don't have the app installed, they'll be prompted to install it.)
  3. If learners are using iPads and you didn't select the Articulate Mobile Player option when you published, but you did select HTML5, the HTML5 output will launch in mobile Safari.
  4. 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.)