Hi, Walt! I see that Matthew has offered a suggestion here to assist! Please feel free to let us know if that is what you have in mind, or if you need additional design-related advice, you are welcome to reach out in our Building Better Courses forum here, as well.
I created something a bit more simplistic but less stable with the setInterval method in Javascript.
The following script will add 2500 to a variable every 50 milliseconds until it reaches the target value of 25,000. So in this case it will count to 25,000 in around 0.5 seconds I used this in a cue point trigger:
//Build a bridge to player in Javascript var player = GetPlayer();
//Get the value variable of "yourVar" from Story file
var toCount = player.GetVar("yourVar")
// Update the count var x = setInterval(function() {
//The number to count up to (in this case 25000)
if (toCount < 25000) {
//How much to increment per interval iteration toCount= toCount + 2500;
/*The below segment will format the number and set it to a localized string, in this case British English. I used this particular variant for converting to monetary amount with a comma
This may not be necessary for your purposes depending on what you want to use it for.*/
var countString = toCount.toLocaleString('en-GB')
/* This sets 2 variables, one as an integer and one as a string. If the variable is required again throughout the course, it is essential to have the integer set to the correct number and not the formatted string, as Javascript will not perform correct mathmatical operations on a string.*/
Simple and effective implementation. Exactly what I needed. I just added a couple of lines to make the timer stop after the ticker has reached desirable number. Below is what I added.
Is there any way to do this directly in Storyline 360 without embedding AfterEffects or using javascript? I'm thinking maybe something using a timeline. In the first module of my course, I want to create shock value for the learner. I will animate in 4-5 statements each that have a number associated with it. When each statement is added I want the number counter to quickly be added to the previous one, which means the number is increasing with each statement.
For example: Time to study for your boards (18 hrs); Time to complete the NCLEX exam (4 hrs)
I want to display onscreen the number counting up from 18 to 22.
It will be more dramatic than this but I want to keep it basic for the sake of this post.
You can create what you're envisioning using variables and triggers. Every time a statement shows up on the screen, you can adjust the variable (add value 18 to the variable counter, then add value 4 to the variable counter, etc.).
In the example below, I used one textbox that animates by paragraph, but you can do it with separate objects as well:
Also, for dramatic effect is there anyway to show the numbers adding up versus the new added number just appearing? In other words, from the first to the second number, the end user would see 10, 11, 12 (very quickly, within 1-2 seconds).
I'm glad that Walt was able to pop in and help you further here.
Your email signature came through when you replied via email. You can remove that if needed by clicking ‘Edit’ beneath your response. Here’s a quick Peek video if you need help.
21 Replies
Hi, Walt! I see that Matthew has offered a suggestion here to assist! Please feel free to let us know if that is what you have in mind, or if you need additional design-related advice, you are welcome to reach out in our Building Better Courses forum here, as well.
YES, That is exactly what I want but I have no idea where to start with that?
What are the steps I need to include this code in my module and in the file structure of the published module?
THANK YOU!!!!
Awesome. Thanks so much Matthew! I really appreciate your help.
AMAZING!!! That is it! Wish I had your talent.
Thank you so much! I really appreciate your help!!!
Just one last question Matthew,
Do I place this html file in the story_content/external_files/ directory and point the web object to that location?
Thank you!!!
WOW. I had no clue. So when I want to publish this to an LMS, it will work as well?
That is awesome! Thanks so much! This will help tremendously when publishing to our LMS.
HAVE A FANTASTIC WEEKEND!!
Wow guys. Awesome collaboration! Thanks Matthew for the effort on this one! :)
I agree with Crystal, this is really good, best thing I've read this morning. Thanks for sharing here in the community!
This is so great! How can I recreate this? I need a counter up to 2,000,000 ...
This is great!! Thank you!
A workaround I found was to create the animation using After Effects (this YouTube video explains how to do this).
Because Storyline can't import transparent video files, I made the background of the video the same background of Storyline slide.
I then just inserted the video into my e-Learning project. I can place other objects on top of the video, just as if it's another object.
I created something a bit more simplistic but less stable with the setInterval method in Javascript.
The following script will add 2500 to a variable every 50 milliseconds until it reaches the target value of 25,000. So in this case it will count to 25,000 in around 0.5 seconds I used this in a cue point trigger:
//Build a bridge to player in Javascript
var player = GetPlayer();
//Get the value variable of "yourVar" from Story file
var toCount = player.GetVar("yourVar")
// Update the count
var x = setInterval(function() {
//The number to count up to (in this case 25000)
if (toCount < 25000) {
//How much to increment per interval iteration
toCount= toCount + 2500;
/*The below segment will format the number and set it to a localized string, in this case British English. I used this particular variant for converting to monetary amount with a comma
This may not be necessary for your purposes depending on what you want to use it for.*/
var countString = toCount.toLocaleString('en-GB')
/* This sets 2 variables, one as an integer and one as a string. If the variable is required again throughout the course, it is essential to have the integer set to the correct number and not the formatted string, as Javascript will not perform correct mathmatical operations on a string.*/
player.SetVar("yourVar",toCount);
player.SetVar("yourVariable",countString);
}
//this line isn't necessary but I always use it for basic debugging
console.log(toCount)
},
//Interval iteration duration in milliseconds e.g. 1000 = 1 second
50);
great stuff @damien.
Simple and effective implementation. Exactly what I needed. I just added a couple of lines to make the timer stop after the ticker has reached desirable number. Below is what I added.
else
{
//stop ticking
clearInterval(x);
}
console.log(toCount)
Is there any way to do this directly in Storyline 360 without embedding AfterEffects or using javascript? I'm thinking maybe something using a timeline. In the first module of my course, I want to create shock value for the learner. I will animate in 4-5 statements each that have a number associated with it. When each statement is added I want the number counter to quickly be added to the previous one, which means the number is increasing with each statement.
For example: Time to study for your boards (18 hrs); Time to complete the NCLEX exam (4 hrs)
I want to display onscreen the number counting up from 18 to 22.
It will be more dramatic than this but I want to keep it basic for the sake of this post.
Can anyone help?
Hi, Kimberlee.
Thank you for reaching out!
You can create what you're envisioning using variables and triggers. Every time a statement shows up on the screen, you can adjust the variable (add value 18 to the variable counter, then add value 4 to the variable counter, etc.).
In the example below, I used one textbox that animates by paragraph, but you can do it with separate objects as well:
I hope this helps!
I can't thank you enough for your prompt response. May I have the file to "see behind the scenes"? I was just setting up my variables but got stuck.
Also, for dramatic effect is there anyway to show the numbers adding up versus the new added number just appearing? In other words, from the first to the second number, the end user would see 10, 11, 12 (very quickly, within 1-2 seconds).
Here's a simplified version.
Hi Kimberlee,
I'm glad that Walt was able to pop in and help you further here.
Your email signature came through when you replied via email. You can remove that if needed by clicking ‘Edit’ beneath your response. Here’s a quick Peek video if you need help.
Thanks Leslie!!!!!!!!!! I have removed the information.