Page 1 of 2 12 LastLast
Results 1 to 15 of 18

Thread: Center movie clip in the stage - ActionScript 3

  1. #1

    Afrostyle Center movie clip in the stage - ActionScript 3

    Hi,

    How to make sure that my movie clip is always centered in the stage?

    For example if the flash movie is resized, my movie would take the screen width and always be placed in the center,

    i think it has something to do with stageWidth, but i am not sure about the correct syntax,

    can anyone help?

  2. #2
    HMPoweredMan's Avatar
    51
    posts
    thekyleshawadventure.com
    stage.width /2 is the center x position
    stage.height /2 is the center y position

    depending on the justification of your movieclip determines what you would do next.

    if it is center justified, you just set:
    movieclip.x = stage.width/2
    movieclip.y = stage.width/2

    any other justification and you'll have to figure out the appropriate way to do it using a combination of

    movieclip.x movieclip.y movieclip.width/2 movieclip.length/2
    stage.x stage.y stage.width/2 stage.length/2

  3. #3
    Code:
    var clip:MovieClip = someClip;
    //Clip that gets recentered
    stage.addEventListener(Event.RESIZE,center);
    //As stage resizes, recenter
    function center(e:Event=null) {
     clip.x = (stage.stageWidth-clip.width)/2;
     clip.y = (stage.stageHeight-clip.height)/2;
    }
    center(null);
    //Center initially
    That's not exactly portable code, but if you only plan on using it for one clip, it's easier to work with.
    Edit: Well someone else posted while I was typing!
    (You forgot to account for the clip's center. You just put the upper-left corner of the clip at the center of the stage, rather than center to center)
    Last edited by theCodeBot; October 31st, 2008 at 08:40 PM.

  4. #4

    Afrostyle

    theCodeBot thank you,

    I tried and it worked but it doesn't really centers the movieclip, it aligns it to the right bottom

  5. #5
    Uh... It should center it as long as the clip's registration point is the northwest corner and the stage uses a normal coordinate space

    You must have something in the way, most likely a container for the clip?

    EDIT: Oops. subtraction, not addition. Fixed in original post.

  6. #6
    Its much more efficient to use multiplication rather than division for this kind of thing
    Code:
    var clip:MovieClip = someClip;
    //Clip that gets recentered
    stage.addEventListener(Event.RESIZE,center);
    //As stage resizes, recenter
    function center(e:Event=null) {
     clip.x = stage.stageWidth*.5 - clip.width*.5;
     clip.y = stage.stageHeight*.5 - clip.height*.5;
    }
    center(null);
    //Center initially
    Not really any need to call the center method with null either.

  7. #7
    Oops. Bad habit of mine, passing null when I set the default value
    2 multiplication operations faster than 1 division? How so?

  8. #8
    Code:
    function stageSpeed():void {
    	var iterations:Number = 500000;
    	time = getTimer();
    
    	for (var i:Number = 0; i < iterations; i++) {
    		var test:int = stage.stageWidth*.5 - pink.width*.5
    	}
    	
    	trace("Speed: ", (getTimer()-time));
    }
    //291 milliSeconds
    
    function stageSpeed():void {
    	var iterations:Number = 500000;
    	time = getTimer();
    
    	for (var i:Number = 0; i < iterations; i++) {
    		var test:int = (stage.stageWidth - pink.width)/2
    	}
    	
    	trace("Speed: ", (getTimer()-time));
    }
    //293 milliseconds
    
    function stageSpeed():void {
    	var iterations:Number = 500000;
    	time = getTimer();
    
    	for (var i:Number = 0; i < iterations; i++) {
    		var test:int = stage.stageWidth/2 - pink.width/2
    	}
    	
    	trace("Speed: ", (getTimer()-time));
    }
    //300 milliseconds
    Basically the same, even though the Multiplication version has to do "more". The straight division example is slower, but not by much.

    Although, none of those examples are that efficient as they are looking up the values of the clip width etc. Storing the clips width in a var outside of the loop decreases the execution time by about half.
    Last edited by dail; October 31st, 2008 at 10:16 PM.

  9. #9
    Interesting. O.K., faster to do 2 multiplications than 1 division... I'll have to remember that I'll add this to the stack of insignificant speed tests that we've done when we're bored in a thread:
    1. redoing addChild vs. swapping depths (addChild wins by 5ms/1,000,000 iterations)
    2. 2 multiplication operations are faster than 1 division operation (wins by 2ms/500,000 iterations)
    3. Playing with Sprites is faster than playing with MovieClips (actually, this one was a memory deal)
    4. Timer Class with added listeners and 1 loop is actually faster than setTimeout (considering we used getTimer to figure this out, it kind of defeated the purpose, but the Timer Class won by a lot)
    5. Trace consumes respectable processor time (I don't remember how much, but it was impressive)
    6. ...What's another test we can do to prove a <5ms difference after over 1,000,000 iterations?

  10. #10
    haha, must be some

    it only really matters if you are making some real 'high performance' code, then those little bits here and there can add up..

  11. #11
    Quote Originally Posted by theCodeBot View Post
    I'll add this to the stack of insignificant speed tests that we've done when we're bored in a thread:
    No offense dude but that's pretty arrogant. Trying to find more optimized methods of doing things is a big part of evolving actionscripting and flash sites. These 'insignificant' changes make a massive difference in already cpu intense flash games or highly interactive sites. When you're already doing a lot of iterations per frame basis, using multiplication instead of division is pretty far from insignificant.

    But hey, if you're not interested in 'insignificant optimization' code and prefer to do things the slower way .. Go for it.

    For me it's quite the opposite. Once I find that a method is faster, I abandon all my references to the previous method and permanently change it to the new routine.

  12. #12
    Quote Originally Posted by sekasi View Post
    No offense dude but that's pretty arrogant. Trying to find more optimized methods of doing things is a big part of evolving actionscripting and flash sites. These 'insignificant' changes make a massive difference in already cpu intense flash games or highly interactive sites. When you're already doing a lot of iterations per frame basis, using multiplication instead of division is pretty far from insignificant.

    But hey, if you're not interested in 'insignificant optimization' code and prefer to do things the slower way .. Go for it.

    For me it's quite the opposite. Once I find that a method is faster, I abandon all my references to the previous method and permanently change it to the new routine.
    I didn't quite mean for it to rub off that way... guess insignificant was a bad choice of words
    The last thing I want is getting one of the guru's who help me so much getting upset with me...

    Since my apps never run over 500 total code iterations per second (I seldom make anything more complex than a simple shooter ), I have been falling into the practice of using the one that's less code (On the assumption that saving 5 bytes every download is a little better than saving 20ms/1minute of runtime per user). You're right, I better fix that before I start making apps that get anywhere near as CPU intensive as some of the things I've seen...

    Speaking of the 5bytes versus 3ms deal, I can't find the thread where we figured out which was faster, ?/: or if/then ... which of those 2 won? I remember it was by a large margin...

  13. #13
    HMPoweredMan's Avatar
    51
    posts
    thekyleshawadventure.com
    Can you do a test on modular division?

    Also maybe the different ways of making a random number.

    var someNum:Number = Math.floor(Math.random()*5) + 1;
    var someNum:Number = Math.ceil(Math.random()*5);
    var someNum:Number = Math.round(Math.random()*4) + 1;

    All of these produce 1 2 3 4 or 5
    Last edited by HMPoweredMan; November 1st, 2008 at 02:52 PM.

  14. #14

    fullscreen + tiled bg

    Hi there, sorry to borrow your thread. But it's the same subject: Fullscreen, but I want a tiled background.

    I'm new on AS3 and this is my first script. But I don't know for sure how this can be optimized. Can someone have a look?

    FillMC has alpha and some effects. Here's the code:

    Code:
    
    //bg
    var url:String="bg.gif";
    var bgrequest:URLRequest=new URLRequest(url);
    var loader:Loader = new Loader();
    loader.load(bgrequest);
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, drawImage);
    
    function Fullscreen() {
        stage.scaleMode=StageScaleMode.NO_SCALE;
        stage.align=StageAlign.TOP_LEFT;
        stage.addEventListener(Event.RESIZE, onResize);
    
        //fillMC
        addChildAt(fillMC,1);
        fillMC.width=stage.stageWidth;
        fillMC.height=stage.stageHeight;
        fillMC.x=0;
        fillMC.y=0;
        addChildAt(fillMC,0);
    
        putImagebg();
        return;
    
    }// end function
    
    function onResize(param1:Event):void {
        //trace("width " + stage.stageWidth, "height " + stage.stageHeight);
        fillMC.width=stage.stageWidth;
        fillMC.height=stage.stageHeight;
        fillMC.x=0;
        fillMC.y=0;
        putImagebg();
    
    }// end function
    
    // bg.gif stuff
    
    function putImagebg():void {
        trace("drawImage");
        var mySprite:Sprite = new Sprite();
        var myBitmap:BitmapData=new BitmapData(loader.width,loader.height,false);
        myBitmap.draw(loader);
        mySprite.graphics.beginBitmapFill(myBitmap);
        mySprite.graphics.drawRect(fillMC.x, fillMC.y, fillMC.width, fillMC.height);
        mySprite.graphics.endFill();
        addChildAt(mySprite,0);
    }// end function
    
    function drawImage(evt:Event):void {
        fillMC.visible = true;
        putImagebg();
    }// end function
    
    Fullscreen();

  15. #15
    Move your MySprite and myBitmap vars out of your putImageBg method, declare them only once. Add in graphics.clear() to your putImageBg method

Page 1 of 2 12 LastLast

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012