Formatting Markers

Hello!

I love the function of the markers, where you can hover over them and information appears.

But I also would like to format them, is that possible?

Can I make them bigger or smaller than what they are?

And can I add an image or letter on them?

If I cannot, can I have that same hovering interaction if I were to add a button which is much more "formatable"?

Thanks!

Eleni

2 Replies
Rebecca Fleisch Cordeiro

Hi Eleni,

Welcome to the community!

I've attached a story that may get you started...although if you're new to Storyline you may have more questions. If so, fire away.

Standard Marker on the right

Yes, you can add images to the standard SL Markers.

Insert the "empty" marker (the one with no icons on it)

  • To insert an image: right-click on the marker and choose Format shape from the shortcut menu
  • In the Format shape dialog box choose Picture or Text fill
  • Then choose Insert from file, and browse to a picture

Yes, you can create non-standard markers that have some of the functionality of the standard ones. I created two; each behaves a bit differently

The Blue Key Marker from Button

  • Insert a button and choose an icon for it
Note: To make a round button, use the Button on the right (with the Home icon on it) and hold the Shift key down while dragging to insert the button)
  1. Add a layer (mine is calle Key Marker Layer)
  2. On the Layer Insert a "title" text box and type in the title. Postion it carefully so it will display properly underneath the button you've created on the base layer
  3. Beneath it and positioned/sized very carefully add a "content" text box. Set its state initially to hidden
  4. Back on the base layer, add a trigger to show the Key Layer when the mouse is hovered over the Key Button
  5. Add another trigger to change the state of the content text box on the Key layer to normal when the user clicks the Key button

In Preview Mode

When you move your mouse over the button, the title appear. When you click on the button, the content appears. When you move your mouse off the button, everything disappears. This is different than the behavior for the Red Pencil marker below.
When you hover and click again, the button actions repeat.

The Red Pencil Marker from Button

  1. Insert a button and choose an icon for it
  2. Edit the button's state, and on the hover state, insert a text box for the title. Position and size it carefully. This will cause the title to appear when the mouse hovers over the the button
  3. Copy this text box
  4. Add a layer (mine is calle Pencil Marker Layer)
  5. On the Pencil Marker Layer, paste the text box and add in content as well, being careful of the size
  6. Add a trigger to hide the layer when the user clicks inside the text box.
  7. You may also want to add a transparent circle over the button on this layer so Learners won't see it as active
  8. Back on the Base Layer, add a trigger to show the Pencil Layer when the user clicks the button

In Preview Mode

When you move your mouse over the button, the title appears. When you click on the button the content appears. When you click in the text box, everything disappears.This is different than the behavior for the Blue Key marker above.

When you hover over the button again and click again, the button actions repeat.