Drawing or tracing lines in Hype

[carla]

Hello,

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!
Carla

[Djon]

Maybe use a drag and drop function.

Drag and Swipe Actions for Controlling Scenes and Timelines

Tumult Hype supports a large number of actions for mobile devices: Mouse Touch Actions: Mouse Click (Tap) — A complete click (a mouse down followed by mouse up) has been completed. Mouse Down (Touch Start) — Once the pointing device has been depressed on the element. Mouse Up (Touch End) — The mouse button has been released after being pressed. Mouse Over — The cursor has entered the bounds of the element. Mouse Out — The cursor is no longer within the bounds of the element. On Drag — A …

[carla]

Hello Djon,

Could you put me an example please?

Thanks!
Carla

[Djon]

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.

[carla]

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!

[Daniel]

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)

[Djon]

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

[carla]

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?

[h_classen (Hans-Gerd Claßen)]

hi,

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

the hypefile is stored at hypedocks

[carla]

Hello Hans,

How can I substitute the bus background image with mine?

Thanks,
Carla

[Daniel]

@carla

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: Tumult Hype Documentation