Highlighted

On touch and on hover interaction

Explorer ,
May 18, 2020

Copy link to clipboard

Copied

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 🙂

Adobe Community Professional
Correct answer by Colin Holgate | Adobe Community Professional

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/

Views

1.5K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

On touch and on hover interaction

Explorer ,
May 18, 2020

Copy link to clipboard

Copied

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 🙂

Adobe Community Professional
Correct answer by Colin Holgate | Adobe Community Professional

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/

Views

1.5K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 18, 2020 0
Adobe Community Professional ,
May 18, 2020

Copy link to clipboard

Copied

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

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 18, 2020 0
Explorer ,
May 18, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 18, 2020 0
Adobe Community Professional ,
May 18, 2020

Copy link to clipboard

Copied

google tutorials for what you want.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 18, 2020 0
Explorer ,
May 18, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 18, 2020 0
Adobe Community Professional ,
May 19, 2020

Copy link to clipboard

Copied

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/

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 19, 2020 0
Explorer ,
May 19, 2020

Copy link to clipboard

Copied

Thanks, I solved the problem

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 19, 2020 0