Loading more than one loader via xml file

[Marcus Aurelius]

I was wondering how to load more than one loader via xml?

 

Im using a xml file which has a SWFLoader loading extenal swf's but I want to add other loaders for the mainIndex.swf before the SWFLoader loads the swf's.

 

This is the xml file code:

<?xml version="1.0" encoding="UTF-8"?>
<configSettings>
<mainSettings>
<CSSLoader
name="mainIndexCss"
url="mainIndexStyle.swf"
estimatedBytes = "99999"
load="true"/>
</mainSettings>
<page title="Welcome">
<SWFLoader
name="Welcome"
url="pageA.swf"
estimatedBytes = "99999"
load="true"
alpha="1"/>
</page>
<page title="About Us">
<SWFLoader
name="About Us"
url="pageB.swf"
estimatedBytes = "99999"
load="true"
alpha="1"/>
</page>
<page title="Services">
<SWFLoader
name="Services"
url="pageC.swf"
estimatedBytes = "99999"
load="true"
alpha="1"/>
</page>
<page title="Portfolio">
<SWFLoader
name="Portfolio"
url="pageD.swf"
estimatedBytes = "99999"
load="true"
alpha="1"/>
</page>
<page title="Contact Us">
<SWFLoader
name="Contact Us"
url="pageE.swf"
estimatedBytes = "99999"
load="true"
alpha="1"/>
</page>
</configSettings>

 

with the

 

<mainSettings>
<CSSLoader
name="mainIndexCss"
url="mainIndexStyle.swf"
estimatedBytes = "99999"
load="true"/>
</mainSettings>

as an example as Im not sure if this is written correctly.

 

and in the mainIndex.as in the mainIndex constructor I have this code:

 

// load the xml data
  var xmlLoader:XMLLoader = new XMLLoader("com/siteA/assets/data/xml/config.xml",
  {
   name:"xmlData",
requireWithRoot:this.root,
   container:swfContainer_mc,
   maxConnections:1,
   estimatedBytes:10000,
onProgress:appLoading,
   onComplete:appLoaded,
   onChildProgress:childLoading,
   onChildComplete:childLoaded
  });
  XML.ignoreWhitespace = true;
  xmlLoader.load(true);

 

and in functions I have this code:

// XMLLoader - onChildProgress:childLoading
 private function childLoading(e:LoaderEvent):void
 {
  preLoader.childP.scaleX = e.target.progress;
  preLoader.childText.text = "loading " + e.target.name + " page";
 }
 // XMLLoader - onProgress:appLoading
 private function appLoading(e:LoaderEvent):void
 {
  var s:int = int(e.target.progress * 100);
  preLoader.progressText.text = "progress: " + s.toString() + "%";
 }
 // XMLLoader - onChildComplete:childLoaded
 private function childLoaded(e:LoaderEvent):void
 {
  var swf:ContentDisplay = e.target.content as ContentDisplay;
  swfArray.push(swf);
  trace(e.target.url + " = " + e.target.name + " page");
  currentPage = e.target.rawContent;
  previousPage = e.target.rawContent;
  currentPage.pagesIntro();
 }
 // XMLLoader - onComplete:appLoaded
 private function appLoaded(e:LoaderEvent):void
 {
  xml = new XML(LoaderMax.getContent("xmlData"));
  //trace(LoaderMax.getContent("xmlData").content.getStyle("h1").fontSize); //output 24px
  trace(e.target + ", is complete!");
  trace(e.target.content + ", is complete!");
  preLoader.progressText.text = "";
  preLoader.childText.text = "";
  TweenMax.to(preLoader.childP, .5, {scaleX:0, ease:Strong.easeIn});
  TweenMax.to(preLoader, 1, {alpha:0, onComplete:initApp, onCompleteParams:[swfArray.length]});
 }

 

Dont know how to apply the CSSLoader and how to add to the xmlLoader?

[Carl]

Hi, I don't know what you mean by:

 

Dont know how to apply the CSSLoader and how to add to the xmlLoader?

 

in your previous thread I provided a very basic example of adding a CSSLoader to an XMLLoader. It would really help if you could elaborate on what you need or explain the errors you are encountering.

 

have you consulted the online documetation?

http://www.greensock.com/as/docs/tween/com/greensock/loading/package-detail.html

 

The XMLLoader docs have examples on loading more than 1 loader. From your source code it seems that you do have multiple loaders in your xml. what isn't working?

 

and the CSSLoader docs explain how to apply the loaded css to a textfield (if that's what you mean by "apply the CSSLoader")

 

----

 

it appears that this method:

 

private function childLoaded(e:LoaderEvent):void
 {
  var swf:ContentDisplay = e.target.content as ContentDisplay;
  swfArray.push(swf);
  trace(e.target.url + " = " + e.target.name + " page");
  currentPage = e.target.rawContent;
  previousPage = e.target.rawContent;
  currentPage.pagesIntro();
 }

 

could give you trouble when the CSSLoader completes loading, as it can't be converted to a ContentDisplay object. You should check what type of loader has finished loading prior to running any code that is specific to SWFLoaders.

 

read this:

http://forums.greensock.com/topic/3517-basic-understanding-how-to-set-this-up/page__view__findpost__p__10202

 

hopefully some of that info helps. if not please try to explain 1 problem in more detail and we will start from there.

[Marcus Aurelius]

Hi carl,

 

I do apologise Im not always good at explaining myself.

 

I do understand how the css and xml works in my previous thread now. My problem is that Im trying to apply things without understanding the structure of the code. Because I have been concentrating on loading swf's and getting them to animate in and out, I didnt set up the mainIndex swf first and have objects do things first before the swf' are visible. Ok I think I'll start from the beginning (As I have said recently I am not at all experienced with writting AS3 and LoaderMax e.t.c. but I am trying.):-

 

Lets say I have a text field on stage that I want to apply css and xml data to through LoaderMax. How do I do it?

 

This is how one could do it normally, using flash class files:

 

new fla called "xml & css" for example, with a MovieClip in the library called "content_mc" with a linkage of "content_mc".

 

css:

 

h1 {
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color: #ff6699;
font-weight: bold;
}
h2 {
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
color: #33ccff;
}
h3 {
font-family:Arial, Helvetica, sans-serif;
font-size:24px;
color: #ff6600;
font-weight: bold;
}
h4 {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color: #ff3366;
}

 

 

xml:

<?xml version="1.0" encoding="utf-8"?>
<configSettings>
<mainPage>
<content><![CDATA[<h1>This is a header text box</h1>
<h2>This is a footer text box</h2>
<h3>Another text field with css and xml</h3>
<h4>and another one for good luck</h4>]]></content>
</mainPage>
</configSettings>

 

and AS3 code:

 

import flash.display.MovieClip;
import flash.display.*;
import flash.text.TextFormat;
import flash.text.AntiAliasType;
var container:content_mc = new content_mc();
// Set up the xml file objects
var xmlData:XML = new XML();
XML.ignoreWhitespace = true;
var xmlLoader:URLLoader = new URLLoader();
// CSS external document
var cssLoader:URLLoader = new URLLoader();
var cssRequest:URLRequest = new URLRequest("css/sample.css");
var styles:StyleSheet = new StyleSheet();
cssLoader.load(cssRequest);
cssLoader.addEventListener(Event.COMPLETE, onCSSComplete);
function onCSSComplete(e:Event):void
{
styles.parseCSS(cssLoader.data);
xmlLoader.load(new URLRequest("xml/xml.xml"));
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
trace("CSS has loaded.");
}
function LoadXML(e:Event):void
{
xmlData = new XML(e.target.data);
parseFile(xmlData);
}
function parseFile(xmlContent:XML):void
{
stage.addChild(container);
var contents:TextField = new TextField();
contents.styleSheet = styles;
contents.htmlText = xmlContent.mainPage.content.text();
contents.width = 400;
contents.x = 10;
contents.y = 10;
//contents.embedFonts = true;
contents.antiAliasType = "advanced";
contents.multiline = true;
contents.autoSize = "left";
contents.wordWrap = true;
container.addChild(contents);
}

 

but I cant figure out how to this with LoaderMax and a xml file

[Marcus Aurelius]

Ok Ive managed to create some text fields with css and xml and cdata but I still cant figure out how to do the same using XMLLoader and LoaderMax. Anyone have any suggestions pretty please. Here are the files of what I have using flash loaders.....

xml & css.zip

[Carl]

thanks for providing the files, big help. I edited the files just to have enough code to update the "content" text

 

 

// Flash Classes
import flash.display.MovieClip;
import flash.display.Shape;
import flash.display.Graphics;
import flash.display.StageScaleMode;
import flash.display.StageAlign;
import flash.text.TextFormat;
import flash.text.AntiAliasType;
import flash.events.Event;
import flash.events.EventDispatcher;
import flash.events.FullScreenEvent;
import flash.events.MouseEvent;
import flash.display.BitmapData;


///NEW
import com.greensock.loading.*;
import com.greensock.events.LoaderEvent;
//IMPORTANT!!!
LoaderMax.activate([CSSLoader]);


stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

var contents:contentContainer = new contentContainer();
//var imageHolder:MovieClip = new MovieClip();
var header:headerContainer = new headerContainer();
var footer:footerContainer = new footerContainer();

// Set up the xml file objects
var xmlData:XML;
var styles:StyleSheet = new StyleSheet();

//HERE IS THE REAL GREENSOCK MEAT
//NEW NEW NEW
var xml:XMLLoader = new XMLLoader("xml/xml.xml", {onComplete:completeHandler});
xml.load();

function completeHandler(e:LoaderEvent):void{
trace("xml and css loaded");
trace(LoaderMax.getContent("customCSS"));
styles = LoaderMax.getContent("customCSS");
parseFile(xml.content);
}

// ___ END NEW ___


function parseFile(xmlContent:XML):void
{
// content
stage.addChild(contents);
var contentText:TextField = new TextField();
contentText.styleSheet = styles;
contentText.htmlText = xmlContent.mainPage.content.text();
contentText.width = stage.stageWidth;
contentText.x = stage.stageWidth / 2 - contentText.width/2 + 50;
contentText.y = stage.stageHeight / 2 - contentText.height/2 - 50;
//contentText.embedFonts = true;
contentText.antiAliasType = "advanced";
contentText.multiline = true;
contentText.autoSize = "left";
contentText.wordWrap = true;
contents.addChild(contentText);


}

 

all files attached (CS4)

xml-css-snorklTV.zip

[Marcus Aurelius]

Hi carl,

 

Thank you again. I would of replied sooner but my internet was down. Ok that looks quite simply enough, guess its easier when you know how. So now lets say I have a image to load as well as the css and I want them to load in sequence e.g. load css wait until it has loaded then load the image.

[Carl]

if you set the maxConnections on your XMLLoader to 1 it will ensure that only 1 asset loads at a time. the assets will load in the order that they are specified in the xml.

[Marcus Aurelius]

Hi Carl,

 

Ok, Im trying to put your code with the code I have, but I cant get it to work!

 

my xml file:

 

<?xml version="1.0" encoding="UTF-8"?>
<configSettings>
<mainPage>
<content><![CDATA[<c1>This is a content text box</c1>
<c2>more text than you can shake a stick at when living in the woods</c2>
<c3>Another text field with css and xml which is selectable to</c3>
<c4>and another one for good luck</c4>]]>
</content>
</mainPage>
<CSSLoader url="com/siteA/assets/data/css/sample.css" name="customCSS"
load="true"/>
<page title="Welcome">
<SWFLoader
name="Welcome"
url="pageA.swf"
estimatedBytes = "99999"
load="true"
alpha="1"/>
</page>
<page title="About Us">
<SWFLoader
name="About Us"
url="pageB.swf"
estimatedBytes = "99999"
load="true"
alpha="1"/>
</page>
<page title="Services">
<SWFLoader
name="Services"
url="pageC.swf"
estimatedBytes = "99999"
load="true"
alpha="1"/>
</page>
<page title="Portfolio">
<SWFLoader
name="Portfolio"
url="pageD.swf"
estimatedBytes = "99999"
load="true"
alpha="1"/>
</page>
<page title="Contact Us">
<SWFLoader
name="Contact Us"
url="pageE.swf"
estimatedBytes = "99999"
load="true"
alpha="1"/>
</page>
</configSettings>

 

and my AS3 Code:

 

// XML Variables
 var xml:XML;
 // CSS Variables
 var styles:StyleSheet = new StyleSheet();
 // Arrays
 var swfArray:Array = new Array();
// load the xml data
  var xmlLoader:XMLLoader = new XMLLoader("com/siteA/assets/data/xml/config.xml",
  {
   name:"xmlData",
requireWithRoot:this.root,
   container:swfContainer_mc,
   maxConnections:1,
   estimatedBytes:10000,
onProgress:appLoading,
   onComplete:appLoaded,
   onChildProgress:childLoading,
   onChildComplete:childLoaded
  });
  xmlLoader.load(true);
// XMLLoader - onChildComplete:childLoaded
 private function childLoaded(e:LoaderEvent):void
 {
  if (e.target is CSSLoader)
  {
trace("this is a css: " + e.target);
  }
  else if (e.target is XMLLoader)
  {
trace("this is an xml: " + e.target);
  }
  else if (e.target is SWFLoader)
  {
var swf:ContentDisplay = e.target.content as ContentDisplay;
swfArray.push(swf);
trace(e.target.url + " = " + e.target.name + " page");
currentPage = e.target.rawContent;
previousPage = e.target.rawContent;
currentPage.pagesIntro();
trace("this is an swf: " + e.target);
  }
 }
 // XMLLoader - onComplete:appLoaded
 private function appLoaded(e:LoaderEvent):void
 {
  xml = new XML(LoaderMax.getContent("xmlData"));
  trace("xml and css loaded");
  trace(LoaderMax.getContent("customCSS"));
  parseFile(xml.content);
  styles = LoaderMax.getContent("customCSS");
  preLoader.progressText.text = "";
  preLoader.childText.text = "";
  TweenMax.to(preLoader.childP, .5, {scaleX:0, ease:Strong.easeIn});
  TweenMax.to(preLoader, 1, {alpha:0, onComplete:initApp, onCompleteParams:[swfArray.length]});
 }

 

Not sure what Im doing wrong.

[Marcus Aurelius]

Ok i found out how to do it, I was putting things in the wrong place.

 

// this goes in the class
private var header:headerContainer = new headerContainer();

// this goes inside the initSite
private function initSite(e:Event):void
{
// add header to the stage
  addChild(header);
  header.x = 0;
  header.y = 0;


// load the xml data
  var xmlLoader:XMLLoader = new XMLLoader("com/siteA/assets/data/xml/config.xml",
  {
   name:"xmlData",
requireWithRoot:this.root,
   container:swfContainer_mc,
   maxConnections:1,
   estimatedBytes:10000,
onProgress:appLoading,
   onComplete:appLoaded,
   onChildProgress:childLoading,
   onChildComplete:childLoaded
  });
  XML.ignoreWhitespace = true;
  xmlLoader.load(true);
}

// XMLLoader - onComplete:appLoaded
 private function appLoaded(e:LoaderEvent):void
 {
  xml = new XML(LoaderMax.getContent("xmlData"));
  trace("xml and css loaded");
  trace(LoaderMax.getContent("customCSS"));
  styles = LoaderMax.getContent("customCSS");
  parseFile(LoaderMax.getContent("xmlData"));  
  trace(e.target + ", is complete!");
  trace(e.target.content + ", is complete!");
  preLoader.progressText.text = "";
  preLoader.childText.text = "";
  TweenMax.to(preLoader.childP, .5, {scaleX:0, ease:Strong.easeIn});
  TweenMax.to(preLoader, 1, {alpha:0, onComplete:initApp, onCompleteParams:[swfArray.length]});
 }

 

it wasnt working because I was referencing:

parseFile(xml.content);

instead of:

parseFile(LoaderMax.getContent("xmlData"));  

[Marcus Aurelius]

But I cant seem to get this to work:

 

// XMLLoader - onChildComplete:childLoaded
 private function childLoaded(e:LoaderEvent):void
 {
  if (e.target is CSSLoader)
  {
   trace("this is a css: " + e.target);
  }
  else if (e.target is XMLLoader)
  {
   trace("this is an xml: " + e.target);
  }
  else if (e.target is SWFLoader)
  {
   var swf:ContentDisplay = e.target.content as ContentDisplay;
   swfArray.push(swf);
   trace(e.target.url + " = " + e.target.name + " page");
   currentPage = e.target.rawContent;
   previousPage = e.target.rawContent;
   currentPage.pagesIntro();
   trace("this is an swf: " + e.target);
  }
 }

[Carl]

I'm glad to see you making some progress. Its really difficult to help without knowing what isn't working. Are you getting errors? you have a lot of traces which is great.

at which point is the script failing?

[Marcus Aurelius]

No it is all working ok at the moment. Its understanding how the XMLLoader works when using a xml file to load data. I get confused with all the LoaderMax .getContent, .getData e.t.c. stuff. Im getting there very slowly.

 

You posted a link to another thread where greensock suggested using:

 

// XMLLoader - onChildComplete:childLoaded
 private function childLoaded(e:LoaderEvent):void
 {
  if (e.target is CSSLoader)
  {
   trace("this is a css: " + e.target);
  }
  else if (e.target is XMLLoader)
  {
   trace("this is an xml: " + e.target);
  }
  else if (e.target is SWFLoader)
  {
   var swf:ContentDisplay = e.target.content as ContentDisplay;
   swfArray.push(swf);
   trace(e.target.url + " = " + e.target.name + " page");
   currentPage = e.target.rawContent;
   previousPage = e.target.rawContent;
   currentPage.pagesIntro();
   trace("this is an swf: " + e.target);
  }
 }

 

Its knowing how to use XMLLoader e.t.c. and how they all work I guess. In the examples here on greensock and in the api docs it shows you how to code it in flash, which I understand but when it comes to using the xml file I get confused and really not sure how to code things.

 

My aim is to make the whole site as dynamic as possible. And Im trying to structure it like so:

 

1. have all the mainIndex data, images e.t.c. animate/fade in first (all via 1 xml file. which Im not sure is the right way).

2. then have the first swf animate in while the other swf's load in the background. A bit like a splash screen but Im not sure how to code it as Ive said Im not very good with AS3.

 

Because im self teaching I dont know the right and wrong ways of doing things.

[Marcus Aurelius]

I have come across a problem with embedding the dynamic text field fonts, as it is still part of the post I wasnt sure wheather to post it here or start a new thread?

 

When I embed the font lets say in the contentText.embedFonts = true; the text isnt visible.

 

I have tried to embed the font via linkage in the mainIndex.fla but still doesnt work. I did try using an swf for the font but couldnt get that to work either.

 

Let me know if I need to start a new thread of if its ok to keep it here?

 

Kind regards

 

Marcus

[Carl]

Its ok to keep this here. Thanks for asking.

 

Are you trying to make fonts embedded in the parent swf available in an external swf? are you not embedding the font in the child swf?

 

if so, you may want to research here or google similar:

http://stackoverflow.com/questions/8803616/as3-font-embedding-from-parent-to-child-swf

 

Unfortunately that isn't the type of thing we normally assist with.

 

If you are saying that LoaderMax is preventing fonts embedded in an external swf from displaying, please provide a simple example and we will see what can be done.

[Marcus Aurelius]

Yes I wondered if it was something you might not normally assist with but after much searching I found what I was looking for. If you dont do the following and try and embed the font it will not show.

It appears to be a very common problem. This is the link where I found the solution http://www.dotstrosi...ally-different/

 

This is for fonts in the library, I couldnt get loading a swf for font/s to work for me.

 

Here is the AS3 code :

 

import flash.utils.getDefinitionByName;
public class mainIndex extends MovieClip
{
// register fonts
Font.registerFont(getDefinitionByName("accidentalPresidency") as Class);
Font.registerFont(getDefinitionByName("gunPlay") as Class);
}

 

and this is the code for the css :

 

c1 {
font-family: Accidental Presidency;
font-size:20px;
letter-spacing:1;
color: #ff6699;
}
c2 {
font-family: Gunplay;
font-size:14px;
letter-spacing:5;
color: #33ccff;
}

 

Many thanks for all your though Carl, very much appreciated.