Course notes
syllabus | schedule | topics | projects | class notes | resources | students | ARTC courses
 Lectures:
Lecture A: The Flash Interface Lecture 4: User Input
Lecture B: Animation Lecture 5: Extras & Game Design
Lecture 1: Drawing with Code and ActionScripting Lecture 6: Linking up the Nucleus
Lecture 2: Graphics Application Development Lecture 7: Brainstorming Game Types
Lecture 3: Working with Movieclips Lecture 8: Topics for Discussion
  Lecture 9: Preloaders and JavaScript Windows
 

Lecture 3: Working with Movieclips

For my examples, I set up a lot of buttons with listeners:
          // buttons on right
			create1.buttonMode=true;
			create1.addEventListener(MouseEvent.CLICK,createNewMC);
			
			libraryMC.buttonMode=true;
			libraryMC.addEventListener(MouseEvent.CLICK,addMovieFunction);
			
			removeMC.buttonMode=true;
			removeMC.addEventListener(MouseEvent.CLICK,remove1Function);
			
			removeAllMC.buttonMode=true;
			removeAllMC.addEventListener(MouseEvent.CLICK,removeAllFunction);
			
			loadSWF.buttonMode=true;
			loadSWF.addEventListener(MouseEvent.CLICK,loadSWFFunction);
			
			loadPNG.buttonMode=true;
			loadPNG.addEventListener(MouseEvent.CLICK,loadPNGFunction);
			
			unloadSWF.buttonMode=true;
			unloadSWF.addEventListener(MouseEvent.CLICK,unloadSWFFunction);
			
			unloadPNG.buttonMode=true;
			unloadPNG.addEventListener(MouseEvent.CLICK,unloadPNGs);
			
			// drag the paper
			create1.buttonMode=true;
			dragPaper.addEventListener(MouseEvent.MOUSE_DOWN,doStartDrag);
			stage.addEventListener(MouseEvent.MOUSE_UP,doStopDrag);
			
			// drag the redTack
			redTack.buttonMode=true;
			redTack.addEventListener(MouseEvent.MOUSE_DOWN,dragRedTack);
			redTack.addEventListener(MouseEvent.MOUSE_UP,stopDragRedTack);
			
			// drag the yellowTack
			yellowTack.buttonMode=true;
			yellowTack.addEventListener(MouseEvent.MOUSE_DOWN,dragYellowTack);
			yellowTack.addEventListener(MouseEvent.MOUSE_UP,stopDragYellowTack);


To make a new movieClip you just need to define a variable to contain it and then add it to the stage as a child.
   	   // used for the bullseye MovieClip name
		public var theClip=new MovieClip;
        
       public function createNewMC(theEvent:MouseEvent) {
			// makes the bullseye graphic on the corkboard
			theClip.graphics.lineStyle(8,0xFF0000,1.0);
			theClip.graphics.drawCircle(0,0,22);
			theClip.graphics.drawCircle(0,0,3);
			theClip.graphics.lineStyle(8,0xEEEEEE,1.0);
			theClip.graphics.drawCircle(0,0,12);
			theClip.x=520;
			theClip.y=100;
			addChild(theClip);
		}
              

ActionScript can use MovieClips that are stored in the Library but you need to set the Linkage first

1. Create a MovieClip in Flash
2. Remove the MovieClip from the stage
3. Select the MovieClip in the Library
4. Pull down Properties from the top right pull down menu
5. Click the Advanced Button
6. Under Linkage, click ON Export for ActionScript
7. Make the class name the same as the Symbol Name

If you are using CS3, you may be able to Right Mouse Button on the Symbol in the Library and select Linkage

Code:

// the class name of the Movieclip is myMC 
var theMovieClip:myMC = new myMC();
theMovieClip.x = 250;
theMovieClip.y = 300;
addChild(theMovieClip); 
//the addChild function adds the new movieClip as a child to the stage

Creating Unique names for your new MovieClips

Usually you will want to reference the movieClips by their name so if you want to make more than one instance from a clip that is in the library, you need to increment the clipname:

      // used to keep count of the number of blue tacks
	   public var count:uint=0;
             
      public function addMovieFunction(theEvent:MouseEvent) {
			// adds a new Tack Child to the stage and gives it a unique name
			addChild(new BlueTack()).name = "myTack"+count;
			// you need to reference the new Instance by using getChildByName
			getChildByName("myTack"+count).x=randRange(20,400);
			getChildByName("myTack"+count).y=randRange(20,300);
			// Increment the counter so the next Instance has a different name
			count++;
		}

The properties of a movieclip that can be accessed:

alpha
mouseEnabled
name
rotation
scaleX
scaleY
visible
x
y

and others....

removeChild()

Removes a Movieclip that has been placed on the stage using addChild(),
You can't remove clips that have been placed on the stage by manually dragging them out of the library.

public function remove1Function(theEvent:MouseEvent) {
      // removes the bullseye MovieClip
     removeChild(theClip);
}

To remove more than 1, you can use the getChildByName (this assumes the count variable has already been declared)

	public function removeAllFunction(theEvent:MouseEvent) {
			// removes all the Tack MovieClips
			for (var i=0; i < count; i++) {
				removeChild(getChildByName("myTack"+i));
			}
           // reset the number of tacks to 0
			count=0;
	}

To load external files you need to create a container and also get the URL of the content you will be loading. You need to declare the myLoader and url in the class (not the function) so that we can access it later to remove the SWF

              // create a container for the loaded content to exist
			var myLoader:Loader = new Loader();
			// get the URL of the content to be loaded and put it in a variable
			var url:URLRequest=new URLRequest("externalSWF.swf");

       public function loadSWFFunction(theEvent:MouseEvent) {
           // add this container as a child to the stage
			addChild(myLoader);
			// load the content into the loader
			myLoader.load(url);
		}

You unload SWFs, JPGs, PNGs, HTML filesall the same. This will only remove the myLoader SWF which has already been defined in the class (not function) and the myLoader has been loaded with its URL earlier.

       // unload a single SWF
		public function unloadSWFFunction(theEvent:MouseEvent) {
			myLoader.unload();
		}

You load JPGs and HTML pages the same way you load SWF. This code shows how you can get the stage attributes and use that to determine where to place things.

You will need to import the package.net which contains the class URLRequest

import flash.net.*;
public function loadPNGFunction(theEvent:MouseEvent) {

			var myPNGLoader:Loader = new Loader();
			// addChild(new BlueTack()).name = "myTack"+count;
			addChild(myPNGLoader);
			var Mooseurl:URLRequest=new URLRequest("moosepin.png");
			myPNGLoader.load(Mooseurl);

			// random is a number between 0 and 1
			// this gets a number that is a fraction of the width of the window
			var randwidth=Math.random()*stage.stageWidth;
			var randheight=Math.random()*stage.stageHeight;
			// The floor is the closest integer that is less than or equal to the stage size
			myPNGLoader.x=Math.floor(randwidth);
			myPNGLoader.y=Math.floor(randheight);
}

We need to remove all PNGs that have been added to the stage with a single click of the button.

This is a CHALLENGE question and the first person to email me a good solution will receive extra credit and the solution will be posted here.

 

Create the listeners in the Constructor Function

  // add a listener to the paper instance
	dragPaper.addEventListener(MouseEvent.MOUSE_DOWN, doStartDrag);
  // look for a mouse up on the stage because you want to make sure you get it
	stage.addEventListener(MouseEvent.MOUSE_UP, doStopDrag);
Add two functions. startDrag will attach the item to the louse while it is down, stopDrag will release it.
private function doStartDrag(theEvent:MouseEvent):void {
    dragPaper.startDrag();
}

private function doStopDrag(theEvent:MouseEvent):void {
    dragPaper.stopDrag();
}

 

Here we are using the hitTestObject(theobject)

Create the listeners in the Constructor Function

          // drag the redTack
			redTack.buttonMode=true;
			redTack.addEventListener(MouseEvent.MOUSE_DOWN,dragRedTack);
			redTack.addEventListener(MouseEvent.MOUSE_UP,stopDragRedTack);
Make three functions:
      private function dragRedTack(theEvent:MouseEvent):void {
			redTack.startDrag(true);
			redTack.addEventListener(Event.ENTER_FRAME,checkHit);
		}
        
		//the hitTestObject compares the bounding box of each object and sees it they touch
		private function checkHit(e:Event):void {
			if (redTack.hitTestObject(hitBox)) {
				warningBox.text='Ouch, a tack stuck me';
			} else {
				warningBox.text='Put red tack in box';
			}
		}

        // when the mouse is up, stop the dragging and stop looking for enter frame events
		private function stopDragRedTack(theEvent:MouseEvent):void {
			redTack.stopDrag();
			redTack.removeEventListener(Event.ENTER_FRAME,checkHit);
        }    

 

Here we are using the hitTestPoint(pointx, pointy, boundary)

Make the listeners in the Constructor Function

     // drag the yellowTack
			yellowTack.buttonMode=true;
			yellowTack.addEventListener(MouseEvent.MOUSE_DOWN,dragYellowTack);
			yellowTack.addEventListener(MouseEvent.MOUSE_UP,stopDragYellowTack);
Create three functions
        private function dragYellowTack(theEvent:MouseEvent):void {
			yellowTack.startDrag(true);
			yellowTack.addEventListener(Event.ENTER_FRAME,checkHit2);
		}

		private function checkHit2(theEvent:Event):void {
			// notice we are checking the object that the tack is supposed to touch (not the tack like last time)
             // we want to see if the mouse is touching the display object as it moves the tack around
             // the true means use the object's shape and false means use the bounding box of the shape
			if (hitBox2.hitTestPoint(mouseX,mouseY,true)) {
				yellowBox.text='Point is in there';
			} else {
				yellowBox.text='Put yellow tack in box';
			}
		}

		private function stopDragYellowTack(theEvent:MouseEvent):void {
			yellowTack.stopDrag();
			yellowTack.removeEventListener(Event.ENTER_FRAME,checkHit);
		}

 

Understanding Display Lists

The Display List is the information about the order of all children on the stage. There are a number of Properties and Methods you can use to find out about and manipulate the display list:

numChildren
Returns the number of children of this object.

addChild(child)
Adds a child DisplayObject instance to current instance (stage).

addChildAt(child, index)
Adds a child DisplayObject instance to current instance (stage).

contains(child)
Determines whether the specified display object is a child of the current instance (stage). This returns true or false.

getChildAt(index)
Returns the child display object instance that exists at the specified index.

getChildByName(name)
Returns the child display object that exists with the specified name.

getChildIndex(child)
Returns the index position of a child instance. This returns an int.

getObjectsUnderPoint(point)
Returns an array of objects that lie under the specified point and are children (or grandchildren, and so on) of this DisplayObjectContainer instance.

removeChild(child)
Removes the specified child DisplayObject instance from the child list of the current instance.

removeChildAt(index)
Removes a child DisplayObject from the specified index position in the child list of the DisplayObjectContainer.

setChildIndex(child, index)
Changes the position of an existing child in the display object container.

swapChildren(child1, child2)
Swaps the order (front-to-back) of the two specified child objects.

swapChildrenAt(index1, index2)
Swaps the order (front-to-back ) of the child objects at the two specified index positions in the child list.