# Trouble creating a Kaleidoscope effect with classes

**URL:** <https://forum.kirupa.com/t/trouble-creating-a-kaleidoscope-effect-with-classes/322438>\
**Category:** flash\
**Created:** [May 20, 2011, 5:10pm UTC](https://forum.kirupa.com/t/trouble-creating-a-kaleidoscope-effect-with-classes/322438 "2011-05-20T17:10:21Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![flog8391](https://avatars.discourse-cdn.com/v4/letter/f/bc79bd/32.png) [@flog8391](https://forum.kirupa.com/u/flog8391)\
**Post date:** [May 20, 2011, 5:10pm UTC](https://forum.kirupa.com/t/trouble-creating-a-kaleidoscope-effect-with-classes/322438/1 "2011-05-20T17:10:21Z")

</div>

Hi all,  
hope you can help as i have been struggling with this for a good few hours. I am creating a cluster of images with float around and i want the mouse to create a kaleidoscope effect when you hover over them.  
I have got the first part working but i cant get the kaleidoscope effect to work. I have 7 classes all together and i am just struggling on one error, which is

RangeError: Error #2006: The supplied index is out of bounds.  
at flash.display::DisplayObjectContainer/getChildAt()  
at Document/on\_added\_to\_stage()

This is the code from the document class:

package  
{

```
import flash.events.MouseEvent;	
//import flash.system.ApplicationDomain;	
import flash.events.Event;	
//import com.shinedraw.images.Kaleidoscope;	
import flash.display.MovieClip;

public class Document extends MovieClip{
	private var _kaleidoscope : Kaleidoscope;
	
	public function Document(){
		this.addEventListener(Event.ADDED_TO_STAGE, on_added_to_stage);
	}//adds the kaleidoscope to the stage
	
	private function on_added_to_stage(event : Event):void{
	
		// place the ImageRotation3D object to the center of the stage
		_kaleidoscope = new Kaleidoscope();
		addChild(_kaleidoscope);
	//this.removeEventListener( Event.ADDED_TO_STAGE, on_added_to_stage ); 

```

//formation of 3D Cube starts here  
parent.getChildAt(0).rotationY = 90;  
parent.getChildAt(0).x = -75; // puts the square so far from other squares which is 75px apart

parent.getChildAt(1).rotationY = -90;  
parent.getChildAt(1).x = 75; // image 75px left;

parent.getChildAt(2).rotationX = 90;  
parent.getChildAt(2).y = 75; // image 75px above;

parent.getChildAt(3).rotationX = -90;  
parent.getChildAt(3).y = -75; //image 75px below;

parent.getChildAt(4).z = -75; // image 75px backside;

parent.getChildAt(5).rotationY = 180;  
parent.getChildAt(5).z = 75; // image 75px closer;  
/\* formation of 3D Cube ends here \*/

/\* These six panels move around randomly./

/\* This event to rotate the 3d cube box with mouse direction \*/  
this.addEventListener(Event.ENTER\_FRAME, rotateThis);

```
	}

		 function rotateThis(event:Event):void{
Ass31.sortClips(container); /* this is to sort the six panels according to their Z-axis. */
container.rotationY += (mouseX - stage.stageWidth/2)*0.02;
container.rotationX += (mouseY - stage.stageHeight/2)*0.02;//this is where you can edit the speed
		 }

```

}  
}

Hope you can help somehow.  
Thanks 🙂