PDA

View Full Version : HTML, Flash and aspect ratio:


leaverk
03-14-2005, 12:49 AM
Hi all,

I have many browsers to keep happy; many old technology users. If I could could just concentrate on the application it would be great. But, alas no - I need some help:

I am giving up on CSS when it comes to IE5 on both Mac and IE5(win), and then Opera, Safari and Netscape, then IE6, my knowledge is just not up to it. Not to mention the varying behaviours on DOCTYPE.

Therefore, for basic boxes in a browser, tables will have to do!

My problem is simple actually: Flash with an aspect ratio of 1:1 let's say 1024 x 1024 pixels within a Table cell. I just want the Flash object to fill (i.e. show all) originally set to 1024x1024 to fill a 100% width in a <td> of a Table cell and to then match with a height conserving aspect ratio.

Remember, there is no "height" attribute with percentage on Table, not that I want to use it.

The 100% width will re-size flash to an inner client area of a browser; I just want the height to match it. And if larger vertically to invoke scrolling so that a user can navigate below the visible browser client area.

That's all.

I enclose some code that doesn't fill the vertical:

<html>
<head>
<title>Fred</title>
</head>
<body bgcolor="#ffffff" topmargin="0" leftmargin="0">
<!--url's used in the movie-->
<!--text used in the movie-->
<table width="100%" border="1">
<tr>
<td>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,65,0" width="100%" height="100%" id="Fred" align="top">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="Fred.swf" />
<param name="loop" value="false" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="salign" value="t" />
<param name="wmode" value="transparent" />
<param name="bgcolor" value="#ffffff" />
<embed src="Fred.swf" loop="false" menu="false" quality="high" salign="t" wmode="transparent" bgcolor="#ffffff" width="100%" height="100%" name="Fred" align="top" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</td>
</tr>
</table>
</body>
</html>

Any ideas on how to fill the vertical (not 100% perhaps greater) but to the width conserving aspect ratio would be really appreciated.

Thanks in advance,
K.

Barn
03-14-2005, 01:11 AM
Mozilla browsers will not scale by percentages in table cells.\

Secondly, your EMBED tag is calling for a different SWF than your OBJECT tag. Is that intentional?

leaverk
03-14-2005, 01:20 AM
Forget the Fred1/Fred problem; thanks for that.

leaverk
03-14-2005, 01:58 AM
Hi all,

I have many browsers to keep happy; many old technology users. If I could could just concentrate on the application it would be great. But, alas no - I need some help:

I am giving up on CSS when it comes to IE5 on both Mac and IE5(win), and then Opera, Safari and Netscape, then IE6, my knowledge is just not up to it. Not to mention the varying behaviours on DOCTYPE.

Therefore, for basic boxes in a browser, tables will have to do!

My problem is simple actually: Flash with an aspect ratio of 1:1 let's say 1024 x 1024 pixels within a Table cell. I just want the Flash object to fill (i.e. show all) originally set to 1024x1024 to fill a 100% width in a <td> of a Table cell and to then match with a height conserving aspect ratio.

Remember, there is no "height" attribute with percentage on Table, not that I want to use it.

The 100% width will re-size flash to an inner client area of a browser; I just want the height to match it. And if larger vertically to invoke scrolling so that a user can navigate below the visible browser client area.

That's all.

I enclose some code that doesn't fill the vertical:

<html>
<head>
<title>Fred</title>
</head>
<body bgcolor="#ffffff" topmargin="0" leftmargin="0">
<!--url's used in the movie-->
<!--text used in the movie-->
<table width="100%" border="1">
<tr>
<td>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,65,0" width="100%" height="100%" id="Fred" align="top">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="Fred.swf" />
<param name="loop" value="false" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="salign" value="t" />
<param name="wmode" value="transparent" />
<param name="bgcolor" value="#ffffff" />
<embed src="Fred.swf" loop="false" menu="false" quality="high" salign="t" wmode="transparent" bgcolor="#ffffff" width="100%" height="100%" name="Fred" align="top" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</td>
</tr>
</table>
</body>
</html>

Any ideas on how to fill the vertical (not 100% perhaps greater) but to the width conserving aspect ratio would be really appreciated.

Thanks in advance,
K.

Barn
03-14-2005, 05:20 AM
And the reason you posted the exact same message again was....?

leaverk
03-14-2005, 06:30 AM
Hi Barn,

Anything constructive to add here or are we just stroking; get a life and get out of the way of some answers that I am sure will be far more useful.

We can all make noise; have you heard the one about empty vessels.

Boskic.com
03-14-2005, 12:22 PM
<html>
<head>
<title>Fred</title>
</head>

<body bgcolor="#000000" topmargin="0" leftmargin="0">
<object type="application/x-shockwave-flash" data="Fred.swf" width="100%" height="1024">
<param name="allowScriptAccess" value="sameDomain">
<param name="movie" value="Fred.swf">
<param name="loop" value="false">
<param name="menu" value="false">
<param name="quality" value="high">
<param name="scale" value="noscale">
<p>Text (no Flash plugin)</p>
</object>
</body>

</html>

It will work in IE, Firefox, Opera, K-Meleon ..., for Netscape I can't tell.
Example height="1024" within object tag or the height of your flash and it will call vertical scroll.

Barn
03-14-2005, 05:31 PM
Anything constructive to add here
Yeah, like "read the replies" instead of just repeating the question.

If you don't read the replies, what's the point in responding to your questions?

Or maybe I should do like you and just repeat my question:
"And the reason you posted the exact same message again was....?"

leaverk
03-14-2005, 08:25 PM
Thanks Boskic.com; I will give that a shot.

Cheers.

leaverk
03-14-2005, 09:39 PM
Hi Boskic.com,

Almost there.

The client area of my browser running in a screen size of 1024x768 is about 1003 wide with a scrollbar up. The Flash object resizes to a 100% width of say approx. the 1003 width. The height of the Flash object keeps the aspect ratio and resizes visibly to 1003 too as the object in my case is square.

However, the Table cell takes on the 1024 height as specified in the Flash object attributes.

I would prefer that the cell takes on the real height, i.e. the 1003.

Any ideas?

Cheers,
K.

I include the test code, the result of your last message:

<html>
<head>
<title>Fred1</title>
</head>

<body bgcolor="#ffffff" topmargin="0" leftmargin="0">

<!--url's used in the movie-->
<!--text used in the movie-->
<table width="100%" border="1">
<tr>
<td>

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,65,0" width="100%" height="1024" id="Fred1" align="top">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="Fred1.swf" />
<param name="loop" value="false" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="salign" value="t" />
<param name="wmode" value="transparent" />
<param name="bgcolor" value="#ffffff" />
<embed src="Fred1.swf" loop="false" menu="false" quality="high" salign="t" wmode="transparent" bgcolor="#ffffff" width="100%" height="1024" name="Fred1" align="top" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

</td>
</tr>
</table>

</body>
</html>

Boskic.com
03-15-2005, 12:53 PM
Use this code, do not alter or add something else (except color values).

<html>
<head>
<title>Fred</title>
</head>

<body bgcolor="#000000" topmargin="0" leftmargin="0">
<object type="application/x-shockwave-flash" data="Fred.swf" width="100%" height="1003">
<param name="allowScriptAccess" value="sameDomain">
<param name="movie" value="Fred.swf">
<param name="loop" value="false">
<param name="menu" value="false">
<param name="quality" value="high">
<param name="scale" value="noscale">
<p>Text (no Flash plugin)</p>
</object>
</body>

</html>