Draw and interact

(Lalire) #1

Hi ! I am a magician and I use Hype to interact with virtual objects, love you app. But I would like to create an app on Android using phonegap to do something like that : https://www.youtube.com/watch?v=pIS04WDonvE
And I have few questions :
How can I make an object appear where I want (like on the video with the flowers) by touching the screen.
How can I draw a line and make it like a floor (so draw a static line)
And is it possible to draw something and give an animation (like the eyes in the video).

I think I will need to use javascript but I don’t know anything about that…

(Trey Yancy) #2

One can do just about anything with a video, but when using static objects in an app like Hype, it takes some 3-D thinking about how to stack things and what each layer needs to to.

The key issue with the eye animation in Hype is the masking. Hype only allows masking with its stock shapes (Metrics > Content Overflow > Hidden). Otherwise, you would need to use a PNG with transparency. As the dark area is like a shadow, multiplying against the background, this could be done with a semi-transparent PNG, but the transparency would be an issue with the eye, which would call for an additional solution just for the eye.

For the eye, I would bring the brick wall into Photoshop, dupe it for the background, and create the dark overlay with the oval cutout, then, swap images in Hype when the rotation is complete by duping the background and dark overlay, merging them, then create the cutout for the eye. In Hype you would have the brick background and the dark overlay, and the composite with the mask aligned but with an opacity of 0. When the rotation is finished, turn on the composite mask and the yellow iris. Naturally, the hand would provide another layer of complexity; particularly the pinching. You could try a hand pointing with an index finger, dupe it and flip one, then use them in tandem to create the rotation and pinching.

(Lalire) #3

Hi ! Thank you for your answer ! My problem is that I want the animation plays where I touch the screen, and not only when ! I thought to use a time line, with different animations, waiting for clicks but I need to trigger the right place (where the finger touch !). I’m not sure that’s clear…

(Trey Yancy) #4

You can create a grid of invisible objects in front of the other content that can be used to trigger animations at touch start and mouse down. If you need to identify specific X and Y coordinates of a touch / mouseDown you would need to use JS.

(Jonathan Deutsch) #5

Hype may be able to supplement and make things easier for trying to accomplish interactivity and animations in the above video, but to second the thought, you’ll ultimately need to learn JavaScript to accomplish this. The demo has “magic” in its name, and any new, open-ended behaviors like this example require programming and logic to be on the forefront.

Hype’s JavaScript API does provide ways to get positions and states for On Drag actions, and then you could also interactively trigger animations.

(Lalire) #6

Thank you ! I knew that I should begin learning JS… that’s sound complicate for me ! If you have some links about what I need it should be great ! Or if you know someone who can create some js for me (even if I need to pay, of course !) it would be great !


Searching the forum is a start but I would start creating the basis in Hype if I were you and then come back when you need some JS help. So, set up what you need visually and then come and ask for help with the logic.

(Lalire) #8

Hi ! Here a quick example ! We touch the circles and the flowers pop. I would like to be able to make the flowers appear where I touch the screen, so I wouldn’t need the circles anymore as a target (in that example !) flower.hype.zip (151.4 KB)
But It would be better to do the same thing with video with alpha channel but I know this is tricky on the web (I’ve read a lot of articles on your forum about that.)
Any idea for my question ?

(Mark Hunte) #9

It has been said above, JS is going to be needed for this.

I would normally suggest using JS to clone elements and then place them. But that is complex.

using minimal JS and not too complex you can get a basic idea.

This example i have made a fleur into a Symbol. Then duplicated it ten times.
Each symbol has a class Name
When the scene loads a javascript function will run.

	window.fleur = document.querySelectorAll('.fleur'); // fleur array
	window.clickCounter = window.fleur.length -1 // counter

The function just collects a reference to the symbol elements in an Array and puts the refs in a global variable that we use later.

It also creates a global variable as counter that we use to iterate each Symbol element. (This holds the number of elements)

On the scene I have placed a rectangle element that covers the whole scene.
This rectangle is what we click on. This will make it easier to register a click or touch using the built in Actions of Hype instead of writing JS to detect them.

When the Rectangle is clicked a second Javascript function is run.

	if ( window.clickCounter > 0){
	var thisFleur = window.fleur[window.clickCounter] // fleur to move
	fleurWidth = hypeDocument.getElementProperty(thisFleur, 'width')
	fleurHeight = hypeDocument.getElementProperty(thisFleur, 'height')
	var xPosition = event.offsetX  -   (fleurWidth/2)  // the events clicked position on the scene. (minus the width & Height of the element divided by 2, to center the element on the click)
    var yPosition =event.offsetY -  (fleurHeight/2)
		window.clickCounter-- ;// deduct 1 from the counter
  hypeDocument.setElementProperty(thisFleur, 'left', xPosition)
hypeDocument.setElementProperty(thisFleur, 'top', yPosition)

hypeDocument.setElementProperty(thisFleur, 'opacity', 1, 1.0, 'easeinout')

This will get the position of the mouse click.
It will then move one of the fleur elements to that position and show it.

We use the counter to work out which elements we move and show. The counter is then told to count down.

There is still much you need to understand about the JS in this example

look up javascrript and any of the words in bold.

flower_MHv1.hype 2.zip (136.1 KB)


I think he wants this to work on mobile. The above will only work on Desktop :slight_smile:

Here is a version which takes on board Mark’s idea of having a counter to control which “fleurs” are shown. Currently only 2 flowers but can add more with id’s incremented.


flower-vDBear1.hype.zip (140.9 KB)

It uses a scaling extension to make it responsive and touch events if on mobile.


(Lalire) #11

Thank you so much ! I will play with it and try to understand how can I combine it with timelines. But that was the idea !!


You can play timelines at any time. If you wanted to play one after 2 flowers are shown you can place a


where the logic says if(counter > 1)... This means if flower1 has been revealed start this timeline on the next press.

The listener for the ‘touchstart’ is always listening so you can play a timeline before if you so wish and just press when you want the flowers to reveal themselves.

(Mark Hunte) #13

Good point, I think it just need the


to change to


And touch Action instead of Mouse click.

See you did that.

if (event.type === "touchstart"){
			posx = (event.touches[0].pageX - getDimensions(flower).width /2) / getMultiplier();
			posy = (event.touches[0].pageY - getDimensions(flower).height /2) /  getMultiplier();
		} else {
			posx = event.offsetX - getDimensions(flower).width /2;
			posy = event.offsetY - getDimensions(flower).height /2;



It’ll get a bit more complicated when using different size devices too :wink: as pageX doesn’t play as well as offsetX.

As an FYI it’s probably better to use Mark’s class approach too, to avoid ID issues or to free up the ID input

(Lalire) #15

Thank you !!! I have to try now ! I will start tomorrow !
DBear or MarkHunte, do you work as a freelance ? Because I can manage with your tips for simple things like that but I would be interested to create things more complicated and I know that you could do it so quickly !! if you like the idea, feel free to contact me ! My website : www.romainlalire.com . Everything is in French but there is a lot of videos on my portfolio :wink:
Thank you again for your answers, that’s really help !!

(Hans-Gerd Claßen) #16

hi there : unexpected flowergrowth when clicking twice the same position … the second is growing top left.

well done :slight_smile:


fixed :stuck_out_tongue_winking_eye:

By the way, this is just an example not a complete solution so any bugs, I’m not gonna fix :stuck_out_tongue: :stuck_out_tongue: :slight_smile:


flower-vDBear1.1.zip (137.1 KB)


Thank you!

(Hans-Gerd Claßen) #19

exact this’ll be the inquiry … just wait and see :wink:

(Lalire) #20

Hi ! I have a strange problem because the project (and the new one 1.1) doesn’t work… When I click, nothing happens… Do I have to change something ?