Drawing or tracing lines in Hype




Is there any way I can add a drawing function? I am creating a Kindle book and I would like the users to trace some lines in their tablet or computer. I am attaching an image of the first page of the book.

Thank you very much!

Drag and Swipe Actions for Controlling Scenes and Timelines

Maybe use a drag and drop function.


Hello Djon,

Could you put me an example please?



Take a look at the link I provided. I presumed that it would be necessary that something will,happen when they drew the line?
Otherwise you can create a dashed line with a timeline. Click on the kangaroo and let the line move to the laptop.


Exactly, it would be necessary that something will happen when they drew the line. How could I do that with the drag and drop function? I looked at the link you sent me, but I am still confused on how to make that happen.

Thanks for your help!


The basic principle for this is that you want to create a timeline that shows an element appearing, so creating an element above your dotted line that animates to become smaller is one way to do this. You can control that element by using a drag action:

Check out the attached document:

drag-draw-demo.zip (12.0 KB)


or something like this
dragstart.hype.zip (16.5 KB)


Hello Djon, Daniel,

This could work for me but how can I give limitations to the user? This activity is for little kids to learn how to write, the first exercise, the one I posted is to learn how to trace a line. So I would like them to move the square vertically to reach the object. You know what I am saying? Like the next exercise would be to trace curve lines, and then circles, etc.
Is there a way I can do this with Hype? I was looking into http://literallycanvas.com/ and add the image as the background, but how could I do this with Hype?

(Hans-Gerd Claßen) #9


so if you wanna use the canvas-element you’ll have to script it yourself … (or use a library of course …)

the hypefile is stored at hypedocks


Hello Hans,

How can I substitute the bus background image with mine?



Bus? You can replace images in the resource library by selecting the image, and clicking ‘replace’ at the bottom: http://tumult.com/hype/documentation/3.0/#resources