Movie clip width 100% centred

1

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

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

Cheers

2

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:


//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

3

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

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

big senocular:
http://www.senocular.com/?id=2.8

here you go!

4

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.

5

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?

6

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?

7

[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.


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 :wink:

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

8

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

:stuck_out_tongue:

9

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:

10

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?

11

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.

12

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

13

[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 :slight_smile:

14

pensamente you’re a legend!! cheers

15

no legend here… but thanks :slight_smile:
happy that i could help