CODEWITHSUNDEEP
actionscript-3
Joel
Joel

Reputation: 247

Creating a reusable shape in AS3 based on a user's selections

I'm currently working on an educational Flash application on the Adobe CS5 Flash Professional platform, using the ActionScript 3 programming language.

In my program the user is required to plot a shape onto a 4x4 squared grid, which I’ve generated using a For Loop that runs through sixteen times.

As the For Loop constructs the grid, it adds 16 child instances of the same 23x23 pixel squared MovieClip, laid out equally in four rows and four columns and each of these MovieClip is assigned a unique ID number ranging from 1-16 and a Mouse Down listener event, ready for user interaction.

Should the user click on a square in the grid, during the course of plotting and selecting their shape, the MovieClip’s colour will firstly change to signify to the user it has been selected for inclusion.

Secondly I’ve also set-up a Boolean based Array [0-15], which links to the corresponding ID numbers of the grid, so for example if I selected the top left square in my 4x4 grid, the [0] property of my Boolean array would change from false to true and likewise if I selected the third square along on the second row of my grid the [6] property of my array would do the same and so on.

Now using this technique and referencing the array, I can always know which blocks have been chosen by my user and by running another For Loop on a subsequent slide in my program, I’ve managed to output, based on my ‘selection’ Boolean array, the same shape that my user has designed, in the confines of another 4x4 grid, with the selected blocks colour changed from grey to black, if any array value is set to True.

Now my problem is that my user will subsequently need to plot their designed shape, produced on the first grid, onto a larger second grid in large volumes (up to 8-9 times on some occasions). This grid is considerably larger than 4x4 one, being 24 x 12 to be exact (288 blocks).

Now what I need is when my user clicks on this second larger grid I want an output of their designed shape to be added to the stage as a brand new MovieClip.

But importantly the shape needs to be cropped down. For example if the user made a square shape on the first grid by selecting blocks 2,3,6,7; I don’t want a 16 block MovieClip (92x92 pixels, based on my 23x23 pixel blocks) being added to the bigger grid with four blocks shaded a different colour, I want a 4 block, squared shape (46 x 46 pixels, based on my 23x23 blocks) to be added, from the top-left grid square you select on the second grid.

Ideally I’d like to create my user’s plotted shape programmatically using the Shape Drawing tool and do this within a function, so I can then run the function each time the user enters the second grid area and update the user’s shape, should the user had gone back and amended it in the first grid. This would also give me the scope to also change the shape colour prior to adding the child of it to my stage, which is another area of functionality I need and another reason why I’d like to do this shape programmatically.

I imagine capturing the x/y co-ordinates of the blocks from the first grid in a further array and subsequently searching through that array to find the first block instance and then draw the shape from this point, could be the way forward but that is as far as my thinking has taken me.

Any ideas or suggested reading on how to do this would be very welcome. Many Thanks.

Upvotes: 0

Views: 401

Answers (1)

Vesper
Vesper

Reputation: 18747

My suggestion is that you use bitmaps as your base class for such a shape, initialize it with full transparence, then draw() your MCs on that bitmap.bitmapData with adjusted X&Y values, then you place that bitmap over your "larger grid" using supplied X&Y.

var bd:BitmapData=new BitmapData(23*4,23*4,true,0x0);
var mat:Matrix=new Matrix();
mat.tx=-1*LeftCornerX;
mat.ty=-1*LeftCornerY;
for (i=0;i<16;i++) if (BlockMCsSelected[i])  bd.draw(BlockMCs[i],mat);
var bm:Bitmap=new Bitmap(bd);
bm.x=SuppliedX;
bm.y=SuppliedY;
LargerGrid.addChild(bm);

Basically, this should do if you specify your input data correctly. But if you need it to receive events, encapsulate this bitmap into a Sprite object, that one can process events, and give coordinates to sprite, not bitmap.

Upvotes: 1

Related Questions