-
Formerly "MacMatix"
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.
-
free-webmaster-resource.com
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.
-
FK's Geezer Mod
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.
-
Senior Member
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.
-
Formerly "MacMatix"
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.
-
Senior Member
-
Formerly "MacMatix"
Originally posted by catbert303
hi,
open the page in a pop window
This solution probably will suit me best...Thanks for the help.
-
catbert your stage object examples look great! Please could you explain how they are done.
TIA
-
Senior Member
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
-
Thanks very much Catbert
-
Formerly "MacMatix"
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?
-
Senior Member
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)
-
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
-
Senior Member
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
-
catbert
so if I did that bar but thinner with an vertical bar it would be like a large cross hair?
-
Senior Member
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)
-
Senior Member
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!
-
Senior Member
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);
}
-
Senior Member
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.
-
Senior Member
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
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|