Skip to main content
H
Hammy511
Participant
May 15, 2017
質問

360º product tour - click/drag mouse rotates product

  • May 15, 2017
  • 返信数 3.
  • 1003 ビュー

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

    このトピックへの返信は締め切られました。

    返信数 3

    H
    Hammy511作成者
    Participant
    May 15, 2017

    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
    Colin Holgate
    Inspiring
    May 15, 2017

    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
      Hammy511作成者
      Participant
      May 16, 2017

      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
      Colin Holgate
      Inspiring
      May 15, 2017

      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
        Colin Holgate
        Inspiring
        May 15, 2017

        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
        Hammy511作成者
        Participant
        May 15, 2017

        Correction: Frames 1 - 80 contain the full rotation

        D
        danielc81823114
        Participating Frequently
        May 15, 2017

        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.

          契約条件Accessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices