Making Object Blink in Lectora v11

jsearcy
Community Member Posts: 61
Comments
-
-
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 -
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.
-
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.
-
-
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?
-
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.
-
-
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. -
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/ -
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. -
-
Categories
- 4.8K All Categories
- 6 New Feature Releases
- The Training Arcade®
- Arcades™
- 125 ✫ Announcements
- 9 ✪ Contests
- 34.1K eLearning Brothers® Products
- 33.6K Lectora®
- 31.6K Lectora Discussions
- 1.9K Lectora Feature Requests
- 71 Lectora User Groups
- 17 Asset Library
- 10 AssetLibrary Discussions
- 7 AssetLibrary Feature Requests
- 304 CenarioVR®
- 178 CenarioVR Discussions
- 126 CenarioVR Feature Requests
- 40 Rockstar Learning Platform®
- 28 Rockstar Learning Platform Discussions
- 12 Rockstar Learning Platform Feature Requests
- 4 Off-the-Shelf Course Library
- 3 Off-the-Shelf Course Library Discussions
- 1 Off-the-Shelf Course Library Feature Requests
- 114 CourseMill®
- 107 CourseMill Discussions
- 44 ReviewLink®
- 32 ReviewLink Discussions
- 12 ReviewLink Suggestions
- 2 The Training Arcade®
- 1 The Training Arcade Discussions
- 1 The Training Arcade Feature Requests
- 10 Additional Learning Products
- 2 Adobe®
- 4 Articulate®
- 2 Camtasia®
- Docebo®
- 1 iSpring®
- 1 Microsoft® PowerPoint®
- 932 All Things eLearning
- 5 Course Development Showcase
- 1 eLearning Brothers® Downloads
- 1 Compliance Training
- 11 eLearning Development
- eLearning Game Design
- 7 Instructional Design
- 545 Learning Management System (LMS) Integration
- 3 Mobile Learning
- 22 Visual Design
- 331 Web Accessibility
- 1.2K ♪ The Green Room
- 8 ♡ Community Feedback
- 7 Community Tips