asked on

Flash Movie in HTML Table

I have a nested html table in which I want to add a flash movie into one of the table elements. I want the flash movie to be a percentage (100% of the table width) so that it can expand/contract yet keep it's aspect ratio. The problems that I have been having are as follows: When I change the objec tnad embed tags from the pixel format (800x250) the a percentage (100% x 100%) inside the table I don't see the movie at all. When I take the movie outside of the table and change the tags to percent I get a lot of white space above and below the movie. The only way that it will display in the table is when I have it in pixel mode (800x250). I want to get this flash movie embedded in the html table so that it expands and contracts and keeps its aspect ratio. The page I am working on is http://www.kachele.com/home.php

Thanks,
John

Billystyx

USE SCALE=EXACTFIT

Billystyx

Kachele

ASKER

still doesn't seem to work. Here's the code I have for the flash:

<table align="center" valign="top" width="90%" style="border-left: #000066 3px solid;border-right: #000066 3px solid; border-bottom: #000066 3px solid;border-top: #000066 3px solid" cellspacing="0" cellpadding="10">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="800" height="250">
<PARAM NAME="SCALE" value="exactfit">
<param name="movie" value="flash/kachele_header.swf">
<param name="quality" value="high"><param name="wmode" value="transparent">
<embed src="flash/kachele_header.swf" quality="high" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="250" SCALE="EXACTFIT"></embed></object>
</td>
</tr>
</table>

Billystyx

also just change the width to 100% - leave the height as it is.

Billystyx

Billystyx

I will check rest tonight - I have samples at home and can never remember this stuff off the top of my head:)

Kachele

ASKER

Alright, that is just about perfect but I was hoping to keep the aspect ratio. When I resize the movie now it stretches the width keept eh height constant and thus changes the aspect ratio. Is there anyway to keep the aspect ratio?

Thanks,
John

Billystyx

yes, set it back to noscale or noborder.

Billystyx

Kachele

ASKER

Setting the scale to noborder works a lot better but now when the browser resolution is too large it cuts off the top and bottom of the flash movie. This is because the width is still set to 250. When I change this to 100% it doesn't display. Here's the new code:

<table align="center" valign="top" width="90%" style="border-left: #000066 3px solid;border-right: #000066 3px solid; border-bottom: #000066 3px solid;border-top: #000066 3px solid" cellspacing="0" cellpadding="10">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100%" height="250">
<PARAM NAME="SCALE" value="noborder">
<param name="movie" value="flash/kachele_header.swf">
<param name="quality" value="high"><param name="wmode" value="transparent">
<embed src="flash/kachele_header.swf" quality="high" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="100%" height="250" SCALE="noborder"></embed></object>
</td>
</tr>
</table>

Billystyx

this will fit it inside the table without stretching it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Billystyx</title>
<SCRIPT LANGUAGE="JavaScript">
function openWin(URL, windowName, intWidth,intHeight) {
var xVal = screen.availWidth;
var yVal = screen.availHeight;
var x = (xVal-intWidth)/2;
var y = (yVal-intHeight)/2;
strOptions = "width=" + intWidth + ",height=" + intHeight + ",menubars=No,toolbar=No,location=No,scrollbars=No,status=No,resizable=Yes,fullscreen=no,left=" + x + ",top=" + y;
newWindow = window.open(URL,windowName, strOptions);
}
</SCRIPT>
</head>
<body bgcolor="#999999">
<table align="center" valign="top" width="90%" style="border-left: #000066 3px solid;border-right: #000066 3px solid; border-bottom: #000066 3px solid;border-top: #000066 3px solid" cellspacing="0" cellpadding="10">
<tr>
<td>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" width="100%">

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100%" height="250">
<param name="movie" value="flash/kachele_header.swf">
<param name="quality" value="high"><param name="wmode" value="transparent">
<embed src="flash/kachele_header.swf" quality="high" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="100%" height="250"></embed></object>
</td>
</tr>
</table>
</body>
</html>

Basdically, you just gfet rid of the scale parameter:)

Billystyx

Kachele

ASKER

Alright, Now it scales down properly but it doesn't scale up. Once it hits 800x250 it stops scaling.

Billystyx

can you post the swf and I will take a look?

Billystyx

Kachele

ASKER

how do I post the swf?

Billystyx

If you have space to post then upload it. Otherwise you can email me (my email is in my profile),and I will share the results here. It is advisable to get some web space for storage though - helps a lot with this site for troubleshooting.
I think it isn't to do with the swf, but it helps to have the exact file dimesions etc without having to create my own for testing purposes.

Billystyx

Kachele

ASKER

I placed a link to the swf file at http://www.kachele.com/here.html

Right click on the link ans "Save target As..."

I didn't realize that this is so difficult and have raised the point value by 100 pts.
Thanks,
John

Billystyx

how about this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>">
<html xmlns="<http://www.w3.org/1999/xhtml>" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#999999">
<table align="center" valign="top" width="100%" height="100%" style="border-left: #000066 3px solid;border-right: #000066 3px solid; border-bottom: #000066 3px solid;border-top: #000066 3px solid" cellspacing="0" cellpadding="10">
<tr>
<td align="center" width="100%">

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0 <http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab>" width="100%" height="250">
<param name="scale" value="noborder">
<param name="movie" value="kachele_header.swf">
<param name="quality" value="high"><param name="wmode" value="transparent">
<embed src="kachele_header.swf" quality="high" wmode="transparent" pluginspage="<http://www.macromedia.com/go/getflashplayer>" type="application/x-shockwave-flash" width="100%" height="100%" scale="noborder"></embed></object>
</td>
</tr>
</table>
</body>
</html>

It looks ok from here...
Billystyx

Kachele

ASKER

Alright, what the movie is doing is the width is scaling down only but the height is not and once the width hits its original size (800px) it stops scaling. What I was needed to happen is when the width scales the height scales with the same factor. I was thinking about runnning some kind of script that determines the screen width/height and scales from that.

JK

ASKER CERTIFIED SOLUTION

Billystyx

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial