/    Sign up×
Community /Pin to ProfileBookmark

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

to post a comment
HTML

11 Comments(s)

Copy linkTweet thisAlerts:
@aj_nscNov 01.2010 — I bet you're looking for a bottom padding instead of a bottom margin.
Copy linkTweet thisAlerts:
@Eye_for_VideoNov 01.2010 — 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/tutorials/scale/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/tutorials/scale/noScale.html

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

http://www.cidigitalmedia.com/tutorials/scale/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/tutorials/scale/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.[/QUOTE]

Best wishes,

Eye for Video

www.cidigitalmedia.com
Copy linkTweet thisAlerts:
@mab123authorNov 01.2010 — 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.
Copy linkTweet thisAlerts:
@Eye_for_VideoNov 01.2010 — 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
Copy linkTweet thisAlerts:
@mab123authorNov 01.2010 — 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
Copy linkTweet thisAlerts:
@Eye_for_VideoNov 02.2010 — Using just one <div> and this CSS:
[CODE]#flash {
width: 100%;
height: 100%;
position: fixed;
left: 400px;
bottom: 200px;
background-color:#00FF00
}[/CODE]

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
Copy linkTweet thisAlerts:
@Eye_for_VideoNov 02.2010 — 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
Copy linkTweet thisAlerts:
@mab123authorNov 02.2010 — 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
Copy linkTweet thisAlerts:
@Eye_for_VideoNov 03.2010 — Always like to learn how these things are resolved... so please post your solution.

EfV
Copy linkTweet thisAlerts:
@mab123authorNov 03.2010 — Hi, the best solution so far is pretty much what you had:

#flash {

position: fixed;

left: 400px;

top:0;

bottom: 200px;

}
Copy linkTweet thisAlerts:
@mab123authorNov 03.2010 — 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
×

Success!

Help @mab123 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 7.27,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ,
analytics: Fullres
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @qewfun,
tipped: live stream
amount: 5000 SATS,

tipper: @qewfun,
tipped: live stream
amount: 5000 SATS,

tipper: @qewfun,
tipped: live stream
amount: 5000 SATS,
)...