[AS 3.0] Il mio primo preloader

[trez]

Ciao a tutti,
sto cercando di realizzare il mio primo preloader serio per un sito in flash.

Ho trovato molto materiale riguardo AS 2.0, ma dato che provengo da C++ e Java (eh si, le disgrazie capitano a tutti :P ), ho provato a realizzarlo in AS 3.0 ma ovviamente son oandato incontro a problemi.

Vi incollo qui di seguito il codice, così che possiate dirmi cosa sbaglio (o non sbaglio!):

import flash.display.LoaderInfo;
import flash.events.Event;
import flash.events.ProgressEvent;


stop();
trace("inizio del codice");
var total:Number = new Number();

root.loaderInfo.addEventListener(Event.OPEN, showPreloader);
root.loaderInfo.addEventListener(ProgressEvent.PROGRESS, showProgress);
root.loaderInfo.addEventListener(Event.COMPLETE, showLoadResult);

function showPreloader(evt:Event):void {
    total =  root.loaderInfo.bytesTotal;
}

function showProgress(evt:Event):void {
    
    var loaded:Number = root.loaderInfo.bytesLoaded;
    trace("laoded: " + loaded);
    
    var percent:Number = loaded / total * 100;
    
    contatore.text = "Loaded" + percent + "%";
    loader_barra.gotoAndStop(percent);
    if(loaded == total){
        gotoAndPlay(2); //root.gotoAndPlay(2);
    }//if
}

function showLoadResult(evt:Event):void {
    
} 

dove:
- "contatore" è del testo che ho convertito a simbolo di tipo video clip ma non si aggiorna come vorrei;
- "laoder_barra" è una semplice linea bianca che si allunga, convertita in clip filmato. Per realizzarla sono andato nelal sua timeline personale, al fotogramma 50 ho allungato la linea e infine ho fatto un'interpolazione di movimento.

Con questo codice, vedo solo la barra che si allunga, ma è dato più dall'animazione ciclica della loader_bar che dal codice.

Grazie mille per l'aiuto!
Sono certo che mi chiarificherà molte cose su AS 3.0

Ciao!

[Sleter]

Ciao

Infatti non è facile trovare un tutorial per AS3 per riprodurre il classico preloader della linea temporale corrente come si utilizzava in AS2 perchè, il sistema di caricamento file è stato completamente modificato e sostituito dalla classe URLLoader.

Ora è più facile creare un file principale vuoto che funge da contenitore per caricare file esterni e con i metodi e proprietà della classe URLLoader gestire dettagliatamente il preloader di questi file esterni direttamente dal file "caricatore".

Spariti i metodi getBytesLoaded e getBytesTotal, come fare per creare un preloader della linea temporale corrente in AS3 ?

Ti riporto sotto il codice scritto da un vero genio in AS3 che ho trovato in rete e che io ho semplicemente modificato in parte per adattarlo a un preloader con barra di avanzamento animata.

Considera che la mia animazione del preloader è costituita da un cerchio che si completa su una timeline di 100 fotogrammi.
Il clip dell'animazione è esportato per ActionScript con il nome: Preloader e di conseguenza è diventato una classe di nome Preloader estensione della classe base flash.display.MovieClip.

stop();

var preloader:Preloader = new Preloader();
preloader.x = 275;
preloader.y = 200;
addChild(preloader);

this.addEventListener(Event.ENTER_FRAME,loadingProgress);

function loadingProgress(progresso:Event):void
{
    var caricamentoInCorso:Number=progresso.target.loaderInfo.bytesLoaded;
    var caricamentoCompletato:Number=progresso.target.loaderInfo.bytesTotal;
    var percentuale:Number=Math.round(caricamentoInCorso/caricamentoCompletato*100);
    preloader.testo.text=percentuale.toString()  + "%";
    preloader.gotoAndStop(percentuale);
    if(percentuale>=100)
    {
        this.removeEventListener(Event.ENTER_FRAME,loadingProgress);
        this.gotoAndPlay(2);
    }
} 

Nota che "preloader" è solo il nome della variabile di tipo:Preloader e come ho scritto sopra si tratta del MovieClip esportato per AS.

ciao

[Sleter]

Ho dimenticato una cosa importante:

In questa riga:

preloader.testo.text=percentuale.toString()  + "%"; 

"testo" è il nome del campo di testo dinamico inserito nel clip Preloader con il suo nome istanza "testo" dichiarato nelle proprietà (nome istanza) del clip stesso.

[trez]

Quindi se ho capito bene:
- ora per avere i bytes caricati e totali, si possono prendere sol odall'oggetto evento passato;
- this si riferisce allo stage intero, cioè alla root principale di tutto il filmato creato;
- per modificare dinamicamente il testo, questo dev'essere comunque convertito in un clip filmato (ovvero creo una caselal di testo con lo strumento per creare del testo sullo stage e lo converto a simbolo clip filmato);

La cosa che non mi è chiara è se tu hai creato graficamente il cerchio animato con i 100 fotogrammi, salvato come clip filmato e usato su AS 3.0 (ma qui non capisco come mai lo inizializzi con il costruttore "new" :/ ) anche se l'addChild mi fa' pensare che fosse una classe costruita in AS 3.0 e poi inserita dinamicamente con l'operatore new.

Mentre attendo la tua risposta, provo a trovarne di mie lavorando su questo mio preloader per il sito flash

Grazie comunque per la risposta!

[trez]

Ho appena tentato adattandolo al mio caso, ma non riesco a venirne fuori.
Il codice è il seguente:

stop();
trace("inizio del codice");

this.addEventListener(Event.ENTER_FRAME, loadingProgress);

function loadingProgress(evt:Event):void {
    trace("loadingProgress");
    var caricamentoInCorso:Number = loader_barra.target.loaderInfo.bytesLoaded;
    trace("caricamentoInCorso = " + caricamentoInCorso);
    var caricamentoCompletato:Number = loader_barra.target.loaderInfo.bytesTotal;
    var percentuale:Number = Math.round(caricamentoInCorso/caricamentoCompletato*100);
    contatore.text = percentuale.toString() + "%";
    loader_barra.gotoAndStop(percentuale);
    if(percentuale >= 100){
        this.removeEventListener(Event.ENTER_FRAME,loadingProgress);
        this.gotoAndPlay(2);
    }//if
    
} 

Dove, come in precedenza:
- loader_barra è l'animazione della barra di caricamento disegnata, convertita a video clip e con nome istanza loader_barra data nel pannello proprietà;

- contatore è un testo creato con lo "strumento testo" e convertito a video clip, dando il nome d'istanza "contatore";

[Sleter]

Ciao Trez

Francamente, io non sono un esperto e non sò darti risposte adeguate sulla logica di programmazione del codice che ho postato sopra, come ti dicevo, ho solo aggiunto l'animazione del preloader e quello che sò è che in AS3 in assenza dei metodi getBytesLoaded e getBytesTotal, per recuperare il valore dei bytes caricati e totali occorre utilizzare l'evento ENTER_FRAME.

Per quanto riguarda il clip dell'animazione che ho creato e esportato per ActionScript, hai ben intuito e non si tratta di un semplice MovieClip con nome istanza ma di una classe creata appositamente nel mio .fla e inserita dinamicamente.

1. Creo un nuovo simbolo MovieClip con l'animazione di un cerchio che si completa in 100 fotogrammi (potrebbe essere una barra)

2. Su un livello della linea temporale di questo clip inserisco un campo di testo dinamico e gli dò come nome istanza "testo".

3. Chiudo l'editor del simbolo MovieClip e cliccando con il tasto destro/mouse sul clip nella libreria vado su "concatenamento" e spunto la voce "esporta per actionScript" e il nome del clip appare in automatico nel campo "Classe".
Quando dò l'ok Flash mi avverte che non esiste una classe con questo nome ma che ne verrà creata una al momento della publicazione dell' SWF, e confermo con OK.

A questo punto nel primo fotogramma inserisco solo il codice che ho postato sopra e tutto funziona perfettamente.
Il MovieClip del Preloader appare alle coordinate x e y impostate nel codice e facendo la simulazione di download dal FlashPlayer, avanza, sia l'animazione che la percentuale di caricamento nel campo di testo dinamico, in relazione alla percentuale dei bytes caricati.

Unico "difetto" è che il mio Preloader con il codice sopra, rimane caricato e fermo sotto le immagini che ho poisizionato sulla timeline principale ma per evitare questo, basta aggiungere alla condizione if di fine caricamento un :

removeChild(preloader);

[and80]

Se vuoi realizzare un semplice preload su frame puoi utilizzare l'evento enterFrame, con un codice abbastanza semplice, come questo:

addEventListener (Event.ENTER_FRAME, loadingItems);

function loadingItems (e:Event):void {

    var bytes_loaded = Math.round(stage.loaderInfo.bytesLoaded);
    var bytes_total = Math.round(stage.loaderInfo.bytesTotal);
    var getPercent = bytes_loaded/bytes_total;

    trace (Math.round(getPercent*100)+"%");

    if (bytes_loaded == bytes_total) {

        removeEventListener (Event.ENTER_FRAME, loadingItems);
        gotoAndStop (10);

    }
}


stop (); 

Se metti un'immagine abbastanza pesante sul secondo frame e fai un test di scaricamento da flash, vedrai il trace progressivo basato sul caricamento.

Fermo restando che sia più pulita e collimi meglio con l'uso di javascript (che serve per l'incorporamento) la possibilità di cui invece parlava Sleter e per la quale avevo sviluppato una document class da usare sul fla "caricatore" di quello priincipale.

La classe è questa, analizzandola si può notare l'uso di un Loader che carica silenziosamente il filmato principale e a fine caricamento lo "trasporta" nella timeline principale rendendolo l'unico figlio della classe Stage, come da schema di distribuzione degli elementi di visualizzazione all'interno del filmato swf (visibile sotto il codice):

package {
    import flash.display.Loader;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.ProgressEvent;
    import flash.net.URLRequest;
    public class StagePreload extends Sprite {
        public function StagePreload ():void {
            if (stage) init();
            else addEventListener(Event.ADDED_TO_STAGE, init);
        }
        private function init (evt:Event = null):void {
            removeEventListener(Event.ADDED_TO_STAGE, init);
            var loader:Loader = new Loader();
            loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progress);
            loader.contentLoaderInfo.addEventListener(Event.COMPLETE, complete);
            loader.load(new URLRequest("filmato_principale.swf"));
        }
        private function progress (evt:ProgressEvent):void {
            trace ((Math.floor((evt.bytesLoaded/evt.bytesTotal)*100))+"%");
        }
        private function init (evt:Event):void {
            var loader:Loader = evt.target as Loader;
            stage.addChildAt (loader.content, stage.numChildren-1);
            stage.removeChild (this);
        }
    }
} 

[trez]

Vi ringrazio tantissimo!
Ho trovato la soluzione a tanti enigmi con il vostro codice, anche perché mi ha dato modo di cercare più precisamente altre cose per risolvere i miei dubbi.
Alla fine ho risolto così:

stop();

this.addEventListener(Event.ENTER_FRAME, loadingProgress);

function loadingProgress(evt:Event):void {
    var caricamentoInCorso:Number = evt.target.loaderInfo.bytesLoaded;    
    var caricamentoCompletato:Number = evt.target.loaderInfo.bytesTotal;
    var percentuale:Number = Math.round(caricamentoInCorso/caricamentoCompletato*100);
    contatore.text = percentuale.toString() + "%";
    loader_barra.gotoAndStop(percentuale);
    if(percentuale >= 100){
        this.removeEventListener(Event.ENTER_FRAME,loadingProgress);
        this.gotoAndPlay(2);
    }//if
    
} 

e sembra funzionare bene!

Comunque mi studio bene anche la classe che mi hai incollato qui sopra perché la trovo comunque molto interessante!

Grazie ancora!