On touch and on hover interaction

[AlexPromTrad]

Hi all,

I am unable to find an answer to this question when I google it. I probably don't know what to search as I think that my needs are pretty basic.

I have an image that I would like to make interactive.

There is text that needs to trigger an animation on the image either on hover or on touch.

I would like to do this in html 5 so that I can use this image on a website.

I have created all my movie clips, but despite I try, any code that I use won't trigger the play movie clip.

Rather than hints I would like to know if you are aware of such tutorials because I cannot find them.

Thanks in advance 🙂

[kglad]

create a movieclip out the text you want to trigger your movieclip to play and assign it an instance name (eg, text_c):

this.text_mc.addEventListener("click",clickF.bind(this));

function clickF(e){

this.mc.play();  // mc is instance name of movieclip you want to play

}

[AlexPromTrad]

Thanks, unfortunately I am on my first rodeo, this I am afraid is not enough. I'd really like to follow a tutorial 🙂

[kglad]

google tutorials for what you want.

[AlexPromTrad]

As I was explaining in the original message, I am unable to find such tutorial...

Maybe because I don't know the exact terminology that I should use, hence this post.

[Colin Holgate · Accepted solution]

As you said touch and hover, are you using CreateJS to be used on mobile devices? Most tutorials from the past have been for mouse on desktop, and a mouse does have a hover state. Finger may not have those, so you work around that by relying on when the mouse has entered the object.

The EaselJS mouse events article may give you a start:

https://createjs.com/tutorials/Mouse%20Interaction/

You can play with this demo and look at the code. Note how with a mouse the objects do have a rollover effect, but on touch screen they don't:

https://createjs.com/tutorials/Mouse%20Interaction/

[AlexPromTrad]

Thanks, I solved the problem