as3+xml+lightwindow

[diggz]

hi all - really hope someone can sort me out with this question i have.

i am trying to get lightwindow to launch from my script in as3

i have some thumbnails that are generated via xml - and when clicked the thumbnail opens a url in a new window.

i want it to open in the lightwindow box instead.

this is the as that i have on my thumbnails

function p_click(me:MouseEvent)
{
var loader : Loader = new Loader ();
var request : URLRequest = new URLRequest ( "javascript : myLightWindow.activateWindow({href: 'wall.swf', title: 'lightwindow', author: 'anon', height: 480, width: 640});" );
loader . load ( request );
navigateToURL ( request , '_parent' );
}

but that doesn't seem to work - i am using this article (http://translate.google.com/translate?hl=en&sl=it&u=http://www.flepstudio.org/forum/flash-italiano/562-lightwindow-da-swf-con-as3.html&sa=X&oi=translate&resnum=10&ct=result&prev=/search%3Fq%3Das3%2Blightwindow%26num%3D100%26hl%3D en%26newwindow%3D1%26safe%3Doff%26sa%3DG) as my reference for what should go in the script for the button.

the script i used and it worked to open a url in a new window was


function p_click(me:MouseEvent)
{
var sp:Sprite = me.target as Sprite;
var s_no:Number = parseInt(sp.name.slice(8,10));
navigateToURL(new URLRequest(url_list[s_no]), url_target_list[s_no]);
}

that opens the url from the xml doc. this how the items in the xml look


<thumbnail filename="name_of_thumb.jpg" url="http://www.domainname.com/folder/item.mov" target="_blank"
title="Item title"
description="some text that shows up on thumbnail mouse over" />

i am really struggling with this - i have also dropped the swf into html doc for lightwindow (http://www.stickmanlabs.com/lightwindow/)
and the html links - open the lightwindow up perfectly but the swf doesn't want to know.

has anyone managed to get this working before? or know of good points of reference to make it work from a flash button/xml.

there is no support on the stickman site - lots of config info - but not for flash?

is it even possible in flash? anyone know?

in summary how do i trigger lightwindow from an as3 button???

[wvxvw]

javascript: pseudo protocol is deprecated, use ExternalInterface class instead. It would be better anyway to place the JavaScript you want to call into HTML page and call it from flash using ExternalInterface.call(<name of JS function>, argument1, argument2, ... argumentN)

[diggz]

hi wvxvw

...thanks for the reply and apologies for my delay - i didn't get any notification!

yes, i have heard that externalinterface.call is the way forward - but although i have read up via adobe and the other usual suspects i am still not getting anywhere!

how would i re-write my onclick command - i don't understand what the arguments should be?

function p_click(me:MouseEvent)
{
var loader : Loader = new Loader ();
var request : URLRequest = new URLRequest ( "javascript : myLightWindow.activateWindow({href: 'wall.swf', title: 'lightwindow', author: 'anon', height: 480, width: 640});" );
loader . load ( request );
navigateToURL ( request , '_parent' );
}

a simplified version of the project can be found here (getmeonthe.net/lightwindow.zip)

i understand that the call for the external interface is the command to trigger the js - but after that i am getting totally lost! :crying:

should i paste the main js content into my html doc? or can externalinterface call it up?

really hope you put me out of misery on this :angel:

[wvxvw]

var script:XML =
<script>
<![CDATA[
function()
{
myLightWindow.activateWindow({href: 'wall.swf',
title: 'lightwindow',
author: 'anon',
height: 480,
width: 640});
}
]]>
</script>;
function p_click(me:MouseEvent)
{
ExternalInterface.call(script);
}
See if it helps.

[diggz]

...thanks for the reply wvxvw - do i strip that into the onclick command?

i am pretty new to as3 - so i am not familiar with the various syntax that can be used.

how do i add that?

[diggz]

...also do i need to define the actual xml doc in the line

var script:XML =

this is my entire script from the .fla


/*


AS3 References and Credits
http://blog.papervision3d.org/
http://theflashblog.com/?p=306
http://www.gotoandlearn.com/
http://www.onerutter.com/
http://labs.blitzagency.com/
http://vilebody.wordpress.com/2007/11/29/3d-papervision-plane-events/
*/
import org.papervision3d.scenes.*;
import org.papervision3d.cameras.*;
import org.papervision3d.objects.*;
import org.papervision3d.materials.*;
import fl.transitions.Tween;
import fl.transitions.easing.*;
import flash.display.Sprite;
import flash.events.MouseEvent;


var container:Sprite = new Sprite();
container.x = 400;
container.y = 300;
addChild(container);

var scene:Scene3D = new MovieScene3D(container);
var cam:Camera3D = new Camera3D();
cam.zoom = 6;

tn_title.text = "";
tn_desc.text = "";
tn_url.text = "";

var p_dict:Dictionary=new Dictionary();
var pc:Plane = new Plane();
pc.visible = false;
cam.target = pc;

var numOfRotations:Number = 3;
var yPos:Number = 0;
var angle:Number = 0;

var filename_list = new Array();
var url_list = new Array();
var url_target_list:Array = new Array();
var title_list = new Array();
var description_list = new Array();
var folder:String = "thumbnails/";

var i:Number;
var j:Number = 0;
var k:Number = 0;
var l:Number = 0;
var m:Number = 0;
var total:Number;
var flashmo_xml:XML = new XML();
var loader:URLLoader = new URLLoader();
loader.load(new URLRequest("thumbnail_list_3.xml"));
loader.addEventListener(Event.COMPLETE, create_thumbnail);

function create_thumbnail(e:Event):void
{
flashmo_xml = XML(e.target.data);
total = flashmo_xml.thumbnail.length();
var anglePer:Number = ((Math.PI*2) * numOfRotations) / total;

for( i = 0; i < total; i++ )
{
url_list.push( flashmo_xml.thumbnail[i].@url.toString() );
url_target_list.push( flashmo_xml.thumbnail[i].@target.toString() );
title_list.push( flashmo_xml.thumbnail[i].@title.toString() );
description_list.push( flashmo_xml.thumbnail[i].@description.toString() );

var bfm:BitmapFileMaterial = new BitmapFileMaterial(
folder + flashmo_xml.thumbnail[i].@filename.toString());
bfm.oneSide = false;
bfm.smooth = true;
var p:Plane = new Plane(bfm, 140, 105, 2, 2);
scene.addChild(p);
var p_container:Sprite = p.container;
p_container.name = "flashmo_" + i;
p_dict[p_container] = p;
p_container.buttonMode = true;
p_container.addEventListener( MouseEvent.ROLL_OVER, p_rollover );
p_container.addEventListener( MouseEvent.ROLL_OUT, p_rollout );
p_container.addEventListener( MouseEvent.CLICK, p_click );

p.rotationY = (-i*anglePer) * (180/Math.PI) + 90;
p.x = Math.cos(i * anglePer) * 480;
p.z = Math.sin(i * anglePer) * 480;
p.y = yPos;

if( (i+1) % 20 == 0 )
{
yPos += 115;
}
}
}

function p_rollover(me:MouseEvent)
{
var sp:Sprite = me.target as Sprite;
var tw:Tween = new Tween(sp, 'alpha', Strong.easeOut, 1, 0.5, 0.6, true);
var s_no:Number = parseInt(sp.name.slice(8,10));
tn_title.text = title_list[s_no];
tn_desc.text = description_list[s_no];
tn_url.text = url_list[s_no];
}
function p_rollout(me:MouseEvent)
{
var sp:Sprite = me.target as Sprite;
var tw:Tween = new Tween(sp, 'alpha', Strong.easeOut, 0.5, 1, 0.6, true);
tn_title.text = "";
tn_desc.text = "";
tn_url.text = "";
}
function p_click(me:MouseEvent)
{
var sp:Sprite = me.target as Sprite;
var s_no:Number = parseInt(sp.name.slice(8,10));
navigateToURL(req, url_target_list[s_no]);
}

addEventListener(Event.ENTER_FRAME, render);

function render(e:Event):void
{
var dist2:Number = ((stage.mouseX) - 400) * 0.0001;
angle += dist2;
cam.x = - Math.cos(angle) * 150;
cam.z = Math.sin(angle) * 150;
var new_zoom = 5;
cam.zoom += ( new_zoom - cam.zoom ) * 0.06;
scene.renderCamera(cam);
}

[wvxvw]

I use XML because I don't want to escape / unescape strings when passing them to JavaScript. That should be just more convenient...
Considering my previous example:
if the p_click is a listener that listens to the click event of some button, then, my code should work.

[diggz]

....you genius!!!!
***begins little dance around the room***


it does work!!! lightwindow ahoy!!!!

i am not seeing the actual .mov in the windows box - but it does indeed open the lightwindow
:sen:

any idea how to get the .mov in there?

nice one though - been trying to suss that for tooooo long!

***raises two upturned thumbs at screen***

[diggz]

...if i add...


function p_click(me:MouseEvent)
{
ExternalInterface.call(script);
var sp:Sprite = me.target as Sprite;
var s_no:Number = parseInt(sp.name.slice(8,10));
navigateToURL(new URLRequest(url_list[s_no]), url_target_list[s_no]);
}

it starts to open the lightwindow but then opens the url defined by the xml
is it the onclick or the js call that is in need of looking at?


var script:XML =
<script>
<![CDATA[
function()
{
myLightWindow.activateWindow({href: 'wall.swf',
title: 'lightwindow',
author: 'anon',
height: 480,
width: 640});
}
]]>
</script>;


i am thinking it is something to do with the line

myLightWindow.activateWindow({href: 'wall.swf',


but am i supposed to define the xml or the html or...

[diggz]

...anybody able to tell me how i go about making this line
myLightWindow.activateWindow({href: 'wall.swf',


into a reference to the url in the xml doc?

i have tried a number of things none of which seem to do it - absolute href is working fine but not the xml defined url?????

[diggz]

this is the line that works and opens the url in a new window

navigateToURL(new URLRequest(url_list[s_no]), url_target_list[s_no]);


what bits of this do i need? i have tried lots of combinations - but to no avail?

[wvxvw]

var script:XML =
<script>
<![CDATA[
function()
{
myLightWindow.activateWindow({href: '%url%',
title: 'lightwindow',
author: 'anon',
height: 480,
width: 640});
}
]]>
</script>;
var url:String = "http://www.example.com";
function p_click(me:MouseEvent)
{
ExternalInterface.call(String(script).replace("%url%", url));
}
But I really don't know what LightWindow does...

[diggz]

...okay - so this is working now like this:


var script:XML =
<script>
<![CDATA[
function(url)
{
myLightWindow.activateWindow({href: url,
title: 'lightwindow',
caption: 'some text about the item displayed',
height: 300,
width: 450});
}
]]>
</script>;

function p_click(me:MouseEvent)
{
var sp:Sprite = me.target as Sprite;
var s_no:Number = parseInt(sp.name.slice(8,10));
ExternalInterface.call(script, url_list[s_no]);
}

the code above brings in the xml defined url to the lightwindow.
but what i am trying to work out now is how to include the xml defined title and description to the lightwindow panel. in the code above the title is selfnamed and the description is defined as caption.

in my script for the main fla the title and description appear in text fields on rollover.
they are defined/declared by these lines:


function p_rollover(me:MouseEvent)
{
var sp:Sprite = me.target as Sprite;
var tw:Tween = new Tween(sp, 'alpha', Strong.easeOut, 1, 0.5, 0.6, true);
var s_no:Number = parseInt(sp.name.slice(8,10));
tn_title.text = title_list[s_no];
tn_desc.text = description_list[s_no];
tn_url.text = url_list[s_no];
}


how can i include the title and description into the params of the lightwindow?

my xml items are written like so:


<thumbnail filename="thumb_01.jpg" url="gallery/fische01.mov" target="_blank"
title="Item No. or title"
description="description of this thumbnail image and associated file" />

i have tried stripping in what I thought might work but, alas, it just stopped it working or appeared as the content rather than pushing the xml data into the param????

do i need to write new functions to include or just rewrite the params - or both!
:-/

[diggz]

i did first think that this might do it

var script:XML =
<script>
<![CDATA[
function(url)
{
myLightWindow.activateWindow({href: url,
title: title_list,
caption: description_list,
height: 300,
width: 450});
}
]]>
</script>;

function p_click(me:MouseEvent)
{
var sp:Sprite = me.target as Sprite;
var s_no:Number = parseInt(sp.name.slice(8,10));
ExternalInterface.call(script, url_list[s_no], title_list[s_no], description_list[s_no]);
}

but it just stops the lightwindow opening so, obviously what i am doing is not allowed!:hangover:

[wvxvw]

Imagine that whatever you have in CDATA section is just a string that will be later evaluated by JavaScript eval() to a function that you want to execute, but it's not a function itself. This means that you have to simply replace the arguments / content of the function with your arguments.
See the example:

var url:String = "http://www.example.com";
var title:String = "Here goes my title";
var description:String = "Here goes my description";
var script:XML =
<script>
<![CDATA[function(){myLightWindow.activateWindow({href:"]]>
{url}
<![CDATA[",title:"]]>
{title}
<![CDATA[",caption:"]]>
{description}
<![CDATA[",height: 300,width: 450});}]]>
</script>;
trace(script.text());
function p_click(me:MouseEvent)
{
ExternalInterface.call(String(script.text()));
}

[diggz]

thanks for your continued help ;) really appreciate it

...this doesn't work, but am i in the right direction?



var url:String = "url_list[s_no]";
var title:String = "title_list[s_no]";
var description:String = "description_list[s_no]";
var script:XML =
<script>
<![CDATA[function(){myLightWindow.activateWindow({href:"]]>
{url}
<![CDATA[",title:"]]>
{title}
<![CDATA[",caption:"]]>
{description}
<![CDATA[",height: 300,width: 450});}]]>
</script>;
trace(script.text());
function p_click(me:MouseEvent)
{
ExternalInterface.call(String(script.text()));
}

[wvxvw]

Are there any variables in JavaScript by the names:
url_lis, title_list, description_list and s_no? If not, where you're trying to get them from?

function p_click(me:MouseEvent)
{
ExternalInterface.call(makeScriptString("http://www.example.com",
"Here goes my title",
"Here goes my description"));
}

function makeScriptString(windowURL:String,
windowTitle:String,
windowDescription:String):String
{
var script:XML =
<script>
<![CDATA[function(){myLightWindow.activateWindow({href:"]]>
{windowURL}
<![CDATA[",title:"]]>
{windowTitle}
<![CDATA[",caption:"]]>
{windowDescription}
<![CDATA[",height: 300,width: 450});}]]>
</script>;
return String(script.text());
}
Does this clarify anything to you?

[diggz]

...yes, yes, i am getting it but not quite 100%! - i understand the script - apart from this

ExternalInterface.call(makeScriptString("http://www.example.com",
"Here goes my title",
"Here goes my description"));
}
i don't get what the refs should be?! am i supposed to enter the url to the xml file? just to the main url? or something else all together?:wt:

[diggz]

this is where the actual xml is defined - is this my missing link?


var flashmo_xml:XML = new XML();
var loader:URLLoader = new URLLoader();
loader.load(new URLRequest("thumbnail_list_3.xml"));
loader.addEventListener(Event.COMPLETE, create_thumbnail);

function create_thumbnail(e:Event):void
{
flashmo_xml = XML(e.target.data);
total = flashmo_xml.thumbnail.length();
var anglePer:Number = ((Math.PI*2) * numOfRotations) / total;

for( i = 0; i < total; i++ )
{
url_list.push( flashmo_xml.thumbnail[i].@url.toString() );
url_target_list.push( flashmo_xml.thumbnail[i].@target.toString() );
title_list.push( flashmo_xml.thumbnail[i].@title.toString() );
description_list.push( flashmo_xml.thumbnail[i].@description.toString() );

var bfm:BitmapFileMaterial = new BitmapFileMaterial(
folder + flashmo_xml.thumbnail[i].@filename.toString());
bfm.oneSide = false;
bfm.smooth = true;
var p:Plane = new Plane(bfm, 140, 105, 2, 2);
scene.addChild(p);
var p_container:Sprite = p.container;
p_container.name = "flashmo_" + i;
p_dict[p_container] = p;
p_container.buttonMode = true;
p_container.addEventListener( MouseEvent.ROLL_OVER, p_rollover );
p_container.addEventListener( MouseEvent.ROLL_OUT, p_rollout );
p_container.addEventListener( MouseEvent.CLICK, p_click );

p.rotationY = (-i*anglePer) * (180/Math.PI) + 90;
p.x = Math.cos(i * anglePer) * 480;
p.z = Math.sin(i * anglePer) * 480;
p.y = yPos;

if( (i+1) % 20 == 0 )
{
yPos += 115;
}
}
}

[diggz]

...sussed!!!


var script:XML =
<script>
<![CDATA[
function(url, description_list)
{
myLightWindow.activateWindow({href: url,
caption: description_list,
author: 'anon',
height: 300,
width: 450});
}
]]>
</script>;

function p_click(me:MouseEvent)
{
var sp:Sprite = me.target as Sprite;
var s_no:Number = parseInt(sp.name.slice(8,10));
ExternalInterface.call(script, url_list[s_no], description_list[s_no]);
}
:hugegrin:

[wvxvw]

var folder:String = "";
var urls:Array = [];
var targets:Array = [];
var descriptions:Array = [];
var titles:Array = [];
var containers:Object = {};
var yPos:int;
var flashmo:XML;
var loader:URLLoader = new URLLoader();
loader.load(new URLRequest("thumbnail_list_3.xml"));
loader.addEventListener(Event.COMPLETE, completeHandler);

function completeHandler(event:Event):void
{
flashmo = XML(event.target.data);
var anglePer:Number = ((Math.PI * 2) * numOfRotations) /
flashmo.thumbnail.length();
flashmo.thumbnail.(buildPVDStuff(valueOf(), clidIndex()));
}

function buildPVDStuff(xml:XML, index:int):void
{
urls.push(xml.@url.toString());
targets.push(xml.@target.toString());
titles.push(xml.@title.toString());
descriptions.push(xml.@description.toString());

var bfm:BitmapFileMaterial = new BitmapFileMaterial(
folder + xml.@filename.toString());
bfm.oneSide = false;
bfm.smooth = true;
var plane:Plane = new Plane(bfm, 140, 105, 2, 2);
scene.addChild(plane);
var container:Sprite = plane.container;
containers[xml.@url.toString()] = container;
containers.buttonMode = true;
containers.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
containers.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
containers.addEventListener(MouseEvent.CLICK, clickHandler);

plane.rotationY = (-index * anglePer) * (180 / Math.PI) + 90;
plane.x = Math.cos(index * anglePer) * 480;
plane.z = Math.sin(index * anglePer) * 480;
plane.y = yPos;

if (!((index + 1) % 20)) yPos += 115;
}

function clickHandler(event:MouseEvent):void
{
var position:int;
for (var p:String in containers)
{
if (containers[p] == event.currentTarget)
{
position = urls.indexOf(p);
ExternalInterface.call(makeScriptString(p,
titles[position],
descriptions[position]));
}
}
}

function makeScriptString(windowURL:String,
windowTitle:String,
windowDescription:String):String
{
var script:XML =
<script>
<![CDATA[function(){myLightWindow.activateWindow({href:"]]>
{windowURL}
<![CDATA[",title:"]]>
{windowTitle}
<![CDATA[",caption:"]]>
{windowDescription}
<![CDATA[",height: 300,width: 450});}]]>
</script>;
return String(script.text());
}
See if it works for you... I haven't tried it, sorry, being to lazy to test it against PVD...

[diggz]

...all good! thanks a mill wvxvw ;)

[squarelight]

Thanks wxvxw!

I was able to figure out a similar problem through your documentation.