If I use the width and height pixel (i.e. width = 300 px, height =200px), the image shows up on the page. However, when I subtitute the image width and height with 100% as the code below, the image doesn't show up. Please tell me how to fix the percentage to make the image displays. (I need to display a lot of images, so I want to use the % instead of the actual image pixel). Thank you very much.
First, you need to be sure that your "container" <div> for the Flash does not have a set width and height in your CSS. Then use the "scale" param for the Flash. There are 4 scale params explained in this previous post. View the examples and look at the source code to choose which param is best for you.
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.
"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.
"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.
"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.
Eye for Video www.cidigitalmedia.com
I am using % in order to prevent the flash from overlapping beyond its div container when the user zooms in using ctrl+. If I use pixels, the flash would overlap its div when the user zooms in the page.
The code above works fine with Chrome but not with IE and Firefox. In IE and in Firefox, the flash is centered in the middle of the div (white space on its left and on its right) and it is smaller than it should be in width with no white space. This is not the case in Chrome.
prevent the flash from overlapping beyond its div container
I just tested a number of Flash elements on several sites and in several browsers, none of which overlap their containing <div> when using ctrl+.
so I would have to disagree that
use pixels, the flash would overlap its div when the user zooms in the page.
I normally use a fixed pixel w/h and just don't see that happening.
If you are getting a white space on the sides of <div id="flash'> which changes shape as you ctrl+, it's most likely because the Flash element is maintaining it's aspect ratio, and depending on the amount of zoom, may display more or less of that extra white space.
Post a link if possible.
Eye for Video www.cidigitalmedia.com
If you notice the <div> has a border which I set on purpose for debugging. The flash is inside the div and when I ctrl+ (with pixels) the flash starts increasing in size from the right side and it becomes bigger than its div, and therefore it goes above any other html element placed at its right side. This does not happen when I use %. But % is causing problems in Firefox and IE.
I will try to post a link as soon as possible, but I hope you can help me in the meanwhile.
OK, now I can see the problem... when using a percent in the #flash and pixels in the params, it does overflow. But testing in FF3.5, IE8, Chrome, and Safari, there is no overlap using 100% in the <object> params. On my browsers the Flash stays contained in the border...... hmmmm..??
Setting your #flash width as a percent and then expecting the Flash to stop expanding when zoomed is a problem.
One solution is to add a flash holder div to contain the flash div:
None of the solutions I could come up with perfectly scaled the Flash in relation to the Web page, you either get scroll bars or extra white space. That's because with each zoom step, the Flash is expanding at a slightly different rate than the Web page in order to maintain it's aspect ratio. You could also try adding in the scale param scale="noborder" or exactfit but you may get distortion as you zoom in/out.
Of course simply removing