Managing Movie Clip Instances - Page 2
       by kirupa  |  7 September 2008

In the previous page, you created a circle and added it to your movie clip. In this page, let's add some code and look at how to manage your instantiated movie clips.

Right click on a blank keyframe on your timeline and select Actions. The Actions window will appear. Inside this window, copy and paste the following code:

function Start():void {

DuplicateItems();

stage.addEventListener(MouseEvent.CLICK, StageClick);

}

 

var listOfMovieClips:Array = new Array();

 

function StageClick(event:MouseEvent):void {

RemoveItems();

DuplicateItems();

}

 

function RemoveItems() {

for (var i:int = 0; i < listOfMovieClips.length; i++) {

var itemToRemove:DisplayObject = listOfMovieClips[i];

this.removeChild(itemToRemove);

}

listOfMovieClips = new Array();

}

 

function DuplicateItems() {

for (var i:int = 0; i < 50; i++) {

 

var newCircle:BlueCircle = new BlueCircle();

listOfMovieClips.push(newCircle);

this.addChild(newCircle);

 

newCircle.x = Math.random()*300;

newCircle.y = Math.random()*200;

 

newCircle.alpha = .1 + Math.random()*.3;

newCircle.scaleX = newCircle.scaleY = .1 + Math.random()*2;

}

}

Start();

Once you have copied and pasted the above code, press Ctrl + Enter to test your application. You should see something similar to the following in your preview window:

If you click anywhere in your stage, the circles will re-generate. Much of the code you pasted should not be new to you. In fact, all of the code I have grayed out in the following copy of the above code is covered fairly extensively in the Displaying Library Content tutorial:

function Start():void {

DuplicateItems();

stage.addEventListener(MouseEvent.CLICK, StageClick);

}

 

var listOfMovieClips:Array = new Array();

 

function StageClick(event:MouseEvent):void {

RemoveItems();

DuplicateItems();

}

 

function RemoveItems() {

for (var i:int = 0; i < listOfMovieClips.length; i++) {

var itemToRemove:DisplayObject = listOfMovieClips[i];

this.removeChild(itemToRemove);

}

listOfMovieClips = new Array();

}

 

function DuplicateItems() {

for (var i:int = 0; i < 50; i++) {

 

var newCircle:BlueCircle = new BlueCircle();

listOfMovieClips.push(newCircle);

this.addChild(newCircle);

 

newCircle.x = Math.random()*300;

newCircle.y = Math.random()*200;

 

newCircle.alpha = .1 + Math.random()*.3;

newCircle.scaleX = newCircle.scaleY = .1 + Math.random()*2;

}

}

Start();

Before looking at the remaining, new code in greater detail, let me explain the basic idea behind what I am doing.

Using an Array to Store Items
The solution I am employing is fairly straightforward. Whenever you add a new instance of a movie clip, I add that movie clip instance to an array. An array is a basic data structure that allows you to store items inside it like a box or container. My goal is to, in the end, have a single array that contains a reference to every movie clip instance that I wish to keep track of. The snippets of code I highlight above put what I just wrote into practicee.

Let's look at each line in greater detail:

var listOfMovieClips:Array = new Array();

First, I am creating a new array called listOfMovieClips. This array will be responsible for storing a reference to each of the movie clip instances you decide to add to your stage.

Let's jump down a few blocks of code and look at the code where we add our movie clip instance to our array:

function DuplicateItems() {

for (var i:int = 0; i < 50; i++) {

 

var newCircle:BlueCircle = new BlueCircle();

listOfMovieClips.push(newCircle);

this.addChild(newCircle);

 

newCircle.x = Math.random()*300;

newCircle.y = Math.random()*200;

 

newCircle.alpha = .1 + Math.random()*.3;

newCircle.scaleX = newCircle.scaleY = .1 + Math.random()*2;

}

}

In the first line, I declare an object called newCircle whose type is BlueCircle. I also initialize it to the value of a new BlueCircle movie clip instance. Once I have done that, I go ahead and add it to the listOfMovieClips array.

The last thing to look at is the code for actually clearing your stage and array of these movie clip instances:

function RemoveItems() {

for (var i:int = 0; i < listOfMovieClips.length; i++) {

var itemToRemove:DisplayObject = listOfMovieClips[i];

this.removeChild(itemToRemove);

}

listOfMovieClips = new Array();

}

The code is very straightforward. I loop through each item inside our listOfMovieClips array and remove that item from our stage:

function RemoveItems() {

for (var i:int = 0; i < listOfMovieClips.length; i++) {

var itemToRemove:DisplayObject = listOfMovieClips[i];

this.removeChild(itemToRemove);

}

listOfMovieClips = new Array();

}

Wrapping Up
Yay -  you are now done! As you can see, the solution to our problem was not difficult. Like many things with programming, the solution requires thinking about the problem in a different light.

To see how my example was created, feel free to download the final source from the following location:

Download Final Source

1 | 2