Making Object Blink in Lectora v11

jsearcy

Hello everyone!

I am looking for a quick and easy way to make an object blink in Lectora. Any ideas?

clammers

What do you mean by blink? A quick an easy solution would be to put a timed action on the page. On: Timed Interval, Action: Toggle Show/Hide, Target: (Object). The action will repeatedly fire, showing and hiding the object, giving the illusion of blinking or flashing.

klaatu

The easiest way I can think of that also gives you complete control over the blinking effect is by using Greensock GSAP.

Once you add the HTML extension it's two simple lines of code:

var star = document.getElementById("shape47");
TweenMax.to(star, .25, {opacity:0, repeat:-1, yoyo:true});

You an add this as a page show action.

The first line grabs the HTML element and assigns it a name. You would need to swap the HTML name ("shape47" in this case) of the object in your project that you want to blink.

The second line takes the object (I named it 'star') and animates its opacity to zero over the span of a quarter of a second (.25). The repeat -1 and yoyo:true make it repeat indefinitely.

You can experiment by changing the .25 to get the blink however you like. Also, if you add  , repeatDelay:0.25 (don't forget the comma) So now the second line looks like this:

TweenMax.to(star, .25, {opacity:0, repeat:-1, yoyo:true, repeatDelay:0.25});

You can add a delay between the animation of the opacity. This will give you further control over the blink effect.

Note that if you copy and paste from the above that you should delete and re-add the quotes because for some reason they do not copy and paste correctly and the code will not work.

the .ini and .awt for is included in the attached zip. Try it, it's fun and works great. Hope this helps.

Darrel

klaatu

Clammers solution is simple and effective.

jsearcy

Thanks for the quick responses. However, this is for a customer who has no programming skills so adding extensions is not an option. (I apologize for not mentioning this in the initial post.) I thought I could do it using a timer but once I added it, I got stumped. Could you be a bit more specific on exactly where I should add the action? I rarely ever use timers with Lectora so I am pretty rusty.

Thanks again for the responses.

 

 

klaatu

Hi Jill. As Clammers suggests you place the object on the page and then insert an action on the page itself. The trigger will be Timed Interval. In the Action and Target section select the action Toggle Show/Hide. The target you select in the drop down will be the object you want to blink or flash. You then adjust the Interval and Delay in the Trigger Section to your liking.

jsearcy

Duh... I was thinking about it very differently. Thank you! I believe that will work.

ssneg

You can see the complete setup in the screenshot below.

jsearcy

As always,  you are a great help! Thanks Sergey!

jsearcy

Ok - My animation is working perfectly but I need to allow the user to reset it so they can watch it from the beginning. The stop action on the timer stops the clock ticking (so to speak) but the animations based on the time intervals continues no matter what I do. Any ideas?

jsearcy

Never mind folks  - I determined that the timer was irrelevant. I added the timed interval action for each object with a coordinating variable (for a one or zero typical on off switch) and it works. Thanks to everyone who helped!

ssneg

I was just going to suggest using a variable. Be careful though as the toggle animation can stop at the VISIBLE or HIDDEN position with a 50%/50% chance. So you might want to add another action that definitely hides (or shows, depending on what you want to achieve) the object after the blinking has been stopped by the variable.

jsearcy

I noticed that in my testing but it won't matter in this instance because I have to hide the object to reset the animations on the page so learners can watch them more than once if they need to. (It's a step by step animation of a software tutorial.)

schapman1885

So, I have been using this topic as a reference point for making an object blink. Because I wanted to cue the blinking based off of a button click, I implemented the Greensock idea. It runs locally, but, when I upload it to our server, it doesn't work. I get an error "Uncaught Cannot tween a null target."  I don't see the shape I am referring to in the directory that needs... however, they have been uploaded to the server. It's like it doesn't see any of the Lectora generated objects. Does anyone have any ideas on how to fix this?

I am open to an alternative method to making the object blink...but, can't use the timer... because, buttons don't support that action. (So, says the compiler.).

Any help is appreciated.

timk

Another method to make it blink with pure Lectora is to add two actions to the object:

On: Show
Action: Hide
Target: This object
Delay: 0.25 seconds

On: Hide
Action: Show
Target: This object
Delay: 0.25 seconds

Make it initially invisible and show it with your button. It should blink from the first click.

Check this thread how to use Greensock to make an object "pulse", as you seem to know Greensock you should have no problem to make it blink instead:

http://community.trivantis.com/forums/topic/external-javascript-not-working-in-lms/

klaatu

SB, it is most likely seamless play causing the problem. Try adding 'parent' (no quotes) ahead of 'document' in your variable declaration.

So in the example I posted above, this:

var star = document.getElementById('shape47');

becomes this:

var star = parent.document.getElementById('shape47');

Now it'll work with seamless play turned on. Hope this helps.

schapman1885

Tim, Thank you for the quick and excellent response. Tucked away in that link was your response about Seamless Play. I turned that off, republished and reloaded to the server...and viola!  Excellent!!

schapman1885

Darrel - YES! That also worked.  I didn't see your response until this morning. Thank you so much!