BulkLoader è una libreria minimale scritta in Actionscript 3.0 da Arthur Debert, potete scaricarla qui.

Questa libreria ci permette di caricare files esterni all’interno dei nostri swf ed avere un gran numero di informazioni su questi, come per esempio il totale complessivo di files e di bytes, il totale in bytes del file attualmente in fase di caricamento, il loro nome e così via. Inoltre è possibile utilizzare un file xml per definire i file da caricare utilizzando la classe LazyXMLLoader.

Ed è proprio questa classe che tratteremo in questo tutorial, con la quale realizzeremo un preload NON formattato graficamente ma in cui ricaveremo e visualizzeremo tutte le informazioni che ci servono per arrivare al nostro scopo: creare 2 barre di scorrimento, una rappresentante il totale complessivo dei bytes scaricati, ed una rappresentante il totale dei bytes scaricati per il file attualmente in fase di scaricamento.

Una note prima di procedere con la spiegazione riguardante il codice: ricordatevi di importare le librerie in flash come ho spiegato qui altrimenti potrete ricevere diversi errori.

Il seguente è il file xml in cui diremo a BulkLoader dove andare a prendere i dati necessari. In questo caso tutti i file da caricare sono nella directory assets\files.

lazyloader.xml

<?xml version="1.0" encoding="UTF-8"?>
<BulkLoader>
	<name>BulkLoader</name>
	<stringSubstitutions>
		<base_path>assets/files/</base_path>
	</stringSubstitutions>

	<files>
		<file>
			<url>{base_path}movie.flv</url>
      <id>moviee</id>
			<pausedAtStart>true</pausedAtStart>
			<checkPolicyFile>true</checkPolicyFile>
			<maxTries>5</maxTries>
      <priority>90</priority>
		</file>
		<file>
			<url>{base_path}sound-short.mp3</url>
			<id>the-sound</id>
      <priority>80</priority>
		</file>
		<file>
			<url>{base_path}duskclear2.jpg</url>
			<id>duskclear2</id>
      <priority>70</priority>
		</file>
		<file>
			<url>{base_path}testo.txt</url>
			<id>testo</id>
      <priority>50</priority>
		</file>
		<file>
			<url>{base_path}samplexml.xml</url>
			<id>samxml</id>
			<headers>
				<header1>value1</header1>
				<header2>value2</header2>
			</headers>
      <priority>40</priority>
		</file>
	</files>
</BulkLoader>

Ogni file è contenuto all’interno del tag file, questo deve includere quanto meno la url del file. Pur esistendo la possibilità di creare un id univoco per il ogni file senza bisogno di specificarlo, ho preferito inserire il tag id manualmente per ogni file. Questo campo è importante in quanto identifica in modo univoco il nostro file. Possono essere incluse diverse altre informazioni per i file e nell’intestazione del XML, ma per questo vi rimando alla documentazione ufficiale.

BulkLoaderMain

  package{
    import br.com.stimuli.loading.lazyloaders.LazyXMLLoader;
    import br.com.stimuli.loading.lazyloaders.LazyBulkLoader;
    import br.com.stimuli.loading.*;
    import br.com.stimuli.loading.loadingtypes.*;
    import br.com.stimuli.loading.BulkProgressEvent;

    import flash.events.*;
    import flash.display.*;
    import flash.media.Sound;
    import flash.media.Video;
    import flash.net.NetStream;
    import flash.text.*;
    import flash.events.MouseEvent;

    public class BulkLoaderMain extends Sprite {
      public var lazyTotal:LazyXMLLoader;
      public var lazy:LazyXMLLoader;

      public var inizio:TextField;
      public var bytesLoaded:TextField;
      public var percentuale:TextField;
      public var itemsLoaded:TextField;
      public var currentLoaded:TextField;
      public var totalItems:TextField;
      public var fine:TextField;

      public var barTotal:TextField;
      public var barItem:TextField;

      public var bytesTotali:Number = 0;
      public var filesTotali:Number = 0;
      public var bytesCaricati:Number = 0;

      public var hide:Boolean = false;

      public function BulkLoaderMain():void {
        addTextFields();
        inizio.text = "Clicca qui per iniziare il preload!";
        inizio.addEventListener(MouseEvent.CLICK,start);
      }

      public function start( e : MouseEvent ):void {
        inizio.removeEventListener(MouseEvent.CLICK,start);
        /*
        bytesTotal = Se il numero delle connessioni è minore del numero dei files sarà uguale a 0
        bytesTotalCurrent	= Se il numero delle connessioni è maggiore del numero dei files sarà = a bytesTotal
        */
        lazyTotal  = new LazyXMLLoader("assets/files/lazyloader.xml", "getTotalLazyLoader", 10, 10);
        lazyTotal.addEventListener(ProgressEvent.PROGRESS, onAllProgressTotal);
        lazyTotal.addEventListener(Event.COMPLETE, onAllLoadedTotal);
        lazyTotal.start();
      }

      private function onAllProgressTotal( e : BulkProgressEvent ):void {
        if(e.bytesTotal > bytesTotali){
          bytesTotali = e.bytesTotal;
          filesTotali = e.itemsTotal;
          bytesLoaded.text = "Bytes Totali "+bytesTotali;
          percentuale.text = "Files Totali "+filesTotali;
          /*var evn:BulkProgressEvent;
          for each(var item : LoadingItem in lazyTotal.items){
            evn = lazyTotal.getProgressForItems([item.id]);
            totalItems.appendText(item+"\n");
            totalItems.appendText(item.id+" Caricati "+evn.bytesLoaded+" su "+evn.bytesTotal+"\n");
          }*/
          lazyTotal.removeAll();
          lazyTotal.clear();
          lazyTotal = null;
        }
      }

      private function addTextFields():void{
        inizio = createTextField(10, 10, 400, 100);
        bytesLoaded = createTextField(10, 30, 400, 100);
        percentuale = createTextField(10, 50, 400, 100);
        itemsLoaded = createTextField(10, 70, 400, 100);
        currentLoaded = createTextField(10, 90, 400, 100);

        totalItems = createTextField(10, 170, 400, 300);
        totalItems.wordWrap = true;
        totalItems.background = true;
        totalItems.backgroundColor = 0xF3C9F8;

        barItem = createTextField(10, 110, 0, 20);
        barItem.background = true;
        barItem.backgroundColor = 0x4EF580;

        barTotal = createTextField(10, 140, 0, 20);
        barTotal.background = true;
        barTotal.backgroundColor = 0x4EF580;

        fine = createTextField(10, 510, 400, 100);
      }

      function onAllLoadedTotal(evt : Event) : void{
        lazy  = new LazyXMLLoader("assets/files/lazyloader.xml", "theLazyLoader", 1, 10);
        lazy.addEventListener(LazyBulkLoader.LAZY_COMPLETE, onLazyInfoLoaded );
        lazy.addEventListener(Event.COMPLETE, onAllLoaded);
        lazy.addEventListener(ProgressEvent.PROGRESS, onAllProgress);
        lazy.start();
      }

      private function createTextField(x:Number, y:Number, width:Number, height:Number):TextField {
        var result:TextField = new TextField();
        result.x = x;
        result.y = y;
        result.width = width;
        result.height = height;
        addChild(result);
        return result;
      }

      public function onLazyInfoLoaded( e : Event ):void {
        inizio.text = "File XML letto con successo!";
      }

      public function onAllProgress( e : BulkProgressEvent ):void {
        bytesCaricati = 0;
        var evn:BulkProgressEvent;
        totalItems.text = "Oggetti totali "+lazy.totalWeight+" \n";
        for each(var item : LoadingItem in lazy.items){
          evn = lazy.getProgressForItems([item.id]);
          totalItems.appendText(item+"\n");
          totalItems.appendText(item.status+"\n");
          totalItems.appendText(item.id+" Caricati "+evn.bytesLoaded+" su "+evn.bytesTotal+"\n");
          bytesCaricati+= item.status == 'started' ? evn.bytesLoaded : evn.bytesTotal;
          if(evn.bytesLoaded >= 0 && evn.bytesLoaded != evn.bytesTotal){
            itemsLoaded.text = "Percentuale "+item.id+" "+evn.bytesLoaded*100/evn.bytesTotal;
            barItem.width = Math.round(evn.bytesLoaded*100/evn.bytesTotal)*3;
            barItem.text = hide === false ? "Currently Loading "+item.url.url : "";
          }
        }
        bytesLoaded.text = "Totale Caricati "+bytesCaricati+" su "+bytesTotali;
        percentuale.text = "Totale Percentuale "+bytesCaricati*100/bytesTotali;
        barTotal.width = Math.round(bytesCaricati*100/bytesTotali)*3;
        barTotal.text = hide === false ? "Total Loading" : "";
        hide = !hide;
      }

      function onAllLoaded(evt : Event) : void{
        barTotal.width = 300;
        barItem.width = 300;
        fine.text = "Caricamento Terminato! \n";
        fine.appendText("Clicca QUI per visualizzare il contenuto");
        fine.addEventListener(MouseEvent.CLICK,clickListener);
      }

      function clickListener( e : MouseEvent ):void {
        var xPos : int = 450;
        var yPos : int = 0;
        for each (var item : LoadingItem in lazy.items){
          if (item.isImage()){
            var b : Bitmap = lazy.getBitmap(item.id);
            addChild(b);
            if (b.width > 300){
              b.width = 300;
              b.scaleY = b.scaleX;
              b.x = xPos;
              b.y = yPos;
              xPos += b.width + 10;
              if(xPos > 800){
                xPos = 200;
                yPos += 200;
              }
            }
          }else if (item.isSound()){
            var sound : Sound = lazy.getSound(item.id);
            sound.play();
          }else if(item.isStreamable()){
            var video : Video = new Video();
            var theNetStream : NetStream = lazy.getNetStream(item.id);
            addChild(video);
            video.attachNetStream(theNetStream);
            theNetStream.resume();
            video.y = 300;
            video.x = 450;
          }
        }
        fine.removeEventListener(MouseEvent.CLICK,clickListener);
      }
    }
  }

Il contenuto di questo file è piuttosto lungo, occhio a non perdervi! I vari import importano all’interno della classe tutte le librerie built in di flash e le librerie di bulLloader che saranno utilizzate nel corso dello script.

Quindi inizializzeremo tutte le proprietà che utilizzeremo globalmente all’interno della classe, ovvero le due istanze di LazyXMLLoader ( più avanti spiegherò il perchè di 2 istanze ), tutti i TextField atti a visualizzare tutte le informazioni che ci servono, tra cui, gli ultimi 2, che saranno le nostre barre di caricamento, 3 proprietà numeriche: bytesTotali, filesTotali e bytesCaricati, che terranno in memoria il totale complessivo degli omonimi valori e una variabile booleana hide, utilizzata per un semplice effetto visivo.

Il costruttore

Il costruttore aggiunge i vari textfield posizionati ed un minimo formattati tramite il metodo addTextFields(). Quindi mette in ascolto l’evento click con il textfield in modo che il caricamento abbia inizio una volta cliccato il testo.

Ready? GO!

Effettuato il click sul textfield inizia il caricamento vero e proprio. Il metodo start() istanzia lazyTotal, la prima delle due istanze di LazyXMLLoader. Perchè due istanze? Cercando di arrivare allo scopo delle 2 barre ho incontrato 1 problema strettamente legato al numero delle connessioni e alla disponibilità di alcuni dati, ovvero:

• bytesTotal = Se il numero delle connessioni è minore del numero dei files sarà uguale a 0
• bytesTotalCurrent = Se il numero delle connessioni è maggiore del numero dei files sarà = a bytesTotal

Che cosa è il numero delle connessioni? Il numero delle connessioni, ovvero il terzo argomento del costruttore di LazyXMLLoader, in parole molto semplici, definisce quanti file possono essere scaricati in contemporanea.

Il problema

Mettendo un numero di connessioni maggiore del numero dei files abbiamo il numero dei bytes totali ma non possiamo scaricare i files uno alla volta e vedere nel dettaglio il loro andamento. Con un numero di connessioni uguale ad 1 possiamo vedere procedere il caricamento dei files uno alla volta, ma così facendo non abbiamo il numero totale dei bytes che ci serve per creare la barra sul totale.

La possibile soluzione

Una possibile soluzione che mi è venuta in mente è stata la creazione di una istanza di LazyXMLLoader con un numero di connessioni maggiore del numero dei files. Una volta che questa è in grado di darci le informazioni sul totale bytes e totale files, viene subito chiusa e rimossa e viene fatta partire la seconda istanza in cui specificheremo 1 come numero di connessioni, che effettuerà il caricamento vero e proprio. I dati sul totale bytes ci vengono restituiti dalla prima istanza praticamente subito, testato con la simulazione di scaricamento a 56 kbps non sono occorsi più di 5 o 6 secondi, il tempo di scaricare il file lazyloader.xml. Il metodo incaricato di recuperare i bytes totali e bloccare il primo loader è onAllProgressTotal.

Quindi, avvenuto il dispatch dell’evento LAZY_COMPLETE viene richiamato il metodo onAllLoadedTotal che istanzia il secondo loader. Il grosso del lavoro sarà adesso eseguito dal metodo onAllProgress, che ci aggiornerà sul progresso del file attualmente caricato e sull’andamento globale.

Terminato il caricamento dei dati, questi potranno essere visualizzati tramite il click sul testo che avverte del termine del caricamento. Cliccate qui per visualizzare il risultato ( il download dei file potrebbe richiedere molto tempo dipendentemente dalla vostra connessione):

Si conclude qui questo tutorial, siete invitati a testare il codice postato e lasciare i vostri commenti.

Related posts:

1. Muovere uno sprite usando la tastiera con Actionscript 3.0 Muoviamo un oggetto alla pressione dei tasti. In questo articolo...
2. Personalizzare il puntatore del mouse con Actionscript 3.0 Usando la classe Custom Mouse Pointer Per le nostre applicazioni...

Related posts brought to you by Yet Another Related Posts Plugin.