Skip to main content
CatSulzmann
Participating Frequently
August 18, 2014
Answered

Mouse click and drag through turntable animation

  • August 18, 2014
  • 1 reply
  • 3681 views

Hi all,

First - thanks for taking the time to look through and possibly helping me with this question.

I'm just getting to grips with flash cc actionscript 3.0 - so I apologise in advance to my not so technical jargon.

In the past I have used actionscript 1.0 to create an interactive html file that contains a turntable animation of a 3D model. Users can mouse click and drag to the left or right to 'spin' the model around - however what they are really doing is scrubing through the timeline which contained 360 images of it from 360 degrees. Similar ideas can be found here: Interactive Thyroidectomy

Now annoying I can't use the old code any more as I'm working in the latest flash cc actionscript 3.0

So how do I do the same thing but in actionscript 3.0?

So I've worked this bit out so far

On my main stage I have two layers - actions layer and another layer with my movie clip (movieclip_mc)

In the actions layer so far:

movieclip_mc.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
movieclip_mc
.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);


function onMouseDown(event:MouseEvent😞void
{
  movieclip_mc
.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
  //I should put something in here about mouseX  - but no idea what

}

function onMouseUp(event:MouseEvent😞void
{
  movieclip_mc
.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
}

function onMouseMove(event:MouseEvent😞void
{  
//I have to put something in about total frames - width of movieclip_mc etc but I'm not sure how   

// this is what someone else did on another forum - but I'm not sure what it means:

     var delta:int = backgroundClip.mouseX - clickedMouseX;
  
var wantedFrame:uint = (clickedFrame + delta * clip.totalFrames / backgroundClip.width) % clip.totalFrames;
  
while (wantedFrame < 1)
  
{  
  wantedFrame
+= clip.totalFrames;
  
}
  clip
.gotoAndStop(wantedFrame);
}

Also I think i need something in the beginning like.....:

import flash.events.MouseEvent;
import flash.display.MovieClip;
import flash.display.Sprite;

var clickedMouseX:int;
var clickedFrame:uint;
var backgroundClip:Sprite = getChildByName("background") as Sprite;
var clip:MovieClip = getChildByName("animation") as MovieClip;
clip
.stop();
clip
.mouseEnabled = false;


.....but I'm a bit confused about what all of it means


So I understand the principle but no idea how to actually make it work - Could anyone help explain it to me or help with the code?

Thanks so much to anyone who can offer some help

Catherine

This topic has been closed for replies.
Correct answer Ned Murphy

I missed replying to your response yesterday though I did see it - I got sidetracked by another chore for the rest of the day.

The AS2 set of code you show most closely fits what you are doing with the AS3 version.  And if you include all of what it entails and change it slightly it should work for you.

Your AS3 onMouseDown function was missing the mouseX code as you indicated... converting it from the AS2 version it would be...

function onMouseDown(event:MouseEvent):void
{

    startX = clip.mouseX;

    startFrame = clip.currentFrame;
   movieclip_mc
.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
}

The onMouseMove function is a bit of a different story since it stops resembling the AS2 version when you bring the background object into the picture.  If you were to model it after the AS2 version you might find it will work.  The AS2 version can be somewhat easily converted to AS3 if you just use the following guide...

"_xmouse" in AS2 becomes "mouseX" in AS3

"_currentframe" is AS2 becomes "currentFrame" in AS3

"_totalframes" in AS2 becomes "totalFrames" in AS3

1 reply

Ned Murphy
Legend
August 18, 2014

It is a little difficult for me to envision the intention mainly because I do not know what the purpose of the backGroundClip is versus the clickedMouseX.  Also I do not understand what defines the clickedMouseX or the clickedFrame values.

The focus point of the movement will be managed in the onMouseMove function.

If you show the Acvtionscript 1 version of the code it might be possible to show you an equivalent in AS3.

CatSulzmann
Participating Frequently
August 18, 2014

Hi Ned,

thanks very much for your reply

I originally followed this tutorial below to achieve the desired effect (sorry actionscript 2.0 - typo)

mc.stop();

var startX:Number;

var startFrame:Number;

var changeDistance:Number;

var travelDistance:Number;

mc.onPress = pressHandler;

mc.onRelease = releaseHandler;

mc.onReleaseOutside = releaseHandler;

function pressHandler():Void {

startX = mc._xmouse;

startFrame = mc._currentframe;

this.onMouseMove = moveHandler;

}

function releaseHandler():Void {

this.onMouseMove = null;

}

function moveHandler():Void {

changeDistance = mc._xmouse - startX;

travelDistance = startFrame + changeDistance;

if (travelDistance > mc._totalframes) {

mc.gotoAndStop(travelDistance % mc._totalframes);

} else if (travelDistance < 0) {

mc.gotoAndStop(mc._totalframes + (travelDistance % mc._totalframes));

} else {

mc.gotoAndStop(travelDistance);

}

}



thank you!!