Share
De două ori pe lună, revizuim câteva postări preferate ale cititorilor noștri de-a lungul istoriei Activetuts +. Acest tutorial a fost publicat pentru prima oară în iulie 2009.
Preloaderele sunt necesare în aplicațiile Flash. Acestea informează utilizatorul că programul este în desfășurare, dar nu poate afișa niciun conținut până când nu este suficient încărcat. În acest tutorial vă ajut să creați un pre-încărcător inspirat de Apple MovieClip și să vă învăț cum să afișați unele informații de încărcare. Toate acestea folosind Flash și ActionScript 3.0.
Să aruncăm o privire la rezultatul final la care vom lucra:
Vom crea un film MovieClip cu preloader folosind instrumente Flash, cum ar fi Instrumentul Primitiv Rectangular și ceva foarte important pentru a obține alinierea corectă: opțiunea Snap To Objects. Clipul va avea mișcarea în cronologie și vom construi codul în două clase. Prima clasă va avea grijă de preloader, iar cealaltă va fi clasa Document, unde vom porni preloaderul.
Deschideți Flash și creați un fișier Flash nou (ActionScript 3).
Setați dimensiunea scenei la dimensiunile dorite și adăugați o culoare de fundal. Am folosit dimensiunea de 600 x 300 pixeli și am adăugat un gradient radial gri (# 666666, # 333333).
Acest preîncărcător este compus dintr-o formă simplă, care se repetă de 12 ori.
Selectați Instrumentul Primitiv Rectangular și setați raza de colț la 15, asigurați-vă că ați blocat controlul razei de colț, astfel încât fiecare colț să fie rotunjit la fel.
Setați culoarea alb și trageți un dreptunghi de 25 x 85px, nu folosiți un accident vascular cerebral.
Asta este, aceasta este forma de bază care va fi partea principală a preloaderului nostru.
Utilizați panoul Align (Aliniere) pentru a seta forma creată anterior în partea superioară a scenei.
Duplicați forma (Cmd + D) și aliniați-o spre centru.
Duplicați ambele forme și apoi mergeți la Modificați> Transformați> Rotire 90?.
Aici vine partea dificilă, selectați Free Transform Tool și asigurați-vă că ați selectat opțiunea Snap To Objects (aceasta este pictograma magnet din bara de instrumente sau puteți accesa View> Snapping> Snap to Objects). Începeți rotirea formelor de sus și de jos, veți observa că rotația se oprește la fiecare unghi determinat, vom folosi două opriri pentru a separa formele unul de celălalt, terminând astfel:
Vom schimba proprietatea alpha pentru a obține efectul "follow" pe care îl urmăm. Există 12 forme, care sunt puțin mai mult de 8, dar pentru a evita utilizarea zecimalelor vom seta 9 în 8 multipli și pentru ultimele 3 vom adăuga 10. Aceasta ne dă valori alfa de 8, 16, 24? 72, 80, 90, 100. Uitați-vă la imagine pentru a obține ideea.
Conversia tuturor formelor într-un singur filmClip și denumirea acestuia "Preloader". Bifați caseta de selectare Export pentru acțiuni și scrieți "classes.Preloader" în câmpul text al clasei. Faceți dublu clic pe clip pentru a avea acces la linia sa de timp. Procesul de animație este foarte simplu; adăugați un nou Cadru cheie și rotiți formele până când forma alfa 100% este în poziția în care a fost forma de alfa 8%. Repetați acest lucru până când veți obține animația completă. Cadrele ar trebui să fie în această ordine:
Deoarece animația este bazată pe cronologie, viteza va depinde de cadrele pe secundă ale filmului, a mea este de 25fps și am folosit 2 cadre pe stat.
Preloaderul nostru are o dimensiune de 300 x 300 pixeli, în mod normal nu ar fi atât de mare, dar este bine să aveți opțiunea. Alegeți o dimensiune potrivită pentru preloader și centralizați-o pe scenă. Am ales 48 x 48 px.
Creați un câmp de text dinamic și dați-i numele de exemplu "info". Aceasta va afișa suma totală a KB care se încarcă, suma încărcată curent și procentul pe care îl reprezintă. Scrieți un text pentru a obține o idee despre dimensiunea pe care o va utiliza și pentru ao centra.
Creați un nou fișier ActionScript și începeți să importați clasele necesare:
clase de pachete import flash.display.MovieClip; import flash.text.TextField; importul flash.events.Event; import flash.events.ProgressEvent;
public Preloader clasa extinde MovieClip
Din moment ce preloaderul nostru este un MovieClip și folosește o cronologie, vom extinde această clasă folosind clasa MovieClip.
Trebuie doar să folosim o variabilă în această clasă. Această variabilă va stoca numele instanței câmpului de text pe care îl folosim pentru a afișa informațiile de încărcare.
privat var dataTextField: TextField;
funcția public start (dataTextField: TextField): void this.dataTextField = dataTextField; // Setează dataTextField var la valoarea parametrului / * Obiectul loaderInfo este responsabil de procesul de încărcare, în acest cod adăugăm ascultători pentru a verifica progresul și când filmul este complet încărcat * / this.loaderInfo.addEventListener (ProgressEvent. PROGRESS, peProgress); this.loaderInfo.addEventListener (eveniment.COMPLETE, onComplete);
funcția privată peProgress (e: ProgressEvent): void / * Aici folosim câteva variabile locale pentru a face un cod de citire mai bun * / var loadedBytes: int = Math.round (e.target.bytesLoaded / 1024); var totalBytes: int = Math.round (e.target.bytesTotal / 1024); var procent: int = (e.target.bytesTotal / e.target.bytesLoaded) * 100; / * Setează datele de încărcare în câmpul text * / dataTextField.text = String (încărcateByte + "din" + totalBytes + "KB Loaded \ n" +% + "% Completat");
Accentsconagua
funcția privată onComplete (e: Event): void / * Eliminare ascultători * / this.loaderInfo.removeEventListener (ProgressEvent.PROGRESS, onProgress); this.loaderInfo.removeEventListener (eveniment.COMPLETE, onComplete); // Aici puteți adăuga o funcție pentru a face ceva specific, am folosit doar o trace * / trace ("Loaded!"); Creați un nou fișier ActionScript și începeți să scrieți:
clase de pachete import flash.display.MovieClip; public class Main extinde MovieClip funcția publică Main (): void / * Începe preloaderul, "preloader" este numele instanței clipului * / preloader.start (info);
Acest cod va fi clasa de documente, deci reveniți la fișierul .Fla și adăugați "classes.Main" la câmpul de text al clasei din panoul proprietăților.
Puteți schimba întotdeauna culoarea preloader-ului pentru ao folosi cu fundaluri diferite, o modalitate ușoară de a face acest lucru este de a schimba valoarea Tint în proprietățile clipului, încercați!
Vă mulțumim pentru lectură, nu ezitați să lăsați comentarii și întrebări.
