movieplayers embedded in Flash ,simulation HOW?

tputtemans · 10-10-2001, 07:38 PM

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>

<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

27CDB6E-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">

</script>
</body>
</html>

dannygray · 10-11-2001, 06:18 AM

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

tputtemans · 10-11-2001, 11:41 AM

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!

10-10-2001, 07:38 PM	#1
tputtemans Member Join Date: Nov 2000 Posts: 68	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='clsid27CDB6E-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>

10-11-2001, 11:41 AM	#3
tputtemans Member Join Date: Nov 2000 Posts: 68	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!

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

10-11-2001, 06:18 AM	#2
dannygray Member Join Date: Jul 2001 Posts: 37	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