Using flash as a page background

  • Jack Sparrow
  • Beginner
  • Beginner
  • Jack Sparrow
  • Posts: 36

Post 3+ Months Ago

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.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

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.
  • Jack Sparrow
  • Beginner
  • Beginner
  • Jack Sparrow
  • Posts: 36

Post 3+ Months Ago

So are you saying that this could be achieved using CSS?
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

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.
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

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.
  • Jack Sparrow
  • Beginner
  • Beginner
  • Jack Sparrow
  • Posts: 36

Post 3+ Months Ago

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
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

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.
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

thats what I'm here for :-)
  • justin7542
  • Novice
  • Novice
  • User avatar
  • Posts: 29

Post 3+ Months Ago

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.
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

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:
Code: [ Select ]
so.addParam("wmode", "transparent");
  • justin7542
  • Novice
  • Novice
  • User avatar
  • Posts: 29

Post 3+ Months Ago

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?

Code: [ Select ]
<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')">
         <param name="movie" value="MainFlash.swf" />
         <param name="quality" value="high" />
     <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>
        </object>
  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>
  • ladulcevita
  • Born
  • Born
  • User avatar
  • Posts: 1

Post 3+ Months Ago

Thank you graphixboy and ATNO/TW!

I've been trying for hours to get something similar working. I knew I should change the wmode to transparent, but couldn't figure out where to compromise with the bgcolor.

After a few mods, using the z-index in styles, I put everything else in frames above the swf and it actually worked in FF.. but not in Chrome or IE.

Wish I would have seen this last night!

Post Information

  • Total Posts in this topic: 12 posts
  • Users browsing this forum: No registered users and 14 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.