Working på Pixel nivå med BitmapData og Away3D
Del
Del
Del
Del
Dette Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Velkommen til denne introduksjon til arbeider på pikselnivå med Actionscript 3 er BitmapData objekt. Vi skal ta noen 2D-bilder, bryte dem opp i sine enkelte piksler, deretter re-montere dem som 3D-bilder som vi kan flytte og rotere.
Endelig resultat Forhåndsvisning
La oss ta en titt på det endelige resultatet vi skal jobbe mot:
Trinn 1: Sett opp
Like før hopping i la oss ta et øyeblikk å se på hvordan prøven prosjektet er lagt ut. Åpning kilden zip for denne opplæringen vil du ha kilder for hvert betydelig skritt, kan du gå rett fram og lage en kopi av begynne Inne i denne mappen finner du to andre mapper; src Hotell og bin Hvis en eller annen grunn finner en feil i koden din, må et forsøk på å fikse det (alltid bra å lære av feil), men hvis du ikke kan så ikke fortvil! Du kan hoppe rett tilbake i og bruke ett av trinnene mapper i kilde glidelås som er nærmest skritt du var på Hvis du ' har allerede hatt en titt på Main.as filen du allerede merke noen referanser til Away3D, en 3D rammeverk for Flash. Vi kommer til å trenge å laste ned denne og legge den til vårt prosjekt for å fortsette. Du kan hente sin nyeste versjonen fra Away3D nettstedet. Når denne nedlastingen er fullført, åpne zip fil og inne i away3d_3_6_0 \\ src Hvis du ikke allerede har, åpen Main.fla og Main.as. Ser i Flash Biblioteket kan du se et bilde som heter 1.png og en MovieClip med en forekomst navn img1, som vil fungere som en grunnleggende container for png. Vi kommer til å utføre en rask kompilering bare for å sørge for at vi har lagt Away3D riktig. Hvis alt går bra skal vi se en blank Flash movie med en mørk grå bakgrunn, og ingen feilmeldinger fra Flash Undersøke den Main.as fil vi kan se noen variabler som brukes i Away3D, det er allerede en rekke tutorials på Away3D men vi vil raskt oppsummering på disse: Uten å gå inn på detaljene du kan også se en enkel scene er satt opp klar til bruk med initAway3d () -metoden. . Legg merke til det legger et ENTER_FRAME EventListener, dette bare forteller Away3D å gjengi () (eller tegne) gjenstander lagt til Scene3D hver ramme Twitter /** * Away3D enkel scene oppsett * /private funksjon initAway3d (): void {scene = new Scene3D (); Kameraet = new TargetCamera3D ({z: -200}); view = new View3D ({scene: scene, kamera: Kameraet}); addChild (vis); addEventListener (Event.ENTER_FRAME, renderLoop);} /** * gjengi bue * /private funksjon renderLoop (hendelse: Hendelse): void {view.render ();} Det er ganske mye det for innledningen til hoved .as klasse, vil vi være å bygge alt annet som vi går Vi kommer til å hoppe rett inn og introdusere disse to klassene, som vi skal jobbe med disse gjennom hele opplæringen. Hvis du er ny til bitmap og BitmapData du kan tenke på dem som en malere lerret og en samling av maling smørerier. De er helt forskjellige stedene, men begge er koblet til, inneholder BitmapData alle pixel informasjon eller penselstrøk og ville være noe uten å bli malt på et lerret eller i dette tilfellet, Bitmap! La oss teste ut dette ved å tilsette en forekomst av img1 MovieClip til scenen og lage en kopi av den ved hjelp av Bitmap /BitmapData endre Main.as til følgende:. Twitter /** * Konstruktør * /public funksjon Hoved ( ) {initAway3d (); drawExample ();} /** * en rask eksempel på BitmapData og Bitmap bruk * /private funksjon drawExample (): void {//oppretter en forekomst av img1 objekt på scenen for å kopiere Var img: MovieClip = new img1 (); addChild (img); //Oppretter et BitmapData objekt med følgende parametre: bredde, høyde, transparent, farge Var bmpData: BitmapData = new BitmapData (img.width, img.height, sant, 0x000000); //Trekker en kopi av img MovieClip inn til BitmapData bmpData.draw (img); //Legger en Bitmap til scenen med BitmapData (kopi av img1) informasjon til å vise Var bmp: Bitmap = new Bitmap (bmpData); bmp.y = img.height; addChild (bmp);} Ser på drawExample () kode, de to første linjene bare legge den img1 objektet til scenen, dette er bildet vi vil gjøre for kopi av Etter at vi. skape en BitmapData objekt med følgende parametre: Som vi vet bredden og høyden fra img1 vi har satt dem direkte, som vi kommer til å trenge åpenhet vi satt neste parameter for å true og til slutt vi spesifisere 0x000000 eller svart som bakgrunnsfarge som det vil vises gjennomsiktig før vi fylle det Fortsetter på, nå har vi BitmapData objektet satt opp har vi flere alternativer tilgjengelige for oss, vi kunne for eksempel sløyfe gjennom piksel for piksel og kopiere bildet (vi vil bruke noe sånt som dette senere i opplæringen), eller vi kan bruke trekningen () -metoden. Trekningen () metoden tar en MovieClip eller Sprite som parameter og kopierer all pikselinformasjon fra objektet til BitmapData. Twitter /** * en rask eksempel av BitmapData og Bitmap bruk * /private funksjon drawExample (): void {//oppretter en forekomst av img1 objekt på scenen for å kopiere Var img: MovieClip = new img1 (); addChild (img); //Oppretter et BitmapData objekt med følgende parametre: bredde, høyde, transparent, farge Var bmpData: BitmapData = new BitmapData (img.width, img.height, sant, 0x000000); //Trekker en kopi av img MovieClip inn til BitmapData bmpData.draw (img); //Legger en Bitmap til scenen med BitmapData (kopi av img1) informasjon til å vise Var bmp: Bitmap = new Bitmap (bmpData); bmp.y = img.height; addChild (bmp);.} Etter dette de neste par linjer skaper en Bitmap objekt med BitmapData informasjon som parameter, som deretter flyttet under den opprinnelige img MovieClip og lagt til scenen pixel Twitter /** * et raskt eksempel på BitmapData og Bitmap bruk * /private funksjon drawExample (): void {//oppretter en forekomst av img1 objekt på scenen for å kopiere Var img: MovieClip = new img1 (); addChild (img); //Oppretter et BitmapData objekt med følgende parametre: bredde, høyde, transparent, farge Var bmpData: BitmapData = new BitmapData (img.width, img.height, sant, 0x000000); //Trekker en kopi av img MovieClip inn til BitmapData bmpData.draw (img); //Legger en Bitmap til scenen med BitmapData (kopi av img1) informasjon til å vise Var bmp: Bitmap = new Bitmap (bmpData); bmp.y = img.height; addChild (bmp);} Det er ikke mye av oppsett involvert i å sette opp Bitmap aspektet det bare viser en BitmapData, er all magi med BitmapData. Nå når jeg tester vi bør få følgende: Nå har vi innhold inne i BitmapData objektet ting begynner å bli interessant som vi kan begynne å manipulere bilder ved hjelp getPixel32 () og setPixel32 () Fra og med getPixel32 () endre drawExample () kode ovenfra til følgende:. Twitter /** * en rask eksempel på BitmapData og Bitmap bruk * /private funksjon drawExample (): void {//oppretter en forekomst av img1 objekt på scenen for å kopiere Var img: MovieClip = new img1 (); addChild (img); //Oppretter et BitmapData objekt med følgende parametre: bredde, høyde, transparent, farge Var bmpData: BitmapData = new BitmapData (img.width, img.height, sant, 0x000000); //Trekker en kopi av img MovieClip inn til BitmapData bmpData.draw (img); //Legger en Bitmap til scenen med BitmapData (kopi av img1) informasjon til å vise Var bmp: Bitmap = new Bitmap (bmpData); bmp.y = img.height; addChild (bmp); //Lese pikselinformasjon fra BitmapData Var pixelInformation: uint = bmpData.getPixel32 (5, 0); trace (pixelInformation, pixelInformation.toString (16));} Undersøke koden vi har opprettet en vanlig uint variabel og tildelt den til verdien av pikselen i bmpData på 5 piksler horisontalt og 0 piksler vertikalt. Husk verdiene begynner på 0 som så: Å vite at vi valgte å få pikselinformasjon for 5,0, som ville gjøre det svart piksel på den øverste raden og sikker nok Flash utganger: 4278190080 ff000000 Som kanskje ikke ser riktig ut i starten, men setPixel32 leser alpha verdien av pixel (hvor som setPixel leser akkurat den fargen). Vi er vanligvis brukt til å jobbe med hex verdier for farger som FFFFFF eller 000000 så vi kan fortelle Flash for å toString (16) for å få hex verdi: Nå vet vi hvordan vi skal lese pikselinformasjon, tegning piksler til BitmapData er svært lik, bare denne gangen bruker vi setPixel32 () for å trekke piksler til BitmapData, og vi vil også kaste i en for loop å trekke noen piksler . Først endre koden til følgende: Twitter /** * en rask eksempel på BitmapData og Bitmap bruk * /private funksjon drawExample (): void {//oppretter en forekomst av img1 objekt på scenen for å kopiere Var img: MovieClip = new img1 (); addChild (img); //Oppretter et BitmapData objekt med følgende parametre: bredde, høyde, transparent, farge Var bmpData: BitmapData = new BitmapData (img.width, img.height, sant, 0x000000); //Trekker en kopi av img MovieClip inn til BitmapData bmpData.draw (img); //Legger en Bitmap til scenen med BitmapData (kopi av img1) informasjon til å vise Var bmp: Bitmap = new Bitmap (bmpData); bmp.y = img.height; addChild (bmp); //Lese pikselinformasjon fra BitmapData Var pixelInformation: uint = bmpData.getPixel32 (5, 0); spor (pixelInformation, pixelInformation.toString (16)); //Informasjon write pixel til BitmapData Var farge: uint = 0xffff0000; //FF0000 - komplett rød Var rad: uint = 0; Var kolonne: uint = 0; for (rad; rad < bmpData.height; rad ++) {bmpData.setPixel32 (kolonne, rad, farge); kolonne ++; if (kolonne > bmpData.width) {column = 0; }}} Den nye koden starter skaper en vanlig uint variabel kalt farge som vi lagrer 0xffff0000 som er:. Ff helt gjennomsiktig, FF fullt rød, 00 ingen grønne, 00 ingen blå Så er det to tellere laget for rader og kolonner (rader er en linje med horisontale piksler, kolonner er en linje av vertikale piksler). Disse tellere er deretter satt inn i en for løkke som øker rad og tellerverdi hver gang, så når blandet med setPixel32 () metoden vil det trekke en diagonal linje: I dette trinnet skal vi introdusere PixelObject3D.as klassen. For å spare litt tid ta en kopi av klassen fra Trinn 8 Når du har gjort dette, kan du ta en rask titt på det før vi begynne å legge inn koden for å lage 3D-objekter fra piksler Vi har noen beskyttede variabler på toppen av klassen, en for en BitmapData og tre tall for bredde, høyde og en skala fra objektet. Twitter /** * Konstruktør * /public funksjon PixelObject3D () {} /** * begynner skapelsesprosessen * /public funksjon createFromMovieClip (mc: MovieClip): void {} Etter dem er en tom klasse konstruktør og metoden vi skal jobbe med, createFromMovieClip (). Du vil merke denne metoden tar en parameter av MovieClip typen, slik at du kan allerede gjette vi passerer det en MovieClip og det vil gi oss tilbake en 3D-representasjon av det. Når det er ferdig som er Mens PixelObject3D.as klassen faktisk ikke gjøre noe ennå la oss legge til en forekomst av det å den Main.as klassen slik at vi kan faktisk se endringene på skjermen mens vi går Fra og med legge en privat variabel: Etter det legger til konstruktøren et kall til createPixelObect3D () Twitter /** * Konstruktør * /public funksjonen main () {initAway3d (); drawExample (); createPixelObect3D ();} Til slutt legger du til følgende funksjon til Main.as filen. Dette vil skape en forekomst av PixelObject3D klassen, påkalle createFromMovieClip () metoden og gi det en ny MovieClip, den img1 vi har brukt tidligere. En siste linje å påpeke er at vi legger den PixelObject3D klasse som barn av scenen som det er et 3D-objekt, ikke Stage Twitter /** * skaper en PixelObject3D * /private funksjon createPixelObect3D (). void {po3d = new PixelObject3D (); po3d.createFromMovieClip (ny img1 ()); scene.addChild (po3d);} Vet vi er passert MovieClip vi ønsker å gjenskape fra denne metoden, er den første på vår agenda å lage en kopi av den ved hjelp BitmapData akkurat som vi gjorde før. Vi kan da bruke pikseldata for å begynne å lage 3D-objekter På samme måte som før, vi kommer til å lage en BitmapData objekt og tegne mc MovieClip objekt:. Twitter /** * begynner skapelsesprosessen * /public funksjon createFromMovieClip (mc: MovieClip): void {//lagre referanser og skape bitmapdata _bitmapData = new BitmapData (mc.width, mc.height, sant, 0x000000); _bitmapData.draw (mc); //Satt bredde /høyde _width = mc.width * (2 * _scaleFactor); _height = mc.height * (2 * _scaleFactor);} Vi har også satt den _width og _height variabler i henhold til mc bredde og høyde og multipliser dette med _scaleFactor variable, gjør dette oss til å skalere opp eller ned størrelsen på 3D piksler hvis vi ønsker det. Mer om dette senere Husk BitmapData er bare pikselinformasjon og uten å legge til BitmapData til en Bitmap vi vil ikke være i stand til å se det, men vi kan fortsatt lese og skrive til den. Dette er perfekt for oss som vi kommer til å bruke dette trinnet for å starte looping gjennom pikslene i BitmapData og skille de røde, grønne, blå og alpha verdier. Endre din createFromMovieClip () metode for å matche dette : Twitter /** * begynner skapelsesprosessen * /public funksjon createFromMovieClip (mc: MovieClip): void {//lagre referanser og skape bitmapdata _bitmapData = new BitmapData (mc.width, mc.height, sant, 0x000000); _bitmapData.draw (mc); //Satt bredde /høyde _width = mc.width * (2 * _scaleFactor); _height = mc.height * (2 * _scaleFactor); //Pikselinformasjon Var pixelValue: uint = 0; Var red: uint = 0; Var grønt: uint = 0; Var blå: uint = 0; Var alfa: uint = 0; //Sløyfe gjennom hver piksel horisontalt for (var i: int = 0; i < mc.width; i ++) {pixelValue = _bitmapData.getPixel32 (i, 0); alpha = pixelValue > > 24 &Co. 0xFF; rød = pixelValue > > 16 &Co. 0xFF; grønn = pixelValue > > 8 &Co. 0xFF; blå = pixelValue & 0xFF; trace ("alpha:" + alpha + "red:" + rød + "grønn:" + grønn + "blue:" + blå); }} Her har vi satt opp noen variabler for farge og alpha verdier deretter startet en for loop basert på mc bredde. Dette for loop setter pixelValue variabel til verdien av den aktuelle pixel bruker getPixel32 () metoden som vi brukte tidligere, men denne gangen notatet vi har brukt 0 for andre parameter som er y, slik at vi bare kommer til å behandle den første horisontale linje med piksler. Etter dette er det noen ganske komplisert matematikk kjent som litt maskering og skiftende, for å spare litt tid kan du anta hver av fargene er hentet fra pixelValue variabel og deretter ut for oss å se ved hjelp av spor (). Hvis du ønsker å vite mer om bitvis operatører, bit skiftende og maskering så kan du finne en stor post på det mangekantede Labs nettside. Hva du bør se er resultatet av en hel haug med 0-verdier, men betaler oppmerksomhet til de to alfa: 255 linjer, disse er de to svarte piksler på toppen av hånden Phew det ble ganske mye logikk i de siste skrittene! Nå har vi det grunnleggende oppe og går, kan starte å bruke pixel informasjonen vi innhentet tidligere for å lage en 3D-mesterverk .... nesten. Hvis du har brukt Away3D eller Papervision 3D før du vil være kjent med dette trinnet, skal vi begynne å lage 3D kuber og påføring av materialer til dem. For hver piksel som er alfa er 255 (ugjennomsiktig) vi hente sin farge og skape et materiale basert på fargen som skal brukes på en 3D-kube, er under koden for å sparke dette av: Twitter /** * begynner prosessen * /offentlig funksjon createFromMovieClip (mc: MovieClip): void {//lagre referanser og skape bitmapdata _bitmapData = new BitmapData (mc.width, mc.height, sant, 0x000000); _bitmapData.draw (mc); //Satt bredde /høyde _width = mc.width * (2 * _scaleFactor); _height = mc.height * (2 * _scaleFactor); //Pikselinformasjon Var pixelValue: uint = 0; Var red: uint = 0; Var grønt: uint = 0; Var blå: uint = 0; Var alfa: uint = 0; //Sløyfe gjennom hver piksel horisontalt for (var i: int = 0; i < mc.width; i ++) {pixelValue = _bitmapData.getPixel32 (i, 0); alpha = pixelValue > > 24 &Co. 0xFF; rød = pixelValue > > 16 &Co. 0xFF; grønn = pixelValue > > 8 &Co. 0xFF; blå = pixelValue & 0xFF; //Hvis piksel er ugjennomsiktig if (alpha == 255) {//oppretter en vanlig hex farge streng dvs. FFFFFF eller 000000 Var farge: String = red.toString (16) + green.toString (16) + blue.toString (16 ); if (farge == "000") color = "000000"; trace ("#" + farge); //Oppretter et materiale fra fargen og gjelder for en 3D-kube Var Materiale: Materiale = new ColorMaterial (farge); Var kube: Cube = new Cube ({materiale: materiale, bredde: 2 * _scaleFactor, høyde: 2 * _scaleFactor, dybde: 2 * _scaleFactor}); //Posisjon kuben fra en - verdi så registrering /transformasjon poeng er alltid senter cube.x = 0 - (_width /2) + cube.width * i; this.addChild (kube); }}} I koden ovenfor vi har brukt de røde, grønne og blå variabler og skapte en vanlig hex farge, som du kan se output fra spor (). Da hex farge farge variabel brukes til å lage en ColorMaterial med Away3D, som er bare en vanlig materiale basert på en farge som kan brukes til 3D-objekter. Etter at vi skaper en Cube objekt og angi at materialet materialet objekt vi laget den linjen før den. Også verdt å merke seg her er at vi har satt bredde, høyde og dybde (husker vi jobber i tre dimensjoner nå!) Til en verdi av to ganger verdien av _scaleValue variable, gjør dette oss til å gjøre kubene større eller mindre ved skiftende _scaleValue. Til slutt vi posisjonere Cube til null minus halve bredden på mc multiplisert med for løkker møte i, gjør denne registreringen eller forvandle poenget med det ferdige 3D-objekt i sentrum. Det er da lagt til som et barn, og når du tester vil du se to små sorte 3D Cube gjenstander Nå to 3D kuber er stor og alle, men vi virkelig ønsker å få hele hånden formen på 3D kuber. Vi er allerede bruker en for løkke til løkke gjennom alle pikslene i den første raden, men hvordan skal vi få det til å sløyfe gjennom de resterende radene av piksler? Du gjettet det, en annen for loop Denne gangen har vi bare virkelig endret tre ting, en ny for loop at denne gangen har j for sin teller. Den getPixel32 () nå har j variabel lagt til som den y parameter og til slutt Cube er plassert vertikalt ved hjelp av j telleren. Dette full ganske mye hoved logikk, nå vil sløyfe gjennom horisontalt, lese pixel verdier, skape en ColorMaterial og en Cube og plasser dem deretter. Når den når enden av den horisontale linje, på grunn av den nye for sløyfen vil det gå videre til det neste bildeelement ned og sløyfe horisontalt igjen til bildet er fullført. Ta en titt for deg selv ved å teste filmen: Vi har nå alle disse 3D-objekter, men de leter veldig 2D, så vi 're kommer til å legge en bit av bevegelse og få hele objektet roterer. For å gjøre dette må vi tilbake spore til Main.as filen og finn renderLoop () -metoden. Husk Away3D må gjengi (eller maling) 3D-bildet hver ramme, slik at vi kan legge noen enkle rotasjoner til vår PixelObject3D å se alle de underordnede Cubes rotere: Twitter /** * gjengi bue * /private funksjon renderLoop ( hendelse: Hendelse): void {pObject3D.rotationZ ++; view.render ();} Ta gjerne eksperimentere med rotationX, rotationY og rotationZ her bare husk å tilbakestille det tilbake til koden ovenfor før du fortsetter. Du kan også legge til create3DObject () for å bedre sentrum og juster Cubes til kameraet Twitter /** * skaper en 3D-pixel objekt fra en MovieClip * /public funksjon create3DObject (). Void {pObject3D = new PixelObject3D ( ); pObject3D.createFromMovieClip (ny img1 ()); pObject3D.x = 80; pObject3D.y = -55; pObject3D.rotationX = -5; scene.addChild (pObject3D);} Nå er dette mer som det, kan vi endelig se 3D pixel objektet roterer. Vi kan begynne å tilpasse dette og legge en eksplodert visning ved ganske enkelt å redigere z verdien av Cubes når vi skaper dem. Gå tilbake til PixelObject3d.as klassen og finne de linjene der vi posisjonere Cube sin x og y og legge til følgende: Dette vil flytte hver kube til en tilfeldig dybde fra -25 til positiv 25 og skape en fin eksploderte effekt: Bruke PixelObject3D klassen til å lage andre bilder er enkelt, bare importere det bildet du ønsker å behandle deg på Flash. Deretter konvertere den til en MovieClip som per vanlig, denne gangen gir det en Klasse Navn Nå kan du endre Main.as å bruke den nye img2 objekt med en liten endring: Twitter /** * skaper en 3D-pixel objekt fra en MovieClip * /public funksjon create3DObject (): void {pObject3D = new PixelObject3D (); pObject3D.createFromMovieClip (ny img2 ()); pObject3D.x = 80; pObject3D.y = -55; pObject3D.rotationX = -5; scene.addChild (pObject3D);} Du kan bruke så mange av disse som du vil, bare sørg for at du legger dem til Away3D scene og du kan ha flere. I dette eksempelet har jeg fjernet z eiendommen som vi brukte i trinn 16 for eksplosjonen effekt Main.as med en annen PixelObject3D lagt. Twitter /** * En tutorial som tar sikte på å innføre Actionscript 3 er BitmapData * og hvordan du bruker BitmapData informasjonen til å lage en 3D * pixel form ved hjelp Away3D. * *author Anton Mills * /public class Hoved strekker MovieClip {//grunn Away3D egenskaper beskyttet Var scene: Scene3D; beskyttet Var kamera: TargetCamera3D; beskyttet Var Vis: View3D; beskyttet Var pObject3D: PixelObject3D; beskyttet Var pObject3D2: PixelObject3D; Deretter oppretter du en annen forekomst: Twitter /** * skaper en 3D-pixel objekt fra en MovieClip * /public funksjon create3DObject (): void {pObject3D = new PixelObject3D (); pObject3D.createFromMovieClip (ny img2 ()); pObject3D.x = 40; pObject3D.y = -55; pObject3D.rotationX = -5; scene.addChild (pObject3D); pObject3D2 = new PixelObject3D (); pObject3D2.createFromMovieClip (ny img1 ()); pObject3D2.x = 115; pObject3D2.y = -55; pObject3D2.rotationX = -5; scene.addChild (pObject3D2);} Og til slutt roter den i Away3D gjengi bue: Twitter /** * gjengi bue * /private funksjon renderLoop (hendelse: Hendelse): void {pObject3D.rotationY ++; pObject3D2.rotationY--; pObject3D2.rotationZ--; pObject3D2.rotationX ++; view.render ();} Alt som gjenstår er for deg å teste filmen og sole seg i hvor vidunderlig 2D piksler forvandlet til 3D-objekter.. Nå, hva kan du gjøre med BitmapData i neste program eller spill? Gjennom denne opplæringen vi har sett på en blanding av elementer, men vi har først og fremst fokusert på BitmapData bruk som tegning movieclips i å BitmapData, ved hjelp setPixel32 () for å tegne individuelle piksler, viser BitmapData ved hjelp av punktgrafikk og lesepikselverdier ved hjelp getPixel32 (). Vi har også dekket litt farge matematikk, får hex farger og til og med enkelte alpha, rød, grønn og blå verdier ved hjelp av toString (16). Til slutt skrev vi en liten løkke til å lage 3D Cubes bruker pikselverdiene vi leser, puh! Det er så mange muligheter når du arbeider på pikselnivå og med litt fantasi og eksperimentering du kan opprette noen virkelig kule programmer og spill ! Takk for din tid, jeg håper du likte denne opplæringen. Anmeldelser
mappe som dette vil fungere som vårt utgangspunkt.
. src
mappen er der vi skal spare alle våre kode og FLA-filer og bin
mappen er der Flash vil lagre SWF-filer. Inne i src
mappen er det Main.FLA Hotell og Main.AS
dokumentet klasse.
Trinn 2:. Last ned Away3D
mappen du vil finne tre mapper, away3d
, nochump Hotell og wumedia
. Kopiere disse, som vist nedenfor i src
mappe
Trinn 3:. The Flash File
Trinn 4:. De Main.as File
//basic Away3D propertiesprotected Var scene: Scene3D; beskyttet Var kamera : TargetCamera3D; beskyttet Var Vis:. View3D;
Scene3D er en plass vi kan bruke til å legge 3D-objekter som kuber og kuler
TargetCamera3D er en av de mange typer kameraer tilgjengelig i Away3D, det er det vi bruker til å se på Scene3D.
View3D er et visningsfelt, ofte beskrevet som "vindu" der vi ser vår scene.
Trinn 5:. punktgrafikk og BitmapData
bredde, bredden for å gjøre BitmapData
høyde, høyden å gjøre BitmapData
gjennomsiktig, om BitmapData bør inneholde gjennomsiktige piksler
farge, bakgrunnsfarge
Trinn 6:. punktgrafikk og BitmapData Fortsatt
Trinn 7: Reading Pixel Informasjon
Trinn 8: Tegning piksler
Trinn 9: PixelObject3D Klasse
mappe i kilde zip og slippe den inn på din src mappen foruten Main.fla og Main.as.
//propertiesprotected Var _bitmapData: BitmapData = null; offentlig Var _scaleFactor. Number = 1; beskyttes Var _width: Antall = 0; beskyttet Var _height: Antall = 0;
Trinn 10: en forekomst av PixelObject3D Class
//basic Away3D propertiesprotected Var scene. Scene3D; beskyttet Var kamera: TargetCamera3D; beskyttet Var Vis: View3D; //den Pixel3DObjectprotected Var po3d. PixelObject3D;
Trinn 11: createFromMovieClip (mc: MovieClip)
Trinn 12:. CreateFromMovieClip (mc: MovieClip)
Trinn 13:. Opprette 3D-objekter fra pikselverdiene
Steg 14:. Rader og kolonner
Trinn 15: Into the tredje dimensjon
Trinn 16: Exploding den PixelObject3D
//hvis pixel er opaqueif (alpha == 255) {//oppretter en vanlig hex farge streng dvs. FFFFFF eller 000000 Var farge: String = red.toString (16) + green.toString ( 16) + blue.toString (16); if (farge == "000") color = "000000"; trace ("#" + farge); //Oppretter et materiale fra fargen og gjelder for en 3D-kube Var Materiale: Materiale = new ColorMaterial (farge); Var kube: Cube = new Cube ({materiale: materiale, bredde: 2 * _scaleFactor, høyde: 2 * _scaleFactor, dybde: 2 * _scaleFactor}); //Posisjon kuben fra en - verdi så registrering /transformasjon poeng er alltid senter cube.x = 0 - (_width /2) + cube.width * i; cube.y = (_height /2) + -cube.height * j; cube.z = -25 + (Math.random () * 50); this.addChild (kube);}
Trinn 17: Skalering
< p> Som PixelObject3D er litt lite på skjermen, kommer vi til å justere skalaen litt. Vi kan gjøre dette raskt ved å justere _scaleValue variabelen i PixelObject3D.as klassen og øke det til 1,5. Twitter /** * skaper en 3D-objekt fra en MovieClip * *author Anton Mills * /public class PixelObject3D strekker ObjectContainer3D { //egenskaper beskyttet Var _bitmapData: BitmapData = null; offentlig Var _scaleFactor: Number = 1,5; beskyttet Var _width: Antall = 0; beskyttet Var _height: Antall = 0;
Trinn 18: Ulike Images
av img2 som dette:
Trinn 19: flere objekter
Trinn 20: Fin
Konklusjon