Display in full screen squares

Question

In Flash AS3, i created 25 squares with an event (when you click in one of the square it displays in full screen) it works on the square on the middle (it's normal because it's in the middle) but for the other it exceeds the screen... how can i display them all on the same middle?

package  {
import flash.display.*;
import flash.events.*;
import gs.*;
import flash.text.TextField;

public class Fenetre extends MovieClip {
    var mc:MovieClip;
    var bol:Boolean;

    public function Fenetre(pX,pY,largeur) {
        mc = new MovieClip(); // Instanciation de l'objet MovieClip
        mc.x = pX; // Détermination de sa positon en X
        mc.y = pY; // Détermination de sa positon en Y
        addChild(mc); // Affichage de l'objet mc
        mc.graphics.beginFill(0xFFFFFF); 
        mc.graphics.lineStyle(.1,255);//épaisseur contour, couleur de contour
        mc.graphics.drawRect(-largeur/2,-largeur/2,largeur,largeur);

        mc.graphics.endFill();
        mc.scaleX = mc.scaleY = .166; //.5=0.5
        //
        mc.buttonMode = true;
        mc.addEventListener(MouseEvent.CLICK,onClique);
    }
    private function onClique(e:MouseEvent):void {
        bol=!bol;
        if(bol){
            TweenLite.to(mc,1,{scaleX:1,scaleY:1,onComplete:plein_ecran()});
        }
        else {
            TweenLite.to(mc,1,{scaleX:.166,scaleY:.166});
        }
    }
    private function plein_ecran(){
        var num:int=MovieClip(parent).numChildren-1;
        MovieClip(parent).setChildIndex(this,num);
    }
    private function decharger(){
        //trace("decharger");
    }
    public function createTextField(x:Number, y:Number, width:Number, height:Number, nbre:int):TextField {
        var result:TextField = new TextField();
        result.x = x;
        result.y = y;
        result.width = width;
        result.height = height;
        result.text = nbre.toString();
        addChild(result);
        return result;
    }
}

}

I display my squares in the main class :

package  {
import flash.display.*;
import flash.text.TextFieldAutoSize;

[SWF(width=600,height=600)]
public class Main extends MovieClip {
    var fenetre:Fenetre;
    var xml:charge_xml;
    var milieuX,milieuY:int;
    var i,j,k,l,maxX,maxY:int;

    public function Main() {
        milieuX=milieuY=5;
        xml=new charge_xml();
        j=5;
        l=0;
        for(j=0;j<milieuY;j++) { // Gère les positions en X
            for(i=0; i<milieuX;i++) { // Gère les positions en Y et X - Remplissement des cases
                l++;
                fenetre = new Fenetre(100*i+100,100*j+100,600);
                fenetre.createTextField(100*i+100,100*j+100,20,20,l);
                addChild(fenetre);
            }
        }
    }
}

}

Sorry for my english ! I'm french ... !

Thanks for your help!

Answer 1

A quick fix for your problem would be to tween the square to the center position at the same time that you tween its scaleX and scaleY properties, and then back to its original position when the square goes back to small size. Your would need just a couple of small changes on your Fenetre class:

• First, store in class variables the original position of the square:

  public class Fenetre extends MovieClip {
    private var mc:MovieClip;
    private var bol:Boolean;
    private var x0:Number;
    private var y0:Number;
  
    public function Fenetre(pX:Number,pY:Number,largeur:uint) {
  
      x0 = pX;
      y0 = pY;
      //rest of your code is the same...
  
    }
  

• Then, on your Mouse.CLICK listener, tween to the center position and back. I think you are going to need to change the child index before starting the tweening, rather than onComplete:

  private function onClique(e:MouseEvent):void {
     bol=!bol;
  
     if(bol){
      plein_ecran();
      TweenLite.to(mc,1,{scaleX:1,scaleY:1,x: mc.width/2, y: mc.height/2});
     }
     else {
      TweenLite.to(mc,1,{scaleX:.166,scaleY:.166, x:x0, y:y0 });
     }
  }