AS3: Homegrown particles

First off, I will say that without Matthew Tretter’s garbage collection classes this demo would not be possible…While generating this many “particles” on ENTER_FRAME, the Flash Player can not keep up (or wouldn’t in my case), with the 3 tweens on X, Y, and alpha.
After saying that…here is a demo that I came up with tonight playing around in Flash and practicing some rapid development prototyping. It is a “particle” generator (that’s what I am calling it) using the display class, randomly positioning X and Y, as well as tweening the alpha channel.

Particles
Go ahead, click and drag below…you know you want to.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

import flash.display.MovieClip
import fl.transitions.Tween
import fl.transitions.easing.*
import fl.transitions.TweenEvent
import fl.transitions.*
import fl.motion.easing.*
 
//Matthew Tretter's Garbage collection class
import com.exanimo.transitions.GCSafeTween
 
//VARIABLES
var circBubble:MovieClip
var XLocMove:Number = 10
var YLocMove:Number = 10
var circRadius:Number = Math.random()*10
var bubbleTween:Tween
var bubbleColor:uint = 0x000000
var bubbleArray:Array = new Array()
 
//Event Listeners
stage.addEventListener(MouseEvent.MOUSE_DOWN, checkMouseDown)
stage.addEventListener(MouseEvent.MOUSE_UP, checkMouseUp)
 
//Check Mouse Actions
function checkMouseDown(e:MouseEvent):void {
	stage.addEventListener(Event.ENTER_FRAME,tweenBubble)
}
function checkMouseUp(e:MouseEvent):void {
	stage.removeEventListener(Event.ENTER_FRAME,tweenBubble)
}
 
//Method to kick off the particles, gets called on every frame at 30fps.
function tweenBubble(e:Event):void {
 
	circBubble = new MovieClip()
	addChild(circBubble)
 
	circBubble.graphics.beginFill(bubbleColor)
	circBubble.graphics.drawCircle(mouseX,mouseY, circRadius)
	circBubble.graphics.endFill()
 
	//Matthew Tretter's garbage collection class calls the tweens
	new GCSafeTween(circBubble, "y", Elastic.easeOut, 0, XLocMove, 2, true)
	new GCSafeTween(circBubble, "x", Elastic.easeOut, 0, YLocMove, 2, true)
	new GCSafeTween(circBubble, 'alpha', None.easeNone, 1, 0, 1, true)
 
	//Randominze the XLOC - both negative and positive coordinate results
	if (XLocMove > -1) {
		XLocMove = (Math.random()*100) * -1
	} else if (XLocMove < -1) {
		XLocMove = (Math.random()*100) + -1
	}
	//Randominze the YLOC - both negative and positive coordinate results
	if (YLocMove > -1) {
		YLocMove = (Math.random()*100) * -1
	} else if (YLocMove < -1) {
		YLocMove = (Math.random()*100) + -1
	}
	//Randomize the radius of the generated bubbles
	circRadius = Math.random()*10
 
	//Randomly add to the bubble Color, I am partial to blue...
	bubbleColor += 000022
}



Related Articles:

  • AS3: Alternate row colors on dynamic movieclips
  • AS3: Floating Tool Tip using currentTarget
  • AS3: Using currentTarget to listen for your buttons
  • AS3: Learn how to create a re-usable class
  • Flash CS3: Easy to use XML Feed Class


    • August 19, 2008 | Filed Under ActionScript

    Leave a Comment 

    AS3: Alternate row colors on dynamic movieclips

    Below is an example of how to dynamically change the row color of generated movieclips. I find this helpfu when making grid based layouts, buttons, etc. You can have an unlimited amount of row colors by adding to the two if/then statements. Also, you can make this class re-usable by simply adding variables in the public function, passing them into the constructor method from your main fla movieclip instantiation. I try to keep all variables outside the main constructor, or at least in a single area, to help maintain the code and keep it cleaner.

    Download the source project here

    Alt Row Colors

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

    package com.riareviver{
 
	//Flash Class imports
	import flash.display.MovieClip
	import flash.text.TextField
	import flash.events.*
 
	public class altRowColor extends MovieClip {
 
		//VARIABLE Definitions
		var boxToRepeat:MovieClip
		var boxText:TextField
 
		var boxXLoc:int = 50
		var boxYLoc:int = 50
		var boxWidth:int = 200
		var boxHeight:int = 25
 
		var boxFillColor:uint
		var boxFillColor01:uint = 0x235880
		var boxFillColor02:uint = 0x71BDEE
		var boxFillColor03:uint = 0xCCCCCC
 
		var altColorDetect:int = 0
		//How many boxes there are, go ahead...change it and see!
		var boxInstanceCount:uint = 8
 
		public function altRowColor() {
 
			//Repeat the box, alternating colors as you go.
			for (var i:int = 0 i < boxInstanceCount i++) {
 
				//Alternate the color based on the detection variable
				if (altColorDetect == 0) {
					boxFillColor = boxFillColor01
				} else if (altColorDetect == 1) {
					boxFillColor = boxFillColor02
				} else if (altColorDetect == 2) {
					boxFillColor = boxFillColor03
				}
				//Create new BOX
				boxToRepeat = new MovieClip()
				boxToRepeat.graphics.beginFill(boxFillColor)
				boxToRepeat.graphics.drawRect(boxXLoc, boxYLoc, boxWidth, boxHeight)
				boxToRepeat.graphics.endFill()
				boxToRepeat.buttonMode = true
				//A little trick to keep the text from preventing the hand cursor change.
				boxToRepeat.mouseChildren = false
 
				//Create new TEXTFIELD
				boxText = new TextField()
				boxText.width = 195
				boxText.height = 15
				boxText.x = boxXLoc + 10
				boxText.y = boxYLoc + 5
				boxText.selectable = false
				boxText.text = "Box number: " + (i + 1)
 
				//Add all children
				addChild(boxToRepeat)
				//We add the textfield as a child of the box
				boxToRepeat.addChild(boxText)
 
				//Increment the Y Location for the next box
				boxYLoc += boxHeight
 
				//Alternate the detection variable value
				if (altColorDetect == 0) {
					altColorDetect = 1
				} else if (altColorDetect == 1) {
					altColorDetect = 2
				} else if (altColorDetect == 2) {
					altColorDetect = 0
				}
			}
 
		}
	}
}



    Related Articles:

  • AS3: Homegrown particles
  • AS3: Floating Tool Tip using currentTarget
  • AS3: Using currentTarget to listen for your buttons
  • AS3: Learn how to create a re-usable class
  • Flash CS3: Easy to use XML Feed Class


    • August 18, 2008 | Filed Under ActionScript

    Leave a Comment 

    I am going to Adobe MAX 08

    MAX 2008



    For the first time since MAX 2004 in New Orleans, I get to go this year in San Francisco. I have been to several, including back in the day when it was DEVCON, twice in Orlando. I am very excited and will be blogging about what I see. This year should be the best ever.

    August 18, 2008 | Filed Under Uncategorized

    Leave a Comment 

    AS3: Floating Tool Tip using currentTarget

    Without a lot of explanation on the topic, the following package creates 4 squares dynamically, then uses event listeners to point to global methods that checks the currentTarget. Based on mouse over or mouse out a method is called to show the tool tip (created on the fly) and changes its X and Y based on your mouse location. Basically, it is a floating tooltip demo, showing you how helpful currentTarget is.

    Download the source here

    ToolTip 


    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140

    package com.riareviver{
 
	//Flash Class Imports
	import flash.display.MovieClip
	import flash.events.*
	import flash.text.TextField
 
	public class toolTipMain extends MovieClip {
 
		var square01:MovieClip
		var square02:MovieClip
		var square03:MovieClip
		var square04:MovieClip
 
		var toolTipText:TextField
 
		var squareXLoc:Number = 50
		var squareYLoc:Number = 50
		var squareDim:Number = 50
 
		public function toolTipMain() {
			//Build Square 1 - Base
			square01 = new MovieClip()
			square01.graphics.beginFill(0xCCCCCC)
			square01.graphics.drawRect(squareXLoc, squareYLoc, squareDim, squareDim)
			square01.graphics.endFill()
			square01.width = squareDim
			square01.height = squareDim
			//Build Square 2
			square02 = new MovieClip()
			square02.graphics.beginFill(0x333333)
			square02.graphics.drawRect(squareXLoc + squareDim, squareYLoc, squareDim, squareDim)
			square02.graphics.endFill()
			square02.width = squareDim
			square02.height = squareDim
			//Build Square 3
			square03 = new MovieClip()
			square03.graphics.beginFill(0x999999)
			square03.graphics.drawRect(squareXLoc, squareYLoc + squareDim, squareDim, squareDim)
			square03.graphics.endFill()
			square03.width = squareDim
			square03.height = squareDim
			//Build Square 4
			square04 = new MovieClip()
			square04.graphics.beginFill(0x666666)
			square04.graphics.drawRect(squareXLoc + squareDim, squareYLoc + squareDim, squareDim, squareDim)
			square04.graphics.endFill()
			square04.width = squareDim
			square04.height = squareDim
			//Create ToolTip TEXTFIELD
			toolTipText = new TextField()
			toolTipText.width = 100
			toolTipText.height = 15
			toolTipText.backgroundColor = 0x64ADE9
			toolTipText.background = true
			toolTipText.textColor = 0x000000
			toolTipText.visible = false
 
 
			//Add children
			addChild(square01)
			addChild(square02)
			addChild(square03)
			addChild(square04)
			addChild(toolTipText)
			//Add Event Listeners
			square01.addEventListener(MouseEvent.MOUSE_OVER, checkMouseOver)
			square01.addEventListener(MouseEvent.MOUSE_OUT, checkMouseOut)
 
			square02.addEventListener(MouseEvent.MOUSE_OVER, checkMouseOver)
			square02.addEventListener(MouseEvent.MOUSE_OUT, checkMouseOut)
 
			square03.addEventListener(MouseEvent.MOUSE_OVER, checkMouseOver)
			square03.addEventListener(MouseEvent.MOUSE_OUT, checkMouseOut)
 
			square04.addEventListener(MouseEvent.MOUSE_OVER, checkMouseOver)
			square04.addEventListener(MouseEvent.MOUSE_OUT, checkMouseOut)
 
			//Universal method to check MOUSEOVER
			function checkMouseOver(e:MouseEvent):void {
				switch (e.currentTarget) {
					case square01 :
						stage.addEventListener(Event.ENTER_FRAME,toolTipOn)
						toolTipText.htmlText = "Square 1"
						break
 
					case square02 :
						stage.addEventListener(Event.ENTER_FRAME,toolTipOn)
						toolTipText.htmlText = "Square 2"
						break
 
					case square03 :
						stage.addEventListener(Event.ENTER_FRAME,toolTipOn)
						toolTipText.htmlText = "Square 3"
						break
 
					case square04 :
						stage.addEventListener(Event.ENTER_FRAME,toolTipOn)
						toolTipText.htmlText = "Square 4"
						break
				}
			}
			//Universal method to check MOUSEOUT
			function checkMouseOut(e:MouseEvent):void {
				switch (e.currentTarget) {
					case square01 :
						stage.removeEventListener(Event.ENTER_FRAME,toolTipOn)
						toolTipOff(null)
						break
 
					case square02 :
						stage.removeEventListener(Event.ENTER_FRAME,toolTipOn)
						toolTipOff(null)
						break
 
					case square03 :
						stage.removeEventListener(Event.ENTER_FRAME,toolTipOn)
						toolTipOff(null)
						break
 
					case square04 :
						stage.removeEventListener(Event.ENTER_FRAME,toolTipOn)
						toolTipOff(null)
						break
				}
			}
			//Tooltip ON
			function toolTipOn(e:Event):void {
				toolTipText.visible = true
				toolTipText.x = mouseX + 10
				toolTipText.y = mouseY - 10
			}
			//Tooltip OFF
			function toolTipOff(e:Event):void {
				toolTipText.visible = false
			}
 
		}
	}
}



    Related Articles:

  • AS3: Homegrown particles
  • AS3: Alternate row colors on dynamic movieclips
  • AS3: Using currentTarget to listen for your buttons
  • AS3: Learn how to create a re-usable class
  • Flash CS3: Easy to use XML Feed Class


    • August 11, 2008 | Filed Under ActionScript

    Leave a Comment 

    AS3: Using currentTarget to listen for your buttons

    A lot of times when I am working on a project that has a lot of buttons, I like to simplify my event listeners into two methods, watching the currentTarget to see where to go. This is extremely helpful when you have to have a mouse down effect that needs to keep looping, say on a zoom. So, when the user holds the mouse down, I add an ENTER_FRAME event that keeps the event in a loop. By using currentTarget and a switch statement, you can keep your listeners set up nice and clean, also helps the next guy figure out what you are trying to accomplish…

    1
2
3
4
5
6

    btnOne.addEventListener(MouseEvent.MOUSE_DOWN,checkMouseDown)
btnOne.addEventListener(MouseEvent.MOUSE_UP,checkMouseUp)
 
//or even
 
btnTwo.addEventListener(MouseEvent.CLICK,checkMouseDown)
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

    function checkMouseDown(e:MouseEvent):void {
 
	switch (e.currentTarget) {
 
		case btnOne :
		stage.addEventListener(Event.ENTER_FRAME,myMethod)
		break
 
		case btnTwo :
		myMethod(null)
		break
 
	}
}
 
 
function checkMouseUp(e:MouseEvent):void {
 
	switch (e.currentTarget) {
 
		case btnOne :
		stage.removeEventListener(Event.ENTER_FRAME, myMethod)
		break
 
	}
}
 
function myMethod(e:Event):void{
	//Do Something
}



    Related Articles:

  • AS3: Homegrown particles
  • AS3: Alternate row colors on dynamic movieclips
  • AS3: Floating Tool Tip using currentTarget
  • AS3: Learn how to create a re-usable class
  • Flash CS3: Easy to use XML Feed Class


    • August 3, 2008 | Filed Under ActionScript, Work

    Leave a Comment 

    AS3: Learn how to create a re-usable class

    AS3: Learn how to create a re-usable class

    Download an entire Flash project using this example here.

    One thing that I found hard, being a designer turn developer turn pseudo programmer, was understanding how packages, classes, and overall re-usable code is handled. Once it clicked with me then I was off and running, but every example that I found was so complex or a small part of a larger project. What I am presenting below is a simple walk through of how to create a very simple package, and use it passing arguments.

    You will need 3 files, newBox.fla, newBox.as, and setNewBox.as. Feel free to use any name for this, but it will be easier to follow along if you name them as I have. To start off, set your document class in the newBox.fla file. I have named my document class newBox.as. That is all you need to do in the .fla, no “frame coding” going on here…

    Our constructor function, or the function that gets called in when you assign a document class…is then created as follows:

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

    package com.connatserdev{
 
	//FLASH CLASS IMPORTS
	import flash.display.MovieClip
 
	//CUSTOM CLASS IMPORT
	import com. connatserdev.setNewBox
 
	public class newBox extends MovieClip {
 
		public function newBox() {
 
		}
	}
}

    Next, we can start creating our re-usable classes, in this instance a class to create a simple box. You will notice in the setNewBox method, we are setting several variables. These values get passed as arguments from the document class, newBox.as. This is what helps make a class re-usable, meaning I can create as many children that I want in the document class by simple creating a new instance and pass these values.

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

    package com. connatserdev{
 
	//FLASH CLASS IMPORTS
	import flash.display.MovieClip
 
	public class setNewBox extends MovieClip {
 
		public function setNewBox(boxXLoc:Number, boxYLoc:Number, boxWidth:Number, boxHeight:Number, boxColor:uint, borderThickness:Number, borderColor:uint, boxRotation:Number) {
 
			var newBox:MovieClip = new MovieClip()
			newBox.graphics.lineStyle(borderThickness, borderColor)
			newBox.graphics.beginFill(boxColor)
			newBox.graphics.drawRect(boxXLoc,boxYLoc,boxWidth,boxHeight)
			newBox.graphics.endFill()
			newBox.rotation = boxRotation
			addChild(newBox)
 
		}
	}
}

    Now all we need to do to use the class is add some actionscript to the constructor function in newBox.as, as follows:

    1
2
3
4
5

    var boxOne:setNewBox = new setNewBox(20,100,100,20,0xCCCCCC,.5,0x000000, 0)
addChild(boxOne)
 
var boxTwo:setNewBox = new setNewBox(100,125,100,20,0x666666,.5,0x000000, 20)
addChild(boxTwo)

    Finally, here are our final .as files:

    newBox.as

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

    package com.connatserdev{
 
	//FLASH CLASS IMPORTS
	import flash.display.MovieClip
 
	//CUSTOM CLASS IMPORT
	import com.connatserdev.setNewBox
 
	public class newBox extends MovieClip {
 
		public function newBox() {
 
			//X, Y, width, height, background color, border thickness, border color, rotation
 
			var boxOne:setNewBox = new setNewBox(20,100,100,20,0xCCCCCC,.5,0x000000, 0)
			addChild(boxOne)
 
			var boxTwo:setNewBox = new setNewBox(100,125,100,20,0x666666,.5,0x000000, 20)
			addChild(boxTwo)
 
		}
	}
}

    setNexBox.as

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

    package com.connatserdev{
 
	//FLASH CLASS IMPORTS
	import flash.display.MovieClip
 
	public class setNewBox extends MovieClip {
 
		public function setNewBox(boxXLoc:Number, boxYLoc:Number, boxWidth:Number, boxHeight:Number, boxColor:uint, borderThickness:Number, borderColor:uint, boxRotation:Number) {
 
			var newBox:MovieClip = new MovieClip()
			newBox.graphics.lineStyle(borderThickness, borderColor)
			newBox.graphics.beginFill(boxColor)
			newBox.graphics.drawRect(boxXLoc,boxYLoc,boxWidth,boxHeight)
			newBox.graphics.endFill()
			newBox.rotation = boxRotation
			addChild(newBox)
 
		}
	}
}



    Related Articles:

  • AS3: Homegrown particles
  • AS3: Alternate row colors on dynamic movieclips
  • AS3: Floating Tool Tip using currentTarget
  • AS3: Using currentTarget to listen for your buttons
  • Flash CS3: Easy to use XML Feed Class


    • August 3, 2008 | Filed Under ActionScript, Work

    3 Comments 

    Flash based facilities map

    This week at KingPharm I created a Flash CS3 based facilities map for our intranet. This was built in AS3, using my super easy to use XML Feed class :). Each clip pulls meta data from an XML file that we can update when needed. I like working in XML and E4X with Flash because, if needed, we can add an AIR app later to administrate the XML file. Katherine Gibson did all the hard work in creating the actual vector based map, and I got to have all the fun in hooking it up to AS3.

    Facilities Map

    August 1, 2008 | Filed Under ActionScript, King Pharmaceuticals, Work

    Leave a Comment 

    Flash CS3: Easy to use XML Feed Class

    This tip will help you create an easy to use, re-usable class that will set up an external XML feed to use E4X, datagrids, etc. I didn’t change any variable names from my working code, so feel free to change them as needed as the variable names don’t relate to any particular thing…

    Download an entire Flash Project using this class here.

    To start off we create our package, using my domain name for example, but change this as needed:

    package com.connatserdev{
 
     public class feedAggregator extends MovieClip {
 
          //Collects argument for XML file path and begins the feed load
          public function feedAggregator(fmapURL:String) {
 
          }
 
     } 
 
}

    Then we call in the needed classes, this goes above the class:

    //Flash Class imports
	import flash.events.Event
	import flash.net.URLLoader
	import flash.net.URLRequest
	import flash.events.ProgressEvent
	import flash.display.MovieClip

    Now we set up a couple of variables, one to instantiate an XML object, and one to set a load checking variable. We can use the public static var type so we can access the variables globally.

    //Assigning the variables as public static lets us use them globally
		public static  var fmapList:XML = new XML()
		public static  var feedisLoaded:Number = 0

    Finally we set up our function, creating the request, loader, and the loading the external XML file information into the newly formed XML object. I like to use a “loaded” method to let my parent document know that the feed is ready to be used, this example uses the Number variable: feedisLoaded.

    //EVENT CALL
			var fmapURL:String = fmapURL
			var fmapXMLURL:URLRequest
			var fmapLoader:URLLoader
 
			fmapList.ignoreWhite = true
			fmapXMLURL = new URLRequest(fmapURL)
			fmapLoader = new URLLoader(fmapXMLURL)
			fmapLoader.addEventListener(Event.COMPLETE,fmapLoaded)
 
			//Once the XML is loaded this method gets called to assign the loaded data to the XML object that we created
			//Also sets the feedisLoaded variable to 1, can be called in with an EnterFrame event.
			function fmapLoaded():void {
				fmapList = XML(fmapLoader.data)
				feedisLoaded = 1
			}
			//

    Now, here is the entire class that you can copy and paste to use. To use this class in your Flash project you will need to create a new variable (var myFeed:feedAggregator = new feedAggregator(”path to your xml file”); Then add that child (addChild(myFeed);)Then you can use feedAggregator.fmapList.* etc using E4X to call attributes in your XML file.

    package com.connatserdev{
 
	//Flash Class imports
	import flash.events.Event
	import flash.net.URLLoader
	import flash.net.URLRequest
	import flash.events.ProgressEvent
	import flash.display.MovieClip
 
	public class feedAggregator extends MovieClip {
 
		//Assigning the variables as public static lets us use them globally
		public static  var fmapList:XML = new XML()
		public static  var feedisLoaded:Number = 0
 
		//Collects argument for XML file path and begins the feed load
		public function feedAggregator(fmapURL:String) {
			//EVENT CALL
			var fmapURL:String = fmapURL
			var fmapXMLURL:URLRequest
			var fmapLoader:URLLoader
 
			fmapList.ignoreWhite = true
			fmapXMLURL = new URLRequest(fmapURL)
			fmapLoader = new URLLoader(fmapXMLURL)
			fmapLoader.addEventListener(Event.COMPLETE,fmapLoaded)
 
			//Once the XML is loaded this method gets called to assign the loaded data to the XML object that we created
			//Also sets the feedisLoaded variable to 1, can be called in with an EnterFrame event.
			function fmapLoaded():void {
				fmapList = XML(fmapLoader.data)
				feedisLoaded = 1
			}
			//
		}
	}
}

    You can also use the code block below in your document class to check to see if the feed is ready to use. This can let you use a simple loading animation until the value is = 1.

    addEventListener(Event.ENTER_FRAME,traceFeed)
			function traceFeed(e:Event):void {
				switch (feedAggregator.feedisLoaded) {
					case 1 :
						removeEventListener(Event.ENTER_FRAME, traceFeed)
						break
				}
			}



    Related Articles:

  • AS3: Homegrown particles
  • AS3: Alternate row colors on dynamic movieclips
  • AS3: Floating Tool Tip using currentTarget
  • AS3: Using currentTarget to listen for your buttons
  • AS3: Learn how to create a re-usable class


    • August 1, 2008 | Filed Under ActionScript, Work

    3 Comments 

    Flex 3: Populate a DataGrid with an ArrayCollection

    In this tip I start off by creating a “initial load” method that creates the ArrayCollection that we will use to populate the datagrid. Be sure to set creationComplete=”methodName” within your application tag, or if using an MXML component your main tag. This tells the MXML document to call that method on completion of creating the page. You can use others like enterFrame, initialize, etc. as well.

    ArrayCollection Demo




    Begin by setting the creationComplete event in the main tag to call the initData method.

    1
2
3
4

    <mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute"
	creationComplete="initData()">





    Next, use the following block to create the ArrayCollection, as well as set the dataprovider for your datagrid:

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

    <mx:Script>
	<![CDATA[
		import mx.collections.ArrayCollection
 
		//Create a new variable and type it as an ArrayCollection
		public var itemsAC:ArrayCollection
 
		//Create the initData method, invoked on creationComplete from the Application tag
		private function initData():void {
		//Give the new ArrayCollection some values
			itemsAC = new ArrayCollection(["Cell Phone", "Laptop", "Desk"])
 
		//Set the data provider of your datagrid to the newly created ArrayCollection
			myDataGrid.dataProvider = itemsAC
		 }	
	]]>
</mx:Script>





    Last create the dataGrid that will hold the new ArrayCollection

    1
2
3
4
5

    <mx:DataGrid id="myDataGrid" width="400" height="400" x="10" y="10">
	<mx:columns>
		<mx:DataGridColumn dataField="col_01" headerText="Available Items"/>
	</mx:columns>
</mx:DataGrid>





    And finally, the entire MXML structure…

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

    <?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute"
	creationComplete="initData()">
 
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection
 
			//Create a new variable and type it as an ArrayCollection
			public var itemsAC:ArrayCollection
 
			//Create the initData method, invoked on creationComplete from the Application tag
			private function initData():void {
			//Give the new ArrayCollection some values
				itemsAC = new ArrayCollection(["Cell Phone", "Laptop", "Desk"])
 
			//Set the data provider of your datagrid to the newly created ArrayCollection
				myDataGrid.dataProvider = itemsAC
			 }	
		]]>
	</mx:Script>
 
	<mx:DataGrid id="myDataGrid" width="400" height="200" x="10" y="10">
		<mx:columns>
			<mx:DataGridColumn dataField="col_01" headerText="Available Items"/>
		</mx:columns>
	</mx:DataGrid>
 
</mx:Application>





    If you have any questions or problems please feel free to register and post comments.
    -Brian



    Related Articles:

  • AS3: Homegrown particles
  • AS3: Alternate row colors on dynamic movieclips
  • AS3: Floating Tool Tip using currentTarget
  • AS3: Using currentTarget to listen for your buttons
  • AS3: Learn how to create a re-usable class


    • July 30, 2008 | Filed Under ActionScript, Flex, Work

    Leave a Comment 

    Project management with BaseCamp

    I use BaseCamp every day at work personally and with all my freelance clients. Check it out.

    Basecamp project management and collaboration


    July 28, 2008 | Filed Under Tricks of the Trade

    Leave a Comment 

    No Country for Ole Rodge!

    Those of you that know Rodge will get it!

    Roger Blanton

    No Country

    July 25, 2008 | Filed Under Funny

    Leave a Comment 

    The process of design



    July 25, 2008 | Filed Under Funny

    Leave a Comment 

    TalentLink Timeline

    *Updated: Below is some new screen grabs of the timeline with more visual enhancements.

    A recent project at King was for me to create a time line detailing upcoming and past events for the TalentLink initiative. The time line is driven by XML and created in Flash CS3. The time line scrolls horizontally to allow unlimited quarter and year entries.

    note - To preserve any complications with compliance of King Pharmaceuticals I am only posting simple screenshots of applications that I have created. Any content that may be shown is strictly for demonstration purposes of my portfolio.

    TalentLink

    TalentLink

    TalentLink

    TalentLink

    TalentLink

    July 24, 2008 | Filed Under ActionScript, King Pharmaceuticals, Uncategorized, Work

    Leave a Comment 

    Interactive US Map

    *Updated: Below is a new version of the US map for Zenith Fuel Systems. Next in line is a European version for their sister site.

    I created a Flash based map of the US recently for a client needing to show distributors for each state. Click here to see the interactive version.

    US Map

    US Map

    July 24, 2008 | Filed Under ActionScript, Work

    Leave a Comment 

    Yankee Game - July 22, 2008

    July 23, 2008 | Filed Under Uncategorized

    Leave a Comment 

    Next Page →



    Alltop, all the top stories