How the code works .
The Hype function gets called by the keyframe events.
Inside the function we have javascript methods that can talk to the elements and either send them commands or asked them for information. The ** methods** then work together to do something with the info like issue more commands.
So javascript is a language we can control or query a web pages elements and properties.
We also have objects in the javascript known as variables.
The javascript methods can store information in the variables.
Variables are like magic containers. They can hold different types of information, like numbers, text strings, arrays of information, references to elements that will channel any instructions or queries to the real element it is referencing.
Now imagine that ** methods** normally can only talk to variables created inside their parent functions. We call this within their own scope.
If methods share a parent function then they can normally see and access any of the variables within it.
Variables within the scope of a function normally only exist while the functions is running.
When the function completes the variables are wiped from existence along with the scope instance.
If the function is run again the variables are created from scratch as is it’s new scope. We start with a new blank canvas.
There are times when we want to have a variable remain in existence after a function has completed it’s run.
But just like variables, the scope of a function is also created from scratch when the function runs again. So we need to create a special variable which will stay alive throughout the life of the webpage’s scope rather than only in the scope of a running function and can be accessed from any function when that function runs.
We call these type of variables global variables
We prefix Normal variable with the word var. This makes it private to only the scope of the function.
We can normally attach a var to the window’s (webpage) scope thus making it global and immortal.
window.fooVar.
fooVar is now attached to the windows scope and can be accessed by anyone.
In the Head file we place a global variable.
We place it here because we want it to exist when the page first loads.
This global var will be used by the function’s methods to store the count of the loops and also will be accessed by the functions methods to check that count.
Our global var is called window.loopCounter
We also need to initially give window.loopCounter a value.
So in the head we tell it to store a value of 0.
In the new example I have actually changed that to the value of 1. which I think will be easier to understand the counting sequence and gives us 3 loops instead of 4.
window.loopCounter =1;
We now have two Hype functions. ( I am going on what I think you are after )
The original function you had which was called at the end of the timeline.
window.loopCounter++;
if (window.loopCounter <= 3) {
hypeDocument.startTimelineNamed('loop', hypeDocument.kDirectionForward)
}
This is a simple function that works its way down each line of code and executes it.
window.loopCounter++;
This is shorthand saying window.loopCounter equals it’s current value plus 1 and in the long form would be written like this
window.loopCounter = window.loopCounter + 1
window.loopCounter has become a persistent counter that we can read from and update.
if (window.loopCounter <= 3) {
hypeDocument.startTimelineNamed('loop', hypeDocument.kDirectionForward)
}
this is what is known as an if clause it’s wording/syntax is pretty straight forward.
The code/ statement within the brackets ( ) is computed first.
The result must return a true or false
The statement
window.loopCounter <= 3
This is us saying,
is window.loopCounter less than 3 or is window.loopCounter equal to 3.
We use the operators < for less than and = for equals.
Putting them together means we only need to ask this in a short abbreviated way.
if the resulting value of that code within the brackets is true we then and only then execute any code within the curly braces { }.
The new function.
On the timeline I have added another keyframe action that is positioned 1 second in. ( 10 seconds before the end of the timeline which lasts 11 seconds)
The action calls the second function.
The intent of this function is simply to pause the timeline at the 1 second mark if the timeline is starting it’s 3rd loop.
The code should now make sense.
We check if we are on the 3rd loop. if so we pause the timeline.
728x90-m1.hype.zip (100.3 KB)
I hope this makes sense and hope my attempt to simplify whats going on is not bent out of shape too much for any coders out there…