360º product tour - click/drag mouse rotates product

[Hammy511]

Please help novice... Frames 1 - 225 contain a full 360º rotation of my product. (ignore the pauses in the rotation) the rest of timeline will contain other things such as a beam demonstration drop test etc... Have a quick look at my crude demo so far: Home

My question is, I need to be able to click and drag the product and rotate it as I move the cursor left and right. ie. drag back and forth between frames 1 and 225

Any idea how i would do that? I've been stuck on this for a while now

This is a HTML Canvas but doesn't have to de as long as it's cross compatible with mobile devices

Thanks for your support,

Pascal

[Hammy511]

Correction: Frames 1 - 80 contain the full rotation

[danielc81823114]

I'd expect you'd have to put the product images in a separate graphic, then control what frame that's on using data from the mouse in the main comp.

Not very helpful I know, but might steer you towards an answer.

[Colin Holgate]

Do you have a programmer working on the task? It's not hard to do what you want to do, but it would be easier to explain the approach than to give you all of the code you will need.

In pseudo code it would be like this:

1. When the user presses down, make a note of the X value of where they were.

2. Each time the mouse moves look at how far it moved.

3. Add a scaled number to the current frame. For example, it might feel right if when the user moves 100 pixels that the rotation animation goes forward 20 frames.

4. That new number will be anything from (in my example) -20 to 100. If it's under 0, add 80, if it's over 80, subtract 80.

5. Go to the frame number you just calculated.

[Colin Holgate]

BTW, the approach would work if the rotation frames were inside a symbol too, but it would need to be a movieclip and not a graphic, if you're going to have to tell it to go to the calculated frame.

[Hammy511]

Unfortunately, I am said programmer. I am much more used to a timeline in after effects to be honest.

I've been asked to do this tour but i'm getting out of my depth now. I've done some coding here and there but only really by trial and error and copy pasting snippets.

I'm pleased to hear that it is possible so i know i'll get there in the end - the above is a great start, thanks!

[Colin Holgate]

I went ahead and made a demo for you. It's online here:

rotatedemo

and here's a zip file of the FLA:

http://colin.scienceninja.com/rotator.zip

Don't worry if you see a message about it being created in a later version than you're using.

The rotating arrow is just an 80 frame animation like yours. You should be able to copy and paste my code in the first frame of your animation. The 'hittest' being referred to is a large button that sits on top of the whole stage. You could copy and page my script layer and the hittest btn layer into your FLA, or replace my arrow rotation with your animation frames.

[Hammy511]

Thanks so much! I'm really busy today but hopefully will have time later on or tomorrow to transfer this to my animation.

[Colin Holgate]

Did you try the online demo to see that it works? You're going to need to know some HTML and CSS things to make the page not scroll when you drag on mobile.

Actually, I'll add those to my demo, so you can see what's needed.

[aavp1020]

Hi Colin_Holdate
I am also looking same result which you "rotatedemo" is showing but using 60 frames inside movieclip. on stage timeline there will be only one frame.

Is there any way you can help me with this?

Thanks in advance.

[aavp1020]

Never mind. Your code is perfectly work with my needs.