I denne opplæringen, vil jeg være viser deg hvordan du kan bygge og bruke visuelle eiendeler, fonter og Actionscript-kode

Det er en enkel og solid argument for å bruke SWCs:.? Det skiller design fra utviklingen. Flash har evnen til å påvirke utformingen av programmerte visuelle elementer gjennom "CSS" som stilark (omtrent som med Flex), men mesteparten av tiden designere (ikke alle av dem) er skremt av noe å gjøre med kode, inkludert enkel CSS. Et annet poeng er at designere design. De er vanligvis gitt mock skriverammer som de deretter lage brukergrensesnitt i programmer som Photoshop og Illustrator. Hvis de da måtte kode grensesnittet, deretter lage mock ups i Photoshop kan har vært bare bortkastet tid. Videre kan det ta mye tid og krefter på å kode grensesnitt som enkelt kan opprettes i visuelle IDE som Photoshop og Illustrator.

Tilbake til mitt hovedpoeng, gjør at SWC designerne å designe grensesnittet, kutt den opp og deretter passere en SWC til utbygger som binder det hele sammen, skaper dette en enkel arbeidsflyt uten folk trår på andres tær for å oppnå riktig design.

La oss si at i morgen du orientert om et nytt prosjekt der du skal jobbe med et design team. Det kommer til å være designteamet ansvar å bygge grensesnittet inkludert oppretting alle de små tingene som knappe hover stater, dumper animasjoner, avrundede hjørner og ikoner. Det er utviklingsteamet ansvar å deretter bygge prosjektet og bind i alle UI elementer også. Utformingen tid ville lage alle elementene de trenger, legg dem i en SWC og deretter sende denne filen til utviklingsteamet. Utviklingsteamet kan deretter koden i UI elementer uten å måtte bekymre seg for å importere fonter, leke med stilark eller sitter med designer og programmerer grensesnittet.

Som Mario Santos stor artikkel påpeker, har Adobe nylig utgitt Flash Catalyst, en IDE som lar deg importere PSD eller AI-filer og konvertere dem til XML basert vektorobjekter, FXGs. Dette er definitivt et skritt i riktig retning, men det er noe bare implementert i Flash Player 10, som det er bare om en 75% penetrasjon. Dette betyr at når du arbeider på live prosjekter må vi bruke Flash Player 9, så inntil flere mennesker vedta Flash Player 10, SWCs er en god måte å gå om det

Nok snakk, la oss lage en SWC. Jeg kommer til å lage noen grafikk i Photoshop og Illustrator og bringe dem inn i Flash IDE hvor jeg kommer til å sette dem opp for Action koding gjennom å bruke SWCs. Jeg er også tenkt å snakke om et konsept kalt "skala 9 grid" slicing, så fyre opp din favoritt bilde editor og lage en ny fil:

La oss bare ta noen standard tilpasset former Adobe gir og henge dem på kunsten styret:

Så, slik at vi ikke bare har heldekkende sorte bitmaps, la oss legge litt farge til dem:

OK, så vi har noen ganske stjerner, nå ønsker vi å ta dem og sette dem inn i vårt Flash IDE

Fyr opp Flash IDE og opprette en ny Actionscript 3 filen:

Nå Hvis du er en veteran av Flash IDE, vil du huske at du har vært i stand til å importere PSD-filer siden CS3, innførte de en veldig fin grensesnitt når det kom til å importere PSDs som ville gå gjennom dine lag i stedet for å importere en stor bitmap. Så gå til Fil > Import > Importer til bibliotek, navigere til PSD og klikk Importer til bibliotek. Du får en popup-vindu som ligner på dette:

I mitt tilfelle, vil jeg la alt haket bortsett fra bakgrunnen som det er bare en hvit bakgrunn. Nå har vi våre PSD lag som elementer i biblioteket vårt, kan vi begynne å få dem klar for utviklerne. Ta en av stjernene ut av biblioteket og bare slippe den på scenen, som så:

Vi tar stjernen og konvertere den til en MovieClip. Når vinduet vises, name it "BlueStarAsset", kryss av "Export for Action". Du vil se de to inngangs boksene nedenfor blir redigerbar. Du trenger ikke å ta på dem, men de tillater oss å spesifisere hvilken klasse denne eiendelen vil bli kalt, og hva slags klasse det vil forlenge, vil vi holde med "MovieClip":

Nå har vi en ressurs i vårt bibliotek som vi er i stand til å eksportere til Actionscript. Før vi går videre, la oss prøve dette ut. For det første går til Fil > Publish Settings. Klikk på "Flash" -kategorien, velg "Player" versjon 9 og kryss "Export SWC":

Hit "Ok". Nå er vi klare til å eksportere vår SWC. Feilsøke FLA ved å trykke CTRL /CMD + Retur og du vil se en SWF og SWC-fil. Whey! Du har opprettet en SWC, nå la oss bare raskt bruke den. Fyr opp din favoritt koding IDE og opprette en ny Actionscript 3-prosjektet. Konfigurer kompilatoren innstillinger for å inkludere SWC du nettopp opprettet i bygge banen. Opprett en ny base Actionscript 3 fil som heter "App.as" og bruke følgende kode:
pakke {import flash.display.MovieClip; import flash.display.Sprite; [SWF (width = "600", height = "400", framerate = '30 ', bakgrunnsfarge =' # FFFFFF ')] public class App strekker Sprite {offentlig funksjon App () {var stjerne: MovieClip = new BlueStarAsset (); addChild (stjerne); }}}

Du vil se omtrent slik ut:

Så det er vår stjerne aktivum

Jeg vil bare raskt snakke om et konsept kalt "skala 9 grid". Dette er bare en metode som gjør det mulig for oss å skjære opp en visuell ressurs så når det kommer til å endre størrelsen på den, kan ting som avrundede hjørner bo i proporsjon. For eksempel, hvis vi hadde en avrundet rektangel som dette, hvis vi da endret det er bredde, ser du at de avrundede hjørnene er ikke lenger i forhold:

For å bøte på dette, bruker vi skalaen 9 rutenett slicing metode for å satt et rektangel på toppen av vår eiendel som vil bli endret, slik at alt utenfor rektangelet forblir i forhold, for eksempel:

Den røde firkanten i midten er det som vil skalere, men ting ut siden vil ikke . Vi skaper en 9 måte rutenett, har den øverste raden 3, har midt tre og bunnen har 3. Dette er hvordan vi gjør det på en praktisk måte, gå tilbake til Flash IDE og bare tegne en enkel avrundet rektangel. Opprett en ny MovieClip fra den og sørg for at du huke av "eksport for Action" boksen (jeg har kalt meg "SimpleRoundedRect") og forhåpentligvis vil du ha noe som ligner på dette:

Nå er vi kommer til å ta denne nyopprettede eiendel, reeksportere SWC (ved debugging filmen) og gå tilbake til vår Actionscript 3 IDE hvor vi vil oppdatere vår klasse som så:
pakke {import flash.display.MovieClip; import flash.display.Sprite; import flash.geom.Rectangle; [SWF (width = "600", height = "400", framerate = '30 ', bakgrunnsfarge =' # FFFFFF ')] public class App strekker Sprite {offentlig funksjon App () {var rect: MovieClip = new SimpleRoundedRect (); rect.scale9Grid = new rektangel (10, 10, rect.width - 20, rect.height - 20); rect.width = stage.stageWidth; addChild (rect); }}}

Vi er rett og slett å legge vår rektangel til scenen, men før at vi tegner et rektangel som er x: 10, y: 10 og er 20 piksler mindre i bredden og høyden til vår avrundet rektangel. Dette vil bli definere midten rektangelet for vår målestokk kutting. Du vil nå se rektangelet gå hele bredden av scenen uten hjørnene går ut av proporsjoner. Bare for å se forskjellen, kommentere ut linje 15 (den starter med "rect.scale9Grid") og se hvor hjørnene er nå strukket.

Jeg vet akkurat hva du tenker "hvis designer er ment å gjøre alt eiendelen arbeid, så hvorfor utbygger må sette rektangelet for kutting? " Vel utvikleren ikke har til, som designer kan! Høyreklikk på eiendelen i biblioteket og velg egenskaper. Kryss deretter av i boksen merket "Aktiver guider for 9-slice skalering", og du vil se dette:

Nå kan designeren omplassere disse hjelpelinjene slik at utbygger ikke trenger å bekymre deg for å lage et rektangel for skalaen 9 rutenett. Hvis du lar linje 15 kommentert ut og re-eksport dette SWC, vil du se at hjørnene er nå igjen forholdsmessig. Enkelt eh?

SWCs kan inneholde mer enn bare visuelle eiendeler, enten de er flate grafikk eller tidslinje /skriptede animasjoner. De kan også holde fulle kode biblioteker. SWCs er en veldig god måte å distribuere koden din. Det er ganske et ork, men ikke umulig å dekode SWCs. Men betyr det at du kan legge inn en SWC stedet for å måtte bekymre deg for mange filer og kataloger. De er også enklere for brukeren. Jeg, for eksempel, har en mappe hvor jeg dumpe noen Actionscript kode biblioteker som jeg bruker, eller lage, men så har jeg en egen mappe for nyttige SWCs jeg har kommet til å bruke. Jeg synes det er lettere å velge en SWC og binde den til prosjektet i stedet inkludert hele mitt delte scripts mappen - og det er raskere også

For å skape kode basert SWCs, jeg bruker Flash Builder - du kan laste ned beta fra Adobe. Innen Flash Builder må du opprette en ny "Flex Library Project" som så:

Gi den et navn og sørg for at du velger Flex 3.4 kompilatoren:

Klikk på Neste og deretter huke boksen ved siden av "src", dette er hvor vi skal sette våre klasser:

Nå kan vi begynne å skrive kode for biblioteket vårt, så lage en ny Action klasse, kaller det "Test" og sett pakken navn til "com.flashtuts.swc" og sette inn følgende kode i det:
pakke com.flashtuts.swc {import flash.display.Sprite; public class Test strekker Sprite {offentlig funksjon Test () {init (); } Private funksjon 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 ser, har vi nettopp opprettet en rød boks, så la oss få dette inn i vår Actionscript 3-prosjektet

Du vil nå må endre Flex kompilatoren slik at den kan plukke opp de nye eiendelene SWC du nettopp opprettet. Når du har gjort det, kan du endre søknaden din kode kan se slik ut:
pakke {import com.flashtuts.swc.Test; import flash.display.MovieClip; import flash.display.Sprite; [SWF (width = "600", height = "400", framerate = '30 ', bakgrunnsfarge =' # FFFFFF ')] public class App strekker Sprite {offentlig funksjon App () {var rect: MovieClip = new SimpleRoundedRect (); //rect.scale9Grid = new rektangel (10, 10, rect.width - 20, rect.height - 20); rect.width = stage.stageWidth; addChild (rect); Var redRect: Sprite = new Test (); addChild (redRect); }}}

Der vil du se rødt rektangel! Enkelt eh?

Nå mange mennesker kan hevde at SWCs ikke er nødvendig, men de hjelper designere og utviklere å jobbe i synk uten å tråkke på hverandres tær. De beskytter koden din, og de er en god måte å dele visuelle eiendeler som preloaders og grafikk. Mens FXGs er mye bedre, til Flash Player 10 plukker opp, SWCs er standard når det gjelder å skape produksjons nettsider som trenger å være skalerbar, både i form av prosjekttidslinjer og visuelle komponenter. Anmeldelser