| Register
Sunday, May 11, 2008   
You are here :     Article

Mastering Full Browser Flash (Part 1)

Created By  Benjamin Mace, at  3/22/2005 - 32 comments.

Benjamin is seasoned Flash designer & developer. He has done work for AOL, EASports & Firstborn Multimedia.

Click to view this author's website.

What is Full Browser Flash? It's not an official term or anything... it's just a term I created to describe using Flash to encompass 100% of the browser window and it's currently a big trend in Flash site design. Full Browser Flash (we'll call it FBF) is different from Full Screen or chromeless sites. With Full Screen sites, developers launch a browser window that takes over the user's entire screen, void of normal browser chrome (outer window elements) and browser controls. Full Browser Flash on the other hand, maximizes the Flash SWF embedded within the HTML to scale to 100% of the window, regardless of the browser's current dimensions.

Recently there has been a large flux of FBF in the Flash design community. You can see a few examples below:

http://www.sorenhald.com *
http://www.douglasfisher.co.uk *
http://www.matthewmahon.com *
http://www.georgeharrison.com *

It's not really a new technique whatsoever, but it is a recent trend in my opinion. So what is it all about and what's the big draw? There are many advantages to using FBF. First off, the technique, in combination with newer stage properties in ActionScript, allows you to have the largest possible amount of real estate in a given browser window. It offers you the designer/developer to present a layout that isn't entirely restricted to the user's monitor settings. Designing in HTML often sets restrictions of movie size based on the client's target demographic, resulting in stamp sized sites in a canned rectangle around 750 pixels wide. FBF is a great advantage for something like OS style GUI applications etc. Real estate isn't the only benefit though.

Another draw by designers to FBF is the seamless integration of background and foreground elements. Take a site with an embedded SWF size of 700x500 that you would like centered in the user's browser. Designers are limited to a handful of techniques to present the site without framing or boxing in the content. Using identical background colors in the SWF and the HTML is the easiest method. Sites like Steven Giesler's portfolio (http://www.stevengiesler.com *) use this technique as we can see by the black on black match. You can tell by right clicking around the content and on the content where the HTML/Flash resides.

Other techniques to eliminate a framed in look of the HTML include using background patterns or surrounding graphics to integrate the background of the HTML as with Agencynet (http://www.agencynet.com *) and Alberto Cerriteno's portfolio (http://www.albertocerriteno.com *).

Designers will often decide to use pop up windows that are the same dimensions as the SWF such as Robots (http://www.robotsmovie.com/index.php). These pop ups usually will fit the target audience's machine and allow an end to end fill of the SWF movie at the same size. This creates a focus of the movie without the trouble of having to polish surrounding unused space. Many browsers and ISPs provide pop up blockers which may cause frustration on the user's part though.

By enabling the FBF method we eliminate as many unwanted layout factors as possible on the web today and we can make a more engaging experience for our audience with minimal frustration. In the next several articles I'm going to discuss how you can employ this technique and the many different methods you can exploit the new stage real estate.

Upcoming Articles:

- HTML Settings & Eliminating Scaling
- Laying Out Content With Listeners
- Creating Background Tiles


*Please note that this article was written 3/2005 and site designs change frequently. Referenced URLs may not demonstrate the fore mentioned technique as time passes.

Need Professional Help For Your ActionScript Project?
ActionScript.com Consulting Services provide top quality professional ActionScript consulting to businesses around the globe. If you have a professional project in need to world-class talent, tell us about your project by requesting a quote today.

Reader Comments

  1. Adam Boozer  Replied:
    ( 3/22/2005 At 9:41 PM)

    Cool post...Just my two cents on the concept
    A post I made a while back...
    http://www.untitled07.com/2004/06/defining-canvas.php

  2. b  Replied:
    ( 3/23/2005 At 12:07 AM)

    Nice article.

  3. alan  Replied:
    ( 3/23/2005 At 12:52 PM)

    certain developers have been doing this for (almost) years, or at least since the Stage object has been accesible. credit is certainly due to this guy in particular:
    http://www.yugop.com/
    and some of his FBF projects over the years:
    http://www.intentionallies.co.jp/content_full.html
    https://www.ecotonoha.com/ecotonoha.html
    and more recent:
    http://amaztype.tha.jp/US/Books/Title?q=flash
    http://www.nagaoka-id.ac.jp/gallery/gallery.html
    btw, this 'add a comment' functionality is extrememly annoying; when one accidently leaves our the security checker, and then hits 'back' on the error page, one's entire post is lost. grrr.

  4. alan  Replied:
    ( 3/23/2005 At 9:07 PM)

    man i need a spell-checker.. also, more FBF work over at sofake.com ..

  5. pete  Replied:
    ( 3/24/2005 At 2:50 PM)

    personaly I think this kinds of technique is plain WRONG. it loooks utter SH** on dual screen monitors.
    It's not a technique that engages or imporoves the wbe experience, in my opiion i find them detremental to the whole thing, and a HUGE contributing factor to the whole flash is bad drivle.

  6. alan  Replied:
    ( 3/24/2005 At 3:56 PM)

    how the heck are your dual monitors set up?!? don't tell me you've got your browser to span both monitors, cause then your comment is hardly valid...

  7. shax  Replied:
    ( 3/28/2005 At 11:18 AM)

    What does it matter if you use dual screens? I've got a dual setup (a real jewel in flash and photoshop!), but the browser obviously doesn't span over both screens.. If your browser spans over both screens, do "normal" sites (especially centered ones) look any better? ..

  8. frankh  Replied:
    ( 3/28/2005 At 3:07 PM)

    two more examples:
    http://www.palaciodeferiasycongresosdemalaga.com/
    http://www.gen8020.com

  9. Claus Wahlers  Replied:
    ( 3/28/2005 At 3:59 PM)

    complementing you might also check out my SEFFS method at http://wahlers.com.br/claus/blog/?page_id=18

  10. Franz Pennelli  Replied:
    ( 3/28/2005 At 7:38 PM)

    This is a good example of handling the resizing of a browser window in this type of environment:
    http://college.newsify.com/

  11. Kelvin  Replied:
    ( 3/29/2005 At 9:16 AM)

    Demo
    http://www.ecnnct.com/a2design/a2designDemo.html

  12. Oindypoind  Replied:
    ( 4/5/2005 At 1:13 PM)

    Just another couple of examples that i've made:
    http://www.travelling-tom.co.uk
    http://www.streetfunk.co.uk

  13. shirley  Replied:
    ( 4/13/2005 At 2:12 PM)

    so apparently I am a follower of the same trend!
    but with variations.
    in my case my page
    http://www.albertosughi.com/default_april_2005.html
    not only it opens itself throughout the entire browser but also it resises to its minimum size...
    Interesting stuff anyway!

  14. Josh  Replied:
    ( 4/23/2005 At 3:04 PM)

    At Component Headquarters (chq.emehmedovic.com), take a look at Align Components, and others (e.g. Tile Component). I use them all the time. Also, you migh want to take a look at the HTML/CSS code of the Component Headquarters site.

  15. Tolga Görgün  Replied:
    ( 4/26/2005 At 9:12 PM)

    www.turtleshell.com/2000
    this guy is also the creator of
    www.noscope.com
    FBF in your words is not trendy or new to many flash developers at all..this example i first saw over the net used by Asmussen gets us back to year 1998 or spmething(whee i was a kiddo then)
    i lllooovve to see more 'FBF' samples (i also use it as an approach of an attractive and artistic way of design in flash) however, it is not 'yet' necessary for any company or any client to make such sites :)

  16. flash menu 79  Replied:
    ( 4/29/2005 At 1:28 PM)

    I am not a big fan of full browser or full screen Flash sites but I have to admit that the examples given here are very good. The Matthew Mahon website is one of the strangest Flash sites I've seen so far but I like it very much.

  17. Zach  Replied:
    ( 5/2/2005 At 11:29 PM)

    I am curiuos on the size of the swf and the usability for dial-up users. Will this be a large impediment? I'm sure there are design choices one can make to section off the downloading until the user gets to a particular point. I am a newbie into the field which is why I ask.
    -Zach

  18. Mike  Replied:
    ( 5/7/2005 At 1:10 AM)

    Ive been struggling to find the glitch in the intro I made with this technique, my flash objects only go full screen after refreshing the browser window.
    http://users.pandora.be/mikejames/intro.html
    here's the FLA: http://users.pandora.be/mikejames/intro.fla
    Any help is much appreciated

  19. The Dude  Replied:
    ( 5/25/2005 At 6:33 AM)

    your resize function is not being called when the movie loads, it only gets called when the browser gets resized.
    Call your resize function manually after preloading required parts of your swf.
    -----------
    It annoys me that more people don't use the browser back and forward buttons in there full page flash web sites. Especially now that the localconnection object makes it very doable in any browser.
    Also the Copy/Paste functionality is not very user friendly.
    Very difficult to get page ranked in Search Engines.
    ---
    just some drawbacks but for the most part I'm a fan and think the best is yet to be seen.

  20. Akash Takyar  Replied:
    ( 5/28/2005 At 5:09 PM)

    I m too a fan of FBF. Can anyone tell me a best tutorial for FBF.
    This article is too good.

  21. dev  Replied:
    ( 6/29/2005 At 8:23 PM)

    I agree with akash. This article is good, but can someone please direct me to the best tutorial on how to actually implement Full Browser Flash?

  22. thibaud  Replied:
    ( 7/8/2005 At 11:35 PM)

    had to contribute with some more FBF examples:
    http://www.marumushi.com/apps/newsmap/newsmap.cfm
    http://www.revolvercreative.com/flash.html
    and my own portfolio flash system build using FBF:
    http://www.youki.be/demo.cfm

  23. rambabu  Replied:
    ( 7/9/2005 At 12:52 PM)

    FBF . I'm a Flash lover.The article is good.Is there a way to learn about this new web craze?can you help me?

  24. Cam  Replied:
    ( 7/14/2005 At 2:31 AM)

    the article talks about traditional swfs having limited methods of integrating with background images. frames and color matches are two examples given. the article doesn't mention the wmode property thatt allows you to set the background of your swf to transparent, and let an html background image show through.
    for anyone that's interested, it looks like this:
    <object ...>

    <embed ... wmode='transparent' ... >
    <object>

  25. DemoJuan  Replied:
    ( 7/22/2005 At 8:53 PM)

    Im creating a "Full Browser Flash" site, and I would like to have a seemless background in one of the site scenes. Does anybody know how?

  26. joel michael  Replied:
    ( 7/23/2005 At 8:04 AM)

    hi benjamin!
    im not really a big fan of full browser site but i really admired your work dude. i'm a webpage designer but when it comes to actionscripting in flash i would say that i am too young develop some highly dynamic website. currently, i am developing our company's webpage and i need some help regarding the flash actionscipt to call my search button to display the requested keywords, i have at least 50 keywords to search in with my entire webpage. i would really be thankful if you could provide me some scripts related to my needs.
    thanks: miguel

  27. MarkoPfann  Replied:
    ( 8/9/2005 At 12:26 PM)

    i like the idea of fbf, but the problem is, that the scrollbars disapear. so if you use a to small resolution on your desktop, you have no change to see scroll the page, which is a HUGE disadvantage, and maybe someone has a soltion therefore, i would be happy cheers marko

  28. Brian Henry  Replied:
    ( 8/22/2005 At 4:17 AM)

    Great stuff. It has been years since I have seen anything inspiring come out of flash.

  29. craig kincaid  Replied:
    ( 9/23/2005 At 8:23 PM)

    Hi
    I have a prob with a fbf site I am building, when you drag the bottom right corner over as far right as you can go, then move up and down the edge of the screen, the resize doesnt get called.
    Any ideas
    have a try at www.setvariable.com/elastic
    any help much appreciated.

  30. craig kincaid  Replied:
    ( 9/23/2005 At 9:20 PM)

    is cool, I sorted it, turned out I had to set all the height and width measurements outside the listner

  31. mpho  Replied:
    ( 12/5/2005 At 1:37 PM)

    Hi, I would like to know how do you design a fbf so that it doesn't take long to load. I am new at this so I would appreciate it if anyone can help me. Thanks

  32. junior time  Replied:
    ( 8/20/2007 At 6:32 AM)

    Just new to flash and woul like to be able to improve my street dance classes website
    http://www.streetdanceuk.com
    and
    http://wwwhiphopdanceuk.co.uk

Login to post your comments. If you do not have an account with us please Register.
Copyright 2005 by ActionScript, Inc.   |  Privacy Statement  |  Terms Of Use  |  ActionScript Client Extranet