Need help with 3D carousel gallery rotation to a specific angle

[MaarjaK]

Hi,

I am making a 3d gallery, that has a menu underneath it. When clicking to a menu link, the gallery will rotate itself to a certain angle (photo) connected with the menu link. I am using FlashAndMaths 3D cylindrical gallery scripts (XML Customizable 3D Cylindrical Photo Gallery in Flash) as the base (as I couldn't find any free or neither payed 3d galleries that would have a menu connected to the carousel!).

The function to rotate a carousel of thumbnails is the following:

public function doRotate(ang:Number):void {   

            if(isLoading || notReady){        
                    return;
              }
            if(!this.contains(container)){
                return;
            }
            var i:int;
             for(i=0;i<numCols;i++){
               colsVec.rotationY+=ang;
               colsVec.rotationY=colsVec.rotationY%360;
               if((colsVec.rotationY>90+diffAng && colsVec.rotationY<270-diffAng) || (colsVec.rotationY<-(90+diffAng) && colsVec.rotationY>-(270-diffAng))){
                      if(container.contains(colsVec)){
                          container.removeChild(colsVec);
                      }
                     } else {    
                               if(!container.contains(colsVec)){
                                 container.addChild(colsVec);
                               }
                             }
             }
        }

This will rotate the carousel as an infinite loop. However - I need the function to stop at a certain angle e.g. 45% (and/or reset itself to 0%). Another option would be to stop the carousel at a certain thumbnail container.

The function to create a carousel is here:

thumbWidth=thumbsArray[0][0].width; 
thumbHeight=thumbsArray[0][0].height;
colsVec=new Vector.<Column>();
colHeight=thumbHeight*colLen+(colLen-1)*pxSpace;
colWidth=thumbWidth;
rad=galLoader.radius;
angle=360/numCols;
container=new Sprite();
this.addChild(container);
containerWidth=2*rad;
vertAddOn=40;
vertDrop=15;
containerHeight=colHeight+vertAddOn;
container.x=containerWidth/2;
container.y=containerHeight/2+vertDrop;
contMask=new Shape();
this.addChild(contMask);
contMask.x=container.x;
contMask.y=container.y;
prepContainer();
diffAng=Math.round((Math.asin(rad/fL)*180/Math.PI)*1000)/1000;  
for(i=0;i<numCols;i++){
colsVec= new Column(thumbsArray,pxSpace,rad);
container.addChild(colsVec);
colsVec.y=0;
colsVec.x=0;  
colsVec.z=0;
colsVec.rotationY=angle*i;
if((colsVec.rotationY>90+diffAng && colsVec.rotationY<270-diffAng) || (colsVec.rotationY<-(90+diffAng) && colsVec.rotationY>-(270-diffAng))){
if(container.contains(colsVec)){
container.removeChild(colsVec);
}
} else { 
if(!container.contains(colsVec)){
container.addChild(colsVec);
} } }

Could anyone help me as I'm out of ideas!

[kglad]

stop the loop that's calling doRotate() and create a new loop that eases from the current to the new rotation (by calling doRotate).

[MaarjaK]

Hi, thank you for the answer. That is however the question- how to rewrite function doRotate() so, that it would stop the loop and and would stop at a certain angle?

[kglad]

i don't think you need to rewrite doRotate, at all.  leave it alone.

you just need to stop the current loop that repeatedly calls doRotate and create a new loop the calls doRotate.

[MaarjaK]

Hi, thanks,

well, this is how the rotation arrows work:

Theres a button with a function called "firstOver", that triggers the function "rotateRight":

menuLink.firstButton.addEventListener(MouseEvent.CLICK, firstOver);

menuLink.firstButton.addEventListener(MouseEvent.MOUSE_UP, rightOut);

private function firstOver(e:MouseEvent):void {rotateRight=true;}

Here is "rotateRight" that triggers "doRotate":

private function onEnter(e:Event):void {

      if (rotateRight){

        this.doRotate(1); // rotate speed

      }}

I just don't see what I could do differently here to stop the loop?

[kglad]

there's an enterframe listener in your code that's calling onEnter.  remove it if the carousel is rotating and you want to stop it.

otherwise, call doRotate() and pass the difference between the current rotation and the desired rotation.  use a loop if you want to animate/tween that change.

[MaarjaK]

Hi,

well, let's say I remove onEnter, leaving the code something like this:

   private function firstOver(e:MouseEvent):void {

        if (rotate1){    

        this.doRotate(1);

      }  

      rotate1=true;

    }

How could I still make it stop at a certain angle or reset it to 0? (In that last case I could also use a timer to make it stop after  a certain time interval - but I'd still need to reset the carousel to start position)

Sorry for not quite getting it yet!

[kglad]

you wouldn't remove onEnter.  you remove the listener:

whatever.removeEventListener(Event.ENTER_FRAME,onEnter);

//

i know you're not an actionscript expert, but i think someone will need to do this for you.

you can get free help via the adobe forums, but getting someone else to do this for you via the forums either will not happen or will require patience.

[MaarjaK]

Hi, well, unfortunately asking help from forums is my last option, there really isn't many people around anymore, who'd use Flash!

Also, I couldn't find neither free or payed scripts or examples online, that could do this - so, it's just me and forums.

I really do appreciate that you've tried to help me- I just need a bit clearer reference (as I'm just not really used to use AS), so that I could try to search and/or figure out how to solve that problem.

By "call doRotate() and pass the difference between the current rotation and the desired rotation.", did you mean something like this:

private function onEnter(e:Event):void {

if (rotate){

this.doRotate(1);

if(    //so, here I should use something that would locate the desired position, so something like currentFrame or would you have any better ideas?

{

// should I also add something like doRotate.stop(); here?

this.removeEventlistener(Event.ENTER_FRAME,onEnter);

}} 

Or am I going the wrong way?

[MaarjaK]

Or maybe I should write a function here that could some how tween the animation, count frames to stop at a certain frame and then reset itself?:

   private function firstOver(e:MouseEvent):void {   

   }

Could anyone help?

[moccamaximum]

You have the right idea, basically you want to remove the infinite spinning by not calling the doRotate more than once (onEnter calls that function 30 times a second if your movie is 30fps).

[kglad]

use:

doRotate(the_rotation_you_want_for_colsVec[0] - colsVec[0].rotationY);