(AS3) set MovieClip registration

[pi3rc3]

anyone know of a way to use actionscript3 to set the registration point of a MovieClip?

[TheCanadian]

The registration point is always (0, 0), so you'll have to draw your content around that.

[Dazzer]

but it might just be possible to simulate it with matrix transforms.

just maybe.

do let us know if you figure something out kudos!

[stringy]

Just go to the library,edit it in place and move it. Same as ever.

if you are creating dynamically(for whatever reason) do as TC says-

[Detrus]

http://www.oscartrelles.com/archives/dynamic_movieclip_registration_with_as3

workaround feels weird, can't figure how to add it to various masks from library, then to new DynamicMovie, then to array, but may as well set library items up manually.

[CarlLooper]

The "registration point" of a MovieClip is it's "negative" position relative to it's container.

For example, if you wanted your registration point to be 10 pixels down and 10 pixels right from top left corner of clip then you would set the clip's x,y as (-10,-10)

Apply masking to the container.

Move the clip around by moving it's container around (ie. not the clip)
Rotate the clip around by rotating either the clip (mask stays put) or it's container (mask rotates with clip).

Carl

[Detrus]

right, i wanted to use this dynamic registration class though. I could put Sprites into Sprites to fake a registration point, but then I'll want to do weird calculations and it will become a hassle adjusting containers' x,y positions.

i'm working with this code after i load an image, curLD is what's currently Loading.



function loaded(event:Event):void
{
var contents:Bitmap = event.target.content;
var myBitmapData:BitmapData = new BitmapData(contents.width, contents.height);
myBitmapData.draw(contents);
var bmp:Bitmap = new Bitmap(myBitmapData, "auto", true)

Pic[curLD] = new DynamicMovie()
Pic[curLD].setRegistration(bmp.width/2, bmp.height/2);

maskos[curLD] = new masky()
//maskos[curLD].x = bmp.width/2
//maskos[curLD].y = bmp.height/2

Pic[curLD].mask = maskos[curLD]
Pic[curLD].addChild(maskos[curLD])

Pic[curLD].addChild(bmp)
addChild(Pic[curLD])

Pic[curLD].x2 = 140*curLD - 1500
Pic[curLD].y2 = 18*curLD

curLD++
//etc..
}


not sure how to add the mask sprite to the new DynamicMovie(), i can hackily duplicate the class, and stick my shape into the symbol in the library of course. Just very confused by this AS3 attaching.

[CarlLooper]

Yes, it can be a bit of nightmare, I agree, but if you invent some rules for yourself, it can become a little bit more manageable.

The basic idea is to treat your container as the main object. But don't do anything with the container. Add children to it. Let the children implement all the display stuff. You can adjust the children up and down relative to the container. The container itself is empty, but it nevertheless represents your main object.

When you subsequently go to recompose the object (eg. attaching it to another object) you just use the container. It is your main object - one you can translate and rotate.

If you need to mask the object - create a new parent object, and add all your container objects (to be masked) to that parent.

ie. start at the bottom of the display list (building each container separately) and compose your way up to the top of the display list. Like building the pyramids, from the ground up. Your very last stone is added to the sky (the stage or root display object) - at which point your pyramid becomes visible.

Carl

[cayennecode]

I'm just thinking this one up on the spot, but I think this would be a nice center registration implementation


public class GUI extends Sprite
{
private var container:Sprite;

public function GUI()
{
addChild(container = new sprite());
}

public override function addChild(dObj:DisplayObject, coords:Object):void
{
dObj.x = coords.x;
dObj.y = coords.y;
container.addChild(dObj);
updateRegPoint();
}

private function updateRegPoint():void
{
container.x = -container.width>>1;
container.y = -container.width>>1;
}
}


Instance usage


var gui:GUI = new GUI();
gui.addChild(someChild, {x:30, y:40});
gui.addChild(anotherChild, {x:400, y:30});
gui.addChild(babySitter, {x:6, y:9});


you like? You could abstract this one, and extend it, or something. Although I've never tried to override the addChild method, I think it should work.

[elouai]

cayennecode:
Nice implementation, however I would not think of setting a registration point via an overloaded addChild method.

I would much prefer a method call like
..
setRegistrationPoint(sprite, 50, 50);
..
Set the registration point of 'sprite' to (50,50)

The code and examples was placed on my site at http://flashscript.ca/set-registration-as3.php.
In this case you don't have to mess with adding containers, or managing the translations yourself.

It turns out the code to actually change the registration point is essentially a 1-liner
..
mc.transform.matrix = new Matrix(1, 0, 0, 1, -regx, -regy);
..

Have fun

[shreksta]

cayennecode:
Nice implementation, however I would not think of setting a registration point via an overloaded addChild method.

I would much prefer a method call like
..
setRegistrationPoint(sprite, 50, 50);
..
Set the registration point of 'sprite' to (50,50)

The code and examples was placed on my site at http://flashscript.ca/set-registration-as3.php.
In this case you don't have to mess with adding containers, or managing the translations yourself.

It turns out the code to actually change the registration point is essentially a 1-liner
..
mc.transform.matrix = new Matrix(1, 0, 0, 1, -regx, -regy);
..

Have fun

This code does not work for me, the sprite centres on the point (0,0), and then rotates around the new top left corner (so (-spritewidth/2,-spriteheight/2)).

[simkirupa]

Hi Elouai
Your line sounds great and amazingly straightforward, but also I can't get it to work - is there something crucial missing in your example script?
Many thanks!


cayennecode:
Nice implementation, however I would not think of setting a registration point via an overloaded addChild method.

I would much prefer a method call like
..
setRegistrationPoint(sprite, 50, 50);
..
Set the registration point of 'sprite' to (50,50)

The code and examples was placed on my site at http://flashscript.ca/set-registration-as3.php.
In this case you don't have to mess with adding containers, or managing the translations yourself.

It turns out the code to actually change the registration point is essentially a 1-liner
..
mc.transform.matrix = new Matrix(1, 0, 0, 1, -regx, -regy);
..

Have fun

[snickelfritz]

Placing the object within a Sprite, then setting the xy coordinates to negative values will move reg point to the right and down.
Transformations should be applied to the container Sprite, not the nested object.

It's essentially identical to doing the same thing manually in the Flash IDE:
Insert > New > Symbol; place objects within symbol relative the reg point; Transform the symbol in AS.

[cavallari]

public function set translatex(value:Number):void{
for(var i:Number=0;i<numChildren;i++){
var object=getChildAt(i);
object.x+=value;
}
}

Make the samething to y...

With some calculations and this base you can make a setPoint function in your class...

[vanimations]

Okay, my simple solution may not work for everything, but most symmetrical object will work fine. I have to admit that I haven't read everyone's responses, but I didn't see a simple solution that I could copy into a new as3 .fla file and watch it work. Hope this helps someone out there. Obviously, you can tween whatever you want and you can add items from your library that are exportable by actionscript, i just wanted something that would dynamically draw the square so you could simply cut and paste code and manipulate whatever you want.

CUT AND PASTE CODE BELOW AND LET THAT BABY ROTATE! :)

//CREATE EMPTY "HOLDER" MOVIECLIP TO HOLD SOME VISIBLE OBJECT
//ADD IT TO THE STAGE AND CENTER IT
var square_holder:MovieClip= new MovieClip();
addChild (square_holder);
square_holder.x = 275;
square_holder.y = 200;

//CREATE SOME VISIBLE MOVIECLIP AND AD IT TO THE STAGE
var square:MovieClip = new MovieClip();
square.graphics.lineStyle (1,0x000000,1);
square.graphics.beginFill (0x00ff00,.5);
square.graphics.drawRect (0,0,50,50);
addChild (square);

//REASSIGN THE PARENT OF THE VISIBLE FROM STAGE TO "HOLDER"
square_holder.addChild (square);

//USE THE VISIBLE OBJECTS DIMESIONS TO "CENTER" IT ON THE HOLDER
square.x-= square.width/2;
square.y-=square.height/2;

//ROTATE HOLDER WITH WHATEVER EVENTHANDLER YOU WANT
stage.addEventListener (Event.ENTER_FRAME, rotate_it);
function rotate_it (event:Event):void
{
square_holder.rotation+=20;
}

[dyzzi]

i really don't know how crazy the project is that you're working on and how that goes, but the way i always seem to get around this problem is to simply do this:

MovieClip.x = -(MovieClip.width/2);
MovieClip.y = -(MovieClip.height/2);

simple and effective way of getting it center positioned no matter what size it is.

I believe this is the best answer to the original question in it's finest simplicity :D

[edit:] oh! and you could do

MovieClip.x = -(MovieClip.width);
MovieClip.y = -(MovieClip.height);

for a bottom right corner registration and only one of the two for top right and bottom left. :D

[elouai]

Hi Elouai
Your line sounds great and amazingly straightforward, but also I can't get it to work - is there something crucial missing in your example script?
Many thanks!

What is the error?

I posted the full example on my site. You need the funtion setRegistrationPoint to define first. And I also have a running example on that page as well

[NatK]

I was looking for a way to rotate my dynamically created Sprite object at its center using Tween.
And this is what I did.




import fl.transitions.Tween;
import fl.transitions.easing.*;

var myspr=new Sprite();
myspr.graphics.beginFill(0x0000FF);

//This is where you set the registration point
//Registration point is set at (0, 0)
//In my case, I shift object half the width/height of the object
//So that registration point will be at its center.
myspr.graphics.drawRect(-50, -50, 100, 100);

//Place the object where you want to display
myspr.x = 150;
myspr.y = 150;
addChild(myspr);
myspr.addEventListener(MouseEvent.CLICK, rotateSpr);

function rotateSpr(event:MouseEvent):void{
var t:Tween = new Tween(myspr, "rotationX", None.easeNone, 0, 360, 1, true);
}


I guess this is what TheCanadian (http://www.kirupa.com/forum/member.php?u=31713) was saying, but I didn't really understand what he meant, so this is just a follow up in case there is someone like me. ;)

If you need to change a registration point more than once after dynamically created an object, then you gonna have to set and unset transformation Matrix, I guess.