Intro til Flash Camo del 2
Del
Del
Del
Del
Dette Cyber mandag Envato Tuts + Kursene vil bli redusert til bare $ 3. Ikke gå glipp av.
Velkommen til del to av min introduksjon til Flash Camouflage Work. I del 1 bygde vi grunnlaget vårt nettsted, komponenter, etiketter, css parser for, og sette opp vår PropertySheet. I denne delen skal vi fokusere på design siden av nettstedet vårt ved å rydde opp oppsettet, skinn og legge til samhandling.
La oss komme i gang.
< .no>
Forhåndsvisning
Hvis du vil oppdatere vår hukommelse, er dette det endelige produktet vi skal lage. Det er det Bobble Person Side Launcher
jeg bruker på http://jessefreeman.com
Trinn 15:. Overførings Sheets
Jeg har snakket om å lage en decalpapiret systemet før, men nå er vi kommer til å dra nytte av Flash Camo sin egen bygd i system. La oss snakke om hvordan dekor arbeid i Camo
Den viktigste funksjonen av rammeverket er DecalSheet system (som ligger i "camo.core.decal" pakken.); består av DecalSheetManager
, DecalSheet Hotell og Decal
klasser. Den DecalSheet konseptet ble inspirert av dekaler du ville fått med modellfly. Hver modell kit ville inneholde ark med grafikk og på hvert ark kan du skrelle av et klistremerke og plassere den på modellen. Camo versjon av DecalSheet tillate deg å laste i eksterne bilder, kuttet ut dekaler og huden din søknad med dem.
For dette trinnet trenger du Photoshop CS 3/4 for å åpne psd. Du kan laste det ned her.
Når du har lastet ned PSD, åpne den opp og ta en titt.
Som du ser har vi vår enkle design. Jeg har gått foran og gjort alt av prep arbeidet for deg så la oss bare gå til "lagre som" og opprette en ny PNG. Merk:. Hvis du går til "Save for Web" vil du se stykkene vi skal bruke senere i opplæringen
Vi vil lagre dette png som "default.png" til vår "html-mal /images /skins "-mappen i vår BobbleHeadApp prosjekt. Du kan også høyreklikke på bildet nedenfor og bruke den i stedet for PSD. Pass på at du lagrer det som "default.png"
Nå som vi har vår hud, trenger vi å skape en global DecalSheet leder
Trinn 16:. Lag en global DecalSheet leder Anmeldelser
Vår side kommer til å gjøre utstrakt bruk av DecalSheet system, men først skal vi trenger for å komme opp med en måte å gjøre det tilgjengelig i hele vårt program. Akkurat som vi gjorde med GlobalStyleSheetManager, kommer vi til å skape et Singleton for vår DecalSheetManager klasse.
DecalSheetManager plakater (ligger i "camo.core.managers" -pakken) er den Lederen for klistremerket system. Det håndterer xml som definerer en liste over DecalSheet bilder og koordinater for å kutte ut hver Skjorte barn. Den lagrer også en samling av DecalSheets å gjøre å lage komplekse Decal oppslagstabeller enklere å administrere. Du kan konfigurere DecalSheets og dekor på DecalSheetManager under kjøring eller med XML. Når dataene er satt, går DecalSheetManager ut og får alle bildene den trenger for DecalSheet bildene.
Nå er vi klare til å sette opp vår GlobalDecalSheetManager klasse. Du må lage en ny klasse kalt "GlobalDecalSheetManager" og sette den inn i "com.jessefreeman.managers" pakken
Her er koden for klassen.
Pakke com.jessefreeman.managers {import camo.core.managers.DecalSheetManager; public class GlobalDecalSheetManager {public static konst INIT: String = "init"; privat Static Var __instance: DecalSheetManager; /** * *param Håndhever * * /public funksjon GlobalDecalSheetManager (håndhever: SingletonEnforcer) {if (håndhever == null) {kaste nytt Feil ("Feil: forekomst mislyktes: Bruk GlobalDecalSheetManager.instance i stedet."); }} /** * *return * /Public static funksjon få forekomst (): DecalSheetManager {if (GlobalDecalSheetManager .__ eksempel == null) {GlobalDecalSheetManager .__ eksempel = new DecalSheetManager (); } Returnere GlobalDecalSheetManager .__ eksempel; }}} Intern klasse SingletonEnforcer {}
Dette bør være kjent for deg nå, så det er ikke mye å gå over. La oss snakke om hvordan du legger i DecalSheet XML og analysere den
Trinn 17:. Definere dekor
Vi kommer til å endre DecalSheet xml i vår htm-malen mappen. For å skape våre dekaler må vi vite x, y, bredde og høyde på hver merket vi ønsker å bruke. Her er en rask mockup av vår PSD med koordinatene
Nå som vi har alle de verdiene vi trenger, erstatte innholdet i vår decahsheet.xml i html-malen /xml mappe med følgende:.
<? xml version = "1.0" encoding = "UTF-8" >? < decalsheet > < ark baseURL = "images /skins" > < ark name = "default" src = "/default.png" forspenning = "true" w = "570" h = "359" /> < /sengetøy > < dekaler > < merket name = "head" sheet = "default" x = "433" y = "181" w = "136" h = "138" /> < merket name = "body" sheet = "default" x = "255" y = "139" w = "182" h = "139" /> < merket name = "leftArm" sheet = "default" x = "208" y = "278" w = "194" h = "76" /> < merket name = "leftFoot" sheet = "default" x = "4" y = "172" w = "125" h = "78" /> < merket name = "leftLeg" sheet = "default" x = "128" y = "172" w = "122" h = "78" /> < merket name = "rightArm" sheet = "default" x = "251" y = "17" w = "182" h = "122" /> < merket name = "rightLeg" sheet = "default" x = "3" y = "6" w = "216" h = "168" /> < /dekaler > < /decalsheet >
Dette xml skal være enkelt å følge, vi definerer våre DecalSheet kilde deretter definere hver enkelt etikett og arket de tilhører. Legg merke til hvordan ark har en egenskap til å forhåndslaste, kommer vi til å bruke DecalSheetManager sin loader til prelaod alle våre stedets bilder. Dette vil spille en viktigere rolle når vi preload flere DecalSheets senere
Trinn 18:. Legge DecalSheets
DecalSheetManager bruker xml å skape DecalSheets og klistremerker. Vi trenger å laste i XML først da kan vi gi det ut til GlobalDecalSheetManager sin DecalSheetManager (prøv å si at 3 ganger fort).
La oss begynne med å legge følgende metoder etter vår "onPropertySheetLoad" metoden i Doc Klasse:
privat funksjon loadDecalSheetData (): void {var URLLoader: URLLoader = new URLLoader (); urlLoader.addEventListener (Event.COMPLETE, onDecalSheetDataLoad, falsk, 0, true); urlLoader.load (ny URLRequest ("xml /decalsheet.xml"));} private funksjon onDecalSheetDataLoad (hendelse: Hendelse): void {//Fjern hendelse lytteren URLLoader (event.target) .removeEventListener (Event.COMPLETE, onDecalSheetDataLoad); //Var xml: XML = XML (event.target.data); Var decalSheetManager: DecalSheetManager = GlobalDecalSheetManager.instance; decalSheetManager.addEventListener (LoaderManagerEvent.PRELOAD_NEXT, onPreloadNext, falsk, 0, true); decalSheetManager.addEventListener (LoaderManagerEvent.PRELOAD_DONE, onDecalSheetsLoad, falsk, 0, true); decalSheetManager.parseXML (xml);} beskyttet funksjon onPreloadNext (event: LoaderManagerEvent): void {trace ("Legge DecalSheet" + event.data.totalPreloaded + "med" + event.data.totalPreloading);} private funksjon onDecalSheetsLoad (event: LoaderManagerEvent): void {var target: DecalSheetManager = event.target som DecalSheetManager; target.removeEventListener (LoaderManagerEvent.PRELOAD_DONE, onDecalSheetsLoad); init ();}
Du må også importere følgende:
import camo.core.managers.DecalSheetManager, import com.jessefreeman.managers.GlobalDecalSheetManager, import camo.core.events.LoaderManagerEvent;
Vi har nettopp lagt mye kode så la oss ta et sekund å gå over hva som skjer. Først definerer vi "loadDecalSheetData" metoden. Alt vi gjør her er å skape en ny URLLoader og ha det legger vår decalsheet.xml. Når lasten er ferdig kaller vi "onDecalSheetDataLoad". Denne metoden håndterer fjerning tilfelle lytteren fra vår URL lasteren og går av XML til forekomsten av DecalSheetManager hentet fra vår GlobalDecalSheetManager Singleton. Vi har også lagt til to lyttere; en for varsling av "neste" forspenning initiering og den andre er når forbelastning er fullført. Når vi er ferdig med lasting vi kaller "onDecalSheetLoad", fjerne våre lyttere og kaller init.
Nå må vi fjerne "init" telefon fra vår "onPropertySheetLoad" metoden. Erstatte den funksjonen med følgende:
privat funksjon onPropertySheetLoad (hendelse: Hendelse): void {var target: URLLoader = event.target som URLLoader; target.removeEventListener (Event.COMPLETE, onPropertySheetLoad); propSheet.parseCSS ("global.properties", target.data); loadDecalSheetData ();}
Hvis du kompilere, bør alt ser det samme, men vi er nå lasting i vår DecalSheet xml sammen med DecalSheet bilde
Trinn 19:. Overføringsbilde Skjerm
Vi trenger en komponent for å vise vår Skjorte barn i. Normalt kan du dra nytte av BoxModel bakgrunnsbilde eiendom for å automatisk laste inn et bilde du trenger, men siden våre kroppsdeler må være sentrert må vi plassere dem ved hand.
La oss begynne med å døpe vår "SimpleDisplay" i "com.jessefreeman.components" til "DecalDisplay".
Når du har gjort det, åpne klassen opp og erstatte sin kode med følgende:
pakke com.jessefreeman.components {import camo.core.decal.Decal; import com.jessefreeman.managers.GlobalDecalSheetManager; import com.jessefreeman.components.AbstractComponent; public class DecalDisplay strekker AbstractComponent {beskyttet Var decalInstance: Overføringsbilde; offentlig Var pixelSnapping: String = "auto"; offentlig Var glatting: Boolean = true; offentlig funksjon DecalDisplay (id: String) {super (dette, id); } Offentlig funksjon sett src (decalName: String): void {decalInstance = GlobalDecalSheetManager.instance.getDecal (decalName, pixelSnapping, glatting); hvis addChild (decalInstance) (inneholder (decalInstance)!); }}}
Som du ser, har vi noen egenskaper som vi kan bruke til å style denne klassen fra en PropertySheet. La oss ta en titt på de offentlige variabler, bør pixelSnapping og glatting ser kjent ut hvis du har jobbet med Bitmap klasse før. Disse bare hjelpe med å gjøre våre dekor ser glatt når de bobble rundt.
Hovedfunksjonaliteten i klassen er den setter for src. Som du kan se den godtar en merket navn, ber deretter Skjorte barn fra GlobalDecalSHeetManager. Hvis klistremerket finnes vi legge den til skjermen. La oss snakke om dekor litt.
En Overføringsbilde
er en Bitmap som inneholder en referanse til DecalSheet den ble kuttet ut fra. Nå som du har sett hvordan vi får XML-data til DecalSheetManager, la oss snakke om hvordan du henter Decal tilfeller. Når du kaller "getDecal" på DecalSheetManager eller DecalSheet, må du oppgi navnet på et klistremerke. Du kan sjekke om en Skjorte barn finnes ved å se gjennom en DecalSheet er "decalName" Array. Når en Skjorte barn er bedt om, blir Overføringsbilde navn sendes til den overordnede DecalSheet gjennom "sample" metoden og Skjorte barn er BitmapData returneres innsiden av en ny Overføringsbilde Instance.
Siden alle dekor inneholde en referanse til DecalSheet det ble kuttet ut fra, gjør den forbindelse dekor som motta oppdateringer fra moder DecalSheet. Du kan endre et DecalSheet sin BitmapData når som helst akkurat som du gjør med andre Bitmap eksempel. Dekaler lytte etter "Event.CHANGE" hendelser fra deres foreldre blad og når en hendelse er mottatt, resamples det DecalSheet og oppdaterer sin egen BitmapData. Senere vil vi Reskin at hele programmet på direkten ved å endre BitmapData av vår DecalSheet
Trinn 20:. Bruke Overføringsbilde Skjerm
Nå som vi har vår DecalDisplay vi trenger å legge det til vår BobbleContainer. I BobbleContainer, legge følgende metode etter "bli aktiv":
offentlig funksjon sett src (verdi: String): void {decalDisplay = new DecalDisplay (id + "DecalDisplay"); decalDisplay.src = verdi; addChildAt (decalDisplay, 0);}
Også vi må opprette følgende egenskap:
beskyttet Var decalDisplay: DecalDisplay;
Så alt vi gjør er å legge en setter for src at vi kan passere inn i en ny forekomst av DecalDisplay. Legg merke til at vi bruker "addChildAt"? Siden vi legger vår etikett, vi ønsker å være sikker på at DecalDisplay er på det laveste enden av listen displayet. Nå har vi vår DecalDisplay på plass, vi trenger bare å sette opp noen eiendom stiler
Trinn 21:. Styling Overføringsbilde Viser
Vi har alt vi trenger i stedet å begynne å vise våre dekor. Alt vi trenger å gjøre er å legge noen nye boliger i vår PropertySheet. Ta en titt på denne prøven stil for DecalDisplay så får vi oppdatere hele eiendommen sheet:
#body {x: 355; y: 229; width: 181; høyde: 144; src: kroppen;} # bodyDecalDisplay {x: -84; y: -65; }
Som du kanskje har lagt merke til tidligere når vi skaper våre DecalDisplays i BobbleContainer, vi passerer i BobbleContainer sin id og strengen "DecalDisplay" så hvert tilfelle har en unik id. I eksempelet ovenfor har vi lagt src å referere til navnet på Skjorte barn vi vil bruke, og deretter ha en tilsvarende stil med x, y forskyvning for merket. Erstatte innholdet i din "main.properties.css" med følgende: Twitter /* CSS fil * /BobblePerson {del-IDer: head kroppen leftArm rightArm leftLeg leftFoot rightLeg;} Etikett {font. Arial svart;. size: 20px; embedFonts: true; color: #ffffff; anti-alias-type: avanserte;} # siteLabel {text: Anatomy of JESSE FREEMAN; x: 155; y: 60; size: 18px; rotasjon: 24px; brev-Avstand: -2; tekst-høyde: 30px; alpha. 0,5;} BobbleContainer {aktiv: true; rollOverForce: 1; roll-over-force: 1; nikker-force: 0; nikker-vinkel: 0; nikker-range: 10; nikker rammede: 0,7; nikker-fuktig: 0,985;} /* BobbleContainers * /# body {x: 355; y: 229; src: kroppen;} # hodet {x: 449; y: 250; src: hodet;} # leftArm {x: 381; y: 313; src: leftArm;} # leftFoot {x: 145; y: 213; src: leftFoot;} # leftLeg {x: 263; y: 235; src: leftLeg;} # rightArm {x: 419; y: 176; src: rightArm;} # rightLeg {x: 275; y: 176; src: rightLeg;} /* BobbleContainer Labels * /# bodyLabel {alpha: 1; rotasjon: 20; x: -35; y: -30; text-align: center; auto-size: center; } #leftArmLabel {text: bFreeDesign; x: -90; y: 25; rotasjon: -9; Størrelse: 18; brev-Avstand: -3;} # leftFootLabel {text: e-post; x: -78; y: -13; rotasjon: 6;} # leftLegLabel {text: FlashBum; x: -95; y: -40; rotasjon: 9; } #rightArmLabel {text: FlashArtOfWar; x: -80; y: -75; rotasjon: 32; font-size: 16; brev-Avstand: 1;} # rightLegLabel {text: iLikeToDream; x: -157; y: -83; rotasjon: 27;} /* BobbleContainer Viser * /# bodyDecalDisplay {x: -84; y: -65; } #headDecalDisplay {x: -20; y: -18;} # leftArmDecalDisplay {x: -162; y: -11; } #leftFootDecalDisplay {x: -104; y: -20;} # leftLegDecalDisplay {x: -103; y: -43;} # rightArmDecalDisplay {x: -136; y: -104; } #rightLegDecalDisplay {x: -192; y: -142;}
Nå har du en ren PropertySheet med våre dekaler riktig tilkoblet. Hvis du gjør en compile bør du se alle de kroppsdelene i deres riktig sted sammen med våre etiketter
Trinn 22:. Focus Hendelses
Når vi begynner å legge til interaktivitet til vår app Vi ll trenger en tilpasset hendelse for å spore musen samhandling på kroppsdeler. La oss lage en ny klasse kalt "FocusEvent" i "com.jessefreeman.events"
Her er koden:
pakke com.jessefreeman.events {import flash.events.Event; public class FocusEvent strekker Hendelses {public static konst IN_FOCUS: String = "InFocus"; public static konst LOST_FOCUS: String = "lostFocus"; offentlig Var tekst: *; offentlig Var skinName: String; offentlig funksjon FocusEvent (type: String, tekst: String = "", skinName: String = "default", bobler: Boolean = false, cancelable: Boolean = false) {this.text = tekst; this.skinName = skinName; super (type, bobler, cancelable); }}}
Så i dette FocusEvent klassen har vi lagt til to nye eiendommer til hendelsen standard konstruktør, "tekst" og "skinName". Teksten vil være etiketten på kroppsdel vi rulle over og skinName vil bli brukt senere når vi begynner å dynamisk Reskin vår app. Vi har også to konstanter som representerer våre stater, "InFocus" og "lostFocus"
La oss sende denne hendelsen ved å gå inn i BobbleContainer klassen og legge til følgende linje til slutten av "onRollOver" metoden.
dispatchEvent (ny FocusEvent (FocusEvent.IN_FOCUS, rollOverText, "default", true, true));
Deretter legger følgende til "onRollOut" metoden:
dispatchEvent (ny FocusEvent (FocusEvent.LOST_FOCUS, rollOverText, "default", true, true));
Også at du importerer FocusEvent:
import com.jessefreeman.events.FocusEvent;
Nå har vi to hendelser de sendes informere oss om tilstanden til BobbleContainer . Før vi er ferdig må vi legge en ny offentlig variabelen til BobbleContainer:
offentlig Var rollOverText: String = "";
Vi passerer denne variabelen inn i fokus hendelsen som blir sendt. Du må endre css med den nye rollOverText. Erstatte disse stilene som finnes i /* BobbleContainers * /kommentar blokk med følgende: Twitter /* BobbleContainers * /# body {x: 355; y: 229; rollOverLabel :; src: kroppen;} # hodet {x: 449; y: 250; src: hodet; rollOverText: FORTSETT;} # leftArm {x: 381; y: 313; src: leftArm; rollOverText: LEIE;} # leftFoot {x: 145; y: 213; src: leftFoot; rollOverText: KONTAKT;} # leftLeg {x: 263; y: 235; src: leftLeg; rollOverText: portefølje;} # rightArm {x: 419; y: 176; src: rightArm; rollOverText: BLOG;} # rightLeg {x: 275; y: 176; src: rightLeg; rollOverText: MY ART;}
Trinn 23: Oppdatere Body Etikett
Nå har vi alle av rullen over tekst på plass er det på tide å vise dem. Du har kanskje lagt merke til at "kroppen" del ikke har noen rollOverText. Vi kommer til å vise den kroppsdelen tekst her. La oss gå inn i BobblePerson og gjøre noen modifikasjoner
På slutten av "createParts" -metoden legge til følgende to hendelsen lyttere:
display.addEventListener (FocusEvent.IN_FOCUS, onContainerRollOver); display.addEventListener. (FocusEvent.LOST_FOCUS, onContainerRollOut);
Under "createParts" metoden legge til følgende:
offentlig funksjon onContainerRollOver (event: FocusEvent): void {if (! event.target = partDisplay) {partDisplay.label.text = event.text; }} offentlig funksjon onContainerRollOut (event: FocusEvent):. void {partDisplay.label.text = "";}
Vi må legge en ny getter så setter følgende henhold get "partIds"
offentlig funksjon få partDisplay (): BobbleContainer {var index: int = _partIds.indexOf (partDisplayId); returnere (indeks! = -1)? partInstances [index]: null;}
Vi er nesten der, nå la oss sørge for at du har følgende egenskap:
offentlig Var partDisplayId: String;
Deretter importerer følger klassen:
importere com .jessefreeman.events.FocusEvent;
Før vi teste dette, vi trenger bare å oppdatere vår ".BobblePerson" css stil for å inkludere følgende egenskap:
del-skjerm-id: kroppen;
Nå gjør en kompilere og rulle over de kroppsdelene.
Legg merke til hvordan vi kan endre den kroppsdelen som vil vise teksten når som helst ved å endre den delen-skjerm-id i vår css. La oss legge til i det siste settet med logikken til nettstedet vårt
Trinn 24:. Legge Klikk Logic
Nå skal vi legge til noen lyttere å spore når en kroppsdel er klikket så vi kan åpne en tilsvarende url i et nytt vindu. Gå inn i BobbleContainer og erstatte "addEventListeners" og "removeEventListeenrs" med følgende kode:
beskyttet funksjons addEventListeners (mål: IEventDispatcher): void {target.addEventListener (MouseEvent.ROLL_OVER, onRollOver); target.addEventListener (MouseEvent.ROLL_OUT, onRollOut); target.addEventListener (MouseEvent.CLICK, onClick);} beskyttet funksjons removeEventListeners (mål: IEventDispatcher): void {target.removeEventListener (MouseEvent.ROLL_OVER, onRollOver); target.removeEventListener (MouseEvent.ROLL_OUT, onRollOut); target.removeEventListener (MouseEvent.CLICK, onClick);}
Vi er rett og slett å legge en lytter for museklikk. Legg til følgende metode under "onRollOut":
beskyttet funksjon onClick (event: MouseEvent): void {if (url) navigateToURL (url, "_self");}
La oss legge til en ny offentlig variabel for våre webadresser:
offentlig Var url: URLRequest;
Importer følgende klasser:
import flash.net.URLRequest, import flash.net.navigateToURL;
Alt vi trenger å gjøre er å endre vår PropertySheet å inkludere webadresser for hver del ved å bytte ut "/* BobbleContainers * /" kommentar blokk med følgende: Twitter /* BobbleContainers * /# body {x: 355; y: 229; rollOverLabel :; src: kroppen;} # hodet {x: 449; y: 250; src: hodet; rollOverText: FORTSETT; url: url ("http://www.linkedin.com/in/jessefreeman");} # leftArm {x: 381; y: 313; src: leftArm; rollOverText: leie; url: url ("http://www.bfreedesign.com");} # leftFoot {x: 145; y: 213; src: leftFoot; rollOverText: KONTAKT; url: url ("mailto: [email protected]");} # leftLeg {x: 263; y: 235; src: leftLeg; rollOverText: portefølje; url: url ("http://www.flashbum.com");} # rightArm {x: 419; y: 176; src: rightArm; rollOverText: BLOG; url: url ("http://www.flashartofwar.com");} # rightLeg {x: 275; y: 176; src: rightLeg; rollOverText: MY ART; url: url ("http://www.iliketodream.com");}
Legg merke til hvordan vi har lagt til url egenskaper. Dette er hvordan vi forteller Camo CSS parser å konvertere webadresser inn URL-forespørsler. Nå når en bruker klikker på en kroppsdel vi bare passere av url forespørsel satt av PropertyStyleSheet til "navigateToURL" -klassen.
Hvis du ønsker at Bobble deler til å fungere som knapper, bare legge til følgende i den ".BobbleContainer" style:
button-modus: true, bruke hånd-markøren: true; muse barn: false;
Nå er alle de BobbleContainer klassene vil automatisk fungere som knapper. Det kan være lurt å endre en mer stil, den "#body", så det har ikke mus interaktivitet. Bare legg følgende til eiendommen velger:
button-modus: false; bruke hånd-markøren: false; muse barn: false;
Nå opphever den klassen standardinnstillinger, og vil ikke ha muse interaktivitet <. br>
La oss se nærmere på hvordan du gjør noen avanserte skinning
Trinn 25: Avansert. Skinning
Når du åpnet opp PSD du kanskje lagt merke til et par ekstra "skins" i mappen Body Skin.
Jeg har forberedt følgende skins for oss å bruke. Du kan laste ned zip her og sette skins i html-malen /images /skins mappen.
Nå har du hver hud la oss se på hvordan vi kan legge dem alle i.
Trinn 26: Legge flere DecalSheets
Lasting i flere DecalSheet bildene er like enkelt som å modifisere ut xml. La oss erstatte vår decalsheet.xml med følgende:?
≪ xml version = "1.0" encoding = "UTF-8" > < decalsheet > < ark baseURL = "images /skins" > < ark name = "default" src = "/default.png" forspenning = "true" w = "570" h = "359" /> < ark name = "iliketodream" src = "/iliketodream_skin.png" forspenning = "true" w = "570" h = "359" /> < ark name = "flashbum" src = "/flashbum_skin.png" forspenning = "true" w = "570" h = "359" /> < ark name = "bfreedesign" src = "/bfreedesign.png" forspenning = "true" w = "570" h = "359" /> < ark name = "artofwar" src = "/artofwar_skin.png" forspenning = "true" w = "570" h = "359" /> < /sengetøy > < dekaler > < merket name = "head" sheet = "default" x = "433" y = "181" w = "136" h = "138" /> < merket name = "body" sheet = "default" x = "255" y = "139" w = "182" h = "139" /> < merket name = "leftArm" sheet = "default" x = "208" y = "278" w = "194" h = "76" /> < merket name = "leftFoot" sheet = "default" x = "4" y = "172" w = "125" h = "78" /> < merket name = "leftLeg" sheet = "default" x = "128" y = "172" w = "122" h = "78" /> < merket name = "rightArm" sheet = "default" x = "251" y = "17" w = "182" h = "122" /> < merket name = "rightLeg" sheet = "default" x = "3" y = "6" w = "216" h = "168" /> < /dekaler > < /decalsheet >
Alt vi har gjort her er lagt til fire nye DecalSheets til å forhåndslaste. Kompilere nettsted og sjekk tilkoblingene for å sikre at de blir lastet
Trinn 27:. Legge Reskin Logic
Nå som vi er lasting i våre skins, la oss legge til noen logikk for å håndtere dynamisk endre skall bitmapdata. La oss gå inn i vårt BobblePerson klasse og legge til følgende to funksjoner:
beskyttet funksjon saveDefaultBitmapData (): void {defaultSkin = GlobalDecalSheetManager.instance.getSheet ("default"); defaultSkinBMD = defaultSkin.bitmapData.clone ();} beskyttet funksjon switchSkin (skinName: String = "default"): void {var newSkinBitmapData: BitmapData; if (skinName == "default") {newSkinBitmapData = defaultSkinBMD.clone (); } Else {newSkinBitmapData = GlobalDecalSheetManager.instance.getSheet (skinName) .bitmapData.clone (); } If (newSkinBitmapData) defaultSkin.bitmapData = newSkinBitmapData;}
La oss snakke om hva som skjer her. Vi kommer til å dra nytte av en praktisk funksjon for Camo sin DecalSheet system ved å erstatte bitmap data av vår standard huden med BitmapData fra andre skins. For å gjøre dette må vi ha en referanse til standard DecalSheet så vel som dens BitmapData. Vi gjør dette i "saveDefaultBitmapData". Neste må vi legge logikk å bytte skins. Dette skjer i "switchSkin" metoden. Som du ser har vi satt opp en variabel til å holde våre nye BitmapData.
Neste vi tester for å se om huden er "default" eller noe annet. Hvis det er standard huden vi får BitmapData fra «defaultSkinBMD". Hvis det er en annen hud vi vil be GlobalDecalSheetManager forekomsten for at arket. Til slutt, sørger vi for at vi har en gyldig BitmapData i vår newSkinBitmapData variabel deretter sette BitmapData av vår standard huden til newSkinBitmapData
Vi må legge til følgende variabler:
beskyttet Var defaultSkin: DecalSheet; beskyttet. Var defaultSkinBMD: BitmapData;
og sørg for at du har importert den BitmapData Klasse:
import flash.display.BitmapData, import camo.core.decal.DecalSheet, import com.jessefreeman.managers.GlobalDecalSheetManager;
Til slutt vil vi kalle "saveDefaultBitmapData" i fuglehunden for "partIds". Sørg for at fuglehunden ser slik ut:
offentlig funksjon sett partIds (verdi: Array): void {_partIds = verdi; saveDefaultBitmapData (); createParts ();}
Nå la oss gå inn i vårt BobbleContainer klasse og legge følgende egenskap:
offentlig Var huden: String = "default";
Neste må du endre dispatchEvent i "onRollOver" metode for å se slik ut:
dispatchEvent (ny FocusEvent (FocusEvent.IN_FOCUS, rollOverText, hud, true, true));
Legg merke til hvordan vi nå passerer opp huden verdi gjennom hendelsen? Dette vil fortelle kroppen riktig hud for å bruke når det er en rulle over
La oss gå tilbake til vår BobblePerson og endre "onContainerRollOver" og "onContainerRollOut" metoder for å se slik ut:.
Offentlig funksjon onContainerRollOver (event: FocusEvent): void {if (! event.target = partDisplay) {partDisplay.label.text = event.text; switchSkin (event.skinName); }} offentlig funksjon onContainerRollOut (event: FocusEvent): void {partDisplay.label.text = ""; switchSkin ("default");}
Nå er vi bare nødt til å endre vår PropertySheet å legge en hud navn til våre kroppsdeler. Skift ut /* BobbleContainers * /kommentar blokk med følgende: Twitter /* BobbleContainers * /# body {x: 355; y: 229; rollOverLabel :; src: kroppen; button-modus: false; bruke hånd-markøren: false; mus-barn: false;} # hodet {x: 449; y: 250; src: hodet; rollOverText: FORTSETT; url: url ("http://www.linkedin.com/in/jessefreeman"); hud: default;} # leftArm {x: 381; y: 313; src: leftArm; rollOverText: leie; url: url ("http://www.bfreedesign.com"); hud: bfreedesign;} # leftFoot {x: 145; y: 213; src: leftFoot; rollOverText: KONTAKT; url: url ("mailto: [email protected]"); hud: default;} # leftLeg {x: 263; y: 235; src: leftLeg; rollOverText: portefølje; url: url ("http://www.flashbum.com"); hud: flashbum;} # rightArm {x: 419; y: 176; src: rightArm; rollOverText: BLOG; url: url ("http://www.flashartofwar.com"); hud: artofwar;} # rightLeg {x: 275; y: 176; src: rightLeg; rollOverText: MY ART; url: url ("http://www.iliketodream.com"); hud: iliketodream;}
Nå hvis du kompilerer, vil du se huden på vår bobble fyr endres avhengig av hvilken kroppsdel du ruller over
Legg merke til hvor raskt alt er reskined.. Dette er grunnen til dekor er så kraftige. Du kan endre utseendet og følelsen av hele din søknad på direkten ved å endre BitmapData av dine DecalSheets under kjøring
Trinn 28:. Distribuer
Nå vår side er gjort og vi er klare å distribuere den til en server. Dette er ganske enkelt å gjøre i Flex Builder og et skritt folk flest enn utseende. Bare gå til Prosjekt-menyen og velg Export Slipp Bygg.
Når dette går du vil ha en ny mappe som heter bin-utgivelse sammen med bin-debug. Alt ser likt ut, men hvis du sjekker ut på siden av vår BobbleHeadApp.swf vil du legge merke til at utgivelsen bygge er om 24k og debug versjonen er 36k. Det er knapt 66% av den opprinnelige størrelsen. Jeg vet når du bare er snakk om noen få k det er ikke en stor avtale, men hver k teller. Også i større prosjekter kan dette være en betydelig sparing.
Nå er du klar til å kopiere denne bin-release mappen over til FTP-serveren og gjøre det live.
Konklusjon
< p> Som du ser, har vi laget en enkel Flash område ved hjelp av Flash Camouflage i mindre enn 30 trinn. Nå skal du ha en bedre forståelse om kraften i å innlemme dekor og CSS i ditt neste prosjekt. Du har også sett hvor lett det er å bygge komponenter som arbeider med Flash Camo tre hovedfunksjoner. Som alle rammer det er en læringskurve, og dette er bare et lite utvalg av hva som er mulig. Dessuten er Flash Camo fortsatt i Beta, så det kan være små bugs eller kode opprydding som prosjektet modnes.
Hvis du støter på problemer, legg igjen en kommentar eller sende en sak til listen problemet. Husk Flash Camo er helt åpen kildekode, bør du sjekke ut koden og se hva som skjer under panseret. Mange avanserte teknikker blir brukt, så det er et flott sted å lære hvordan en ramme er satt sammen. Hvis du bruker Camo i et av dine prosjekter la behage meg vite ..
Takk for følge med! Anmeldelser