360º product tour - click/drag mouse rotates product

Forum|Forum|8 years ago
May 15, 2017
3 replies
1002 views

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

This topic has been closed for replies.

H

Hammy511Author

Participant

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

Inspiring

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.

H

Hammy511Author

Participant

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

Inspiring

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

Inspiring

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.

H

Hammy511Author

Participant

Correction: Frames 1 - 80 contain the full rotation