• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Mouse click and drag through turntable animation

Explorer ,
Aug 18, 2014 Aug 18, 2014

Copy link to clipboard

Copied

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

TOPICS
ActionScript

Views

2.9K

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
community guidelines

correct answers 1 Correct answer

LEGEND , Aug 19, 2014 Aug 19, 2014

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;

...

Votes

Translate

Translate
LEGEND ,
Aug 18, 2014 Aug 18, 2014

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Explorer ,
Aug 18, 2014 Aug 18, 2014

Copy link to clipboard

Copied

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!!

Votes

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
community guidelines
Explorer ,
Aug 19, 2014 Aug 19, 2014

Copy link to clipboard

Copied

Hi Ned,

I found a action script 1 version that might help

onClipEvent (mouseDown) {

flag = true;

}

onClipEvent (mouseUp) {

flag = false;

}

onClipEvent (mouseMove) {

     if (flag) {

          xmouse = _root._xmouse;

               if ( (xmouse - last xmouse >0) {

                         this.gotoAndStop (this._currentframe + 1);

               } else{

                         this.gotoAndStop (this._currentframe - 1);

               }

                last Xmouse = xmouse;

}

}

Thank you

Votes

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
community guidelines
LEGEND ,
Aug 19, 2014 Aug 19, 2014

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Explorer ,
Aug 19, 2014 Aug 19, 2014

Copy link to clipboard

Copied

Hi Ned,

Thanks for your reply.

So I popped it all in - but its still not working. the movie clip carries on playing and the mouse has no effect - do i need to add more stuff to the beginning such as the var bit or import flash bit.

Also the word 'clip' - does this need to refer to something or is this action script jargon?

I've named my movie clip just 'movieclip' should i have labelled the frame it's on too?

here is what i have so far:

import flash.event.MouseEvent;

import flash.display.MovieClip;

import flash.events.MouseEvent;

var startX:Number;

var startFrame:Number;

var changeDistance:Number;

var travelDistance:Number;

movieclip.stop();

movieclip.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);

movieclip.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);

function onMouseDown(event: MouseEvent): void

{

  startX=clip.mouseX;

  startFrame = clip.currentFrame

  movieclip.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);

}

function onMouseUp(event:MouseEvent):void

{

  movieclip.removeEventListener (MouseEvent.MOUSE_MOVE, onMouseMove);

}

function onMouseMove(event.MouseEvent):void

{

  changeDistance = movieclip_mouseX-startX;

  travelDistance = startFrame +changeDistance;

  if (travelDistance > movieclip_totalFrames){

  movieclip.gotoAndStop(travelDistance % movieclip_totalFrames);

  }else if (travelDistance < 0){

  movieclip.gotoAndStop (movieclip_totalFrames + (travelDistance % movieclip_totalFrames));

  } else {

  movieclip.gotoAndStop(travelDistance);

  }

}

thanks so much for your help - really appreciate your time.

Votes

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
community guidelines
Explorer ,
Aug 19, 2014 Aug 19, 2014

Copy link to clipboard

Copied

GOT IT

While playing around with the code I managed to make it work.... here it is

import flash.events.MouseEvent;

import flash.display.MovieClip;

import flash.events.MouseEvent;

var startX: Number;

var startFrame: Number;

var changeDistance: Number;

var travelDistance: Number;

movieclip.stop();

movieclip.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);

movieclip.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);

function onMouseDown(event: MouseEvent): void {

  trace("mouseDown");

  startX = movieclip.mouseX;

  startFrame = movieclip.currentFrame;

  movieclip.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);

}

function onMouseUp(event: MouseEvent): void {

  trace("mouseUp");

  movieclip.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);

}

function onMouseMove(event:MouseEvent): void {

  movieclip.gotoAndStop(Math.round(mouseX/movieclip.width*(movieclip.totalFrames-1))+1 )

}

phew

thanks Ned for your help - it was great to know I was on the right lines. Like you said - just apply AS2 with some edits and it worked

Votes

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
community guidelines
LEGEND ,
Aug 20, 2014 Aug 20, 2014

Copy link to clipboard

Copied

Yes, your first attempt didn't change the terms as I had indicated, but your second version did it properly.

Votes

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
community guidelines
Explorer ,
Aug 22, 2014 Aug 22, 2014

Copy link to clipboard

Copied

Hi Ned,

sorry to bother you again on this subject -

the script...

function onMouseMove(event:MouseEvent): void {

  movieclip.gotoAndStop(Math.round(mouseX/movieclip.width*(movieclip.totalFrames-1))+1 )

}

worked fine - but when you click and drag on the movie clip it didn't always get to the end of the movie and never carried on through the frames back to the beginning like i wanted it to (such as this one does Interactive Thyroidectomy)

So I went back to the older 2.0 script and played with it a bit to be :

function onMouseMove(event:MouseEvent): void {

  changeDistance = movieclip.mouseX - startX;

  travelDistance = startFrame + changeDistance;

  if (travelDistance > movieclip.totalFrames) {

  movieclip.gotoAndStop (travelDistance % movieclip.totalFrames);

  } else if (travelDistance < 0) {

  movieclip.gotoAndStop (movieclip.totalFrames + (travelDistance % movieclip.totalFrames));

  } else {

  movieclip.gotoAndStop (travelDistance);

  }

}

.... which almost works but it is very stuttery to mouse over and then it has this output error..

mouseDown

ArgumentError: Error #2109: Frame label 2.3500000000000227 not found in scene 2.3500000000000227.

  at flash.display::MovieClip/gotoAndStop()

  at flashdoc_fla::MainTimeline/onMouseMove()

ArgumentError: Error #2109: Frame label 3.6499999999999773 not found in scene 3.6499999999999773.

  at flash.display::MovieClip/gotoAndStop()

  at flashdoc_fla::MainTimeline/onMouseMove()

ArgumentError: Error #2109: Frame label 4.949999999999989 not found in scene 4.949999999999989.

  at flash.display::MovieClip/gotoAndStop()

  at flashdoc_fla::MainTimeline/onMouseMove()

ArgumentError: Error #2109: Frame label 6.25 not found in scene 6.25.

  at flash.display::MovieClip/gotoAndStop()

  at flashdoc_fla::MainTimeline/onMouseMove()

ArgumentError: Error #2109: Frame label 7.600000000000023 not found in scene 7.600000000000023.

  at flash.display::MovieClip/gotoAndStop()

  at flashdoc_fla::MainTimeline/onMouseMove()

ArgumentError: Error #2109: Frame label 8.899999999999977 not found in scene 8.899999999999977.

  at flash.display::MovieClip/gotoAndStop()

  at flashdoc_fla::MainTimeline/onMouseMove()

ArgumentError: Error #2109: Frame label 11.5 not found in scene 11.5.

  at flash.display::MovieClip/gotoAndStop()

  at flashdoc_fla::MainTimeline/onMouseMove()

ArgumentError: Error #2109: Frame label 12.850000000000023 not found in scene 12.850000000000023.

  at flash.display::MovieClip/gotoAndStop()

  at flashdoc_fla::MainTimeline/onMouseMove()

ArgumentError: Error #2109: Frame label 14.149999999999977 not found in scene 14.149999999999977.

  at flash.display::MovieClip/gotoAndStop()

  at flashdoc_fla::MainTimeline/onMouseMove()

ArgumentError: Error #2109: Frame label 15.449999999999989 not found in scene 15.449999999999989.

  at flash.display::MovieClip/gotoAndStop()

  at flashdoc_fla::MainTimeline/onMouseMove()

ArgumentError: Error #2109: Frame label 16.75 not found in scene 16.75.

  at flash.display::MovieClip/gotoAndStop()

  at flashdoc_fla::MainTimeline/onMouseMove()

mouseUp

I've obviously put some code in the wrong place - could you help me find out what it might be?

I haven't labelled any frames odd numbers such as 15.4499999999999989 or labeled scenes than number either.

I can send you my scene if that would help?

Thanks very much for your time Ned

(p.s Or maybe if it is easier you might offer some guidance as to how i can change the action script

function onMouseMove(event:MouseEvent): void {

  movieclip.gotoAndStop(Math.round(mouseX/movieclip.width*(movieclip.totalFrames-1))+1 )

}

to allow it to be more like Interactive Thyroidectomy

Votes

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
community guidelines
New Here ,
Aug 10, 2020 Aug 10, 2020

Copy link to clipboard

Copied

LATEST

Old post, but just in case anyone runs across this looking for answers like I did:

 

To answer the question about errors, 

e.g. "Frame label 2.3500000000000227 not found in scene", the frame needs to be a whole number. Use Math.round in the code to avoid all the decimals.

 

Also, I had to modify part of the earlier posted code to account for a missed frame in the rotation. While rotating after one full turn, the frames would try to do: 1, 2, 3, 0, 1, 2, ... when the 0 should be 4. Here's what worked for me:

 

 

 

 

function mouseMove(e: MouseEvent):void {
	changeDistance = Math.round((mc.mouseX - startX)/sensitivity);
	travelDistance = startFrame + changeDistance;
	if (travelDistance > mc.totalFrames) {
		desiredFrame = travelDistance % mc.totalFrames;
	} else if (travelDistance < 0) {
		desiredFrame = Math.round(mc.totalFrames + (travelDistance % mc.totalFrames));
	} else {
		desiredFrame = Math.round(travelDistance);
	}
	if (desiredFrame == 0){desiredFrame = mc.totalFrames;} //if desired frame 0, give last frame.
	if (mc.currentFrame != desiredFrame){
		// trace("Current frame: "+mc.currentFrame+"  Desired frame: "+desiredFrame);
		mc.gotoAndStop(desiredFrame);
	}
}

 

 

 

Votes

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
community guidelines