Embedding in Flex 2

[miplap]

Hi,
I was just wondering if anyone had an example of how to embed FPP into a Flex application.
I presume that I can use the SWFObject control but am not sure if there's anything else I should be doing.
Cheers
Mark

[Denis]

Flash Panorama Player 2.0 can loaded inside a Flex application as an external movie (with full control of the redrawing area, and access to rotation functions).

[miplap]

Hi,
Could you provide an example of usage with Flex 2? I have not figured out how to import the Panorama player into my project.
I'm also not sure what you mean by an external movie.
Cheers
Mark

[Denis]

You can't import it for now, so there is no Flex component with Flash Panorama Player (possible later), you can only load it as an external movie.

Check embedPano.fla example in FPP examples folder, you can reuse this code by creating "Flex actionscript project".

[behrda]

I think about loading FPP with the swfLoader of Flex in my Flex-App. is it possible to scale the FPP and how?
and which parameter I can controll with the Flex-App(for example the pan Parameter?)
Thanks Dario

[Denis]

Yes. The player has public setArea(r:Rectangle) function to set the drawing area.
Check embedPano.fla example (you need at least Flash 8 trial to read it).

[behrda]

Okay thanks, but in Flash 8 you can`t run this .fla(I understand because of AS2 instead of AS3).
But when I copy the AS3 code from you embedPano.fla in my Flex.mxml like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
var panorama:MovieClip;
var loader:Loader = new Loader();
loader.load(new URLRequest("files/pano.swf"));
addChild(loader);

loader.contentLoaderInfo.addEventListener(Event.CO MPLETE, loadComplete);

function loadComplete (e:Event) {
swapChildren(loader, border);
panorama = loader.content;
panorama.setArea(100,50,400,300);
panorama.loadPanorama("pano.swf?panoName=images/snow");
// variants:
//panorama.loadPanorama("myPano.swf"); //load myPano.swf
//panorama.loadPanorama("myPano.swf?segments=10&pan=100"); //load myPano.swf with custom params
//panorama.loadPanorama("myPano.swf?xml_file=&"); //load myPano.swf without myPano.xml file
//panorama.loadPanorama("myPano.swf?xml_file=my.xml"); //load myPano.swf with custom xml file

left_btn.addEventListener(MouseEvent.MOUSE_DOWN, doLeft);
right_btn.addEventListener(MouseEvent.MOUSE_DOWN, doRight);
up_btn.addEventListener(MouseEvent.MOUSE_DOWN, doUp);
down_btn.addEventListener(MouseEvent.MOUSE_DOWN, doDown);
stage.addEventListener(MouseEvent.MOUSE_UP, reset);

pano1_btn.addEventListener(MouseEvent.CLICK, doPano1);
pano2_btn.addEventListener(MouseEvent.CLICK, doPano2);
}

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 reset (e:Event) {
panorama.pano.panKey = 0;
panorama.pano.tiltKey = 0;
}
function doPano1 (e:Event) {
if (panorama.pano.loadCompleted) {
panorama.pano.remove();
panorama.loadPanorama("pano.swf?panoName=images/nature");
}
}
function doPano2 (e:Event) {
if (panorama.pano.loadCompleted) {
panorama.pano.remove();
panorama.loadPanorama("pano.swf?panoName=images/snow");
}
}
]]>
</mx:Script>
</mx:Application>

it also don`t run because of the Loader class!
can anybody help me with this problem or post a running .mxml Code, how to embad FPP in an flex-app?
Thanks for help :D
salute Dario

[behrda]

and also if I load the pano.swf(here named natur.swf) via SWFLoader-Component in the flex app, like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:SWFLoader x="100" y="200" width="320" height="180" source="data/FFP_files/nature.swf" id="test" />

</mx:Application>

nothing happens in the browser...?[/code]

[Denis]

I told you, use "Flex Actoinscript project" instead of MXML project. And don't forget to import Loader and Event class.

I believe it is possible to mate Flash Panorama Player and mx package, but I did't investigate it yet. Ask some Flex professional.

[masu]

Hi there,

I have found a way to include the
FFP into Flex. Here is how:

Put some of the Actionscript code
from embedPano.fla into a Sprite:


package {
import flash.display.Loader ;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.Event;
import flash.net.URLRequest;

public class FlashPanoramaSprite extends Sprite
{
private var panorama:MovieClip;
private var loader:Loader = new Loader();

public function FlashPanoramaSprite()
{
loader.load(new URLRequest("pano/pano.swf"));
addChild(loader);

loader.contentLoaderInfo.addEventListener(Event.CO MPLETE, loadComplete);
}

private function loadComplete (e:Event) : void
{
panorama = loader.content as MovieClip;
panorama.setArea(100,50,400,300);

panorama.loadPanorama("panoName=images/snow");
}
}
}


To use it in Flex you need to add that
Sprite into a surrounding Flex-UIComponent:


<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml "
layout="absolute"
creationComplete="complete()"
>

<mx:Script>
<![CDATA[
import mx.core.UIComponent;

public function complete() : void
{
var sprite:FlashPanoramaSprite = new FlashPanoramaSprite();

var component:UIComponent = new UIComponent();
component.addChild(sprite);

addChild(component);
}

]]>
</mx:Script>

</mx:Application>


That's all ! No need to use
a "Flex Actionscript Project".

Have fun,
masu

[sethgitner]

does anyone have an example of a flashpano in flex?

please post a URL.

-sg

[jez_p]

Here's one using masu's code:

http://www.boxsounds.com/panos/flex_example/pano1.html

[miplap]

Masu,
This works a treat ... thanks.
Have you got any advice on how to add eventlisteners to allow for navigation controls?
The embedPano.fla uses these events to allow for this but I cannot figure how to add these to the FlashPanoramaSprite class extension.
Kind regards
Mark

[gpfvb]

This example works great but.... if i want to Call a panorama from a database? how do i do that?

I tried this code:


package
{
import flash.display.Loader ;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.Event;
import flash.net.URLRequest;

import samples.flexstore.Product;
import samples.flexstore.ProductThumbEvent;


public class FlashPanoramaSprite extends Sprite
{
private var panorama:MovieClip;
private var loader:Loader = new Loader();
private var _product:Product;

[Bindable]
public function get product():Product
{
return _product;
}

public function set product(p:Product):void
{
_product= p ;
}


public function FlashPanoramaSprite()
{
loader.load(new URLRequest("pano_files/pano.swf"));
addChild(loader);

loader.contentLoaderInfo.addEventListener(Event.CO MPLETE, loadComplete);
}

private function loadComplete (e:Event) : void
{
panorama = loader.content as MovieClip;
panorama.setArea(0,0,500,500);

panorama.loadPanorama ({product.panoramafile});
}
}
}


I tried several things but done work. Can someone help??
Thank you

[gpfvb]

anyone???? any ideas? no-? :confused:

[shwami]

Hey...

i read this thread and found precisely what i was looking for. but when i tried adding the fpp to my mxml application, it shows loading progress but the images never get displayed. i just added the pano.swf file with the images in the bin-debug folder as a temperory experiment.

also, i am assuming that it should be possible control the loading of the panoramas from the external menu written in mxml. right?

can anybody give suggestions/feedback on how this can be best done?

regards,
Siddharth

[shwami]

hey there,

i am trying to embed the fpp in a flex application. the app is able to read the xml and load the images. the preloader plugin shows the loader text as well but the pano does not show up at all and also the hotspots dont show up as well.

here is my code:

FPPSprite.as

package
{
import flash.display.Loader ;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.Event;
import flash.net.URLRequest;

public class FPPSprite extends Sprite
{
private var panorama:MovieClip;
private var loader:Loader = new Loader();

public function FPPSprite()
{
loader.load(new URLRequest("files/pano.swf"));
addChild(loader);

loader.contentLoaderInfo.addEventListener(Event.CO MPLETE, loadComplete);
}

private function loadComplete (e:Event) : void
{
panorama = loader.content as MovieClip;
panorama.setArea(0,0,1024,640);

panorama.loadPanorama("files/pano.swf?xml_file=files/xml/Regus_First_Cut.xml");
}

}
}


DropDownMenu.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="complete()">

<mx:Script>
<![CDATA[
import mx.core.UIComponent;

public function complete() : void
{
var sprite:FPPSprite = new FPPSprite();

var component:UIComponent = new UIComponent();
component.addChild(sprite);

addChild(component);
}

]]>
</mx:Script>

</mx:Application>


This is the activity log as shown by safari:

file:///Users/shwami/Downloads/DropDownMenu/bin-debug/DropDownMenu.html
about:blank
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/AC_OETags.js
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/DropDownMenu.html
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/DropDownMenu.swf
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/pano.swf
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/plugins/ffc_preloader.swf
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/plugins/ffc_tooltips.swf
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/plugins/hotspots.swf
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/BanquetHall_b.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/BanquetHall_d.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/BanquetHall_f.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/BanquetHall_l.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/BanquetHall_r.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/BanquetHall_u.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/BanquetLobby_b.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/BanquetLobby_d.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/BanquetLobby_f.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/BanquetLobby_l.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/BanquetLobby_r.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/BanquetLobby_u.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Cafe_b.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Cafe_d.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Cafe_f.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Cafe_l.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Cafe_r.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Cafe_u.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Conference_b.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Conference_d.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Conference_f.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Conference_l.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Conference_r.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Conference_u.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Jasmine_b.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Jasmine_d.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Jasmine_f.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Jasmine_l.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Jasmine_r.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Jasmine_u.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Lobby_b.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Lobby_d.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Lobby_f.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Lobby_l.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Lobby_r.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Lobby_u.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Lounge_b.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Lounge_d.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Lounge_f.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Lounge_l.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Lounge_r.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Lounge_u.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Office1_b.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Office1_d.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Office1_f.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Office1_l.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Office1_r.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Office1_u.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Office2_b.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Office2_d.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Office2_f.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Office2_l.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Office2_r.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Office2_u.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Office3_b.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Office3_d.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Office3_f.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Office3_l.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Office3_r.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Office3_u.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Orchid_b.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Orchid_d.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Orchid_f.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Orchid_l.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Orchid_r.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Orchid_u.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Passage2_b.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Passage2_d.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Passage2_f.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Passage2_l.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Passage2_r.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Passage2_u.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Polycom_b.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Polycom_d.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Polycom_f.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Polycom_l.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Polycom_r.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Polycom_u.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Reception_b.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Reception_d.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Reception_f.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Reception_l.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Reception_r.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/visualFiles/Reception_u.jpg
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/files/xml/Regus_First_Cut.xml
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/history/history.css
file:///Users/shwami/Downloads/DropDownMenu/bin-debug/history/history.js


please help me figure out why this is not working.

i am using flex builder 3.

regards,
Siddharth