Making Object Blink in Lectora v11

jsearcyjsearcy Community Member Posts: 61
in Lectora Desktop
Hello everyone!

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

Comments

  • clammersclammers Community Member Posts: 117 ♪ Opening Act ♪
    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.
  • klaatuklaatu Community Member Posts: 988
    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
  • klaatuklaatu Community Member Posts: 988
    Clammers solution is simple and effective.
  • jsearcyjsearcy Community Member Posts: 61
    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.

     

     
  • klaatuklaatu Community Member Posts: 988
    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.
  • jsearcyjsearcy Community Member Posts: 61
    Duh... I was thinking about it very differently. Thank you! I believe that will work.
  • ssnegssneg Community Member Posts: 1,466
    You can see the complete setup in the screenshot below.
  • jsearcyjsearcy Community Member Posts: 61
    As always,  you are a great help! Thanks Sergey!
  • jsearcyjsearcy Community Member Posts: 61
    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?
  • jsearcyjsearcy Community Member Posts: 61
    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!
  • ssnegssneg Community Member Posts: 1,466
    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.
  • jsearcyjsearcy Community Member Posts: 61
    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.)
  • schapman1885schapman1885 Community Member Posts: 53
    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.
  • timktimk Community Member Posts: 1,142 ✶ Headliner ✶
    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/
  • klaatuklaatu Community Member Posts: 988
    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.
  • schapman1885schapman1885 Community Member Posts: 53
    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!!
  • schapman1885schapman1885 Community Member Posts: 53
    Darrel - YES! That also worked.  I didn't see your response until this morning. Thank you so much!
Sign In or Register to comment.

So You Wanna Be An eLearning ROCKSTAR?

We're all fans of eLearning here! Want to become an eLearning ROCKSTAR? Just click on one of the buttons below to start your rocking journey!

Sign In Register

Categories