# Help - Kirupa Spinning Images Tutorial

**URL:** <https://forum.kirupa.com/t/help-kirupa-spinning-images-tutorial/188353>\
**Category:** flash\
**Created:** [May 6, 2006, 9:30pm UTC](https://forum.kirupa.com/t/help-kirupa-spinning-images-tutorial/188353 "2006-05-06T21:30:54Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![mar1b0r0man](https://avatars.discourse-cdn.com/v4/letter/m/46a35a/32.png) [@mar1b0r0man](https://forum.kirupa.com/u/mar1b0r0man)\
**Post date:** [May 6, 2006, 9:30pm UTC](https://forum.kirupa.com/t/help-kirupa-spinning-images-tutorial/188353/1 "2006-05-06T21:30:54Z")

</div>

Hi all,

I was just following “Kirupa\_3D\_07\_SpinningImages” tutorial. The math starting is making some sense but I can’t figure out how to change it so the images does not spin on \_xmouse movement. But only when I click a image it spins to the image. Any comments or suggestions would be greatly appreciated, thanks.

// create a scene movieclip to contain all 3D elements  
// and center it on the screen.  
this.createEmptyMovieClip(“theScene”, 1);  
theScene.\_x = 150;  
theScene.\_y = 100;

// now we’r going to create an array to keep track of all the  
// objects in the scene. That way, to position all the objects  
// you just need to loop through this array.  
objectsInScene = new Array();

// no camera, but a rotation will be needed to keep track of the  
// spinning involved (though its the same as the camera)  
spin = 0;

// focal length to determine perspective scaling  
focalLength = 500;

// the function for controling the position of a friend  
displayPane = function(){  
var angle = this.angle - spin;  
var x = Math.cos(angle)\*this.radius;  
var z = Math.sin(angle)\*this.radius;  
var y = this.y;

var scaleRatio = focalLength/(focalLength + z);  
this.\_x = x \* scaleRatio;  
this.\_y = y \* scaleRatio;  
this.\_xscale = this.\_yscale = 100 \* scaleRatio;  
// on top of the normal scaling, also squish the  
// \_xscale based on where in the rotation the pane is  
// since you would be looking at its side when at a z  
// of 0, it would be at its thinnest which would be  
// 0 since its a completely flat pane. So for that,  
// we can use the trig function of z (sin) to squish the  
// \_xscale based on its position in z.  
this.\_xscale \*= Math.sin(angle);  
this.swapDepths(Math.round(-z));  
}

// attach each pane in a loop and arrange them in a  
// circle based on the circumference of the circle  
// divided into steps  
angleStep = 2\*Math.PI/8;  
for (i=0; i\<8; i++){  
attachedObj = theScene.attachMovie(“pane”, “pane”+i, i);  
attachedObj.angle = angleStep \* i;  
attachedObj.radius = 100;  
attachedObj.x = Math.cos(attachedObj.angle) \* attachedObj.radius;  
attachedObj.z = Math.sin(attachedObj.angle) \* attachedObj.radius;  
attachedObj.y = 40;  
attachedObj.display = displayPane;  
objectsInScene.push(attachedObj);  
}

panCamera = function(){  
// rotate camera based on the position of the mouse  
spin += this.\_xmouse/1000;

// Now, with the camera spun, you need to perform the rotation  
// of the camera’s position to everything else in the scene  
for (var i=0; i\<objectsInScene.length; i++){  
objectsInScene\*.display();  
}  
};

// make each figure run backAndForth every frame  
theScene.onEnterFrame = panCamera;