AS3 Playground: Multiple dynamic moveable panels

01/02/2010 in RIA View Comments

This tip will show you how to 1. create movable panels, and 2. to create them using array and for loop statements to access the panel class. This is an exercise in creating re-usable code classes, and accessing them with and array.

First we create a Flash project to hold all the files for the exercise. Then we create 3 separate files, one .fla and two .as files. The .fla does nothing more than access the document class and set the size of the stage. I usually name the document class the same as the .fla, but feel free to name it as you like. The two .as classes that we will create are the one we will use as the document class (PanelNav.as) and a class that holds the panel creation code (PanelSpawn.as).

The class PanelNav.as imports the class Panel Spawn.as, creating panels by cycling through an array of information. I am passing a few arguments from the array, but more can be passes as you get into the class, such as header color, border color, etc. Everything is generated by using one major for/loop statement, cycling through the amount of Array items, generating a panel from the PanelSpawn.as class for each array item. You can use the PanelSpawn.as class to create one panel, but why when you can create an unlimited amount of panels by using a simple array and for statement? Enough of my explanation, here is the code.

Download the source project here

Click and drag a panel below, note the transparency on click.

Below is the code for the Document Class

package com.riareviver{
 
	//FLASH CLASS IMPORT
	import flash.display.MovieClip;
	import flash.events.*;
 
	//CUSTOM CLASS IMPORT
	import com.riareviver.PanelSpawn;
	import com.riareviver.DebugPanel;
 
	public class PanelNav extends MovieClip {
 
		//VARS
		public var panelArray:Array = new Array();
		public var genPanel:Array = new Array();
		public var debugPanel:DebugPanel;
 
		public function PanelNav() {
			//Debug Panel
			debugPanel = new DebugPanel();
 
			//Panel Array push
			panelArray.push({width:200, height:180, title:"Panel One", xLoc:20, yLoc:20});
			panelArray.push({width:200, height:180, title:"Panel Two", xLoc:120, yLoc:60});
			panelArray.push({width:200, height:180, title:"Panel Three", xLoc:220, yLoc:100});
 
			for (var b:int = 0; b &lt; panelArray.length; b++) {
				///////////////////////////////////////////////
				//Create new Panel from Array
				genPanel[b] = new PanelSpawn(panelArray[b].width, panelArray[b].height, panelArray[b].title);
				genPanel[b].x = panelArray[b].xLoc;
				genPanel[b].y = panelArray[b].yLoc;
				addChild(genPanel[b]);
				///////////////////////////////////////////////
 
				///////////////////////////////////////////////
				//Add Panel Event Listeners
				genPanel[b].addEventListener(MouseEvent.MOUSE_DOWN, startPanelDrag);
				genPanel[b].addEventListener(MouseEvent.MOUSE_UP, stopPanelDrag);
				stage.addEventListener(MouseEvent.MOUSE_UP, stopPanelDrag);
				///////////////////////////////////////////////
 
				///////////////////////////////////////////////
				//Add Event Handlers for Panels
				function startPanelDrag(e:MouseEvent):void {
					for (var g:int = 0; g &lt; panelArray.length; g++) {
						switch (e.currentTarget) {
							case genPanel[g] :
								genPanel[g].startDrag();
								genPanel[g].alpha = .5;
								setChildIndex(genPanel[g], numChildren - 1);
								break;
						}
					}
				}
				function stopPanelDrag(e:MouseEvent):void {
					for (var g:int = 0; g &lt; panelArray.length; g++) {
						switch (e.currentTarget) {
							case genPanel[g] :
								genPanel[g].alpha = 1;
								genPanel[g].stopDrag();
								break;
 
							case stage :
								genPanel[g].alpha = 1;
								genPanel[g].stopDrag();
								break;
						}
					}
				}
				///////////////////////////////////////////////
			}
		}
	}
}

The Panel creation class is below:

package com.riareviver{
 
	//FLASH CLASS IMPORT
	import flash.display.MovieClip;
	import flash.events.*;
	import flash.text.TextField;
 
	//CUSTOM CLASS IMPORT
	import com.riareviver.TxtFormat;
 
	public class PanelSpawn extends MovieClip {
 
		//PUBLIC VARS
		public var panelContainer:MovieClip;
		public var panelHeader:MovieClip;
		public var panelBody:MovieClip;
 
		//PRIVATE VARS
		private var pLineStyleWidth:Number;
		private var pLineStyleColor:uint;
		private var pHeaderFillColor:uint;
		private var pFillColor:uint;
		private var pPanelWidth:Number;
		private var pHeaderXloc:Number;
		private var pHeaderYloc:Number;
		private var pHeaderWidth:Number;
		private var pHeaderHeight:Number
		private var pBodyHeight:Number
		private var headerText:TextField;
		private var txtFormat:TxtFormat = new TxtFormat();
 
		public function PanelSpawn(panelWidth:Number, bodyHeight:Number, panelTitle:String) {
 
			pPanelWidth = panelWidth;
			pBodyHeight = bodyHeight;
 
			pLineStyleWidth = .5;
			pLineStyleColor = 0x666666;
			pHeaderFillColor = pLineStyleColor;
			pFillColor = 0xFFFFFF;
			pHeaderXloc = 0;
			pHeaderYloc = 0;
			pHeaderWidth = pPanelWidth;
			pHeaderHeight = 20;
 
			//CONTAINER
			panelContainer = new MovieClip();
			panelContainer.x = 0;
			panelContainer.y = 0;
			addChild(panelContainer);
 
			//HEADER
			panelHeader = new MovieClip();
			panelHeader.graphics.lineStyle(pLineStyleWidth, pLineStyleColor);
			panelHeader.graphics.beginFill(pHeaderFillColor);
			panelHeader.graphics.drawRect(pHeaderXloc, pHeaderYloc, pPanelWidth, pHeaderHeight);
			panelHeader.graphics.endFill();
			panelContainer.addChild(panelHeader);
 
			headerText = new TextField();
			headerText.x = 5;
			headerText.y = 1;
			headerText.width = pPanelWidth - 20;
			headerText.text = panelTitle;
			headerText.setTextFormat(txtFormat.displayFormat); //TxtFormat class reference
			headerText.selectable = false;
			panelHeader.addChild(headerText);
 
			//BODY
			panelBody = new MovieClip();
			panelBody.graphics.lineStyle(pLineStyleWidth, pLineStyleColor);
			panelBody.graphics.beginFill(pFillColor);
			panelBody.graphics.drawRect(pHeaderXloc , pHeaderYloc + pHeaderHeight, pPanelWidth, pBodyHeight);
			panelBody.graphics.endFill();
			panelContainer.addChild(panelBody);
 
		}
	}
}

1 Comment

Scaffolding - 03/30/2010

This tutorial really helped me get my head around using classes to manipulate dynamically created MovieClips without having to have items exported for Actionscript use from the library.

Whilst it provides an excellent overview to using multiple class files as well as using the document class in AS3, my only idea would be to expand a little on this tutorial. Perhaps a future one could include loading the panelArray in via XML?

Thanks anyway – this was a bit of a life saver