I have just uploaded a new tutorial called Full Browser Flash which shows you how to use the BitmapData class to fill the browser window with a seamless background pattern. Then I show you how to setup a full browser movie so that your assets don’t scale and remain centered on the stage. Check it out at http://www.gotoandlearn.com.
Lee
Lee, once again a great lesson, but one of the practices you’re teaching this time is something that annoys me immensely. I have two monitors and the smaller one is 1280×1024 pixels — not a rare resolution, and screens are getting larger these days. The greatest single reason why Opera is my preferred browser is the fact that it has a true resize function that enlarges and shrinks not just text but all elements on a page, including swfs, to which it sends a resize event. And images still look good when enlarged. The last thing I need in a web page is some illegibly small element, be it text or graphic, that is fighting my explicit request to enlarge it. I’m so glad that the gotoandlearn.com site itself respects the resize event!
I’m from Japan. Would you tell me your WindowsXp theme.I saw gotoandlearn.com and I liked it.please.
FYI – The squidfingers url is case sensitive. I had caps lock on and it came up 404.
Silly web
What happened to this tutorial???
Hi Alan,
While on one hand I agree with you about resizing the browser, you don’t want that to happen if you are using Bitmaps in your Flash movies. At least I don’t want people to be able to zoom and contort them. I like knowing that everyone who sees the Flash movie, will be seeing it the same. Now if the movie is all vectors, then yes I would make it so everything scaled.
But your point is definitely valid
Lee
Sam,
I was having a lot of problems doing it with Camtasia also recording in the background. I think I am going to do a written tutorial instead.
YAMADA,
I’m actually using Windows XP Media Center Edition which comes with some “glass-like” themes.
Well no, Lee, that’s precisely my point. As far as I can tell, Opera zooms bitmaps with no discernible degradation. If you want everyone to see it the same, you have to let them SEE it. A graphic at 100×100 pixels is not going to show me any detail on a 1200×1600 screen (that’s my larger monitor). Maybe I should be more precise. My monitors themselves aren’t really that huge, but I need to keep them set at high resolution for photo editing purposes. I can’t be changing that all the time to see some pesky website that won’t comply. If a whole web page occupies just a small part of my browser window, I need to zoom all of it. I wonder what the accessibility guidelines have to say about this.
Hmmm, sounds like Opera is a cool browser if it can scale bitmaps with no quality loss. I’m not a Mac user so I’ve never seen that before, but most people who see your Flash content will not be using Opera.
But you make a valid point because resolutions are getting higher and higher. I’m not sure what a good cross-platform solution would be. Most people are not going to using a 1200×1600 resolution either.
Ok, this comment system kills anything after a less than sign, guess I should have used entities tag to display the character? Here’s the rest of my previous two tries (Lee please delete the others if this is too much):
Opera is not a major player in the Browser market anymore, as much as it pains me to say that. On the Mac Safari and Firefox are kings, while Opera is splitting time with the rest of the 1 percenters. As a Flash programmer I’d rather spend time using the fullscreen technique (although I learned it the old way) and designing a font resize function to allow visitors to resize the only thing worth resizing on a web page: copy.
Lee, Great tutorial, and a wonderful way to avoid applying CSS to tile the image while using the Transparent Window Setting in Flash.
Yeah I’m all for accesibility for Flash websites. But as a designer, I’d rather have my bitmaps look smaller rather than scaling past 100%. And the same thing can be done in CSS but the benefit of doing it in Flash is that you could take it further an manipulate the background and the tilting at runtime.
But like most things in Flash, just because you can do something, doesn’t mean you should
Glad you liked it Sean!
Lee
Your tutorials used to be awesome, but for the past month or so they won’t load to 100%. The will stop at around 17% I would love to watch them but they won’t load. I would like to know is this a problem on my end and do you any ideas on the problem.
Thanks
Jon
Hi Jon,
Several people have had that issue but I’m unclear about how to fix it. Have you tried downloading the tutorials using the download button?
Lee
Thanks for your fast reply. I think I figured out the problem, I downloaded and used TCP optamizer so I restored it to the default and now it seems to work.
Oh and I wasn’t able to download the tutorials using the download button before.
Thanks
Another cool thing you could do is use the Tween Class to get your flash objects to ease to center, instead of simply repositioning. Like in the SuperFad site:
http://www.superfad.com/
Randy, I actually tried that before but it sucks that it won’t tween until you stop dragging. But it definitely is a nice addition.
Lee, first I’d like to thank you for all your tutorials, they’re great and I’m always looking forward to the next one.
I have a question about the Full Browser Flash Tutorial though. As I don’t like to center the registration point for my movie clips, I adjusted the registration point for the cover-mc to the top left corner. I also adjusted the actionscript and changed:
— — —
cover._x = Stage.width / 2;
cover._y = Stage.height / 2;
— — —
into
— — —
cover._x = Stage.width / 2 – cover._width / 2;
cover._y = Stage.height / 2 – cover._height / 2;
— — —
and
— — —
fillBG();
cover._x = Stage.width / 2;
cover._y = Stage.height / 2;
— — —
into
— — —
fillBG();
cover._x = Stage.width / 2 – cover._width / 2;
cover._y = Stage.height / 2 – cover._height / 2;
— — —
Everything works just fine untill I resize the stage, then the whole movie jumps to a different possition. Can you please tell me what I’m doing wrong?
Great tutorial Lee. Used it in my latest project.
I want to use it again for something I’m working on but I’ve been having a problem. Instead of tiling the background, I’m using the beginGradientFill method to create a circular gradient. I put this into the code where you’d normally tell the bitmap to tile, and it works fine filling the screen initially, and when I resize the window very slowly, but once I go to far, it doesn’t center, or if I bring it back in, the gradient distorts. I need to check over the code again but maybe I need an updateAfterEvent menthod in there? Or is something like this just not possible with the gradient fill method? Thanks for the help!
-Kevin
Got it. Had to call the clear() method then redraw the gradient onResize. Thanks for looking though! =)
I was just wondering how you could size other objects to other specifications on the stage.
For instance if I would like to have a footer at the bottom of the page, that would scale horizontally to fit the browser window.
e.g. http://www.soleilnoir.net/
Thank you,
Mike
im from venezuela, thank you very very much for your tutorial, im trying to implement a full browser flash site, but in you tutorial you worked with a bmp object that centers in the broser window, but what about a complete flash movie that always be in center… for example:
http://www.thomasandfriends.com
(it resizes according to the windows thought)
but what im trying to do is tu place a swf file in the center of the broser without affecting the background….
please help me
“Another cool thing you could do is use the Tween Class to get your flash objects to ease to center, instead of simply repositioning. Like in the SuperFad site”
Been trying to get that to work and stumbled upon this blog – Yes, that would be a cool thing, but how?
Any reply would be most welcome – since my designer-brain can’t seem to get the actionscript working for this.
Thanks
I have the same question as Mike (post 20). How can we get MC to go into certian spots in the broswer?
The site http://www.soleilnoir.net/ actul stage is alot larger that my 1280×1024 rez. at one point the cool background stops but the footer at the bottom of the page still scales horizontally to fit the browser window.
Help us out Lee
First, what an excellent tutorial – I’ll definitely be using parts of it in many projects to come. Thanks so much for your time. Do you have a place for donations?
My question: I think it may be similar to Mike an Rusty’s questions. How do you scale (rather than tile) an image to fill the background while leaving the assets unscaled. A great example of what I mean is here:
http://www.anthonynak.com/
Again, thanks.
josh and others,
I think what you’re after can be found in this tutorial:
http://www.tutorio.com/tutorial/liquid-flash-layout
cheers
Thankyou, thankyou thankyou,
Its now 4.00am and after virtually 48 solid hours of trawling through absolute rubbish blogs, and reading script books that sent me down the route of changing action script class settings globaly, when I knew there must be a simple way, I came accross your blog, and this fantastic tute.
both sites top of my favourites list, sleppfni needred niu gooternight
I am interested in your Full Browser Flash Tutorial. I can’t find it on http://www.gotoandlearn.com. Can you please help. Aloha.
would love to get a copy of the source files for this since it’s no longer up. Can you help?
Hey i saw that bitmap data class on ur website before so why isnt it upthere anymore i read u said u had problems but the tutorial was alredy done
anyways u can put it back up on gotoandlearn.com?
thanks
ps ur tutorials are amazing
where is this tutorial??????????????????
fantastic tutorials – thank you!
thanks!
I would love to see the bitmap class tutorial – please could you add it in again?
Yes, where is this tutorial?????????????
yeah where can i get this tutorial??
Please put back thr tutorial.. Thanks!
On your site I found information Ive searched Good site, thanks
wow that is just great, amazing tutorials ma,
this is a really great tutorial, however, the biggest flaw with it is the “click here to activate this panel” box within ie.
what’s the easiest way around that, that will still work within firefox also.
Jason
hello lee
just a quike qeustion i am a beginner and i have had similar issues to the one in your tutorial. I started with a default stage size of 550×400. Now that i am finished when i open the browser document or the flash project file the whole thing is showing in that size.
can i still change this or do i have to start with the appropriate stage size before starting the project.
Hello Lee, thx for tutorial. I have a problem. How made background like yours with dark gradient on the edge browser??
Please help me.
is there a way for the movie to scale down, but not scale up… in order to retain the quality of the images?
I am trying to find out how to load an external SWF of a wide horizontal animation and align it to the right of the stage in this kind of liquid layout. X coordinates don’t work because the animation stars outside the stage.
animation._x = Stage.width – animation._width
Any suggestion on how to align it right ?
alexxxita@yahoo.com
I have found my answer. I code this:
portfolio1._x = Stage.width – (portfolio1._width / 60)
Inside the swf I added a line as a place holder so that the mc would keep the same width since before it was changing width and x and x with a rectangle animation from right to left.
Thank yo all anyway!
i did the tutorial and it doesn’t work until you resize to browser help please
Hi Lee, I appreciate all your tutorials and it’s very useful. I only want to know is how can I make my swf file to fit on to the browser page regardless the resolution. You’ve done one of this tutorial but what I want is the whole sswf file will cover the page. Is there any code for that or javascripting needed for that because all of the good flash website doing this kind of thing. I hope you could answer this question because I’ve looking this method for a very long long time and took me ages for this.
Many thanks,
Hi, great tutorial!
I was wondering if there is anyway to implement the code for ‘cover’ to Movieclips that aren’t made out of bitmaps?
This question might sound dumb! – but makes sense in my head!
Thanks,
Chris.
How can this be done w/actionscript 3?