Using flash as a page background

April 22nd, 2008, 7:37 am

Hi, I've seen something interesting on a website that I would like to know more about. Here's the URL: http://uk.playstation.com/. They use a Flash movie as their background, whilst putting the HTML content on top.

How would I be able to do this?

Thanks.

[ATNO/TW]

April 22nd, 2008, 7:44 am

There's too much there to look and give a fast answer, but a quick guess is they're using some z-index layering in the style sheet. That's some interesting code. I bookmarked that to study that one.

April 22nd, 2008, 7:51 am

So are you saying that this could be achieved using CSS?

[ATNO/TW]

April 22nd, 2008, 9:20 am

Yes. CSS has a "layering" option called z-index. z-index is like a stacking order. so a z-index of 2 would appear above a z-index of 1

Then they apply the Style to the <div> elements and place the flash in the <div>s.

Here's an example
http://www.echoecho.com/csslayers.htm

In this case what Sony is doing instead of layering text, they are layering the Flash. At least that's what it looks like.

April 23rd, 2008, 8:39 am

Its actually pretty easy to do with css and z-index like ATNO/TW said. Here's an example I did when we were trying to work it out. http://addsomespark.com/overunder/ Basically our's is a flash background with html text over it and then more flash above that.

Two catches. 1. You MUST set the flash wMode to transparent or it won't work either over or under html. (Flash won't have a background color so you need to add an object inside flash that becomes the background)

2. if you want the flash to be the full size of the site you need to set it to be 100% x 100% with scale modes and what not.

April 24th, 2008, 6:32 am

Thanks, thats exactly what I'm trying to do. I'll take a look at your code graphixboy and try work something out. I'll come back later if I have any questions or issues with getting it to work, but that's great for now, I'll get to work on that.

[ATNO/TW]

April 24th, 2008, 7:12 am

Thanks for the tip about the transparency. I had learned that but had forgotten about that. I'm going to need that. I'm planning to do something quite similar as well.

April 24th, 2008, 8:46 am

thats what I'm here for

May 1st, 2008, 8:47 am

I am using flash in my website as a banner, but I am using the spry menu that comes with dreamweaver cs3. The dropdown menu will not work over the flash. Do I need to set the wMode on the flash to transparent to fix this issue? If so how would I do this I am new to using Flash?

Quote:

Two catches. 1. You MUST set the flash wMode to transparent or it won't work either over or under html. (Flash won't have a background color so you need to add an object inside flash that becomes the background)

2. if you want the flash to be the full size of the site you need to set it to be 100% x 100% with scale modes and what not.

May 1st, 2008, 1:46 pm

That will most likely fix the issue. How are you embedding your flash in the html page? Its just a setting in the object embed code.

For example using the SWFObject you would simply add the line:

Line number On/Off

Code: Select all

1. so.addParam("wmode", "transparent");

May 6th, 2008, 6:46 am

I have tryed adding the line into the embedded flash, but it is not working or I am doing it wrong. I simply am inserting the flash through INSERT -> MEDIA -> FLASH in the Menu Bar. I am fairly new with this sort of work so there is a good chance I am just doing something wrong. Below is the embed code for the flash. Can you help me in more detail?

Line number On/Off

Code: Select all

1. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" name="main" width="790" height="380" id="main" title="main" onfocus="MM_controlShockwave('main','','Play')">
2.           <param name="movie" value="MainFlash.swf" />
3.           <param name="quality" value="high" />
4.        <embed src="MainFlash.swf" width="790" height="380" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" name="main" swliveconnect="true"></embed>
5.         </object>