Forum Moderators: open
The carousel is based on the ones demo'd at www.gotoandlearn.com. I followed the second of the tutorials and have got to the point where I've created a movie clip inside a movie clip inside a movie clip (required for the carousel) and have the accompanying ActionScript working, however when I preview the SWF file I only see the "filler shape" of the innermost movie clip, not the image file (.png) that it's supposed to contain.
The three movie clips are called item (the outermost), icon (inside item) and inner (the innermost). The outermost one ("item") is the one set to "export to ActionScript".
The images are grabbed from an XML file. The ActionScript is as follows:
var numOfItems:Number; //don't declare yet as number of items will be read from XML
var radiusX:Number = 250;
var radiusY:Number = 75;
var centerX:Number = Stage.width/2;
var centerY:Number = Stage.height/2;
var speed:Number = 0.05;
var perspective:Number = 130; //skew the perspective so items further back are smaller
var home:MovieClip = this; //create variable to be used inside the XML for loop later as we can't use "this" inside that loop
var xml:XML = new XML();
xml.ignoreWhite = true;
xml.onLoad = function()
{
var nodes = this.firstChild.childNodes; //i.e the XML file hierarchy
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.icon.inner.loadMovie (nodes[i].attributes.image); //load the image files
}
}
for (var i=0;i<numOfItems;i++)
{
var t = this.attachMovie("item","item"+i,i+1);
t.angle = i * ((Math.PI*2)/numOfItems);
t.onEnterFrame = mover;
}
xml.load("icons.xml");
function mover ()
{
this._x = Math.cos(this.angle) * radiusX + centerX;
this._y = Math.sin(this.angle) * radiusY + centerY;
var s:Number = (this._y - perspective)/(centerY + radiusY - perspective); //add the new perspective variable to the calculation
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)/2000;
}
The XML file:
<?xml version="1.0" encoding="iso-8859-1"?>
<icons>
<icon image="icon1.png" />
<icon image="icon2.png" />
</icons>
The XML file seems to be read (to a degree) by the ActionScript, because if I had a new "icon" item, the carousel "grows" another item accordingly (although as before, it only displays the background shape of the image "placeholder" movie clip).
Amyone got any ideas?
What caught my eye is this:
at present I'm trying to test with images but in time these will be FLV video files
If this is your eventual goal, this won't work with video. Video has a begin and an end, you need to take your "next action" on queue of the previous video's end. Timing it will not work due to differences in download speed, plus there's issues with preload, play, and differing lengths of movies.
It doesn't work within the authoring environment or when embedded in a page.
With regards the FLV files that I hope to "embed", these will categorically not play within the carousel item?
A getaround might be to simply have a link to the FLV object on the carousel item (problem is, it gives the user one more thing to have to click and contend with)- presumably this would work though? (assuming I can get past this current impasse!)
I did check the paths and the XML and FLA are in the same directory,
Here I hope you mean images. :-) Different methods are used to load movies as opposed to images or other static data.
it just shows the background shape of the innermost movie clip. . . . It doesn't work within the authoring environment or when embedded in a page.
Are you familiar with the trace() command in Flash? In the authoring environment, this will be one of the most useful debugging tools. Follow your ActionScript through and wherever you suspect a problem, insert trace().
var nextImg = imgArray[i];
trace('next image should be ' + nextImg);
You can store variables in it or just use it for benchmark messages to see if a function is loading:
onEnterFrame = function() { trace('got to frame 4'); }
A window will pop up with the values as it's running. This will only work when testing from the authoring environment, and if you export it with trace() in the coding, it won't hurt a thing, it's all ignored when exporting to .swf. Trace the project through, see why the images aren't loading up.
With regards the FLV files that I hope to "embed", these will categorically not play within the carousel item?
It sounds like you have an image viewer, right? Somewhere in this project will be a setting for how long each will display - example, 5 seconds. When the image loads, a timer is set to move to the next images.
If you have 10 second video clips, it will change halfway through the video. You need to set the timer off on the end of the video, whenever that is.
var numOfItems:Number; //don't declare yet as number of items will be read from XML
var radiusX:Number = 250;
var radiusY:Number = 75;
var centerX:Number = Stage.width/2;
var centerY:Number = Stage.height/2;
var speed:Number = 0.05;
var perspective:Number = 130; //skew the perspective so items further back are smaller
var home:MovieClip = this; //create variable to be used inside the XML for loop later as we can't use "this" inside that loop
var xml:XML = new XML();
xml.ignoreWhite = true;
trace(xml.ignoreWhite);
xml.onLoad = function()
{
var nodes = this.firstChild.childNodes; //i.e the XML file hierarchy
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.icon.inner.loadMovie (nodes[i].attributes.image); //load the image files
}
}
trace(t.icon.inner.loadMovie);
for (var i=0;i<numOfItems;i++)
{
var t = this.attachMovie("item","item"+i,i+1);
t.angle = i * ((Math.PI*2)/numOfItems);
t.onEnterFrame = mover;
}
trace(t.onEnterFrame);
xml.load("icons.xml");
trace(xml.load);
function mover ()
{
this._x = Math.cos(this.angle) * radiusX + centerX;
this._y = Math.sin(this.angle) * radiusY + centerY;
var s:Number = (this._y - perspective)/(centerY + radiusY - perspective); //add the new perspective variable to the calculation
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)/2000;
}
trace(this.onMouseMove);
But the output I got wasn't particularly helpful. Output was:
true
undefined
undefined
[type Function]
[type Function]
Any ideas?
xml.onLoad = function()
{
var nodes = this.firstChild.childNodes; //i.e the XML file hierarchy
numOfItems = nodes.length;
for (var i=0;i<numOfItems;i++)
{
var t = home.attachMovie("item","item"+i,i+1);
trace(' item ' + i + ' ' + "item"+i);
t.angle = i * ((Math.PI*2)/numOfItems);
t.onEnterFrame = mover;
t.icon.inner.loadMovie (nodes[i].attributes.image);
trace(nodes[i].attributes.image);
}
}
This should give you the names of the items, followed by file name of the images that are supposed to load.
true
undefined
undefined
[type Function]
[type Function]
item 0 item0
icon1.png
item 1 item1
icon2.png
item 2 item2
icon2.png
