A Flash Developer Resource Site

Results 1 to 16 of 16

Thread: [RESOLVED] Showing content on 100% browser window. Can I do this without using GAIA?

  1. #1
    Senior Member
    Join Date
    Nov 2004
    Posts
    100

    resolved [RESOLVED] Showing content on 100% browser window. Can I do this without using GAIA?

    I am building a portfolio site, and I want my content to occupy all the browser window.

    Like this site:
    http://********theglass.com/
    http://www.voltaenergydrink.com/

    I know GAIA have the ability to do this but I don't know how to use it, and the more I look to it, the more I think it will be overkill to use on my project.

    I want my background to occupy 100% of the browser window and have the content to be centered.

    Is there a much simpler way to do that without having to do it in a framework?

    Thanks


    EDIT: what the, why my link is censored? Google: Get the glass website.
    Last edited by Jonzy; 05-11-2009 at 12:00 AM.
    HELP!

  2. #2
    Junior Member
    Join Date
    Apr 2009
    Location
    UK
    Posts
    10
    You could just use CSS? That's what i do when i need a full browser website.

    There's a tutorial here on how to do it:
    http://newsourcemedia.com/blog/flash...-html-and-css/

    But there are other ways to.

  3. #3
    Senior Member
    Join Date
    Nov 2004
    Posts
    100
    Thanks, will give it a go.

    That's too bad their example doesn't work, I can't see if there's potential problems with this method. Do you have any?
    HELP!

  4. #4
    Senior Member
    Join Date
    Nov 2004
    Posts
    100
    meh sorry double post
    Last edited by Jonzy; 05-12-2009 at 10:34 AM.
    HELP!

  5. #5
    Senior Member
    Join Date
    Apr 2000
    Location
    Minneapolis
    Posts
    2,127
    If you use the publish settings in flash.
    on the HTML tab set dimensions to percent, width and height to 100.
    Then set scale to "no scale"
    flash alignment to center, center.

    The movie will fill the browser window, but the content will sit in the center not scaling.

    you may have to also set margins to zero in the html page.

    If you want to have even more control, like being able to pin the preloader bar to the edge of the window outside the main content I highly recommend getting the awesome tweening classes from http://blog.greensock.com/
    You don't need the classes for this but they are incredibly useful. If you subscribe for a year (about $150 I think) you get some bonus classes, one of which allows you to position things wherever you want in the window.
    These classes are highly regarded by the flash community. I use them all the time. tweening with code is incredibly easy and useful with them, they are a great investment. And no I do not have any involvement in Greensock beyond being a fan.

    I have a test page for a site I am working on that uses this method here,
    http://www.gasolicious.com/orangeupl...struction.html
    loader is pinned to the bottom, "firefly" animation fills the whole window but main movie is centered.

    Mark

  6. #6
    Senior Member
    Join Date
    Apr 2000
    Location
    Minneapolis
    Posts
    2,127
    oops I double posted

    Mark
    Last edited by mgason; 05-12-2009 at 10:54 AM.

  7. #7
    Senior Member
    Join Date
    Nov 2004
    Posts
    100
    Thanks Mark!

    I think your method worked best for me!

    The first one from oPUPo was a tad too complex as it was requiring me to code every pieces of graphics in order to make stretchable and centered, and it was giving me too much errors that I couldn't understand, but I understood the principle of it. I need another tutorial of oPUPo method that is more detailed and error free.
    HELP!

  8. #8
    Senior Member
    Join Date
    Nov 2004
    Posts
    100
    Sorry to bump this thread again,

    But I ran into a weird bug with the last method.

    In Firefox local preview, when I look to the browser window, there's no scroll bars, but when I put the flash and the HTML online, I get scrollbars on my initial window size. How I can get around this?




    Also, when I test in Explorer, in the HTML source, it ignore my CSS code of minimal width, so when I reduce the size of the window below the minimum size, the content doesn't freeze on place. In Firefox, everythings fine, the content freeze on place.






    My live site is there: http://jonz.grafigne.com




    Edit: weird, I can't reproduce my first problem with the scroll bar (don't mind about the vertical one). I redited some publishing stuffs and it now gone, I don't know what I did. However, a minimum width is set once the page is loaded even if I specify it by CSS with a minimum width. So if my window is more than the min-width specified in the css, if I reduce the window the bar will appear even if it beyond the min-width.
    Last edited by Jonzy; 05-18-2009 at 10:01 PM.
    HELP!

  9. #9
    Senior Member
    Join Date
    Apr 2000
    Location
    Minneapolis
    Posts
    2,127
    Hi,
    sorry I am not much good with CSS and HTML anymore.
    I suggest you post over in the forum for those for a quicker answer, some real experts there.
    http://board.flashkit.com/board/forumdisplay.php?f=103

    I tested on a mac with Firefox 3.0.10, no scroll bars no problems
    I tested on a mac with Safari 3.2.3, also no problem.

    I do not have Explorer, is the problem just when testing?
    sorry I can not be more help.

    Your site is looking awesome, not just good, I went wow! when it came up and I don't do that much anymore
    let me know when it is done, I would like to keep a link to you in case I need any illustration in your style. Where are you based?

    Mark
    Last edited by mgason; 05-19-2009 at 10:03 AM.

  10. #10
    Senior Member
    Join Date
    Nov 2004
    Posts
    100
    Quote Originally Posted by mgason View Post
    Hi,
    sorry I am not much good with CSS and HTML anymore.
    I suggest you post over in the forum for those for a quicker answer, some real experts there.
    http://board.flashkit.com/board/forumdisplay.php?f=103

    I tested on a mac with Firefox 3.0.10, no scroll bars no problems
    I tested on a mac with Safari 3.2.3, also no problem.

    I do not have Explorer, is the problem just when testing?
    sorry I can not be more help.

    Your site is looking awesome, not just good, I went wow! when it came up and I don't do that much anymore
    let me know when it is done, I would like to keep a link to you in case I need any illustration in your style. Where are you based?

    Mark

    Alright, will do. It's doing that when I test on the server, but not when I test it locally. I don't know why it don't do it on your end, I tested with serveral Windows machine and it still have the same behavior, but never when I test the fla on my hard disk.

    The IE bug, it doing it on both locally and on server (it ignore my minimal width and the site structure disappear when I reduce my window.

    Glad you like my site mockup I never had the chance of completing a working Flash site portfolio, so I thought to at least put a work in progress online. I'm based at Montreal, Canada, Consultant for a Coin-up company.
    HELP!

  11. #11
    Senior Member
    Join Date
    Apr 2000
    Location
    Minneapolis
    Posts
    2,127
    I am Australian but live in Minneapolis.
    I was looking at your site again, just how did you set it up? Did you use the Greensock stuff?
    Mark

  12. #12
    Senior Member
    Join Date
    Nov 2004
    Posts
    100
    Quote Originally Posted by mgason View Post
    I am Australian but live in Minneapolis.
    I was looking at your site again, just how did you set it up? Did you use the Greensock stuff?
    Mark

    No, I just used normal tweens, I'm not too pond using third parties applications when I do some basic stuffs.
    HELP!

  13. #13
    Senior Member
    Join Date
    Apr 2000
    Location
    Minneapolis
    Posts
    2,127
    Can you explain the way the page is set up.
    If the movie is 100% and no scale like I suggested how does the background and + animation stretch to fit any size window (I stretched it across 2 24" monitors) while
    the character and circle anim do not stretch, and the whole thing clearly has a minimum size.
    Do tell!
    Mark

  14. #14
    Senior Member
    Join Date
    Nov 2004
    Posts
    100
    Quote Originally Posted by mgason View Post
    Can you explain the way the page is set up.
    If the movie is 100% and no scale like I suggested how does the background and + animation stretch to fit any size window (I stretched it across 2 24" monitors) while
    the character and circle anim do not stretch, and the whole thing clearly has a minimum size.
    Do tell!
    Mark

    I simply repeated some elements to fill like 4 screens, made it in a loop and bleed everything outside of the document bounds. The background is simply a gradient stretched to an enormous width. I could have done it in AS thought.
    Last edited by Jonzy; 05-20-2009 at 12:42 PM.
    HELP!

  15. #15
    Senior Member
    Join Date
    Nov 2004
    Posts
    100
    Oh I think I have solved the scoll bar bug. It was revealed to me that my AdBlock was doing it. I disabled it and now it acting properly. AdBlock looks to only engage online and not locally. When it online, it show on the lower-right corner a safety label to disable the Flash object, make sense... Hence why it was doing ok locally and acting weird online.

    For the IE bug, I think I have successfully made a small javascript code, with the help of some researches on Google, that allow the content to show correctly centered below and beyond minimal sized window.


    I think this is it

    Thanks for the help everyone, and Mark
    Last edited by Jonzy; 05-21-2009 at 07:36 AM.
    HELP!

  16. #16
    Senior Member
    Join Date
    Apr 2000
    Location
    Minneapolis
    Posts
    2,127
    Glad you got it all working.
    Would you be willing to share the html, CSS etc that sets the page up?
    You could stick any space filler movie in it.

    I know you mentioned you don't like 3rd party apps but I will take one more shot at recommending the Greensock tweening classes.
    You don't need to subscribe to use them thats just to get some cool extra stuff.

    Tweenlite is free and does most things you could ever want.
    It is solid, been around for a while, constantly improved, in fact a huge new update just released.
    I know I sound like a commercial! But I honestly use it every day and in every project.
    Its worth a visit to the site and playing with it for free.
    check out this site I just started working on, tweenlite takes care of the smooth movement of the video, the mask and the controller when the video changes size. tweenlite also handles all the alpha fades.
    http://www.stinkless.com/orange2/she...struction.html

    mark
    PHP Code:
                    TweenLite.to(videomask_mc.5, {height:384});
            
    TweenLite.to(video.5, {y:-175});
            
    TweenLite.to(controller_mc.5, {y:masky 384}); 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center