Skip to main content
markerline
Inspiring
October 16, 2013
Answered

RePost: center movie clips dynamically, as3.0 ?

  • October 16, 2013
  • 1 reply
  • 2988 views

I have a question that was somewhat answered but I now have some problems with, as far as implementing the solution is concerned.  I posted in August and I have revisited the file only now to see if I can create the changes necessary to center my mc's dynamically as they are drawn on the stage at runtime.  They need to center to themselves rather than having their registration points in the top left corner, per display object.

Here is the thread:

http://forums.adobe.com/message/5760947#5760947

Thanks in advance for any responses.

-markerline

This topic has been closed for replies.
Correct answer sinious

I attempted to reply yesterday but the forums became under maintenance (as we all re-logged in after).

What I tried to post before the system went down was to give a single example as you had mentioned. To remove the complexity of the rest of the app so this can be understood alone and then implemented into your larger system.

Centering via container in code is very simple as long as you can grab a hold of the shape in code as well.

Here's a complete AS3 example of centering a single object inside a container. I just want you to paste this into a new AS3 doc so you can tell me you understand how it works. After that, the more complex multi-object container in a container approach comes in:

e.g. 2 squares rotating:

import flash.display.Shape;

import flash.utils.Timer;

import flash.events.TimerEvent;

import flash.display.Sprite;

// start rotation loop using a Timer to turn all objects

var moveTimer:Timer = new Timer(10,0);

// function to rotate objects

moveTimer.addEventListener(TimerEvent.TIMER, handleTimer);

// draw a rect shape

var redrect:Shape = new Shape();

redrect.graphics.lineStyle(3,0x0,1,true);

redrect.graphics.beginFill(0xFF0000);

redrect.graphics.drawRect(0,0,100,100);

redrect.graphics.endFill();

addChild(redrect);

// position at x:100 / y:100 on stage

redrect.x = 150;

redrect.y = 200;

// now draw a blue square but with a container while centering the shape

// container

var blueContainer:Sprite = new Sprite();

addChild(blueContainer);

// draw a rect shape

var bluerect:Shape = new Shape();

bluerect.graphics.lineStyle(3,0x0,1,true);

bluerect.graphics.beginFill(0x0000FF);

bluerect.graphics.drawRect(0,0,100,100);

bluerect.graphics.endFill();

blueContainer.addChild(bluerect);

// position in center of container (subtract half width/height)

//-------------centering code----------------

bluerect.x -= bluerect.width / 2;

bluerect.y -= bluerect.height / 2;

//-------------------------------------------

// position container

blueContainer.x = 400;

blueContainer.y = 200;

// start timer which invokes function below

moveTimer.start();

// rotate the red rect (upper left reg) and blue (objects centered);

function handleTimer(e:TimerEvent):void

{

          // just rotate both to see the registration

          redrect.rotation += 2;

          blueContainer.rotation += 2;

}

Now do understand I know I can draw my bluerect with negative coordinates to achieve the same thing inside the shape (e.g. -50,-50,100,100) but the point here is containing potentially a complex object into a single object so the entire outer contents can be measured and rotated from a single center point. That comes after this simple code is understood.

1 reply

sinious
siniousCorrect answer
Legend
October 16, 2013

I attempted to reply yesterday but the forums became under maintenance (as we all re-logged in after).

What I tried to post before the system went down was to give a single example as you had mentioned. To remove the complexity of the rest of the app so this can be understood alone and then implemented into your larger system.

Centering via container in code is very simple as long as you can grab a hold of the shape in code as well.

Here's a complete AS3 example of centering a single object inside a container. I just want you to paste this into a new AS3 doc so you can tell me you understand how it works. After that, the more complex multi-object container in a container approach comes in:

e.g. 2 squares rotating:

import flash.display.Shape;

import flash.utils.Timer;

import flash.events.TimerEvent;

import flash.display.Sprite;

// start rotation loop using a Timer to turn all objects

var moveTimer:Timer = new Timer(10,0);

// function to rotate objects

moveTimer.addEventListener(TimerEvent.TIMER, handleTimer);

// draw a rect shape

var redrect:Shape = new Shape();

redrect.graphics.lineStyle(3,0x0,1,true);

redrect.graphics.beginFill(0xFF0000);

redrect.graphics.drawRect(0,0,100,100);

redrect.graphics.endFill();

addChild(redrect);

// position at x:100 / y:100 on stage

redrect.x = 150;

redrect.y = 200;

// now draw a blue square but with a container while centering the shape

// container

var blueContainer:Sprite = new Sprite();

addChild(blueContainer);

// draw a rect shape

var bluerect:Shape = new Shape();

bluerect.graphics.lineStyle(3,0x0,1,true);

bluerect.graphics.beginFill(0x0000FF);

bluerect.graphics.drawRect(0,0,100,100);

bluerect.graphics.endFill();

blueContainer.addChild(bluerect);

// position in center of container (subtract half width/height)

//-------------centering code----------------

bluerect.x -= bluerect.width / 2;

bluerect.y -= bluerect.height / 2;

//-------------------------------------------

// position container

blueContainer.x = 400;

blueContainer.y = 200;

// start timer which invokes function below

moveTimer.start();

// rotate the red rect (upper left reg) and blue (objects centered);

function handleTimer(e:TimerEvent):void

{

          // just rotate both to see the registration

          redrect.rotation += 2;

          blueContainer.rotation += 2;

}

Now do understand I know I can draw my bluerect with negative coordinates to achieve the same thing inside the shape (e.g. -50,-50,100,100) but the point here is containing potentially a complex object into a single object so the entire outer contents can be measured and rotated from a single center point. That comes after this simple code is understood.

markerline
Inspiring
October 16, 2013

i was unaware of the maintenance issue and since i didnt see a response i thought you had unsubscribed from the thread, unable thus to see my latest post.

in any case i must be having difficulty with the container and child.  the code i have in several different versions doesnt work.  i guess i am missing either the fundamental actionscript concepts or the math or both.

sinious
Legend
October 16, 2013

Hi Sinious,

I actually do understand that code and I tried to implement something as such.

bluerect.x -= bluerect.width / 2;

bluerect.y -= bluerect.height / 2;

I even tried it the other way around yesterday since I was using an EnterFrame event:

bluerect.x =- bluerect.width / 2;

bluerect.y =- bluerect.height / 2;

With EnterFrame it would keep subtracting infinitely and disappear off the stage in your method with "-=" .  At least that's what I observed yesterday.


Do you need to center it each frame? Is the object irregular in size? If so then on each frame just perform the full operation rather than the convenience version:

bluerect.x = -1 * (bluerect.width / 2);

bluerect.y = -1 * (bluerect.height / 2);