Highlighted

360º product tour - click/drag mouse rotates product

Community Beginner ,
May 15, 2017

Copy link to clipboard

Copied

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

Views

561

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

360º product tour - click/drag mouse rotates product

Community Beginner ,
May 15, 2017

Copy link to clipboard

Copied

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

Views

562

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 15, 2017 0
Community Beginner ,
May 15, 2017

Copy link to clipboard

Copied

Correction: Frames 1 - 80 contain the full rotation

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 15, 2017 0
Community Beginner ,
May 15, 2017

Copy link to clipboard

Copied

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.

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 15, 2017 1
Adobe Community Professional ,
May 15, 2017

Copy link to clipboard

Copied

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.

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 15, 2017 2
Adobe Community Professional ,
May 15, 2017

Copy link to clipboard

Copied

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.

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 15, 2017 1
Community Beginner ,
May 15, 2017

Copy link to clipboard

Copied

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!

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 15, 2017 0
Adobe Community Professional ,
May 15, 2017

Copy link to clipboard

Copied

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.

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 15, 2017 3
Community Beginner ,
May 16, 2017

Copy link to clipboard

Copied

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

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 16, 2017 0
Adobe Community Professional ,
May 16, 2017

Copy link to clipboard

Copied

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.

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 16, 2017 2
Community Beginner ,
Jun 02, 2020

Copy link to clipboard

Copied

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.

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...
Jun 02, 2020 0
aavp1020 LATEST
Community Beginner ,
Jun 02, 2020

Copy link to clipboard

Copied

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

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...
Jun 02, 2020 0