Variable on click button


#1

Hello,
I am a French designer who starts in javascript. Before I used Edge Animate frequently for projects, like many, I have now switched to Hype.

I created a variable at the click of a button and I can start a timeline based on the value of it. My problem is that each of my click on my button restarts this timeline. However, I modify the value of my variable well, so I do not understand why my action is raised at each of my click.

Since I will realize a big project on this software, I would like to have some information on this case which will be a frequent case in my project.

I thank you in advance

test.zip (14.0 KB)


(strmiska) #2

try switch/case

var time = hypeDocument.currentTimeInTimelineNamed('animcarre');

			switch (time) {
            case 0:
                 hypeDocument.startTimelineNamed('animcarre', hypeDocument.kDirectionForward);
                 hypeDocument.pauseTimelineNamed('animrond')
            break;
            
            case 2:
                 hypeDocument.startTimelineNamed('animrond', hypeDocument.kDirectionForward);
                 hypeDocument.pauseTimelineNamed('animcarre')
            break;
            }

test.hype.zip (14,2 KB)


#3

Hello
Thanks for taking time to respond to me. I’m analyzing the code, but after the third click, it’s always the round anim that starts. Is it possible to remedy this problem.


#4

Ok, i understand the code, super tricks to retrieve the position of the timeline to change the value of the timeline. On the other hand it works well if we have animations. There was not the possibility of doing what I wanted via my code I had posted that I found more simple


#5

@Pckdesign

My problem is that each of my click on my button restarts this timeline.

As far as I can tell the “bouton” is the only trigger~input for running the JS function “testvar”; and the only place the variable “clickbutton1” is set is in this function. As a result every time “testvar” is run “clickbutton1” is always set to “0” - and the second timeline “animcarre” will never run.

var clickbutton1 = 0; // here's the problem "clickbutton1" will always be "0"

hypeDocument.getElementById('cover').style.display="block";
if (clickbutton1 == 0){

hypeDocument.startTimelineNamed('animrond', hypeDocument.kDirectionForward);
	
clickbutton1++;
console.log (clickbutton1);

}else {
hypeDocument.startTimelineNamed('animcarre', hypeDocument.kDirectionForward);

	clickbutton1--;
}

In my version (please see below) _"window.clickbutton1 = 0;"_ is in the "Head HTML" (found in the "Document Inspector" panel) and removed from the function "testvar". You could also initialize the _"clickbutton1"_ variable in an "On Scene Load" event (in the "Scene Inspector" panel).

The two timelines run alternately (I think this is the effect You want).

test_JHSv1.hype.zip (17.5 KB)


Retrieve a variable
#6

Thank you very much, I begin to understand the logic to be put in place. You helped me a lot. It’s great