[Flep]

Greetings to all!

In the tutorials of Actionscript 3.0, we saw what are Arrays and how much they can be important using Flash CS3.

Also, we saw in details the use of the method splice of the Array class.

Why would I want to remind you all of the above"

Everything seen first will be useful to explain how to create a grid of squares with Flash with every single square being selection able and not.

Basically, on click of the mouse on one of the square in the grid, the square itself, if not already selected, will be added to an Array. Otherwise, if already selected, it will be removed from the Array.

To do this, we will need the method indexOf of the Array class of Actionscript 3.0.

I create a FLA and I save it as "main.fla".
Into which, I have a unique dynamic text field that will display the expansion or collapse of the Array.
I create the Document Class, an AS file saved as "Main.as", implemented the following way:

package
{
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.text.TextField;
	import caurina.transitions.Tweener;
	
	public class Main extends MovieClip
	{
		private const TOTAL_SQUARES:int=100;
		private const ROW_COUNT:int=10;
		private const SIDE:int=40;
		
		private var clips_array:Array=new Array();
		private var temp_array:Array=new Array();
		
		public function Main()
		{
			addEventListener(Event.ADDED_TO_STAGE,init);
		}
		
		private function init(evt:Event):void
		{
			removeEventListener(Event.ADDED_TO_STAGE,init);
			
			stage.frameRate=31;
			
			createSquares();
			addListeners();
		}
		
		private function createSquares():void
		{
			for(var i:int=0;i < TOTAL_SQUARES;i++)
			{
				var fill_mc:MovieClip=new MovieClip();
				fill_mc.name='fill_'+i+'_mc';
				fill_mc.graphics.beginFill(0x666666,1);
				fill_mc.graphics.drawRect(0,0,SIDE,SIDE);
				fill_mc.graphics.endFill();
				fill_mc.x=10+Math.floor(i/ROW_COUNT)*SIDE;
				fill_mc.y=10+(i%ROW_COUNT)*SIDE;
				
				var stroke_mc:MovieClip=new MovieClip;
				stroke_mc.graphics.lineStyle(1,0x333333,1);
				stroke_mc.graphics.drawRect(0,0,SIDE,SIDE);
				stroke_mc.graphics.endFill();
				stroke_mc.x=fill_mc.x;
				stroke_mc.y=fill_mc.y;
				
				var field:TextField=new TextField();
				field.selectable=false;
				field.text=i.toString();
				field.width=field.textWidth+5;
				field.height=field.textHeight+5;
				field.x=fill_mc.x;
				field.y=fill_mc.y;
				
				var clip:MovieClip=new MovieClip();
				clip.id=i;
				clip.selected=false;
				clip.addChild(fill_mc);
				clip.addChild(stroke_mc);
				clip.addChild(field);
				addChild(clip);
				
				clip.mouseChildren=false;
				clip.buttonMode=true;
				
				clips_array.push(clip);
			}
		}
		
		private function addListeners():void
		{
			for(var i:int=0;i < clips_array.length;i++)
			{
				clips_array[i].addEventListener(MouseEvent.MOUSE_OVER,setOver);
				clips_array[i].addEventListener(MouseEvent.MOUSE_OUT,setOut);
				clips_array[i].addEventListener(MouseEvent.CLICK,setClick);
			}
		}
		
		private function setOver(evt:MouseEvent):void
		{
			var clip:MovieClip=evt.target as MovieClip;
			var clip_child:MovieClip=clip.getChildByName('fill_'+clip.id+'_mc') as MovieClip;
			if(!clip.selected)
				Tweener.addTween(clip_child,{_color:0x999999,time:.6,transition:"easeOutQuad"});
		}
		
		private function setOut(evt:MouseEvent):void
		{
			var clip:MovieClip=evt.target as MovieClip;
			var clip_child:MovieClip=clip.getChildByName('fill_'+clip.id+'_mc') as MovieClip;
			if(!clip.selected)
				Tweener.addTween(clip_child,{_color:0x666666,time:.6,transition:"easeOutQuad"});
		}
		
		private function setClick(evt:MouseEvent):void
		{
			var clip:MovieClip=evt.target as MovieClip;
			var clip_child:MovieClip=clip.getChildByName('fill_'+clip.id+'_mc') as MovieClip;
			if(!clip.selected)
			{
				temp_array.push(clip.id);
				Tweener.addTween(clip_child,{_color:0xCC9900,time:.6,transition:"easeOutQuad"});
			}
			else
			{
				temp_array.splice(temp_array.indexOf(clip.id),1);
				Tweener.addTween(clip_child,{_color:0x666666,time:.6,transition:"easeOutQuad"});
			}
			
			clip.selected=!clip.selected;
			
			info_txt.text=temp_array.toString();
		}
	}
}

The result (select or deselect the numbers in the grid):

Let us analyse the code:

In this script there is nothing that has not been seen or explained on FlepStudio other then the line where I use the method indexOf of the Array Class.

Quickly:

- in the method createSquares, I create a serial of square MovieClip (one as background, one for the border and one containing both background and border) with the related text field and I attach them to the stage.

- in the method addListeners, I add the needed listeners to the mouse event
- in the methods setOver, setOut and setClick, I control the events assigned to the actions of the mouse

- the Tweens are realised using the Tweener by Zeh Fernando, explained in the tutorial: Caurina Tweener

- now are the lines to which we need to pay attention (they are inside the function setClick):

if(!clip.selected)
{
temp_array.push(clip.id);
Tweener.addTween(clip_child,{_color:0xCC9900,time: .6,transition:"easeOutQuad"});
}
else
{
temp_array.splice(temp_array.indexOf(clip.id),1);
Tweener.addTween(clip_child,{_color:0x666666,time: .6,transition:"easeOutQuad"});
}

If the clicked clip has the property "selected" to false, it means that it has not been selected first, so I add it to temp_array the id of the clip (assigned when created) and I carry out the colour tween.
Instead, if the property selected of clip is true, it means that the clip has already been selected and so I need to remove its id from temp_array.
To do it, the method splice is not enough as it does not guarantee that the clip"s id is equal to its position or index in the array.
We can have a guaranteed result, using the method indexOf as passing to it a value, it returns the index for that value.
So I tell to do a splice of temp_array with the index passed by indexOf(id of the clicked clip).

See you soon and stay tuned!

[janicehyy]

Hi Flep, I test your script but i found some errors when i export it to swf. the errors are:

"1120:Access of undefined property Tweener" in Main.as file line 90, 98, 108 and 113.
"1120:Access of undefined property info_txt" in Main.as file line 118.
"1172:Definition caurina.transitions.Tweener could not be found" in Main.as file line 7.

What should i do now?