Engage 360: Adding Content Library 360 Media
Find the perfect photos, illustrations, and videos for your interactions. Choose from 22+ million Content Library 360 assets that you can access right from Engage 360. All assets are available to use in your interaction for no additional charge. Adding Content Library 360 Media to Your Interaction Setting Media Properties Swapping Out Assets Adding Content Library 360 Media to Your Interaction Select the step in your interaction where you want to add a photo, illustration, or video. Then click the Content Library 360 Media icon in the media panel. When the media browser opens, use the drop-down list in the upper right corner to select the type of media you’re looking for: Photos, Illustrations, or Videos. Then type a search term in the field at the top of the window and press Enter. (Tip: The browser remembers your last search term during the current session.) Zoom in and out by using the zoom slider in the lower left corner or by holding down the Ctrl key on your keyboard and scrolling your mouse wheel. If you’re browsing through videos, you can preview them before adding them to your interaction. Just click the Preview button that appears when your mouse hovers over a video thumbnail. Select the asset you want to use and click Insert to add it your interaction. Setting Media Properties After adding a Content Library 360 photo, illustration, or video to your interaction, you can customize its properties, such as position, size, and alternate text. These properties appear below your media (except in media tour interactions). Property Applies To Description Position Photos Illustrations Videos Choose where you want the asset to display in your published interaction (top, bottom, left, or right). Size Photos Illustrations Videos Choose either Automatic or Custom. If you choose Automatic (the default option), Engage will adjust the size of the asset so it fits in the allotted space in your published interaction. If you choose Custom, enter the width and height in pixels. Mark the Lock Aspect Ratio box to keep the asset from being distorted when you adjust its size. Zoom Image Photos Illustrations This option adds a magnifying glass icon to the image in your published output. When learners click the image, it'll zoom to a larger version—either in the current window or in a separate window, depending on your selection. Tip: An image will only zoom when its original size is larger than the allotted space in your published interaction. In other words, if an image has to be scaled down to fit in your interaction, it can be zoomed. If an image is small enough to fit in your interaction without scaling, it can’t be zoomed. Include Playbar Videos Mark this box to add player controls to the video so learners can play, pause, rewind, and fast-forward. When you include a playbar, you also have the option to automatically start the video or wait for learners to click the play button. Do not compress video at publish Videos Mark this box if you don’t want the video to be compressed in your published interaction. Video quality may be higher, but the published output will also be larger. Uncheck the box to compress the video in your published interaction. It’ll be optimized for web playback, resulting in smaller file sizes. This is especially helpful for learners with slow internet connections. This property is available for MP4 videos created with baseline, main, or high profiles. If it’s grayed out, it means the video is another file type or profile, in which case the video will be compressed in your published interaction. Alternate Text Photos Illustrations Videos Enter a brief description of the photo, illustration, or video. Screen readers will read the description to your learners. Download our free accessibility e-book for tips on writing good alt text. Swapping Out Assets You can quickly swap out one Content Library 360 asset for another. Some properties, such as position and zoom, will remain the same, while others will reset. Click the blue, hyperlinked text below your media, as shown below. When the media browser opens, choose a media type, enter a search term, and press Enter. Select the asset you want to use and click Insert to add it to your interaction. You can replace a Content Library 360 asset with a file from your computer or a Content Library 360 character. Click the red X in the media panel to remove the original asset, and then choose a different media icon: picture, character, or video. And you can edit a Content Library 360 video by clicking the Edit Video icon in the media panel. Learn more.Engage 360: Replacing Fonts
Engage 360 lets you quickly replace one font with another throughout your interaction. Simply choose the font you want to replace and the font you want to use instead, and Engage will swap out every instance of the font for you. Click Replace Fonts on the Engage ribbon. Use the Replace drop-down list to select the font you want to replace. You’ll only see the fonts currently in use in your interaction. Then use the With drop-down list to choose a new font. Click Replace. If you want to replace another font while the Replace Fonts window is still open, repeat steps 2-4. When you’re done, click Close to exit the window.Engage 360: Previewing and Publishing an Interaction
Preview how your interaction will look and behave on any device and orientation without leaving Engage 360 or interrupting your workflow. Then publish your interaction to HTML5 for a variety of platforms, including web servers and learning management systems. Watch this video introduction to learn how, then follow the activities below to practice. Practice Activities: Preview Your Interaction Choose a Publish Option Adjust the Publish Settings Publish and Distribute Your Interaction Practice Activity: Preview Your Interaction Engage 360 uses responsive preview to show you how your interaction will look and behave on any device and orientation. And it’s so easy! Just click a button. Open Comstar Real Estate.intr from your practice files. Click Preview on the Engage ribbon. Then click each device icon in the upper right corner of the preview window to see how your interaction looks and behaves on each device and orientation. Click Close Preview when you’re done. To learn more about responsive preview, see this user guide. To learn more about restricting which device orientations learners can use when viewing your interaction, see this user guide. Practice Activity: Choose a Publish Option Engage 360 supports several publish options, described below. For this tutorial, let’s publish to Review 360 where you can collaborate with stakeholders and subject matter experts. Open Comstar Real Estate.intr from your practice files. Click Publish on the Engage ribbon to launch to publishing wizard. Click the Review 360 tab on the left side of the window. Before we continue, here’s some quick info on each publishing option: Articulate Presenter Articulate Presenter 360 is the fastest, easiest way to create multi-device, presentation-based courses using PowerPoint’s familiar interface. You can create media-rich interactions in Engage 360, then publish them directly into your Presenter 360 courses. To learn more about publishing interactions to Presenter 360, see this user guide. Review 360 Publish interactions to Review 360 to test how they look on various devices and to collect feedback from stakeholders with an easy-to-use web interface. To learn more about publishing interactions for Review 360, see this user guide. Web If you want learners to access interactions over the internet or a private intranet, and if you don’t need to track their progress, then publish for web distribution. To learn more about publishing interactions for web servers, see this user guide. Articulate Online Articulate Online is our hosted tracking and reporting system for e-learning content. Publish interactions to Articulate Online when you need an efficient, cost-effective way to track learners’ progress and results. To learn more about publishing interactions to Articulate Online, see this user guide. LMS Choose the LMS publishing format if you're using a learning management system (LMS) to track learners' progress and results. To learn more about publishing interactions for AICC, SCORM, and Tin Can API LMSs, see this user guide. CD Choose the CD publishing format when you need to distribute interactions via CD, DVD, USB drive, network drive, kiosk, or email. To learn more about publishing interactions for CD or other local media, see this user guide. Word Publish for Microsoft Word when you need a printable version of your interaction. It’s a convenient way to distribute handouts or provide a transcript for accessibility purposes. To learn more about publishing interactions to Microsoft Word, see this user guide. Practice Activity: Adjust the Publish Settings After choosing a publish option, adjust the settings, such as title, description, publish location, quality, tracking options, and LMS specification. For details, see the user guide for each publishing option listed above. Since we’re publishing to Review 360 in this tutorial, configure these settings: Select Create a new item and enter a title for your interaction in the corresponding text field. If you’d like to make any last-minute changes to the player, quality, theme colors, or playback mode before publishing, click these properties and make your adjustments. Practice Activity: Publish and Distribute Your Interaction Now you’re ready to complete the publishing process. Click the Publish button at the bottom of the publishing wizard. When the process is complete, you’ll see a Publish Successful window with one or more follow-up options, depending on the publish option you selected. Since we published to Review 360 in this tutorial, you’ll see an option to view the published interaction in your Articulate 360 account in your default web browser. To learn more about the follow-up options and distribution instructions for each publish option, see these user guides: Articulate Presenter Review 360 Web Articulate Online LMS CD Word Summary In this tutorial, you learned how to use Engage 360’s stunning responsive preview features to see how your mobile-ready interaction looks and behaves on computers, tablets, and smartphones. And you published an interaction to Review 360 where you can collect feedback from stakeholders. For answers to common questions about publishing interactions for mobile devices, see this user guide.Engage 360: Customizing the Interaction Player
In Engage 360, the player refers to the interface around the perimeter of your interaction. In this tutorial, you’ll learn how to customize the player. You can choose which features appear on the player, modify the colors and font, change the text labels, adjust the size, and control how the interaction behaves when learners launch it more than once. You can even make the player invisible. Watch this video introduction, then follow the activities below to practice. Practice Activities: Open the Player Properties Choose Your Player Features Change the Colors, Font, and Font Size Customize the Text Labels Change the Player Size and Resume Behavior Save Your Customized Player Practice Activity: Open the Player Properties First, we need to open the player properties. Open Comstar Real Estate.intr from your practice files. Click Player on the Engage ribbon. Notice the three main sections of the player properties window: Player categories appear on the ribbon across the top of the window. The selection pane on the left side of the window is where you make modifications. The interactive preview pane on the right side of the window updates automatically as you makes changes. Practice Activity: Choose Your Player Features The player properties window always opens directly to the Features category where you can choose which features to include on your player: title, volume controller, and/or seekbar. Let’s turn off all the player features. Uncheck the Title, Volume, and Seekbar boxes. Notice that the interactive preview on the right side of the window updates to reflect your changes. To learn more about the player features, see this user guide. Practice Activity: Change the Colors, Font, and Font Size In this activity, we’ll change the color scheme for our interaction player, choose a different font, and increase the player font size. Click Colors & Effects on the player properties ribbon. Select a different color scheme. Change the player font to Articulate Light. Increase the player font size to 120% To learn more about changing the player colors, font, and font size, see this user guide. Note: Currently, the color and font options only apply to the standard player, not the responsive player. See this interactive demo to know which player properties are supported in the responsive player. Practice Activity: Customize the Text Labels In this activity, we’ll make a change to one of the player text labels. Click Text Labels on the player properties ribbon. Scroll down to the Previous Button label. Click the custom text field for the Previous Button label and change it to BACK. Click Update Preview below the text labels list and watch the PREV button change in the preview pane. To learn more about customizing the player text labels, see this user guide. Practice Activity: Change the Player Size and Resume Behavior In this activity, we’ll change how the player scales in learners’ browsers and how the interaction behaves when learners launch it more than once. Click Other on the player properties ribbon. Set the Player size property to Scale player to fill browser window. Change the resume behavior by setting the On restart property to Always resume. To learn more about controlling the browser size and player size, see this user guide. To learn more about the resume behavior, see this user guide. To learn more about right-to-left language support, see this user guide. Practice Activity: Save Your Customized Player Finally, let’s save our custom player, so we can use it with other Engage interactions. Click Current Player on the ribbon and choose Save as. Give your custom player a name and click OK. If you don’t want to keep the custom player we created in this tutorial, click Current Player on the ribbon and choose Delete. To learn more about saving custom players, switching to a different player, and sharing custom players, see this user guide. Summary In this tutorial, you learned how to customize the interaction player in Engage 360, including features, colors, font, text labels, size, and resume behavior. To dive even deeper into player customization, see this user guide. In the next tutorial, we’ll publish an interaction.Engage 360: Working with Interaction Properties
In this tutorial, we’ll learn how to use the interaction properties in Engage 360 to control playback mode, theme colors, sound effects, fonts, quality settings, interaction size, and more. Watch this video demonstration, then follow the activities below to practice. Practice Activities: Change the Playback Mode Adjust Interaction-Specific Properties Choose Theme Colors Change Animation Style, Media Border Style, Sound Effects, and Fonts Customize the Quality Settings Change the Interaction Size Practice Activity: Change the Playback Mode You can choose from three playback modes for your published interaction. Interactive Learners are free to navigate the interaction in any order. Linear Learners must navigate through the interaction in order from beginning to end. Presentation The interaction advances automatically in order from beginning to end without any input from learners. Open Comstar Real Estate.intr from your practice files. Click Interaction Properties on the ribbon. Select the Playback tab on the left side of the window that opens. Choose a different playback mode and click OK. Preview your interaction to see how it behaves. To learn more about the playback modes, see this user guide. Practice Activity: Adjust Interaction-Specific Properties Most interaction types have at least one property that’s specific to that type. For example, the tabbed image interaction has properties for the size and placement of the image, and you can choose a numbering style for the tabs. Review this article to learn more about the interaction-specific properties for each type of interaction in Engage 360. Practice Activity: Choose Theme Colors Engage has several built-in theme colors, making it a snap to recolor your interaction with a few mouse clicks. You can also create your own custom theme colors. In this activity, we’ll choose a different built-in color theme. Open Comstar Real Estate.intr from your practice files. Click Interaction Properties on the ribbon. Select the Colors and Effects tab on the left side of the window that opens. Choose a theme from the Theme colors drop-down list. Use the Header type drop-down list to switch to the Light header theme. Click OK to close the interaction properties, then preview your interaction to see how it looks. To learn more about working with theme colors in Engage 360, including how to create your own custom themes, see this user guide. Practice Activity: Change Animation Style, Media Border Style, Sound Effects, and Fonts In this activity, we’ll adjust the effects and fonts for an interaction. Open Comstar Real Estate.intr from your practice files. Click Interaction Properties on the ribbon. Select the Colors and Effects tab on the left side of the window that opens. Switch to the Fade animation style. Change the media border style to Drop Shadow. Turn the sound effects off. Change the title and content fonts to Articulate Light. Click OK to close the interaction properties, then preview your interaction to see how it looks. To learn more about effects and fonts in Engage 360, see this user guide. Practice Activity: Customize the Quality Settings Let’s adjust the compression settings for videos, audio clips, and images in an interaction. Open Comstar Real Estate.intr from your practice files. Click Interaction Properties on the ribbon. Select the Quality tab on the left side of the window that opens. Select the Custom compression option and use the sliders to change your quality settings. (Note: Image compression only applies to JPG files.) Click OK to close the interaction properties. To learn more about the quality settings in Engage, see this user guide. Practice Activity: Change the Interaction Size In Engage 360, you can now change your interaction size to anything you want. Widescreen, portrait, or square. It’s your choice. Create a new interaction of your choice. Click Interaction Size on the ribbon. Choose Custom from the Interaction Size drop-down list. Uncheck the Lock aspect ratio box, then enter any width and height you choose (up to a max of 2047 pixels for each). To learn more about setting your interaction size in Engage 360, see this user guide. Summary In this tutorial, you learned how to adjust the interaction properties and interaction size in Engage 360. In the next tutorial, we’ll customize the interaction player.Engage 360: Adding and Editing Content
It’s super easy to add and edit content in Engage 360 interactions. Just use the form-based interface to enter text and add media to each step in your interaction. Then use the text formatting options, built-in audio editor, and media properties to edit your content until it’s just right. Watch the videos below and use the practice activities to follow along. Add and Format Text Add and Edit Audio Add a Picture and Adjust Its Properties Add a Video and Adjust Its Properties Practice Activity: Add and Format Text Adding text to an interaction couldn’t be easier. Just type in the title field and the text panel for each step in your interaction. Open Comstar Real Estate.intr from your practice files. We’ve already added text to the interaction for you. (If you’d like to recreate this project from scratch before continuing, see Creating Your First Interaction.) Use the Format Text tab on the Engage ribbon to format the interaction text as you’d like. Preview your interaction to see how it looks. To learn more about text formatting, see this user guide. Practice Activity: Add and Edit Audio You can import audio files into your interactions or record narration right in Engage. Let’s record narration some narration. Make sure you have a microphone available for this activity. Open Comstar Real Estate.intr from your practice files. Select the introduction in the steps panel on the left side of the screen, then click the Narration Script button in the audio panel on the right side. You’ll read this script when you record narration. When you’re ready, click the red Record button and read the narration script out loud. Feel free to add an unnecessary pause or something you can edit out in the following steps. When you’re done, click the Stop button. Now let’s open the audio editor. Click the Edit Audio icon (look like audio waveform). Use the play/pause and stop buttons in the lower left corner of the audio editor to listen to your recording. Delete or silence part of the audio waveform. Click Save & Close. To learn more about adding audio to your interactions, see this user guide. Practice Activity: Add a Picture and Adjust Its Properties You can add one media file to each step in your interaction—picture, character, or video. Open Comstar Real Estate.intr from your practice files and select the introduction in the steps panel. Let’s replace the existing picture. Click the red X below the image thumbnail in the media panel to delete the image. Click the Picture icon in the media panel, then import the house.jpg file from your practice files. Change the Position of the image to the Left side of the interaction. Change the Size to Custom and set the Width to 200 px. (The height will automatically adjust to maintain the image’s aspect ratio.) Finally, mark the box to Zoom Image so learners can see a larger version of your picture. Preview your interaction to see how it looks. To learn more about adding images, see this user guide. Practice Activity: Add a Video and Adjust Its Properties You can add videos to your interaction from a variety sources, including video files, video-hosting websites, and your webcam. Open Comstar Real Estate.intr from your practice files and select the last step (Pride) in the steps panel. Let’s replace the existing video. Click the red X below the video thumbnail in the media panel to delete the video. Click the Video icon in the media panel and choose Video from File. Import the video.mp4 file from your practice files. Change the Position of the video to the Left side of the interaction. Change the Size to Custom, then set the Width to 800 px. Since we used such a large value for the width, Engage should tell you that it’s too large, and it should tell you what the maximum size is. Click OK to accept the maximum size values. Mark the box to Include Playbar, then uncheck the box to Auto Start the video. Preview your interaction to see how it looks. To learn more about adding videos to your interactions, see this user guide. To learn all about the built-in video editor where you can trim, crop, insert a logo, and more, see this user guide. Summary In this tutorial, you learned how to populate an interaction with text, audio, images, and videos using Engage’s intuitive form-based interface. Good work! Learn more about working with media in Engage 360. In the next tutorial, we’ll explore the interaction properties window.Engage 360: Creating Your First Interaction
Creating interactions in Engage 360 is as easy as filling out a form, and there are 20 beautifully-designed interaction types from which to choose. Watch this video demonstration, then follow the activities below to practice creating an interaction and filling it with text and media. Practice Activities: Choose an Interaction Type Add Text and Media to Your Interaction Preview Your Interaction Practice Activity: Choose an Interaction Type In this tutorial, we’ll create a media panel interaction. Launch Engage and click New Interaction. Select Medial Panel and click OK. Practice Activity: Add Text and Media to Your Interaction Using the media panel interaction we just created, click the Add Step button on the ribbon to add one more step to your interaction for a total of five steps. (Media panel interactions start with four steps by default.) Change the Interaction Title to Comstar Real Estate. Next, fill in the title and text for each step in your interaction, including the introduction, using the practice-text.txt file in your practice files. Import the following images and videos from your practice files into each step in your interaction: Step Practice File Introduction house.jpg Living Room LivingRoom.jpg Foyer Foyer.jpg Basement Basement.jpg Media Room MediaRoom.jpg Pride video.mp4 Practice Activity: Preview Your Interaction Now enjoy the interaction you just created! Click Preview on the Engage ribbon. The preview is fully interactive, so you can step through the media you added. Click the mobile device icons in the upper right corner of the preview window to see how your interaction will look and behave on tablets and smartphones. Click Close Preview when you’re done. Summary In this tutorial, you learned how to create a new interaction and fill it with text and media. In the next tutorial, we’ll format text, edit audio, and adjust the properties for pictures and videos.
