Canvas with background squares

Question

I have a requirement to create a canvas with squares as background (see attached image1).  When the user resizes the canvas , the squares size should get resize automatically.
When the user double clicks on this canvas I need to create the bigger square. This bigger square should align to the nearest background squares(see the Image2)
Is there shortcut in implementing this requirement ? Please help me to implement this requirement.

Answer 1

Hi
You'll need to do something like below, create a custom comp and draw what you want on it.
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" >
<mx:Script>
<![CDATA[
override protected function updateDisplayList(uw:Number, uh:Number):void {
super.updateDisplayList(uw,uh);
var xpos:int = 0;
// Divide width by no of lines you want will cause resize as comp redraws
var xGap:Number = uw/10; 
var ypos:int = 0;
var yGap:Number = uh/10;
graphics.beginFill(0xffffff,1)
graphics.drawRect(0,0,uw,uh);
graphics.endFill();
while (xpos<uw) {
graphics.lineStyle(1,0xcccccc);
graphics.moveTo(xpos,0);
graphics.lineTo(xpos,uh);
xpos += xGap;
while (ypos<uh) {
graphics.lineStyle(1,0xcccccc);
graphics.moveTo(0,ypos);
graphics.lineTo(uw,ypos);
ypos += yGap;
]]>
</mx:Script>
</mx:Canvas>
Hope this helps you make a start
Andrew