# Spinning images tutorial

**URL:** <https://forum.kirupa.com/t/spinning-images-tutorial/192321>\
**Category:** Uncategorized\
**Created:** [June 27, 2006, 7:08pm UTC](https://forum.kirupa.com/t/spinning-images-tutorial/192321 "2006-06-27T19:08:32Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![dru\_nasty](https://avatars.discourse-cdn.com/v4/letter/d/90db22/32.png) [@dru\_nasty](https://forum.kirupa.com/u/dru_nasty)\
**Post date:** [June 27, 2006, 7:08pm UTC](https://forum.kirupa.com/t/spinning-images-tutorial/192321/1 "2006-06-27T19:08:32Z")

</div>

I’m digging into the tutorial on spinning images.  
heres all the as:

```auto

// 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;

```

What I can’t figure out is how to populate the stage with different movie clips as opposed to just looping through and duplicating just the one “pane” movie clip.