Share
Pe măsură ce programul ActionScript 3 devine o limbă mai populară, iar funcțiile Flash Player devin mai avansate și mai accesibile, este important să construiți un flux de lucru comun în compania dvs., astfel încât proiectele să devină mai agile și, mai important, să fie livrate la timp. O problemă majoră cu ActionScript 2 a fost depășirea decalajului dintre proiectant și dezvoltator. Acest lucru la lăsat deseori pe dezvoltatorii care se ocupau de FLA care conțineau sute de articole de bibliotecă prost numite și nimeni nu le plăcea asta.
Odată cu avansarea ActionScript 3 și abilitatea de a codifica datele de pe cronologie, SWC-urile au devenit elemente utilizate în mod obișnuit în proiecte mari, însă există încă mulți oameni care nu știu ce sunt și cum să le creeze / să le utilizeze.
Să începem prin a vedea ce SWC-uri sunt de fapt. Un SWC [Componenta ShockWave acronimul spune:Sw ~ ICK] :) este pur și simplu un pachet de fișiere cu fermoare prins de fișierele generate de Flash IDE. Ele conțin elemente vizuale (cum ar fi MovieClips, Butoane, Grafică și Fonturi), precum și cod. SWC-urile au fost în jurul valorii de la Flash MX 2004, dar au decurs doar cu adevărat de la lansarea ActionScript 3, pentru că înainte, așa cum am spus, puteți să păstrați totul în FLA.
În acest tutorial, vă vom arăta cum puteți încorpora și utiliza materialele vizuale, fonturile și codul ActionScript.
Există un argument simplu și solid pentru utilizarea SWC-urilor: separă designul de dezvoltarea. Flash are capacitatea de a influența designul elementelor vizuale programate prin foi de stil "CSS" (asemănătoare cu Flex), dar, de cele mai multe ori, designerii (nu toți) sunt împiedicați de orice lucru legat de cod, inclusiv CSS simplu. Un alt punct este acela că designerii de design. Acestea sunt de obicei date cu cadre false de scriere, din care apoi creează interfețe utilizator în programe precum Photoshop și Illustrator. Dacă ar fi trebuit apoi să codifice interfața, atunci crearea de machete în Photoshop ar fi fost doar o pierdere de timp. Mai mult, poate dura mult timp și efort pentru a codifica interfețele care pot fi ușor create în IDE-uri vizuale, cum ar fi Photoshop și Illustrator.
Înapoi la punctul meu principal, SWC permite proiectanților să proiecteze interfața, să o taie și apoi să treacă un SWC dezvoltatorului care leagă toate împreună, acest lucru creează un flux simplu de lucru fără ca oamenii să treacă pe degetele altora pentru a atinge proiectarea corectă.
Să zicem mâine că sunteți informat despre un nou proiect prin care veți lucra cu o echipă de design. Va fi responsabilitatea echipei de proiectare de a construi interfața, inclusiv crearea a toate lucrurile mici, cum ar fi stânga buton, animatoare încărcător, colțuri rotunjite și icoane. Responsabilitatea echipei de dezvoltare este aceea de a construi proiectul și de a le lega în toate elementele UI. Timpul de proiectare va crea toate elementele de care au nevoie, le va pune într-un SWC și apoi va transmite acel dosar echipei de dezvoltare. Echipa de dezvoltare poate apoi codifica în elementele UI fără a fi nevoie să vă faceți griji cu privire la importarea fonturilor, redarea cu foi de stil sau ședința cu proiectantul și programarea interfeței.
După cum subliniază articolul mare al lui Mario Santos, Adobe a lansat recent Flash Catalyst, un IDE care vă permite să importați fișiere PSD sau AI și să le convertiți în obiecte vectoriale bazate pe XML, FXG-uri. Acesta este cu siguranță un pas în direcția corectă, dar este ceva implementat doar în Flash Player 10, din care există doar o rată de penetrare de 75%. Acest lucru înseamnă că atunci când lucrăm la proiecte live, trebuie să folosim Flash Player 9, astfel încât până când mai mulți oameni să adopte Flash Player 10, SWC-urile reprezintă o modalitate bună de a face acest lucru.
Vorbiți suficient, să creăm un SWC. Voi crea câteva grafică în Photoshop și Illustrator și le voi aduce în Flash IDE unde le voi configura pentru codarea ActionScript prin utilizarea SWC-urilor. De asemenea, voi vorbi despre un concept numit "scară 9 grilă" feliere, astfel încât incendiu până editor de imagine preferat și de a crea un nou fișier:
Să luăm doar niște forme personalizate implicite Adobe le oferă și să le lipim pe tabloul de artă:
Apoi, ca să nu avem doar bitmapuri negre solide, să le adăugăm o anumită culoare:
OK, deci avem niște vedete drăguțe, acum le dorim să le luăm și să le punem în IDE-ul nostru Flash.
Activați Flash IDE și creați un nou fișier ActionScript 3:
Acum, dacă sunteți un veteran al IDE-ului Flash, vă veți aminti că ați reușit să importați fișiere PSD de la CS3, au introdus o interfață foarte frumoasă atunci când a venit să importați PSD care ar trece prin straturile dvs., importarea unui bitmap mare. Deci, mergeți la File> Import> Import to Library, navigați la PSD și faceți clic pe Import to Library. Veți primi o fereastră pop-up asemănătoare cu aceasta:
În cazul meu, voi lăsa totul bifat în afara fundalului deoarece este doar un fundal alb. Acum avem straturile PSD ca elemente în biblioteca noastră, putem începe să le pregătim pentru dezvoltatori. Luați una din stele din bibliotecă și o aruncați pe scenă, după cum urmează:
Apoi luăm steaua și îl convertim într-un film. Când apare fereastra, denumiți-o "BlueStarAsset", bifați "Export pentru ActionScript". Veți vedea că cele două casete de intrare de mai jos pot fi editate. Nu este nevoie să le atingeți, dar ele ne permit să specificăm ce clasă va fi numit acest activ și ce tip de clasă se va extinde, vom rămâne cu "MovieClip":
Acum avem un bun în biblioteca pe care o putem exporta în ActionScript. Înainte să continuăm, să încercăm acest lucru. Mai întâi mergeți la File> Publish Settings. Faceți clic pe fila "Flash", selectați "Player" versiunea 9 și bifați "Export SWC":
Apăsați "OK". Acum suntem gata să exportim SWC-ul nostru. Debugați FLA apăsând CTRL / CMD + Return și veți vedea un fișier SWF și un fișier SWC. Zer! Ați creat un SWC, acum să-l folosim repede. Creați un IDE pentru codificarea preferată și creați un nou proiect ActionScript 3. Configurați setările compilatorului pentru a include SWC pe care tocmai l-ați creat în calea de construire. Creați o nouă bază de fișier ActionScript 3 numită "App.as" și folosiți următorul cod:
pachet import flash.display.MovieClip; import flash.display.Sprite; [SWF (,, frameRate = "30", backgroundColor = "# FFFFFF")] Aplicația publică de clasă extinde Sprite public function App () var star: MovieClip = new BlueStarAsset; addChild (stea);
Veți vedea ceva de genul:
Deci asta e activul nostru de stele.
Voi vorbi repede despre un concept numit "grila 9". Aceasta este pur și simplu o metodă care ne permite să slăbim un material vizual, astfel încât atunci când vine vorba de redimensionarea acestuia, lucrurile precum colțurile rotunjite pot rămâne proporționale. De exemplu, dacă am avea un dreptunghi rotunjit ca acesta, dacă am schimba apoi lățimea lui, vedeți că colțurile rotunjite nu mai sunt proporționale:
Pentru a depăși acest lucru, folosim metoda scalei 9 pentru a stabili un dreptunghi în partea de sus a activului nostru, care va fi redimensionat, astfel încât totul în afara dreptunghiului rămâne proporțional, de exemplu:
Dreptunghiul roșu în mijloc este ceea ce va scala, dar partea din afară nu va. Creăm o grilă cu 9 căi, rândul de sus are 3, mijlocul are 3 și partea de jos are 3. Astfel facem acest lucru într-un sens practic, mergem înapoi la IDE-ul Flash și tragem doar un simplu dreptunghi rotunjit. Creați un nou videoclip din această pagină și asigurați-vă că bifați căsuța "export pentru ActionScript" (numit "SimpleRoundedRect") și, sperăm, veți avea ceva similar cu acesta:
Acum vom lua acest nou material creat, vom reexporta SWC (prin depanarea filmului) și vom reveni la IDE-ul nostru ActionScript 3, unde vom actualiza clasa noastră așa:
pachet import flash.display.MovieClip; import flash.display.Sprite; import flash.geom.Rectangle; [SWF (,, frameRate = "30", backgroundColor = "# FFFFFF")] Aplicația publică de clasă extinde Sprite public function App () var rect: MovieClip = new SimpleRoundedRect; rect.scale9Grid = nou dreptunghi (10, 10, rect.width - 20, rect.height - 20); rect.width = stage.stageWidth; addChild (rect);
Pur și simplu adăugăm dreptunghiul nostru pe scenă, dar înainte de asta tragem un dreptunghi care este x: 10, y: 10 și are 20 de pixeli mai puțin în lățime și înălțime față de dreptunghiul nostru rotunjit. Aceasta va fi definirea dreptunghiului mijlociu pentru felierea noastră la scară. Veți vedea acum că dreptunghiul merge toată lățimea scenei, fără ca colțurile să nu fie proporționale. Doar pentru a vedea diferența, comentează linia 15 (începe cu "rect.scale9Grid") și vedeți modul în care colțurile sunt acum întinse.
Știu exact ce credeți că "dacă designerul trebuie să facă toată munca, atunci de ce dezvoltatorul trebuie să stabilească dreptunghiul pentru felierea?" Ei bine, dezvoltatorul nu trebuie să, așa cum poate proiectantul! Faceți clic dreapta pe materialul din bibliotecă și selectați proprietățile. Apoi, bifați caseta cu eticheta "Activați ghidajele pentru scalarea cu 9 secțiuni" și veți vedea:
Acum, designerul poate repoziționa acele ghidaje astfel încât dezvoltatorul să nu fie preocupat să creeze un dreptunghi pentru grila de scară 9. Dacă părăsiți linia 15 comentată și reexportați acest SWC, veți vedea că colțurile sunt din nou proporționale. Simplu eh?
SWC-urile pot avea mai mult decât doar elemente vizuale, indiferent dacă sunt grafică plană sau animații cronologice / scripted. Ele pot de asemenea să dețină biblioteci de coduri complete. SWC-urile reprezintă o modalitate foarte bună de a distribui codul. Este destul de o corvoadă, dar nu imposibil de decodat SWC-uri. Cu toate acestea, înseamnă că poți posta un SWC mai degrabă decât să te îngrijorezi de o mulțime de fișiere și directoare. Ele sunt, de asemenea, mai ușor pentru utilizator. Am, de exemplu, un dosar în care am șterge orice biblioteci de coduri ActionScript pe care le folosesc sau le creez, dar apoi am un director separat pentru SWC-urile utile pe care le-am folosit. Mi se pare mai ușor să selectați un SWC și să îl legați la proiect, mai degrabă decât să includeți întregul dosar al scripturilor mele partajate - și este și mai rapid!
Pentru a crea SWC-uri bazate pe coduri, folosesc Flash Builder - poți descărca versiunea beta de la Adobe. În cadrul Flash Builder va trebui să creați un nou "Flex Library Project" cum ar fi:
Dați-i un nume și asigurați-vă că selectați compilatorul Flex 3.4:
Faceți clic pe următorul și apoi bifați caseta de lângă "src", aici vom plasa clasele noastre:
Acum putem începe să scriem cod pentru biblioteca noastră, să creați o nouă clasă ActionScript, să o numiți "Test" și să setați numele pachetului la "com.flashtuts.swc" și să introduceți codul de mai jos:
pachet com.flashtuts.swc import flash.display.Sprite; test public de clasă extinde Sprite funcția publică Test () init (); funcția privată init (): void var sprite: Sprite = Sprite nou (); sprite.graphics.beginFill (0xFF0000); sprite.graphics.drawRoundRect (0, 0, 100, 100, 5, 5); sprite.graphics.endFill (); addChild (sprite);
După cum puteți vedea, tocmai am creat o cutie roșie, deci hai să luăm acest lucru în proiectul nostru ActionScript 3.
Veți avea nevoie acum să schimbați compilatorul Flex astfel încât acesta să poată prelua noile materiale SWC pe care tocmai le-ați creat. Odată ce ați făcut acest lucru, puteți modifica codul aplicației dvs. pentru a arăta astfel:
pachet import com.flashtuts.swc.Test; import flash.display.MovieClip; import flash.display.Sprite; [SWF (,, frameRate = "30", backgroundColor = "# FFFFFF")] Aplicația publică de clasă extinde Sprite public function App () var rect: MovieClip = new SimpleRoundedRect; //rect.scale9Grid = nou dreptunghi (10, 10, rect.width - 20, rect.height - 20); rect.width = stage.stageWidth; addChild (rect); var redRect: Sprite = Test nou (); addChild (redRect);
Acolo veți vedea dreptunghiul vostru roșu! Simplu eh?
Acum, o mulțime de oameni ar putea argumenta că SWC-urile nu sunt necesare, dar ajută proiectanții și dezvoltatorii să lucreze în sincronizare fără să se impună pe degetele celorlalți. Ele vă protejează codul și sunt o modalitate bună de a împărtăși materiale vizuale, cum ar fi preloadere și grafică. În timp ce FXG-urile sunt mult mai bune, până la preluarea Flash Player 10, programele SWC sunt standard atunci când vine vorba de crearea unor site-uri Web de producție care trebuie să fie scalabile, atât în ceea ce privește termenele de proiect, cât și componentele vizuale.
Accentsconagua