A Flash Developer Resource Site

Page 1 of 2 12 LastLast
Results 1 to 20 of 23

Thread: What's the right size?

  1. #1
    Formerly "MacMatix" MacPerson's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    388

    What's the right size?

    What is the best size for a website?
    Does 787 X 704 sound right to you?
    Thank you for your help.
    Last edited by MacPerson; 11-26-2003 at 08:27 AM.

  2. #2
    free-webmaster-resource.com deamothul's Avatar
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    1,475
    i guess best is if every body can see it, also the peeps running 800x600. Lately i have used 700 X 400 a few times, and it works out for me , but if im wrong let somebody correct me.

  3. #3
    FK's Geezer Mod Ask The Geezer's Avatar
    Join Date
    Jul 2002
    Location
    Out In The Pasture
    Posts
    20,488
    787 X 704 will force a side scroll bar in a screen set for 800x600. Even on larger resolutions, as you do not really have 800x600 pixels of usable space. That dimension includes the whole screen, and no browser yet comes with no toolbars at the top.

    Running IE 6 with 800x600 resolution gives you about 785x425 of usable space. The width can go to about 795 if you remove the scrollbar.

  4. #4
    Senior Member catbert303's Avatar
    Join Date
    Aug 2001
    Location
    uk
    Posts
    11,222
    hi,

    for those dimensions maybe open the page in a pop window to allow yourself more vertical space (since this window won't have the usual browser controls taking up space at the top)? otherwise a height of 704 pixels is likely to need vertical scrollbars for quite a number of users.

    personally for a full flash site I like using 100% by 100% for the dimensions (to fill the browser window whatever the resolution) you can create some really nice layouts using the Stage object making parts of the movie a fixed size and other parts resize to fill the screen.

  5. #5
    Formerly "MacMatix" MacPerson's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    388
    personally for a full flash site I like using 100% by 100% for the dimensions (to fill the browser window whatever the resolution) you can create some really nice layouts using the Stage object making parts of the movie a fixed size and other parts resize to fill the screen. [/B][/QUOTE]

    That sounds interesting... could you tell me a little more...

    Did you think Tripitaca was a boy or a girl?

    Thank you for the answers.

  6. #6
    Senior Member catbert303's Avatar
    Join Date
    Aug 2001
    Location
    uk
    Posts
    11,222
    Hi,

    sure, when you publish the movie to be 100% by 100% usually flash will just make everything grow to fill the available space (this can look pretty nasty) however in MX they added the stage object which allows much better control over how things are resized (if they are at all)

    i've attached an example file that has a few uses of the stage object

    1) a background image that keeps itself centred when the player is resized

    2) a movie clip that follows the mouse vertically that remains the same width as the movie

    3) a movie clip with some text in that is a fixed size and remains horizontally centred in the movie

    hope this helps

    you can also see nice example of using the stage object at

    http://www.jiverecords.com/


    btw tripitaka was the boy priest, but he was played by a girl
    Attached Files Attached Files

  7. #7
    Formerly "MacMatix" MacPerson's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    388
    Originally posted by catbert303
    hi,

    open the page in a pop window

    This solution probably will suit me best...Thanks for the help.

  8. #8
    Senior Member
    Join Date
    Aug 2003
    Location
    UK
    Posts
    380
    catbert your stage object examples look great! Please could you explain how they are done.

    TIA

  9. #9
    Senior Member catbert303's Avatar
    Join Date
    Aug 2001
    Location
    uk
    Posts
    11,222
    Hi,

    There is one thing I forgot to do in the file I attached, when using the movie in the browser the html publish settings should be set to dimensions: percent and 100% by 100% (I left this as match movie)

    in the movie the line

    Stage.scaleMode = "noScale";

    tells flash that even though the movie has been set to play with its dimensions as a percentage it should not attempt to resize any of the content to fill the space it has available.

    the line

    Stage.align = "LT";

    means that the content will be positioned in the top left hand corner of this available space. the stage object also provides some properties width and height that tell us how much space we have available to fill.

    whenever the movie is resized the stage object broadcasts an onResize event that other clips and objects can listen for and respond to accordingly.

    broadcasters and listeners could be considered to be a little like a class and teacher, the teacher gives out instructions (tells the class what is happening) and the students in the class (the ones who are paying attention) are like the listener objects responding to the teachers instructions


    senocular has written an excellent (and entertaining) article on listeners available at http://www.umbc.edu/interactive/flas...=ASBroadcaster if you want to learn more about them


    hence when the Stage object (teacher) says the movie has changed size the movie clips that have been added as listeners to the stage object (the bright attentive students who turned up on time and didn't sit there for 2 hours texting their friends) understand the movie has changed size and can react to this event.

    this is setup something like this,

    code:

    brightStudent.onResize = function() {
    // code for what myClip should do when the movie resized
    };
    Stage.addListener(brightStudent);



    this makes a movie clip brightStudent listen to the stage object for onResize events, when one happens the clip will call its onResize method. inside this method we can get the new dimensions of the movie using Stage.width and Stage.height, so if brightStudent needed to fill the entire screen each time the stage resized it could be set to match the dimensions of the stage, like this,

    code:

    brightStudent.onResize = function() {
    // get the clip to fill all the available space
    this._width = Stage.width;
    this._height = Stage.height;
    };
    Stage.addListener(brightStudent);



    You can get different objects to do different things when the stage resizes moving them around the stage, resizing them (as in the short example above) or doing both. for another example you might want to have some kind of footer text on the page that remains fixed in the bottom corner of the movie, the footer clip can use the stage object to find out where the bottom corner is and reposition itself,

    code:

    // this assumes the footer clip has its registration point set in the top left hand corner
    footer.onResize = function() {
    this._x = Stage.width - this._width - 5;
    this._y = Stage.height - this._height - 5;
    };
    Stage.addListener(footer);



    the -5 parts just add a little space between the clip and the edge of the movie.

    hope this helps

  10. #10
    Senior Member
    Join Date
    Aug 2003
    Location
    UK
    Posts
    380
    Thanks very much Catbert

  11. #11
    Formerly "MacMatix" MacPerson's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    388
    Originally posted by catbert303
    hi,

    for those dimensions maybe open the page in a pop window to allow yourself more vertical space (since this window won't have the usual browser controls taking up space at the top)
    When you say POP WINDOW... is that the same as in pop ads? Does it mean it would be blocked by certain browsers?

  12. #12
    Senior Member catbert303's Avatar
    Join Date
    Aug 2001
    Location
    uk
    Posts
    11,222
    it depends, most popup blockers will only block unrequested windows (those that are automatically opened when the page is visited) and allow windows that are opened with user interaction (clicking somthing)

  13. #13
    catbert303 Thanks for the info

    good help here..
    now on that lego fla you sent
    when i'm veiwing it cntrl-enter

    and i move my mouse up and down a bar seems to follow it

    is this somehting added extra or does this relate to the 100% x 100%

    ??

    Kind of got lost there

  14. #14
    Senior Member catbert303's Avatar
    Join Date
    Aug 2001
    Location
    uk
    Posts
    11,222
    thats just something I added to make it look a little more interesting

    the stuff that handles getting the bar and the text to follow the mouse vertically, is this bit,

    code:

    bar.onEnterFrame = function() {
    this._y += (_root._ymouse - this._y) / 5;
    this._parent.content._y = this._y;
    };



    this tells the bar clip to find the y position of the mouse and every frame move 1/5 of the way towards the mouses position.

    the

    this._parent.content._y = this._y;

    line

    keeps the text contained in the content movie clip (in the same timeline as the bar clip) to keep its y position the same as that of the bar clip.

    note in that file I forgot to set up the html publish settings, so before you view it in a browser you would need to go to

    file > publish settings > html tab

    and then choose dimensions percent (100% by 100%) before publishing the html

  15. #15
    catbert

    so if I did that bar but thinner with an vertical bar it would be like a large cross hair?

  16. #16
    Senior Member catbert303's Avatar
    Join Date
    Aug 2001
    Location
    uk
    Posts
    11,222
    yeah thats about right, you could create the horizontal bar (instance name bar1) and the vertical bar (instance name bar2) and then in the frame that contains them use

    code:

    Stage.scaleMode = "noScale";
    Stage.align = "LT";

    // get the bar1 clip (horizontal) to always move towards the mouses y position
    bar1.onEnterFrame = function() {
    this._y += (_root._ymouse - this._y) / 5;
    };
    // get the bar2 clip (vertical) to always move towards the mouses x position
    bar2.onEnterFrame = function() {
    this._x += (_root._xmouse - this._x) / 5;
    };
    bar1.onResize = function() {
    this._width = Stage.width;
    };
    bar2.onResize = function() {
    this._height = Stage.height;
    };
    Stage.addListener(bar1);
    Stage.addListener(bar2);

    bar1.onResize();
    bar2.onResize();



    to change how quickly the bars move towards the mouse pointer change the value 5 used in the onEnterFrame events (a smaller number, eg 2 would make the lines move towards the mouse faster)

  17. #17
    Senior Member ceglia's Avatar
    Join Date
    Jan 2003
    Location
    Los Angeles
    Posts
    262
    hey catbert,

    i'm trying to implement some of the stage resizing techniques you mentioned, and i thought i had done everything right, but for some reason, my menu bar doesn't center itself when the page is first loaded on a Mac (IE or Safari).

    it works fine on a PC.

    it also works on a Mac if i resize the window AFTER the page has already loaded.

    do you have any idea why this might be happening?

    here's a link to the site (work in progress).

    link

    and here's my code:
    PHP Code:
    //prepare stage for resizing.
    Stage.scaleMode "noScale";
    Stage.align "TL";

    //define what occurs on resize.
    resizeListener = new Object();
    resizeListener.onResize = function() {
        
    menuBarMC._x 0;
        
    menuMC._x Stage.width/2;
        
    musicMC._x 22;
        
    menuBarMC._width Stage.width;
    };

    //initialize resize.
    Stage.addListener(resizeListener);
    resizeListener.onResize(); 
    menuBarMC is the actual bar, whereas menuMC is the MC containing the menus themselves. that's the object i want centered. it's registered correctly, so i'm not sure why it's off-center initially on a mac. could it have something to do with the frame rate (50fps) or the fact that there are some many alpha tweens??

    thanks!

  18. #18
    Senior Member catbert303's Avatar
    Join Date
    Aug 2001
    Location
    uk
    Posts
    11,222
    Hi,

    I don't have a mac to test any of this on, but it's possible you need to wait slightly before calling the onResize event,

    code:

    Stage.addListener(resizeListener);
    var delayResize = setInterval(doResize, 2000); // trigger the onResize event in 2 seconds time

    function doResize() {
    resizeListener.onResize();
    clearInterval(delayResize);
    }


  19. #19
    Senior Member ceglia's Avatar
    Join Date
    Jan 2003
    Location
    Los Angeles
    Posts
    262
    hey catbert,

    thanks for the speedy reply. i hate to admit this, but the problem was that i was testing it on a mac without the flash player 6 plugin installed. DOH!!

    it was my old G3 powerbook that i never use except for testing, and i assumed it had a copy of the latest plug-in installed. not sure what version was installed, must have been something below 6, probably 5.... in any case, when i downloaded and installed 7, everything was working perfectly.

    sorry for the trouble.

  20. #20
    Senior Member catbert303's Avatar
    Join Date
    Aug 2001
    Location
    uk
    Posts
    11,222
    no problem

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