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 animation is enabled, a transparent pulsing circle displays around each unvisited marker. 
• If the pulsing animation is disabled, each unvisited marker displays as it does in the 360° 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 the pulsing animation is enabled, the pulsing circle effect stops and the marker returns to its normal state. 
• If the pulsing 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 states for 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 Label tab 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 Label tab 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:

1. In the 360° image editor, make sure that you’re using Free navigation mode.
2. Select the marker and click Tooltip on the ribbon.
3. 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 the January 2022 update or later, then follow these steps.

1. In the 360° image editor, select the marker and click the Label tab on the ribbon.
2. Click the Button drop-down arrow and choose one of the pre-built button styles.
3. 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.