Not able to make this work

Here is the file.
problem-1.hype.zip (227.1 KB)

I want the card to continue with it’s closing animation. But it does not respond.

And this is the code:

 	let duration_Num = 1 ; // 1 second is the duration of each symbol ; 
 	
 	
 	var currentTime = hypeDocument.currentTimeInTimelineNamed(element.id);
	
	
 	
 	if ( currentTime == 0 )
  	{	
 		hypeDocument.goToTimeInTimelineNamed(0 , element.id);
 		hypeDocument.continueTimelineNamed(element.id, hypeDocument.kDirectionForward, false);
	}
	else
	{
	 	hypeDocument.goToTimeInTimelineNamed(1 , element.id);	
			 
 		 hypeDocument.continueTimelineNamed(element.id, hypeDocument.kDirectionBackward, false);
	
	}

problem-solved.hype.zip (231.0 KB)

1 Like

Thanks h_classen.

However, what I am more interested in knowing is, what is wrong with my code. Why is it not running? You have used reverse direction. But I have added animation for reverse animation. And the code is trying to call that part of the animation. Why is not working?

this constant does not exist hypeDocument.kDirectionBackward
the correct one is hypeDocument.kDirectionReverse

may be someone else steps in to do a walkthrough-analysis …

2 Likes

Ok. Yes. Thanks for pointing it out.

In addition, I also noticed I had a “stop-timeline” function inside the symbol. So instead of calling the timeline from 1.00 , I tried calling it from 1.01

hypeDocument.goToTimeInTimelineNamed(1.01 , element.id);	
		 
 hypeDocument.continueTimelineNamed(element.id, hypeDocument.kDirectionForward, false);

But it was still not working. So I made it 1.02 . And it’s working now.

1 Like

@h_classen used a different approach than You by "reaching inside" the Symbol so to run the Symbol's timeline (i.e. the "Main Timeline") directly...

var currSymbol = hypeDocument.getSymbolInstanceById(element.id);
var currTime = currSymbol.currentTimeInTimelineNamed('Main Timeline')

...snip...

currSymbol.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward);


==========================================================

In addition to the "Backwards" vs "Reverse" scripting that Hans pointed out...

Your approach to run a timeline ("id0") outside of the symbol (and your code) actually runs OK - but there was a "mechanical" flaw with where You placed a timeline "Pause" action - which was inside the Symbol as illustrated below...

18%20PM


When I removed this "Pause" action from inside the Symbol and created a new "Pause" action on the "id0" timeline instead your code worked...

43%20PM



Based on just the needs of this example there was extra code in the "clickCard" function which I removed in the attached demo: problem-1_JHSv1.hype.zip (231.6 KB)


Adjusted code - "clickCard" function
Note: Also removed were unnecessary keyframes for some of the properties in the Symbol.

   var currentTime = hypeDocument.currentTimeInTimelineNamed(element.id);
	
    if (currentTime == 0)
      {hypeDocument.continueTimelineNamed(element.id, hypeDocument.kDirectionForward, false);
    }else{
    hypeDocument.continueTimelineNamed(element.id, hypeDocument.kDirectionReverse, false);
    	}
1 Like

Hi JimScott,
Thanks for explaining everything further and the details. However, why I put the pause function inside was to make a reusable card component, which won't need a separate pause function everytime it' used. So let's say there are 5 cards needed, I just need to put them on the timeline without caring about the pause function to be put when card opens.

Do you still think, this approach can cause problem?

Just FYI:
when working with symbols another approach to target actions within is to use custombehaviours.

you’ll define a custombehaviour within the symbol and call it from whereever you want.

Hypes API also offers an event “HypeTriggerCustomBehavior”. @MaxZieb built some extensions around it: Hype CommandPipeline, Hype GlobalBehavior (Custom Behavior Extension)

@Daniel “HypeTriggerCustomBehavior” and “HypeLayoutRequest” seem to be missing in the documentation …¿

edit: i forgot to add that a custombehaviour does not need to be created before calling via script. so all in all it’s a powerful event-managing-system and plays especially well with the new opportunity to set custom attributes …

1 Like

Direct targeting


In the regular targeting you have a hierarchy and need to query the structure to find are target specific elements. You can use the use individual attributes to do the queries. Some attributes are unique like an ID and hence directly return one result but others like NAME or CLASS might return collections. Once you have got a result or collection you can act on it using it’s full API.


Indirect targeting


You can emit a signal at a specific point and every listener (no matter where in the hierarchy) gets notified. This is a very easy way to trigger stuff. The signals can’t carry any parameters but you can create a signal for every state you want to trigger.

Hope this helps.

2 Likes

wow!

attached a very simplfyied example of how to make use of a custombehaviour triggered event -> to reduce and understand the above abstraction :wink:
cb_messaging.hype.zip (13.6 KB)

4 Likes

Thanks again.
In the file you have shared cb_messaging.hype

What if instead of

  hypeDocument.triggerCustomBehaviorNamed(cardinstance);

I would have had called "window.someFunction"

window.someFunction( hypeDocument, element, event)

Won't it serve the same purpose?

I mean, what is the purpose of making a method triggerCustomBehaviorNamed, when I can call and pass parameters to a function at window level?

Thanks.

Ok, I think I understand it as I have coded using timelines using adobe flash.

In some cases Indirect Targeting is the only option to know what is the state of that symbol. For example, if an animation is running. And I want to set a trigger at 75th frame, so that I can run other code. In this case I must use indirect targeting by dispatching event on 75th frame. I cannot control such animation by direct-targeting.

you should never mess up the window object with custom js if possible.
it’s easy to use hypeDocument or hypeDocument.customdata as a namespace to avoid this. Benefit is that you have access to Hypes Api …

to your question:
there are always different possibilities to solve tasks. event-orientated programming is just one of them and plays good with generic (reuseable) programming

@MaxZieb did a nice Hype-specific introduction in his extension thread …