Problem with XML / ActionScript- adding media objects

XML - adding media objects

[galahad2]

I've managed to get a Flash spinning-carousel system working with images referenced in an external XML file. This is using the third of the carousel tutorials at www.gotoandlearn.com.

All well and good, but now I need to get these same images (which are coming up fine to work as links (e.g when click on, bring up popup windows). I've tried adding href= inside the image reference and even wrapping it in <a href..> but nothing seems to work.

Then as another version I need to actually replace them with media objects (e.g FLV files).

However it seems that the XML file doesn't work at all if I replace the image reference with a whole bundle of <object> code.

Any ideas on how I can proceed with this?

For reference, the ActionScript is:

import mx.utils.Delegate;

var numOfItems:Number;
var radiusX:Number = 300;
var radiusY:Number = 30;
var centerX:Number = Stage.width / 2;
var centerY:Number = Stage.height / 2;
var speed:Number = 0.03;
var perspective:Number = 250;
var home:MovieClip = this;

var tooltip:MovieClip = this.attachMovie("tooltip","tooltip",10000);
tooltip._alpha = 0;

var xml:XML = new XML();
xml.ignoreWhite = true;

xml.onLoad = function()
{
var nodes = this.firstChild.childNodes;
numOfItems = nodes.length;
for(var i=0;i<numOfItems;i++)
{
var t = home.attachMovie("item","item"+i,i+1);
t.angle = i * ((Math.PI*2)/numOfItems);
t.onEnterFrame = mover;
t.toolText = nodes[i].attributes.tooltip;
t.icon.inner.loadMovie(nodes[i].attributes.image);
t.r.inner.loadMovie(nodes[i].attributes.image);
t.icon.onRollOver = over;
t.icon.onRollOut = out;
t.icon.onRelease = released;
}
}

function over()
{
home.tooltip.tipText.text = this._parent.toolText;
home.tooltip._x = this._parent._x;
home.tooltip._y = this._parent._y - this._parent._height/2;
home.tooltip.onEnterFrame = Delegate.create(this,moveTip);
home.tooltip._alpha = 100;
}

function out()
{
delete home.tooltip.onEnterFrame;
home.tooltip._alpha = 0;
}

function released()
{
trace(this._parent.toolText);
}

function moveTip()
{
home.tooltip._x = this._parent._x;
home.tooltip._y = this._parent._y - this._parent._height/2;
}

xml.load("icons.xml");

function mover()
{
this._x = Math.cos(this.angle) * radiusX + centerX;
this._y = Math.sin(this.angle) * radiusY + centerY;
var s = (this._y - perspective) /(centerY+radiusY-perspective);
this._xscale = this._yscale = s*100;
this.angle += this._parent.speed;
this.swapDepths(Math.round(this._xscale) + 100);
}

this.onMouseMove = function()
{
speed = (this._xmouse-centerX)/4500;
}

The XML file is just this:

<icons>

<icon image="icon1.png" tooltip="Customer 1" />

<icon image="icon2.png" tooltip="Customer 2" />

<icon image="icon3.png" tooltip="Customer 3" />

<icon image="icon4.png" tooltip="Customer 4" />

</icons>

[httpwebwitch]

Firstly, I don't think you can add hyperlinking to something in Flash using <a href=""> like you do in HTML. Movie Clips have an "onRelease" event for that.

so - you're hoping to have a mixture of SWFs and PNGs in the same xml document, right? Don't put all the <object> code into the XML - you've got to stop thinking in HTML. Let Flash load the XML and create the appropriate objects (movie clips) to display the media.

<icons>
<icon image="icon1.png" tooltip="Customer 1" />
<icon image="swf1.swf" tooltip="Customer 2" />
<icon image="icon3.png" tooltip="Customer 3" />
<icon image="swf2.swf" tooltip="Customer 4" />
</icons>

You'll probably need at least one fork in your logic. You can check if "nodes[i].attributes.image" ends with ".swf" or else a known image extension (".png", ".jpg", etc), and handle the situation appropriately.

I am pretty sure you can import one SWF into another with loadMovie(). My actionscript skills are a little rusty from disuse...

[httpwebwitch]

oh - and though this problem straddles XML and Flash and I can certainly advise on good use of XML, you'll also be able to find some good advice over in the Flash and Shockwave [webmasterworld.com] forum where all the Flash gurus hang out.

[galahad2]

Ok, thanks- I'll check the code and see what I can do...

[galahad2]

I tried changing the code as follows (I actually need to have FLV files playing within the carousel items)

1. Replaced reference "image" with "video"

t.icon.inner.loadMovie(nodes[i].attributes.video);
t.r.inner.loadMovie(nodes[i].attributes.video);

2. Changed the XML file so I now have "video.xml" with the following code:

<?xml version="1.0" encoding="iso-8859-1"?>
<icons>

<icon video="video01.flv" tooltip="Customer 1" />

<icon video="video02.flv" tooltip="Customer 2" />

<icon video="video03.flv" tooltip="Customer 3" />

</icons>

However the SWF of the carousel now doesn't seem to load at all, and trace() doesn't show up anything AFAICT.

Any ideas?

[galahad2]

Did some more checking, the video0[x].flv files are definitely being read (because changing one of their filenames causes an error). Also I can actually see their outlines if I do "Show Redraw regions" on the SWF... but they're just not showing other than that?

[tomda]

Never done Flash nore ActionScript...

But they are now popular JS Framework (JQuery, Yahoo UI, Mootools) that enable you to do great things with media files and a bit of javascript... Since you want to have images, audio and video, you can try the "PhatFusion Multibox", a slideshow which supports all media types, even Flash.

Otherwise, sorry, I can't help.

[galahad2]

Unfortunately I've tried the various Javascript tools and they just don't have the same functionality or smoothness- the client needs the carousel to look 100% and unfortunately with all the JS tools I've tried it just flickers and exhibits all sorts of strange behaviour.

There must be a way of getting FLV files to show (with their initial screens- just as when embedding them in HTML)- but no one seems to know how...