Back To Flash and ActionScript Forum

Using flash as a page background

  • Jack Sparrow
  • Beginner
  • Beginner
  • No Avatar
  • Joined: Aug 31, 2006
  • Posts: 36
  • Status: Offline

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

Post April 22nd, 2008, 7:37 am

  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: May 28, 2003
  • Posts: 23403
  • Loc: Woodbridge VA
  • Status: Offline

Post 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.
"There's no place like 127.0.0.1 except for ::1."
Alexandria Networks. Leader in IT consulting for associations/non-profits, and small to medium sized businesses around the northern Virginia and Washington D.C. metro area.
  • Jack Sparrow
  • Beginner
  • Beginner
  • No Avatar
  • Joined: Aug 31, 2006
  • Posts: 36
  • Status: Offline

Post April 22nd, 2008, 7:51 am

So are you saying that this could be achieved using CSS?
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: May 28, 2003
  • Posts: 23403
  • Loc: Woodbridge VA
  • Status: Offline

Post 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.
"There's no place like 127.0.0.1 except for ::1."
Alexandria Networks. Leader in IT consulting for associations/non-profits, and small to medium sized businesses around the northern Virginia and Washington D.C. metro area.
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Joined: Jul 11, 2005
  • Posts: 1828
  • Loc: In the Great White North
  • Status: Offline

Post 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.
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • Jack Sparrow
  • Beginner
  • Beginner
  • No Avatar
  • Joined: Aug 31, 2006
  • Posts: 36
  • Status: Offline

Post 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
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: May 28, 2003
  • Posts: 23403
  • Loc: Woodbridge VA
  • Status: Offline

Post 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.
"There's no place like 127.0.0.1 except for ::1."
Alexandria Networks. Leader in IT consulting for associations/non-profits, and small to medium sized businesses around the northern Virginia and Washington D.C. metro area.
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Joined: Jul 11, 2005
  • Posts: 1828
  • Loc: In the Great White North
  • Status: Offline

Post April 24th, 2008, 8:46 am

thats what I'm here for :-)
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • justin7542
  • Novice
  • Novice
  • User avatar
  • Joined: Jan 26, 2007
  • Posts: 29
  • Status: Offline

Post 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.
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Joined: Jul 11, 2005
  • Posts: 1828
  • Loc: In the Great White North
  • Status: Offline

Post 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:
Code: [ Select ]
so.addParam("wmode", "transparent");
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • justin7542
  • Novice
  • Novice
  • User avatar
  • Joined: Jan 26, 2007
  • Posts: 29
  • Status: Offline

Post 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?

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
  • Joined: Apr 11, 2011
  • Posts: 1
  • Status: Offline

Post April 11th, 2011, 3:54 am

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!

Page 1 of 1

Post Information

  • Total Posts in this topic: 12 posts
  • Users browsing this forum: No registered users and 27 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
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.