How to use "Trigger Custom Behavior"

Symbols
1

Hi!

Hype Pro is fun! Thanks!

I have not seen any documents about "Trigger Custom Behavior"
and google “hype Trigger Custom Behavior” , it has some info but the link takes me to document of Hype 2.5
is it a new function?

Shong

1 Like
2

This section of the Symbols video demonstrates Custom Behaviors and how to trigger them. They first need to be defined (at the 1:34 mark):

Here’s more detail on Custom Behaviors and how they work with Symbols, Scenes, and Timelines:

4 Likes
3

AMAZING!!!
For the video and the speed you reply.
Appreciate.
Shong-

1 Like
4

Is there any documentation for how to trigger custom behaviour using javascript?

Since there is no double click option, I’m using this javascript:

hypeDocument.getElementById(‘TriggerName’).ondblclick=function(){
// Do custom behaviour
};

However I’m not sure how to trigger the custom behaviour I’ve defined.

1 Like
5

guess the only way is to bind your custombehaviour to a timeline and then execute this via js.

6

Sorry the documentation is missing : (

It should be on our site (http://tumult.com/hype/documentation/3.0/#javascript) and in the in app documentation, but it is currently hidden.

Here it is:

hypeDocument.triggerCustomBehaviorNamed('customBehaviorName');

Informs any elements which have a custom behavior with customBehaviorName to run its actions.

3 Likes
7

Awesome, thanks Stephen. Got it working now! :smile: Just remember those quotes around the ‘customBehaviorName’.

hypeDocument.getElementById('Trigger1').ondblclick=function(){
hypeDocument.triggerCustomBehaviorNamed('Action1');
};
2 Likes
8

Thanks Mike! I will update our documentation as well...

9

Along this same thing, If we wanted a specific phrase that the user types to trigger custom js function, how would we do this? For example, we want the user to type “donate” and then the custom behavior begins.

10

It depends on the method in which they type the phrase. Are you using a text input box or a javascript prompt? If you’re using a prompt it would look something like:

var responseText = prompt("Type 'donate' to be a good person");

if(responseText != null && responseText.toLowerCase() == "donate") {
	hypeDocument.triggerCustomBehaviorNamed('Action1');
}

If you’re using an input box, you’d get the responseText differently:

var responseText = document.getElementById("myTextBox").value;

if(responseText != null && responseText.toLowerCase() == "donate") {
	hypeDocument.triggerCustomBehaviorNamed('Action1');
}
2 Likes
11

So I’m trying to do a similar thing to Courtney. I want to check the information that a user is inputting into a password box and once the inputting info hits 6 characters, I want to display a checkmark animation (activate a timeline). I have a custom behavior within the symbol that contains the password form and it checks the character count and displays the animation, however in order to activate that custom behavior, I have an event on the main timeline that triggers the custom behavior. However, it only triggers the custom behavior 1 time. Thus, in order to check the character count, I have to activate the timeline over and over manually in order to rerun the code. Thoughts?

12

You could run a ‘keyup’ action (In the Action inspector) which will detect the length of that input field:

var value = document.getElementById('inputformID').value;
 if (value.length > 5) {
   // show checkmark 
 }

The ‘keyup’ will trigger when a key has been pressed already, so it should correspond to the input length of that form.

Then you can start a Symbol’s timeline or run an other action. This function might be useful: http://tumult.com/hype/documentation/3.0/#startTimelineNamedSymbol

2 Likes
13

Ended up doing just this while waiting for a response. Functions perfectly. Thank you for the solid help!

14

Here’s a more detailed video on Custom Behaviors:

3 Likes
15

great, the most important is that the guy looks handsome…:slight_smile:

16

Hello @Daniel,

I would like to study custom behaviors on these cases carefully in your video, are those case projects are available to download?
I mean this example: africa-responsive

Thanks a lot.

Alex