How to create a table of elements with different content - actionscript-3

Question

How do i create a 3x3 table (in tabular form) and every cell has a different image.
But i want to create the cell and then in it add the picture of the icon, not make the icon an movieClip and directly adding it after that.
I`m trying to have 3 rows :
1st row will be Time1 ,Time2 ,Time3.
2nd row Turbo1 ,Turbo2 ,Turbo3
3rd row will be something like Speed1, Speed2, Speed3 .
Something like the picture below.
(in blue are the names of the bitmaps/movieClips/names of the pictures I am using for every icon)
i was thinking of doing it like this
private var testArr:Array = new Array();
public function MainClass()
{
for(var i:int=0; i<3; i++)
{
testArr[i]= new Array();
for(var j:int = 0 ; j<3 ; j++)
{
testArr[i][j] = new IconClass();
this.addChild(testArr[i][j]);
testArr[i][j].x=testArr[i][j].width*j + j*10;
testArr[i][j].y=testArr[i][j].height*i + i*10;
testArr[i][j].addEventListener(MouseEvent.CLICK, somethingFancy );
}
}
}
and on new IconClass(); i would pass the image that it needs to have. But! how would it be done ??

Answer 1

So as discussed there are a couple of useful designs. For handling the different images for different states I would create an Icon class that is a display object that handles what images to load for the different states.
That would look something like:
package
{
import flash.display.Sprite;
public class icon extends Sprite
{
private var _images:Vector.<Object>;
public var isEnabled:Boolean;
public function icon() {
_images = new Vector.<Object>();
}
//in this functions all the images you need for different states
private function addImage( state:String, bitmap:Bitmap ):void {
_images.push( { state:state, image:bitmap } );
}
//change the image of the sprite, based on the state ( i.e. - mouseOver, mouseOut )
public function changeState( state:String ):void {
var i:int;
state = isActive ? "enabled" + state : "disabled" + state;
for ( ; i < _images.length; i++ ) {
if ( _images[i].state == state ) {
updateImage( _images[i].image );
}
}
}
private function updateImage( bitmap:Bitmap ):void {
//do image changing here to new bitmap
}
}
}
And what is happening here is the icon class will have a vector of objects that associate the correct bitmap to the correct state. Now how that would be setup in your table might look something like this:
private var _iconList:Vector.<icon>;
public function MainClass():void {
createSprites();
_iconList = new Vector.<icon>();
var rows :int = 3,
columns :int = 3,
startX :int = 0, //set to some x coordinate
startY :int = 0, //set to some y coordinate
padding :int = 5,
i :int,
j :int,
currentIndex:int;
for ( i = 0; i < rows; i++ ) {
for ( j = 0; j < columns; j++ ) {
_iconList[currentIndex].x = startX + i * ( _iconList[currentIndex].width + padding );
_iconList[currentIndex].y = startY + j * ( _iconList[currentIndex].height + padding );
_iconList[currentIndex].addEventListener( MouseEvent.MOUSE_OVER, onMouseOver );
_iconList[currentIndex].addEventListener( MouseEvent.MOUSE_OUT, onMouseOut );
addChild( _iconList[currentIndex] );
currentIndex++;
}
}
}
private function createIcons():void {
var i:int;
for ( ; i < 9; i++ ) {
var ic:icon = new icon();
ic.addImage( "disabledMouseOver", "yourImageGetter()" ); //you're using a getAtlas() to a bitmap
ic.addImage( "disabledMouseOut", "yourImageGetter()" );
ic.addImage( "enabledMouseOver", "yourImageGetter()" );
ic.addImage( "enabledMouseOut", "yourImageGetter()" );
_iconList.push( ic );
}
}
private function onMouseOver( e:MouseEvent ):void {
var ic:icon = e.target as icon;
ic.changeState( "MouseOver" );
}
private function onMouseOut( e:MouseEvent ):void {
var ic:icon = e.target as icon;
ic.changeState( "MouseOut" );
}
So what's happening here:
We create an icon class that has storage for the different bitmap images and different states to associate them with
In our main class, we do createIcons() which makes new icons and adds the different images for the different states
Then we create our table with the list of icons in _iconList and add the mouse event listeners to each of them.
The listeners onMouseOver and onMouseOut call the targeted icon changeState() which will then handle the correct image to switch between.
Edit:
The isEnabled boolean is going to be used at your discretion ( as discussed in chat ) from another view to control icons that are enabled for the user and which MOUSE_OVER and MOUSE_OUT states to use.

Answer 2

private var iconArr:Array = new Array();
private var testArr:Array = new Array();
public function MainClass()
{
iconArr.push(
[
"time1",
"time2",
"time3"
],
[
"turbo1",
"turbo2",
"turbo3"
],
[
"speed1",
"speed2",
"speed3"
]
);
for(var i:int=0; i<3; i++)
{
testArr[i]= new Array();
for(var j:int = 0 ; j<3 ; j++)
{
//pass in a string, the icon will change depending on that string
testArr[i][j] = new IconClass(iconArr[i][j]);
this.addChild(testArr[i][j]);
testArr[i][j].x=testArr[i][j].width*j + j*10;
testArr[i][j].y=testArr[i][j].height*i + i*10;
testArr[i][j].addEventListener(MouseEvent.CLICK, somethingFancy );
}
}
}
May not fit your needs, in which case you should edit it.