I am loading image icons for my flash menu from XML. At the moment my xml file loads correctly and the onLoad function begins, setting my png images files into individual movie clips.
The problem im having is that the preloader for my whole "site" only loads up to the point of my xml loading. So after the preloader has completed there is a pause while the XML file loads, and then one by one the icon images appear as they are individually loaded.
I understand that I can put a preloader on each individual icon to show it is preloading but I am trying to produce a complete preloader to load up everything in the "site" before any content is shown so everything is ready to go without pauses or further preloaders.
This is my ActionScript code. (Using ActionScript 2.0)
Code:
var xml:XML = new XML();
xml.ignoreWhite = true;
xml.load("icons.xml");
xml.onLoad = function(success) {
if (success) {
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.content = nodes[i].firstChild.nodeValue;
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;
}
} else {
trace("Failed to load XML file.");
}
};
And here is an example of how my XML file looks:
Code:
<icons>
<icon image="icons/icon1.png" tooltip="Icon 1">
<![CDATA[Information on Icon one goes here.]]>
</icon>
<icon image="icons/icon2.png" tooltip="Icon 2">
<![CDATA[Information on Icon two goes here.]]>
</icon>
</icons>
I'm not sure if I have made what I am trying to do here completley clear, if I havn't then I will try and give it another go. If you need anymore information to help me out I will sort that out too. Thank you in advance.
I don't know if this will help but I have done some pseudocode of what I think I have done. I was going to add in what I thought I might need to do but I'm pretty stuck on ideas.
Code:
create XML variable;
ignore the white space;
load the XML file "icons.xml";
If the load was successful then set the variable as "success" {
if variable is "success" then do this {
set a variable to the correct XML node;
find the amount of icons to be loaded;
perform a loop, doing these actions for each icon item {
make variable "t" attach the movie "item";
set the position of "t" on the stage;
get the tooltip text from the XML;
get the context text from the XML;
load the image from XML into the "item" mc;
load the image from XML into the "inner" mc;
set t's onRollOver state to perform function "over";
set t's onRollOut state to perform function "out";
set t's onRelease state to perform function "released";
}
} else do this if the variable is not "success" {
trace an error message;
}
};
I understand that my problem are the lines:
load the image from XML into the "item" mc;
load the image from XML into the "inner" mc;
With these included in a loop 10 images could be loading up at a time, how can I get the percentages of all of these and put it together into one complete preloader?
Is anyone understanding this or would a .fla file be of some use?
right - i havent tried this so there may be bugs or logic issues, but this is fundamentally how i would implement it.
first off put the field (dont ask why its called field - its legasy!!) component on the stage, either manually or dynamically
then do this...
Code:
var xml:XML = new XML();
xml.ignoreWhite = true;
xml.load("icons.xml");
xml.onLoad = function(success) {
if (success) {
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.content = nodes[i].firstChild.nodeValue;
//i think i saw this code on a carousel video tutorial - that guys a genius!!
//i think it would look better if the icon fades when it has loaded rather than if they all fade in at the same time, however if you dont agree apply the fade in on the render() call back function
t.icon.inner.render = function(){
//this.onEnterFrame = function(){
// if(this._parent._alpha <= 100) this._parent._alpha+=10;
//}
}
listener.onLoadInit = function(target:MovieClip):Void {
//the image has loaded - tell the ldr clip...
_root.ldr.removeMe();
//now fade the image in...
t.icon.inner.onEnterFrame = function(){
if(this._parent._alpha <= 100) this._parent._alpha+=10;
}
}
//make the image and reflection invisible
t.icon._alpha = 0;
t.icon.inner.addListener(listener);
//im using .loadclip() here im not sure if the call back works for .loadMovie()
t.icon.inner.loadClip(nodes[i].attributes.image);
//tell the ldr clip that this clip has started loading...
_root.ldr.addMe(t.icon.inner);
//i'll leave you to work out the part for the reflection, but everything needs to be coded for both...
//t.r.inner.loadMovie(nodes[i].attributes.image);
t.icon.onRollOver = over;
t.icon.onRollOut = out;
t.icon.onRelease = released;
}
} else {
trace("Failed to load XML file.");
}
};
right im off to finish hoovering - hit me up with some questions...
Yeah I did want to load the initial XML file too. So that its a complete preloader for everything. In one. Think thats possible.
Think you could incorporate this into the tutorial files for that video? The link is http://www.gotoandlearn.com/files/carousel3.zip The man is a Genius, and so it seems, you may well be. (Bit of flattery never hurt anyone did it =p)
ok - again i havent tried this, but ive added the xml load to the ldr clip
Code:
function render(){
//this is a call back for the xml load. we dont acutally need to do anything here as the xml.onLoad deals with the rest. however i have added a trace for debug.
trace(this + " render() called ");
}
var xml:XML = new XML();
xml.ignoreWhite = true;
//tell the loader the xml load has kicked off.
_root.ldr.addMe(this);
xml.load("icons.xml");
xml.onLoad = function(success) {
if (success) {
//tell the loader the xml load has finished.
_root.ldr.removeMe();
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.content = nodes[i].firstChild.nodeValue;
//i think i saw this code on a carousel video tutorial - that guys a genius!!
//i think it would look better if the icon fades when it has loaded rather than if they all fade in at the same time, however if you dont agree apply the fade in on the render() call back function
t.icon.inner.render = function(){
//this.onEnterFrame = function(){
// if(this._parent._alpha <= 100) this._parent._alpha+=10;
//}
}
listener.onLoadInit = function(target:MovieClip):Void {
//the image has loaded - tell the ldr clip...
_root.ldr.removeMe();
//now fade the image in...
this.onEnterFrame = function(){
if(this._parent._alpha <= 100) this._parent._alpha+=10;
}
}
//make the image and reflection invisible
t.icon._alpha = 0;
t.icon.inner.addListener(listener);
//im using .loadclip() here im not sure if the call back works for .loadMovie()
t.icon.inner.loadClip(nodes[i].attributes.image);
//tell the ldr clip that this clip has started loading...
_root.ldr.addMe(t.icon.inner);
//i'll leave you to work out the part for the reflection, but everything needs to be coded for both...
//t.r.inner.loadMovie(nodes[i].attributes.image);
t.icon.onRollOver = over;
t.icon.onRollOut = out;
t.icon.onRelease = released;
}
} else {
//tell the loader the xml load has finished if you want, i would probly leave it... but if the xml load is unsuccessful the ldr will keep running.
//_root.ldr.removeMe();
trace("Failed to load XML file.");
}
};
Ok, Although your guidance has been great, somehow Ive ended up in a big mess and I am now thoroughly confused. Can you please get all this working on the .fla file I have attached so I can fully understand and implement this?
var xml:XML = new XML();
xml.ignoreWhite = true;
//xml loaded call back for _root
function render(){
//trace("!!!!");
}
//tell loader xml is loading.
_root.ldr.addMe(this);
xml.onLoad = function()
{
//tell loader xml has loaded.
_root.ldr.removeMe();
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.content = nodes[i].attributes.content;
//make t invisible.
t._alpha = 0;
//i didnt put this is my example code -
//this is why it wasnt working -
//correct implementation of .onLoadInit() call back.
var mcLoader:MovieClipLoader = new MovieClipLoader();
var listener:Object = new Object();
listener.onLoadInit = function(target:MovieClip):Void {
//tell loader this image has loaded.
_root.ldr.removeMe();
}
//tell loader this icon is loading an image.
_root.ldr.addMe(t.icon);
mcLoader.addListener(listener);
mcLoader.loadClip(nodes[i].attributes.image, t.icon.inner);
//t.icon call back
t.icon.render = function(){
//fade in icon. im applying this to icon rather than t as it will overwrite t's mover function.
this.onEnterFrame = function() {
if(this._parent._alpha <= 100) this._parent._alpha+=10;
}
}
//you should do this for the reflection too.
t.r.inner.loadMovie(nodes[i].attributes.image);
t.icon.onRollOver = over;
t.icon.onRollOut = out;
t.icon.onRelease = released;
}
}
Reply With Quote
