Share
Eftersom ActionScript 3 blir ett mer populärt språk och Flash Player-funktionerna blir mer avancerade och tillgängliga, är det viktigt att bygga ett gemensamt arbetsflöde inom ditt företag så att projekt kan bli smidigare och, viktigare än, levereras i tid. Ett stort problem med ActionScript 2 var att överbrygga klyftan mellan designern och utvecklaren. Detta lämnade ofta utvecklare som handlade med FLA: er som innehöll hundratals dåligt namngivna biblioteksposter och ingen tyckte om det.
Med framstegen för ActionScript 3 och förmågan att koda bort från tidslinjen har SWCs blivit vanliga föremål på stora projekt, men det finns fortfarande många människor där ute som inte vet vad de är eller hur man skapar / använder dem.
Låt oss börja med att se vilka SWC som faktiskt är. En SWC [ShockWave-komponenten akronym säger:Sw ~ ick] :) är helt enkelt ett zippat paket med filer som genereras av Flash IDE. De innehåller visuella tillgångar (som MovieClips, Knappar, Grafik och teckensnitt) samt kod. SWCs har funnits sedan Flash MX 2004, men har bara tagit slut eftersom ActionScript 3 kom runt eftersom förut, som jag sa, kunde du bara behålla allt i FLA.
I den här handledningen visar jag dig hur du kan bädda in och använda visuella tillgångar, teckensnitt och ActionScript-kod.
Det finns ett enkelt och solidt argument för att använda SWC: det skiljer designen från utvecklingen. Flash har förmågan att påverka utformningen av programmerade visuella objekt genom "CSS" som stylesheets (ungefär som med Flex), men de flesta designers (inte alla) avbryts av något som helst med kod, inklusive enkel CSS. En annan punkt är att designers design. De ges vanligtvis sköna skrivramar från vilka de sedan skapar användargränssnitt i program som Photoshop och Illustrator. Om de då skulle koda gränssnittet, kan det vara bara slöseri med att skapa mock ups i Photoshop. Dessutom kan det ta mycket tid och ansträngning att koda gränssnitt som enkelt kan skapas i visuella IDEs som Photoshop och Illustrator.
Tillbaka till min huvudsyfte låter SWC designarna utforma gränssnittet, klippa upp det och sedan skicka en SWC till utvecklaren som binder samman det hela skapar det ett enkelt arbetsflöde utan att människor träder på andras tår för att uppnå korrekt design.
Låt oss säga imorgon är du informerad om ett nytt projekt där du arbetar med ett designteam. Det kommer att vara designteamets ansvar att bygga gränssnittet inklusive att skapa alla de små sakerna som knapphävstater, loader animationer, rundade hörn och ikoner. Det är utvecklingsgruppens ansvar att sedan bygga projektet och binda i alla UI-element också. Designtiden skulle skapa alla de element de behöver, sätta dem in i en SWC och sedan skicka den filen till utvecklingslaget. Utvecklingslaget kan sedan kodas i UI-elementen utan att behöva oroa sig för att importera teckensnitt, spela med stilark eller sitta med designern och programmera gränssnittet.
Som Mario Santos stora artikel påpekar, har Adobe nyligen släppt Flash Catalyst, en IDE som låter dig importera PSD- eller AI-filer och konvertera dem till XML-baserade vektorobjekt, FXG. Det här är definitivt ett steg i rätt riktning, men det är något som bara implementeras i Flash Player 10, av vilket det bara handlar om en penetrationshastighet på 75%. Det betyder att när vi arbetar med levande projekt måste vi använda Flash Player 9, så tills fler människor adopterar Flash Player 10, är SWCs ett bra sätt att ta itu med det.
Noga prata, låt oss skapa en SWC. Jag ska skapa några grafik i Photoshop och Illustrator och ta dem in i Flash IDE där jag ska ställa in dem för ActionScript-kodning genom att använda SWC. Jag ska också prata om ett koncept som kallas "skala 9 rutnät" skivning, så skjut upp din favorit bildredigerare och skapa en ny fil:
Låt oss bara ta några vanliga anpassade former Adobe ger och klistrar dem på konstkortet:
Då så att vi inte bara har solida svart bitmapar, låt oss lägga lite färg på dem:
OK, så vi har några vackra stjärnor, vi vill nu ta dem och lägga dem i vår Flash IDE.
Släcka Flash IDE och skapa en ny ActionScript 3-fil:
Nu, om du är en veteran i Flash IDE, kommer du komma ihåg att du har kunnat importera PSD-filer sedan CS3, de introducerade ett riktigt fint gränssnitt när det gällde att importera PSD-skivor som skulle gå igenom dina lager i stället för importera en stor bitmapp. Så gå till Arkiv> Importera> Importera till bibliotek, navigera till din PSD och klicka på Importera till bibliotek. Du får ett fönster som dyker upp på följande sätt:
I mitt fall lämnar jag allt allt annat än bakgrunden eftersom det bara är en vit bakgrund. Nu har vi våra PSD-lager som föremål i vårt bibliotek, vi kan börja få dem redo för utvecklarna. Ta en av stjärnorna ur biblioteket och släpp den bara på scenen, så här:
Vi tar sedan stjärnan och konverterar den till en MovieClip. När fönstret visas, namnge det "BlueStarAsset", kryssa "Exportera till ActionScript". Du får se att de två inmatningsrutorna nedan blir redigerbara. Du behöver inte röra dem, men de tillåter oss att ange vilken klass den här tillgången kommer att ringas till och vilken typ av klass det kommer att sträckas, vi klarar oss av "MovieClip":
Nu har vi tillgång i vårt bibliotek som vi kan exportera till ActionScript. Innan vi fortsätter, låt oss prova det här. Gå först till Arkiv> Publicera inställningar. Klicka på fliken "Flash", välj "Player" version 9 och kryssa "Export SWC":
Hit "Ok". Nu är vi redo att exportera vår SWC. Felsöka FLA genom att trycka på CTRL / CMD + Return och du får se en SWF och en SWC-fil. Vassle! Du har skapat en SWC, nu får vi bara använda den snabbt. Slå på din favoritkodnings-IDE och skapa ett nytt ActionScript 3-projekt. Konfigurera kompilatorinställningarna för att inkludera SWC du just har skapat i byggvägen. Skapa en ny bas ActionScript 3-fil med namnet "App.as" och använd följande kod:
paket import flash.display.MovieClip; importera flash.display.Sprite; [SWF (,, frameRate = "30", backgroundColor = "# FFFFFF")] offentlig klass App utökar Sprite allmän funktion App () var stjärna: MovieClip = ny BlueStarAsset (); addChild (stjärna);
Du ser något så här:
Så det är vår stjärna tillgång.
Jag ska bara prata om ett koncept som kallas "scale 9 grid". Det här är helt enkelt en metod som gör det möjligt för oss att skära upp en visuell tillgång, så när det gäller att ändra storlek på det, kan saker som rundade hörn vara proportionella. Om vi till exempel hade en rundad rektangel så här, om vi sedan ändrade dess bredd ser du att de avrundade hörnen inte längre är proportionella:
För att övervinna detta använder vi skärmmetoden skala 9 för att ställa in en rektangel ovanpå vår tillgång som kommer att ändras, så allt utanför rektangeln stannar i proportion, till exempel:
Den röda rektangeln i mitten är vad som ska skala, men sakerna ut sidan kommer inte. Vi skapar ett 9-vägs rutnät, den övre raden har 3, mitten har 3 och botten har 3. Så här gör vi det i praktisk mening, gå tillbaka till Flash IDE och bara rita en enkel rundad rektangel. Skapa en ny filmklipp från den och se till att du kryssar i rutan "exportera till ActionScript" (jag har kallat min "SimpleRoundedRect") och förhoppningsvis får du något liknande det här:
Nu ska vi ta den här nyskapade tillgången, exportera igen SWC (genom att felsöka filmen) och gå tillbaka till vår ActionScript 3 IDE där vi uppdaterar vår klass så här:
paket import flash.display.MovieClip; importera flash.display.Sprite; importera flash.geom.Rectangle; [SWF (,, frameRate = "30", backgroundColor = "# FFFFFF")] offentlig klass App sträcker Sprite allmän funktion App () var rect: MovieClip = new SimpleRoundedRect (); rect.scale9Grid = ny rektangel (10, 10, rect.width - 20, rect.height - 20); rect.width = stage.stageWidth; addChild (rect);
Vi lägger helt enkelt vår rektangel till scenen, men före det drar vi en rektangel som är x: 10, y: 10 och är 20 pixlar mindre bredd och höjd i vår avrundade rektangel. Detta kommer att definiera mittenrektangeln för skivning av skalen. Nu ser du rektangeln gå hela scenens bredd utan att hörnen går i proportion. Bara för att se skillnaden, kommentera rad 15 (den börjar med "rect.scale9Grid") och se hur hörnen är nu sträckta.
Jag vet exakt vad du tänker "om designern är avsedd att göra allt tillgångsarbete, varför måste utvecklaren sätta rektangeln för skivningen?" Tja, utvecklaren behöver inte, som designern kan! Högerklicka på tillgången i biblioteket och välj egenskaper. Markera sedan rutan märkt "Aktivera guider för skivning med 9 skivor", så ser du detta:
Nu kan designern omplacera dessa guider så att utvecklaren inte behöver oroa sig för att skapa en rektangel för skalan 9. Om du lämnar linje 15 kommenterade och exporterar den här SWC igen ser du att hörnen är återigen proportionerliga. Enkel eh?
SWC kan rymma mer än bara visuella tillgångar, oavsett om de är platt grafik eller tidslinje / skript animationer. De kan också hålla fullständiga kodbibliotek. SWC är ett mycket bra sätt att distribuera din kod. Det är ganska jobbigt, men inte omöjligt att avkoda SWC. Det innebär dock att du kan skicka en SWC istället för att behöva oroa dig för massor av filer och kataloger. De är också enklare för användaren. Jag har till exempel en mapp där jag dumpar alla ActionScript-kodbibliotek som jag använder eller skapar, men då har jag en separat mapp för användbara SWC-enheter som jag har kommit att använda. Jag tycker det är lättare att välja en SWC och binda den till projektet snarare än att inkludera hela min mapp för delad skript - och det är också snabbare!
För att skapa kodbaserade SWC, använder jag Flash Builder - du kan ladda ner betaversionen från Adobe. Inom Flash Builder måste du skapa ett nytt "Flex Library Project" som så:
Ge det ett namn och se till att du väljer Flex 3.4-kompilatorn:
Klicka på nästa och kryssa sedan rutan bredvid "src", det är här vi lägger våra klasser:
Nu kan vi börja skriva kod för vårt bibliotek, så skapa en ny ActionScript-klass, kalla den "Test" och ange paketnamnet till "com.flashtuts.swc" och sätt in följande kod där:
paketet com.flashtuts.swc import flash.display.Sprite; public class Test utökar Sprite public function Test () init (); privat funktion init (): void var sprite: Sprite = new Sprite (); sprite.graphics.beginFill (0xFF0000); sprite.graphics.drawRoundRect (0, 0, 100, 100, 5, 5); sprite.graphics.endFill (); addChild (sprite);
Som du kan se har vi precis skapat en röd ruta, så låt oss få det här i vårt ActionScript 3-projekt.
Du måste nu ändra Flex-kompilatorn så att den kan hämta de nya tillgångarna SWC du just skapat. När du har gjort det kan du ändra din programs kod så att den ser ut så här:
paket import com.flashtuts.swc.Test; importera flash.display.MovieClip; importera flash.display.Sprite; [SWF (,, frameRate = "30", backgroundColor = "# FFFFFF")] offentlig klass App sträcker Sprite allmän funktion App () var rect: MovieClip = new SimpleRoundedRect (); //rect.scale9Grid = ny rektangel (10, 10, rect.width - 20, rect.height - 20); rect.width = stage.stageWidth; addChild (rect); var redRect: Sprite = nytt test (); addChild (redRect);
Där ser du din röda rektangel! Enkel eh?
Nu kan många människor argumentera för att SWC inte behövs, men de hjälper designers och utvecklare att arbeta synkroniserat utan att kliva på varandras tår. De skyddar din kod och de är ett bra sätt att dela med sig av visuella tillgångar som preloaders och grafik. Medan FXG är mycket bättre, tills Flash Player 10 plockar upp, är SWCs standarden när det gäller att skapa produktionswebbplatser som måste vara skalbara både när det gäller projektets tidslinjer och visuella komponenter.
Accentsconagua