Storyline 3: Using Text Styles
Use text styles in Storyline 3 to control the visual appearance of text elements, such as paragraphs and headings. Simply format each style with font and paragraph options so they look the way you want, and reuse the styles throughout your course for a consistent design. Text styles are great for experimenting with different fonts, colors, sizes, spacing, etc. When you update a style, Storyline 3 applies the changes to your entire project instantly. Text styles also play an important role inaccessibilityby making courses easier to navigate with a screen reader. Getting Started Defining Styles Creating Custom Styles Renaming Custom Styles Applying Styles Resetting Styles Reusing Styles Getting Started Youneed Storyline 3 build3.12.24693.0or later to use text styles. We recommend using the latest build for all the newest enhancements, including: Accessible text styles Custom text styles Hyperlink states If you’ve used text styles in other apps, like Microsoft Word or Google Docs, you’ll find they work much the same way in Storyline 3. Define your styles and apply them to blocks of text in your project. It’s that easy. Let's get started by talking about style definitions, style previews, how to identify applied styles, and where styles are stored. Style Definitions Storyline 3 has six built-in text styles, as defined here and shown below: Normal textis the default style for all text. You’ll typically use this style for body text in your project. Headings 1-4add hierarchy and structure to your content. For example, you might use Heading 1 for slide titles and Heading 2 for subtitles. You could also use Heading 3 and Heading 4 to organize lengthy text in scrolling panels or call out important content on the slide. Hyperlinkdefines the default states for linked text—normal (unvisited), hover, active, and visited. You can also create an unlimited number ofcustom text stylesfor other elements, including blockquotes, button labels, image captions, speech bubbles, and more. It's your choice! Style Previews The Text Styles drop-down list gives you a preview of what each style looks like. The previews update as you modify the styles. And if you’re using a dark background color with light text, theDark 2background color from yourtheme colorsappears in the previews, too, as shown above. Storyline 3 also supports live (real-time) previews of text styles for the selected text. Simply hover over your styles in the ribbon drop-down list to see how the selected text looks with each one. How to Identify Applied Styles You can always tell which style is applied to a block of text by placing your cursor in the text and looking at the Text Styles button on the ribbon. It displays the style that’s currently in use.(Hyperlinked text displays the style from which it inherits its font face and size attributes.) Here’s another way to tell which style is currently in use. Place your cursor in the text and clickText Styles. A check mark identifies the text style applied to the text. Get details about each text style by glancing at its sub-menu in the ribbon drop-down list. The sub-menu header displays the style name, HTML tag (forimproved screen reader navigation), font, size, and decoration. Styles & Design Themes Text styles are saved with thedesign themein each project file. If you use more than one design theme in a project, each theme has its own set of text styles.Learn moreabout design themes and reusing text styles. Defining Styles Are you working with an existing project? We recommend updating and applying the heading and custom styles beforeupdating the normal text style. If you define Normal Text first, it’ll change all the text in your project since Normal Text is the default style for all text. If you accidentally updated Normal Text first, don’t worry—you can click the Undo button to revert the changes. Follow these steps to define each of your text styles. Format a block of text withfontandparagraphoptions so it looks the way you want.(The Hyperlink style is more flexible than other styles. It doesn't include the font face, size, and paragraph properties of your selected text. Hyperlinks inherit those attributes from other text styles.) Go to theHometab on the ribbon and clickText Styles. You’ll see a check mark and an asterisk next to the style that’s currently applied to your text (Normal Text is the default style). The asterisk indicates that the style has been modified for the selected text. Mouse-over the style you want to update with your formatting changes, then clickUpdate style from selectionon the sub-menu that appears. The style you choose to update automatically gets applied to your selected text. You don’t have to update the style with the asterisk beside it. You can update and apply any text style. Tips & Time Savers If the option toUpdate style from selectionis grayed-out, it means you selected the bounding box of the text object, and the object has more than one text style applied to it (you can have one style per paragraph). Place your cursor in one of the paragraphs to enable the update option. Text styles store all font and paragraph formatting options except bullets, numbering, and text direction. You’ll need to manually add bullets, numbering, and text direction where you want them. (Indents get stored in text styles unless they’re part of bullets or numbering.) Want to change the font for all your text styles all at once? Go to theDesigntab on the ribbon, clickFonts, and choose a different set oftheme fonts. The heading theme font is the basis for all heading text styles, and the body theme font is the basis for the other text styles. You can redefine your text styles as many times as you want. It’s a great way to experiment with different designs. If some text in your project doesn’t change when you update its style, it means you previously overrode the style with custom formatting for that particular object or slide. For example, let’s say your Normal Text style has a font size of 14, and you manually change the font size to 18 on one slide. Later, you decide to update the style with a font size of 16. Most of the text in your project will automatically update to a font size of 16, but that one slide will continue to use a font size of 18.If you want that slide to match the others, just reapply the text style to it. (Exception: If you override hyperlink formatting on a slide in your course and later want it to match your Hyperlink style, select the linked text, go to theHometab on the ribbon, and clickClear Formatting.) Modifying Hyperlink States You can easily define the normal (unvisited) state for hyperlinks using the "update style from selection" method described above. And since hyperlinks are interactive, you can customize the hover, active, and visited states too. Here's how. Place your cursor in any text box, click theText Stylesbutton on the ribbon, scroll toHyperlink, and selectModify. Click each of the state tabs on the window that appears, as shown below, and then select aText ColorandDecoration. Here are some helpful tips for customizing hyperlink states: The default text color for the normal state comes from theHyperlinkcolor in yourtheme colors. You can override the theme color by choosing a different text color for the normal state. By default, the colors of the hover and active states are variations of the normal state, and they stay in sync when you change the normal state color. For example, if you change the normal state text color to red, the hover and active states become lighter shades of red. However, you can override the default behavior and choose any colors you'd like for the hover and active states. The Hyperlink style is more flexible than other text styles. It doesn't include font face, size, or paragraph properties. Hyperlinks inherit those attributes from other text styles. For example, if a hyperlink is in a paragraph of normal text, the link inherits the font face, size, and paragraph properties of the Normal Text style plus the colors and decorations of the Hyperlink style. ClickOKto save your changes. Creating Custom Styles You can create as many custom styles as you want. Create custom styles for every text element, such as blockquotes, button labels, image captions, and speech bubbles. You can even create light and dark versions of styles for different backgrounds in a course. Use thefontandparagraphproperties to format text on a slide the way you want it to appear, then place your cursor in the formatted text. Go to theHometab on the ribbon, clickText Styles, and selectAdd Styleat the bottom of the list. Enter aNamefor your custom style, as shown below. Choose how Storyline 3 should identify your custom style to screen readers. You can select Normal Text ( <p> ), Heading 1 ( <h1> ), Heading 2 ( <h2> ), Heading 3 ( <h3> ), Heading 4 ( <h4> ), or Blockquote ( <blockquote> ) from thePublish asdrop-down list. (Learn moreabout accessible text styles.) ClickOK. Renaming Custom Styles Rename custom styles so they’re easy to identify as your list of styles grows. Place your cursor in any text box on the slide. Go to theHometab on the ribbon, clickText Styles, scroll to the style you want to rename, and clickModifyfrom the sub-menu that appears. Enter a newName, as shown below. ClickOK. Applying Styles It’s a snap to apply styles. Place your cursor in a block of text or select its bounding box. Then go to theHometab on the ribbon, clickText Styles, and choose a style from the list. That’s it!(Pro Tip: The Hyperlink style automatically gets applied when you add a hyperlink trigger to text.) Tips & Time Savers You can save time by applying text styles to yourslide masterandfeedback masterfirst.Then, if you need to override a text style on a specific slide in your course, you can manually edit the text on that slide directly. If you override a text style on your slide master with special formatting (e.g., font size or color), that formatting will carry over to the content slides in your course, and the tooltip for that style will include “Modified by Slide Master” as a reminder. Each paragraph in a text box can have a different text style. In other words, you can apply more than one style to the same text box—one style per paragraph or line of text. When you copy text from one slide and paste it onto another slide that has a differentdesign theme, the pasted text has the same style (Normal, Heading 1, etc.) as the original, but it could look different from the original, depending on how you paste it. If you press Ctrl+V or click thePastebutton on the ribbon, the pasted text keeps the original formatting. If you selectUse Destination Themefrom the right-click menu or thePastedrop-down list on the ribbon, the pasted text matches the destination theme instead. Resetting Styles You can reset a style to its default formatting when you want to start over or when you need to make your project file compatible with older versions of Storyline 360 and Storyline 3 that don’t support text styles. (Learn moreabout compatibility.) Place your cursor in a text box. Go to theHometab on the ribbon and clickText Styles. Mouse-over the style you want to reset and chooseReset stylefrom the sub-menu that appears. Reusing Styles Text styles are saved with thedesign themein each project file. A project can have more than one theme, and each theme has its own set of text styles. Here are a few ways to reuse your text styles in other themes or projects. Save Your Custom Theme Easily reuse text styles in other projects bysavingyour custom design theme andapplyingit to the other projects. (Want to change your default design theme for new projects?Here’s how.) Create a Storyline Template Since text styles are part of the design theme, you can create acustom Storyline template, and then use the template to start new projects or add slides to existing projects. Paste Text with Source Formatting Use this methodwhen a project has multiple design themes. Since each theme has its own text styles, you need to format each theme’s styles separately. If you want to reuse the same styles across multiple themes, try this: Go to a slide that has the text styles you want to reuse and create a text box with multiplelines of text. (You can delete this text box later.) Apply each ofyour text styles to a different line of text. Copy the text box. Go to a slide where you want to reuse the text styles. Press Ctrl+V or go to theHometab on the ribbon and clickPaste. This keeps the source formatting. Place your cursor in the first line of text, clickText Styleson the ribbon, scroll to the style with the asterisk, and chooseUpdate style from selectionon the sub-menu that appears. Repeat the previous step for the other six styles. Tip: If you import a slide into your project and define text styles for it, you’ve effectively customized the design theme for that slide. If you later import another slide from the same source, the new slide won’t have your custom text styles since it has the original, unmodified design theme. You can follow the steps above to copy your text styles to the new slide, or you canapply your custom design themeto the new slide.Storyline 360: Using Integrated Review 360 Comments
Get Review 360 comments in context as you work in Storyline 360, eliminating back-and-forth toggling between apps. With integrated comments, you can address stakeholder feedback, reply to and resolve comments, and add suggested images in real-time—all in one place. View Comments Add Text and Images from Comments Post Comments Resolve and Reopen Comments Understand Compatibility View Comments Review 360 comments only appear in Storyline 360 courses you've published to Review 360. Once you upload content to Review 360, the Comments panel instantly appears on the right of the screen. To view comments, select a slide and click the triangle in the upper right corner of the Comments panel. Comments are tied to specific slides, so the comments in the panel change as you move from one slide to another. Each comment includes a screenshot of how the slide looked when the stakeholder added feedback, providing context for your edits. Click the screenshot hyperlink to maximize the image in your web browser. Linked Review 360 Items When you publish multiple Review 360 items for a project, you can navigate and address stakeholder feedback for each right in Storyline 360. Once you republish your project as a new item in Review 360, the Comments panel displays a drop-down menu where you can easily switch between items. Linked Review 360 items are retained in Storyline 360 when you save your project as a new file, make a copy of it, or upload it to the cloud. When you share project files, collaborators have access to slide comments from linked Review 360 items unless you password-protect your content or only let invited users view your item. You can unlink Review 360 items by saving the project as a Storyline template, uploading it to team slides, or creating a new file and importing the slides. Add Text and Images From Comments Apply text from comments to the corresponding slide by hovering over the text and clicking the arrow icon. Add images from comments to corresponding slides. Hover over the asset and click the magnifying glass icon that displays, then click the arrow icon next to the enlarged version of the image. You can also download the image from the comment. Post Comments Continue collaborating with stakeholders directly in Storyline 360. Place your cursor in a comment box or reply field, type your comment or paste text from your clipboard, then click the Post button. If you change your mind, click Cancel. Your comments automatically sync with the discussion in Review 360. Hover over your posted comments for edit and delete options. Resolve and Reopen Comments Resolve addressed comments to keep the Comments panel from getting cluttered. Hover over an individual comment or the first comment in a discussion thread, then click the check mark icon that appears. You can also reopen a comment or discussion that was previously resolved. Check the Show resolved comments box, hover over the comment, then click the green check mark icon that appears. Understand Compatibility Integrated comments are exclusive to Storyline 360 as of July 2023. You can open, edit, and publish projects with integrated comments in Storyline 3 and earlier versions of Storyline 360. However, in-app comments won't display.Storyline 360: Using the Lost Connectivity Alert
We want you and your learners to have choices. That's why we're giving authors more control over the lost connectivity alert in Storyline 360. With the May 2023 update, we've disabled the lost connectivity alert by default. This feature notifies learners and prevents them from continuing when their connection is unstable so they don't lose their progress. Starting with the November 2022 update, learners saw a message stating they were offline and couldn't proceed with the course when either of the following occurred: LMS statements failed to record Assets, such as images or videos, failed to load When the LMS statement recorded or the asset loaded successfully, the offline notification disappeared, and the learner could continue taking the course. However, not every author found the feature helpful, especially as the default setting. The May 2023 update puts the decision to use it in your hands. Enable Lost Connectivity Alert Here's how to turn on the lost connectivity alert in your project: Go to the Home tab on the Storyline ribbon and click Player. When the Player Properties window appears, click Other on the ribbon. In the Connectivity Alert section of the window, tick the Prevent learners from progressing when offline checkbox and click OK. Save the project file to keep it enabled every time you open the project. The notification color contrasts with the modern player theme color to aid visibility. For example, a dark theme displays a white notification with dark text and vice versa, as shown below. The classic player always displays a white notification with dark text. Compatibility The lost connectivity alert is exclusive to Storyline 360, beginning with the November 2022 update. As of May 2023, we made it optional, giving you the choice. Projects published between the November 2022 and April 2023 update have this feature enabled by default. Existing published output will continue to work as expected. However, if you open that project in the May 2023 update or later, this feature will be disabled by default. Follow these steps to enable it. Project files that use this feature won't open in Storyline 3 or earlier versions of Storyline 360. To restore compatibility, uncheck the box to "prevent learners from progressing when offline" in the player properties.Storyline 360: Publishing a Course to Reach 360
Want to "reach" more learners? Reach 360—a frictionless LMS—lets you easily deliver training to a broad range of learners and quickly analyze training data. How to Access Reach 360 To publish courses to Reach 360, install the April 2023 update or later for Storyline 360. Your Articulate 360 team must also activate Reach 360, or the option will be grayed out. Note that Articulate 360 Teams admins are not Reach 360 admins by default. Learn more about permissions in Reach 360 and Articulate 360 Teams. Read on to learn how to publish your course directly to Reach 360. Publish a New Item or Update an Existing Item Enter Title and Description Enter Additional Project Info (Optional) Adjust the Player Properties and Quality Settings Choose to Publish a Slide, a Scene, or the Entire Course Adjust the Course Settings Choose Reporting and Tracking Options Publish Distribute Your Published Course FAQs Step 1: Publish a New Item or Update an Existing Item Go to the Home tab on the ribbon and click Publish. When the Publish window appears, select the Reach 360 tab on the left. If this is your first time publishing the course to Reach 360, the status will show "No submissions," as above. Once a course has been published to Reach 360, the status will display the date and time of the last publish. Step 2: Enter Title and Description Enter the Title text as you want it to appear in Reach 360. (If you have a title placeholder on the first slide, the title defaults to the text entered in that title placeholder. If you don't have a title placeholder on the first slide, the title defaults to the name of your project file. You can change the title of your published course here without affecting the name of your project file or the title placeholder on the first slide.) The maximum length for a project title is 80 characters. Use the Description field to define the purpose of your course. This displays on the cover page for your course in Reach 360. Step 3: Enter Additional Project Info (Optional) Click the ellipsis button (...) next to the Title field to define additional project info. This info is for your reference only. Only the title and description will be visible in Reach 360. The Title and Description fields are the same as those on the Publish window (see the previous step). The image below the Title field is the course thumbnail. Note that the course thumbnail and course cover photo you set in Storyline 360 won't display in Reach 360. You can, however, set a cover photo for your course in Reach 360. Enter values for Author, Email, Website, Duration, Date, Version, and Keywords if you'd like. These values won't display in Reach 360. The Identifier is a unique string of characters assigned by Storyline 360 that Reach 360 and your LRS use to identify your course. If you're republishing a course that's already in Reach 360 and your LRS, don't change the value in this field. When you're finished customizing the project information, click OK to return to the Publish window. Step 4: Adjust the Player Properties and Quality Settings Use the Properties section of the Publish window to make last-minute changes to your course player and quality settings. The Player property shows the name of the player currently assigned to your project. (The player is the frame around your slide content.) To make adjustments to your player, click the player name to open the player editor. Note: Don't set your course to launch in a new browser window. This can lead to inconsistencies in the report data. The Quality property lets you choose adaptive or static video quality and control the compression settings for audio clips, static videos, and JPG images. The quality settings default to whatever you used the last time you published a course. To change them, click the Quality property, make your adjustments, and click OK. There are now two video quality options. Select Adaptive to automatically adjust the video quality (high, medium, or low) to the learner's internet speed and prevent buffering. Learn more. Choose Static to deliver videos with the same quality to all learners, which could cause buffering. Drag the Static slider to change the video compression. Note that higher values give you higher-quality output but also larger file sizes. That can mean longer download times for learners with slow connections. Lower values give you smaller file sizes and faster download times, but the quality will be lower as well. Drag the Audio Quality slider to adjust the compression settings Storyline 360 uses for audio. Mark the Optimize audio volume box to normalize audio throughout your course for consistent volume across all slides. Tip: If your course audio already has consistent volume, you can speed up the publishing process by unchecking this option. Drag the JPG Quality slider to adjust the compression settings Storyline 360 uses for JPG images. Click Reset to standard optimization to use the default settings: adaptive video quality, audio bitrate of 56 kbps, and JPG image quality of 100%. Step 5: Choose to Publish a Slide, a Scene, or the Entire Course By default, Storyline 360 will publish your entire course. However, you can publish a specific scene from your course or even just a single slide. This is helpful when you want to publish multiple courses from the same project file. Click the Publish property, then choose the entire project, a single scene, or a single slide. Step 6: Adjust the Course Settings Use the Course Settings section of the Publish window to manage the following: Show Duration: Mark this box to show the estimated course duration to the learner, then manually set the time on the right. (The default value for Storyline 360 courses is 30 minutes, which you can modify.) Show completion certificate: Mark this box to provide learners with a certificate they can download when they meet the completion parameters. Due date: Mark this box to set how long a learner has to complete the training after they've enrolled. Then manually set the date on the right. You can set a specific date or a custom timeframe. When an interval for a set number of days is selected, the time period begins when the learner is enrolled in the training. Note for admin: Use this field to add a note for Articulate 360 Teams admins who publish courses in Reach 360. For example, you could tell them whether this course should be visible in the Reach 360 library. Step 7: Choose Reporting and Tracking Options Click the Reporting and Tracking button to open the Reporting and Tracking Options window. From there, you can choose how Reach 360 reports and tracks learners' progress. You can also send learner data to your LRS in addition to Reach 360. Note: Storyline 360 always uses SCORM 2004 4th Edition when you publish courses to Reach 360—that means the standard option can't be changed. If you plan on reporting to an LRS as well, click the LRS tab on the left side of the window. Mark the box to Report to an external LRS, then choose one of the following options in the LRS Configuration section. Supplied at launch: Select this option when you don't want to store authentication credentials in your Storyline 360 project file or when you need the option to update the LRS endpoint or credentials without republishing the project. Learn more about supplying credentials at launch. Manual: Select this option to enter the LRS endpoint and credentials right in Storyline 360. The configuration details will be stored in your project file, and you'll need to republish the project if you change them later. Learn more about the manual option. Click the Tracking tab on the left side of the window and choose any combination of the following options. You can choose one, two, or even all three tracking options. Whichever option a learner completes first gets reported to Reach 360 and your LRS. Learn more about tracking multiple completion criteria. When the learner has viewed # slides: Mark this option to trigger completion when learners view a certain number of slides. You can choose a percentage or a fixed number. Then decide which slides get counted—all slides or just those with slide numbers. Learn more about tracking slides viewed. When the learner completes a quiz: Mark this option to track learners based on their quiz results. You can let Storyline 360 keep track of multiple quizzes and send results to Reach 360 for the first quiz each learner completes. Learn more about tracking quizzes. (This option will be grayed-out if your course doesn't have any result slides.) Using triggers: Mark this option to track learners based on course completion triggers you added to your course. (This option is grayed-out if your course doesn't have any completion triggers.) Step 8: Publish When you're finished making selections, click the Publish button. Your course gets uploaded to Reach 360 all at once, and all Reach 360 admins receive an email notification to publish it. The upload time depends on the size of your course and your internet speed. After submitting a course, you'll see the following Publish Successful window, depending on your permissions. If you're an Articulate 360 Teams admin, you’ll see two follow-up options: Manage in Reach 360: This opens the course you just submitted to Reach 360 in your default browser. Copy Link: This copies the link of your submitted course in Reach 360 to your clipboard. Articulate 360 Teams Admin Articulate 360 Teams User Publishing Tips Problems with a firewall blocking you from publishing directly to Reach 360 or want to customize the published output? Here's what to do: Publish your course for LMS/LRS using SCORM 1.2 or any edition of SCORM 2004 on your local computer. An admin can then upload the zipped file to Reach 360. Follow the same steps if you need to upload a new version of the course in Reach 360. Note that Reach 360 has a maximum size limit of 5 GB per project. If you'd like to check the size of your course before publishing to Reach 360, publish it on your local computer first. That will allow you to check the file size of the generated zipped package. Step 9: Distribute Your Published Course Now for the fun part! Once you've submitted your course to Reach 360, an Articulate 360 Teams admin can publish your training and enroll learners in it. FAQs What's the difference between “submitting” and “publishing” courses to Reach 360? Articulate 360 Teams admins and users can submit Storyline 360 projects to Reach 360. That allows admins to review the course before it's available for learners. Once reviewed and approved, admins can publish the course within Reach 360. Then admins can enroll learners and groups, or learners can discover it for themselves within the account library. How do I update an existing project in Storyline 360 and republish it to Reach 360? Here's how to publish updates to existing training in Reach 360: Open the original .story file or a copy of it, make your changes, and save them. Then republish it to Reach 360 by following the steps above. Note: To publish your project as a new training in Reach 360, save your project as a new file. Then publish it by following the steps above. What format does the publishing process use when publishing to Reach 360? Storyline 360 uses the SCORM 2004 4th Edition when you publish a course to Reach 360. What's the recommended workflow for collaborating on and publishing Storyline 360 projects to Reach 360? Make a copy of a project's .story file on your desktop and send it to other developers for collaboration. Copies of the original .story file contain the same project identifier, so publishing the copy updates the current version of the training in Reach 360.Storyline 360: Adding Interactivity to 360° Images
Transform any 360° image into an interactive learning experience and help learners retain information with knowledge checks. Adding Triggers to Markers and Hotspots Making Buttons Interactive Adding Knowledge Checks Tracking Variables Adding Triggers to Markers and Hotspots In the 360° image editor, you can make markers and hotspots even more interactive by adding triggers to them. Just select the marker or hotspot and click Trigger on the ribbon to open the trigger wizard. You’ll only see a subset of actions—such as Show layer, Lightbox slide, and Adjust variable—that are specific to 360° interactions. And triggers always fire "when the user clicks." And you can add multiple triggers to the same marker or hotspot. For example, one trigger might show a layer when learners click a marker while the other trigger might adjust a variable at the same time. Just select the marker and click the Create a new trigger icon in the Triggers panel. (Clicking Trigger on the ribbon again will disable the trigger.) Note: Only triggers that are part of the 360° interaction display in the Triggers panel while you’re in the 360° image editor. To see triggers for other objects, slides, or layers, close the 360° image editor. Making Buttons Interactive When you add a button to a marker or hotspot label, a trigger with an easy-to-edit lightbox action is created by default. In the Triggers panel of the 360° image editor, click the segments of each trigger description, then choose an option from the drop-down list. Like with triggers, you’ll only see a subset of actions that always fire "when the user clicks." Or, edit a trigger by double-clicking it in the Triggers panel or selecting it and clicking Edit at the top of the panel. After making your selections, click OK to save your changes and close the trigger wizard. Adding Knowledge Checks It’s easy to create interactive knowledge checks to your 360° image. Here’s how. Create a graded or non-graded question slide in your Storyline 360 project that you want to lightbox. Add a markeror hotspotto your 360° image that will launch the lightbox. Add a triggerto the interactive element with the following properties. Action: Lightbox slide Slide: Select the slide you want to lightbox. When: User clicks (“when user clicks” always displays for 360° interactions) Object: Select the marker or hotspot that launches the lightbox. Use navigation controls: Mark this box if you want to display previous and next buttons on the lightboxed slide(s). Tracking Variables When you add a 360° image, Storyline 360 creates two project number variables so you can track learners’ progress: 360Image#_TotalItems : Total number of markers and hotspots in the interaction. 360Image#_VisitedItems : Number of markers and hotspots the learner visited. The hash symbol (#) becomes a number depending on how many 360° images are in your course. You can also rename the variables and/or change their default value. (You can’t change their type.) Tip: Make your interactions even more individualized. Use these number variables to display custom progress meters, interrupt the interaction with a lightbox after a certain number of markers have been visited, or perform other actions at specific points in a guided tour.Storyline 360: Controlling Navigation in 360° Images
Make exploring 360° images dynamic and exciting. Manage how learners start and navigate your interaction. Setting the Initial View Choosing Navigation Options Excluding Markers and Hotspots from Progress Tracking Setting the Initial View Set the opening view of your interaction. In the 360° image editor, go to the Interaction tab, click Edit, then move the camera to your preferred angle. As you move the camera, the latitude and longitude units at the bottom of the 360° image dynamically update with the exact coordinates. Click Set to save your changes. Click Reset to return to the original view. Click Cancel to discard your changes. Tip: To center the opening view around an interactive element, click the hotspot or marker on the Markers & Hotspots panel. Choosing Navigation Options Choose how learners navigate your interaction—freely or in a guided tour. In the 360° image editor, go to the Markers & Hotspots panel, then choose either Free navigation or Guided tour as the navigation mode. Free navigation is great for letting learners explore interactive elements as they wish. Mark the Show progress indicator box to help learners keep track of their progress. A guided tour is perfect for directing learners through a specific set of interactive elements. It presents markers and hotspots one by one in the sequence you specify in the Markers & Hotspots panel. Just drag the interactive elements to your preferred order. A progress indicator always displays at the bottom of the guide-tour interaction. Pro Tips: Usehotspot hints to help learners easily find hotspots in your guided-tour interactions. Give learners bite-sized info when they hover over markers and hotspots in your free-navigation interactions. Excluding Markers and Hotspots from Progress Tracking By default, markers and hotspots get automatically counted in the progress indicator for free-navigation interactions. For example, a learner’s progress might show "1 of 5 visited" after clicking the first interactive element in an interaction that has a total of five markers and hotspots. However, you can exclude specific markers or hotspots from the overall progress count, giving you more flexibility in defining what’s tracked. Just install the January 2022 update or later, then follow these steps. In the 360° image editor, make sure that you’re using free navigationmode. In the Markers & Hotspots panel, hover over the marker or hotspot you’d like to exclude. Click the ellipsis (…) that appears and mark the Exclude from progress count box. The marker or hotspot now displays a dashed border in the Markers & Hotspots panel indicating that it’s excluded.Storyline 360: Adding Hotspots to 360° Images
Hotspots serve as invisible markers in 360° images. They’re great for testing learners’ ability to explore content on their own. Adding Hotspots Formatting Hotspots Understanding How Hotspots Behave Formatting Labels Changing Label Fonts Adding Audio to Labels Adding Pictures and Videos to Labels Adding Hotspot Hints Formatting Hotspot Hints Changing Hotspot Hint Fonts Adding Tooltips Formatting Tooltips Adding Buttons to Labels Making Buttons Interactive Formatting Buttons Understanding Button States Modifying and Repositioning Hotspots Renaming Hotspots Deleting Hotspots Adding Hotspots In the 360° image editor, you can add one or more hotspots to your interaction. Click Hotspot on the ribbon, or right-click the image and choose Insert Hotspot. You have two options for creating hotspot shapes: Make a rectangle by clicking and dragging your mouse on the image at the same time. Draw a custom shape by clicking the image where each control point should go. You can drag the control points of any shape to change its form. You can delete a control point by clicking it, then pressing your Delete key. Formatting Hotspots Change the color and effects for all hotspots. The default color for hotspots comes from Control 1 of your theme colors. To change it, go to the Interaction tab, then click the Hotspots drop-down arrow to choose a color. (This updates the color for all hotspots.) In the same list, you can decide if you want to reveal or hide hotspots when learners click them, and enable or disable the pulsing animation for unvisited hotspots. Understanding How Hotspots Behave Hotspots are often invisible, by design, so they behave differently from interactive markers. And their behavior is impacted by optional effects—Reveal Hotspots and Pulse Hotspots If Unvisited—as described below. Reveal and Pulse Are Both Enabled Unvisited hotspots display a transparent pulsing square. Hovering over a pulsing square or hotspot area displays the entire hotspot shape and changes the cursor to a hand at the same time. Clicking a hotspot thickens its border. Visited hotspots become a darker color. Clicking outside of a hotspot causes all hotspots to briefly flash. (Unvisited hotspots display in your color choice. Visited hotspots are darker.) Reveal Is Enabled and Pulse Is Disabled No initial visual cue displays for visited or unvisited hotspots. Hovering over a hotspot area displays the entire hotspot shape. Clicking a hotspot thickens its border. Visited hotspots become a darker color. Clicking outside of a hotspot causes all hotspots to briefly flash. (Unvisited hotspots display in your color choice. Visited hotspots are darker.) Reveal and Pulse Are Both Disabled No initial visual cue displays for visited or unvisited hotspots. Hovering over a hotspot area changes the cursor to a hand. Clicking any area of the hotspot displays its entire shape and thickens its border. Visited hotspots become a darker color. Clicking outside of a hotspot causes visited hotspots to briefly flash. (Unvisited hotspots don’t appear. Visited hotspots are darker.) Formatting Labels Change the theme and style for all labels in your interaction all at once. To change the theme for your labels, go to the Interaction tab, then click the Theme drop-down arrow to select a light or dark theme. In the same tab, you can customize the labels’ style. Just click the Corners drop-down arrow to choose a square or rounded corner style, and if you prefer to hide or show the connector. Changing Label Fonts The fonts used for the label title and description default to your project’s theme fonts. To use a different font, use the font selector in the Hotspot tab to modify an individual label, or customize your theme fonts to change all the labels in your course at the same time. Adding Audio to Labels Import audio from your computer, generate text-to-speech clips, choose audio from the media library, or record narration right in Storyline 360. Just select your hotspot, go to the Labeltab on the ribbon, click Audio, and choose one of the audio options: Audio from File Use this option to import an audio clip from your computer. Media Library Use this option to insert an audio clip from the media library. Record Mic Use this option to record an audio clip. Text-to-Speech Use this option to convert your text to narration. Options Change your audio playback device and recording devices. You can also modify the recording volume level. After adding audio, additional options on the Media ribbon become available, such as an audio editor, a volume adjuster, and more. To learn more about working with audio, visit Editing Audio and Using the Audio Tools. To change the accent color for the selected hotspot’s media controls, click Accent on the Media ribbon, and choose the player’s accent color or a custom one. To add closed captions to hotspot audio, select the audio and click Add Captions on the Media ribbon. Visit this user guide to learn all about working with closed captions. Adding Pictures and Videos to Labels Add an image or video to each hotspot’s label. Just select your hotspot, go to the Labeltab on the ribbon, click Picture or Video, and choose one of the following: Picture Content Library 360 Photos Use this option to insert a photo from Content Library 360. Picture from File Use this option to insert an image from your computer. Media Library Use this option to insert an image from the media library. Screenshot Use this option to capture and insert a clip of your screen. Video Content Library 360 Videos Use this option to insert a video from Content Library 360. Video from File Use this option to insert a video from your computer. Media Library Use this option to insert a video from the media library. Record Webcam Use this option to record a video with your webcam. To edit a picture or video you’ve added to a label, visit these user guides: Formatting Pictures, Screenshots, and Characters Editing Videos Adjusting Video Properties Add alt text to all pictures and videos so they’re accessible to screen readers and other assistive technologies. Learn more. Adding Hotspot Hints Help learners navigate your guided-tour interactions with ease by adding hints to invisible hotspots. Just install the August 2021 update or later, then follow these steps: In the 360° image editor, make sure that you’re using the Guided tour navigation and that the Reveal Hotspotsoption is disabled. Select the hotspot and click Hint on the ribbon. Add up to 250 characters in the hint field in the lower-right corner of the 360° image. Hotspot hints appear in the lower-right corner of your 360° image. Click the X to collapse the hint and click the info icon to display it, as shown below. Note: To help learners find a hotspot, its hint is always expanded by default. Once learners click a hotspot, its hint is collapsed when they revisit the hotspot or the interaction. Formatting Hotspot Hints Change the theme for all hotspot hints all at once. Just go to the Interaction tab, then click the Theme drop-down arrow to select a light or dark theme. Changing Hotspot Hint Fonts Choose a different font and font size for individual hotspot hints and apply formatting (e.g., bold, italics, and underline) to them. Just select the hotspot hint and use the font options in the Hotspot tab. Tip: The font used for the hint text defaults to your project’s theme fonts. Customize your theme fonts to change all the hints in your course at the same time. Adding Tooltips Give learners bite-size info when they hover over hotspots in your free-navigation interactions. (Learn how to add tooltips to markers.) Install the November 2021 update or later, then follow these steps: In the 360° image editor, make sure that you’re using Free navigation mode. Select the hotspot and click Tooltip on the ribbon. Add up to 35 characters in the text field next to the hotspot. Note: Hovering over a hotspot without a label or trigger displays its tooltip and automatically counts the hotspot as viewed in the progress indicator. Conversely, hovering over a hotspot with a label or trigger displays its tooltip and counts the hotspot as viewed when learners click it. Formatting Tooltips Change the theme for all hotspot tooltips all at once. Just go to the Interaction tab, then click the Theme drop-down arrow to select a light or dark theme. Choose a different font and font size for individual hotspot tooltips and apply formatting (e.g., bold, italics, and underline) to them. Just select the hotspot tooltip and use the font options in the Hotspot tab. Adding Buttons to Labels Engage your learners by revealing more information with ready-to-use clickable buttons. (Learn how to add buttons to marker labels.) Install theJanuary 2022 update or later, then follow these steps. In the 360° image editor, select the hotspot and click the Label tab on the ribbon. Click the Button drop-down arrow and choose one of the pre-built button styles. Add up to 35 characters in the button’s text field. Add alt text to buttons so they’re accessible to screen readers and other assistive technologies. Learn more. Making Buttons Interactive Keep learners engaged by guiding them to the next step in their journey. Perform specific actions, such as launching a website or downloading a document, when learners click a button. Learn more. Formatting Buttons Change the accent color for individual buttons. Just select the button, click the Accent drop-down arrow, and then select a color. Choose a different font and font size for individual buttons and apply formatting (e.g., bold, italics, and underline) to it. Select the button text and use the font options on the Label tab. Understanding Button States Buttons in 360° interactions have the following built-in states: Normal: The initial state, displays the selected accent color Hover: When interacted with, displays a dimmed color and hand icon Button states in 360° interactions can’t be customized. Modifying and Repositioning Hotspots To modify the shape of a hotspot, drag its control points. To reposition a hotspot, drag it to another location on the interaction. Renaming Hotspots When you add hotspots, Storyline 360 gives each one a default name: Hotspot 1, Hotspot 2, etc. We recommend giving them more intuitive names, so they’re recognizable when adding triggers. One way to rename a hotspot is to enter a label title. The name of the hotspot updates to reflect its label title. Or, double-click the hotspot on the Markers & Hotspots panel, enter a new name, and press Enter on your keyboard. Deleting Hotspots To delete a hotspot, select it and press Delete on your keyboard. Or, select the hotspot and click Cut on the ribbon. Another option is to convert the hotspot to a marker. Just select the hotspot, then click Switch Type on the Hotspot ribbon. Learn more about markers.Storyline 360: Adding Markers to 360° Images
Markers are a great way to reveal content when learners need it. Learners click them to see additional text and media. Adding Markers Changing Marker Icons Resizing Markers Formatting Markers Formatting Labels Controlling Marker Effects Understanding Marker States Changing Label Fonts Adding Audio to Labels Adding Pictures and Videos to Labels Adding Tooltips Formatting Tooltips Adding Buttons to Labels Making Buttons Interactive Formatting Buttons Understanding Button States Renaming Markers Deleting Markers Adding Markers In the 360° image editor, you can add one or more markers to your interaction. Click Marker on the ribbon, or right-click the image and choose Insert Marker. The marker appears with a customizable icon and blank label where you can enter a title, description, and/or media. Changing Marker Icons If you want to change the icon for an existing marker, select the marker, click the Icon drop-down arrow, and choose a different symbol from the preset icons or Content Library 360. If you prefer to not use an icon, click No icon. The Custom section of the icon list displays every Content Library 360 icon that you add to the current 360° image interaction. Tip: You can number markers sequentially (e.g., 1, 2, 3, etc.). Just select the preset sequential numbers icon at the top-right corner of the icon menu, then add as many markers as you need. Resizing Markers Change the default size of a marker. To resize an icon, drag any of its sizing handles. Formatting Markers Change the accent color for individual markers. The default color for markers comes from Accent 1 of your theme colors. To change it, select a marker, click the Accent drop-down arrow, and then choose a color. (This updates the color for the selected marker.) In the same list, you can flip the fill and icon color of the selected marker. Just click Invert Marker Theme. Formatting Labels Change the theme and style for all labels in your interaction all at once. To change the theme for your labels, go to the Interaction tab, then click the Theme drop-down arrow to select a light or dark theme. Note: The light theme makes markers and all labels white and fills the icon with your accent color choice. The dark theme fills markers with your accent color choice, changes the icon to white, and makes all labels black. In the same tab, you can customize the label style. Just click the Corners drop-down arrow, choose a square or rounded corner style, and decide if you want to hide or show the connector. Controlling Marker Effects Enable or disable the pulsing animation for unvisited markers by going to the Interaction tab, then clicking the Markers drop-down arrow to turn the animation on or off. Understanding Marker States Markers in 360° interactions have built-in states, as explained below: Normal: This is the initial state for an object. If the pulsing animationis enabled, a transparent pulsing circle displays around each unvisited marker. If the pulsing animationis disabled, each unvisited marker displays as it does in the360° image editor without a pulsing circle. Hover: This is how an object appears when learners move their mouse over it. When learners hover over a marker, its color dims or brightens depending on the theme(i.e., the color of the marker dims with the dark theme and brightens with the light theme), and the cursor changes to a hand. Selected: This is how an object appears when it’s selected. When learners click a marker, an outline in the color of the marker icon appears around the marker. Visited: This is how an object appears after it’s clicked. If thepulsing animation is enabled, the pulsing circle effect stops and the marker returns to its normal state. If thepulsing animation is disabled, the marker simply returns to its normal state. Note: At this time, there isn’t a way to customize the built-in statesfor markers in 360° interactions. Changing Label Fonts The fonts used for the label title and description default to your project’s theme fonts. To use a different font, use the font selector in the Marker tab to modify an individual label, or customize your theme fonts to change all the labels in your course at the same time. Adding Audio to Labels Import audio from your computer, generate text-to-speech clips, choose audio from the media library, or record narration right in Storyline 360. Just select your marker, go to the Labeltab on the ribbon, click Audio, and choose one of the audio options: Audio from File Use this option to import an audio clip from your computer. Media Library Use this option to insert an audio clip from the media library. Record Mic Use this option to record an audio clip. Text-to-Speech Use this option to convert your text to narration. Options Change your audio playback device and recording devices. You can also modify the recording volume level. After adding audio, additional options on the Media ribbon become available, such as an audio editor, a volume adjuster, and more. To learn more about working with audio, visit Editing Audio and Using the Audio Tools. To change the accent color for the selected marker’s media controls, click Accent on the Media ribbon, and choose the player’s accent color or a custom one. To add closed captions to marker audio, select the audio and click Add Captions on the Media ribbon. Visit this user guide to learn all about working with closed captions. Adding Pictures and Videos to Labels Add an image or video to each marker’s label. Just select your marker, go to the Labeltab on the ribbon, click Picture or Video, and choose one of the following: Picture Content Library 360 Photos Use this option to insert a photo from Content Library 360. Picture from File Use this option to insert an image from your computer. Media Library Use this option to insert an image from the media library. Screenshot Use this option to capture and insert a clip of your screen. Video Content Library 360 Videos Use this option to insert a video from Content Library 360. Video from File Use this option to insert a video from your computer. Media Library Use this option to insert a video from the media library. Record Webcam Use this option to record a video with your webcam. To edit a picture or video you’ve added to a label, visit these user guides: Formatting Pictures, Screenshots, and Characters Editing Videos Adjusting Video Properties Add alt text to all pictures and videos so they’re accessible to screen readers and other assistive technologies. Learn more. Adding Tooltips Give learners bite-sized info when they hover over markers in your free-navigation interactions. (Learn how to add tooltips to hotspots.) Install the November 2021 update or later, then follow these steps: In the 360° image editor, make sure that you’re using Free navigation mode. Select the marker and click Tooltip on the ribbon. Add up to 35 characters in the text field next to the marker. Note: Hovering over a marker without a label or trigger displays its tooltip and automatically counts the marker as viewed in the progress indicator. Conversely, hovering over a marker with a label or trigger displays its tooltip and counts the marker as viewed when learners click it. Formatting Tooltips Change the theme for all marker tooltips all at once. Just go to the Interaction tab, then click the Theme drop-down arrow to select a light or dark theme. Choose a different font and font size for individual marker tooltips and apply formatting (e.g., bold, italics, and underline) to them. Just select the marker tooltip and use the font options in the Marker tab. Adding Buttons to Labels Reveal more information with ready-to-use clickable buttons. (Learn how to add buttons to hotspot labels.) Install theJanuary 2022 update or later, then follow these steps. In the 360° image editor, select the marker and click the Label tab on the ribbon. Click the Button drop-down arrow and choose one of the pre-built button styles. Add up to 35 characters in the button’s text field. Add alt text to buttons so they’re accessible to screen readers and other assistive technologies. Learn more. Making Buttons Interactive Keep learners engaged by guiding them to the next step in their journey. Perform specific actions, such as launching a website or downloading a document, when learners click a button. Learn more. Formatting Buttons Change the accent color for individual buttons. Just select the button, click the Accent drop-down arrow, and then select a color. Choose a different font and font size for individual buttons and apply formatting (e.g., bold, italics, and underline) to it. Select the button text and use the font options on the Label tab. Understanding Button States Buttons in 360° interactions have the following built-in states: Normal: The initial state, displays the selected accent color Hover: When interacted with, displays a dimmed color and hand icon Button states in 360° interactions can’t be customized. Renaming Markers When you add markers, Storyline 360 gives each one a default name: Marker 1, Marker 2, etc. We recommend giving them more intuitive names, so they’re recognizable when adding triggers. One way to rename a marker is to enter a label title. The name of the marker updates to reflect its label title. Or, double-click the marker on the Markers & Hotspots panel, enter a new name, and press Enter on your keyboard. Deleting Markers To delete a marker, select it and press Delete on your keyboard. Or, select the marker and click Cut on the ribbon. Another option is to convert the marker to a hotspot. Just select the marker, then click Switch Type on the Marker ribbon. Learn more about hotspots.
