tutorial swf speler met XML driven treemenu en preloaders

swf speler met XML driven treemenu en preloaders

_{door Sikken op 11-04-2007}

In deze tutorial maken we een swf die via een XML bestand andere flash bestanden inlaad.
De "te tonen" swf bestanden worden getoond in een tree component en als er een swf word ingeladen verloopt alles via een preloader.

De preloader is in onderstaande voorbeeld mischien niet zichtbaar omdat het allemaal maar kleine bestandjes zijn, maar is wel degelijk aanwezig.

Voorbeeld

Download de gratis flash plugin
Normaal zou hier dit voorbeeld moeten staan.

In deze tutorial wordt er gebruik gemaakt van XML, een tree component en listeners, een basis kennis van flash is dus wel mooi meegenomen.

Belangrijk

Zorg ervoor dat al je swf's die je wil inladen dezelfde afmetingen hebben!
Dit moet vooraf bepaald zijn!

Alle URL's die ik hier gebruik zijn relatief, wat wil zeggen dat alles bij mij in dezelfde map staat. test1.swf staat dus in dezelfde map als mijn FLA/SWF!
Je kan op veilig spelen en alle relatieve paden veranderen in "c:/mijn documenten/..../een.swf" enzoverder.
Dit is dikwijls de eerste oplossing bij een probleem met dergelijke XML-aangestuurde flashfiles!

De XML met de titels en adressen naar de swf's

Een XML kan je met eender welke tekst editor maken.
In deze tutorial gebruiken we onderstaande XML wat we opslaan met de naam "labo.xml"

code


<?xml version="1.0" encoding="UTF-8"?>
<videos>
   <video  label= "Dit is de eerste swf" swf="een.swf" />
   <video  label= "Dit is de tweede swf" swf="twee.swf" />
   <video  label= "Dit is de derde swf" swf="drie.swf" />
   <video  label= "Dit is de vierde swf" swf="vier.swf" />
   <video  label= "Dit is de vijfde swf" swf="vijf.swf" />
   <video  label= "Dit is de zesde swf" swf="zes.swf" />
   <video  label= "Dit is de zevende swf" swf="zeven.swf" />
   <video  label= "Dit is de achtste swf" swf="acht.swf" />
</videos>

De xml is opgebouwd uit een hoofdmap/node "videos" waarin een aantal videos staan met hun label en URL (in dit geval aangegeven met swf="...").
Je kan er eentje of 100 in plaatsen, zoals je zelf wil.
In een latere tutorial zal ik tonen hoe je mappen kunt maken in je lijst zodat je de swf's kan rangschikken per thema,...

In flash

layer1:
Plaats een rectangle (zonder stroke) op je stage die even groot is als je externe swf's.
Maak er een movieclip van met registration point links boven en geef er een instancenaam "holder" aan.

layer2:
maak een nieuwe rectangle (zonder stroke) aan die even groot is als de holder en plaats deze boven op de holder.
Maak er een movieclip van met registrationpoint links boven en geef het een instancenaam "loader".
Ga in die loader-movieclip en maak een nieuwe layer aan.
Teken een rectangle die dienst zal doen als onze preloader, maak er movieclip van met registratiepunt uiterst midden-links.
Geef het een instancenaam "bar".

layer3:
ga naar window --> components --> UserInterface --> tree component en sleep deze naar je stage. ( ctrl+F7 )
Pas de breedte en hoogte aan zoals gewenst (best niet bovenop je holder...).
Geef deze een instancename "videoList".

layer3: daar gaan we het script in de eerste frame plaatsen:

actionscript code

loader.bar._xscale = 0;

var mcl:MovieClipLoader = new MovieClipLoader();

var mclListener:Object = new Object();

mclListener.onLoadProgress = function(target, loaded, total) {

  loader.bar._xscale = Math.round((loaded/total)*100);

};

mclListener.onLoadInit = function() {

  loader._visible = false;

  loader.bar._xscale = 0;

};

mcl.addListener(mclListener);

var xml:XML = new XML();

xml.ignoreWhite = true;

xml.onLoad = function() { 

  videoList.dataProvider = this.firstChild;

  videoList.selectedIndex = 0;

  mcl.loadClip(this.childNodes[0].firstChild.attributes.swf, holder);

};

xml.load("labo.xml");

var vidListener:Object = new Object();

vidListener.change = function() {

  loader._visible = true;

  var item = videoList.selectedItem;

  var swflink = item.attributes.swf;

  mcl.loadClip(swflink, holder);

};

videoList.addEventListener("change",vidListener);

Als je je movie nu published zou je dit moeten hebben als resultaat.

Uitleg code

actionscript code

var mcl:MovieClipLoader = new MovieClipLoader();

var mclListener:Object = new Object();

We maken eerst en vooral een Movieclip-object aan zodat we een swf in een holder kunnen laden.
Daar hoort een luisteraar bij, de mclListener, die luistert of er iets veranderd aan de status van onze mcl-movieclip. Straks meer daarover.

actionscript code

loader.bar._xscale=0;

 

We zetten de x-schaal van onze loaderbar op nul, zodat deze niet zichtbaar is bij het startpunt van het laden.

actionscript code

mclListener.onLoadProgress = function(target,loaded,total){

  loader.bar._xscale=Math.round((loaded/total)*100);

}

Bij het laden van een swf in de holder wordt deze functie opgeroepen die voor ons 3 parameters meedraagt, waarvan we de laatste twee zullen gebruiken voor onze preloader, nml loaded en total. Deze geven weer hoeveel er al geladen is en hoeveel er in totaal geladen moet worden. Deze waarden veranderen dus heel de tijd terwijl de swf wordt geladen.
Op die manier kunnen we dus de x-schaal van onze loaderbar aanpassen, nml van 0 tot 100%.
De math.round ervoor zorgt gewoon dat die waarde netjes afgerond wordt.

actionscript code

mclListener.onLoadInit= function(){

  loader._visible= false;

  loader.bar._xscale=0;

}

Eenmaal geladen (loadInit) zetten we de loader op onzichtbaar en zetten we de x-schaal van de loaderbar op 0, zodat deze bij het inladen van een andere swf netjes van 0 begint te laden.

actionscript code

mcl.addListener(mclListener);

 

Nu moeten we wel nog aangeven dat onze luisteraar "mclListener" aan het luisteren is voor onze mcl.

Even recapituleren:
We hebben een mcl-movieclip die zorgt dat onze swf's in de holder geladen wordt via het commando "LoadClip" die je starks zal zien. Tijdens dat inladen luistert onze mclListener naar de gegevens zoals "hoeveel nog te laden" en "al klaar met laden?".
Die gegevens worden gebruikt om de loader-movieclip zichtbaar te maken en de preloader te scalen.

Dat is het deel van de "luisteraar".
Nu gaan we over naar het inladen van de xml-gegevens:

actionscript code

var xml:XML = new XML();

xml.ignoreWhite = true;

xml bestand aanmaken en aanduiden dat de lege spaties in de xml genegeerd morgen worden

actionscript code

xml.onLoad = function() {

  videoList.dataProvider=this.firstChild;

  mcl.loadClip("test2.swf",holder);

  videoList.selectedIndex = 0;

}

bij het laden van de xml wordt alle data van de xml ingeladen in de tree-component, die we "videoList" hebben genoemd.
Dan wordt de eerste swf ingeladen in de holder en zetten we de "hightlight" van de tree-component op nul, zodat het eerste item als geselecteerd staat op de lijst(in het groen, zoals je in het voorbeeld ziet).

actionscript code

var vidListener:Object = new Object();

 

we maken een nieuw object aan die zal luisteren of er iets veranderd aan de tree-component.
Die verandering zal "iets anders aanklikken" zijn ; dus als je op een andere link klikt zal deze listener dat "horen".

actionscript code

vidListener.change = function() {

  var selectie = videoList.selectedItem;

  var swflink = item.attributes.swf;

  mcl.loadClip(swflink,holder);

}

ALS er iets veranderd, wordt de "change" functie gestart, en deze leest in welke selectie je hebt gedaan, om vervolgens de gegevens van die link op te halen. In dit geval is dit de link naar de externe swf, gegeven door het attribuut "swf" zoals we die hebben opgesteld in de XML-file.
Die externe swf wordt dan in de holder geladen via de loadClip-functie.

actionscript code

videoList.addEventListener("change",vidListener);

 

we moeten wel aangeven dat die listener luistert voor onze videoList, en dat zijn functie "change" heet. Anders is de listener niet gekoppeld aan de videoList

actionscript code

xml.load("labo.xml");

 

Last but not least zeggen we ook nog even wat onze xml dan wel precies is en waar die staat (de URL).

Dat is alles!

Troubleshooting

Q: Mijn swfs worden op een verkeerde plaats ingeladen?

A: Aangezien de holder in deze tutorial een registratiepunt links boven heeft, moet je ervoor zorgen dat als je SWF's dat ook zijn.
Hoe doe je dat? Voeg een extra layer toe aan je SWF en plaats er een rectangle(zonder stroke) in die even groot als je volledige SWF. Maak er een movieclip van met registratiepunt links boven en zet de alpha op 0 om hem weer onzichtbaar te maken.
Op die manier is je volledige SWF linksboven geregistreerd...

Q: Bepaalde animaties van mijn externe SWF werken niet meer normaal eenmaal ingeladen in de speler???

A: Als je SWF ingeladen wordt, zullen actionscript-woorden zoals _root slaan op je speler-SWF ipv op de geladen SWF.
Dit zorgt dan voor een probleem :blij:
Probeer daarom je _root te vervangen door "this" of werk met een hulpvariabele die naar je root verwijst in je SWF.
Zit je bevoorbeeld in een functie met de aanroep

actionscript code

_root.knop.iets

 

, zet dan buiten je functie de hulpvariabele

actionscript code

hulp =this

 

en in je functie kun je dan hulp gebruiken zoals je _root zou gebruiken om iets aan te roepen buiten de functie.

Q: Alles werkt op mijn computer, maar niet op internet???

A: Zal waarschijnlijk aan de links liggen. Zorg ervoor dat in je xml files de links verwijzen naar je webspace, startende met http://... Ook in de as van je speler moet bv je xml gelinked zijn naar je webspace, startende met http://

actionscript code

xml.load("http://www.3dminded.eu/cms/labo/labofiles/labo.xml");

 

actionscript code

mcl.loadClip("http://www.3dminded.eu/cms/labo/labofiles/test1.swf",holder);

 

Uitbreidingen

Je kan extra tekst toevoegen aan de XML zoals

actionscript code

<video label="ik ben een lijstitem" swf="test1.swf" omschrijving ="dit is de omschrijving van deze swf"/>

 

Je kan deze dan inladen in een dynamic textfield als volgt:

actionscript code

vidListener.change = function() {

  var selectie = videoList.selectedItem;

  var swflink = item.attributes.swf;

  var omschrijving= item.attributes.omschrijving;

  tekstveld.text=omschrijving;

  mcl.loadClip(swflink,holder);

}

Zo wordt er per swf een beschrijving ingeladen

De treecomponent kan je tot op zekere hoogte aanpassen:

actionscript code

//de component heet hier "tree", maar dat pas je dan maar aan naar videoList

this.tree.setStyle("fontFamily", "Tahoma");

this.tree.setStyle("fontSize", 10)

this.tree.setStyle("embedFonts", false)

this.tree.setStyle("fontWeight", "normal")

this.tree.setStyle("depthColors", [0x003366,0x013972,0x014383,0x01498F,0x01509C,0x0153A3])

this.tree.setStyle("backgroundColor",0xFFFFFF)

this.tree.setStyle("borderStyle", "none");

this.tree.setStyle("color",0xFFFFFF);

this.tree.setStyle("textIndent",0);

this.tree.setStyle("indentation",2);

this.tree.setStyle("rollOverColor",0x333333);

this.tree.setStyle("selectionColor", 0x666666);

this.tree.setStyle("selectionDuration",0);

this.tree.setStyle("textRollOverColor", 0x000000);

this.tree.setStyle("textSelectedColor",0x000000);

this.tree.setStyle("defaultLeafIcon", "nullicon");

this.tree.setStyle("folderOpenIcon", "nullicon");

this.tree.setStyle("folderClosedIcon", "nullicon");

this.tree.setStyle("disclosureClosedIcon", "nullicon");

this.tree.setStyle("disclosureOpenIcon", "nullicon");

this.tree.vScrollPolicy = 'off'

Hier staat wel "foldericon" enzo tussen, maar aangezien we geen folders hebben gebruikt, moet je deze maar negeren. Dat is voor een andere keer.

Ziezo, van een tutorialtje gesproken :wink:
Download hier de bestanden die deze tutorial verduidelijken.

Sikken

Share |

Stem op deze tutorial

Reacties

Je bent niet ingelogged, je kan geen commentaar geven, of commentaren lezen over deze tutorial.