Thank you for posting the information for posterity sake. Now, if only we could get people to search the list before posting, those in the future who run across this won't have to ask! :)
--Kyle -------------------------------------------------- From: "Howard" <[email protected]> Sent: Monday, January 04, 2010 3:45 PM To: "SWFObject" <[email protected]> Subject: Re: embedding SWF as a background for HTML > i forgot to mention, the above revised code is assuming that you > already know to use layering method (z-index) to lay your HTML over > the flash background. that means flash background with a lower z-index > number and the rest of content on top with higher z-index number. you > can accomplish all this in CSS to avoid the messiness, but i am sure > you already know that. > > > > On Jan 4, 1:41 pm, Howard <[email protected]> wrote: >> i found the answer to my own question. instead of being a dick and >> leave, i'll post the solution here, hopefully it'll be helpful for >> those who run into the same problem. apparently this is a farely wide >> spread problem people run into. and no where within SWFobject java has >> mentioned any of the how-to for embedding flash as background. >> >> <!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";> >> <head> >> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> >> <title>Aquaflex</title> >> <link href="style.css" rel="stylesheet" type="text/css"/> >> <script type="text/javascript" src="scripts/swfobject.js"></script> >> <script type="text/javascript" src="scripts/swffit.js"></script> >> <script type="text/javascript"> >> var flashvars = {}; >> var params = {}; >> params.play = "true"; >> params.scale = "showall"; >> params.salign = "t"; >> params.wmode = "opaque"; >> >> params.allowfullscreen = "true"; >> params.allowscriptaccess = "always"; >> var attributes = {}; >> attributes.id = "flashContent"; >> attributes.align = "middle"; >> swfobject.embedSWF("flash/slide_show_bg.swf", >> "flashContent", >> "100%", "100%", "9.0.0", "expressInstall.swf", flashvars, params, >> attributes); >> params.wmode = "opaque"; >> >> swffit.fit("flashContent",800,480); >> >> </script> >> >> <div id="flashContent"> >> <h1>Please Install Flash</h1> >> <p><a >> href="http://www.adobe.com/go/getflashplayer";><img >> src="http://www.adobe.com/images/shared/download_buttons/ >> get_flash_player.gif" alt="Get Adobe Flash player" /></a></p> >> </div> >> >> </head> >> >> <body> >> >> <div id="content"> >> <h4>This is a sample text</h4> >> </div> >> >> </body> >> </html> >> >> On Jan 4, 11:26 am, Howard <[email protected]> wrote: >> >> >> >> > i've been trying to do this for the past few days, i know it's doable >> > because i've seen other webpages do this. but i just can't figure out >> > how. so far i've got my SWF to embed filling the whole screen by using >> > SWFobject 2.2. but whatever i put in the HTML after that just doesn't >> > show above the flash layer. >> >> > here's an example of the site that i saw has this kind of background >> > swf implementation.http://www.samsung.com/us/ >> > here's my codes. >> >> > <!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";> >> > <head> >> > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> >> > <title>Aquaflex</title> >> > <link href="style.css" rel="stylesheet" type="text/css"/> >> > <script type="text/javascript" src="scripts/swfobject.js"></script> >> > <script type="text/javascript" src="scripts/swffit.js"></script> >> >> > </head> >> >> > <body> >> > <script type="text/javascript"> >> >> > var flashvars = {}; >> > var params = {}; >> > params.scale = "default"; >> > params.wmode = "opaque"; >> > params.allowfullscreen = "true"; >> > var attributes = {}; >> > attributes.id = "flashContent"; >> > attributes.align = "center"; >> > swfobject.embedSWF("flash/slide_show_bg.swf", >> > "flashContent", >> > "100%", "100%", "9.0.0", "expressInstall.swf", flashvars, params, >> > attributes); >> > swffit.fit("flashContent",800,480); >> >> > </script> >> >> > <div id="flashContent"> >> > <h1>Please Install Flash</h1> >> > <p><a >> > href="http://www.adobe.com/go/getflashplayer";><img >> > src="http://www.adobe.com/images/shared/download_buttons/ >> > get_flash_player.gif" alt="Get Adobe Flash player" /></a></p> >> > </div> >> >> > <div id="content"> >> > <h4>This is a sample text</h4> >> > </div> >> >> > </body> >> > </html> >> >> * the most important part is the wmode "opaque", notice there are two >> (double) wmode "opaque" lines within the code, the first one is for >> firefox (and presumably safari), the second one is for IE. if you >> don't add another line at the bottom , IE won't show correctly. >> >> hopefully the author will see the importance and severity of this >> problem, as it's sort of becoming a common problem now as people start >> getting more creative (that means using full flash page with HTML >> over). > > -- > > You received this message because you are subscribed to the Google Groups > "SWFObject" group. > To post to this group, send email to [email protected]. > To unsubscribe from this group, send email to > [email protected]. > For more options, visit this group at > http://groups.google.com/group/swfobject?hl=en. > > > -- You received this message because you are subscribed to the Google Groups "SWFObject" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/swfobject?hl=en.
