<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<meta http-equiv="Content-Style-Type" content="text/css"/>
</head>
<body>
<div align="left">
<font face="Arial" size="2">
<span style=" font-size:10pt">
On 20 Oct 2006 at 10:35, Carl Hudon wrote:</span></font>
</div>
<div align="left">
<font face="Arial" size="2">
<span style=" font-size:10pt">
<br />
</span>
</font>
</div>
<div align="left">
<font face="Arial" color="#7f0000" size="2">
<span style=" font-size:10pt">
> We are working on a flash based game here and have been asked to add</span></font>
</div>
<div align="left">
<font face="Arial" color="#7f0000" size="2">
<span style=" font-size:10pt">
> some informational bits and controls outside of the main game window</span></font>
</div>
<div align="left">
<font face="Arial" color="#7f0000" size="2">
<span style=" font-size:10pt">
> (yes, we have tried to get that idea out of the management's head but</span></font>
</div>
<div align="left">
<font face="Arial" color="#7f0000" size="2">
<span style=" font-size:10pt">
> to no avail). Bottom line is we now have to pop other flash apps/comps</span></font>
</div>
<div align="left">
<font face="Arial" color="#7f0000" size="2">
<span style=" font-size:10pt">
> that will live in window.open'ed browser windows. the rest is cake... </span></font>
</div>
<div align="left">
<font face="Arial" size="2">
<span style=" font-size:10pt">
<br />
</span>
</font>
</div>
<div align="left">
<font face="Arial" size="2">
<span style=" font-size:10pt">
I have integrated SWFObject with Yahoo UI ... and they work together quite nicely since both
use div containers.</span></font>
</div>
<div align="left">
<font face="Arial" size="2">
<span style=" font-size:10pt">
<br />
</span>
</font>
</div>
<div align="left">
<font face="Arial" size="2">
<span style=" font-size:10pt">
You have to target one of the nested div containers (class="bd") to embed SWFObject (or
any other content).</span></font>
</div>
<div align="left">
<font face="Arial" size="2">
<span style=" font-size:10pt">
<br />
</span>
</font>
</div>
<div align="left">
<font face="Arial" size="2">
<span style=" font-size:10pt">
YUI can then be used to popup/animate the div container through Yahoo UI API. Note that it
is not a pop up window but an animated div container with dynamic content and properties.</span></font>
</div>
<div align="left">
<font face="Arial" size="2">
<span style=" font-size:10pt">
<br />
</span>
</font>
</div>
<div align="left">
<font face="Arial" size="2">
<span style=" font-size:10pt">
...</span></font>
</div>
<div align="left">
<font face="Arial" size="2">
<span style=" font-size:10pt">
<br />
</span>
</font>
</div>
<div align="left">
<font face="Arial" size="2">
<span style=" font-size:10pt">
Full details here .</span></font>
</div>
<div align="left">
<font face="Arial" size="2">
<span style=" font-size:10pt">
<br />
</span>
</font>
</div>
<div align="left">
<a href="http://developer.yahoo.com/yui/">
<font face="Arial" color="#0000ff" size="2">
<span style=" font-size:10pt">
<u>http://developer.yahoo.com/yui/</u>
</span>
</font>
</a>
</div>
<div align="left">
<font face="Arial" size="2">
<span style=" font-size:10pt">
<br />
</span>
</font>
</div>
<div align="left">
<font face="Arial" size="2">
<span style=" font-size:10pt">
...</span></font>
</div>
<div align="left">
<font face="Arial" size="2">
<span style=" font-size:10pt">
<br />
</span>
</font>
</div>
<div align="left">
<font face="Arial" size="2">
<span style=" font-size:10pt">
Here are the container (popup) examples</span></font>
</div>
<div align="left">
<font face="Arial" size="2">
<span style=" font-size:10pt">
<br />
</span>
</font>
</div>
<div align="left">
<a href="http://developer.yahoo.com/yui/examples/container/index.html">
<font face="Arial" color="#0000ff" size="2">
<span style=" font-size:10pt">
<u>http://developer.yahoo.com/yui/examples/container/index.html</u>
</span>
</font>
</a>
</div>
<div align="left">
<font face="Arial" size="2">
<span style=" font-size:10pt">
<br />
</span>
</font>
</div>
<div align="left">
<font face="Arial" size="2">
<span style=" font-size:10pt">
...</span></font>
</div>
<div align="left">
<font face="Arial" size="2">
<span style=" font-size:10pt">
<br />
</span>
</font>
</div>
<div align="left">
<font face="Arial" size="2">
<span style=" font-size:10pt">
If you take this HTML source as a starting point ..</span></font>
</div>
<div align="left">
<font face="Arial" size="2">
<span style=" font-size:10pt">
<br />
</span>
</font>
</div>
<div align="left">
<a href="http://developer.yahoo.com/yui/examples/container/overlay-manager.html">
<font face="Arial" color="#0000ff" size="2">
<span style=" font-size:10pt">
<u>http://developer.yahoo.com/yui/examples/container/overlay-manager.html</u>
</span>
</font>
</a>
</div>
<div align="left">
<font face="Arial" size="2">
<span style=" font-size:10pt">
<br />
</span>
</font>
</div>
<div align="left">
<font face="Arial" size="2">
<span style=" font-size:10pt">
then to get going ..</span></font>
</div>
<div align="left">
<font face="Arial" size="2">
<span style=" font-size:10pt">
<br />
</span>
</font>
</div>
<div align="left">
<font face="Arial" size="2">
<span style=" font-size:10pt">
(a) Insert SWFObject script at bottom of overlay_manager.html (before </body>).</span></font>
</div>
<div align="left">
<font face="Arial" size="2">
<span style=" font-size:10pt">
<br />
</span>
</font>
</div>
<div align="left">
<font face="Arial" size="2">
<span style=" font-size:10pt">
(b) Add an SWFObject ID (ID="flashcontent") to one of the body ("bd") containers</span></font>
</div>
<div align="left">
<font face="Arial" size="2">
<span style=" font-size:10pt">
<br />
</span>
</font>
</div>
<div align="left">
<font face="Arial" size="2">
<span style=" font-size:10pt">
e.g.</span></font>
</div>
<div align="left">
<font face="Arial" size="2">
<span style=" font-size:10pt">
<br />
</span>
</font>
</div>
<div align="left">
<font face="Arial" color="#0000ff" size="2">
<span style=" font-size:10pt">
<div id="oPredefined" style="visibility:hidden;position:absolute"></span></font>
</div>
<div align="left">
<font face="Arial" color="#0000ff" size="2">
<span style=" font-size:10pt">
<div class="hd">Predefined Overlay Header</div></span></font>
</div>
<div align="left">
<font face="Arial" color="#0000ff" size="2">
<span style=" font-size:10pt">
<div class="bd"</span></font>
<font face="Arial" color="#ff0000" size="2">
<span style=" font-size:10pt">
id="flashcontent"</span></font>
<font face="Arial" color="#0000ff" size="2">
<span style=" font-size:10pt">
>I was created using simple predefined markup.
</span></font>
<font face="Arial" color="#ff0000" size="2">
<span style=" font-size:10pt">
SWFObject will write content into this body container.</span></font>
<font face="Arial" color="#0000ff" size="2">
<span style=" font-size:10pt">
</div></span></font>
</div>
<div align="left">
<font face="Arial" color="#0000ff" size="2">
<span style=" font-size:10pt">
<div class="ft">Predefined Overlay Footer</div></span></font>
</div>
<div align="left">
<font face="Arial" color="#0000ff" size="2">
<span style=" font-size:10pt">
</div></span></font>
</div>
<div align="left">
<font face="Arial" size="2">
<span style=" font-size:10pt">
<br />
</span>
</font>
</div>
<div align="left">
<font face="Arial" size="2">
<span style=" font-size:10pt">
(c) .. and away you go.</span></font>
</div>
<div align="left">
<font face="Arial" size="2">
<span style=" font-size:10pt">
<br />
</span>
</font>
</div>
<div align="left">
<font face="Arial" size="2">
<span style=" font-size:10pt">
(d) Also, you can customise the popup Panels by embedding different border content
("skins") .. see XP Panel and Aqua Panel examples as starting point. I am using SWFObject
to "skin" custom panel components (Flash embedded in the skin borders instead of default
*.gif images).</span></font>
</div>
<div align="left">
<font face="Arial" size="2">
<span style=" font-size:10pt">
<br />
</span>
</font>
</div>
<div align="left">
<font face="Arial" size="2">
<span style=" font-size:10pt">
DL</span></font>
</div>
<div align="left">
</div>
</body>
</html>