Restricting movement

1

I am an elementary school teacher and I am trying to use Hype for a temperature project for 3rd graders. I have a red temperature bar that I want the students to move up and down on the web page. I want to restrict the movement so that it can not be moved horizontally and can only be moved vertically so far up and down.
Can I do that in Hype? Thank you.

1 Like
2

  1. Easiest Hype way: create the whole slider as a animation and add a action to touch/click to control the timeline. No JS required.

  2. More Complicated Hype way: use a drag action and set the one axis you want to lock with the hypeDocument.setElementProperty

  3. Use a slider made in HTML and Styles with CSS @daniel posted a example recently

2 Likes
3

Thank you!

4

To keep this all in Hype, the first thing you would do is create your animation which represents the thermometer’s movement – this would just be a regular animation that sets an initial position of the thermometer, and the final position. Set the ‘easing’ property to ‘Linear’ for any animations so that your ‘Drag’ action corresponds to the Y axis value you’re dragging from/to.

Next, set a timeline action to ‘pause’ the timeline so that your animation (if it is on the Main Timeline) doesn’t start when you load the scene.

Then, it’s just a matter of choosing what you want to be draggable, and linking that up to a Drag action. The ‘draggable’ element also needs to be on the same timeline so that it moves along your predefined path. Setting ‘axis’ to vertical will restrict movement in the way you’re hoping for:

20%20PM

Here’s everything put together:

Screen+Recording+2019-12-19+at+12.46+PM.gif863×791 442 KB

Here’s a quick demo:

thermometer.hype.zip (85.6 KB)

2 Likes
5

Thank you. I did get it to work with your instructions.
http://rwxinc.com/huemanns/temperature.html

4 Likes
6

Nice job! You should be able to adjust the Speed for the On Drag to have a better match between the mouse cursor and arrow. (A speed of 100% means that 100px of movement will advance the timeline 1 second)

7

Fantastic! Thank you for that suggestions Jonathan. Gives it a much better feel too. Thanks!

1 Like
8

I wanted to try to just have the red bar and not the arrow. But I could not get it to work so that you just drag it. I will keep trying.

9

Never mind. I just got it to work. Thank you!

2 Likes