define the location of pictures in a 2 by 2 grid

Report · May 09, 2014

Hello everyone,

I have a 2 by 2 grid, in which I want two pictures to be presented simulataneously: one always left and one always right. Also, I want a red cirkle to appear on the same place as either the left or the right picture.

The grid is drawn in this way:

grid	= new Sprite();
		grid.x	= stage.stageWidth	* .5;
		grid.y	= stage.stageHeight	* .5;
		with( grid.graphics ){
			lineStyle( 10, 0x000000 );
			moveTo( -250, -250 );
			lineTo( -250, 250 );
			moveTo( -250, 250 );
			lineTo( 250, 250 );
			moveTo( 250, 250 );
			lineTo( 250, -250 );
			moveTo( 250, -250 );
			lineTo( -250, -250 );
			moveTo( 0, -250 );
			lineTo( 0, 250 );
			moveTo( -250, 0 );
			lineTo( 250, 0 );
		}

The upper-left-quartile of the gird: I call Q1

The upper-right is Q2

The lower-left is Q3

The lower-right is Q4

I want to define the location of the stimuli like this:

switch( leftStimulusLocation ) {

case Q1: leftStimulus.x = ...; leftStimulus.y = ...; break;

case Q3: leftStimulus.x = ...; leftStimulus.y = ...; break;

}

switch( rightStimulusLocation ) {

case Q2: rightStimulus.x = ...; rightStimulus.y = ...; break;

case Q4: rightStimulus.x = ...; rightStimulus.y = ...; break;

}

// determine x and y coordinates of selector based on location (Q1/Q2/Q3/Q4)

switch( selectorLocation ) {

case Q1: selector.x = ...; selector.y = ...; break;

case Q2: selector.x = ...; selector.y = ...; break;

case Q3: selector.x = ...; selector.y = ...; break;

case Q4: selector.x = ...; selector.y = ...; break;

}

The selector is the red cirkle that I use.

I cannot seem to figure out the right coordinates for the different quartiles. I want the pictures to be displayed exactly in the center of the quartile of the grid.

Also, I need the coordinates to be relative to the stage or grid instead of absolute, so the location won't change if I, for example, change the size of the grid.

I figured out that the pictures are added to the stage with their left uppercorner as reference point, but the cirkle (which I also have drawn using the graphics class) has its center as reference point. So I will need different coordinates for this.

Can someone help me?

With kind regards,

Johanna Quist

Report · May 09, 2014

I'd do this in a simpler way. What I would do is create a two-frame movie clip. In the first frame, I'd have a rectangle. In the second frame, I'd add a circle in the middle. I would place four on the stage, positioned with the align tools to be exactly where they need to be for your grid to look like you want it. Let's assume you have 4 instances, titled like this

mc1 mc2

mc3 mc4

Let's assume they are placed in a MovieClip with a Base Class of Grid. It might look like this:

public class Grid {

     public var mc1:MovieClip;

     public var mc2:MovieClip;

     public var mc3:MovieClip

     public var mc4:MovieClip;



     public function Grid() {

          super();

          var loops:int = numChildren;

          //stop any mcs that have names starting in "mc"

          for (var i:int=0; i<loops; i++) {

               var child:MovieClip = getChildAt(i) as MovieClip;

               if (child && child.name.indexOf('mc')==0) {

                    child.gotoAndStop(1);

               }

          }

     }

     public function selectCell(cellNo:int):void {

          var cellName:String = 'mc' + cellNo.toString();

          var loops:int = numChildren;

          //loop through children and set the frame to 1 for deselected or 2 for selected

          for (var i:int=0; i<loops; i++) {

               var child:MovieClip = getChildAt(i) as MovieClip;

               if (child && child.name.indexOf('mc')==0) {

                    if (child.name==cellName) {

                         child.gotoAndStop(2);

                    } else {

                         child.gotoAndStop(1);

                    }

               }

          }

     }

}