How to Position Movie Clips Based on Browser Resizing
It’s not hard to make a SWF resize itself to the dimensions of the browser. All it takes, in fact, is to set the width and height attributes of the HTML’s <object> <param> element and/or <embed> element to 100%. There are a number of ways to determine the SWF’s display, too: show all (default) makes the entire movie visible while maintaining the original aspect ratio of the SWF (if the browser’s aspect ratio differs, you’ll get the equivalent of “letterbox” borders either horizontally or vertically); no border gets rid those potential borders, but may crop parts of the SWF instead; exact fit distorts the SWF, if necessary, to make the entire movie visible without borders or cropping. See Adobe TechNote 12701 for complete details.
Fine and good. Now, what if you want to allow the Stage to resize, but not its contents? What if you want to adjust the position of various movie clips — such as a logo, navigation, or content area — in response to the Stage’s new dimensions as the browser is resized? Luckily, that’s not hard either. 
Let’s take a look.
An answer, short and sweet
Open a new FLA and draw a quick shape — a circle will do. Convert the shape to a movie clip (Modify > Convert to Symbol…, then choose Movie Clip) and give the clip an instance name via the Property inspector. For this example, let’s call it mcLogo.
Create a scripts layer and type the following into frame 1:
Stage.scaleMode = "noScale";
Stage.align = "TL";
var stageListener:Object = new Object ();
stageListener.onResize = positionContent;
Stage.addListener(stageListener);
function positionContent():Void {
mcLogo._x = Stage.width - mcLogo._width;
mcLogo._y = Stage.height - mcLogo._height;
}
positionContent();Test your SWF, and you’ll see the circle hug the lower right corner as you resize the SWF’s dimensions in Flash. Either that, or publish to an HTML file and set the width and height attributes for both the <option> <param> element and the <embed> element to 100% and resize the browser.
How it works
In the first line, we’re telling the SWF not to scale itself. In your HTML — this is important — you’re going to set the width and height to 100%, but the SWF itself will not scale to fit those dimensions. In the second line, we’re telling the SWF to register itself to its upper left (top left) corner.
Next, an arbitrarily named variable, stageListener, is declared as a generic Object instance. This object acts as an “ambassador” for the Stage.onResize event, so we need to assign a function to a new onResize property of our object, rather than of Stage directly. In this example, the function is arbitrarily named positionContent() and is defined shortly below. Note: if you like, you may assign a function literal …
stageListener.onResize = function() {
// instructions here
}… but in this case, I chose a named function because you may want position dozens of movie clips, and it’s arguably “cleaner code” to define the function separately. If you go the named function route, as we’re doing, make sure to omit the parentheses in this line, as shown.
The next line adds our ambassador as a listener to the Stage. The Stage.addEventListner() method is what “wires up” the listener object to the object that dispatches the event (here, the Stage).
Finally, the custom positionContent() function tells mcLogo what to do. In this case the movie clip’s _x property is set to the width of the Stage minus its own width. That makes it hug the right side. To center this clip, you could set its MovieClip._x property to half the Stage’s width minus half its own …
mcLogo._x = Stage.width / 2 - mcLogo._width / 2;Follow suit for vertical positioning. Makes sense, right? Be sure to call the positionContent() function after you declare it, to make sure everything is positioned at the start, otherwise the Stage/browser would have to resize first.
By the way, this setup expects movie clips to be registered to their upper left corners. If mcLogo’s shape was centered horizontally in its own timeline, you would only have to minus half its width from the Stage’s width to make it hug the right hand side. If you want a 20 pixel buffer between this right-aligned clip and the Stage, account for that extra 20:
mcLogo._x = Stage.width - mcLogo._width - 20;To keep a clip to the left side, set its _x to 0.
Keep in mind, you’re not limited to setting MovieClip._x and _y properties. You may adjust a clip’s _width, _height, _xscale, _yscale … whatever you like. Experiment and have fun with it! For every clip you wish to position, simply add its entry to the positionContent() function. Note, below, that an mcNav clip is being set to a position based on the original mcLogo clip. Here, both clips would hug the right edge of the Stage, and mcNav would float below mcLogo, with a buffer of 20 pixels.
function positionContent():Void {
mcLogo._x = Stage.width - mcLogo._width;
mcLogo._y = 20;
mcNav._x = Stage.width - mcNav._width;
mcNav._y = mcLogo._y + mcLogo._height + 20;
}Note: See How to Fix Wrong-sized SWFs in Firefox to work around a common issue with 100%-sized SWFs in Firefox. (Thanks for the cross-reference suggestion, Markus!)
September 23rd, 2006 at 6:06 am
Hi David,
I think you really should link this to your entry about sizing full-browser swfs in Firefox (or all browsers in standards compatible mode).
There is another thing I’d like to forget about this issue:
If your in “strict” mode, you will have to set the css display value to “block” for your swf (#mySWF {display:block}) otherwise there will be some pixles reserved for baseline which will make scrollbars appear etc.
September 25th, 2006 at 9:47 am
Markus,
Thanks! Great idea.
October 21st, 2006 at 4:24 pm
I found this tuturial to be very valuable. I have a few questions though. Can you help me with the scripts that will position a mc exactly in the center of the resized browser (both horizontal and vertical)? Also, the script to have elements resized, scaled with the browser, for example a header or footer or background image?
October 22nd, 2006 at 9:38 am
Patrick,
The basis for positioning of any kind is accomplished in three steps.
Stage.onResizeevent, done with these three lines:positionContent. This is where your questions come into play.For that, use the code suggested halfway into the “How it works” section; just make sure to apply it to both
_xand_y. Assuming a movie clip with the instance namemcLogo, registered to its own upper left corner …Those two lines would go inside your declaration for the
positionContent()function.Scaled and resized in what way?
If you scale a movie clip along its x-axis, but leave the y-scale as is, that movie clip will appear horizontally stretched (or squished) most of the time. This doesn’t much matter for swaths of solid color, but it would certainly look wrong if that clip contained text. If your header contains both textual (or image) elements and a background element, you might consider separating the elements into separate movie clips and stretching your background element only.
Make sense?
Or, if you want to maintain aspect ratio, arbitrarily note the change ratio of one axis and apply that same change ratio to the other.
November 9th, 2006 at 2:59 pm
Very nice article. Thank you very much. I still have a question though. I’m planning to make a website like: http://www.2advanced.com. As you can see they have a full browser flash website. My question is: How can I get a background like they use? I tried your solution but it does not work at all.
Besides…How do they get the scrollbar? I tried to make the height of the stage 1200 px but when published there is no scrollbar and the things at the bottom of the page are not visible. Unless you hit the right mouse button and choose the option “show all”.
Is that a different approach for the problem?
I would be very grateful if you could explain it to me.
Thanks in advance.
November 9th, 2006 at 3:17 pm
Moonwalker,
The 2advanced site doesn’t appear to be using
They’re just publishing a very large SWF and letting the browser handle it (with scrollbars, if necessary) as the browser would handle any large content.
Stage.onResizeat all.If you publish to percentages, then the SWF will be resized and you won’t see scrollbars (unless they’re inside Flash). You can use your browser to view the HTML source and see that they’re using SWFObject to embed the SWF. Although width if set to 100%, the height is a pre-determined 1000 pixels.
The “show all” you mentioned isn’t currently showing, but in cases when it goes, that’s just the Flash Player overriding what the browser’s width and height (or zoom) specify.
To achieve what they’re doing, you wouldn’t have to use the technique described in the article … just don’t publish with percentages. If you wanted the content to actually respond to the browser, you’d need
Stage.onResizeafter all. Make your background image a movie clip (even if it’s originally a large JPG, or the like) and center it both horizontally and vertically.November 10th, 2006 at 5:36 pm
Thank you very much David for your quick reply. I’m adding your blog to my Bookmarks and I will give it a try.
Thank you again and wish you many luck in your life.
Bye.
mw
November 18th, 2006 at 3:53 am
Hi David,
I need some insight on how you would handle an issue:
1. I need a website with a changeable background. Thus, i have a mc that uses system.capabilities on clip event. This would fill up the entire screen, allowing me to animate the background
2. For the above to happen, I would need to publish flash in noscale mode
3. All is fine, BUT you can’t scroll the page, and i need to be able to scroll this
I would like to know how would you approach this situation….thks!
Best,
Jen
November 20th, 2006 at 9:47 am
Jen,
Flash generally allows several ways to accomplish a given goal. If the Flash content (the SWF) truly needs to be full screen, then yes, it will have to be embedded in the HTML at 100% width and height, which means the HTML won’t scroll. You could experiment with 100% width and a hard-coded height. I haven’t tried that, but that might work. You could set the SWF’s background as transparent and put your background image in the HTML document itself (see WMODE information here; use the
ExternalInterfaceclass to talk to JavaScript if you need to manipulate the external background image programmatically). You might also take a look at the ScrollPane UI Component: use that to load either external SWFs or content from the Library — resize that withStage.onLoadas needed (use theScrollPane.setSize()method) and it’ll scroll its contents.December 7th, 2006 at 5:55 pm
[…] I accomplished this goal using actionscript. First I started with David Stiller’s quick tutorial on resizing movie clips on stage resize here. I will paste all the code I used here which started from David’s and was modified with my own. Stage.scaleMode = “noScale”; Stage.align = “TL”; var stageListener:Object = new Object (); stageListener.onResize = positionContent; Stage.addListener(stageListener); […]
January 10th, 2007 at 11:32 pm
[…] i asked Mel if she knew how to do this, she pointed me to these references: david stiller’s blog mm livedocs […]
January 11th, 2007 at 1:34 am
hi david,
i very much liked your clear explanation about the fixed position of a movieclip.
now i’m in a situation where i need to get a movieclip to stick to a specific position relative to the edge of the browser window. so in this case, the movie will not be published at 100% instead it will be a very large stage (something like 2400×1600 or crazy like that). anyway, this will cause scrollbars, of course, and my movieclip still needs to always stick to about 20px above the bottom scrollbar.
you might know the effect of the “floating div” in HTML, a DIV that always stays in position, no matter where you scroll to.
well, do you think it’s possible to do that in flash?
thanks in advance for your insight.
pirco
January 11th, 2007 at 8:56 am
pirco,
The
System.capabilitiesobject lets you know the user’s full screen dimensions, but that doesn’t help in this case. That’s too bad.Those scrollbars you’re talking about are the property of the browser, not the SWF, so ActionScript has no direct access to them. Once you leave the realm of Flash, this sort of thing gets considerably more complex! I haven’t personally tried what you describe, but it may be possible with communication between ActionScript and JavaScript, which you could manage with
ExternalInterface. You’d have to let the SWF know the dimensions of the browser’s viewport area and then alert the SWF every time the browser changed size or was scrolled. Sounds like a cool thing to experiment with!January 11th, 2007 at 1:42 pm
yes. thanks. i thought about it some more and, of course, there would have to be that bridge between the browser and flash… javascript. yes.
i think i know what to do. i’ll try to send samples.
thanks again for quick answer. i’m starting to like this blog!
January 12th, 2007 at 4:46 pm
Thanks, pirco! If you come up with something and would like to share, please feel free. My evenings are completely eaten up over the next couple months on a project I can’t mention quite yet, but will. Neat stuff on the way.
February 2nd, 2007 at 3:31 pm
Hi David, nice article. Thanks so much. I have a question, how do i achieve to put “little animation” to code. Let’s say I’ve designed a menu box, which always sticks to bottom of the page. And I want to have this box to come on its postion 1sec or 2 secs later, after browser window was resized.
Same, like on this website, http://www.captaincomatose.com/cc01_content.html - the sign formular on the bottom.
February 2nd, 2007 at 5:09 pm
oiram,
Ah, I see what you’re saying. That captaincomotose site is pretty cool! Well, there are two things going on there (two things at least). First, that site is handling the
Stage.onResizeevent — that much is clear — second, rather than using a function like the abovepositionContent(), it’s using some sort of delay mechanism. Chances are good the mechanism is either thesetInterval()or thesetTimeout()function.Either one of those will trigger whatever function or method you like after a given amount of time. I would think that site uses
clearInterval()and/orclearTimeout()to stop the timer in case someone changes the browser after an interval has already been set in motion — otherwise the animations would occur, perhaps when they shouldn’t, even when someone fires theStage.onResizerepeatedly.Take a look at the
Tweenclass (Components Language Reference), which makes it relatively easy to animate movie clips with ActionScript. You could havesetTimeout()trigger theTween.start()on a givenTweeninstance associated with one of your movie clips.February 16th, 2007 at 9:50 pm
I have a problem.
After
1). I click the right mouse button and choose the option “zoom in”.
2). I click the right mouse button and choose the option “show all”.
listener does not call function onResize
February 17th, 2007 at 11:27 am
Serge,
The
Stage.onResizeevent is dispatched when the Stage changes size — that is, when the dimensions of the Stage change, such as when the browser is resized — but not when it is zoomed. I can see where those events might seem like the same thing, but the Flash Player distinguishes between them. Check theStage.showMenuproperty to see how you can turn off the right-click zooming.March 19th, 2007 at 12:40 am
Dave,
I’d searched the web for a quick, short PRECISE answer to the question on how to center a published SWF. Yours was the first that I came across that was RIGHT ON THE MONEY!!!! No jibber-jabbing - I love it!
Thank You!!!!
March 19th, 2007 at 6:59 am
Tony,
Heh, I often do jibber-jabber quite a bit, actually, but I’m glad this article was helpful to you!
April 24th, 2007 at 10:27 am
I am having trouble with the main swf that calls in all the other sub swfs that have different positioning script…for example…whenever i load in any swf with say…”align right”, even though the main is “top and centered”, the whole main movie’s positioning and everything slams to the right.
But I want one swf to load in “right” and one swf to load in to the “bottom” without messing up the main…ya know?
Thanks in advance
Bill
April 27th, 2007 at 9:13 am
Bill,
Given that there’s only one Stage, that does make sense. If loaded SWFs invoke
Stage.alignand tell it to do otherwise, it must obey.Pick one alignment and stick with it, because that sets your movie’s base coordinates. If you want a loaded SWF to position itself to the right, you’ll need to set its
_xproperty to the width of the Stage minus the value of its own width, as shown in the original article withmcLogo.Because you’re loading external content, you’ll have to use some mechanism to track its loading, then manipulate its positioning via
Stage.onResizeafter loading is complete.May 4th, 2007 at 7:26 pm
hello,
I love this effect. How do you “loadMovie” or load external swfs in to the main movie and have them also move with the stage. I have loaded them into an empty container movie clip and it appears that they aren’t behaving.
Thanks!
May 5th, 2007 at 11:49 pm
april,
The reason they don’t move is one of the hidden “gotchas” of dealing with dynamically loaded content. You’ll have to wait until your external SWFs are fully loaded; only then can you adjust the properties of their container clips.
If your
positionContentfunction, or something like it, is already in place, you should merely have to set the Stage.onResize event to that function when the content has loaded.May 9th, 2007 at 6:17 am
hi,
i think i have kind of the same problem: i want to load a swf-file(very complex with scrollbars and xml) into a container_mc which is centered in the middle of the browser/player with “onResize”.
first all the functions like scroller and external loaded data didnt worked at all until i changed all the paths in the swf to “_root.container_mc…”
when i now resize the browser/player, the container_mc and its whole content disappears very random-like.
where do i have to place the loadMovie-action or is it a problem with the absolut paths?? or how can i tell flash to NOT take attention to the external data in the swf, because if i dont load external data in the container_mc, it works fine!
thanks for listening to me! sniff.. : /
May 9th, 2007 at 9:50 am
sorry for spaming your blog, but i found a solution myself.
and for everybody who has the same problem should just put all the data of the external.swf in a content_mc. then load the external.swf in the resize.swf with the onResize-action > loadMovie(”external.swf”,3) and then align the mc in the external.swf to one of the movieclips in the resize.swf, like this:
loadMovie(”external.swf”,3);
onEnterFrame = function () {
if (Stage.height>=615) {
_level3.content_mc.moveIt(header_mc._x, (Stage.height-600)/2, 2);
} else {
_level3.content_mc.moveIt(header_mc._x, 8 , 4);
}
};
MovieClip.prototype.moveIt = function(targetX, targetY, delay) {
if (this._x != targetX || this._y != targetY) {
this.onEnterFrame = function() {
var difX = -this._x+targetX;
var difY = -this._y+targetY;
if (Math.round(Math.abs(difX))>0 || Math.round(Math.abs(difY))>0) {
this._x += difX/delay;
this._y += difY/delay;
} else {
this._x = targetX;
this._y = targetY;
delete this.onEnterFrame;
}
};
}
};
////
voilà!!
flash can be so annoying and not logical at all!!! :@
but lucky us that there is always a way to trick flash. : P
May 12th, 2007 at 7:52 am
Great blog. I am newbie at flash and trying to fit a background at any resulotion just like at : http://www.butspace.com/dupont/livingtomorrow/
Thanks in advance.
May 13th, 2007 at 9:40 pm
To sascha …
Hehe … well, I think that’s occasionally true, but as long as you can find a way to make it work, the bills get paid.
Glad you found a solution that worked for you.
To Ozgurerdogan …
That Dupont site is really just using a whopping large image. It will fit nicely into many resolutions, but if you go high enough you’ll see the edges. The easiest way to center an image this big is to wrap it in a movie clip and set its registration point to its center (rather than upper left), then position it at half of the Stage’s width by half of the Stage’s height.
May 14th, 2007 at 6:18 pm
Alright, I was wondering how I would go about having this container resize when the site is resized to fit the browser window. Basically I want all of the images in the container to resize to the new browser size but I want the copy to stay consistent no matter what browser window it is in. How would I go about achieving this resize? Currently I can get it to position whereever I want, I just can’t get it to resize automatically when the browser window is enlarged. Thanks in advance for your help
May 14th, 2007 at 7:42 pm
Nick,
Just as you can update a container clip’s position (
MovieClip._xand_y), you can update any other read/write property of that container, such has_width,_height,_xscale, or_yscale. If you want that container clip to be half the width of the Stage, you might do this:containerClip._width = Stage.width / 2;Now, doing so is going to affect that movie clip’s
_xscaleproperty (horizontal scale) by a certain amount. If half the Stage’s width happens to be twice the original width of the movie clip, its_xscaleproperty will be 200 (that’s 200%). In order to keep that movie clip from looking stretched, you’ll want to set its_yscaleproperty to the same value.containerClip._width = Stage.width / 2;containerClip._yscale = containerClip._xscale;
Make sense?
May 23rd, 2007 at 6:25 pm
I’m following you 100%, thank you for your help. I’ll get on it right now. Thanks again for taking the time to respond.
May 26th, 2007 at 5:56 pm
I have been unsucessfully trying to find out the answer to this question through many newgroups and forums and after reading your blog, it seems you would be the person to help.
I have an all flash site (embedded as a large swf into a 1 column/1 row table in an html file) published as 100% of browser window and would like to know how to keep a slide show (movie clip) within the large swf from resizing so the photographs in the slide show won’t distort when the swf enlarges.
I want the movie clip to remain a certain distance from the vertical and horizontal center of the large swf.
Is this possible and does it use code similar to what you are describing above?
Thanks in advance for any help.
May 29th, 2007 at 10:12 am
To Nick …
Glad to hear it!
To Linda …
What you’re after is definitely possible. The first step is to is tell the Stage itself not to scale, even if the SWF — as embedded in your percentage-based HTML — does. Then, use the
Stage.onResizeevent, as described in the article, to adjust theMovieClip._xand_yproperties of that slideshow clip as desired.May 29th, 2007 at 11:42 pm
Thank you. I will try that and let you know. I am happy to know it is possible. Again, thanks.
Linda
May 30th, 2007 at 11:45 pm
Linda,
Sure thing!
May 31st, 2007 at 4:12 pm
David,
i would like to know how it is posible for a movieclip to move (at ease) or in a certain speed to the position assigned in the _X & _Y when the browser is resized. I’ve seen this in many websites and i can’t seem to find a good response.
Thanks!
June 1st, 2007 at 2:29 pm
I found a good link where it explained a bit on how it can be done! thanks anyhow!
June 1st, 2007 at 3:18 pm
kineticKlash,
Hey, glad you found your answer — and sorry I’ve been delayed in replying to comments lately.
I imagine the link you found will lead you toward notifying the movie clip of its new desired location, then using a standard easing algorithm to get it there. The trick is to make sure your
Stage.onResizeevent handler stops any easing already in progress (in case the user resizes several times in a row) or isn’t thrown off by an adjustment to the destination coordinates.June 9th, 2007 at 2:49 pm
How can I get my Movie Clip to stay at the bottom on a full-page flash screen? Can you post the scrpt I need to use to get this effect?
Thanks in advanced!
June 19th, 2007 at 4:38 pm
i am looking to create a background like the one used on this site
http://www.letstakepictures.info/index.php
when you resize the browser the image gets smaller but never distorts and stretches. id love to know how this is done.
Ive looked at the source and its uses 100% width and height but the image does not stretch. Is there code i could add to a movieclip or give an instance to, and code it to go fullscreen like shown with whatevers in it?
Im really sorry if this topic has already been covered here ive read through everything and cant find one similar except the 2advanced website used as an example and that didnt help me
thank you
June 19th, 2007 at 5:48 pm
To Marc …
To make a movie clip stay on the bottom, use the
Stage.onResizeevent to set the movie clip’s_yproperty to the height of the Stage minus the clip’s own height.myClip._y = Stage.height - myClip._height;To Matthew …
When you say you looked up the source, do you mean you had access to the ActionScript inside the FLA file (or an external AS file)? I wonder if you’re talking about the HTML, which unfortunately isn’t going to tell you how the Flash content is programmed.
In any case, you can maintain an image’s aspect ratio by sizing one axis first, then setting the other axis to the same percentage of scale. For example …
That will keep the image from distorting. To me, it looks like they’re setting the image to some percentage of the Stage, rather than a direct correspondence, but you could experiment with that. You would do this resizing inside the custom
positionContent()function shown above.June 21st, 2007 at 2:54 am
hi david. i’m just wondering how i make a mc stay at the top of the screen and centred? thanks for a great tutorial - most helpful.
June 21st, 2007 at 2:57 am
ah, got it! set _y to 0. thanks david!
June 21st, 2007 at 8:38 am
adam,
Bingo!
June 23rd, 2007 at 12:37 pm
Hi David, wonderful site you have.
I would not bother you with this but I have tried so hard for about 20 hours to do something that may be simple for yourself. I wondered if you could advice me on this?
i have to put 2 movie clips on my site. The background is one and the site content is the other.
the background has to be full screen. it needs to resize but never show the edges of the image. i can do this in the publish settings.
the main content has to stay the same size as it includes all the pixel fonts etc and i can position it perfectly having followed your super advice above.
the trouble i have is that as soon as i put the two together it doesnt work. the background returns to its original size.
this must be because of the Stage.scaleMode = “noScale”;
i have gone thru your advice above so many time but simply can get a suitable solution. is there any chance you could advise me on how to achieve this?
i appreciate your time - you’re the best!
Kevin
June 23rd, 2007 at 10:04 pm
hello david, first i wanna say that your site helps me a lot, im not a flash expert and its great to hace such a resource
im trying to layout a site similar to this http://www.minus.dk/
i follow your tips and i almost there, the only thing i don´t get its how to get the bg image scale down only to a certain point, so if the browser aspect ratio its different that the image it stops scaling down and keeping the windows filled with the image.
sorry my english, im from argentina
thank you!
June 24th, 2007 at 11:35 pm
To Kevin …
I hear what you’re saying, and you nailed it: by setting
Stage.scaleModeto"noScale", which is what you need in order for theStage.onResizeevent to work, you’re overriding the environment that allows your background to resize itself. What you need, then, is to program that background movie clip to resize. If you don’t care that the background squashes/stretches, you can simply set its_widthand_heightto match that of the Stage:If you do care — meaning, you want to maintain the background’s aspect ratio — see my reply to Matthew on June 19.
To javier …
For something like this, you could use the
Math.max()method, which returns the larger of two numbers provided to it. For example, if you want your background to always be at least 300 pixels wide, you could do this …Make sense?
June 25th, 2007 at 7:32 pm
yes, makes sense, but no matter with number i choose, there´s always a portion of the screen that would not be filled because the code is maintaining the aspect ratio.
the example site i put before, it seems like the “stage.scalemode” is set to “noBorder”, thats the behavior i need in the background, but if i choose “noborder” the movieclips scale too.
many thanks for answering!
June 25th, 2007 at 7:42 pm
javier,
Gotcha. In that case, you may want to choose a percentage of the Stage slightly higher than 100%.
June 26th, 2007 at 2:12 pm
Here you go guys. A super simple way to acheive relative aspect ratio. Dave, sorry if there are double posts, Safari crashed on me.
June 26th, 2007 at 10:37 pm
another way, similar but shorter
June 27th, 2007 at 9:57 pm
M.A. Turner and javier,
Thanks so much for the input, both of you! I dig this sort of interaction.
Makes blogging pretty cool.
July 3rd, 2007 at 9:24 pm
Hi David:
Forgive me if this is a really basic question, but I keep getting the following error message when I cut and paste the code above into frame 1 of an actions layer. I have only a beginning knowledge of action script so haven’t been able to figure out what to tweak. Can you help?
Thank you.
Linda
Scene=Scene 1, Layer=Layer 2, Frame=1: Line 7: ‘{’ expected
function positionContent():Void {
Scene=Scene 1, Layer=Layer 2, Frame=1: Line 10: Unexpected ‘}’ encountered
}
1. Stage.scaleMode = “noScale”;
2. Stage.align = “TL”;
3. var stageListener:Object = new Object ();
4. stageListener.onResize = positionContent;
5. Stage.addListener(stageListener);
6.
7. function positionContent():Void {
8. mcLogo._x = Stage.width - mcLogo._width;
9. mcLogo._y = Stage.height - mcLogo._height;
10. }
11. positionContent();
July 19th, 2007 at 10:07 pm
Linda,
The errors messages in Flash are something of a mixed bag. They can often be helpful, but the “[some punctuation] expected” messages are often misleading, because they result from something else.
I copy/pasted the code from the blog entry into a new FLA and, for me, the code didn’t generate errors, so I wonder what’s going on here. The curly brace characters are definitely in the right place.
It would be a bit tedious, but have you tried carefully typing in the code snippet, line by line? I’m wondering if somehow the copy/paste introduced an incorrect line break or unexpected character.
July 31st, 2007 at 6:43 pm
hallo, this is actually my first ever post in a flash related forum… but i ve been bending backwards to find an answer to this but i cant…
i use slightly different code but even when i follow what you outline i still come up to the same problem…
namely, what happens when you stage align to “BL”..
this is either very bizarre or i am overlooking something completely obvious..
it seems that the x axis scales properly but the y doesnt follow..
so if i have Stage.align to BL and a place an mc with _x=Stage.width-20 lets say, thats works fine.. but, same scenario,.. if i try to place an mc with _y=0 then this is placed where the actual stage size of the flash file is…
same thing happens with your example when i use the exact same code but change the “TL” to “BL”…
makes any sense?
and the thing is.. it should work..
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
August 5th, 2007 at 8:25 pm
foss t.,
Just for clarity, this isn’t actually a Flash forum.
This is my personal/professional blog, so I’m the only one who “officially” answers questions here, though I always welcome helpful input.
Setting the
Stage.alignproperty to anything but “TL” is fine, but it means you’ll have to reconsider your math. With “TL”, the main movie’s point of alignment — its registration point, so to speak — is the upper left corner. Since Flash counts horizontally up to the right and vertically up in the direction of down, the math shown above works without a hitch. If you set the registration point to “BL”, which is bottom left, the zero point (the starting point) is now at the bottom of the screen, so you’ll have to count backwards rather than forwards for the y axis.August 6th, 2007 at 3:06 pm
Hi David. I’ve read through all of the Q & A listed here so far and I’m still experiencing problems. The website i am working on is entirely contained in one swf. the swf size is 1024×768. I think i need to use “noBorder” to entirely fill the page with the swf. My problem is the cropping that occurs. I also would like to limit the size that you can scale the swf to - in other words - i don’t want to be able to scale it to smaller than say, 640×480. I can’t seem to get the Math.max to work properly. Is there a way to fill the browser window completely with no cropping of the swf while maintaining the relative aspect ratio when scaling?
thanks for your time!
August 6th, 2007 at 3:51 pm
Aaron,
For the
Stage.onResizeevent to do its thing, you’re really going to need to set thealignproperty to “noScale” — use CSS in your HTML document to get rid of the page border …To limit scaling, you might use an
ifstatement along the lines of, say …… or, even better,
Math.max()ormin(), as you alluded to …The trick may be to talk it through, like a word problem. “I want this logo to never get pulled in tighter 640 pixels. That means I want its minimum distance from the left to be 640 minus its own width — but it should always take the maximum dimensions it can.”
August 6th, 2007 at 4:49 pm
thanks again! i appreciate the super-fast response time!
August 6th, 2007 at 9:47 pm
Aaron,
Sure thing.
Response time is luck of the draw, I’m afraid. I’m always glad to help, though, when I can.
August 7th, 2007 at 10:21 am
Hi again! So far I have everything basically working the way i want it to…except the movie clip using the onResize doesn’t appear in the browser window until the widow has been resized. is there a fix for this?
August 7th, 2007 at 10:26 am
Aaron,
You betcha. That’s why the resizing mechanics are stored inside a named function. After you define the
positionContent();function, call it. That will make it do its thing immediately — and theStage.onResizeevent handler is what makes it do its thing when the Stage resizes.August 20th, 2007 at 10:01 pm
Hey David… Big wraps- Very helpful gear. Look my question is, I’m getting a handle on the basic full screen “browser” coding but i am still trying to figure out how to animated ” transitions” of objects to different x & y around the “stage”. For example move objects on and off the screen in full screen mode. Any help would be great
August 22nd, 2007 at 9:56 am
Jarrad,
Animation can be a challenge to combine with the
Stage.onResizeevent, mainly because you have to write your code in such a way that repeated triggering of thepositionContent()function (or whatever equivalent) doesn’t upset the animation itself: the Stage’s width and height may change at any moment, so you may (for example) send a movie clip to 500px from the left over a period of 20 seconds, and yet within 10 seconds, the browser has been narrowed to 400px wide. Obviously, your movie clip will not be visible when it comes to its stopping place.It may help to think in terms of percentages, sending objects to a sliding scale of destination points, based on Stage width and height. You can certainly animate your objects independently of the
Stage.onResizeevent. You might usesetInterval()or theMovieClip.onEnterFrameevent — anything can repeatedly trigger a function. You might also check into theTransitionclass, which facilitates scripted animation, or (even better), The Fuse Kit. If your Stage alignment is set to “TL,” then anything less than zero will be above the Stage or to the left, out of sight. Anything greater than the currentStage.widthandheightproperties will be below the Stage or to the right, out of sight. (And again, that’s the tricky part.)August 29th, 2007 at 11:26 pm
Hi Mr. Stiller,
How can I keep the image background from stretching when resizing the browser window, anotherwords like this website: www.zinkmag.com/
notice how the menus stay in true size and centered, the menus on my code are in hello_mc and bkgrnd is the background image. Here is the code I have:
Stage.scaleMode = “noScale”;
Stage.align = “TL”;
var stageListener:Object = new Object ();
stageListener.onResize = positionContent;
Stage.addListener(stageListener);
function positionContent():Void {
bckgrnd._width = Stage.width;
bckgrnd._height = Stage.height;
//hello_mc._width = Stage.width ;
///hello_mc._height = Stage.height;
hello_mc._x = Stage.width / 2;
hello_mc._y = Stage.height -322;
}
positionContent();
August 30th, 2007 at 11:15 am
TicoXXX,
See my reply to javier, back in June 25, 2007; plus, there are a cluster of comments during that time for other approaches. The easiest way I can think of is to set the width of your image (its
MovieClip._widthproperty) based on the Stage’s width (or some fraction of the Stage’s width, as you please). Doing so will affect that image’sMovieClip._xscaleproperty. To maintain aspect ratio, set the image’sMovieClip._yscaleto the same value.September 5th, 2007 at 12:06 pm
David, I am having some trouble with an empty movie clip situation. I am creating a site for a photographer who wants many galleries with many pictures on each gallery. I have figured out how to call the jpgs into an empty movie clip from an outside folder. the issue I am having is this: how do I adjust the size of the movie clip to fit each picture? I’m sure I can adjust the size of the horizontal pics to fit the mc, but it’s the vertical pics that will mess that theory up. so I need to know how to get the empty mc to adjust to each individual jpg called into it. I will explain how I have the layers of the flash project laid out. The 1st layer is the loader with the empty mc, the next layer is for the thumbnails (buttons) that have the actionscript on each one to call the jpgs in and out. Do you think you can help me out with this? It will be greatly appreciated and would really pull me out of a big hole. Thank you for your time. Respectfully, Anthony Scotti
September 10th, 2007 at 11:53 pm
Hi David,
I am very inexperienced with actionscript in general, but I have been experimenting with a full window flash movie. My movie consists of a background animation which I would like to resize as the browser window is resized, but with menu bar and other clips above it that I would like to stay the same size and in the same position. The intro to this site has what I am talking about: http://www.thenorthatlantic.com/.
I have been able to make this work with the positioning using the code you posted above, but not with width or height. I cannot find any tutorials that deal with keeping the size of objects the same whil others resize, and I’m almost ready to give up!
So again, a background mc that resizes and foreground mcs that do not. HELP!
-Nick
September 11th, 2007 at 7:36 am
To anthony …
Assuming you haven’t changed the scale of your previously empty movie clip — this container clip — then any new JPGs you add to it will change the dimensions of that clip by virtue of being present. In other words, a new empty movie clip has a width and height of 0 x 0. If you load a 120 x 180 image into that clip, its new dimensions become 120 x 180. If you add a second image of the same dimensions and position it 10 pixels to the right of the first, the new dimensions of the container clip become 250 x 180 (that’s twice 120 plus the 10px gap between them, and the same height for both).
I think what you’re after then, really, is nothing more than repositioning your container clip as new images are added, though it’s entirely possible I haven’t correctly envisioned your goal in my mind’s eye.
To Nicholas …
As it turns out, you can use the repositioning technique to adjust dimensions / scale in the same way as position. Rather than setting an object’s
_xand_yproperties, experiment with its_xscaleand_yscaleor_widthand_heightproperties (see the relevant class file, such asMovieClip, to see what properties the object at hand supports).If your
Stage.scaleModeis set to “noScale” (which it needs to be forStage.onResizeto work), then none of your content will scale unless you tell it to. Whatever you want to see enlarged or reduced will configured in relation to the current dimensions of the Stage, which can be gleaned from theStage.widthandStage.heightproperties. Check out my earlier reply to TicoXXX to see one way to resize something while respecting its aspect ratio.September 11th, 2007 at 12:54 pm
hi. i still can’t center my movieclip. it has mask and mask dimensions don’t equal to its content dimensions. so i gonna center the movieclip according to the mask, not to its real _width and _height. but i can’t figure out how to make this reposition.
September 14th, 2007 at 3:45 am
Hi David —
your are really good at this, and I cant believe you’re helping so many people all the time! That said, my flash movie still wont do what I want. I’ve got two movieClips — one called “jellyfish” that I want to resize and stay in the same aspect ratio, and one called “text” that I want to not rescale or reposition. The trouble is that whenever I tell “jellyfish” what to do via the positionContent function, the “text” movieClip also recales. Here’s the code I’m using:
Stage.align = “TL”;
var stageListener:Object = new Object ();
stageListener.onResize = positionContent;
Stage.addListener(stageListener);
function positionContent():Void {
jelyfish._width = Stage.width;
jellyfish._yscale = jellyfish._xscale;
}
positionContent();
Any idea why I can’t make it work?
-Nick
September 14th, 2007 at 10:26 am
To timteka …
Consider wrapping your masked movie clip inside another movie clip. That’s step one. Give this container movie clip an instance name so you can control it with ActionScript. Next, enter its timeline, which puts you back to where you were originally: a movie clip and its mask. Convert the mask to a movie clip as well and give it an instance name.
Now you have three movie clips: the container, the mask, and the movie clip content. Your
positionContent()function will set the_xand_yposition of the container, but it will take its_widthand_heightmeasurements from the mask:To Nicholas …
Chin up!
Looking at your code, I don’t see any reference to a text field — only to jellyfish — so I wonder if jellyfish actually contains that text? If so, the text will resize with its container. You’ll have to either set the text movie clip in the same timeline as jellyfish (rather than inside jellyfish’s timeline) or type additional code to compensate the text’s inherited scaling.
The only other thing I can see is that you haven’t set the
Stage.scaleModeproperty to “noScale” — without that, everything in the SWF is going to scale automatically.September 14th, 2007 at 7:20 pm
Thanks for trying — I think I need to go back over some of the AS basics!
September 16th, 2007 at 6:23 pm
[Follow up on Nicholas’s file.]
It turns out the publish settings for Nick’s FLA were configured for ActionScript 1.0, which means he had to drop this strong typing. That worked, but then his jellyfish file would occasionally show letterboxing — black stripes around the bottom or right side, depending on the aspect ratio of the browser — so I suggested the following:
November 15th, 2007 at 7:02 am
Hey David,
Good work with the blog, it’s great that you’ve been so generous answering all the questions. I’ve gone through all the comments, learning new things and fixing problems, however I am stuck with two.
The file can be seen here:
http://members.optusnet.com.au/expansiondesign/Website%20V6/
Related code:
Stage.scaleMode = “noScale”;
Stage.align = “TL”;
var stageListener: Object = new Object();
stageListener.onResize = positionContent;
Stage.addListener(stageListener);
function positionContent():Void {
background2._width = Stage.width;
background2._height = Stage.height;
content.sidebar._x = 0 - 147;
content.sidebar._y = 0;
content.sidebar._height = Stage.height;
content.imagebar._x = content.artwork._x
content.imagebar._y = content.artwork._y
content.artwork._x = Stage.width / 2 - content.artwork._width / 2
content.artwork._y = Stage.height / 2 - content.artwork._height / 2
}
positionContent();
Firstly, the browser has to resize before the icons line up with the top left corner of the image. However I have called positionContent(); content.artwork is the image mc and content.imagebar is the mc containing the two icons (the script is on their parent timeline).
Second problem is the 5-10px gap on the top and left. I read your entry on full size swfs in firefox and wondered if that is what I’m after. Do I place the code in the published html file? Cos I tried that but no dice. I’m testing it on Safari.
Another question - if you add a second function (ie positionIntro) later on in the timeline, do you have to create a new Object(); and should it have a different name?
Thanks so much mate,
Cheers
Barton
November 15th, 2007 at 4:06 pm
Barton,
That looks like an order-of-execution issue. In your code, you’re adjusting
imagebarfirst, based on the position ofartwork— and then you’re updating the position ofartwork.Reverse those, and you should see an improvement.That’s not the Firefox issue, per se. That’s happening because most browsers, by default, put a bit of padding on the margins of every page. In the CSS for your HTML document — either in an actual CSS file or a
<style>tag in the page — you’ll need to set themarginproperty to 0 for the<body>tag (you’ll see that under the Variations heading of the Firefox article).There can only be on event handler for the
Stage.onResizeevent at a time. You’re already set up to listen for the event, so if you change your mind in the future (i.e., later in the timeline), just do something like this:stageListener.onResize = positionIntro;The
onResizeevent is going to fire, regardless. TheStageclass is already wired up to listen for it (thanks toStage.addListener(stageListener);), so you can update what it does by swapping out (re-assigning) a new function.November 16th, 2007 at 9:29 pm
Great got all those problems solved. The reason I was confused with the padding is because I was opening up the html file in TextEdit and it wasn’t showing all the script. Opened in Dreamweaver and it all made sense
Thanks for the quick reply.
Barton
November 20th, 2007 at 5:12 pm
Barton,
Sure thing!
December 2nd, 2007 at 2:16 pm
Hey David,
great post. One question everything works fine, and i’ve added a actionscript inside my background movieclip that changes the images from a XML file to be resized. Problem is it only shows up when i resize my brower window. How do i get it to appear when the browser opens up? many thanks
December 2nd, 2007 at 10:08 pm
Sherv,
Whatever your custom function is that resizes everything (above, it’s called
positionContent()), you’ll need to call that function once in addition to assigning it to theStage.onResizeevent. In the original article, you’ll see the function called immediately after it’s defined.Does that make sense?
December 10th, 2007 at 4:13 am
David,
I am having troubles with resizing SWF’s loaded into a MC, could you post some code or tutorial that will help with this, I have been stumped on it for a while now!
T
December 11th, 2007 at 9:22 am
rhanks,
The trick to what you’re after is to hold off on the
Stage.onResizeevent handler until your external content has loaded. Here’s a quick example, based on the code sample in the blog entry:Much of what you see is the same. The Stage listener object is now called
listener(instead ofstageListener), and I did that merely for clarity’s sake — because I’m using that same object for two events now:Stage.onResizeandMovieClipLoader.onLoadInit. Note that theStage.addListener()method has been moved inside the event handler foronLoadInit. The reason for that is so theonResizebusiness doesn’t happen until the external JPG has loaded into itsmcLogocontainer. TheaddListener()method for theStageclass addsthisinstead oflistenerbecause it’s inside a function already associated withlistener.December 13th, 2007 at 9:52 pm
David,
Thank so much for all your help thus far.
I am wondering how to make the centered movie clips stop moving when they reach a a certain browser window size (in other words - when the window has been resized to small)
I don’t want these objects to keep moving off screen when the window size is decreased. I want them to stop at a certain x and y value.
From your discussion above with javier, I assumed this might do it….
navBar._x = Math.max(Stage.width, 200);
navBar._y = Math.max(Stage.width, 200);
…but I guess not;)
How do I achieve this?
December 13th, 2007 at 10:31 pm
Kit,
So … the clips move as someone resizes the browser (which is to say, the Stage) … and you’re cool with that — until the user makes the Stage very small. At that point, if the user makes the Stage even smaller, you want the clips to stay put. Is that right?
If that’s right, keep in mind: the movie clips will disappear under the edge of the browser as the user continues to size the Stage into the smallest configuration it’ll accept. If that’s what you’re after,
Math.max()should do it. In your snippet,navBaris set to the greater value betweenStage.widthand 200. IfStage.widthhappens to be 500,navBarwill be at 500 pixels in. IfStage.widthhappens to be 400,navBarwill be at 400 pixels in — because 400 is bigger than 200 — untilStage.widthis finally smaller than 200. At that point, the greater number is 200, sonavBarwill stay at 200.Of course, if
navBar’s registration point is on its left edge (upper left corner is standard), you won’t actually seenavBar. You may want to do something like this:And then, for
navBar._y, you’ll want to compare againstStage.heightinstead of width.December 13th, 2007 at 11:09 pm
Hmmm, it still isn’t doin what I would like. Maybe I am not describing it very well. I pretty much want it to do the same thing as in this site…
http://www.chevaldetroie.net/
Notice how the duck and clouds in the center stop moving when the browser window is reduced to a certain size…
December 14th, 2007 at 10:33 am
Kit,
I really think those ducks and clouds are following the
If I were doing that site, I would probably put the registration point right in the middle of the movie clip that represents the cluster of clouds. That would make the centering very easy:
Math.max()strategy.clouds._x = Stage.width / 2;(as opposed to the usualclouds._x = Stage.width / 2 - clouds._width / 2;).When my browser is very wide, the clouds are centered. When I pull my browser narrower, the clouds stay centered up to a certain point. Finally, they stay put and eventually disappear under the right edge of the browser. This tells me they’re being positioned at the greater of two values: either
Stage.width / 2or approximately (looks like) 450px.Of course, this is based on the idea that the alignment of the Stage is set to “TL” (top left). You can set your Stage’s alignment to a number of settings, which is basically like setting the registration point of the Stage.
December 14th, 2007 at 8:19 pm
OK. I played around a little more and got it. The movie clip with the large glowing effect (which extended much further off the size of the screen) was throwing it off.
Thanks
Do you have any idea why my navigation mc buttons are staying highlighted even when I roll off of them? The roll out sequence of frames does not seem to playing out every time. Sometimes it does, but other times the button stays on the “over” state:(
Kit
December 14th, 2007 at 10:28 pm
Kit,
Great!
If I remember right, you’re sending the playhead to a specific frame with
gotoAndPlay()on over and on out. As you’ve seen, that’s certainly an approach, but it does tend to “hang” sometimes. You probably havestop()actions in the timelines of your buttons. Rather than stop every time, use anifstatement to stop on a certain condition: the condition (which you’ll have to write) that gets set as a variable in your over and out event handlers.Please tell me if I’m off base, because I’m going from memory. In the timeline of your buttons, set your first keyframe’s script like this:
if (!this.over) stop();Set the keyframe that represents the over state (highlighted) like this:
if (this.over) stop();Set your last keyframe like this:
this.gotoAndStop(1);In your custom
over()andout()functions, replace thegotoAndPlay()statements withplay()statements, and update the customovervariable appropriately:The key here is that custom
overvariable. Whenoveristrue, the timeline for that button still stop, because of theifstatement in the middle keyframe of the button’ss (actually a movie clip) timeline. If the user has since removed the mouse, that timeline won’t stop — won’t get hung up — and will simply hit then end and be sent back to frame 1 of that timeline. Opposite for the first keyframe, which checks ofoveris not (!)true.December 15th, 2007 at 3:12 pm
That worked a treat! Thanks again David.
Wow, you have helped me so much to understand the little things that I have always wondered about. This industry needs more guys like you who are willing impart of there knowledge. I owe you one!
Thanks again
Kit
December 18th, 2007 at 2:49 pm
Kit,
Glad to help.
December 19th, 2007 at 12:54 pm
Hi David,
Your blogs are great, thanks for your hard work. I’ve read through all the posts, and tried everything but still cannot get this to work. I know this has been posted, but for some reason my code below isn’t working properly:
I’d like the background to scale proportionately, which I’ve achieved already. However I’d like it to stop scaling once it reaches a certain point and not scaled the background image once it reaches 400 px in width.
Can you please help, my code is below:
Stage.scaleMode = “noScale”;
Stage.align = “TL”;
var stageListener = new Object();
stageListener.onResize = positionContent;
Stage.addListener(stageListener);
function positionContent() {
var ratio = Math.max(
Stage.width / mcBackgroundRect._width,
Stage.height / mcBackgroundRect._height
);
mcBackgroundRect._yscale *= ratio;
mcBackgroundRect._xscale *= ratio;
}
positionContent();
Thank you…
December 19th, 2007 at 4:20 pm
Eddy,
Okay,
mcBackgroundRectneeds to scale proportionately in response to the browser — but its longest side should never get longer than 400? Here’s one way to do that:The only thing that changes is a new variable,
isWiderThanTall, which determines how the resizing should go later. As appropriate, eithermcBackgroundRect’s width or height is set to the smaller value between the Stage’s width or hight and 400. Then the_yscale(or_xscale) property is set to suit.December 19th, 2007 at 4:32 pm
Hi David,
Thanks for the quick reply. Please let me clarify what i meant, the image should fill up the whole window, and the image should scale proportinately until it’s dragged down to 800 px in width, or 600 px in height:
here is my revised code:
Stage.scaleMode = “noScale”;
Stage.align = “TL”;
var stageListener = new Object();
stageListener.onResize = positionContent;
Stage.addListener(stageListener);
function positionContent() {
bgClip._width = Math.max(Stage.width, 800);
bgClip._yscale = bgClip._xscale;
logo._width = Stage.width;
logo._y = Stage.height - logo._height;
}
positionContent();
I’ve managed to get the width working, but when the window goes smaller, there’s white space underneath the image.
Can you please have a look?
Thank you…
December 19th, 2007 at 4:48 pm
Eddy,
If the browser dimensions ever veer from an 8:6 (i.e., 4:3) ratio, you’re simply going to get a letterbox effect unless you allow the image to spill over past the edges of the Stage. Now it sounds like you want the image to always be at least 800×600, but proportionately larger if the browser is too.
Assuming your artwork is already equal to or greater than 800×600, the following would do it:
December 19th, 2007 at 7:49 pm
That is awesome… works like a charm.
Thank you SO much David, I searched everywhere for this answer and almost pulled my hair out!! I really appreciate your help!
December 19th, 2007 at 7:59 pm
Hi David,
One more quick question… the image flickers for a split second before it reaches full browser size. Is there a way to get it to be browser size on load?
December 19th, 2007 at 11:04 pm
Eddy,
Note that the
positionContent()function only does something when the Stage’s dimensions are greater than 800px wide or 600px tall. IfmcBackgroundRectis set to those dimensions by default, it should be fine … but you could always set the_widthand_heightproperties ofmcBackgroundRectoutside of the function. Try preceding thepositionContent()declaration with:December 20th, 2007 at 10:31 am
Thanks again for your help David, this has solved the problem. One last question, I have a footer that stays at the bottom of the window when it’s resized, however when the browser window shrinks below 800×600, the footer disappears. Is there a way to have it always at the bottom? My code is below:
Stage.scaleMode = “noScale”;
Stage.align = “TL”;
var stageListener = new Object();
stageListener.onResize = positionContent;
Stage.addListener(stageListener);
Stage.showMenu = false;
mcBackgroundRect._width = 800;
mcBackgroundRect._height = 600;
function positionContent():Void {
if (Stage.width > 800 || Stage.height > 600) {
var ratio = Math.max(
Stage.width / mcBackgroundRect._width,
Stage.height / mcBackgroundRect._height
);
mcBackgroundRect._yscale *= ratio;
mcBackgroundRect._xscale *= ratio;
footer._width = Stage.width;
footer._y = Stage.height - footer._height;
}
}
positionContent();
Thanks again,
December 20th, 2007 at 10:53 am
Eddy,
Take your footer movie clip’s positioning instructions outside of that
You want the footer to move in all cases, not just of the Stage is wider than 800 or higher than 600.
ifstatement.January 10th, 2008 at 9:09 pm
Hi David,
I hope you are well.
A while back on this message board you helped me make some movie clip buttons which did not get stuck when hovered over. This did help somewhat, but the problem is still there. Take at a look for yourself….
www.motorcademarketing.com
Is there anything else I can do?
Thank you
Kit
January 11th, 2008 at 9:41 am
Kit,
At first, I didn’t see the buttons sticking — the hovering works fine — but then I pretended to actually click one and saw what you’re talking about. This should be easy to fix, actually.
The problem is that clicking-and-dragging-off causes the button to stick. The reason for that (this is a guess, of course) is that you haven’t written an
onDragOutevent handler. You’ll want drag outs to the same thing roll outs do, so follow youronRollOutevent handler with the following line:… which performs the same function for both events.
January 13th, 2008 at 2:48 pm
Excellent tutorial, excellent comments…!
I thought I would find here the solution to the problem I spent the day trying to figure out. But either nobody stumbled on it or it is impossible (I think more too tough for me).
Centering works flawlessly. The thing is I have inside the centered movie clip a dynamic scrolling text and, depending on its size and position, it makes its container grow, first on the right, then on the left as it scrolls, screwing up the centering big time.
I already noticed that masked items are included in the width of an object and read the comment about it. I simply don’t know how to deal with it when they’re dynamic. I tried everything I could think of, I’m cooked.
Thanks,
January 14th, 2008 at 8:48 pm
Paul,
I’m not sure I follow 100% what you’re after, but you may want to consider nesting your movie clips in creative ways to achieve your goal. If your text field’s flexible dimensions are upsetting the current centering, try using a different movie clip, also within the main movie clip, as your gauge for width and height.
January 23rd, 2008 at 8:53 am
I wonder how they do in the Dupont website (http://www.dupontvisual.com/DuPont/LivingTomorrow/) to move the picture when the mouse is getting closer to the border. Any suggestion?
January 23rd, 2008 at 9:00 pm
Jimmy,
Looks like they’ve got an
onMouseMovehandler or maybe anonEnterFramehandler that continuously notes the position of the mouse compared with the coordinates of the Stage. That would work independently of theonResizeevent, as it turns out — wouldn’t depend on it at all. So you could start experimenting in a new FLA file with nothing in it. Write aMovieClip.onMouseMovehandler for the main timeline:Move the mouse around to see the coordinates of the mouse. What you do with those numbers, of course, is up to your imagination.
With a series of
ifstatements, you could determine when the mouse was within range of the corners or edges, then instruct a movie clip (new content you’d have to add) to move in response to that.January 26th, 2008 at 1:18 pm
It took me most of my free time these last ten days to figure out my apparently ill-described problem and I’m not proud of that. But being self-taught I may miss some essentials which sometimes come to bug me. I will summarize my findings so it might help other wannabe programmers.
As I mentioned before, a symbol or a movie bigger than its container or or placed outside its container’s boundaries makes the latter grow. What I discovered is that it only grows from its point of origin. Stupidly enough, it took me hours to understand the implication of that: whatever happens inside the container, its point of origin on the stage doesn’t change…
I made a little demonstration of this behaviour here.
With that in mind, centering anything is a piece of cake. Instead of using the actual
_widthand_heightof the container in thepositionContent()function, store them in variables BEFORE adding or loading anything in it. The centering will be made with the original size of the container, not the size it may grow to with loaded content.So simple it hurts.
January 27th, 2008 at 10:18 pm
Paul,
Oh man … I hope my earlier reply didn’t discourage you! Looking back on what I wrote, I could call my own reply “ill-described.”
I’ve been unusually busy these last several weeks, and it may very well be that I wasn’t in a wakeful state of mind when I read your question.
For what it’s worth, you shouldn’t feel bad at all about taking ten days to slog through a problem. What you’ve described isn’t out-there at all.
Those are the best kind! They stick!
Thanks for following up with your discovery, Paul, and for putting it in exactly the terms you did. I’m confident it’ll be useful to others.
January 30th, 2008 at 11:59 am
Hi David,
Thank you again for all your help. I do have one more question, I am really stumped on this one. I am using this code you suggested to load a full screen background image, and it is working perfectly:
Stage.scaleMode = “noScale”;
Stage.align = “TL”;
var stageListener = new Object();
stageListener.onResize = positionContent;
Stage.addListener(stageListener);
Stage.showMenu = false;
mcBackgroundRect._width = 800;
mcBackgroundRect._height = 600;
function positionContent():Void {
if (Stage.width > 800 || Stage.height > 600) {
var ratio = Math.max(
Stage.width / mcBackgroundRect._width,
Stage.height / mcBackgroundRect._height
);
mcBackgroundRect._yscale *= ratio;
mcBackgroundRect._xscale *= ratio;
footer._width = Stage.width;
footer._y = Stage.height - footer._height;
}
}
positionContent();
However, I would like the background image to fade out and fade in another fullscreen background image when the user clicks on a button. Essentially, it gives the user the option to change the fullscreen bkgd image.
I really have no idea on how to even start, could you please offer some insights?
Thank you!
January 31st, 2008 at 7:14 am
Hi David,
I’m facing a very stupid problem, I think,
I’m using the following code:
var stageListener:Object = new Object();
init();
function init() {
Stage.scaleMode = “noScale”;
Stage.align = “TL”;
Stage.addListener(stageListener);
stageListener.onResize = stageResize;
back1._width = Stage.width;
back1._height = Stage.height;
back2._width = Stage.width;
back2._height = Stage.height;
back3._width = Stage.width;
back3._height = Stage.height;
}
function stageResize() {
back1._width = Stage.width;
back1._height = Stage.height;
back2._width = Stage.width;
back2._height = Stage.height;
back3._width = Stage.width;
back3._height = Stage.height;
}
It work really fine, the “back” 1, 2, 3, are background movieclips that contains jpeg images and are load one after another. Everything works fine until I resize the window, the current background proceeds it’s animation normally but in the endof the animation, when I load the next image, it won’t resize or show up the next image at all…
Can you help me?
Thanks
February 13th, 2008 at 8:28 am
Hi David,
Have you ever tried to center align the page flip component? (http://page-flip.com/)
I’m having a few issues. The component once loaded uses lots of masking inside it therefore making the size of the mc on the stage rather large in _width and _height.
I’ve tried to place the component into a new MC on the stage and scale it to fit proportionally inside the Stage.width and Stage.height but haven’t had much luck.
Any help would be much appreciated.
April 11th, 2008 at 4:20 pm
Hey man.
This helps me a lot here but I still have one question.
This code is based on the fact of the mc the movie is talking to is aligned to the upper left corners of itself. And if you wanted to have the mc be centered within itself, to align it right, you would do the (Istage - half the mc) thing. What I want to do is have the mc centered within itself but also centered on the stage. I’ve been wracking my brain to come up with something that links (stage.width/2-mc.width/2) and (mc.width/2) btu to no avail. You kind of understand what I mean?
Any insight would be appreciated.
Thanks in advance man.
April 19th, 2008 at 10:52 am
Hi David
Nice topic here, it’s very hard to find a good tutorial or post in regards to this problem And especially get some to answer them. I have a problem a long with many other people. Ill give you a straight example of exactly how i think full screen should work. http://www.lessrain.com/index.php?localeISO=en_UK. The guys at less rain have nailed this, and for years i have always wondered how they have done this. The content is xml based, but the full screen landscape is controlled somehow, maybe js thats called in as, but it is exactly how i would like my background to function. I have my background solid 100%, but it does not scale proportionally. Would you have any ideas on how i could make this work?
Thanks
Aaron
April 19th, 2008 at 11:31 am
Oh i forgot the code im using, whivh works in firefox, safari, but not ie7.
Stage.scaleMode = “noScale”;
bkg._width = Stage.width;
bkg._height = Stage.height;
stageListener = new Object();
stageListener.onResize = function() {
// resizes the bkg MovieClip to fit width and height of Stage
bkg._width = Stage.width;
bkg._height = Stage.height;
};
// Assign a listener for the Stage object
Stage.addListener(stageListener);
I want my menu in the bottom left corner, and the main content to load into the top middle of the screen, preferably using external swf’s. But also wnat that content to scale with the background, just not proportionally. Pretty much what less rain have achieved.
Thanks man
April 20th, 2008 at 9:49 pm
To Eddy …
Sure thing, Eddy. Here’s a new article, “How to Position Dynamically Loaded Content Based on Browser Resizing,” that covers an approach I’ve used in the past. I hopd this answer is still useful to you after such a long wait!
To Rita …
I’m not sure, but I think my answer to Eddy might help you in your own endeavor. If not, you may need to make sure to re-assign the
onResizewhen new content is loaded. If you putback1,back2, andback3into the same container — just another movie clip, a parent clip to all three of them — and set your width and height changes to the single container, that may do it for you, and you could bypass the need to reassign the event handler.To Ricky …
I haven’t tried to align the flip component, actually. Masking can certainly have an effect on the width and height measurements of a SWF (that is, a movie clip), but there are additional
MovieClipclass members you can use to dig around for the information you need. Have you tried theMovieClip.getBounds()method, for example? (Not a trick question, by the way … I honestly don’t remember, offhand, if that gives you different measurements than_widthand_height, but it just might. Another avenue to try, anyway.To devon …
I think you’re saying that your movie clip’s registration point is at its center (”if you wanted to have the mc be centered within itself”) — and if that’s so, then centering it to the Stage would simply need:
mc._x = Stage.width / 2;mc’s position is its center, so putting its position (its_xat the center of the Stage does what you’re after.To Aaron …
It looks like they’re using JavaScript to resize and position the browser (see their
doResize()function when you use your browser to view source). That resizing would be handled by theStage.onReiszeevent the same as a user-initiated resize. In fact, when I resize my browser, I notice that various elements on their site respond, so yes, it looks like they’re using both. That said, it doesn’t look to me as if their ActionScript directly calls their JavaScript, so while both are present, they’re essentially unrelated.This is one way to do it:
bkg._width = Stage.width;bkg._yscale = bkg._xscale;
The width of the background is set to the width of the Stage, when the _yscale is set to whatever the _xscale happens to be, now that it matches the width of the Stage.
The code you’ve shown should work just fine in IE7. That one stumps me.
To keep content to the bottom left — assuming its registration point is in the upper left — you could use this:
content._y = Stage.height - content._height;To keep content in the top middle (i.e., top center), you can set the content’s
_xproperty to the Stage’s width divided by two, minus the content’s own width divided by two:content._x = Stage.width/2 - content._width;It’s really just a matter of thinking through where items need to be, then figuring out those positions translate into numbers. It usually helps me to draw stick figures on a piece of paper or whiteboard using actual numbers, then slowly work through how to make the numbers “generic” in terms of a Stage whose width and height are unknown.
May 15th, 2008 at 7:12 am
Hi David,
sorry if this has been answered before! I’m not great with flash but am trying my best.
I have a background with navigation btns. When you click one of these I want to load an external swf onto the background.
When I do this using createEmptyMovieClip it seems to position ranged top left and I can’t centre it as I’d like.
Have tried another way where the position is not centred, but when you resize the window it jumps into the centre. But I can’t get it centred properly until it’s resized! I have no idea what’s going on… sorry
many thanks in advance
Pip
June 14th, 2008 at 11:43 pm
David-
This blog has really helped me with my site. My problem is I have a movie clip loading into a container. I have code from this site that uses a listener to wait until my swf is loaded before the stage resizes. My problem is that if I load another movie into the same container or even another, it won’t stay in the same position, centered. I have to drag the screen to active the code again. Is there a way to refresh the onResize code after you load another movie? Or how can I get a clip to center after the screen has already been resized? Thanks.
June 16th, 2008 at 11:21 am
To Pip …
That’s right, the
MovieClip.createEmptyMovieClip()method will produce a movie clip whose registration point is the upper-left for any content it contains. This means you’ll have to use the width and height of this movie clip, along with its x and y position, to center its content.I’m afraid I don’t understand that part. I’m confident we can work through your questions, but to get there, I’ll have to be able to see clearly on my mind what’s going on. Could you describe your issue again?
To cranberryjello …
The
Stage.onResizeevent is only dispatched when the user resizes the stage (via the browser), as you’ve seen. You can certainly invoke your repositioning code (positionContent(), in the above article) by simply naming that function in your load listener. (I’m assuming you’re using theMovieClipLoader.onLoadInitevent, so in your listener for that event, you would simply includepositionContent()in the event handler.)This tutorial might give you exactly what you’re looking for:
How to Position Dynamically Loaded Content Based on Browser Resizing
June 17th, 2008 at 10:01 pm
David-
I had previously looked at the tutorial you linked and it is pretty over my head. I tried it out, but one of my problems is that one of the swfs im loading into the container contains the buttons that control the loading of image galleries. so i couldnt target the buttons, or find a way to change the mcl.loadClip into loadGallery without messing up all the code.
Anyway I think there’s an easier way. You were saying I could invoke the code to resize based on another listener. I using the “listener.onLoadInit”, but I’m confused as to how to write another listener that basically says, when this swf is loaded (viewer.swf), resize. Heres my code:
Stage.scaleMode = “noScale”;
Stage.align = “TL”;
var listener:Object = new Object();
listener.onResize = positionContent;
function positionContent():Void {
mcPackage._x = 25;
mcPackage._y = 25;
mcLogo._x = Stage.width - mcLogo._width - 25;
mcLogo._y = 25
mcLoader_diagram._x = Stage.width / 2 - mcLoader_diagram._width / 2;
mcLoader_diagram._y = Stage.height / 2 - mcLoader_diagram._height / 2;
mcLoader_viewer._x = Stage.width / 2 - mcLoader_viewer._width / 2;
mcLoader_viewer._y = Stage.height / 2 - mcLoader_viewer._height / 2;
mcLoader_small._x = Stage.width - mcLoader_small._width - 25;
mcLoader_small._y = Stage.height - mcLoader_small._height - 25
}
var mcl:MovieClipLoader = new MovieClipLoader();
mcl.loadClip(”mcDiagram.swf”, mcLoader_diagram);
listener.onLoadInit = function():Void {
positionContent();
Stage.addListener(this);
};
mcl.addListener(listener);
//Image Gallery code
_global.SVStageWidth = 550;
_global.SVStageHeight = 425;
function loadGallery(galName){
_root.xmlDataPath = galName;
mcLoader_diagram.loadMovie(