Ghidul cuprinzător pentru preîncărcarea unui fișier SWF unic

În acest tutorial vom crea un SWF care se preîncarcă, ceea ce înseamnă că preloaderul și conținutul se află în același fișier. Vom trece peste modul de a face lucrurile în mod corect și de a evita capcanele.


Pasul 1: Ce este preîncărcarea unui singur SWF?

Ideea de preîncărcare a unui singur SWF este că aveți un obiect Flash care se preîncarcă. Aceasta înseamnă că preloaderul, cu funcționalitatea și activele asociate, este încorporat împreună în același fișier SWF ca întregul film sau aplicație Flash.

Vom începe acest tutorial cu câteva teorii și o vom termina cu crearea unui FLA împreună cu o clasă de preloader pe care o puteți utiliza în proiectele viitoare. În cursul tutorialului vom discuta despre capcane și considerente importante.

De asemenea, acum că Activetuts + a început să se concentreze pe clasele de documente și, în general, să păstreze lucrurile în fișiere de clasă cât mai mult posibil, vom face asta doar în partea practică a acestui tutorial. Consultați Sfat rapid: Cum să utilizați o clasă de documente în Flash dacă doriți să învățați elementele de bază.

Asigurați-vă că aveți o versiune actualizată Flash CS3 sau Flash CS4. Știu sigur că o actualizare ulterioară a CS4 a schimbat modul în care sunt încărcate clasele și care poate face diferența aici!

Voi recunoaște imediat că acest tutorial este destul de lung pentru acest subiect îngust, dar conține tot ce trebuie să știți, așa că faceți-o în jos și să ajungeți la el!


Pasul 2: De ce preîncărcarea unui singur SWF?

Ideea unui preloader este destul de evidentă: doriți să vă asigurați că utilizatorul primește feedback vizual care indică încărcarea obiectului Flash. Încorporarea unui fișier Flash mare care durează 10 secunde pentru a încărca ar putea însemna diferența dintre utilizatorii care stau sau părăsesc site-ul web, în ​​cazul în care nu este cazul ca preloader-ul să spună utilizatorului să dețină.

Procesul de creare a fișierelor flash "auto preloading" prezintă câteva probleme și probleme. Există și alte tehnici de preîncărcare care sunt foarte ușor de pus împreună, cum ar fi un fișier SWF care preîncărcarea altui și adăugarea acestuia la scenă o dată încărcat.

Deci, de ce deranjez? Există situații în care nu ai de ales.

De exemplu, ați putea dori să creați jocuri Flash pe care sperați să le răspândiți la cât mai multe portaluri de jocuri Flash. Majoritatea acestor portaluri acceptă numai jocuri în formă de un singur fișier SWF care nu vă lasă de ales decât să vă asigurați că jocul dvs. preloads frumos din interior.

În afara unor astfel de exemple evidente, există argumentul că aveți un produs finalizat într-un singur fișier, ceea ce face ca acesta să fie ușor de gestionat.


Pasul 3: Cum se încarcă fișierele SWF

Când browserul dvs. se împiedică pe un obiect Flash și începe să îl încarce, acesta începe de la începutul liniei temporale. Încarcă cadrele unul după altul. De îndată ce primul cadru este încărcat, acesta poate fi afișat.

Abordarea noastră aici este de a pune un preloader pe primul cadru, astfel încât utilizatorul vede ceva ce se întâmplă, în timp ce browserul continuă să încarce restul fișierului. Vom scrie un cod pentru a verifica progresul general și, după terminarea acestuia, continuăm cu conținutul principal al fișierului.

Provocarea este de a menține dimensiunea primului cadru la un nivel minim. Dacă lăsați codul și sunetele să se adune în primul cadru, este posibil să aveți un preloader care nu este vizibil decât după ce ați încărcat poate 60% din film.

Un sfat excelent atunci când este vorba de utilizarea unui contor procentaj care afișează numere este de a folosi un font care este mic în dimensiunea octetului. Dar asta te duce numai până acum. Din nefericire, trebuie să muncim destul de greu să avem lucrurile în calea noastră!

Sa spus de mai multe ori și merită să spui din nou:

Preloadere, cele mai dificile dintre cele mai simple sarcini din Flash ...

Pasul 4: Variabilele definitorii

Există o serie de lucruri care vor afecta ceea ce va fi pus în ce cadru, cum ar fi:

  • În cazul în care în linia de timp ați pus active.
  • Cadrul pe care îl alegeți ca "cadrul de export de clasă" (a se vedea pasul 11).
  • Indiferent dacă puneți activele înainte sau după cadrul de export al clasei.
  • În Flash CS4 - alegerea exportului sau nu a activului în cadrul exportului de clase (în dialogul de proprietăți a simbolurilor).
  • În Flash CS3 - alegeți dacă doriți sau nu să exportați materialul în primul cadru (în fereastra de proprietăți a simbolului).
  • Indiferent dacă utilizați sunete.

Pasul 5: Problemele

Principala problemă cu care ne confruntăm este controlând ceea ce se încheie pe primul rând, deoarece, așa cum am menționat mai sus, totul din cadrul unu trebuie să fie încărcat înainte ca preloaderul să poată fi afișat.

În afară de asta, există diferențe între modul în care funcționează Flash CS3 și CS4. În următorul pas, voi face o serie de afirmații temeinic cercetate pe care le puteți referi înapoi dacă este cazul. Ar trebui să fie o resursă excelentă dacă doriți rapid să depanați preîncărcarea dvs., să vă dați seama de ce nu se comportă așa cum vă așteptați.

Voi încerca să fac declarațiile mai tangibile, făcând referire la TweenLite, o minunată bibliotecă de tweeting realizată de Jack Doyle la greensock.com. Vom folosi TweenLite în această parte a acestui tutorial, astfel încât acest lucru va face cel mai mult sens.


Pasul 6: Declarațiile

Aceste declarații sunt valabile atât pentru Flash CS3, cât și pentru CS4, cu excepția cazului în care se prevede altfel. "Importarea TweenLite" înseamnă, în esență, "importul și utilizarea TweenLite" - rezultatele pot fi diferite dacă nu utilizați codul, deoarece compilatorul Flash ignoră importurile neutilizate. Doar tastând o declarație de import nu este egală cu codul.

  • Dacă importați TweenLite pe orice cadru din cronologia principală, TweenLite va fi încărcat în primul cadru al filmului.
  • Dacă aveți un filmClip care importează TweenLite în cronologia sa internă și plasați acest filmClip după cadrul de export de clasă, TweenLite va fi încărcat în cadrul exportului de clasă.
  • Dacă aveți un filmClip care importează TweenLite în cronologia sa internă și plasați acest filmClip inainte de cadrul de export al clasei, TweenLite va fi încărcat în primul cadru al filmului.

Următoarele trei instrucțiuni se referă la scenariul în care aveți un filmClip care este exportat pentru ActionScript, utilizând un fișier de clasă externă care, la rândul său, importează TweenLite în fișierul de clasă.

  • Plasarea filmului după cadrul de export de clasă va face încărcarea TweenLite pe cadrul de export al clasei. Nu există nicio diferență dacă verificați sau nu "Export în cadru X" ("Export în primul cadru" pentru CS3) în ceea ce privește clasele importate, cum ar fi TweenLite. Cu toate acestea, caseta de selectare afectează dacă activele (forme, bitmap-uri) ale filmului vor fi încărcate sau nu în cadrul de export. În cazul CS3, puteți, desigur, să alegeți sau să nu o încărcați în primul cadru.
  • În Flash CS4 plasarea filmului inainte de cadrul de export de clasă va face încărcarea TweenLite pe primul cadru. Nu este nici o diferență dacă verificați sau nu "Export în cadru X". Activele non-cod ale MovieClip se vor încărca și pe primul cadru.
  • În Flash CS3 dacă plasați filmul clip inainte de cadrul de export al clasei, atunci indiferent dacă ați bifat opțiunea "Export în primul cadru", veți obține o tăcerea eșuează! Înțeles: filmul pe care l-ai pus pe scenă și care ar trebui să folosească un fișier de clasă externă va apărea doar ca un film normal, fără a vă da nici un indiciu. Cu toate acestea, puteți afecta dacă conținutul de formă / bitmap al filmului VideoClip trebuie încărcat în primul cadru sau nu. Acest lucru nu vă ajută cu adevărat, de vreme ce sunteți în mod egal înșelat cu încărcarea de clasă.

Următoarele trei instrucțiuni se referă la scenariul în care aveți un MovieClip exportat pentru ActionScript ca "CustomClass", fie folosind un fișier de clasă externă, fie nu, care este instanțiat și adăugat la scenă dintr-un film clip care este plasat pe cronologie (doar cum ar fi MovieClip din cele trei instrucțiuni anterioare.) Acest CustomClass este numai instanțiată și nu există anterior pe linia de timp principală.

  • În Flash CS4 cu caseta "Export în cadru X" bifată, CustomClass este încărcat în cadrul X și va fi afișat corect. Dacă caseta nu este bifată, este încă încărcată în cadrul X și este afișată corect.
  • În Flash CS3 cu caseta "Export în primul cadru" bifată, CustomClass este încărcat în primul cadru și va fi afișat corect. Cu caseta necontrolată veți primi o eroare de tip 1046, deoarece clasa nu poate fi găsită.

Cu toate aceste restricții, să luăm cel puțin această declarație pozitivă:

  • Dacă plasați un filmClip care conține doar forme / bitmap-uri, acesta se va încărca doar înainte de a fi nevoie de cadru. Dacă nu alegeți să-l exportați mai devreme, este!

Iată un lucru foarte interesant:

  • În Flash CS3 nu puteți exporta un sunet pe altceva decât primul cadru. În Flash CS4 puteți, în cadrul clasei de export de clasă.

Da, ai citit asta. Cred că este corect să presupunem că Adobe dorește ca oamenii să facă upgrade la CS4. Deci, ce să faceți dacă sunteți blocat (ă) de CS3 și iarba este mai verde pe cealaltă parte? Îți voi spune în pasul următor.


Pasul 7: Încărcarea activelor în Flash CS3

Acest pas este doar pentru cei care folosesc Flash CS3.

Dacă ați citit toate declarațiile din pasul anterior, atunci veți realiza problema de a avea o mulțime de MovieClips exportate pentru ActionScript. Acestea trebuie să fie încărcate în primul cadru sau să fie indisponibile. Din fericire, aceste afirmații s-au bazat pe presupunerea că aceste bunuri nu au fost niciodată plasate pe linia principală, ceea ce se întâmplă să fie soluția noastră! (Este, de asemenea, singura modalitate de a încărca sunete altele decât în ​​cadrul unu ...)

Așa se face:

  1. Accesați proprietățile tuturor materialelor MovieClip / Sprite / Sound pe care doriți să le exportați și debifați "Export în primul cadru".
  2. În cel de-al doilea cadru al liniei cronologice principale, creați un film MovieClip gol numit AssetHolder.
  3. În acest AssetHolder MovieClip, creați un strat de acțiuni care are un stop (); apelează primul cadru.
  4. Încă în AssetHolder, creați un strat pentru fiecare sunet pe care doriți să îl utilizați și trageți acele sunete în cel de-al doilea cadru al propriului său strat. ei nu face trebuie să fie mai mult decât un singur cadru, din fericire. Pentru toate celelalte Sprites și MovieClips puteți să le plasați într-un singur strat sau mai multe pentru a le organiza mai ușor. Puneți-le și pe cel de-al doilea cadru și lăsați primul cadru gol.

Acest lucru va face ca toate activele dvs. să fie încărcate în al doilea cadru. Soluția este un pic cam lipicios, dar nu este atât de dur ca trebuie să mergi și să cumperi software nou pentru această problemă.

(Kudos la 8bitrocket pentru acest truc!)


Pasul 8: Raportul profilului și dimensiunii de bandă

Un lucru pe care ar trebui să-l menționez înainte de a începe să lucrăm este profilul de lățime de bandă. Acesta este un instrument esențial în rezolvarea problemelor dvs. de preîncărcare. Când previzualizați un film, puteți să îl vedeți, apoi alegeți profilul de lățime de bandă. Sau doar apăsați Ctrl + B.

Aici puteți comuta între graficele cadru-cu-cadru și graficele de streaming. De asemenea, puteți simula descărcarea filmului la o viteză de conectare la alegere, fie prin alegerea acestuia din meniul Vizualizare, fie prin apăsarea Ctrl + Enter încă o dată (modificați viteza de descărcare simulată utilizând submeniul View> Download Settings). Acest lucru este esențial pentru a afla cum va arăta preloader-ul dvs., fără a trece prin greutatea încărcării și limitării lățimii de bandă. Cu toate acestea, pentru cazul respectiv, pot recomanda Firefox Throttle.

Pe lângă instrumentul foarte util, care este profilul de lățime de bandă, există opțiunea de a genera un raport de dimensiune. Apăsați Ctrl + Shift + F12 pentru a deschide caseta de dialog Publish Settings.

Accesați fila Flash, iar în secțiunea Avansat există o casetă de selectare "Generați raportul de dimensiune". Când această casetă este bifată, previzualizarea sau publicarea filmului va genera un fișier text în același director ca fișierul dvs. FLA care conține informații utile despre ce părți comportă dimensiunea totală a filmului.


Pasul 9: Sfârșitul teoriei

În cele din urmă, putem începe să realizăm un film Flash cu un preloader frumos!

Vom folosi o tehnică de "pre-încărcare cu trei cadre". Pe primul cadru vom plasa un pre-încărcător MovieClip care are propria sa clasă "Preloader". În cel de-al doilea cadru, încărcăm toate clasele, iar în al treilea cadru încărcăm și afișăm conținutul. Vom plasa conținutul într-un filmClip numit Aplicație cu o clasă asociată "Aplicație". Aici se duce carnea cererii.


Pasul 10: Creați un document nou

Începeți prin crearea unui nou document AS3. Fac 600x400 pixeli, fundal gri inchis, 24 FPS. Aceste setări nu contează totuși.

Setați clasa de documente la Main și apăsați OK.


Pasul 11: Setați Frame Export Frame

Accesați fila> Setări publicare, fila Flash, apoi setările ActionScript 3.0. Introduceți "cadru 2" în câmpul "Export clase în cadru".


Pasul 12: Proiectați un preloader

Evident, designul unui preloader nu va afecta funcția. Voi da instrucțiuni pas cu pas, dar nu ezitați să renunțați la aceste părți și să luați propria abordare dacă doriți. Doar asigurați-vă că ați notat la ce părți mă refer la cod mai târziu.

Desenați un dreptunghi cu colțuri rotunjite și dați-i un gradient albastru. Apoi transformați-l într-un simbol MovieClip, numiți Preloader. Alegeți să-l exportați pentru ActionScript și apelați Preloader-ul de clasă.

În acest nou filmClip, trageți un nou dreptunghi rotunjit de colț cu un gradient gri, transformați-l într-un alt MovieClip și dați-i un nume de instanță a progressArea.

Mergeți mai departe și potriviți aspectul stratului pe care l-am făcut în imaginea de mai sus. Apoi, faceți un duplicat al ultimei forme și plasați-o în stratul de bara Progress deasupra zonei Progress one. Dați-i un gradient albastru deschis, transformați-l într-un filmClip și dați-i un nume instanței progressBar. Activați ghiduri pentru scalarea cu 9 felii și asigurați-vă că țineți margini rotunde din stânga și din dreapta în afară.

În cele din urmă, faceți un câmp de text dinamic cu un nume de instanță procentualText. Faceți textul aliniat la dreapta. În acest fel, semnul procentului nu se va mișca niciodată, ci numai numerele (care se schimbă oricum). Mergeți în încorporarea caracterelor și asigurați-vă că încorporați cifre și semnul procentului (%). Pentru a face un preloader foarte mic, folosesc un mic pixelon numit Pixel Mix de la dafont.com. De asemenea, îi dau o strălucire albastră doar pentru că pot.


Pasul 13: Înapoi la scenă

Asigurați-vă că întregul preincarcator MovieClip este plasat în primul cadru și dat un nume de instanță de preloader. Creați un nou strat numit "AS" și puneți un stop (); în primul cadru. Păstrați preloader-ul în stratul său propriu, "Preloader". Faceți un alt strat numit "Aplicație". Aici vom păstra conținutul principal în cele din urmă.


Pasul 14: Creați clasa principală

Creați un nou fișier ActionScript și salvați-l în același director ca fișierul dvs. FLA. Denumire principală:

 pachet import flash.display.MovieClip; importul flash.events.Event; public class Main extinde MovieClip funcția publică Main () preloader.addEventListener (Event.COMPLETE, onPreloaderComplete); preloader.setLoaderInfo (loaderInfo);  funcția privată onPreloaderComplete (e: Event): void gotoAndStop (3); 

Pasul 15: Creați clasa Preloader

Creați un nou fișier ActionScript și salvați-l în același director ca și Preloader.as:

 pachet import flash.display.LoaderInfo; import flash.display.MovieClip; importul flash.events.Event; import flash.events.ProgressEvent; Preloader de clasă publică extinde MovieClip funcția publică Preloader ()  funcția publică setLoaderInfo (ldrInf: LoaderInfo): void ldrInf.addEventListener (ProgressEvent.PROGRESS, onProgress); ldrInf.addEventListener (Event.COMPLETE, onComplete);  funcția privată peProgress (e: ProgressEvent): void var procent: int = Math.round (e.bytesLoaded / e.bytesTotal * 100); progressBar.width = procent / 100 * progressArea.width; percentageText.text = procente + "%";  funcția privată onComplete (e: Event): void dispatchEvent (e); 

Pasul 16: Prindeți principalul și preloaderul

Deci, ce fac aceste două clase?

În constructorul Main, numim metoda setLoaderInfo () personalizată a preloaderului nostru și vom trece de-a lungul obiectului LoaderInfo asociat cu Main.

Preloader primește acest obiect și adaugă la acesta doi ascultători de evenimente. ProgressEvent declanșează funcția onProgress, în care se calculează procentul de octeți încărcați comparativ cu totalul octeților care urmează să fie încărcați. Procentajul este folosit pentru a seta lățimea barei de progres și a textului câmpului nostru de text.

Evenimentul complet este pur și simplu expediat înapoi la Main, care, la rândul său, salvează cronologia principală la cea de-a treia când primește evenimentul.


Pasul 17: Adăugarea unui anumit conținut

Pentru a avea ceva pentru a arăta în mod clar de preloader de lucru, am adăugarea o fotografie frumos macro a unei pisici numită Runa luat de un prieten de-al meu. Puteți găsi imaginea în fișierele sursă furnizate împreună cu acest tutorial. Am importat bitmap-ul și îl transform într-un filmClip numit "Cat".

Simțiți-vă liber să utilizați orice imagine doriți. Dați clipului un nume de instanță a "pisicii".


Pasul 18: Crearea aplicației MovieClip

După cum puteți vedea în captura de ecran de mai sus, am plasat Cat MovieClip pe cadrul trei în stratul aplicației. Luați tot ce ai făcut MovieClip, pisică sau nici o pisică și l-ai lovit din nou pe F8 ca să o pui în interiorul unui nou filmClip pe care îl numești Application. Exportați acest lucru pentru ActionScript ca aplicație.


Pasul 19: Clasa de aplicații

Creați clasa Aplicație pornind un nou fișier AS și salvând-o ca "Application.as". Cereți clasei aplicației să arate astfel:

 pachet import com.greensock.TweenLite; import com.greensock.easing.Sine; import flash.display.MovieClip; Aplicația publică de clasă extinde MovieClip funcția publică funcțională () TweenLite.to (cat, 7, scaleX: 4, scaleY: 4, onComplete: tweenBack, ease: Sine.easeInOut);  funcția privată tweenBack (): void TweenLite.to (cat, 3, scaleX: 1, scaleY: 1, onComplete: reTween, ease: Sine.easeInOut);  funcția privată reTween (): void TweenLite.to (cat, 7, scaleX: 4, scaleY: 4, onComplete: tweenBack, ease: Sine.easeInOut); 

Acest lucru va anima pisica in afara si pe termen nelimitat, astfel veti aminti pentru totdeauna detaliu de blana nas. Cum funcționează această clasă nu este importantă, ce este este important importam TweenLite si folosindu-l, asigurandu-ne astfel ca va fi o parte din fisierul SWF exportat o data.


Pasul 20: Probleme CS3 și CS4

Să ne întoarcem din nou la bancă pentru o clipă.

Acest film se compară bine în CS4. Aplicația MovieClip este setată să exporte în cadrul 2 dacă nu l-ați modificat. Dacă l-ați schimbat, ați putea observa ceva ciudat. Mai multe despre acest lucru în pasul următor.

Dacă sunteți pe CS3, această setare contează cu adevărat. Va trebui să mergeți și asigurați-vă că debifați caseta de selectare "Export în primul cadru" din Proprietățile aplicației MovieClip, altfel se va încărca în primul cadru!

Nu este singura problemă. Dacă încercați să compilați, veți primi o eroare de tip 1046, spunând că nu aveți tipul de TextField disponibil. Asa cum puteti ghici, CS3 face lucrurile un pic diferite. Ce se întâmplă? Încercați să utilizați un TextField în interiorul butonului Preloader MovieClip, dar nu îl importați. În CS4, acest lucru este gestionat automat pentru dvs., dar nu în CS3.

Din fericire, soluția este simplă, doar adăugați:

 import flash.text.TextField;

la clasa dvs. de Preloader și sunteți toți pregătiți.

Unii dintre voi s-ar fi putut gândi deja că ar fi trebuit să extind Sprite pentru clasa mea de Preloader în loc de MovieClip. Ei bine, acesta este motivul pentru care nu am făcut asta; Vroiam să aștept până când acest punct să-l aducă. Deoarece simbolul Preloader conține atât "ProgressArea", cât și "ProgressBar", care ambele sunt MovieClips, ați avea aceeași eroare de tipul 1046.

Aceeași soluție este posibilă și aici, bineînțeles. De fapt, acum ar trebui să schimbați Preloader-ul pentru a extinde Sprite în loc de MovieClip și dacă utilizați CS3, asigurați-vă că importați clasa Sprite și în clasa Preloader.


Pasul 21: O altă problemă

Am menționat un eveniment ciudat în ultimul pas. Dacă debifați opțiunea "Export în cadrul 2" al aplicației și executați o descărcare simulată, veți vedea că preloaderul dispare, cu excepția cazului în care ați extins cadranul cheie al preloaderului pentru a acoperi și al doilea cadru.

Ce se întâmplă cu adevărat? Pur și simplu pus, prima oprire (); declarația nu este luată în considerare. Cum este pentru planificarea evidentă a fluxului de lucru? Rețineți că dacă ați plasat o instrucțiune de urmărire în primul cadru după oprire (); apelați, se urmărește. Important: rețineți că această problemă se manifestă numai atunci când simulăm descărcarea!

Lecția învățată aici este nu aveți încredere în descărcarea simulată! Nu vă va arăta cu exactitate cum se vor încărca și funcționa lucrurile. Puteți să țineți doar oprirea (); și preloader în primul cadru și veți fi bine când vine vorba de implementare. Cu toate acestea, poate fi o durere de previzualizare dacă nu aveți aplicația setată să exportați pe cadrul 2. Și asta este doar pentru acest scenariu specific.

În CS3 trebuie să debifați caseta de export din aplicația MovieClip, altfel veți termina încărcarea în primul cadru. Dar dacă faceți asta, veți fi implicați în această problemă. Deci, mergeți înainte și extindeți preloaderul la al doilea cadru.


Pasul 22: Testați filmul

Du-te și previzualizați filmul. Rulați o descărcare simulată la o viteză redusă și bucurați-vă de pre-încărcătorul artizanal * (* se aplică numai dacă ați respectat instrucțiunile mele cu privire la litera).

Dacă vă uitați la graficul cadru-cu-cadru sau la un raport de dimensiune generat, veți vedea că codul este încărcat în cel de-al doilea cadru. Primul cadru este de numai 4kb și constă din clasa Preloader și fonturile de fonturi încorporate. Acum, 4kb este destul de accesibil în ceea ce privește timpul de așteptare înainte de a vedea preloaderul este în cauză, nu crezi?

S-ar putea să vedeți diferite dimensiuni în CS3 și veți vedea cu siguranță diferite dimensiuni cu diferite fonturi. Sau pisici.


Pasul 23: Îmbunătățirea preîncărcătorului

S-ar putea să aveți ideea că doriți să utilizați TweenLite pentru a distruge preloader-ul adăugând alfa la 0 - dar nu doriți să încărcați TweenLite în primul cadru deoarece adaugă încă 8kb la descărcarea inițială.

Există mai multe moduri de a realiza acest lucru și îl vom rezolva având un filmClip pe cel de-al treilea cadru care prindă preloader-ul și îl tweens. După finalizare, va trece la cel de-al patrulea cadru, la care am mutat aplicația.

Motivul introducerii acestuia în cel de-al treilea cadru este că nu îl putem pune în al doilea cadru fără a fi încărcat TweenLite în primul cadru.

Acum ne îndepărtăm de tehnica standard de preîncărcare a trei cadre.


Pasul 24: Adăugați un strat și Stop (); apeluri

Adăugați un nou strat numit "Preloader catcher". Asigurați-vă că ați pus stop (); solicită cadre una, două și trei. Acest lucru este de a preveni previzualizare complicat până când simula o descărcare, așa cum am menționat mai devreme.

Mergeți mai departe și deplasați aplicația la cel de-al patrulea cadru, precum și extinderea Preloader-ului la al treilea cadru.


Pasul 25: Creați captura

Asigurați-vă că aveți un cadru cheie în cel de-al treilea cadru al stratului de captatoare Preloader. Mergeți la acest cadru, trageți o formă mică și setați culoarea alfa a culorii de umplere la 0%. Acesta ar trebui să fie un film invizibil. Transformați-l într-un simbol MovieClip numit PreloaderCatcher sau ceva similar.

Exportați MovieClip ca PreloaderCatcher. Dacă utilizați CS4, nu contează dacă îl exportați pentru cadrul 2 sau nu, deoarece acesta va fi încărcat în acel cadru indiferent de ce. Păi, se schimbă un lucru, îți amintești? Indiferent dacă este sau nu formă este încărcată pe cadrul 2. În esență, nu contează dacă se consideră dimensiunea fișierului aproape inexistentă pentru această formă. S-ar putea să-l debifați pentru un bun obicei, totuși.


Pasul 26: Clasa PreloaderCatcher

Faceți un nou fișier de clasă numit PreloaderCatcher.as:

 pachet import com.greensock.TweenLite; import flash.display.MovieClip; import flash.display.Sprite; importul flash.events.Event; Preloader de import; clasa publică PreloaderCatcher extinde Sprite funcția publică PreloaderCatcher () addEventListener (Event.ADDED_TO_STAGE, onAdded);  funcția privată onAdded (e: Eveniment): void removeEventListener (Event.ADDED_TO_STAGE, onAdded); var preloader: Sprite = MovieClip (părinte) .getChildByName ("preloader") ca Sprite; TweenLite.to (preloader, 0.5, alpha: 0, onComplete: function (): void MovieClip (părinte) .nextFrame ();); 

După cum puteți vedea, această clasă funcționează primind preloaderul prin turnarea părintelui ca Sprite și apelând getChildByName ("preloader"), unde preloader este numele instanței. Preloader-ul este distribuit și cu Sprite, apoi TweenLite este folosit pentru a-l elimina.

Când finalizarea este finalizată, funcția onComplete din TweenLite aruncă părintele ca un MovieClip, astfel încât este posibil să apelați metoda NextFrame.


Pasul 27: De ce cele patru cadre?

După cum am spus mai devreme, ne-am mutat acum de la tehnica de preloading a celor trei cadre. Asta nu este chiar blasfemie, dar sunt sigur că unii dintre voi vă întrebați de ce am făcut asta. În schimb, am fi putut să manipulăm adăugarea preloaderului în clipul aplicației ...

În acest caz, aveți perfectă dreptate! Motivul pentru care am folosit patru cadre aici a fost să vă arăt cum să faceți acest lucru păstrând lucrurile separate. Îndepărtarea preloader-ului; face parte din partea preloader sau partea de aplicație? Preloader cu siguranță, dar în acest caz nu am vrut să se încarce în primul cadru. Prin urmare, ajungem la această clasă suplimentară de "captare".

Amintiți-vă că toate acestea sunt opționale. Odată ce știi cum să faci tot ce poți decide cu ușurință, indiferent de situația ta.


Pasul 28: Sunete și extra active

La pasul 7, v-am spus despre problemele de încărcare a activelor din CS3. Deoarece acest tutorial vizează atât utilizatorii CS3 cât și CS4, vom merge cu cel mai mic numitor comun și vom folosi abordarea AssetHolder. Dacă utilizați CS4, puteți efectua pașii următori în același mod și va funcționa la fel sau puteți trece peste abordarea AssetHolder.

Începeți prin importarea sunetului "music.wav" din fișierele sursă în FLA.

Du-te și exportați-o pentru ActionScript și asigurați-vă că debifați caseta "Export în primul cadru" din CS3. Pentru CS4, acest lucru nu va face o mare diferență. Folosesc Flash CS4 pe care probabil că i-ați dat seama, astfel încât capturile de ecran să afișeze caseta de dialog CS4. Dacă doriți, puteți trece de la compresia MP3 standard la ceva mai plăcut. În felul acesta nu va suna teribil.

Hai să trecem prin câțiva pași, adăugând un text la film și plasând-o într-un film AssetHolder!


Pasul 29: Creați un text

Apăsați Ctrl + F8 pentru a crea un nou simbol MovieClip. Denumiți TextHolder și exportați-o pentru ActionScript, încă o dată (în CS3) asigurându-vă că caseta "Export în primul cadru" nu este bifată.

Când creați, veți fi "în interiorul" acestui film. Introduceți un text static și dați-i o culoare albă. Folosesc același font PixelMix ca înainte. Pentru a crea o culoare simulară a cursei, îi dau un efect filtru strălucitor cu setările de mai jos.


Pasul 30: Creați AssetHolder

Creați un nou strat numit AssetHolder. Faceți un cadru cheie pe al doilea cadru, apăsați Ctrl + F8 pentru a crea un nou MovieClip și denumiți-l AssetHolder. Nu exportați acest lucru pentru ActionScript.

În AssetHolder MovieClip, creați trei straturi numite AS, muzică și Active. Din moment ce "muzica" este numele obiectului de sunet pe care îl folosim, asta numesc stratul. Acum trebuie să puneți o oprire (); apelează primul cadru al stratului AS.

Apoi, creați un cadru cheie pe cel de-al doilea cadru al stratului de muzică și cel al materialelor. Glisați sunetul muzical pe scenă când stați pe al doilea cadru cheie din stratul de muzică. Apoi faceți același lucru cu TextColder MovieClip pe stratul de materiale.

Ieșiți din MovieClip AssetHolder și asigurați-vă că îl plasați pe al doilea cadru cheie al stratului AssetHolder de pe cronologia principală. După cum veți observa, filmul nu este vizibil, dar este plăcut, ceea ce este destul de răcoros!


Pasul 31: Modificarea clasei de aplicație

Bine, acum dorim doar să ne asigurăm că suntem difuzați sunetul și afișăm filmul TextH

Cod