Free Template Tuesday #2 – Tumult Hype “Looking”

Looking Template ThumbnailThe mobile phone defines the modern era. People can send messages to each other – almost instantaneously – to locations far away. With this amazing technology, what to people send? Quite often, people send emoji – a bright, yellow, and usually smiling, face. A lot of people despise emoji. Not me. I think they’re cute. It’s a way to express emotion, which is an important part of communication. Letters alone don’t always properly portray emotion. It’s the same with your Hype projects. Does the interactivity and animation match the feeling that you’re trying to create?

That’s what this week’s free Hype template is about. Facial expressions are a way to portray emotion. That’s why eye contact is so important. It’s a way to read the way a person is feeling. It gives insight into what they’re thinking. So, what is this face saying?

Expand View

The way the eyes look at the mouse (or touchpoint) creates a whimsical feeling. It’s silly, goofy, funny and it can make people smile. The problem is that this type of interactivity is not possible with the Hype Timeline. Instead, JavaScript is used.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

window.onmousemove = function (event) {
 
var mx = event.clientX; // Mouse X
var my = event.clientY; // Mouse Y
 
var eLefty = hypeDocument.getElementById("lefty");
var eRighty = hypeDocument.getElementById("righty");
 
// console.log(hypeDocument.getElementById("lefty").style.left)
// console.log(hypeDocument.getElementProperty(eLefty, "left"))
// console.log(eLefty.getBoundingClientRect().left)
 
var lx = eLefty.getBoundingClientRect().left + (eLefty.getBoundingClientRect().width / 2);
var ly = eLefty.getBoundingClientRect().top + (eLefty.getBoundingClientRect().height / 2);
var rx = eRighty.getBoundingClientRect().left + (eRighty.getBoundingClientRect().width / 2);
var ry = eRighty.getBoundingClientRect().top + (eRighty.getBoundingClientRect().height / 2);
 
var angle = Math.atan2((my - ly), (mx - lx)) * (180 / Math.PI); // AHHHH MATH!
hypeDocument.setElementProperty(eLefty, "rotateZ", angle) // Rotate the left eye
 
angle = Math.atan2((my - ry), (mx - rx)) * (180 / Math.PI); // AHHHH MATH!
hypeDocument.setElementProperty(eRighty, "rotateZ", angle) // Rotate the right eye
 
}

Using an “onmousemove” event, the X & Y location of the mouse is stored. The “mx” variable saves the “X” location and the “my” variable saves the “Y” location. Whenever the mouse is moved, the function is executed and the variables are updated. The eyes are moved separately. That’s the difference between “lx” / “ly” (left) and “rx” / “ry” (right). The “gx” and “gy” variables store the location of the “group” element. This value is used with centering the face. In the Hype project, the face is always centered. By keeping track of the location of the group, the direction of the eyes can be aligned with the location of the mouse – regardless of the width or height of the project.

While “onmousemove” is the JavaScript event, this also works with touch devices. (Mobile phones usually don’t have a mouse.) The eyes will turn to face the location of a tap.

Once the X & Y locations of the mouse, the eyes and the group are known, it’s just a matter of some math. Difference between the mouse location, and the location of an eye, is converted to an “angle”. The eyes are then rotated to that angle with JavaScript.

The trick is to set the “Unique Element ID” in the “Identity” section of the “Inspector” panel. The “left” eye can be moved separately from the “right” eye.

You can get a better look at the code by downloading the “Looking” Hype Template.

If this stuff seems complicated to you, you’re right. It is! This week’s template is far more difficult than last week’s “Coconut” template. That’s why I wrote “A Book About Hype“. It covers some basic JavaScript and working with Hype’s JavaScript API. This topic can be challenging for those not used to programming, but it’s an important skill for today’s web developers and designers to have. The “looking” template shows the potential of Hype, just by adding little bit of JavaScript.

The “Looking” template is also the topic of a YouTube video on Photics.TV