Share
Due volte al mese, rivisitiamo alcuni dei post preferiti dei nostri lettori da tutta la storia di Activetuts +. Questo tutorial è stato pubblicato per la prima volta nel luglio 2009.
I preloader sono un must nelle tue applicazioni Flash. Dicono all'utente che il programma è in esecuzione ma non può mostrare alcun contenuto finché non sono sufficientemente caricati. In questo tutorial ti aiuterò a creare un MovieClip preloader ispirato ad Apple e ti insegnerò come visualizzare alcune informazioni di caricamento. Tutto ciò utilizzando Flash e ActionScript 3.0.
Diamo un'occhiata al risultato finale su cui lavoreremo:
Creeremo un MovieClip preloader utilizzando strumenti Flash come lo Strumento Rettangolo Primitivo e qualcosa di molto importante per ottenere l'allineamento corretto: l'opzione Aggancia agli oggetti. La clip avrà il suo movimento nella timeline e costruiremo il codice in due classi. La prima classe si prenderà cura del preloader e l'altra sarà la Document Class, dove avvieremo il preloader.
Apri Flash e crea un nuovo file Flash (ActionScript 3).
Imposta le dimensioni dello stage sulle dimensioni desiderate e aggiungi un colore di sfondo. Ho usato 600 x 300 px di dimensioni e aggiunto un gradiente radiale grigio (# 666666, # 333333).
Questo preloader è composto da una forma semplice che viene ripetuta 12 volte.
Seleziona lo Strumento Rettangolo Primitivo e imposta il raggio dell'angolo su 15, assicurati di bloccare il controllo del raggio dell'angolo in modo che ogni angolo sia arrotondato allo stesso modo.
Imposta il colore su bianco e disegna un rettangolo di 25 x 85 pixel, non utilizzare un tratto.
Ecco, questa è la forma base che sarà la parte principale del nostro preloader.
Usa il pannello Allinea per impostare la forma precedentemente creata nella parte superiore centrale dello stage.
Duplica la forma (Cmd + D) e allinala al centro in basso.
Duplica entrambe le forme e quindi vai a Modifica> Trasforma> Ruota di 90?.
Ecco la parte difficile, seleziona lo strumento Trasformazione libera e assicurati di aver selezionato l'opzione Aggancia agli oggetti (questa è l'icona del magnete nella barra degli strumenti oppure puoi andare a Visualizza> Aggancio> Aggancia agli oggetti). Inizia a ruotare le forme in alto e in basso, noterai che la rotazione si arresta ad ogni angolo determinato, utilizzeremo due stop per separare le forme l'una dall'altra, finendo in qualcosa del genere:
Modificheremo la proprietà alpha delle forme per ottenere l'effetto "segui" che stiamo cercando. Ci sono 12 forme, un po 'più di 8 ma per evitare l'uso dei decimali imposteremo 9 in 8 multipli e gli ultimi 3 aggiungeremo 10. Questo ci dà valori alfa di 8, 16, 24? 72, 80, 90, 100. Dai un'occhiata all'immagine per avere l'idea.
Converti tutte le forme in un singolo MovieClip e chiamalo "Preloader". Seleziona la casella di controllo Esporta per Actionscript e scrivi "classes.Preloader" nel campo di testo della classe. Fare doppio clic sulla clip per accedere alla relativa linea temporale. Il processo di animazione è molto semplice; aggiungi un nuovo Keyframe e ruota le forme finché la forma alfa al 100% non si trova nella posizione in cui si trovava la forma alfa 8%. Ripeti fino a ottenere l'animazione completa. I frame dovrebbero essere in questo ordine:
Poiché l'animazione è basata sulla timeline, la velocità dipenderà dai fotogrammi al secondo del filmato, la mia è 25 fps e ho usato 2 fotogrammi per stato.
Il nostro preloader ha una dimensione di 300 x 300 px, normalmente non sarebbe così grande, ma è bene avere l'opzione. Scegli una dimensione appropriata per il tuo preloader e centralo sul palco. Ho scelto 48 x 48 px.
Creare un campo di testo dinamico e assegnargli il nome di istanza "info". Questo mostrerà il KB totale da caricare, l'importo attualmente caricato e la percentuale che rappresenta. Scrivi del testo per avere un'idea delle dimensioni che utilizzerà e centrarlo.
Crea un nuovo file ActionScript e inizia a importare le classi richieste:
classi di pacchetti import flash.display.MovieClip; import flash.text.TextField; import flash.events.Event; import flash.events.ProgressEvent;
public class Preloader estende MovieClip
Dato che il nostro preloader è un MovieClip e sta usando una timeline, estenderemo questa classe usando la classe MovieClip.
Abbiamo solo bisogno di usare una variabile in questa classe. Questa variabile memorizzerà il nome dell'istanza del campo di testo che stiamo usando per mostrare le informazioni di caricamento.
private var dataTextField: TextField;
funzione pubblica start (dataTextField: TextField): void this.dataTextField = dataTextField; // Imposta la variabile dataTextField sul valore del parametro / * L'oggetto loaderInfo è responsabile del processo di caricamento, in questo codice aggiungiamo listener per controllare l'avanzamento e quando il film è completamente caricato * / this.loaderInfo.addEventListener (ProgressEvent. PROGRESS, onProgress); this.loaderInfo.addEventListener (Event.COMPLETE, onComplete);
funzione privata onProgress (e: ProgressEvent): void / * Qui usiamo alcune variabili locali per rendere il codice di lettura migliore * / var loadedBytes: int = Math.round (e.target.bytesLoaded / 1024); var totalBytes: int = Math.round (e.target.bytesTotal / 1024); var percento: int = (e.target.bytesTotal / e.target.bytesLoaded) * 100; / * Imposta i dati di caricamento nel campo di testo * / dataTextField.text = String (loadedBytes + "di" + totalBytes + "KB Loaded \ n" + percent + "% Complete");
Accentsconagua
funzione privata onComplete (e: Event): void / * Remove listeners * / this.loaderInfo.removeEventListener (ProgressEvent.PROGRESS, onProgress); this.loaderInfo.removeEventListener (Event.COMPLETE, onComplete); // Qui puoi aggiungere una funzione per fare qualcosa di specifico, ho appena usato una trace * / trace ("Loaded!"); Crea un nuovo file ActionScript e inizia a scrivere:
classi di pacchetti import flash.display.MovieClip; public class Main extends MovieClip public function Main (): void / * Avvia il preloader, "preloader" è il nome dell'istanza del clip * / preloader.start (informazioni);
Questo codice sarà la classe del documento, quindi torna al file .Fla e aggiungi "classes.Main" al campo di testo della classe nel pannello delle proprietà.
Puoi sempre cambiare il colore del preloader per usarlo con sfondi diversi, un modo semplice per farlo è quello di cambiare il valore Tint nelle proprietà della clip, provalo!
Grazie per la lettura, sentiti libero di lasciare commenti e domande.
