dcsimg
A Flash Developer Resource Site

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

Thread: [F8] dynamic .swf size (based on browser)

  1. #1
    Junior Member
    Join Date
    May 2006
    Location
    Nashville, TN
    Posts
    11

    [F8] dynamic .swf size (based on browser)

    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.
    Attached Images Attached Images

  2. #2
    Moderator whispers's Avatar
    Join Date
    Mar 2001
    Location
    CFA2h (respect the HEX)
    Posts
    12,755
    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:
    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();
    (and if my host is not acting up here is an example .fla)
    http://dmstudios.net/demos/fullScree...e_newMouse.zip

    just ignore the custom mouse chunk of code in there..or delete it all together.

  3. #3
    Junior Member
    Join Date
    May 2006
    Location
    Nashville, TN
    Posts
    11
    thanks that helps.

  4. #4
    Junior Member
    Join Date
    May 2007
    Posts
    4

    help with background image resize to 100%

    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

  5. #5
    Moderator whispers's Avatar
    Join Date
    Mar 2001
    Location
    CFA2h (respect the HEX)
    Posts
    12,755
    hi jason...

    umm... huh? LOL I have no clue what you just said or are looking to do?

    what is this part:
    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.
    can you maybe post in bulleted points or something? and not a run-on-sentence

    I can try to help you figure out each step then.

    good luck.

  6. #6
    Junior Member
    Join Date
    May 2007
    Posts
    4
    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

  7. #7
    Moderator whispers's Avatar
    Join Date
    Mar 2001
    Location
    CFA2h (respect the HEX)
    Posts
    12,755
    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..

  8. #8
    Junior Member
    Join Date
    May 2007
    Posts
    4
    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

  9. #9
    Moderator whispers's Avatar
    Join Date
    Mar 2001
    Location
    CFA2h (respect the HEX)
    Posts
    12,755
    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?

  10. #10
    Junior Member
    Join Date
    May 2007
    Posts
    4
    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

    www.symmetrixdesign.com/summit_v10.zip

    thanks


    jason

  11. #11
    Junior Member
    Join Date
    Jun 2003
    Location
    New York City
    Posts
    14
    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.

  12. #12
    Moderator whispers's Avatar
    Join Date
    Mar 2001
    Location
    CFA2h (respect the HEX)
    Posts
    12,755
    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.

  13. #13
    Member
    Join Date
    Apr 2006
    Posts
    42
    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

  14. #14
    Moderator whispers's Avatar
    Join Date
    Mar 2001
    Location
    CFA2h (respect the HEX)
    Posts
    12,755
    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..

  15. #15
    Junior Member
    Join Date
    Aug 2008
    Posts
    16
    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.

  16. #16
    Moderator whispers's Avatar
    Join Date
    Mar 2001
    Location
    CFA2h (respect the HEX)
    Posts
    12,755
    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?

  17. #17
    Junior Member
    Join Date
    Aug 2008
    Posts
    16
    Quote Originally Posted by whispers
    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?

    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?

  18. #18
    Moderator whispers's Avatar
    Join Date
    Mar 2001
    Location
    CFA2h (respect the HEX)
    Posts
    12,755
    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?

  19. #19
    Junior Member
    Join Date
    Aug 2008
    Posts
    16
    Quote Originally Posted by whispers
    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".

    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?

  20. #20
    Moderator whispers's Avatar
    Join Date
    Mar 2001
    Location
    CFA2h (respect the HEX)
    Posts
    12,755
    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...

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