Formatting Markers or Shapes

Jan 04, 2021

Hello,

I have attached a picture of the left side of a Periodic Table.  On my table, I like the idea of a red marker being used to pop up with the element's full name along with several different pieces of information about the element.  I also like the pulsing that a marker does.

My issue is that I need to be able to customize a marker beyond what I think they are capable of in Storyline 360.  I prefer the look of the teal square I put on Hydrogen in the top-left corner, but I can't figure out how to make that shape pulse like a marker can; the pulse option is not available when I click the animation tab.  I also need to make use of a marker's ability to pop-up with information upon hover over or click, but the marker needs to allow the element's symbol to show through, and I would prefer the entire outside of the square to be colored instead of just the circular boarder around the marker.  Any ideas?

14 Replies
Leslie McKerchie

Hi Ross,

Thanks for reaching out and sharing what you are working on creating.

The built-in markers have limited functionality, but you can probably create the design you're looking for.

I started using your image in a new project file and focused on Magnesium for my example. It gives you the hover and pop-up I believe you're looking for, but I'm not clear on the need for the pulse. Can you tell me more about that? Hopefully, someone will be able to chime in with a design idea for you.

Ross Mulligan

So I like to use my company's modules for ideas when making my own (still trying to land my first official ID position) so I'll be honest, they don't need to pulse.  I have seen a glow added to characters in my company modules which help the learner to realize he or she should either mouse over that character, or click it.  I think this will work, which brings me to my next question.  I have to edit 118 elements, and I like how you used the change of state.  My default is adding layers because I find them easier than state changes for some reason.  I am going to attach my master project so you can see what my slide is looking like with the Periodic Table on it.  My question is, what's going to be the best way to have all 118 element description boxes pop up in the exact same spot?

Leslie McKerchie

I'm not sure where this 'spot' would be on the slide, Ross. It's pretty full :)

You could do this with states and once you've created the first one, you could then copy/paste to do the others and the information would be in the same spot.

If you prefer layers, you could do this as well. Either way, it will be a lot of content.

Ross Mulligan

I included a picture of the three states I'll need to create for each element along with the location of the text box that will explain all the information I choose for each element.  I think it still has a clean look because I'm using a big, white text box to cover up the lists of groups and trends.  You're right, this is a lot of content.  I was actually hoping someone had something like this developed before I went down this rabbit hole, but nothing in the community did what I wanted to do.  Layers would have been fine as well, but that slide already has 16 layers.  So, the slide will end up having 118 little boxes with 3 different states each and 16 layers to it.  Let's not forget the triggers... I already have 20 or so, and I'm going to need 2 triggers per element to show the states.  If I design any quiz questions that come after the Periodic Table, learners will be able to go back and look at information on the table before answering; this could be a lesson in how to use a Periodic Table instead of memorizing facts about the table.  Thanks for all your help!

Ross Mulligan

Hi Lauren,

Thank you for your suggestion.  I want to say this is my current plan based on how far along my project is, but I'm not sure.  Since this periodic table is turning into it's own project it seems, I made a SL file with just this one slide and attached it.  If you click Hydrogen (H) and then Helium (He), I hide some text making way for the sample text to appear.  I also think this is a clean place to put all that text.  The only issue was that the location of the text box did not copy each time I made a copy of the little square rectangle.  It's not a big deal, I just have to position the same textbox 118 times.

Edit: I really answered my own question on this one... It was far easier to include a single box like you did and give it 118 states.  By doing so, I never had to reposition that textbox.  I think my slide will still have the same number of triggers, but at least I didn't have to reposition the textbox.  Thank you!

Walt Hamilton

I can save you some heartbreak here.

 

When you hover over an object with a Hover state, there is a built-in trigger that does exactly what yours does. When an object with a Selected state is clicked,  there is a built-in trigger that does exactly what yours does.  This is not just about saving you a ton of work creating these triggers. Sooner or later one of these duplicate triggers is going to cause a conflict with the built-in triggers, with unpredictable results that you really won't like.

Your idea of using one text box with different states for the explanations is a good solution for keeping it in one place.  You said,

"...the location of the text box did not copy each time I made a copy of the little square rectangle."

That is caused by the location of the text box was in a state, and the location of a state is relative to the location of its object. So copying an object, then moving it, moves its states the same amount and direction.

I think when Phil Mayor made his Table of Elements, he ended up with over 700, either triggers, or layers, I don't remember which.  It's a lot of very repetitive work, so don't let it discourage you.

 

 

 

Ross Mulligan

Hi Walt,

Thank you for replying.  I want to make sure I'm not doing too much work for myself at this point.  The object you're referring to, AC, is gone for now.  The elements H and He are the two I am working with first and once they're finished, I'll do the other 116. Elements.  I gave each element a hover state, and I gave a single box in the middle of my table 118 different states.  These are the two triggers I am putting onto all of the 118 elements manually, eventually:

When the user hovers over " random element", change the state of "random element" to hover.

Change the state of "element info box" to "one of the 118 elements depending on which one the user hovers over."

I wanted to make sure these two triggers do need to be manually performed by me as I design the slide.  That would be a lot of extra work on an already involved slide.

Walt Hamilton

If H has a Hover state, it will change to the Hover state when the cursor hovers over it, and revert when the cursor moves off it. Don't create a trigger to do that. 

"Change 'element info box' to state H (or state 1) when user hovers over H"   is a trigger you need to create.

Once you create this trigger for H, you can copy it, click on He and paste it. Then highlight the "H" (or 1) and change it to HE. It can go pretty fast, but you have to create the states for the infor box first.

Walt Hamilton

This video is what I get when I run PT.story.

The first time, I hover over H tow times, then hover over it and click it two times. Then I disable the two triggers, and repeat the process; hover over twice, and click twice. Personally, I prefer the second variation, just for the way it works.

FYI: keeping those two triggers creates a huge potential for them to create conflicts with the built-in triggers that perform the same functions.

If you want the additional information to appear and disappear with a hover, you will need to put it in separate states of a distinct text box. Then create a trigger for it to change to the appropriate state when each element is hovered over, and return when hovered off.

Setting H to Hover state when it is hovered over will cause conflict, changing the state of the information text box when H is hovered over will not.

Ross Mulligan

I still don't think I'm understanding... I have uploaded the actual version of the project I'm working on.  Looking at slide 4.1, I hope someone can tell me a few things:

  • If Storyline has built in triggers for hover states, why does Hydrogen do nothing upon mouseover?  I already  have a state created for Hydrogen, and several states created for the large textbox that appears in the middle of the slide where I want all the element information to populate.
  • Looking at Helium, do I have that interaction setup correctly?  It's doing exactly what I want it to, but if making the 116 other elements do the same thing will cause conflicts, I don't want to proceed with the project yet.  I just need each element square to change in some way so that the learner knows interacting with the elements does something, and I need that box to pop up in the center.
Walt Hamilton

#1 This trigger is always a problem trigger, wherever it is. It will unpredictably work, or not, and will unpredictably cause strange hard-to-track-down problems. You don't know when, or what problems it will cause, but you don't want it in your project.

 

Hydrogen - I don't know what is wrong with Hydrogen. Maybe because it was copied and pasted, maybe it was because at one time it had the problem trigger, maybe it got corrupted some other way, but it didn't work. So I deleted the little box on it. I went to Helium, and deleted the problem trigger. Then I copied the little cover from Helium to Hydrogen, renamed it to H (so much easier to work with later), and changed its trigger to "change the state of element info box to Hydrogen" instead of Helium.  H and He work now.

If you duplicate (I don't trust SL to copy and paste. Strange things can happen. That may be why H didn't work.) He, move it to another element, change its name and the name of the state in its trigger, everything should be fine. IF YOU ADD A VERSION OF THE PROBLEM TRIGGER, YOU MAY HAVE TROUBLE LATER.

Helium - Once you delete the problem trigger, He is fine, and can be duplicated and used on all the other elements. When you duplicate it, its trigger will be copied with it, and all you have to do is change the name of the state of the info box.

 

Ross Mulligan

Thanks for all the help Walt.  I finally got it to work by deleting the box on H and He, creating a brand new box on H, and then giving a single trigger to the info box that it should change to Hydrogen when the user hovers over H.  I'm a little skeptical to copy that shape 117 times, but the trigger is tied to the info box now, not the little boxes that sit on each element, so maybe it'll be ok in the end.