actionscript issue adding shape to container

Question

I don't know how to describe this problem but I will try to be clear enought. I am doing an actionscript exercise where I have a DisplayObjetct Container defined as Sprite, and what I want is to add ramdomizely circles with a random radio length between 50 and 100.

The Container called "gameZoneContainer_sp" has been added to the displaylist in the Main class, and everytime the user change the size of the stage the container set its new values of width and height.

Here is the code of what i am saying:

private function refreshScreen(ev:Event= null ):void{

        // Remember: we can know stage dimensions accessing to:
        // stage.stageWidth
        // stage.stageHeight

        //CONSTANTS DEFINITION OF MARGIN
        const margen:Number=25;

        //LOCAL VARIABLES DEFINITION
        var cercleWidth:Number, cercleHeight:Number;
        var invaderWidth:Number, invaderHeight:Number;
        var containerWidth:Number, containerHeight:Number;
        var logoWidth:Number, logoHeight:Number;

        //STORING DIMENSIONS
        cercleWidth=addCercle_bt.width;
        cercleHeight=addCercle_bt.height;
        invaderWidth=addInvader_bt.width;
        invaderHeight=addInvader_bt.height;
        containerWidth=gameZoneContainer_sp.width;
        containerHeight=gameZoneContainer_sp.height;
        logoWidth=logoUOC_sp.width;
        logoHeight=logoUOC_sp.height;

        //SET HORIZONTAL POSITION OF THE ELEMENTS
        addCercle_bt.x=(stage.stageWidth/2)+margen;
        addInvader_bt.x=(stage.stageWidth/2)-(invaderWidth+margen);
        gameZoneContainer_sp.x=margen;
        logoUOC_sp.x=stage.stageWidth-(logoWidth+margen);

        //SET VERTICAL POSITION OF THE ELEMENTS
        addCercle_bt.y=stage.stageHeight - (cercleHeight+margen);
        addInvader_bt.y=stage.stageHeight-(invaderHeight+margen);
        gameZoneContainer_sp.y=logoHeight+margen*2;
        logoUOC_sp.y=margen;

        //SET DIMENSIONS OF CONTAINER gameZoneContainer_sp
        gameZoneContainer_sp.width=stage.stageWidth-(margen*2);
        gameZoneContainer_sp.height=stage.stageHeight-(margen*4)-invaderHeight-logoHeight;

    }

    /* THIS METHOD ADD A CIRCLE TO THE CONTAINER  gameZoneContainer_sp */
    private function addCercle(ev:MouseEvent):void {
        // Create new instance of Cercle
        // and add it to gameZoneContainer_sp

        //CONSTANT DEFINITIONS
        const minRadio:Number=50, maxRadio:Number=100;

        //LOCAL VARIABLES DEFINITIONS OF RADIO, COLOR AND CIRCLE
        //THE RADIO CHOOSE A RANDOM VALUE BETWEEN 50 AND 100
        var radio:Number=minRadio+(maxRadio-minRadio)*Math.random();
        var color:uint=Math.random() * 0xFFFFFF;
        var cercle:Cercle=new Cercle(color,radio);


        //
        var minPosX:Number=radio;
        var maxPosX:Number=gameZoneContainer_sp.width/2;
        var minPosY:Number=radio;
        var maxPosY:Number=gameZoneContainer_sp.height-(minPosY);


        // SET POSITION OF THE CIRCULE INSIDE THE CONTAINER
        cercle.x= minPosX + (maxPosX-(2*minPosX))*Math.random();
        cercle.y= minPosY + (maxPosY-(2*minPosY))*Math.random();
        cercle.drawCercle();
        gameZoneContainer_sp.addChild(cercle);
        refreshScreen(ev);

        //TRACING RESULTS...
        trace ("Added cercle!");    
        trace ("alto del contenedor: "+gameZoneContainer_sp.height);
        trace ("Posicion x: "+cercle.x);
        trace ("radio: "+radio);    
    }

        //DEFINITION OF THE CIRCLE CLASS
public class Cercle extends Sprite {
        private var _color:uint;
        private var _radio:Number;

        public function Cercle(color:uint,radio:Number){
            super();
            /* THE CLASS ACCEPT HEX VALUES.*/
            _color= color;
            _radio=radio;
            init();
        }

        public function init():void{
            drawCercle ();
        }
        //METHOD TO DRAW A CIRCLE
        public function drawCercle():void{
            var circle:Shape=new Shape();
            circle.graphics.beginFill(_color,1);
            circle.graphics.drawCircle(0,0,_radio);
            addChild(circle);

        }

    }

Here is my problem: When I add a circle it seems to be fine until I change the dimensions of the windows (the scene). Everytime I update the dimensions, the event execute the method refreshScreen from the main class which update the dimensions and positions of all elements in scene, but after that if i add a new circle, it change the container, and that is wrong because what I want is to add the circle IN the container.

Hope is not too long. Please any help would be great! Thank you in advance!!

************ HERE GOES THE SOLUTION ********************

//METHOD TO ADD A CIRCLE TO THE CONTAINER
private function addCercle(ev:MouseEvent):void {
    // Create new instance of Cercle
    // and add it to gameZoneContainer_sp
    const minRadio:Number=50, maxRadio:Number=100;
    var radio:Number=minRadio+(maxRadio-minRadio)*Math.random();
    var color:uint=Math.random() * 0xFFFFFF;

    // CHANGES///////

    // gameZoneContainer_sp IS 400X400 ORIGINALLY AND WE WANT TO PUT AN INSTANCE OF CIRCLE OBJETCT
    // cercle.x WILL PLACE IN minPosX = radio y maxPosy = 400 - radio
    // TAKING INTO ACCOUNT THAT ITS RADIO IS cercle.width/2
    // cercle.x WILL PLACE IN minPosX = cercle.width/2 y maxPosy = 400 - cercle.width/2
    // (SAME FOR  y)

    var cercle:Cercle=new Cercle(color,radio);

    // Cercle scale correction
    //cercle.width= radio/(gameZoneContainer_sp.width/400);
    //cercle.height= radio/(gameZoneContainer_sp.height/400);

    // Cercle positionning
    cercle.x = cercle.width/2 + ((400-cercle.width)*Math.random());
    cercle.y = cercle.height/2 + ((400-cercle.height)*Math.random());

    // PROPORTION CORRECTIONS
    //cercle.width = (2*radio)*gameZoneContainer_sp.width/400;


    //I ADD IT TO THE CONTAINER
    gameZoneContainer_sp.addChild(cercle);



    trace ("Added cercle!");    
    trace ("alto del contenedor: "+gameZoneContainer_sp.height);
    trace ("Posicion x: "+cercle.x);
    trace ("radio: "+radio);



}

Answer 1

This is what I think is going on. You basically have 2 problems.

1. You're adding circles using math meant to adjust for the position of the game window, but you don't need that if you are adding it to the game window container. This is resulting in circles that are being added too far to the right.
2. Something about your Air setup is making the screen contents scale to show all the contents resulting in everything shrinking. (If we fix the first problem, this one will become inconsequential).

So instead of:

cercle.x = minPosX ...etc

do:

cercle.x = Math.Random()*gameZoneContainer_sp.width;

Do likewise for the y value.

You see, the local origin point of an objects container will be that objects (0,0) point locally. So the top left corner of this game container will be the cercle's (0,0) point and therefore there is no need to adjust it to the right by the amount that you do using minPosX. This is assuming you have not made your game container offset from the default somehow (i.e. When you created the rectangle, you did so using (0,0,width,height) and not something like (xOffset,yOffset,width,height)).