Code ordenen en preloaden

[windhoos]

Ik gebruik nu de onderstaande code om een XML in te laden. Hierbij wordt er een achtergrond afbeelding ingeladen en eventueel wat externe fonts (embedded in losse swf bestanden). Dit werkt nu op zich goed, maar het geheel is nogal wat rommelig en de preloader is niet zoals ik het zou willen.

//import required libraries
import flash.display.*;
import flash.net.*;
import flash.events.*;
import flash.text.*;

//define variables
var XMLloader:URLLoader = new URLLoader()
var myXML:XML = new XML();

//add preloader background
var preloaderBackground:Sprite = new Sprite();
preloaderBackground.graphics.beginFill( 0xffffff );
preloaderBackground.graphics.drawRect( 0, 0, 1200, 1000 );
this.addChild( preloaderBackground );

submitButton.addEventListener(MouseEvent.MOUSE_UP, onSubmitPostXML );
submitButton.addEventListener(KeyboardEvent.KEY_UP , onSubmitPostXML );
resetButton.addEventListener(MouseEvent.MOUSE_UP, onResetPostXML );
resetButton.addEventListener(KeyboardEvent.KEY_UP, onResetPostXML );

XMLloader.dataFormat = URLLoaderDataFormat.TEXT;
XMLloader.addEventListener( Event.COMPLETE, onLoadXML );
XMLloader.addEventListener( ProgressEvent.PROGRESS, progressHandler );

//load XML template
XMLloader.load( new URLRequest( "template.xml" ) ); //load xml file

function onLoadXML( e:Event ) {

//Convert the downloaded text into an XML
myXML = new XML( e.target.data );
var property:XMLList = myXML.properties; //load textElements
var font:XMLList = myXML.properties.fonts.font; //load font files

//load background
var backgroundLoader:Loader = new Loader();
backgroundLoader.load( new URLRequest( property.backgroundImage ) );
backgroundLoader.contentLoaderInfo.addEventListene r( ProgressEvent.PROGRESS, progressHandler );
backgroundLoader.contentLoaderInfo.addEventListene r( Event.COMPLETE, onBackgroundLoadComplete );

//load fonts (embedded in swf file)
for ( var nFontCount = 0; nFontCount < font.length(); nFontCount++ ) {;
var fontLoader:Loader = new Loader();
fontLoader.load( new URLRequest( font[nFontCount].file ) );
fontLoader.contentLoaderInfo.addEventListener( ProgressEvent.PROGRESS, progressHandler );
fontLoader.contentLoaderInfo.addEventListener( Event.COMPLETE, onFontLoaded );
}
}

/**
* Preloader for progresses
*/
function progressHandler( event:ProgressEvent ):void {

var loadTime:Number = event.bytesLoaded / event.bytesTotal;
var loadPercent:uint = Math.round( 100 * loadTime );
preloaderBackground.visible = true;
preloaderText.visible = true;
this.setChildIndex( preloaderBackground,this.numChildren - 1 );
this.setChildIndex( preloaderText,this.numChildren - 1 );
preloaderText.text = "Loading bytes: " + event.bytesTotal + " (" + loadPercent + "%)";
if ( loadPercent == 100 ) {
preloaderBackground.visible = false;
preloaderText.visible = false;
}
}

function onBackgroundLoadComplete( e:Event ):void {
var image:Bitmap = this.addChild( new Bitmap( e.target.content.bitmapData as BitmapData ) ) as Bitmap;
image.x = 0;
image.y = 0;
image.width = this.width;
image.height = this.height;
this.setChildIndex( image, 0 );
trace( "background image loaded: " + e.target.url );
}

function onFontLoaded( event:Event ):void {
var info:LoaderInfo = event.currentTarget as LoaderInfo;
var loader:Loader = info.content as Loader;
var embeddedFonts:Array = Font.enumerateFonts(false);
for ( var nFontFile = 0; nFontFile < embeddedFonts.length; nFontFile++ ) {
var item:Font = embeddedFonts[nFontFile];
trace( "[" + nFontFile + "] name: " + " - " + item.fontName + ", style: " + item.fontStyle + ", type: " + item.fontType );

//add text elements
var myXMLTextElements:XMLList = myXML.elements.textField;
for( var textElementIndex = 0; textElementIndex < myXMLTextElements.length(); textElementIndex++ ) {
if ( myXMLTextElements[textElementIndex].font == item.fontName ) {
var textElement:TextField = new TextField();
var textStylesheet:StyleSheet = new StyleSheet();
var textStyleFormat:TextFormat = new TextFormat();
textStyleFormat.font = item.fontName;
textStyleFormat.size = myXMLTextElements[textElementIndex].fontSize;
textStyleFormat.color = myXMLTextElements[textElementIndex].fontColor;
textStyleFormat.align = myXMLTextElements[textElementIndex].align;
this.addChild( textElement );
textElement.embedFonts = true;
textElement.x = myXMLTextElements[textElementIndex].x;
textElement.y = myXMLTextElements[textElementIndex].y;
textElement.text = myXMLTextElements[textElementIndex].value;
textElement.width = myXMLTextElements[textElementIndex].width;
textElement.type = myXMLTextElements[textElementIndex].type;
textElement.wordWrap = true;
textElement.name = "text" + textElementIndex;
textElement.setTextFormat( textStyleFormat );
textElement.antiAliasType = AntiAliasType.ADVANCED;
if ( myXMLTextElements[textElementIndex].type == "input" ) {
textElement.border = true;
textElement.borderColor = 0xdddddd;
}
textElement.height = myXMLTextElements[textElementIndex].height;
textElement.multiline = false;
trace( "textElement created: " + textStyleFormat.font + " - " + textElement.name );
}
}

//put button to frontend
}
}

function onSubmitPostXML( e:Event ):void {
var urlRequest:URLRequest = new URLRequest( "getData.php" );
var variables:URLVariables = new URLVariables();
var urlLoader:URLLoader = new URLLoader();
variables.hash = "bluepink";

for ( var xmlElementIndex = 0; xmlElementIndex < myXML.elements.textField.length(); xmlElementIndex++ ) {
myXML.elements.textField[xmlElementIndex].value = this.getChildByName( "text" + xmlElementIndex ).text;
}

variables.xml = myXML;
urlRequest.data = variables;
urlRequest.method = URLRequestMethod.POST;
urlLoader.addEventListener( Event.COMPLETE, onSubmitPostXMLComplete );
urlLoader.addEventListener( ProgressEvent.PROGRESS, progressHandler );
urlLoader.load( urlRequest );
trace( urlRequest );
}

function onSubmitPostXMLComplete( e:Event ):void {
trace( "Klaar." );
navigateToURL( new URLRequest( "./complete.html" ), "_self" );
}

function onResetPostXML( e:Event ):void {
navigateToURL( new URLRequest( "./?template=" + String(loaderInfo.parameters.template) ), "_self" );
}

stop();

Alles staat nu in 1 frame. Eigenlijk voel ik er veel meer voor om alles in losse objecten te zetten. Dit om het geheel wat overzichtelijker te maken. Ik heb alleen geen idee hoe ik dit het beste kan aanpakken, dus als iemand mij hiermee op weg kan helpen graag. Bijv. het laden van de externe fonts in een los object en het laden van de afbeelding in een los object.

Wat eigenlijk voor mij het belangrijkste nog is, is dat ik een preloader wil die van het begin tot het eind getoond wordt. Nu toont hij bij elke actie een preloader (bijvoorbeeld bij het laden van elke font). Op zich erg leuk, maar voor bezoekers niet interessant en het oogt in de praktijk alleen maar rommelig. Eigenlijk zou ik een wit vak over alles heen willen hebben waar ik in kan zetten wat ik wil, inclusief een tekst waarin staat hoever het laden is. Ik denk dat het voor de vrijheid het makkelijkste zou zijn om een scene te maken waarop de preloader staat, en wanneer alles geladen is, dat dan een volgende (de uiteindelijke) scene getoond wordt. Kan iemand mij helpen om uit te leggen hoe ik met het bovenstaande script een preloader kan maken die wacht tot alles klaar is en dan naar een andere scene springt?

Voor de gevorderde gebruiker is dit denk ik heel eenvoudig en supersnel op te lossen. Ik begin nog maar net, dus is moet nog een beetje feeling in Flash en AS krijgen.

Alvats bedankt.

[nuvorm]

ik heb daar zelf een fileloader voor gemaakt.

kunst is om de fileloader een event te laten dispatchen als de file geladen is, of op de file progress.

je kunt dan zelf bepalen of je deze naar deze events luistert en er iets mee doet.

externe fonts is trouwens geen optie, (behalve als ze in een swf staan).

groet Wouter

[windhoos]

Ik had inderdaad de fonts al in een SWF geplaatst en de SWF via de XML ingeladen. Ik heb nu een screne gemaakt waarin de XML geladen wordt (preloader scene). Hier telt hij op hoeveel load acties er gedaan moeten worden en aan de hand van de COMPLETE handlers telt hij deze op totdat het aantal behaald is. Wanneer dit het geval is springt hij naar de volgende scene. Tot nu toe werkt dit prima. Bedankt voor de reactie.