Box that expands with a button press

I thought it would be cool to have a an expanding box with information that is pertinent to a particular activity. My thought was that it would expand out of a button and then disappear when clicked again. I tried to figure out how to do it all in Storyline but I couldn't figure it out. I ended up animating it in flash (1st time trying that) and popping it into the slide.

Has anyone else tried doing something like this? It seems like I am doing more work then necessary and I'm thinking there must be a better way to do this. Just thought I'd throw it out there. The story is attached:

17 Replies
Jesse Cabaniss

Meryem M said:

Jesse Cabaniss said:

That's a heck of a lot easier! Can you change the shape/size of markers?


Yes.  Select the marker, then click the Marker Tools/Format tab.  You can change both label styles and Marker styles. 
The only issue is that I can't figure out how to change the size of the marker. If I have a larger training course (as in resolution), the button is way too small.
Rebecca Fleisch Cordeiro

Hi All,

Jessie, I don't THINK you can change the marker size, although you can change just about anything else (fill, border, icon color, icon) and you can change the size of the labels.

But, you can "fake" the hover and "click" states of markers by using your own buttons, which of course can be sized as you wish, adding layers, and adding triggers for the two layers to "fake" these states. No flash required. I did this in a project I was working on a while back.

I've uploaded your story here to show you what I mean.

  • The first slide is the one you created.
  • The second slide is yours, but I removed your marker and inserted a SL marker that looks almost identical
  • The third slide is yours, but instead of your marker or the storyline marker, I created a button, added the two additional layers and the hover and click triggers.

I think it will be clear when you look at the slides, but please do ask if you'd like an explanation.

Jesse Cabaniss

Thanks for the input, Rebecca! The only problem with the other solutions is that it doesn't quite have the look that I'm after. I'm sure that for most things it will be fine, but I'll keep experimenting with flash in the meantime. It's quite fun to use and it really adds some cool factor to Storyline.

Jerson  Campos

I think what your looking for is like an accordion most sites have on them. This effect is not that hard to do in flash, but you cant duplicate it in storyline. It's going to take a little actionscripting, but if you have the 5.5 and above, code snippets are your friend. I'm actually in the process of developing something similar, but mine will play an animation and expand a text box when hovered over. If you are having trouble, just pm me and I'll try to create a template you can use.

Jesse Cabaniss

Jerson campos said:

I think what your looking for is like an accordion most sites have on them. This effect is not that hard to do in flash, but you cant duplicate it in storyline. It's going to take a little actionscripting, but if you have the 5.5 and above, code snippets are your friend. I'm actually in the process of developing something similar, but mine will play an animation and expand a text box when hovered over. If you are having trouble, just pm me and I'll try to create a template you can use.

I think the little window I created works pretty well for what I'm trying to do. The only thing is that I would really like the animation to pause and then when some action is taken, the animation continues and the window closes. I believe I found out that SWF movies cannot be paused within Articulate :|
Jerson  Campos

You need to add actions to the SWF file. I just tried something I recently created in flash and it worked in Storyline. You can externally pause or add interaction from storyline to the internal timeline of the SWF animation. You have to do it from flash.  If you play around with code snippets a bit this will make it easy and fast if you are not trying to do something complicated.

Jessica Schneck

Rebecca Fleisch Cordeiro said:

Hi All,

Jessie, I don't THINK you can change the marker size, although you can change just about anything else (fill, border, icon color, icon) and you can change the size of the labels.

But, you can "fake" the hover and "click" states of markers by using your own buttons, which of course can be sized as you wish, adding layers, and adding triggers for the two layers to "fake" these states. No flash required. I did this in a project I was working on a while back.

I've uploaded your story here to show you what I mean.

  • The first slide is the one you created.
  • The second slide is yours, but I removed your marker and inserted a SL marker that looks almost identical
  • The third slide is yours, but instead of your marker or the storyline marker, I created a button, added the two additional layers and the hover and click triggers.

I think it will be clear when you look at the slides, but please do ask if you'd like an explanation.


Hi, Rebecca,

I tried the treatment you used on the third slide, but everything on the base layer dims (and inactivates) and I don't want it to. I can't figure out what I'm doing wrong! I've set all the base layer objects to visible....? Can you peek at my file? The turquoise "FPI Checkpoint" oval is the item I'm trying to get to do what your built marker did.

--jessica

blair parkin

Hi Jessica

Hope you don't mind me jumping in. It looks like the two triggers you had were getting in the way of each other. As you had created a "button" with a hover state i just copied what you had on the cover layer to the hover state and removed the hover trigger.

Hope this is what you were trying to achieve

Blair

Jessica Schneck

Hi, Blair,

Thanks for jumping in! It's close, but if you check out Rebecca's last slide, all the layers stay visible even on click and I cannot figure out why mine won't.

Really going for what a marker does but with a little more flexibility (interaction).

Thanks, though. I appreciate your help.

--jessica