Share
Da ActionScript 3 blir et mer populært språk, og Flash Player-funksjonene blir mer avanserte og tilgjengelige, er det viktig å bygge en felles arbeidsflyt i bedriften din slik at prosjekter kan bli mer smidige og, enda viktigere, bli levert til tiden. Et stort problem med ActionScript 2 var å bygge bro mellom gapet mellom designeren og utvikleren. Dette forlot ofte utviklere som handlet med FLAs, som inneholdt hundrevis av dårlig navngitte biblioteksposter og ingen likte det.
Med fremskrittene til ActionScript 3 og muligheten til å kode bort fra tidslinjen, har SWCer blitt vanlige elementer på store prosjekter, men det er fortsatt mange mennesker der ute som ikke vet hva de er eller hvordan man lager / bruker dem.
La oss starte med å se hvilke SWCer som faktisk er. En SWC [ShockWave-komponent akronym si:Sw ~ Ick] :) er rett og slett en pakket opp pakke med filer generert av Flash IDE. De inneholder visuelle ressurser (for eksempel MovieClips, Buttons, Graphics and Fonts) samt kode. SWC har eksistert siden Flash MX 2004, men har bare tatt seg av da ActionScript 3 kom rundt fordi før, som jeg sa, kunne du bare holde alt i FLA.
I denne veiledningen vil jeg vise deg hvordan du kan legge inn og bruke visuelle ressurser, skrifter og ActionScript-kode.
Det er et enkelt og solidt argument for bruk av SWC: det skiller designet fra utviklingen. Flash har evnen til å påvirke utformingen av programmerte visuelle elementer gjennom 'CSS' som stilark (likesom med Flex), men de fleste designere (ikke alle) blir avbrutt av noe som helst med kode, inkludert enkle CSS. Et annet poeng er at designere design. De er vanligvis gitt mock skrive rammer der de deretter oppretter brukergrensesnitt i programmer som Photoshop og Illustrator. Hvis de da måtte kode grensesnittet, kan det være en sløsing med tid da å lage mock ups i Photoshop. Videre kan det ta mye tid og krefter å kode grensesnitt som enkelt kan opprettes i visuelle IDEer som Photoshop og Illustrator.
Tilbake til mitt hovedpunkt, gir SWC designerne mulighet til å designe grensesnittet, kutte det og deretter sende en SWC til utvikleren som knytter det hele sammen, dette skaper en enkel arbeidsflyt uten at folk treger på andres tær for å oppnå det riktig design.
La oss si i morgen at du er informert om et nytt prosjekt hvor du skal jobbe med et designteam. Det kommer til å være designteamets ansvar å bygge grensesnittet, inkludert å lage alle de små tingene som knapphover-stater, loader-animasjoner, avrundede hjørner og ikoner. Det er utviklingsgruppens ansvar å da bygge prosjektet og binde i alle UI-elementene også. Designtiden vil skape alle elementene de trenger, sette dem inn i en SWC og deretter sende den filen til utviklingslaget. Utviklingslaget kan da kode i UI-elementene uten å måtte bekymre seg for å importere skrifter, spille med stilark eller sitte med designeren og programmere grensesnittet.
Som Mario Santos store artikkel påpeker, har Adobe nylig lansert Flash Catalyst, en IDE som lar deg importere PSD- eller AI-filer og konvertere dem til XML-baserte vektorobjekter, FXGs. Dette er definitivt et skritt i riktig retning, men det er noe bare implementert i Flash Player 10, hvorav det handler bare om en 75% gjennomtrengningshastighet. Dette betyr at når du arbeider med live-prosjekter, må vi bruke Flash Player 9, så til flere mennesker adopterer Flash Player 10, er SWCs en god måte å gå om det.
Nok snakk, la oss lage en SWC. Jeg skal lage noen grafikk i Photoshop og Illustrator og bringe dem inn i Flash IDE der jeg skal sette dem opp for ActionScript-koding ved hjelp av SWCs. Jeg skal også snakke om et konsept kalt "skala 9 grid" -sniving, så brann opp favorittbildeditoren din og opprett en ny fil:
La oss bare ta noen standard tilpassede figurer Adobe gir og holder dem på kunstbrettet:
Så slik at vi ikke bare har solide sorte bitmaps, la oss legge til litt farge på dem:
OK, så vi har noen fine stjerner, vi vil nå ta dem og sette dem inn i vår Flash IDE.
Brann opp Flash IDE og opprett en ny ActionScript 3-fil:
Nå, hvis du er veteran av Flash IDE, husker du at du har vært i stand til å importere PSD-filer siden CS3, de introduserte et veldig fint grensesnitt når det gjaldt å importere PSDer som ville gå gjennom lagene dine i stedet for importerer en stor bitmap. Så gå til Arkiv> Importer> Importer til bibliotek, naviger til PSD og klikk Importer til bibliotek. Du får et vindu som dukker opp som dette:
I mitt tilfelle vil jeg la alt krysse bortsett fra bakgrunnen, da det bare er en hvit bakgrunn. Nå har vi våre PSD-lag som elementer i vårt bibliotek, vi kan begynne å få dem klar for utviklerne. Ta en av stjernene ut av biblioteket og bare slipp det på scenen, slik som:
Vi tar stjernen og konverterer den til en MovieClip. Når vinduet vises, kaller det "BlueStarAsset", kryss av "Export for ActionScript". Du ser at de to innskrivingsfeltene nedenfor blir redigerbare. Du trenger ikke å røre dem, men de tillater oss å spesifisere hvilken klasse denne aktiva vil bli kalt og hvilken type klasse den vil strekke seg, vi holder fast med "MovieClip":
Nå har vi en ressurs i vårt bibliotek som vi kan eksportere til ActionScript. Før vi fortsetter, la oss prøve dette ut. Gå først til Arkiv> Publiser innstillinger. Klikk på "Flash" -fanen, velg "Player" versjon 9 og kryss "Eksporter SWC":
Hit "Ok". Nå er vi klare til å eksportere vår SWC. Feilsøk FLA ved å trykke CTRL / CMD + Return, og du vil se en SWF og en SWC-fil. Whey! Du har opprettet en SWC, nå la oss bare bruke den raskt. Brann opp din favoritt koding IDE og opprett et nytt ActionScript 3-prosjekt. Konfigurer kompilatorinnstillingene for å inkludere SWC du nettopp har opprettet i byggestien. Opprett en ny base ActionScript 3-fil kalt "App.as" og bruk følgende kode:
pakke import flash.display.MovieClip; importer flash.display.Sprite; [SWF (,, frameRate = "30", backgroundColor = "# FFFFFF")] offentlig klasse App utvider Sprite offentlig funksjon App () var stjerne: MovieClip = ny BlueStarAsset (); addChild (stjerne);
Du ser noe slikt:
Så det er vår stjerne ressurs.
Jeg snakker bare om et konsept kalt "skala 9 grid". Dette er bare en metode som gjør at vi kan skjære opp en visuell ressurs, så når det gjelder å endre størrelsen på det, kan ting som avrundede hjørner holde seg i forhold. For eksempel, hvis vi hadde et avrundet rektangel som dette, hvis vi da endret bredden, ser du at de avrundede hjørner ikke lenger er i forhold:
For å overvinne dette, bruker vi skala 9-grensesnittet til å sette et rektangel på toppen av aktiva som skal resizes, slik at alt utenfor rektangelet forblir i proporsjon, for eksempel:
Det røde rektangelet i midten er det som skal skaleres, men ting ut siden vil ikke. Vi lager en 9-veis rutenett, den øverste raden har 3, midten har 3 og bunnen har 3. Slik gjør vi det i praktisk forstand, gå tilbake til Flash IDE og bare tegne et enkelt avrundet rektangel. Opprett en ny filmklipp fra den og sørg for at du merker av for "Eksporter for ActionScript" -boksen (jeg har kalt min "SimpleRoundedRect"), og forhåpentligvis har du noe som ligner dette:
Nå skal vi ta denne nyopprettede aktiva, reeksportere SWC (ved å feilsøke filmen) og gå tilbake til vår ActionScript 3 IDE der vi skal oppdatere vår klasse slik:
pakke import flash.display.MovieClip; importer flash.display.Sprite; importer flash.geom.Rectangle; [SWF (,, frameRate = "30", backgroundColor = "# FFFFFF")] offentlig klasse App utvider Sprite offentlig funksjon 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 legger rett og slett vårt rektangel til scenen, men før det tegner vi et rektangel som er x: 10, y: 10 og er 20 piksler mindre i bredde og høyde til vårt avrundede rektangel. Dette vil definere mellomrektangelet for skalaenes skala. Du vil nå se rektangelet gå hele scenens bredde uten at hjørnene går ut av proporsjoner. Bare for å se forskjellen, kommentere linje 15 (den starter med "rect.scale9Grid") og se hvordan hjørnene nå strekkes.
Jeg vet nøyaktig hva du tenker "hvis designeren er ment å gjøre alt aktivitetsarbeidet, hvorfor skal utvikleren derfor sette rektangelet for skåret?" Vel utvikleren trenger ikke, som designeren kan! Høyreklikk på aktivet i biblioteket og velg egenskaper. Merk av i boksen merket "Aktiver guider for 9-skala-skalering", og du får se dette:
Nå kan designeren omplassere disse veiledningene, slik at utvikleren ikke trenger å bekymre seg for å skape et rektangel for skala 9 grid. Hvis du lar linje 15 kommentere og eksportere denne SWC-en, ser du at hjørnene er igjen en gang proporsjonal. Enkel eh?
SWCer kan holde mer enn bare visuelle eiendeler, enten de er flate grafikk eller tidslinje / skript animasjoner. De kan også inneholde fullkodsbiblioteker. SWC er en veldig god måte å distribuere koden din på. Det er ganske en lære, men ikke umulig å dekode SWCs. Det betyr imidlertid at du kan legge inn en SWC i stedet for å måtte bekymre deg for mange filer og kataloger. De er også enklere for brukeren. Jeg har for eksempel en mappe hvor jeg dumper noen ActionScript-kodebiblioteker som jeg bruker eller lager, men da har jeg en egen mappe for nyttige SWCer jeg har kommet til å bruke. Jeg synes det er lettere å velge en SWC og bind den til prosjektet i stedet for å inkludere hele min delte skriptmappe - og det er også raskere!
For å lage kodebaserte SWCer bruker jeg Flash Builder - du kan laste ned beta fra Adobe. I Flash Builder må du opprette et nytt "Flex Library Project" slik:
Gi det et navn og pass på at du velger Flex 3.4-kompilatoren:
Klikk neste og merk av i 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å opprett en ny ActionScript-klasse, ring den til "Test" og sett pakkenavnet til "com.flashtuts.swc" og legg inn følgende kode der inne:
pakke com.flashtuts.swc import flash.display.Sprite; offentlig klasse Test utvider Sprite offentlig funksjon Test () init (); privat 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 kan se, har vi nettopp opprettet en rød boks, så la oss få dette inn i vårt ActionScript 3-prosjekt.
Nå må du endre Flex-kompilatoren slik at den kan hente opp de nye eiendelene SWC du nettopp har opprettet. Når du har gjort det, kan du endre programmets kode slik at den ser slik ut:
pakke import com.flashtuts.swc.Test; importer flash.display.MovieClip; importer flash.display.Sprite; [SWF (,, frameRate = "30", backgroundColor = "# FFFFFF")] offentlig klasse App utvider Sprite offentlig funksjon App () var rect: MovieClip = new SimpleRoundedRect (); //rect.scale9Grid = nytt rektangel (10, 10, rect.width - 20, rect.height - 20); rect.width = stage.stageWidth; addChild (rect); var redRect: Sprite = ny Test (); addChild (redRect);
Der vil du se ditt røde rektangel! Enkel eh?
Nå kan mange mennesker hevde at SWC ikke er nødvendig, men de hjelper designere og utviklere til å jobbe i synkronisering uten å tråkke på hverandres tær. De beskytter koden din, og de er en god måte å dele visuelle ressurser som forladere og grafikk. Mens FXG er mye bedre, til Flash Player 10 plukker opp, er SWCs standarden når det gjelder å skape produksjonsnettsteder som skal skaleres både når det gjelder prosjektets tidslinjer og visuelle komponenter.
Accentsconagua