Help creating a flashing next button

Jun 25, 2012

Is there a way to create a flashing Next button in Storyline?

I want the button to flash at the end of a slide to alert the learner that it is time to click.

51 Replies
Jill McNair

Hi David,

The short answer is 'yes.'  I think if I wanted to do this, I would turn off the built-in Next button and create my own button.  I would add a new state to the button called Flashing, where I would insert an animated gif.  I would then create a trigger to change the state of the button from Normal to "Flashing" when I wanted it to flash (e.g. when the timeline ends).

If you don't have an animated gif to use, another thought to call attention to the next button would be to insert a hand-drawn graphic like this:

This is one of the free hand drawn graphics under the Download tab: http://community.articulate.com/downloads/p/815.aspx or you can make your own.  You can use a trigger to make this appear when you want it to.

A third idea (this is not flashing option) - you could easily add an animation to your custom Next button like Spin, or Spin and Grow, etc. to draw attention to the button.

Any other ideas out there?

Hope this helps!

Jill

Gerry Wasiluk

Another possible option is to mask the custom button, like with a series of rectangles or other shapes, each one lasting for, say, .25 seconds and then space the shapes out on the timeline.  It gives the illusion of blinking.

Or, if the rectangle is the same size and shape, and positioned just over, you can give it a color and some transparency.

Not a big fan of blinking objects from my old web design days where blinky things were almost an anathema.  

I'd also consider something like an animated arrow coming in pointing at the stock next button or an annotation around a custom button, which Steve shows how to do here.

Or add a text box with an arrow that appears just over the stock next button with something that says "Click Next."  You can animate this text box and position it to come in at the end of the timeline.

Jeanette Brooks

Another way to do it is use a layer, like in the attached example. The layer contains the next button, with Fade In/Fade Out animations for its entrance and exit. A trigger causes the layer to reveal when the slide timeline ends. On the layer itself, 2 triggers cause the layer to hide and then reveal, to create the looping/flashing effect. The layer properties are set to "Reset to initial state" to allow the layer's timeline to refresh every time.

Gerry Wasiluk

dave lees said:

Is there no way to just tell the default next button to blink at the end of the slide like in Presenter? this is commonplace in Elearning applications not sure why it would have been taken out of Storyline?


I know a lot of folks hate anything that "blinks."  I have some clients that to use a blinky button is anathema.

Not trying to be argumentative here   but sometimes it seems with these things we bend over backwards too much to accommodate the learner, thinking they can't figure things out.  Seems like we're not respecting their intelligence as adults to figure things out with simple things like words that just say , "Click the next button."

On the hand, I've seen some designs that are so cluttered, more than subtle help for the learner is needed.

Melissa TeHennepe

Actually, the blinking button can be a big help and I have had users/clients actually request it multiple times since I have switched from Presenter to Storyline. The argument for or against it has a lot to do with your course design needs and your audience.

I train external clients, so my material and GUI is new to them every time I roll a product out. Since they are not familiar with the interface - much like an internal training audience would be - and if the culture of the client is new to the e-learning landscape (and much of them still are - especially my clients) - then on-screen prompts can still provide assistance.

In regards to the design aspect, I have created courses that work with several layers coming and going on the timeline - where clicking ahead of the layers cause the learners to potentially miss material or become confused when the slide is over. And even though there are work arounds for this like disabling buttons or creating custom buttons - at the end of the day...developing that out takes time to do - especially if you are dealing with courses that are large and have over 50+ slides of material (thats a lot buttons) to manage conditions on.

Sasha Scott

I agree with Melissa - if you have 50 slides and you have the words "click the Next button to continue" written on each slide, that's an unnecessary 300 words (and insulting to the intelligence!). Much more elegant to hint subliminally with a subtly pulsing button that the slide is done and it's probably time to move on.

It's actually pretty time-consuming to set this up with Storyline though - the issue is how to set it up so that Storyline "knows" the slide has finished... If it's a linear recording of slides and narration as in Jeanette's example, then fine, if the timeline ends, then show the blinking button layer. But what if the learner has to click an arbitrary number of things or drag and drop an arbitrary number of things and e.g. click a button before the slide is "finished"? You have to set it up differently in each case, with several variables - one for the number of items that exists on the slide (you would have to set this manually for each slide depending on how many items you have created on the slide, as Storyline has no access to the "properties" of the slide, for lack of a better word), and another variable for the number of items that the learner has clicked (in order to compare it to the number of items that exist), and possibly more variables too...

Also for each slide in a module, the variables involved would each need to have a unique variable name specific to that single slide because you can't really refer to the same variable on subsequent slides (well you could keep resetting the same variable as each slide begins, but that could get very confusing very fast, especially if you were resuming partially completed slides ...

So there could be quite a lot of tinkering required just for that one simple gimmick of a flashing button that works consistently across all the different interactions in your design.

I just felt moved to comment here as I have come across the assumption that Storyline now means you can do "anything" much faster and easier than with Studio 09 or any other tool, and hence developers should now be paid much less than before :-)

Judith Blackbourn

Hi - it's just me . . . sorry for the new avatar, just got a haircut!

Is there really a way to do anytthing with the player Prev and Next buttons (other than turn them on and off?)

In my course introduction, as i describe how to navigate through the course, I use a flying red and yellow arrow to point down to the next button (red fill, wide yellow outline). Just used animation, and set it to fly at the end of the timeline.

No need to use it more than once.

Judith

Sasha Scott

@Steve I totally agree that it's easy enough, and a great feature compared to the competing software package, just that it takes a little time. And testing time as well to make sure you haven't made any mistakes... Extrapolate to 10 hours of content, then try to explain the time and budget implication to a client, and you see what I mean

I know it's one for the feature request route but I think it would be an improvement to change the paradigm slightly to include local (button) variables instead of having them all global, ability to get and set properties of objects such as position, rotation etc. and of course an "exit frame" trigger. I think I might post an example elsewhere to illustrate where I've used 756 Storyline triggers to reproduce something that used like 3 lines of code in Flash :-)

Alan Beadle

One related issue I have is how the user knows when animations (such as fading in text) have completed on layers other than the base layer.

Obviously with the base layer, the user can see progress using the seek bar. But if this layer has buttons to reveal other layers that have animations, there is no visible indication unless you add it in yourself. I thought about creating my own progress bar for layers, but if I did, I'd want something simple.

Jeanette Brooks

Alan Beadle said:

Obviously with the base layer, the user can see progress using the seek bar. But if this layer has buttons to reveal other layers that have animations, there is no visible indication unless you add it in yourself. I thought about creating my own progress bar for layers, but if I did, I'd want something simple.


Hey Alan, not sure if this is what you are looking for, but you can in fact invoke a seekbar on a layer if you like. Just click the gear icon next to the layer name, and when the layer properties window pops up, you can use the "Allow seeking" selector to choose Yes.

Steve Shoemaker

I can't seem to make this work using the layer and triggers.  They appear to be set up exactly like the example file from Jeanette.  The button appears when the timeline ends but it doesn't blink.  Obviously my triggers are not set up like Jeanette's but I don't see the error.  I've attached the .story file if anyone would care to take a look.

I look forward to a learning opportunity!

Jeanette Brooks

Hi Steve! Couple things:

  • Add an entrance & exit animation to your button (I used Fade on mine) so that it doesn't just display statically. I should have mentioned this on my earlier post above. I'll amend it.
  • I'd also tighten up the layer's timeline so that it's much shorter (like 1 second).
  • And the most important part: on your Next Button Layer, click the gear icon next to the layer name and then, on the layer properties, choose "When revisiting: Reset to Initial State." 

I think if you do these 3 things, you'll see the effect you want.

Jerson  Campos

Simple solution: Use an animated gif or swf button. For the swf button you are going to have to add a hotspot over it since storyline won't let you make swf files "clickable".  Attached is a simple animated "next" button for you to try out.

I think this is much simpler than playing around with variables. It's doable, but I rather just use an already animated button.

You'll need to right click and save as .swf.

This discussion is closed. You can start a new discussion or contact Articulate Support.