www.webdeveloper.com
Results 1 to 12 of 12

Thread: swf at 100% width/height with a left margin of 400px and a bottom margin of 200px?

  1. #1
    Join Date
    Nov 2010
    Posts
    6

    swf at 100% width/height with a left margin of 400px and a bottom margin of 200px?

    Please can someone tell me if it is possible to have a swf at 100% width/height with a left margin of 400px and a bottom margin of 200px? Have managed the left margin using:

    <div style="height:100%;margin-left:400px;"> <div id="flashcontent"></div> </div>

    But can't get a margin at the bottom of the page, really could use some help.

    Mike

  2. #2
    Join Date
    Dec 2005
    Posts
    2,984
    I bet you're looking for a bottom padding instead of a bottom margin.

  3. #3
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    Scaling a .swf is a little different than resizing some other types of content in that 100%/100% generally means that it will maintain the correct w/h aspect ratio during the resizing. So during the resizing of the browser window, just narrowing the size of the window (not the height) will also reduce the height of the .swf.... but HEY! Wait! I didn't reduce the height of the browser window! No, but in order for the .swf to maintain it's original w/h aspect ratio, reducing the width would neccessarily result in reducing the height also.
    So yes, you can set a .swf to 100%/100% and have whatever margins you want, but during browser window resizing, you may get some space to the sides or top/bottom or some cropping of the .swf. You'll need a combination of CSS and Flash scaling to accomplish what you want.
    I'd suggest you create a <div> for the Flash (but with no content, just a background color). Get the CSS margins worked out for the page. Then, after you have that working, put the Flash on the page and scale as needed. For the different scaling options see below. Take special notice to the "Show All" page. It is constrained within a container <div> similar to what you want to do. But resize the page and watch how the .swf stays at 100% (within it's container) but also maintains it's aspect ratio. It will be at either 100% width or 100% height but not BOTH at the same time UNLESS it's container <div> is at the exact same w/h aspect ratio as the .swf.
    Here are examples of different scaling parameters available in the Publish settings. You can also add these parameters directly in the html (<param name="scale" value="noscale"). All the examples replace the actual Flash dimensions with 100% for both width and height (width="100%" height="100%"). These examples use the old <object> and <embed> to illustrate the different ways to scale Flash. Once you understand how it works Iíd recommend that you use swfobject to place the Flash in your final project.
    View the source code for each page to see the full code.

    http://www.cidigitalmedia.com/tutori...exact_fit.html

    "exactFit" scales the file to fit exactly within the confines of the screen, irregardless if the movie becomes consequently distorted. The original aspect ratio is not maintained. So round things are not round and squares are not square.

    http://www.cidigitalmedia.com/tutori...e/noScale.html

    "noScale" is the default setting, and causes the movie to be displayed at the originally designed dimensions.

    http://www.cidigitalmedia.com/tutori...no_border.html

    "noBorder" causes the movie to be scaled to what ever dimensions are needed to have no border surrounding the movie within the player, which consequently could result in some of the movie being cut off from view. In other words, the movie will maintain the original aspect ratio and will fill the screen completely. But if the movie has to be streched wider to fill both sides of the screen, it will also stretch taller, but then some of the top and the bottom of the movie may be cut off from view.

    http://www.cidigitalmedia.com/tutori.../show_all.html

    "showAll" scales the movie to the size of the screen (which could cause pixelation if the file contains raster information), the difference between showAll and exactFit is that showAll mantains initial movie size proportions. Because it maintains the original aspect ratio, there can be space to the sides or the top and bottom. But everything always shows and they are not distorted. But notice the photo in the center, it becomes pixilated at larger screen resolutions.

    The trickiest part of trying to go full screen is that itís difficult to make the Flash wider without making it taller also, that is, to maintain the correct proportions or aspect ratio of everything on the stage. These methods are just simple scaling accomplished with html. There are also methods to dynamically scale the stage and itís elements using ActionscriptÖ but thatís a much more complex undertaking.
    Best wishes,
    Eye for Video
    www.cidigitalmedia.com

  4. #4
    Join Date
    Nov 2010
    Posts
    6
    Hi, thanks for the reply. It was actually the html I was struggling with, I have a no scale, stage aligned swf that resizes dynamically with the browser and is working well. The problem was finding a html solution to hold the swf.

  5. #5
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    Just to understand better.. what you want is 400px left margin and a 200px bottom margin.. is this always in the browser window does the 200 px bottom margin use a scroll bar, since the Flash is set to 100% height?
    Are you wanting the Flash to be 100% of the browser window or just the Flash container? the Flash container being constrained by the margins.
    And what you have now is a .swf that resized using actionscript and not HTML?
    Not exactly sure what a "stage aligned swf" is. Could you elaborate?
    What happens to the aspect ratio of the swf as you resize the .swf?
    Do you have a link available?
    Best wishes,
    Eye for Video
    www.cidigitalmedia.com

  6. #6
    Join Date
    Nov 2010
    Posts
    6
    Hi, I have a swf which uses StageAlign.LEFT to keep all the content relative to the left hand side, what I would like to do is have the swf resize to 100% of the container width/height but keep a 400px margin on the left and a 200px margin at the bottom without scroll bars showing.

    What I actually have are 2 swfs, one fills the whole browser window and resizes with actionscript (just increases the height of the left content and the width of the bottom content). The other swf is "trapped" inside a div which resizes but always has fixed margins. The aspect ratio isn't an issue as both the swf's only contain components and not video.

    It's more a html problem, sadly no link available at the moment but thanks for all the info.

    Cheers
    Mike

  7. #7
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    Using just one <div> and this CSS:
    Code:
    #flash {
    	width: 100%;
    	height: 100%;
    	position: fixed;
    	left: 400px;
    	bottom: 200px;
    	background-color:#00FF00
    }
    Gives you a container that always has a 400 margin left and a 200 margin bottom. Try putting the Flash inside that. But it still seems like you could have problems when the screen resizes. What happens when the screen is resized to 500 wide or only 400 high. a lot of the .swf will get cut off? or ??
    EfV

  8. #8
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    OH wait! not working in IE... let me re-think this...
    What is the purpose/reason for the space on the left and below? Will it have content in it or are you just trying to acheive a certain look in the browser window?
    Are you attmpting to "Fit" your .swf to a certain size browser window/resolution?
    EfV

  9. #9
    Join Date
    Nov 2010
    Posts
    6
    Thanks for the code, its a big help, one slight issue is the fixed position and IE6.

    What happens is one swf fills the browser (no margins) in wmode transparent, this swf contains buttons etc. The other swf is a map control which goes on top of the first swf.

    It's a strange layout but basically is filling the browser regardless of screen resolution. The swf with margins (map control) resizes automatically so if the browser width is 500px then the map control shrinks to 100px width.

    Looks like your code will work, not had a chance to check yet but imagine that absolute position would do the same in IE6?

    Thanks for the help
    Mike

  10. #10
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    Always like to learn how these things are resolved... so please post your solution.
    EfV

  11. #11
    Join Date
    Nov 2010
    Posts
    6
    Hi, the best solution so far is pretty much what you had:

    #flash {
    position: fixed;
    left: 400px;
    top:0;
    bottom: 200px;
    }

  12. #12
    Join Date
    Nov 2010
    Posts
    6
    Sorry, submitted by mistake

    Best solution so far is pretty much what you had:

    #flash {

    position: fixed;
    left: 400px;
    top:0;
    right:0;
    bottom: 200px;

    }

    but took out the height/width and added this:

    body, html
    {
    margin:0;
    padding:0;
    height:100%;
    }


    Working ok for now and image that change the position to absolute will work for IE6 but not had a change to check yet.
    Thanks again for all your help.

    Cheers
    Mike

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles