Printable View
I need to create a flash webpage that gathers information from the bowser and sends it to the swf to adjust the size of the movie accordingly and also adjusts the elements in the flash movie accordingly. any links to helpful articles or tutorials would be much appreiated.
I attached a file of a sketch of what im basically talking about.
hi...
what you want to look into or read up about is
fullscreen
allowscale
Stage.onResize
Stage.align
what this will let you do is, have the '.swf' be fullscreen, so matter the size of the browser, it will expand to fit the screen.
you can then not allow any scaling of the stage.. meaning how you design in it the authoring environment is how it will appear.
With the stage.onResize and Stage.align you can register movieClips to position themselves relatively and update wheneveer the stage is 'resized'. (make sense?)
here is some example code:
(and if my host is not acting up here is an example .fla)Code://start Stage re-size code
Stage.align = "TL";
Stage.scaleMode = "noScale";
// ---> Create a new listener object
var stageListener:Object = new Object();
// ---> Define the resize function...
stageListener.onResize = function() {
// ---> first, get the new dimensions of the stage....
var stageWidth:Number = Math.round(Stage.width);
var stageHeight:Number = Math.round(Stage.height);
trace("Stage size is now " + Stage.width + " by " + Stage.height);
// ---> now, set the footer BG w & h to the stage dimensions...
footerBG_mc._width = stageWidth;
//footerBG_mc._height = stageHeight;
footerBG_mc._x = 2;
footerBG_mc._y = stageHeight-25;
// ---> now, set the footer links to the stage dimensions...
footerLinks_mc._x = (stageWidth/2) - (footerLinks_mc._width/2) ;
footerLinks_mc._y = stageHeight-18;
// ---> now, set the background clip alignment to match stage...
wallPaper_mc._x = (stageWidth/2) - (wallPaper_mc._width/2);
//wallPaper_mc._y = stageHeight/2;
// ---> now, size the outLine_mc to the stage dimensions...
outLine_mc._height = stageHeight-2;
//outLine_mc._width = stageWidth;
outLine_mc._x = (stageWidth/2) - (outLine_mc._width/2);
//outLine_mc._y = (stageHeight/2) - (wallPaper_mc._height/2);
};
// ---> Apply the listener...
Stage.addListener(stageListener);
// ---> Run the function...
stageListener.onResize();
http://dmstudios.net/demos/fullScree...e_newMouse.zip
just ignore the custom mouse chunk of code in there..or delete it all together.
thanks that helps.
hey whispers, i found my way to your tutorial help here. and it's exactly what i'm looking for but with one seemingly slight difference, a difference that has me totally stumped. i got to the point where your fla is but the one difference i need is that your blue background image would be 100% all the time on browser resize, without resizing the bottom bar and it's parts. it's for a friends photo site and he doesn't want any of his photos cut off even on small screens. i have the bottom nav done but thats it. not sure if it's an _xscale thing or what. i'm lost but if you could help out with this i would be extremely grateful. thanks in advance.
cheers
jason
hi jason...
umm... huh? LOL I have no clue what you just said or are looking to do? :)
what is this part:
can you maybe post in bulleted points or something? and not a run-on-sentence ;)Quote:
but the one difference i need is that your blue background image would be 100% all the time on browser resize, without resizing the bottom bar and it's parts.
I can try to help you figure out each step then.
good luck.
hey whispers, i apologize for the lack of proper explaination. i will try it again. i downloaded the fla you provided for johnsontb
http://dmstudios.net/demos/fullScre...ze_newMouse.zip
i have already created something similar. By that i mean i have a navigation bar that sticks to the bottom of the browser. i am loading the content into the center of the browser window. i am calling an swf into an empty movie clip. i would like for that movie clip(ie the image) to scale 100% to the browser window, without resizing my navigation bar. i still feel like i am falling short of a solid explaination here. being fairly new to AS i apologize for that. here is a link to what i have thus far.
www.symmetrixdesign.com/test
so i thought i was done but my friend had a change of plan and wanted his image to scale to the browser size. meaning he doesn't want any of the image cut off. he wants 100% of the image shown at all times. so as it stands right now when you shrink your browser window to a smaller size it chops off the top and bottom of the image.
and therein lies my problem. thanks for your quick reply.
jason
hmm.. Im not clear on the explainantion really..
but I think I have the 'gist' of it..
Im thinking it will have somethign to do with the allowScale part..but changing that.. Im not sure how it will affect the rest of your site.. hopefully when I get to work.. I'll have some time.. and I can give it a run through.. :)
hey thanks, if you get time to check it out that would be great.
here is a link of just the image and how i would like it to respond to browser resize, hopefully it will provide a little more insight to what i am trying to do. maybe :-)
www.symmetrixdesign.com/image
i just used the basic:
Stage.align = "MD";
Stage.scaleMode = "Scale";
but when it it gets called into my main movie it seems to conflict with my other code. anyway hope this helps a little.
also, just wondering if you might have any suggestions as far as where to start the learning process. i know need to start from the beginning as far as educating myself in the art of AS, but with the release of AS3 should i start with learning AS or AS2? also any good books you might recommend for the designer trying to turn coder. thanks so much
jason
hard for me to test..without re-creating the whole thing.
your going to have to target the clip the image is loaded into.. and not the stage..as that is already set to control how the rest of the movie (whole project) re-acts.
some sort of check.. added to the stage listener I suppose..
that check to see if the stage is 'less' than a certain size..and if so.. start re-sizing/scaling the containerClip..
or on the stage re-resize listener.. just add that the container always stay XX% percent form the stage height/width....borders..
what is the listener code you have for the stage? (onReSize)
and what is the container Name that gets the imags loaded into it?
hey whispers, i kinda see what your saying but my ability to fully comprehend and implement is sorely lacking so i think i will show you my code especially since your already familiar with my clarity of explaination :rolleyes:
www.symmetrixdesign.com/summit_v10.zip
thanks
jason
Slightly different question, hope this is an appropriate place to post it: Is it possible to assign the height dimension of a swf dynamically based on the size of its content? (In other words, make a Flash movie act like regular HTML)
Say I'm creating animated bar graphs for a bunch of measures, one below another. All the measure data comes from a database. Can't know in advance how many bar graphs there will be, it depends on the data.
Ideally I'd calculate the height needed and assign it dynamically. Nothing in my actionscript index jumps out at me as the obvious answer.
I know I can create a scroll bar as needed within my movie. Just wondering if the height of the swf itself can be set on the fly.
My answer is yes. Although...your still going to have to scroll...sicne it will be longer than your browser.
And although Im saying yes... its not really (per se`) setting the height of the .swf.. but more of the DIV you have the embded .swf in.. so it can display the bigger .swf's once loaded..
you might want to just look into attaching a 'generic' clip that will handle your options/measurements..etc and sizing it from there in a scrollable format...
or how about an automated scrolling timed to the beat of the song/piece?
in my footer in a link called reSize Flash.. give it a read, it may help.
I've kind of stumbled across this post....Now there is a couple of queries for whispers as I'm doing something similar....just for your info I'm not very well versed in Flash
1) the backgound image resizes to the browser's window size, right....now is there a way to stop the window resizing once it reaches the swf's size...i.e. if the window is 800x600 and swf is 400x350 and it's being resized down...can it be made to stop at 400x350?
2) I'm having an issue with the bottom menu bar as it floats off screen when resizing occurs?
I've got the http://dmstudios.net/demos/fullScree...e_newMouse.zip Tut
make sure you are using the correct Y property and not the X property..
as far as your re-size question..
I guess Im not following..
if someone is grabbing the browser window and re-sizing it..there isnt much you can do I suppose..
You can try to call a bit a javaScript or something to FORCE the browser back to your set position..
hello!
I'm looking to do figure a fullscreen/browser/sizing issue and I ended up here.
My issue is the following:
I have swf1 which I published with the dimensions set to 100% (this swf gets bigger or smaller if the viewer changes the dimensions of the browser, or if its seen in different screen resolutions.
The issue arrives when I load a new swf inside that first swf. All the new swf loaded inside the swf1 get resized according to the size of swf1 and I wanted all the others swf's to stay with its original size.
I read the posts above and the first post my whiskers did make sense to what I was looking for, but then I downloaded the file (with the blue sky) and It completely lost me.
1.) its whispers.. not whiskers.. (its even bolded for you)
2.) does that make much sense? If you are scaling an object (swf1 in your case) depending o the size of the browser... and you load something INTO this object that scales with the browser... would it not make sense that whatever is in this scalable object not re-size/scale when the browser changes?
Quote:
Originally Posted by whispers
Sorry about the name error.
But it is a different swf, isn't there a way I can manage that swf independently than the swf1?
then why load it into swf1 then?
if its a different .swf and you load it into a container .swf (swf1).. and scale/size the container.. all the contents of the container (swf1) are scaled...no?
Yes, you are right. But I need swf1 because I need something to load the others swf's in. And this is a draw. So It scales down and up without getting "ugly".Quote:
Originally Posted by whispers
So i'll have to use a picture (like a background and let that one picture be resized) or just abandon the whole "resize swf1" option right?
what is a draw? as in a drawing?
and Im still not understanding your problem/question I guess. (sorry)
you have your MAIN.swf you load in your 1.swf into a containerClip...
and load your other .swf's into other individual containers.. you use the Stage.onResize() function to ONLY affect the 1.swf scaling...
Ran across this great thread and got the full screen/resize element to work great using whispers' fullscreen example (fullScreen_reSize_newMouse).
My question is this: I've placed some buttons on the screen, and want to load movieclips onto the stage using this.
Code:on (release) {
this.attachMovie("mcSpecialists","mcSpecialists",10);
}
How can I load the mcSpecialists movieClip so that it's at the center of the stage?
Thanks
bump.
Any thoughts?
I've added this code to a button, and it brings in a movieClip just fine but not at the center of the stage. A bit off-center, and I need the clip to stay on center during a resize.
I truly need to learn how to bring in a clip and have it centered.Code:on (press) {
this.attachMovie("mcSpecialists", "mcSpecialists", 10);
mcSpecialists._x = Math.ceil(Stage.width/2-test._width/2);
mcSpecialists._y = Math.ceil(Stage.height/2-test._height/2);
centercontent();
}
I dont see why thats not working...
is the movie Clip you are attaching have the registration point the top/left?
maybe this:
PHP Code:on (press) {
var newClip = attachMovie("mcSpecialists", "mcSpecialists", 10);
newClip._x = (Stage.width/2) - (newClip._width/2);
newClip._y = (Stage.height/2( - (newClip._height/2);
centercontent();
}
Why not just put your main flash movie inside a div, set height to 100% and then use Javascript to resize the div based on the screen resolution?
You can estimate around 200px for browser elements, resize your DIV to match the screen height - 200px, and you end up with s site that fits perfectly in anyone's browser window with verly little work.
Just make sure to enable smoothing on all your bitmaps...
how does that solve centering an attached object inside the flash movie then? (which is what hes asking)...
also to the OP-
if you want to scale/re-size something.. your objects registration point would have to be center..
Quote:
Originally Posted by whispers
whispers, thanks much. That bit of reworking you did in the code worked perfectly. I just substituted the 'newClip' with 'mcSpecialists' and away we went!
The trouble I'm having now is that I've got 4 buttons on my main movie that each call a different movieClip. Each clip will come in centered on the stage, but only 1 will stay centered when I do a resize. Any idea as to how each can stay centered? Here's the code I've got for the first 2 buttons. Nothing special, just calling out a different clip in each:
Code:myListener = new Object();
myListener.onResize = centercontent;
Stage.align = "LT";
Stage.addListener(myListener);
function centercontent() {
mcSpecialists2._x = Math.ceil(Stage.width/2-mcSpecialists2._width/2);
mcSpecialists2._y = Math.ceil(Stage.height/2-mcSpecialists2._height/2);
}
centercontent();
myListener = new Object();
myListener.onResize = centercontent;
Stage.align = "LT";
Stage.addListener(myListener);
function centercontent() {
mcSpecialists._x = Math.ceil(Stage.width/2-mcSpecialists._width/2);
mcSpecialists._y = Math.ceil(Stage.height/2-mcSpecialists._height/2);
}
centercontent();
My guess is that I need a different kind of listener, as they might be fighting each other? My knowledge in that area is very limited, so I'm just grasping at straws. Thanks again.
Thought I'd circle back and post the solution here in case anyone has the same trouble. asf8 helped me sort this out. Just as I thought, the duplicate naming was the culprit. Here's the code that fixed it:
Thanks again, whispers, for the assist here. Much appreciated.Code:Stage.align = "TL";
Stage.scaleMode = "noScale";
//
myListener = new Object();
myListener.onResize = centercontent;
Stage.addListener(myListener);
//
function centercontent() {
wallPaper_mc._x = Math.ceil(Stage.width/2-wallPaper_mc._width/2);
wallPaper_mc._y = Math.ceil(Stage.height/2-wallPaper_mc._height/2);
mcSpecialists._x = Math.ceil(Stage.width/2-mcSpecialists._width/2);
mcSpecialists._y = Math.ceil(Stage.height/2-mcSpecialists._height/2);
mcSpecialists2._x = Math.ceil(Stage.width/2-mcSpecialists2._width/2);
mcSpecialists2._y = Math.ceil(Stage.height/2-mcSpecialists2._height/2);
mcSpecialists3._x = Math.ceil(Stage.width/2-mcSpecialists3._width/2);
mcSpecialists3._y = Math.ceil(Stage.height/2-mcSpecialists3._height/2);
}
//
centercontent();