Adding simple mouse control to animation on html5 canvas

[Guest]

Hi,

Any advice or pointers would be greatly appreciated. I have a basic animation in a html5 canvas. I need to add basic mouse control, so I can use the mouse to scrub left and right on the finished animation, and maybe zoom in and out. This is a good example but doesn't have to be that complex:

3D Spin Rotate & Zoom 360 product viewer Javascript jQuery VR Objects 360° Reel

I don't have any coding experience, apologies in advance if this is really obvious, but I've been looking online for days for a solution and can't find one.

Thanks,

S

[kglad · Accepted solution]

use the code snippets (windows>code snippets) to see the basic createjs code needed.  then once you have the basics encoded you can return here for more specific help.

[rezun8]

you also may want to look into utilizing Greensock library to accomplish this.

[Guest]

Thanks also rezun, I looked at the greensock website, and this would involve paying for and learning a whole new software application for this one task I need done. It does look like a good solution, but would prove too time consuming

[ClayUUID]

rezun8 wrote:

you also may want to look into utilizing Greensock library to accomplish this.

There is no practical reason to involve a third-party animation library when the built-in EaselJS library is perfectly capable of handling such a trivial animation task.

Samb, what you need to do is grab the current mouse position, then use math to convert the horizontal position into a frame number.

EaselJS Tutorial: Mouse Interaction

[Guest]

Thanks Clay, I'll take a look at this tutorial.

[Guest]

Thanks for your reply kglad. I looked at the creatjs api section under code snippets, and I don't know what they mean or how to use them, I really am just an animator with no knowledge of coding whatsoever. I have a basic animation on one layer of the timeline on an html5 canvas in Animate, and I need to create from it an animation that a mouse can scrub it forward or backward, and also zoom if possible. Any more advice would be much appreciated, I'm really stuck here.

[kglad]

i suggest you google tutorials.  that will take several hours of your time, maybe more, but you'll learn.

otherwise, you're asking for about an hour's worth of work (for me).  some others may do that free of charge for you, but that's beyond my limit for free help.

if you want to hire me, send an email via http://www.kglad.com

or

wait and see if someone else offers to do that for you at no charge.

[Guest]

Hi kglad,

I understand completely, I was asking for pointers to suitable tutorials or advice, not looking for someone to do the work for me. Thanks again, S

[kglad]

if you can get started, we'll help you iron out the problems on this forum.

[Guest]

Thanks kglad, much appreciated.