Creating a blink effect animation?

Nov 05, 2012


How can U create a blink animation on a button or any object whereby the user will click on?


41 Replies
Kai ...

Meryem M said:


Do you want the user to click after the object blinks?  How about this: Put your object on the timeline for just a fraction of a second.  And place a hotspot for clicking on in the same location.

Thanks for the reply M,

I am a newbie and am not quite familiar with the hotspot functionality. In totality I do understand how it functions in other tools, but not sure about SL.

To answer your question - The user will click the object while blinking and I guess with the hotspot functionality on hover it will stop and allow the object to be clickable.

The blinking functionality I want more as an attention grabber/direction/instruction so they know where to click to advance in the interaction. Not a quick blink, but rather a loop blink.

Does this make sense? 

Christopher N.

Karen E said:


How can U create a blink animation on a button or any object whereby the user will click on?



I guess you already solved the mentioned problem, but if you didn't, I made a solution for this.

Since SL is really lacking in animations I had to make it manually. Firstly I duplicated the desired object two or three times (it's up to you how much blinks you want) and put them on each other. Than at the timeline I timed them with an aprox. 1 second difference between each other with fade out and fade in effects applied on them and medium speed. The first two objects should appear for only one second and the last can stay for longer. With this, the objects will act like one object which is blinking. This works with a button aswell!

I hope it helps!

Ashish Kejriwal

Hi all, I am a newbie and was looking for creating continuous loop and I think I have found a relatively simple fix.

I created a layer by name 'loop layer' where in the timeline length is 2 seconds and the object is of 1 second duration. I applied two triggers. 

First made the 'loop layer' visible

Trigger 1
Action: Hide Layer, Layer: this layer, When: Timeline ends, Object: loop layer

Trigger 2
Action: Show Layer, Layer: loop layer, When: Timeline ends, Object: loop layer

Annie St-Pierre

Hello Erin, 

Did you manage the blinking effect? After some help from Micheal, I finally got it to work for me. 

You need to follow these steps : 

1. Add a shape offstage

2. Animate it with a motion path.

3. Add a True/False variable for your blinking effect : Variable name: Blink, Value: False.

4. Add a trigger to start motion path when you want it to start, for example when media stops.

5. Add a trigger to start motion path when animation motion path ends.

6. You'll then need to add triggers to change variable when media ends AND when animation ends.

7. Finally, add triggers to change the state off the object you want to blink.

I created a sample so you can see in Storyline. 

I hope this helps!

And big thanks to Micheal Hinze: without him, I would still be puzzling over it.


Bob Wiker

My two cents: You may want to reassess the overall design of the page(s) where you want to place continuously blinking buttons. Learners should be able to figure out what to do (or what to click) without things blinking at them for attention.

The 1990's saw the introduction of the <blink> tag in HTML; it was widely scorned and derided, and ultimately dropped from the standard. People didn't/don't like constant blinking. (See "The Origin of the Blink Tag" )

Maybe the best solution lies in revisiting the layout of your pages, or decluttering if there are too many things on the page (white space is your friend!), or finding another way of visually informing the learner that the button is 'alive' and clickable (such as the Hover state). Best of luck in refining your design!

Mark Guerrein

Here's simple way to create a blinking object for a finite period or in a loop, using Slide Layers.

Blink for finite period
1. On the Base Layer, create or insert the object that you want to blink and then copy it.
2. Create a new Slide Layer called Blink 1. In the Slide Layer properties, select "Hide slide layer when timeline finishes" and under Revisits, select, "Reset to initial state." Do not select "Hide other slide layers" or "Prevent the user from clicking on the base layer."
3. Paste the object from the Base Layer to Blink 1. Start it a 0.0 seconds on the timeline with a duration of .5 seconds. Set the timeline to 1 second duration. (You can change the frequency and duration of each blink by adjusting these time settings.)
4. Duplicate Blink 1 layer and call the new layer Blink 2. Repeat the duplications for as many seconds as you want the blinking object to run.
5. On each Blink layer add a Layer Trigger to show the next Blink layer when that layer timeline ends. On the final Blink layer you won't need a Layer Trigger.
6. On the Base Layer, create a Slide Trigger to Show Blink 1 layer at the point on the timeline that you want it to start.
7. Delete the original object on the Base Layer.

Loop Option
Blinking can be set up in a loop if desired, but it will stop when you jump to a new slide.

For a continuous loop, you only need two layers, Blink 1 and Blink 2. Everything is set up the same as above except for the Blink 2 layer. Change the Blink 2 Layer Trigger to Show the Blink 1 layer.

The loop option will not stop until you leave the screen or you set up a Trigger to hide both Blink layers. If the Base Layer slide property is set to "Automatically decide" or "Resume saved state," the blinking will continue when you return to that slide.

1. If you are going to copy and paste a lot of Blink layers it may be faster to add the Layer Trigger first to the original blink layer but in the layer trigger, remember to change the name of the Slide Layer that you want  to Show.
2. You can alter the appearance of the object in each Blink layer such as changing its color, so in addition to blinking, it will alternate colors (or size, location, etc.)

Matt Painter

I needed this fix, too, to simulate a flashing light on an aircraft instrument - flashing on a loop. I am still a rookie, and I could not get the complex offstage thing to work, nor Mark's solution. Ashish's solution was the last one I tried and I got it to work, but I had to un-check the "Hide slide layer when timeline finishes" to get it working.

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