In Storyline, a marker is a round button that reveals a label with additional content when you hover over it or click on it. Markers are super easy to use, and they make irresistible interactions.

In this tutorial, we’ll add interactive markers to a map of Washington, D.C. to reveal information about certain landmarks.

Watch this video overview, then follow the activities below to practice.

Practice Activities:

  1. Add a Marker with Text
  2. Edit and Format a Marker
  3. Add a Marker That Plays a Video When You Click It

Practice Activity: Add a Marker with Text

In this activity, you’ll add your first marker to the slide and fill it with text. Watch this video demonstration, then follow the steps below to practice.

  1. Open the Storyline folder in your practice files, then open the 03E_Interactive_Markers_360.story file and go to the second slide in the project. We’ve already added a background image for you.

    There are duplicate slides in the sample project. The first slide is a demo so you can preview the finished example. We’ll use the second slide to recreate the marker interaction in this tutorial.
  2. Go to the Insert tab on the ribbon, click Marker, and choose the blank marker.
  3. Click the slide where you want the marker to appear. In this case, we want it to appear next to the Capitol Building in the lower right corner of the slide.
  4. Type a title in the label: Capitol Building.
  5. Enter some descriptive text into the body of the label or copy and paste the text from the WashingtonDC.txt file in your practice files, then format the text the way you want it to appear.
  6. Use the sizing handles to resize the label to fit your text.
  7. Click the Preview drop-down arrow on the ribbon and choose This Slide to see how your marker works.

Practice Activity: Edit and Format a Marker

In this activity, you’ll edit and format a marker. Watch this video demonstration, then follow the steps below to practice.

  1. First, let’s move the entire marker. Use your mouse to drag to marker to a new location on the slide (still near the Capitol Building).
  2. Now drag the label around the marker until it’s positioned where it’s not covering the Capitol Building.
  3. Go to the Format tab on the ribbon and make the marker and label black with white text.
  4. Also on the Format tab, click the Change Icon drop-down list and choose the gavel icon for your marker.
  5. Click Animate and choose the Swirl animation.
  6. Finally, mark the box to Show All on Hover so learners won’t have to click the marker to see its label.
  7. Click the Preview drop-down arrow on the ribbon and choose This Slide to see how your interaction behaves.

Practice Activity: Add a Marker That Plays a Video When You Click It

In this activity, you’ll add another marker that plays a video when it’s clicked. Watch this video demonstration, then follow the steps below to practice.

  1. Go to the Insert tab on the ribbon, click Marker, and choose the video camera icon.
  2. Click the slide where you want the marker to appear. In this activity, we want it to appear next to the Washington Monument in the upper left corner of the slide.
  3. Go to the Format tab on the ribbon and make the marker and label black with white text.
  4. Use the Animate drop-down list to turn the animation off.
  5. Type a title in the label—Washington Monument—and format the text the way you want it to appear.
  6. Rather than adding text to the body of this label as we did in the previous activities, let’s add a video. Go to the Format tab on the ribbon, click Media, choose Video from File, and select the WashingtonMonument.wmv video from your practice files.
  7. Select the video placeholder and go to the Options tab on the ribbon. Set the video to play automatically and show video controls.
  8. Use the sizing handle at the top of the video placeholder to increase the size of the video.
  9. Use the sizing handles on the label itself to resize the label if necessary, then drag the label around the marker until it’s positioned where you want it on the slide.
  10. Click the Preview drop-down arrow on the ribbon and choose This Slide to see how your interaction behaves.

Summary

In this tutorial, you learned how to quickly create a beautiful interaction simply by adding markers to an image. To learn more about markers, see the Storyline 360 and Storyline 3 user guides.

In the next tutorial, we’ll create a drag-and-drop interaction.