Share
In questo tutorial creeremo un file SWF che si precaricherà automaticamente, il che significa che il preloader e il contenuto si trovano nello stesso file. Andremo su come fare le cose nel modo giusto ed evitare le trappole.
L'idea di un singolo preload SWF è che tu abbia un oggetto Flash che si precarica da solo. Ciò significa che il preloader, con le relative funzionalità e risorse, è incorporato insieme nello stesso file SWF dell'intero filmato o dell'applicazione Flash.
Inizieremo questo tutorial con un po 'di teoria e finiremo con la creazione di un FLA insieme a una classe di preloader che puoi usare in progetti futuri. Nel corso del tutorial discuteremo di insidie comuni e considerazioni importanti.
Inoltre, ora che Activetuts + ha iniziato a concentrarsi sulle classi di documenti e in generale a mantenere le cose nei file di classe il più possibile, faremo proprio questo nella parte pratica di questo tutorial. Scopri il suggerimento rapido: Come utilizzare una classe di documenti in Flash se hai bisogno di imparare le basi.
Assicurati di disporre di una versione aggiornata di Flash CS3 o Flash CS4. So per certo che un successivo aggiornamento CS4 ha cambiato il modo in cui le classi vengono caricate e ciò può fare la differenza qui!
Devo ammettere subito che questo tutorial è piuttosto lungo per questo argomento ristretto, ma contiene tutto ciò che devi sapere, quindi allacciati e prendiamoci!
L'idea di un preloader è abbastanza ovvia: vuoi assicurarti che l'utente riceva un feedback visivo che indica che l'oggetto Flash si sta caricando. Incorporare un file Flash di grandi dimensioni che richiede 10 secondi per caricare potrebbe significare la differenza tra gli utenti che soggiornano o escono dal sito web, nel caso in cui non fosse per il preloader che dice all'utente di tenere premuto.
Il processo di creazione di file Flash "auto-pre-caricamento" presenta alcuni problemi e problemi. Ci sono altre tecniche di precaricamento che sono davvero facili da mettere insieme, come un file SWF che precarica un altro e lo aggiunge allo stage una volta caricato.
Allora perché preoccuparsi? Bene, ci sono situazioni in cui non hai scelta.
Ad esempio, potresti voler creare giochi Flash che speri di diffondere nel maggior numero possibile di portali di giochi Flash. La maggior parte di questi portali supporta solo i giochi sotto forma di un singolo file SWF, il che non lascia altra scelta se non quella di assicurarsi che il gioco si precarichi bene all'interno di se stesso.
A parte questi esempi ovvi, c'è l'argomento di avere un prodotto completo in un solo file che lo rende facile da gestire.
Quando il tuo browser si imbatte in un oggetto Flash e inizia a caricarlo, si avvia dall'inizio della timeline. Carica i frame uno dopo l'altro. Non appena viene caricato il primo frame, può essere visualizzato.
Il nostro approccio qui è di mettere un preloader sul primo frame in modo che l'utente veda qualcosa che accade, mentre il browser continua a caricare il resto del file. Scriviamo codice per verificare i progressi generali e quando è completato continuiamo con il contenuto principale del file.
La sfida è mantenere le dimensioni del primo fotogramma al minimo. Se lasci che il codice e i suoni si accumulino nel primo fotogramma potresti avere un preloader che non è visibile fino a quando non avrai caricato il 60% del filmato.
Un ottimo consiglio quando si tratta di utilizzare un contatore percentuale che mostra i numeri è quello di utilizzare un carattere che è di piccole dimensioni in byte. Ma questo ti porta solo lontano. Sfortunatamente dobbiamo lavorare un po 'più duramente per avere le cose a modo nostro!
È già stato detto molte volte e vale la pena ripeterlo:
Preloader, il più difficile dei compiti più semplici in Flash ...
Ci sono un certo numero di cose che influenzeranno ciò che verrà inserito in quale frame, ad esempio:
Il problema principale che dobbiamo affrontare è controllando ciò che finisce sul frame uno, perché, come detto sopra, tutto ciò che si trova sul frame 1 deve essere caricato prima che il preloader possa essere visualizzato.
Oltre a ciò, ci sono differenze tra il funzionamento di Flash CS3 e CS4. Nel prossimo passo farò una serie di affermazioni accuratamente ricercate a cui puoi fare riferimento se necessario. Dovrebbe essere una grande risorsa se vuoi rapidamente risolvere il tuo pre-caricamento, per capire perché non si comporta come ti aspetti.
Proverò a rendere le dichiarazioni un po 'più tangibili facendo riferimento a TweenLite, una grande libreria di tweening di Jack Doyle su greensock.com. Useremo TweenLite nella parte pratica di questo tutorial, quindi questo avrà più senso.
Queste affermazioni sono valide sia per Flash CS3 che per CS4, salvo diversamente specificato. "Importare TweenLite" significa fondamentalmente "importare e usare TweenLite" - i risultati potrebbero essere diversi se non si utilizza effettivamente il codice poiché il compilatore Flash ignora le importazioni inutilizzate. Digitare semplicemente una dichiarazione di importazione non equivale a utilizzare il codice.
Le prossime tre dichiarazioni si riferiscono allo scenario in cui si dispone di un MovieClip esportato per ActionScript, utilizzando un file di classe esterno, che a sua volta importa TweenLite nel file di classe.
Le prossime tre dichiarazioni si riferiscono allo scenario in cui hai un MovieClip esportato per ActionScript come "CustomClass", usando un file di classe esterno o no, che viene istanziato e aggiunto allo stage da un MovieClip posizionato sulla timeline (solo come il MovieClip dalle precedenti tre dichiarazioni.) Questo CustomClass è solo istanziato e non esiste in precedenza sulla timeline principale.
Con tutte queste restrizioni, consideriamo almeno questa affermazione positiva:
Ecco una cosa davvero interessante:
Sì, avete letto bene. Immagino sia giusto presumere che Adobe voglia far aggiornare la gente a CS4. Quindi cosa fare se sei bloccato con CS3 e l'erba è più verde dall'altra parte? Ti dirò nel prossimo passaggio.
Questo passaggio completo è solo per quelli di voi che utilizzano Flash CS3.
Se leggi tutte le istruzioni nel passaggio precedente, ti renderai conto del problema di avere un sacco di clip filmate esportate per ActionScript. Questi dovranno essere tutti caricati nel primo frame o non essere disponibili. Fortunatamente, quelle affermazioni erano sotto il presupposto che quelle attività non erano mai state collocate nella linea temporale principale, che è la nostra soluzione! (Questo è anche l'unico modo per caricare suoni diversi dal frame uno ...)
Questo è come è fatto:
In questo modo tutte le risorse verranno caricate nel secondo frame. La soluzione è un po 'noiosa, ma non è così difficile come dover andare a comprare un nuovo software per questo particolare problema.
(Complimenti a 8bitrocket per questo trucco!)
Una cosa che dovrei menzionare prima di iniziare a lavorare è il profiler della larghezza di banda. Questo è uno strumento essenziale per risolvere i problemi di precaricamento. Quando visualizzi l'anteprima di un film puoi andare su per visualizzare, quindi scegliere il profiler della larghezza di banda. Oppure premi Ctrl + B.
Qui è possibile alternare grafici fotogramma per fotogramma e grafici di streaming. Puoi anche simulare il download del film a una velocità di connessione a tua scelta scegliendolo dal menu Visualizza o premendo Ctrl + Invio ancora una volta (modifica la velocità di download simulata utilizzando il sottomenu Visualizza> Scarica impostazioni). Questo è essenziale per scoprire come apparirà il tuo preloader, senza passare attraverso il fastidio di caricarlo e limitare la larghezza di banda. Per quel caso specifico, però, posso consigliare Firefox Throttle.
Oltre allo strumento molto utile che è il profilatore della larghezza di banda, esiste la possibilità di generare un rapporto sulle dimensioni. Premi Ctrl + Maiusc + F12 per aprire la finestra di dialogo Impostazioni pubblicazione.
Vai alla scheda Flash, e nella sezione Avanzate c'è una casella con l'etichetta "Genera rapporto dimensioni". Quando questa casella è selezionata, l'anteprima o la pubblicazione del film genererà un file di testo nella stessa cartella del file FLA che contiene informazioni utili su quali parti costituiscono la dimensione totale del filmato.
Finalmente possiamo iniziare a creare un filmato Flash con un bel preloader autonomo!
Useremo una tecnica di "tre frame preloading". Sul primo fotogramma inseriremo un MovieClip preloader che ha la sua classe "Preloader". Sul secondo frame carichiamo tutte le classi e sul terzo frame carichiamo e mostriamo il contenuto. Inseriremo il contenuto in una MovieClip denominata Applicazione con una classe associata "Applicazione". Questo è dove va la carne dell'applicazione.
Inizia creando un nuovo documento AS3. Lo sto facendo 600x400px, sfondo grigio scuro, 24 FPS. Queste impostazioni non contano però.
Imposta la classe del documento su Principale e premi OK.
Vai su File> Impostazioni pubblicazione, la scheda Flash, quindi le impostazioni di ActionScript 3.0. Digitare "frame 2" nel campo "Esporta classi nel frame".
Ovviamente il design di un preloader non influirà sulla funzione. Darò istruzioni passo passo, ma sentiti libero di saltare queste parti e prendere il tuo approccio se lo desideri. Assicurati solo di annotare le parti a cui mi riferisco nel codice in seguito.
Disegna un rettangolo con angoli arrotondati e dargli un gradiente blu. Quindi trasformalo in un simbolo Movie Clip, chiamalo Preloader. Scegliere di esportarlo per ActionScript e chiamare la classe Preloader.
All'interno di questo nuovo Movie Clip, disegna un nuovo rettangolo d'angolo arrotondato con una sfumatura grigia, trasformalo in un altro Movie Clip e assegnagli il nome di un'istanza di progressArea.
Vai avanti e abbina il layout del livello che ho inserito nella figura sopra. Successivamente, crea un duplicato dell'ultima forma e posizionalo nel livello della barra di avanzamento sopra l'area di avanzamento. Dagli un gradiente blu chiaro, trasformalo in un Movie Clip e assegnagli il nome di un'istanza di progressBar. Abilita le guide per il ridimensionamento a 9 sezioni e assicurati di mantenere i bordi arrotondati sinistro e destro all'esterno.
Infine, crea un campo di testo dinamico con un nome di istanza di percentageText. Rendi il testo allineato a destra. In questo modo, il segno di percentuale non si sposterà mai, solo i numeri (che cambiano comunque). Entra nell'incorporazione dei caratteri e assicurati di incorporare i numeri e il segno di percentuale (%). Per fare un preloader veramente piccolo sto usando un piccolo pixelfont chiamato Pixel Mix da dafont.com. Gli sto anche dando un bagliore blu solo perché posso.
Assicurati che l'intero preloader MovieClip sia posizionato nel primo frame e abbia un nome di istanza di preloader. Crea un nuovo livello chiamato "AS" e metti uno stop (); nel primo frame. Mantiene il preloader nel proprio livello, "Preloader". Crea un altro livello chiamato "Applicazione". Questo è dove manterremo il contenuto principale alla fine.
Crea un nuovo file ActionScript e salvalo nella stessa directory del tuo file FLA. Denominalo Main.as:
package import flash.display.MovieClip; import flash.events.Event; public class Main extends MovieClip public function Main () preloader.addEventListener (Event.COMPLETE, onPreloaderComplete); preloader.setLoaderInfo (loaderInfo); funzione privata onPreloaderComplete (e: Event): void gotoAndStop (3);
Crea un nuovo file ActionScript e salvalo nella stessa directory di Preloader.as:
package import flash.display.LoaderInfo; import flash.display.MovieClip; import flash.events.Event; import flash.events.ProgressEvent; public class Preloader estende MovieClip public function Preloader () public function setLoaderInfo (ldrInf: LoaderInfo): void ldrInf.addEventListener (ProgressEvent.PROGRESS, onProgress); ldrInf.addEventListener (Event.COMPLETE, onComplete); private function onProgress (e: ProgressEvent): void var percento: int = Math.round (e.bytesLoaded / e.bytesTotal * 100); progressBar.width = percent / 100 * progressArea.width; percentageText.text = percentuale + "%"; funzione privata onComplete (e: Event): void dispatchEvent (e);
Quindi cosa fanno queste due classi?
Nel costruttore di Main, chiamiamo il metodo custom setLoaderInfo () del nostro preloader e passiamo l'oggetto LoaderInfo che è associato a Main.
Preloader riceve questo oggetto e aggiunge due listener di eventi ad esso. ProgressEvent attiva la funzione onProgress, in cui calcoliamo la percentuale dei byte caricati rispetto ai byte totali da caricare. La percentuale viene utilizzata per impostare la larghezza della barra di avanzamento e il testo del nostro campo di testo.
L'evento completo viene semplicemente rispedito a Main, che a sua volta salta la timeline principale al frame tre quando riceve l'evento.
Per avere qualcosa che mostri chiaramente il funzionamento del preloader, aggiungo una bella foto macro di un gatto chiamato Runa preso da un mio amico. Puoi trovare l'immagine nei file sorgente forniti con questo tutorial. Ho importato la bitmap e la trasformo in una Movie Clip chiamata "Cat".
Sentiti libero di usare qualunque immagine trovi adatta. Dai al clip un nome di istanza di "gatto".
Come puoi vedere sullo screenshot qui sopra ho posizionato Cat MovieClip sul frame tre nel livello Application. Prendi qualsiasi MovieClip, gatto o non gatto, e premi nuovamente F8 per annidarlo all'interno di un nuovo MovieClip che chiami Application. Esporta questo per ActionScript come applicazione.
Creare la classe Application avviando un nuovo file AS e salvandolo come "Application.as". Avere la classe Application simile a questa:
package import com.greensock.TweenLite; import com.greensock.easing.Sine; import flash.display.MovieClip; public class Application estende MovieClip public function Application () TweenLite.to (cat, 7, scaleX: 4, scaleY: 4, onComplete: tweenBack, facilità: Sine.easeInOut); private function tweenBack (): void TweenLite.to (cat, 3, scaleX: 1, scaleY: 1, onComplete: reTween, facilità: Sine.easeInOut); private function reTween (): void TweenLite.to (cat, 7, scaleX: 4, scaleY: 4, onComplete: tweenBack, facilità: Sine.easeInOut);
Questo animerà il gatto dentro e fuori a tempo indeterminato, così da ricordare per sempre il dettaglio della sua pelliccia del naso. Come funziona questa classe non è importante, cosa è importante è che stiamo importando TweenLite e usandolo, assicurandoci che sarà una parte del file SWF una volta esportato.
Torniamo di nuovo alla panca della scuola per un minuto.
Questo film si compila bene in CS4. L'applicazione MovieClip è impostata per l'esportazione sul fotogramma 2, a meno che non sia stata modificata. Se lo hai cambiato potresti notare qualcosa di strano. Maggiori informazioni su questo nel prossimo passaggio.
Se sei su CS3 questa impostazione conta davvero. Dovrai andare e assicurarti di deselezionare la casella di controllo "Esporta nel primo fotogramma" nelle Proprietà dell'applicazione MovieClip, altrimenti verrà caricata interamente nel primo fotogramma!
Questo non è l'unico problema. Se si tenta di compilare si otterrà un errore di tipo 1046, dicendo che non si dispone del tipo TextField disponibile. Quindi, come puoi immaginare, CS3 fa le cose un po 'diversamente. Cosa sta succedendo? Bene, stai provando ad usare un campo di testo all'interno del MovieClip preloader ma non lo hai importato. In CS4 questo viene gestito automaticamente per te, ma non in CS3.
Fortunatamente la soluzione è semplice, basta aggiungere:
import flash.text.TextField;
alla tua classe Preloader e sei pronto.
Alcuni di voi potrebbero aver già pensato che avrei dovuto estendere Sprite per la mia classe di Preloader invece di MovieClip. Bene, questo è il motivo per cui non l'ho fatto; Volevo aspettare fino a questo punto per farlo apparire. Poiché il simbolo Preloader contiene sia "ProgressArea" che "ProgressBar", che sono entrambi MovieClip, avresti ottenuto lo stesso errore di tipo 1046.
La stessa soluzione è possibile anche qui, naturalmente. In effetti, dovresti cambiare il Preloader per estendere Sprite invece di MovieClip, e se stai usando CS3 assicurati di importare anche la classe Sprite all'interno della classe Preloader.
Ho menzionato uno strano evento nell'ultimo passaggio. Se deselezioni "Esporta nel frame 2" di Application ed esegui un download simulato, vedrai scomparire il preloader, a meno che tu non abbia esteso il keyframe del preloader per coprire anche il secondo frame.
Quindi cosa sta succedendo davvero? In poche parole, la prima fermata (); la dichiarazione non conta. Come è ovvio per l'evidente pianificazione del flusso di lavoro? Si noti che se si inserisce un'istruzione trace nel primo frame dopo stop (); chiama, traccia. Importante: nota che questo problema si manifesta solo quando simuliamo il download!
La lezione appresa qui è non fidarti del download simulato! Non ti mostrerà esattamente come le cose si caricheranno e funzioneranno. Puoi semplicemente mantenere lo stop (); e preloader nel primo frame e starai bene per quanto riguarda la distribuzione. Tuttavia può essere un'anteprima dell'anteprima a meno che non sia impostata l'opzione Applicazione per esportare sul fotogramma 2. E questo è solo per questo specifico scenario.
In CS3 devi deselezionare la casella di esportazione sull'applicazione MovieClip altrimenti finirai con il caricamento nel primo fotogramma. Ma se lo fai, ti imbatterai in questo problema. Quindi vai avanti ed estendi il preloader al secondo frame.
Vai avanti e guarda in anteprima il film. Esegui un download simulato a bassa velocità e goditi il preloader magistralmente * (* si applica magistralmente solo se hai seguito le mie istruzioni alla lettera).
Se osservi il grafico fotogramma per fotogramma o un rapporto sulle dimensioni generate, vedrai che il codice è caricato nel secondo fotogramma. Il primo frame è solo 4kb e comprende la classe Preloader e glifi del carattere incorporato. Ora, 4kb è abbastanza abbordabile per quanto riguarda il tempo di attesa prima di vedere il preloader, non credi?
Potresti vedere diverse dimensioni su CS3 e vedrai sicuramente diverse dimensioni con diversi tipi di carattere. O gatti.
Potresti avere l'idea che vorresti usare TweenLite per svanire il preloader interpolando l'alpha a 0 - ma non vuoi caricare TweenLite nel primo frame poiché aggiunge un altro 8kb al download iniziale.
Ci sono diversi modi per farlo e lo risolviamo avendo un MovieClip sul terzo fotogramma che cattura il preloader e lo interpone. Una volta completato, passerà al quarto frame, al quale avremo spostato l'applicazione.
Il motivo per cui lo inseriamo nel terzo frame è che non possiamo inserirlo nel secondo frame senza che TweenLite sia caricato nel primo frame.
Ora ci stiamo allontanando dalla tecnica di pre-caricamento a tre frame standard.
Aggiungi un nuovo livello chiamato "Preloader catcher". Assicurati di mettere stop (); chiama i frame uno, due e tre. Questo serve a prevenire l'anteprima incasinata durante la simulazione di un download, come accennato in precedenza.
Vai avanti e sposta l'applicazione sul quarto fotogramma oltre ad estendere Preloader al terzo fotogramma.
Assicurati di avere un fotogramma chiave sul terzo fotogramma del livello catcher Preloader. Vai a questa cornice, disegna una piccola figura e imposta l'alfa del colore di riempimento su 0%. Questo dovrebbe essere un MovieClip invisibile. Trasformalo in un simbolo MovieClip chiamato PreloaderCatcher o qualcosa di simile.
Esportare MovieClip come PreloaderCatcher. Se stai usando CS4 non importa se lo esporti per il frame 2 o meno, dal momento che verrà caricato in quella cornice, non importa quale. Bene, cambia una cosa, ricordi? Se o non il forma è caricato sul frame 2. In sostanza non importa considerando la dimensione del file quasi inesistente per questa forma. Si potrebbe anche deselezionare per buona abitudine però.
Crea un nuovo file di classe chiamato PreloaderCatcher.as:
Accentsconagua
package import com.greensock.TweenLite; import flash.display.MovieClip; import flash.display.Sprite; import flash.events.Event; importare Preloader; public class PreloaderCatcher estende Sprite public function PreloaderCatcher () addEventListener (Event.ADDED_TO_STAGE, onAdded); funzione privata onAdded (e: Event): void removeEventListener (Event.ADDED_TO_STAGE, onAdded); var preloader: Sprite = MovieClip (parent) .getChildByName ("preloader") come Sprite; TweenLite.to (preloader, 0.5, alpha: 0, onComplete: function (): void MovieClip (parent) .nextFrame ();); Come puoi vedere, questa classe funziona innanzitutto ottenendo il preloader lanciando il genitore come Sprite e chiamando getChildByName ("preloader"), dove preloader è il nome dell'istanza. Il preloader viene lanciato anche su Sprite, quindi TweenLite viene utilizzato per dissolverlo.
Quando l'interpolazione è completa, la funzione onComplete in TweenLite esegue il cast genitore come MovieClip, quindi è possibile chiamare il metodo nextFrame.
Come ho detto prima, ora ci siamo allontanati dalla tecnica di precaricamento dei tre frame. Questo di per sé non è esattamente una bestemmia, ma sono sicuro che alcuni di voi si chiedono perché l'abbiamo fatto. Invece, avremmo potuto gestire l'interpolazione del preloader all'interno della clip dell'applicazione ...
In tal caso, hai perfettamente ragione! Il motivo per cui ho usato quattro fotogrammi qui è stato per mostrarti come farlo mantenendo le cose separate. Intercettare il preloader; appartiene alla parte del preloader o alla parte Application? Preloader decisamente, ma in questo caso non volevamo che si caricasse nel primo frame. Pertanto, finiamo con questa classe extra "catcher".
Ricorda solo che è tutto facoltativo. Una volta che sai come fare tutto, puoi facilmente decidere qualunque sia la tua situazione.
Al punto 7 ti ho parlato dei problemi di caricamento degli asset in CS3. Poiché questo tutorial è rivolto sia agli utenti di CS3 che di CS4, andremo con il minimo comune denominatore e useremo l'approccio di AssetHolder. Se stai usando CS4 puoi eseguire i passaggi successivi nello stesso modo e funzionerà allo stesso modo, oppure puoi saltare l'approccio di AssetHolder.
Inizia importando il suono "music.wav" dai file sorgente nel tuo FLA.
Entra ed esportalo per ActionScript e assicurati di deselezionare la casella "Esporta nel primo frame" in CS3. Per CS4 questo non farà molta differenza. Sto usando Flash CS4 che probabilmente hai già capito, quindi gli screenshot mostrano la finestra di dialogo CS4. Se lo desideri, puoi passare dalla compressione MP3 predefinita a qualcosa di più piacevole. In questo modo non sembrerà terribile.
Facciamo un altro paio di passaggi, aggiungendo del testo al film e mettendoli tutti in un MovieClip di AssetHolder!
Premi Ctrl + F8 per creare un nuovo simbolo MovieClip. Denominalo TextHolder ed esportalo per ActionScript, ancora una volta (in CS3) assicurandosi che la casella "Esporta nel primo fotogramma" sia deselezionata.
Quando crei, sarai "dentro" questa MovieClip. Digita del testo statico e assegnagli un colore bianco. Sto usando lo stesso font PixelMix di prima. Per creare un colore di tratto simulato, gli attribuisco un effetto di filtro glow con le impostazioni visualizzate di seguito.
Crea un nuovo livello chiamato AssetHolder. Crea un fotogramma chiave sul secondo fotogramma, premi Ctrl + F8 per creare un nuovo MovieClip e nominalo AssetHolder. Non esportarlo per ActionScript.
In MovieClip AssetHolder, crea tre livelli denominati AS, musica e risorse. Dal momento che "musica" è il nome dell'oggetto sonoro che stiamo usando, è quello che sto nominando il livello. Ora devi mettere uno stop (); chiama il primo frame del layer AS.
Quindi, crea un fotogramma chiave sul secondo fotogramma del livello di musica e risorse. Tras
