overlaying Flash SWF div content with HTML div content

d~l · Joined: 09 Oct 2005 Posts: 5

This problem arises from not being able to overlay an HTML object such as browser window (embedded in a div) over a Flash SWF (embedded in another div).

So the workaround I am trying (unless there is another way to overlay HTML on SWF canvas) is to surround the HTML object with splits of the SWF file to give the appearance of an HTML object overlaying Flash SWF.

i.e. Splitting the SWF into four components to create a skin (Top, Left, Right, Bottom) around the central HTML object.

...

I am using CSS to create a set of <div> containers for the skin components.
Top, Left, Right, Bottom.

And a div for the Centre (containing the HTML object)

So I have ...

<div class="skinTop" id ="skinTop">
.. embedded SWF file ..
</div>

<div class="skinLeft" id ="skinLeft">
.. embedded SWF file ..
</div>

<div class="skinRight" id ="skinRight">
.. embedded SWF file ..
</div>

<div class="skinBottom" id ="skinBottom">
.. embedded SWF file ..
</div>

Using styles such as this (note use of clip) ..

div.skinTop {
position:absolute;
top:200px;
left:50px;
clip:rect(0px, 1200px, 200px, 0px);
visibility:visible;
z-index:9;
}

div.skinLeft {
...
}

div.skinRight {
...
}

div.skinBottom {
...
}

div.HTMLObject {
...
}

This CSS positions each div to surround the centre div.

But .... the problem (only in the skinRight div) is to align the embedded SWF with the right side of the overall effect. Currently it is left aligned.

I had thought that using negative parameters in style or clips might work .. but I can't get this to work.

So how can I offset the embedded SWF inside a skinRight div.
e.g. x=-500, or align right.

Corey Bryant · Posted: Sun Oct 09, 2005 11:38 am

Make sure to give your div a width and then use text-align: right

d~l · Joined: 09 Oct 2005 Posts: 5

Thanks .. I have tried adding
(a) text-align:right to the div class
and
(b) width="200" to the <div> container

but still no joy .. in fact the width attribute in div container does not seem to work at all. I tried changing to different widths but it is oblivious to changes made.

div.skinRight {
position:absolute;
top:200px;
left:1050px;
clip:rect(200px, 200px, 600px, 0px);
text-align:right
visibility:visible;
z-index:99;
}

...............

<div class="skinRight" id="skinRight" width="200">

.. SWF embed script here ..

</div>

Corey Bryant · Posted: Sun Oct 09, 2005 1:10 pm

Add it to your style

d~l · Joined: 09 Oct 2005 Posts: 5

This is not my day ..
I tried the full div class and div as you suggested ..
but the skinRight SWF stubbornly refuses to align ..

and to compound the problems .. although the CSS works in IE6
(apart from this skinRight alignment problem) ..
it does not layout properly in Firefox.

Back to the drawing board to see where the CSS is going wrong.

Corey Bryant · Posted: Sun Oct 09, 2005 1:34 pm

Are you using a DOCTYPE? You can also find some good resources on the IWDN site.

d~l · Joined: 09 Oct 2005 Posts: 5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

I'll look at the IWDN site and report back if I figure out where it is screwed up. Thanks.

Corey Bryant · Posted: Sun Oct 09, 2005 1:58 pm

Sure - and maybe ask the guys and gals there - they are great at the CSS, etc - just provide them with all the source code, the more the better

d~l · Joined: 09 Oct 2005 Posts: 5

I did subscribe to IWDN .. but after some trial and error I found a way of aligning SWF skin components to surround an HTML object.

It requires ..

(a) the use of iframe (containing SWF) embedded in each div container.

(b) div and iframe classes (two classes for each skin component, eight in total)

(c) using negative values for top and left in iframe class to align the skin components

(d) using clip in the div class to select area to be visible.

The important point I found is that the clipping for all four div/iframes must be applied by a method initiated by an event handler ... after the iframes are loaded ... it is not sufficient to just define clips in the div class.

This reference explains clip.

http://www.w3.org/TR/CSS21/visufx.html#value-def-top

It is quite tricky setting this up. Very easy to get the class positioning values wrong, so components should be set up one at a time.

Perhaps an easier solution than all this CSS manipulation is to just compile, from a master SWF, four separate SWF files, pre-aligned to be placed in separate div containers.

Each SWF movie (where needed) before compiling can be offset with negative values of canvas top and left so that the skin components align around the central embedded HTML object. This gets around the tricky CSS positioning logic.

....

It would be even better if the required central HTML object could overlay Flash SWF object but I haven't yet found a way of doing that.