# Movie clip width 100% centred

**URL:** https://forum.kirupa.com/t/movie-clip-width-100-centred/265043
**Category:** Uncategorized
**Created:** [July 3, 2008, 9:48am UTC](https://forum.kirupa.com/t/movie-clip-width-100-centred/265043 "2008-07-03T09:48:16Z")
**Posts on this page:** 15
**Page:** 1

<div class="post-metadata">

### Author: ![trafford87](https://avatars.discourse-cdn.com/v4/letter/t/e0b2c6/32.png) [@trafford87](https://forum.kirupa.com/u/trafford87)
#### Post date: [July 3, 2008, 9:48am UTC](https://forum.kirupa.com/t/movie-clip-width-100-centred/265043/1 "2008-07-03T09:48:16Z")

</div>

Morning everyone,

I’m having a problem with AS3…I want to have a movie clip that spans the width of the browser window which is centered so if the browser is scaled the content in the center remains the same size but the left and right expands.

In css it would be a little like adding margin:auto to a div tag.

Ideally it would be great to load in various external swf files for different sections that images txt etc are able to move in from the edge of the screen.

This sort of thing [http://www.elmwood-design.com.au](http://www.elmwood-design.com.au)

Does anyone know of a tutorial or post that may shed some light on this. Still quite a green with AS3.

Cheers

---

<div class="post-metadata">

### Author: ![Pier25](https://avatars.discourse-cdn.com/v4/letter/p/4af34b/32.png) [@Pier25](https://forum.kirupa.com/u/Pier25)
#### Post date: [July 3, 2008, 10:05am UTC](https://forum.kirupa.com/t/movie-clip-width-100-centred/265043/2 "2008-07-03T10:05:32Z")

</div>

In the HTML tags of the embed/object you put width and height 100%, then control the final size with an external div.

Inside flash:

```auto

//that will set the registration point (0,0) in the top left corner, and will tell flash to not scale the contents if you resize the stage
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

//to adjust the size of the movieclip to the width of the stage.
my_mc.width = my_mc.stage.stageWidth;

```

I think you first need to addChild or have something in the stage in order to be able to get stageWidth or stageHeight.

If you want to have a liquid layout (things move when you resize the stage) you need to put an on resize listener to the stage and call some sort of changeLayout function

---

<div class="post-metadata">

### Author: ![pensamente](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/pensamente/32/1208_2.png) [@pensamente](https://forum.kirupa.com/u/pensamente)
#### Post date: [July 3, 2008, 10:11am UTC](https://forum.kirupa.com/t/movie-clip-width-100-centred/265043/3 "2008-07-03T10:11:30Z")

</div>

hope this gives you a start:  
[http://www.tutorio.com/media/flash/liquid-demo.html](http://www.tutorio.com/media/flash/liquid-demo.html)

also like the work of Dale:  
[http://www.blog.noponies.com/archives/53](http://www.blog.noponies.com/archives/53)

big senocular:  
[http://www.senocular.com/?id=2.8](http://www.senocular.com/?id=2.8)

here you go!

---

<div class="post-metadata">

### Author: ![pensamente](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/pensamente/32/1208_2.png) [@pensamente](https://forum.kirupa.com/u/pensamente)
#### Post date: [July 3, 2008, 10:13am UTC](https://forum.kirupa.com/t/movie-clip-width-100-centred/265043/4 "2008-07-03T10:13:27Z")

</div>

sorry Pier, haven’t see your post, it’s easier to get Pier code before you go to the classes, that’s the way thing work.

---

<div class="post-metadata">

### Author: ![trafford87](https://avatars.discourse-cdn.com/v4/letter/t/e0b2c6/32.png) [@trafford87](https://forum.kirupa.com/u/trafford87)
#### Post date: [July 3, 2008, 10:34am UTC](https://forum.kirupa.com/t/movie-clip-width-100-centred/265043/5 "2008-07-03T10:34:39Z")

</div>

Hi Piers,

I tried your idea and i got the movieclip to stretch but then of course all the content inside the movieclip did as well.

Can you set noscale to a movieclip nested inside the main one?

---

<div class="post-metadata">

### Author: ![pensamente](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/pensamente/32/1208_2.png) [@pensamente](https://forum.kirupa.com/u/pensamente)
#### Post date: [July 3, 2008, 10:51am UTC](https://forum.kirupa.com/t/movie-clip-width-100-centred/265043/6 "2008-07-03T10:51:38Z")

</div>

make a clip (holder), inside put 2 clips, the one to stretch (din\_mc) and the one you don’t want to stretch(fix\_mc), then:

holder.din\_mc.width = stage.stageWidth;

does this works for you?

---

<div class="post-metadata">

### Author: ![Pier25](https://avatars.discourse-cdn.com/v4/letter/p/4af34b/32.png) [@Pier25](https://forum.kirupa.com/u/Pier25)
#### Post date: [July 3, 2008, 12:38pm UTC](https://forum.kirupa.com/t/movie-clip-width-100-centred/265043/7 "2008-07-03T12:38:10Z")

</div>

[QUOTE=trafford87;2352976]Hi Piers,

I tried your idea and i got the movieclip to stretch but then of course all the content inside the movieclip did as well.

Can you set noscale to a movieclip nested inside the main one?[/QUOTE]

What I do in this case is the same that Pensamente suggests: to have a background inside the holder movieclip. Change the backgorund size, and then move the other elements as you need to. Like for example put the close button in the bottom right corner at 10 pixels from the border.

```auto

margin = 10;
holder.x = 0;
holder.y = 0;

holder.background.width = holder.stage.stageWidth;
holder.background.height = holder.stage.stageHeight;

//considering the 0,0 point of close_btn is at the upper left corner...
holder.close_btn.x = holder.background.width - holder.close_btn.width - margin;
holder.close_btn.y = holder.background.height - holder.close_btn.height - margin;

```

(I’m writing this directly so maybe there are some mistakes…)

Hope that helps 😉

It’s a bit of a pain to do this manually everytime for every object on every project. If you’re into liquid layouts you should really consider building a class to manage positions and sizes.

Pier

---

<div class="post-metadata">

### Author: ![pensamente](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/pensamente/32/1208_2.png) [@pensamente](https://forum.kirupa.com/u/pensamente)
#### Post date: [July 3, 2008, 1:30pm UTC](https://forum.kirupa.com/t/movie-clip-width-100-centred/265043/8 "2008-07-03T13:30:13Z")

</div>

…or instead use one of the classes that I’ve mention above.

😛

---

<div class="post-metadata">

### Author: ![trafford87](https://avatars.discourse-cdn.com/v4/letter/t/e0b2c6/32.png) [@trafford87](https://forum.kirupa.com/u/trafford87)
#### Post date: [July 3, 2008, 2:15pm UTC](https://forum.kirupa.com/t/movie-clip-width-100-centred/265043/9 "2008-07-03T14:15:06Z")

</div>

Thanks for your help guy’s Im using the following code i had found:

import flash.display.StageAlign;  
import flash.display.StageScaleMode;  
import flash.events.Event;

function resizeHandler(e:Event):void  
{  
holder.x = (holder.stage.stageWidth / 2) - (holder.width / 2);  
}

stage.align = StageAlign.TOP\_LEFT;  
stage.scaleMode = StageScaleMode.NO\_SCALE;  
stage.addEventListener(Event.RESIZE, resizeHandler);

stage.dispatchEvent(new Event(Event.RESIZE));

This seems to be working however i had to take the height attribute out as loading an external swf caused the height to jump.

I’m know trying to get make a separate movie clip fly in from off screen! Having difficultly when i postion it right now!! Good fun this AS3 isnt it :h:

---

<div class="post-metadata">

### Author: ![pensamente](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/pensamente/32/1208_2.png) [@pensamente](https://forum.kirupa.com/u/pensamente)
#### Post date: [July 3, 2008, 3:10pm UTC](https://forum.kirupa.com/t/movie-clip-width-100-centred/265043/10 "2008-07-03T15:10:26Z")

</div>

trafford, sorry but i’m not understanding your problem, could you source us, or code or fla?

you try to animate a item that you have “under” resizeHandler?

---

<div class="post-metadata">

### Author: ![trafford87](https://avatars.discourse-cdn.com/v4/letter/t/e0b2c6/32.png) [@trafford87](https://forum.kirupa.com/u/trafford87)
#### Post date: [July 3, 2008, 3:45pm UTC](https://forum.kirupa.com/t/movie-clip-width-100-centred/265043/11 "2008-07-03T15:45:02Z")

</div>

Hi Pensamente

I really appreciate you taking the time to help.

I’ve attached the files I’ve working on!!!

I’m trying to get the background gradient (myHolder\_mc) to stretch full width of the browser window and keep the external swf thats loaded into (myLoad\_mc) centered.

Ideally id like it if i could animate the myLoad\_mc to enter the screen from the right edge and stop bang in the middle.

I hope this makes things clear.

---

<div class="post-metadata">

### Author: ![pensamente](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/pensamente/32/1208_2.png) [@pensamente](https://forum.kirupa.com/u/pensamente)
#### Post date: [July 3, 2008, 5:05pm UTC](https://forum.kirupa.com/t/movie-clip-width-100-centred/265043/12 "2008-07-03T17:05:04Z")

</div>

hope this fix what you need, check for the comments inside the holder.

mainly just create another clip to be aligned in the center, then load the swf inside this new one.

\> holder  
(this 2 inside holder)  
\>\> myHolder\_mc  
\>\> center\_mc (this align to center)  
(inside center\_mc)  
\>\>\> myLoad\_mc (this loads and animates)

hope this helps

---

<div class="post-metadata">

### Author: ![Pier25](https://avatars.discourse-cdn.com/v4/letter/p/4af34b/32.png) [@Pier25](https://forum.kirupa.com/u/Pier25)
#### Post date: [July 4, 2008, 7:37am UTC](https://forum.kirupa.com/t/movie-clip-width-100-centred/265043/13 "2008-07-04T07:37:24Z")

</div>

[QUOTE=pensamente;2353037]…or instead use one of the classes that I’ve mention above.

:P[/QUOTE]

yes… sorry, I thought the links were tutorials on how to do it yourself 🙂

---

<div class="post-metadata">

### Author: ![trafford87](https://avatars.discourse-cdn.com/v4/letter/t/e0b2c6/32.png) [@trafford87](https://forum.kirupa.com/u/trafford87)
#### Post date: [July 4, 2008, 9:18am UTC](https://forum.kirupa.com/t/movie-clip-width-100-centred/265043/14 "2008-07-04T09:18:03Z")

</div>

pensamente you’re a legend!! cheers

---

<div class="post-metadata">

### Author: ![pensamente](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/pensamente/32/1208_2.png) [@pensamente](https://forum.kirupa.com/u/pensamente)
#### Post date: [July 4, 2008, 10:02am UTC](https://forum.kirupa.com/t/movie-clip-width-100-centred/265043/15 "2008-07-04T10:02:49Z")

</div>

no legend here… but thanks 🙂  
happy that i could help
