performance issues with vectors in IOS

What about this ?

import flash.display.Bitmap;

import flash.display.BitmapData;

import flash.display.Sprite;

import flash.events.*;

import flash.net.*;

[SWF(width='480',height='320',backgroundColor='#ffffff',frameRate='25')]

var SW=stage.stageWidth;

var SH=stage.stageHeight;

var bmpData:BitmapData=new BitmapData(SW,SH);

var imageLoader:Loader = new Loader();

imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);

stage.addEventListener(MouseEvent.CLICK,CLICKED);

imageLoader.load(new URLRequest("http://www.metakine.com/img/products/decompose/dog_image.jpg"));

function imageLoaded(e:Event) {

          imageLoader.width=SW;

          imageLoader.height=SH;

          var imageHolder:Sprite = new Sprite();

          imageHolder.addChild(imageLoader);

          bmpData.draw(imageHolder);

          var yourBitmap:Bitmap=new Bitmap(bmpData);

          addChild(yourBitmap);

          //this sprite will hold the grid

          var grid:Sprite = new Sprite();

          grid.graphics.lineStyle(1,0x000000,1);

          grid.graphics.beginFill(0x000000,0);

          //draw boder;

          grid.graphics.drawRect(0,0,SW-1,SH-1);

          grid.graphics.endFill();

          // draw virt lines;

          grid.graphics.lineStyle(1,0x000000,.2);

          for (var i=0; i<SW; i+=5) {

                    grid.graphics.moveTo(i, 0);

                    grid.graphics.lineTo(i, SH);

          }

          // draw horiz lines;

          for (i=0; i<SH; i+=5) {

                    grid.graphics.moveTo(0, i);

                    grid.graphics.lineTo(SW, i);

          }

          //draw the grid to the bmpData;

          bmpData.draw(grid);

}

function CLICKED(e:Event) {

          var cellX=Math.floor(mouseX/5);

          var cellY=Math.floor(mouseY/5);

          var RED=0x00FF00;

          var GREEN=0xFF0000;

          var COLOR

          if (cellX==correctX && cellY==correctY) {

                    COLOR=RED;

          } else {

                    COLOR=GREEN;

          }

          var drawCell:Sprite = new Sprite();

          drawCell.graphics.lineStyle(0,0x000000,0);

          drawCell.graphics.beginFill(COLOR,.5);

          drawCell.graphics.drawRect(0,0,5,5);

          drawCell.graphics.endFill();

          var ma:Matrix=new Matrix();

          ma.tx=cellX*5;

          ma.ty=cellY*5;

          bmpData.draw(drawCell,ma);

}

var correctX=Math.floor(SW*Math.random());

var correctY=Math.floor(SH*Math.random());

An alpha of 0 fill sounds very intensive, though I'm not sure in your case if it's possible to just have the border. Assuming I sort of understand what you're trying to do, here's what I'm thinking. Hopefully it helps.

Case 1. I'm guessing you want the alpha fill so hitArea can cover for the whole cell instead of just the border. A less intensive way is to separate the border and the fill. Make a cell with just the border (no fill), then make another cell with whatever fill and set visible = false. This way you get your see through window without computing the alpha.

Or.

Case 2. If there's no need for updating the visual of anything during interaction, I would suggest just blit the whole thing to begin with. Make a bitmapData and blit the image onto it. Then make another bitmapData and blit one cell (with alpha in the middle) onto it. Then blit the whole grid onto the first bitmapData with the second bitmapData. Then create a bitmap with the first bitmapData and put it in the displayList. This method doesn't support hitTest for those cells so you'll have to write up your own mouse events. Maybe something like this.

if(within the area of the image){

     var row:uint = Math.floor( (stage.mouseX - image.x) / 5); //cell with 5 pixels

     var col:uint = Math.floor( (stage.mouseY - image.y) / 5);

}

The second case should be really fast since all there is is just one bitmap and one event handler.

Anyways, I might be wrong so don't take my words for it.

what I am noticing so far is that vectors work like garbage. One simple thing would be to cacheAsBitmap=true on all vector objects.
Or draw these grids with a bitmapData object, don't use vectors. Also you don't even need the grid or any of the objects just check the mouseX and mouseY position on the click event handler. Ok maybe the grid is for visual effect ? then "draw" its vectors to a bitmap using the bitmapData.draw method then remove the vector grid from stage.

you said the winning "pixel" are you drawing a box on each pixel ? yikes