Author Topic: SWF Background  (Read 1751 times)

jodybingo

  • Hero Member
  • *****
  • Posts: 658
    • View Profile
    • Personal Web Site
SWF Background
« on: December 02, 2009, 12:32:51 AM »
TD2 has given me so much power and flexibility with the ability to embed swf files into cells (unlimited announcements). With xmas coming up, I want to build a layout using a swf animation as my background for the entire layout. I havent figured out yet how (or if I can) do this. Can anyone help?
« Last Edit: December 03, 2009, 05:57:42 PM by jodybingo »

Corey Cooper

  • Administrator
  • Hero Member
  • *****
  • Posts: 5420
    • View Profile
Re: SWF Background
« Reply #1 on: December 04, 2009, 09:27:12 AM »
The screen background can only be a color and/or an image.  That's it.  That's an IE limitation (HTML limitation, I believe, so would be true with any browser).

The way you might be able to do this is to create a cell with an element inside of it, then detach that element by using the "position: absolute" style.  For example, create a cell called "Background".  Set the cell's background color to "transparent".  Set the HTML to:

<div style="position: absolute; left: 100; top: 100; background-color: blue; color: white; z-index: -1">I am behind everything</div>

Make sure in your layout you have cell backgrounds and borders turned off (Background button on the Layout tab).  Then insert the cell anywhere.  You should see a blue square with the text "I am behind everything" floating behind the text of the other cells.  I think if you changed the text to the reference to your SWF file, it should work.  Set top and left to 0 and make sure your SWF fills the screen.

jodybingo

  • Hero Member
  • *****
  • Posts: 658
    • View Profile
    • Personal Web Site
Re: SWF Background
« Reply #2 on: December 04, 2009, 03:40:21 PM »
I followed your instructions, and the swf file does display. The remaining cells are not displaying. I changed the size of my swf file to a very small size and the cells are there, however, at full screen, the cells remain behind the swf file. Could there be something missing in the HTML?
Here is the code in the cell:

<div style="position: absolute; left: 0; top: -30; background-color: transparent; color: transparent; z-index: 0"><embed src="C:\Documents and Settings\Jody Stacey\Desktop\snowfall.swf" width="1024" height="768" type="application/x-shockwave-flash">
</embed></div><div/>
« Last Edit: December 05, 2009, 02:33:33 AM by jodybingo »

Corey Cooper

  • Administrator
  • Hero Member
  • *****
  • Posts: 5420
    • View Profile
Re: SWF Background
« Reply #3 on: December 07, 2009, 09:51:10 AM »
z-index: -1

z-index tells the layout the "depth" of an element.  When elements overlap, elements with a lower z-index are displayed underneath elements with a higher z-index.  All elements have a default z-index of 0.  So give your <div> containing the SWF a lower z-index so it should display underneath the other elements on the screen.

Also, the "top: -30" style would, I think, cause the top-left corner of the element to be flush with the left side of the window, but 30 pixels ABOVE the top of the window (effectively being offscreen).  That might be appropriate for your SWF, but I don't know.

jodybingo

  • Hero Member
  • *****
  • Posts: 658
    • View Profile
    • Personal Web Site
Re: SWF Background
« Reply #4 on: December 07, 2009, 07:49:26 PM »
Sorry to be a pest over this problem, but even assigning a negative value for the z-index is still not showing my other cells.
<div style="position: absolute; left: 0; top: -30; background-color: transparent; color: transparent; z-index: -1"><embed src="C:\Documents and Settings\Jody Stacey\Desktop\snowfall.swf" width="1024" height="768" type="application/x-shockwave-flash">
</embed></div>
i will e-mail you the swf file that is part of the layout

Corey Cooper

  • Administrator
  • Hero Member
  • *****
  • Posts: 5420
    • View Profile
Re: SWF Background
« Reply #5 on: December 08, 2009, 10:01:13 AM »
With a little Google help, it turns out you need to add the parameter "wmode=transparent" to the embed element:

<div style="position: absolute; left: 0; top: 0; background-color: transparent; z-index: -1">
  <embed src="C:\Documents and Settings\Jody Stacey\Desktop\snowfall.swf" width="1024" height="768" type="application/x-shockwave-flash" wmode="transparent">
  </embed>
</div>


jodybingo

  • Hero Member
  • *****
  • Posts: 658
    • View Profile
    • Personal Web Site
Re: SWF Background
« Reply #6 on: December 09, 2009, 01:56:19 AM »
worked...thank you corey