Hello All,
First off, I am pretty new to all this, but I am loving Hype so far. I don’t have much experience with coding, so excuse my ignorance.
So, basically, what I am trying to do is set up an interactive element where the user can click on either side of an image, and it changes the opacity of that side. You can basically think of it as a venn diagram, where if I tap the left side, the right side fades and the left side stays 100% opacity. I set something up that works except for one issue. If the user then clicks the right side, I want the left side to fade down and the right side to fade back up. I think I need to set a variable or something so that when the user clicks a side, it checks what state the other side is in.
I know this may be a bit confusing because I am having trouble explaining. Please feel free to ask for clarification and thank you so much in advance!
Tim
A bit more clarification. I have timelines for 2 images. One for each side. In each of those timelines I have set up animations for dimming the image and then bringing it back up. So that works great for the toggle of the opacity, but I also need to make sure that the other side does the right thing too. So I was thinking, when I press the button, it could check where the playhead is and then take the appropriate action. I started with this, but am a bit to novice to know how to set it up…
[this is my attempt at writing out what I want to do without knowing the proper Javascript]
if hypeDocument.currentTimeInTimelineNamed(‘left’) = 0, then play
if hypeDocument.currentTimeInTimelineNamed(‘left’) = 1, then pause
Hi Timothy
Can you share a document? It would be easier to see how you are trying to accomplish it. There may be several ways to achieve the same thing. But, it would be easier to give you help if we could see what you are doing.
D
Sure thing. Here is a basic setup, that is admittedly messed up, but you can probably see what I was trying to do.
Hi Timothy
A couple of things: I appreciate you don’t have much experience coding 
if … else statements in Javascript (note the following is not actual code)
if (condition) {
code to execute;
} else {
different code to execute;
}
So, in your code it should be: (== means explicitly equal to, != means not equal to, > means greater than, etc … you can find more info in google )
if (hypeDocument.currentTimeInTimelineNamed('left') == 0) {
hypeDocument.continueTimelineNamed('left', hypeDocument.kDirectionForward);
}
- I think you were close with timelines. Maybe you could play one while reversing the other.
I’ll let you have a play around with it. When I have time I will upload an example way for you.
D
Thanks so much. I have been messing with Javascript on code academy so this is making more sense. I still can't seem to get it right though.
So on the button on the right side, on mouse click, I run this
if (hypeDocument.currentTimeInTimelineNamed('left') == 0) {
hypeDocument.continueTimelineNamed('left', hypeDocument.kDirectionForward);
}
else {
hypeDocument.pauseTimelineNamed('left');
}
I was hoping it would check the timeline 'left' and if it was at zero it would play the timeline up to 1 to fade out that image. But it doesn't seem to do anything. I am assuming I messed up somewhere.
Ok. I think I am getting close. I didn't even think that the timeline name was case sensitive. Der.
This is starting to work. Just need to figure out the logic a bit more.
if (hypeDocument.currentTimeInTimelineNamed('Left') == 0)
{
hypeDocument.continueTimelineNamed('Left', hypeDocument.kDirectionForward);
}
else
{
hypeDocument.pauseTimelineNamed('Left');
}
Thanks!
Really close now. Below is the code for the right side button. I have mirrored it for the left side button. It works great, but again, I think I am missing some part of the logic. If you go back and forth it gets stuck in a loop where both sides fade in and out at the same time when you click.
//
if (hypeDocument.currentTimeInTimelineNamed('Left') == 0)
{
hypeDocument.continueTimelineNamed('Left', hypeDocument.kDirectionForward);
}
else
{
hypeDocument.continueTimelineNamed('Left', hypeDocument.kDirectionBackward);
}
//
if (hypeDocument.currentTimeInTimelineNamed('Right') == 0)
{
hypeDocument.pauseTimelineNamed('Right');
}
else
{
hypeDocument.continueTimelineNamed('Right', hypeDocument.kDirectionBackward);
}
How about something like this.
One Timeline with opacity being set for both images on it.
The timeline is 2 seconds.
On scene load we jump to 1 second.
Each button makes a call to a Function that checks if the timeline is at 0 or 2 seconds. And continues the timeline in either reverse or forward. This should also stop the timeline jumping if the same button is clicked again.
Each button has an id and the code is:
if ( element.id == "leftButton"){
if ((Math.floor(hypeDocument.currentTimeInTimelineNamed('ToggleFade')) > 0 ) ){
console.log(Math.floor(hypeDocument.currentTimeInTimelineNamed('ToggleFade')));
hypeDocument.continueTimelineNamed('ToggleFade', hypeDocument.kDirectionReverse)
}
return;
}
if ( element.id == "rightButton"){
if (Math.floor(hypeDocument.currentTimeInTimelineNamed('ToggleFade')) < 2 ) {
console.log(Math.floor(hypeDocument.currentTimeInTimelineNamed('ToggleFade')));
hypeDocument.continueTimelineNamed('ToggleFade', hypeDocument.kDirectionForward)
}
return;
}
opacityTest.hype.zip (64.5 KB)
By the way I am not sure where you got this??
The opposite to hypeDocument.kDirectionForward is hypeDocument.kDirectionReverse
It turns out changing to Reverse fixed my issues. I have not had a chance to try your other approach but thanks for the help. Here is the code I used and just reversed it for the other button.
//
if (hypeDocument.currentTimeInTimelineNamed('Left') == 0)
{
hypeDocument.continueTimelineNamed('Left', hypeDocument.kDirectionForward);
}
else
{
hypeDocument.continueTimelineNamed('Left', hypeDocument.kDirectionReverse);
}
//
if (hypeDocument.currentTimeInTimelineNamed('Right') == 0)
{
hypeDocument.pauseTimelineNamed('Right');
}
else
{
hypeDocument.continueTimelineNamed('Right', hypeDocument.kDirectionReverse);
}
I had faith in you finding a solution 
There are probably better (or just different) ways to do what you are wanting to do. But, at least you have something that you can use. Mark’s approach is a good one. It reduces the amount of timeline’s used and even though it uses a little more code it’s pretty straight forward to work out the logic:
Math.floor() is a method that returns a whole number (integer) that is less than or equal to a given number. In this instance “currentTimeInTimelineNamed…”
console.log() writes a message to your browser console to show you information. It’s like alert().
D