Tutorial: Embedding FPP panoramas in another Flash container (Embed Pano 101) [Archive]

cheathamlane

08-22-2008, 02:47 AM

OK!

So, you want to make a Flash container with all your own graphics and buttons and load your Flash Panorama Player presentation into it? Here you go... a quick "embed pano 101".

What you'll end up with is a "skinned" player which displays your FPP panorama with an irregular outline (not a rectangle!) -- including buttons to load panoramas, buttons to pan/tilt/zoom, and a button to "go fullscreen".

Topping it all off you'll be able to go fullscreen and leave some of your buttons & graphics behind, then leave fullscreen and get your buttons back. This allows you to display what you want when you want it. The FPP XML in this example will show some thumbnails in fullscreen, which display larger photos.

As a bonus in this example, we will load lower resolution panoramas into the player when not in fullscreen; then, when going fullscreen, we will load higher resolution panoramas. Once loaded, these higher resolution panoramas will stay in the cache and be seen in fullscreen and not fullscreen. So, there's a lot packed into this 'little' example!

I'll go through the basics of setting up the project and go through the Actionscript code line-by-line. At the end of this post you'll find all the Actionscript in one block for easy copying. Note that I used the "embedPano.fla" which comes with Flash Panorama Player as a starting point, so you can also find that in your FPP download and use it as reference. The code for going fullscreen and back was informed by Denis of FPP fame and others in the forums, and the "go fullscreen" button is from the FPP download.

This tutorial assumes you're using Flash CS3 or newer, Actionscript 3, and have a basic knowledge of creating and placing MovieClips, buttons, graphics, etc. onto the pasteboard in a Flash CS3 doc. Advanced users can pull MovieClips and other items directly from the Library and so on.

Read the rest of the tutorial at:
http://flashpanos.com/tutorials/patrick/embedding-fpp-panoramas-another-flash-container

squ

08-22-2008, 12:03 PM

Patric, you should know, that at least one person - me is spending hours on it (probably more time that it took you to write).

Patric, I need a little help

I don't like cubes
I set up panoType=mov in _setup.xml
the first pano loads and works perfect, but when I want to change the pano flash says: "Tile loading failed" - it looks like the code wants to load cubes instad of mov file

what to do?

AS3 is totally different from AS2 - it will take me long to learn it

thanks

cheathamlane

08-22-2008, 02:03 PM

I set up panoType=mov in _setup.xml
the first pano loads and works perfect, but when I want to change the pano flash says: "Tile loading failed" - it looks like the code wants to load cubes instad of mov file

Hi squ:

Hmmm.... Sounds possibly like an XML issue. Do you have a link to your example?

AS3 is totally different from AS2 - it will take me long to learn it

It is a leap from one to the other, and I painfully went through it. ;) It's totally worth it!

Cheers,

Patrick

squ

08-22-2008, 02:58 PM

Hi Patric,

thanks for you quick unswer

yes, I made files for you to look at

first (top) view1 working
second from top view1 working

mov starts but they do not change then make some errors in flash

I noticed the same in embedPano.html in the tutorial were I nearly called panorama from AS2, but I used mov files and they got stuck

the funny thing is that, when using stripes all seems to be fine, you don't need to use cubes, I think there is something wrong with the plugins or the fluch needs to remove first mov to be able to upload unother one (I don't know how to do it, I have been playing with AS3 10 hours so far)

any help appreciated

thanks

Darek

cheathamlane

08-22-2008, 03:52 PM

Hi Darek:

I'm getting this error when I try to load the second panorama:

Warning: Not a known player download type, http://lookdigital.pl/zamek/fl_files/movDecoder.swf
Tile loading failed

I think the issue may be as simple as changing the below line(s) from the tutorial:

(from)

panorama.externals.hotspots.loadPano(["pano.swf?panoName="+thePanoToLoad]);
//or
panorama.loadPanorama("pano.swf?panoName="+thePanoToLoad);

(to)

panorama.externals.hotspots.loadPano(["pano.swf?panoName="+thePanoToLoad+"&panoType=mov"]);
//or
panorama.loadPanorama("pano.swf?panoName="+thePanoToLoad+"&panoType=mov");

That is, anywhere you're doing a "loadPano" in the embedPano SWF, declare the panoType as well.

Let me know!

Cheers,

Patrick

squ

08-22-2008, 04:34 PM

Thanks Patric,
I already tried it by adding another xml file or so
now, I changes the lines you mentioned and the type of panorama is added in the code

I bet you get the same error

unfortunately - it doesn't work

would you have any more ideas?

thanks

Darek

cheathamlane

08-22-2008, 04:44 PM

Hi Darek:

I see this error too:

PNG image codec is not supported!

Do you have hotspots in your QTVR? I bet the movDecoder is choking on the hotspots.

--
It sounds like a MOV or movDecoder issue, rather than an issue with the embedPano SWF (especially if you have the panoType put properly in your Actionscript).

?

Cheers,

Patrick

squ

08-22-2008, 04:57 PM

Patrick,

yes, PNG image codec is not supported! - probably comes from mov hot spots
I changed the files - no hot spots in quick time files

still the same, I think the error comes from movDecoder.swf, whitch should first be unloaded then loaded again for a new pano

well, this is all my ideas, this is not the first time I see this error, it is like the movDecoder.swf just didn't work properly

jpg files load properly

see the link again, please

Darek

cheathamlane

08-22-2008, 05:19 PM

Hi Darek:

Weird!

Is your XML file a complete one (with a <pano> element too)?

The only other thing I can think of is that the codec used for your MOV files is "exotic"; or that you have a sprite or something in there (autorotate sprite or similar); or that the QT headers are compressed?

Just fishing here... :)

If we think it is the movDecoder or FPP, maybe make a new thread with the question so others will see it.

Cheers,

Patrick

squ

08-22-2008, 05:52 PM

Patrick,

you are very kind helping

Patrick, if you don't mind spending with me a little more time
here is the rar file
maybe when you see what I have done, you will also see what is wrong

thanks

Darek

cheathamlane

08-22-2008, 07:41 PM

Hi Darek:

Hit me up off list and I'll email you the fixed files.

I completely redid the HTML for the Web page, because it was really, really incorrect. If that was the auto-generated HTML from Flash, there is some sort of problem with it.

I made some minor tweaks to your Actionscript; this probably wasn't an issue, but there you go.

I also replaced the hotspots.swf and movDecoder.swf files with the copies that I use (which have newer file dates for some reason)... and voila! things worked. :)

Cheers,

Patrick

(cheathamlane at gmail.com)

squ

08-23-2008, 10:52 AM

For all who read this
problem with movDecoder.swf is that I used a version in FPP_v2.2.1_\examples\files\movDecoder.swf (it is 7,97 KB) - this movDecoder.swf has errors when switching between panoramas within the same flash movie (works ok if you change html page)

the right movDecoder.swf is in the FPP_v2.2.1_\plugins folder (it is 8,12 KB)

-------------------
about the tutorial

it is great! I went step by step through it, and finally made it work
the funny thing is that AS3 needs all stated in script data, movies, buttons etc (it is diffrent from AS2)

Patrick, mail sent, I will be happy to see the corrected files

thanks a lot for the tutorial and help

squ

08-25-2008, 06:34 PM

I got the files from Patrick (thanks a lot Patrick!)

when I first wanted to build my own presentation while reading his tutorial I opened a few files from his working examples, the corrected files are a bit different than the files in the working example
1)
his starting html page - Patricj corrected it making it a standard one from like one from the package: FPP_v2.2.1_\examples

<html>
<head><title>Sample
</title>
<style>

</style>
<script type="text/javascript" src="fl_files/swfobject.js"></script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div id="flashcontent">
<h3 align="center">We have detected that your Flash Player is either missing or not fully up to date.</h3>
<h3 align="center">For the best viewing experience please click on the icon below to install <a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Adobe's Latest Flash Player</a>.</h3><br />
</div>

<script type="text/javascript">
var so = new SWFObject("index.swf", "pano", "900", "450", "9", "#FFFFFF");
so.addParam("allowFullScreen","true");
so.addParam("allowScriptAccess","sameDomain");
so.write("flashcontent");
window.document["pano"].focus();
</script>
</body>
</html>

2) and he corrected a few lines in the fla file
I already added a few more things while playing with it - the full code is as follows:

squ

08-25-2008, 06:35 PM

import flash.display.Loader;
import flash.display.LoaderInfo;
import flash.display.Sprite;
import flash.events.*;
import flash.net.URLRequest;
import fl.transitions.Tween;
import fl.transitions.*;
import fl.transitions.easing.*;

var panorama:MovieClip;
var loader:Loader = new Loader();
loader.load(new URLRequest("fl_files/pano.swf"));
addChild(loader);

loader.contentLoaderInfo.addEventListener(Event.CO MPLETE, loadComplete);
//
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
//
var thePanoToLoad = "panos/pano_1";
var theCurrentPano = "1";
//
full_btn.visible = false;
left_sidebar.view1.alpha = left_sidebar.view2.alpha = left_sidebar.view3.alpha = left_sidebar.view4.alpha = left_sidebar.view5.alpha = left_sidebar.view6.alpha = 0.5;
but_1.visible = but_2.visible = false;
//
var theBL:int = 0;
var theBT:int = 0;
var thePL:int = 0;
//
function loadComplete(e:Event) {
swapChildren(loader, full_btn);
panorama = loader.content as MovieClip;
panorama.mask = theMask;
panorama.setArea(150,20,570,580);

panorama.loadPanorama("panoName="+thePanoToLoad+"&xml_file=panos/_setup.xml&panoType=mov&zoomHome=0.1");
//panorama.loadPanorama("panoName="+thePanoToLoad+"&panoType=mov&xml_file=panos/_setup.xml");
left.addEventListener(MouseEvent.MOUSE_DOWN, doLeft);
right.addEventListener(MouseEvent.MOUSE_DOWN, doRight);
up.addEventListener(MouseEvent.MOUSE_DOWN, doUp);
down.addEventListener(MouseEvent.MOUSE_DOWN, doDown);
zoomin.addEventListener(MouseEvent.MOUSE_DOWN, doZoomin);
zoomout.addEventListener(MouseEvent.MOUSE_DOWN, doZoomout);
stage.addEventListener(MouseEvent.MOUSE_UP, reset);

if (stage.hasOwnProperty("displayState")) {// check fullscreen feature is accessible or not
stage.addEventListener(FullScreenEvent.FULL_SCREEN , fullscreenHandler);
full_btn.addEventListener(MouseEvent.CLICK, doFullscreen);
} else {
full_btn.visible=false;
}
addEventListener(Event.ENTER_FRAME, panoLoadWatcher);
}
//
left_sidebar.view1.addEventListener(MouseEvent.CLI CK,loadPanoFunction);
left_sidebar.view2.addEventListener(MouseEvent.CLI CK,loadPanoFunction);
left_sidebar.view3.addEventListener(MouseEvent.CLI CK,loadPanoFunction);
left_sidebar.view4.addEventListener(MouseEvent.CLI CK,loadPanoFunction);
left_sidebar.view5.addEventListener(MouseEvent.CLI CK,loadPanoFunction);
left_sidebar.view6.addEventListener(MouseEvent.CLI CK,loadPanoFunction);

but_1.addEventListener(MouseEvent.CLICK,loadPanoFu nction);
but_2.addEventListener(MouseEvent.CLICK,loadPanoFu nction);
//
function loadPanoFunction(event:Event) {
var obj:Object=event.target;
var whichButton = obj.name;

switch (whichButton) {
case "view1" :
thePanoToLoad = "panos/pano_1&zoomHome=0.1";
theCurrentPano = "1";
break;
case "but_1" :
thePanoToLoad = "panos/pano_2&zoomHome=0.1";
theCurrentPano = "1";
break;
case "view2" :
thePanoToLoad = "panos/pano_3&zoomHome=0.1";
theCurrentPano = "2";
break;
case "but_2" :
thePanoToLoad = "panos/pano_4&zoomHome=0.1";
theCurrentPano = "1";
break;
case "view3" :
thePanoToLoad = "panos/small/pano_3/bracketed_1-flat";
theCurrentPano = "3";
break;
case "view4" :
thePanoToLoad = "panos/small/pano_4/_bracketed_1";
theCurrentPano = "4";
break;
case "view5" :
thePanoToLoad = "panos/small/pano_5/_bracketed_1a";
theCurrentPano = "5";
break;
case "view6" :
thePanoToLoad = "panos/small/pano_6/_bracketed_1";
theCurrentPano = "6";
break;
default :
thePanoToLoad = "panos/pano_1";
theCurrentPano = "1";
break;
}
/*if (panorama.pano.loadCompleted) {
if (panorama.externals.hotspots!=null) {
//panorama.externals.hotspots.loadPano(["pano.swf?panoName="+thePanoToLoad]);
} else {
panorama.pano.remove();
panorama.loadPanorama("pano.swf?panoName="+thePanoToLoad);
}
}*/

if (thePL == -1) {
if (panorama.externals.hotspots!=null) {
if (panorama.externals.hotspots.panoName == thePanoToLoad) {

} else {
// panorama.externals.hotspots.loadPano(["pano.swf?panoName="+thePanoToLoad+"&panoType=mov"]);
panorama.externals.hotspots.loadPano(["panoName="+thePanoToLoad+"&panoType=mov"]);
addEventListener(Event.ENTER_FRAME, panoLoadWatcher);
}
} else {
panorama.pano.remove();
panorama.loadPanorama("panoName="+thePanoToLoad+"&panoType=mov");
//panorama.loadPanorama("pano.swf?panoName="+thePanoToLoad+"&panoType=mov");
}
}
}
//
function doLeft(e:Event) {
panorama.pano.panKey = -1;
}
function doRight(e:Event) {
panorama.pano.panKey = 1;
}
function doUp(e:Event) {
panorama.pano.tiltKey = 1;
}
function doDown(e:Event) {
panorama.pano.tiltKey = -1;
}
function doZoomin(e:Event) {
panorama.pano.zoomKey = 1;
}
function doZoomout(e:Event) {
panorama.pano.zoomKey = -1;
}
function reset(e:Event) {
panorama.pano.panKey = 0;
panorama.pano.tiltKey = 0;
panorama.pano.zoomKey = 0;
}
//
function doFullscreen(e:Event) {
if (stage.hasOwnProperty("displayState")) {
if (stage.displayState == StageDisplayState.FULL_SCREEN) {
stage.displayState = StageDisplayState.NORMAL;
} else {
stage.displayState = StageDisplayState.FULL_SCREEN;
switch (theCurrentPano) {
case "1" :
thePanoToLoad = "panos/pano_2&zoomHome=0.1";
break;
case "2" :
thePanoToLoad = "panos/pano_3&zoomHome=0.1";
break;
case "3" :
thePanoToLoad = "panos/large/pano_4/pano_3";
break;
case "4" :
thePanoToLoad = "panos/large/pano_5/pano_4";
break;
case "5" :
thePanoToLoad = "panos/large/pano_5/pano_5";
break;
case "6" :
thePanoToLoad = "panos/large/pano_6/pano_6";
break;
default :
thePanoToLoad = "panos/pano_2";
break;
}
if (thePL == -1) {
if (panorama.externals.hotspots!=null) {
if (panorama.externals.hotspots.panoName == thePanoToLoad) {

} else {
panorama.externals.hotspots.loadPano(["pano.swf?panoName="+thePanoToLoad]);
addEventListener(Event.ENTER_FRAME, panoLoadWatcher);
}
} else {
panorama.pano.remove();
panorama.loadPanorama("pano.swf?panoName="+thePanoToLoad);
addEventListener(Event.ENTER_FRAME, panoLoadWatcher);
}
}
}
}
}

squ

08-25-2008, 06:35 PM