AS1 Class.Preload HowTo

Esempio di applicazione della classe Preload

Inserito il 14-07-2006

Sento spesso sui forum che frequento di utenti che hanno a che fare, con poco o niente successo, con i preload.
Fino a flash mx in effetti creare un preload non era la cosa più semplice da fare perchè non c'era una classe predisposta come invece è stata introdotta successivamente da Flash Mx 2004, la classe MovieClipLoader.

Purtroppo, per chi non ha grande dimestichezza con il codice, anche applicare una classe tanto articolata come questa risulta ostico, così dopo l'ennesima richiesta di aiuto sui preload, ho pensato di semplificare il compito a chi si cimenta con questa situazione, che lavori con flash mx come con flash 2004 ecc... e ho scritto una piccola classe in AS1 da includere semplicemente nei filmati e richiamare anche su istanza multipla. Potete scaricare da questo link la classe con l'esempio di applicazione. Procediamo ora ad analizzare il modo di utilizzo.

Salvate il file Preload.as nella stessa cartella del file .fla in cui volete utilizzare il preload. Ora, se aprite il file Preload.as potrete notare in testa al documento nella parte commentata, un piccolo esempio di utilizzo dell'oggetto, analizziamola insieme

// includo il file Preload.as nel mio documento
#include "Preload.as"
//creo un'istanza della classe Preload attraverso la parola chiave "new"

var p = new Preload();
// creo un nuovo MovieClip in cui caricare il file esterno (swf o jpeg)
// non è comunque necessario creare un MC via AS, posso utilizzarne tranquillamente uno già presente sullo stage

var mc = _level0.createEmptyMovieClip("mc", 1);

// carico sull'MC il file esterno, in questo caso un'immagine, con il solito loadMovie
mc.loadMovie("image.jpg");
// per il momento tralasciamo la spiegazione di queste righe di codice

p.onLoadStart = function(target) {
	trace("Caricamento inziato");
};
p.onLoadProgress = function(target) {
	trace("Caricamento... "+this.percent+"%");
};
p.onLoadInit = function(target) {
	trace("Caricamento terminato con successo");
	trace("Le nuove dimensioni del clip '"+target+"' sono "+target._width+"x"+target._height+" pixel");
};
// con questo semplice comando richiamo l'attivazione del preload sul MovieClip prescelto
p.start(mc);

Ora passiamo all'analisi del codice tralasciato, in pratica il vero motore del preload.
Come si può evincere dalla lettura della parte di codice in questione, la classe Preload ha a disposizione tre metodi da definire prima dell'avvio del comando start in modo da ottenerne il corretto funzionamento, questi sono in ordine:

Per concludere, vediamo ora un codice completo per capire un possibile utilizzo della classe Preload, un preload sequenziale

// includo il file Preload.as con la direttiva #include

#include "Preload.as"
// creo una prototype che faccia apparire in dissolvenza le immagini caricate dall'esterno
MovieClip.prototype.Alpha = function() {
	this.onEnterFrame = function() {
		this._alpha += 10;
		if (this._alpha>=100) {
			delete this.onEnterFrame;
		}
	};
};
//creo un'istanza della classe Preload
var p = new Preload();

// vedi sopra
p.onLoadStart = function(target) {
	// all'avvio del preload mando il clip contenitore ad _alpha = 0
	target._alpha = 0;
	// attacco dalla libreria un clip che rappresenta una barra di progresso per il mio preload "grafico" e lo rendo inizialmente invisibile
	_root.attachMovie("prelo", "prelo", 150, {_x:Stage.width/2-100, _y:Stage.height-5, _alpha:0});
};


// vedi sopra
p.onLoadProgress = function(target) {
	// attivo la visualizzazione della barra di progresso
	prelo._alpha = 100;
	// calcolo durante tutta la durata del preload il valore percentuale del caricamento avvenuto
	// e ne utilizzo il valore per dare la "dimensione" di progresso alla barra

	prelo._xscale = this.percent;
};
//vedi sopra
p.onLoadInit = function(target) {
	// a caricamento avvenuto diminuisco le dimensioni del clip caricato al 10%
	target._xscale = target._yscale=10;
	// poi gli assegno la prototype che lo farà apparire in dissolvenza

	target.Alpha();
	
	/* questa parte di codice gestisce la posizione dei vari clip caricati in sequenza, e dice in pratica che
	se l'indice dei clip è diverso da 1 allora il clip dovrà assumere una posizione incrementale rispetto a quello
	che lo precede, ma se il clip precedente ha una posizione che risulta >=256, allora questo dovrà "andare accapo"
	la sintassi dell'if scritto in quel modo si dice "sintassi abbreviata", viene dichiarata con il cosidetto operatore condizionale (?:)
	e consente di convertire istruzioni if..else semplici in una sola riga di codice
	------- */

	if (_root.i>1) {
		target._x = (target._parent["mc"+Number(_root.i-1)]._x<256) ? target._parent["mc"+Number(_root.i-1)]._x+target._parent["mc"+Number(_root.i-1)]._width+10 : 0;
		target._y = (target._parent["mc"+Number(_root.i-1)]._x<256) ? target._parent["mc"+Number(_root.i-1)]._y : target._parent["mc"+Number(_root.i-1)]._y+target._parent["mc"+Number(_root.i-1)]._height+10;
	}
	// -------
	// rimuovo la barra di avanzamento dallo stage
	_root["prelo"].removeMovieClip();
	// incremento il valore dell'indice

	_root.i++;
	// dopodichè verifico subito se l'indice è ancora minore o uguale a quello stabilito come massimo

	if (_root.i<=25) {
		// in tal caso, creo un altro clip su cui caricare un'altra immagine
		target._parent.createEmptyMovieClip("mc"+_root.i, _root.i);
		// carico l'immagine
		target._parent["mc"+_root.i].loadMovie("image.jpg");
		// e riattivo il Preload, usando this per richiamarlo, visto che attualmente sono al suo interno

		this.start(_level0["mc"+_root.i]);
	}
};

// in questa parte di codice, la parte da cui inizia il tutto...
// creo l'indice che partirà da 1
_root.i = 1;
// creo il primo clip
var mc1 = _level0.createEmptyMovieClip("mc1", 1);
// ci carico dentro l'immagine
mc1.loadMovie("image.jpg");
// e attivo il preload che si concluderà solo quando anche la 25esima immagine sarà caricata
p.start(mc1);

Come al solito, a voi prove, modifiche, utilizzi concreti, saluti!