-
I came across this site:
http://www.pomegranit.com/
I was astonished to see what looked like Quicktime and Realmedia players embedded in Flash!!
>place >virtual tour
a Quicktime VR movies
>gallery >stream
streaming Realmedia movies
I enlarged the popup and had a look in the source; it's all done with javascripts.
This effect/ technique is what I have been looking for for months.
Now I don't know much about javascripts and wanted to ask you if there was someone who could help me explaning how this is done...
It looks like some kind of (transparant) hidden pages/layers, containing the players, who lay on top of the .swf file?
And those pages show up when triggering the .swf?
I would love to learn about this technique, I'm so exited!
Anyway I uploaded what I've found in my temp internetfiles
-for the QT VR virtual tour:
http://users.skynet.be/mark.putteman...irtualtour.zip
-for the gallery > cartoon networks stream:
http://users.skynet.be/mark.putteman...RM.cartoon.zip
Many thanks for looking at this in advance
.. and please all information or thoughts about this are very appreciated.
here is the code from the HTML:
<html>
<head>
<title>Pomegranit</title>
<!--JavaScript file to detect browser and OS-->
<script language="JavaScript" src="jsStuff/sniffer.js"></script>
<script language="JavaScript">
<!--
//Go to site for Mac-IE combo
if(os.mac && is.ie)
{
window.location.href="ie/macIE.html";
}
var source =""; //String for dynamic page content
//Create div for Flash movie - IE
if(is.ie)
{
source += "<div id='flashDiv' ";
source +="style='position:absolute; top:50; left:50; ";
source +="width:800px; height:600px; z-index:1; visibility:'visible'> ";
}
//Create layer for Flash movie - Netscape
else if(is.ns)
{
source += "<layer id='flashDiv' ";
source +="top=50 left=50 ";
source +="width=800 height=600 z-index=1 visibility='show'>";
}
//Source for Flash movie object - same in IE and Netscape
source+="<OBJECT classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' ";
source+="codebase=";
source+="'http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0' ";
source+="ID='layertest' WIDTH=750 HEIGHT=450>";
source+="<PARAM NAME=movie VALUE='home5.swf'>";
source+="<PARAM NAME=loop VALUE=false>";
source+="<PARAM NAME=quality VALUE=high>";
source+="<PARAM NAME=scale VALUE=exactfit>";
source+="<PARAM NAME=salign VALUE=LT>";
source+="<PARAM NAME=bgcolor VALUE=#FF0000>";
source+="<EMBED name='layertest' src='home5.swf' loop=false quality=high ";
source+="scale=exactfit salign=LT bgcolor=#FF0000 WIDTH=750 HEIGHT=450 ";
source+="TYPE='application/x-shockwave-flash' ";
source+="PLUGINSPAGE=";
source+="'http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash' ";
source+="swLiveConnect='true'></EMBED>";
source+="</OBJECT>";
//End Flash movie div, create Real movie div and QuicktimeVR div - IE
if(is.ie)
{
source +="</div>";
source += "<div id='realDiv' ";
source +="style='position:absolute; top:115; left:250; ";
source +="width:800; height:600; z-index:2; visibility:hidden'>";
source += "</div>";
source += "<div id='qtvrDiv' ";
source +="style='position:absolute; top:107; left:253; ";
source +="width:240px; height:195px; z-index:2; visibility:hidden'>";
source += "</div>";
}
//End Flash movie layer, create Real movie layer and QuicktimeVR layer - Netscape
else if(is.ns)
{
source +="</layer>";
//Playing Real movie over Flash not working in Netscape-Windows combo
//Create imagemap to mimic Flash background
if(os.win)
{
source += "<layer id='realStatDiv' ";
source +="top=50 left=50 ";
source +="width=800 height=600 z-index=1 visibility='hide'>";
source+="<map name='realBgMap'>";
source+="<area shape='rect' coords=' 304, 260, 336, 280' ";
source+="href='javascript:stopHide()' >";
source+="</map>";
source+="<img name='realBg' src='gal_bg.jpg' ";
source+="width='750' height='450' border='0' ";
source+="usemap='#realBgMap' >";
source += "</layer>";
}
source += "<layer id='realDiv' ";
source +="top=115 left=250 ";
source +="width=800 height=600 z-index=2 visibility='hide'> ";
source += "</layer>";
//Playing QuicktimeVR over Falsh not working in Netscape
//Create imagemap to mimic Flash background
source += "<layer id='qtvrStatDiv' ";
source +="top=50 left=50 ";
source +="width=800 height=600 z-index=1 visibility='hide'> ";
source+="<map name='qtvrBgMap'>";
source+="<area shape='rect' coords=' 411,290,453,322' ";
source+="href='javascript:hideQtvr()' >";
source+="</map>";
source+="<img name='qtvrBg' src='qtvr_bg.jpg' ";
source+="width='750' height='450' border='0' ";
source+="usemap='#qtvrBgMap' >";
source += "</layer>";
source += "<layer id='qtvrDiv' ";
source +="top=107 left=253 ";
source +="width=240 height=195 z-index=2 visibility='hidden'> ";
source += "</layer>";
}
//Function to create and dynamically write content for Real movie layer/div
//and begin playing movie.
//Argument: vidName is complete path to Real movie file
function showPlay(vidName)
{
var newSource = "";
newSource+="<OBJECT ID='video1' ";
newSource+="CLASSID='clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA' ";
newSource+="HEIGHT='172' WIDTH='242' ";
newSource+="HSPACE='0' VSPACE='0'>";
newSource+="<param NAME='CONTROLS' VALUE='ImageWindow'>";
newSource+="<param NAME='CONSOLE' VALUE='Clip1'>";
newSource+="<param NAME='AUTOSTART' VALUE='TRUE'>";
newSource+="<param NAME='SRC' VALUE="+vidName+">";
newSource+="<EMBED SRC="+vidName;
newSource+=" TYPE='audio/x-pn-realaudio-plugin' ";
newSource+="CONSOLE='Clip1' CONTROLS='ImageWindow' ";
newSource+=" HEIGHT='172' WIDTH='242' AUTOSTART='TRUE'>";
newSource+="</OBJECT>";
if(is.ie)
{
realDiv.innerHTML = newSource;
document.all.realDiv.style.visibility = "visible";
}
else if(is.ns && os.win)
{
document.realDiv.document.write(newSource);
document.realDiv.document.close();
document.realStatDiv.visibility = "show";
document.realDiv.visibility = "show";
setTimeout("hideFlash()",2000);
}
else if(is.ns && os.mac)
{
document.realDiv.document.write(newSource);
document.realDiv.document.close();
document.realDiv.visibility = "show";
}
}
//Function to stop playing Real movie and hide Real movie layer/div
//and resume playing Flash movie.
function stopHide()
{
if(is.ie)
{
document.all.realDiv.style.visibility = "hidden";
document.all.video1.DoStop();
document.all.layertest.TPlay("_level1/gal_total/gal_fade");
}
else if(is.ns && os.win)
{
document.flashDiv.visibility = "show";
document.realStatDiv.visibility = "hide";
document.realDiv.visibility = "hide";
document.realDiv.document.embeds[0].DoStop();
document.flashDiv.document.embeds[0].TPlay("_level1/gal_total/gal_fade");
}
else if(is.ns && os.mac)
{
document.realDiv.visibility = "hide";
document.realDiv.document.embeds[0].DoStop();
document.flashDiv.document.embeds[0].TPlay("_level1/gal_total/gal_fade");
}
}
//Function to show QuicktimeVR layer/div
function showQtvr()
{
var vrSource="<embed src='Pomegranit_tour.mov' ";
vrSource+="controller='true' ";
vrSource+="PLUGINSPAGE='http://quicktime.apple.com' ";
vrSource+="height='195' width='240'>";
if(is.ie)
{
qtvrDiv.innerHTML = vrSource;
document.all.qtvrDiv.style.visibility = "visible";
}
else if(is.ns)
{
document.qtvrDiv.document.open();
document.qtvrDiv.document.write(vrSource);
document.qtvrDiv.document.close();
document.qtvrStatDiv.visibility = "show";
document.qtvrDiv.visibility = "show";
setTimeout("hideFlash()",2000);
}
}
//Function to hide QuicktimeVR layer/div and resume playing Flash movie
function hideQtvr()
{
if(is.ie)
{
document.all.qtvrDiv.style.visibility = "hidden";
document.all.layertest.TPlay("_level1");
qtvrDiv.innerHTML = "";
}
else if(is.ns)
{
document.flashDiv.visibility = "show";
document.qtvrDiv.visibility = "hide";
document.qtvrStatDiv.visibility = "hide";
document.flashDiv.document.embeds[0].TPlay("_level1");
document.qtvrDiv.document.open();
document.qtvrDiv.document.write("");
document.qtvrDiv.document.close();
}
}
//Function to hide Flash layer in Netscape
//Used with SetTimeout method to help with smooth transfer from Flash background to imagemap
function hideFlash()
{
if(is.ns)
{
document.flashDiv.visibility = "hide";
}
}
// -->
</script>
</head>
<body bgcolor=#FF0000 topmargin="0" leftmargin="0">
<script language="JavaScript">
<!--
//Dynamically write source for page.
document.write(source);
if(is.ns)
{
document.close();
}
// -->
</script>
</body>
</html>
-
Hi,
The QuickTime and Real Media are not embedded in the Flash at all. They are simply inside DHTML layers, along with the Flash movie itself.
Basically you can think of them all as separate components on the page, which can be shown or hidden as required. The Flash movie is calling JavaScript which will show or hide the layers accordingly.
It is possible to import QuickTime movies into Flash, although all sounds will be lost unless it is re-exported as a QuickTime movie.
It is a really cool site though and some excellent code! You could probably achieve a similar thing using Dreamweaver, although it would probably need some tweeking to work on all platforms/browsers.
Good luck,
Danny
-
Thanks!!!
So DHTML? I need to learn it!
Is there someone who knows the browser which browsers/ versions won't work with this?
thanks again, great info!
