Il progetto che seguiremo in questo articolo è il seguente: mettiamo che abbiate creato un'introduzione in Flash per il vostro sito che occupa però 300Kb, sarà quindi necessario creare una schermata iniziale che indichi all'utente di attendere il caricamento e gli dica quanto manca al termine.
Ciò renderà più professionale la vostra creazione ed impedirà anche che sulle connessioni più lente la vostra animazione appaia con immagini che compaiono ad introduzione già cominciata.
L'aspetto finale del progetto sarà simile a questo:

Un'annotazione prima di cominciare: nella stesura di questo articolo presumo che sappiate come modificare le impostazioni degli oggetti di Flash e conosciate la funzione dei diversi pannelli. Un'altra cosa che non faremo è creare la scritta animata che vedete sopra: potete trovare un tutorial in proposito su FlashKit: lo trovate qui.
Ok, cominciamo: caricate il file .FLA che contiene l'animazione a cui volete aggiungere il Preloader ed aprite il pannello che contiene le scene. Premete il pulsante + in basso per aggiungere una scena e rinominatela Loader. Spostate poi la scena appena creata in cima alla lista, in modo che sia la prima scena. Il risultato sarà un pannello simile a questo:

Notate che l'ordine delle scene è molto importante, in quanto vengono eseguite nell'ordine che specificate, quindi il Preloader deve essere la prima scena ad essere eseguita.
Cominceremo creando il testo che indica i Kbytes che mancano alla fine del caricamento. Create un box di testo (utilizzando il Text Tool) su di un nuovo livello. Cercate di settare le sue dimensioni in modo che riesca a contenere il testo necessario per comprendere la frase completa. Aprite ora il pannello delle opzioni di testo e settate l'opzione Dynamic Text (dato che il testo della casella non rimane statico), single line e mettete nel campo variabile il nome gbytesLoaded (questa sarà la variabile che conterrà il testo della casella). Per aiutarvi seguite questa foto:

Ricordatevi poi di settare il testo centrato dal pannello paragrafo. Ora passiamo alla barra che segnala visualmente il tempo mancante. Inserite un nuovo simbolo (Inserisci->Nuovo Simbolo...) chiamatelo Bar ed accertatevi che si tratti di un clip filmato:

Ora dovreste essere in modalità di modifica del simbolo; disegnate un rettangolo in modo che il centro (la croce) si trovi all'estrema sinistra della barra. Aiutatevi con questa foto:

Tornate ora ad editare la scena del preloader. Create un nuovo livello, trascinate dalla libreria un'istanza del rettangolo sullo stage (per aprire la Libreria, Finestra->Libreria). Posizionate quest'istanza al centro dello stage ed aprite il pannello istanza, dandole il nome bytesBar.

Ricordatevi di estendere i frames della timeline in modo che non occupino solamente il primo frame (l'animazione verrà fatta rimanere nel primo frame finchè non sarà stato completato il caricamento, dopodichè passerà ai frames successivi, raggiunto l'ultimo passerà alla scena principale).

Ora siamo pronti ad inserire il codice Actionscript che comanderà tutta la scena. Per ragioni di convenienza, inseriremo tale codice nel clip filmato che rappresenta la barra. Selezionate quindi quest'ultima ed aprite il pannello Actions, inserite il seguente codice:

onClipEvent ( load ){
this._xscale = 0;
var bytesToLoad = _root.getBytesTotal();
}

onClipEvent ( enterFrame ) {
// get bytes so far
var bytesIn = _root.getBytesLoaded();
// set bar & Text
this._xscale = (bytesIn / bytesToLoad) * 100;
_root.gbytesLoaded = Math.floor(bytesIn/1024) + " Kbytes out of " + Math.floor(bytesToLoad/1024) + " KB loaded";
// Finito?
if (bytesIn != bytesToLoad) {
gotoAndPlay (1);
}
}

Analizziamo ora queste linee in dettaglio:
Settiamo inizialmente la scala orizzontale della barra a 0 (non essendo ancora stato caricato nulla).
Memorizziamo in bytesToLoad i bytes totali da caricare mediante il comando getBytesTotal().
Entriamo poi nella parte di codice che viene eseguita ad ogni frame.
Per prima cosa mettiamo in bytesIn il numero di bytes caricati fino a quel momento usando il comando getBytesLoaded().
Settiamo poi la scala della barra al rapporto tra bytes caricati e bytes da caricare (moltiplichiamo per 100 per avere una barra che si estenda maggiormente, provate a tralasciarlo per vedere cosa succede...).
Non vi spaventate poi per la riga che segue ;-) poteva per semplicità essere scomposta su più linee, ma ho preferito questa forma più compatta... Quello che esegue è memorizzare la stringa di testo che indica i Kbytes caricati nella variabile gbytesLoaded della casella di testo. Il metodo floor() dell'oggetto Math consente di convertire il numero che si passa come argomento ad un intero. Ciò è necessario perchè per convertire i bytes in Kbytes abbiamo diviso il loro numero per 1024. Utilizziamo poi l'operatore + per concatenare le diverse parti della stringa. Come vedete non si tratta di nulla di eccessivamente complicato...
Infine confrontiamo i bytes caricati con quelli da caricare e finchè sono diversi torniamo al primo frame.

Ok, un'ultima annotazione:
Quello che ho voluto illustrare è un metodo per creare un preloader di 'base', potete aggiungere tutti gli effetti grafici che volete, così come creare solo una barra senza alcuna indicazione testuale e delle transizioni in entrata ed in uscita.