In this tutorial we’ll add a couple of interactive markers to a map of Washington DC; and then we’ll make some edits to the markers.

Start by downloading the practice folder.

Watch this video first, then follow the steps below to practice.

Practice Activity

Create a marker.

  • Open the WashingtonDC.story. We’re going to add two markers to it.
  • Go to the Insert tab and locate Markers. Select a marker and add it to the Capitol Building.
  • Position the Marker Label. If you click and grab the label you can drag it around the marker to change where it displays. Use the side anchors on the label to change its size.

Add content to the maker.

  • Add a title and description. You can copy from the placeholder.txt in the practice folder.
  • Format the text just like you would with any other text.
  • Preview the marker.

Edit the marker.

  • Let’s make some edits to the marker. Notice the swirl animation and how the box comes in and out on a mouse click? We can change that.

  • Double click on the marker to open the Marker Tools. Look at some of the options and explore what you can do to the markers like changing the icons, animations, colors of the markers and label styles. 
  • Change the animation on the marker and move the label so it doesn't open on top of the Capitol Building.
  • Preview the slide.

Create a second marker with video.

Now we'll add a second marker to be placed by the Washington Monument. For this one, we’ll add a video to the label instead of text.

  • Add a new marker to the Washington Monument.
  • Double click on the marker to open the Marker Tools. Under Marker Options, click on the media icon. Here you can insert pictures and videos. We’ll insert a video.
  • Select the video from the practice folder. Once the video’s inside the marker you can click on it to scale it.
  • Preview the slide.

As you can see, adding interactive markers is pretty simple. And then editing them is as easy as editing any other shape in Storyline. Find an image and practice adding your own markers.

In the next tutorial we’ll take a quick look at creating a drag-and-drop interaction.

Related Content