Hype GlobalBehavior

In Hype every symbol, button or timeline can listen and broadcast Custom Behavior. It's much like priming a bunch of kids to listen to the word stop and to tell them to stop dancing when they hear it. This is a decentralized way to trigger actions as the broadcaster (such as a button) doesn't have to know which symbols or timelines are listening and vice versa the listener don't need to know who is sending. They just react and do their bidding.

A while back I wanted to explain Custom Behavior along the lines of Twitter. In this analogy every Custom Behavior is a "tweet". In Twitter you just talk into an empty room and other people listen to all the chatter and filter it based on mentions (@username) and topics (#hashtags). I think this analogy is very powerful and I wanted to take it a step further as one could argue that in a multi Hype-Widget enviroment every widget is a participant and could send messages across the whole HTML-Page rather than only inside a single Hype-Widget.

To create this distributed enviroment I came up with the following twitter similar rules:

• Send any Custom Behavior as regular, for example RedAlert.
• You can of course still listen to the regular Custom Behavior RedAlert but you will only receive it inside the widget it originated in. This is the way you already used Custom Behavior so far.
• New: Listen to the "hashtag" to get any notification among all independant Hype-Widgets residing on the page. Hype GlobalBehavior forwards the Custom Behavior to all widgets as a "hastag" in this case #RedAlert (Custom Behavior with a "#" attached infront). To listen to this "hashtag" is from the prefered way of interaction using this extension.
• New: Target specific widgets by name with "@{widgetName}" attached to the command. So to send a command to HypeWidget1 you would trigger the Custom Behavior ReadAlert@HypeWidget1.
• New: Target multiple widgets by name ReadAlert@HypeWidget1@HypeWidget2.
• New: Trigger any Custom Behavior through pure JS from outside the widgets. Let's fire the command using a HTML-button RedAlert@HypeWidget3 and the revert the status DisableRedAlert@HypeWidget3. The first button is accomplished with the following code:

<button onclick="HypeGlobalBehavior.triggerCustomBehaviorNamed('RedAlert@HypeWidget3');">Label</button>

• New: Expert: Receive any Custom Behavior through a widget specific JS-function. Put the following code in a function inside Hype. Beware that you should only define this handler once as subsequent definitions overwrite the behavior. Although this simplification could be also leveraged to change the handling per scene for example (given each scene defines it's own handler).

	hypeDocument.onGlobalBehavior = function(behavior) {
		switch (behavior) {
			case "#ShowCat":
				var cat = hypeDocument.getElementById('cat');
				hypeDocument.setElementProperty(cat, 'top', 10, 1.0, 'easeinout');
				hypeDocument.setElementProperty(cat, 'left', 40, 1.0, 'easeinout');
				break;
				
			case "#HideCat":
				var cat = hypeDocument.getElementById('cat');
				hypeDocument.setElementProperty(cat, 'top', 100, 1.0, 'easeinout');
				hypeDocument.setElementProperty(cat, 'left', 70, 1.0, 'easeinout');
				break;
		}
	}

• I defined the previous function in HypeWidget3 so let's trigger it … ShowCat@HypeWidget3 and HideCat@HypeWidget3
• New: Receive any Custom Behavior on a Hype-widget embeded in an iFrame (same domain and across domains). Meaning as long as the widget includes the script (Head-HTML or HypeGlobalBehavior.js) it is part of the widget network and can receive commands. This goes both ways from iFrames to Parent and vice versa. The nesting depth isn't an issue either as long as each level includes the script.


Widget:RedAlert@HypeWidget4 DisableRedAlert@HypeWidget4
Global:RedAlert DisableRedAlert

• New: Custom Behavior Ticker. Setup repeating broadcast of behavior across the network of Hype files.
From page context: HypeGlobalBehavior.startCustomBehaviorTicker('ticktack', 1) HypeGlobalBehavior.stopCustomBehaviorTicker('ticktack')