Engage 360: Adding Content Library 360 Media
Find the perfect photos, illustrations, and videos for your interactions. Choose from 10.3+ million Content Library 360 assets that you can access right from Engage 360. All assets are royalty-free with no attribution required. 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, orvideo. 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
Engage360 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 Engagewill swap out every instance of the font for you. Click Replace Fonts on the Engageribbon. 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 HTML5for 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 toReview 360where 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 Review360 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. Review360 Publish interactions toReview 360to 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 forReview 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 toReview 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 toReview 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 publishoption, see these user guides: Articulate Presenter Review360 Web Articulate Online LMS CD Word Summary In this tutorial, you learned how to useEngage 360’s stunning responsive preview features to see how your mobile-readyinteractionlooks and behaves on computers, tablets, and smartphones. And you published aninteraction toReview360where 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. Scrolldown to the Previous Button label. Click the custom text field for the Previous Button labeland 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.
