Creating og teksture en kube i Away3D
Del
Del
Del
Del

Dette Cyber ​​mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

Vi kommer til å lage en kube i Adobe Flash (eller Flex) miljø ved hjelp av Away3D motoren. Vi vil velge den nødvendige struktur og sammenligne med den på kuben ansikter. Vi vil også gjøre kuben rotere og styre scenen via et kamera.

La oss bli sittende fast i ..

Innledning

I denne opplæringen vil vi bruke Adobe Flash og Away3D 2.3.3 motor for Flash Player 9. For å sette den endelige swf vi bruker Adobe Dreamweaver (du kan bruke en hvilken som helst html-editor), SWFObject og SWFObject Generator (luft-versjon eller html-versjon). Jeg vil også forklare hvordan du oppretter og tekstur en kube i Flex miljø

Trinn 1:.. Opprett en ny FLA-filen

Opprett ny ActionScript3 fil

Trinn 2 : Rediger profil

I panelet Egenskaper trykker på knappen Rediger

Trinn 3:.. Velg Flash Player versjon

Velg Flash Player 9 profilen, og klikk OK
< h2> Trinn 4: Få den Away3D Engine

Lagre filen som "away3d_cube.fla" i away3d_cube_tutorial mappen

Last ned Away3D motoren Away3D nedlastinger.. Vi vil bruke versjon 2.3.3 for Flash Player 9.

Pakk et arkiv og kopiere alle mapper inn i away3d_cube_tutorial mappen

Trinn 5:. Opprett ny Action File

Opprett en ny Actionscript-filen i Adobe Flash. Lagre filen som "CreateCube01.as" i away3d_cube_tutorial mappen

Trinn 6:.. Oppgi en klasse publiserer

I Publish panelets Class-feltet skriver du "CreateCube01"

Trinn 7: Begynn Programmering

Åpne CreateCube01.as og starte ved å importere alle nødvendige klasser
pakke {import flash.display.Sprite;. import flash.events.Event; import away3d.containers.View3D; import away3d.primitives.Cube;}
Trinn 8: Public Class

Definer en klasse, som strekker Sprite Class. . Vær oppmerksom på klasse navn, må det være det samme som klasse vi kom inn i Class-feltet i Publish panel
public class CreateCube01 strekker Sprite {}
Trinn 9: erklære Variabler

Erklærer private variabler for view container (View3D) og kube primitive (Cube)
public class CreateCube01 strekker Sprite {private Var view. View3D; private Var kube: Cube;}
Trinn 10:
Legg Funksjon for å lage Cube

Legg til en offentlig funksjon etter linjene der vi erklært våre private variabler offentlig funksjon CreateCube01 () {view = ny. View3D ({x: 200, y: 200}); addChild (view);}
Trinn 11:. Lag en kube en

I en offentlig funksjon lage en kube med hovedinnstillingene og legge den til scenen
kuben = new Cube ({width: 150, høyde: 150, dybde: 150}); viewport.scene.addChild (kube);
Trinn 12:. Lag en kube 2

Legg til en adresse i rende funksjon

Lag en egen funksjon for gjengivelse av kuben og dens rotasjon rundt X, Y, Z-aksen. Den private funksjonen må komme etter vår offentlig funksjon
this.addEventListener (Event.ENTER_FRAME, renderThis); private funksjons renderThis (e: Hendelses):. Void {cube.rotationX + = 1; cube.rotationY + = 1; cube.rotationZ + = 1; viewport.render (); }
Trinn 13: Forhåndsvisning

For å se hva vi har så langt, gå til away3d_cube.fla og velg Control > Test Movie, eller bruke hurtigtaster Cmd + Enter (Mac OS) eller Ctrl + Enter (Windows). Vi har en roterende kube!

Vær oppmerksom på at Away3D motoren gir en tilfeldig farge til kuben. I de følgende trinnene vil vi legge til vår egen tekstur

Trinn 14:. Få Texture

Vi trenger en tekstur bitmap. For å få til denne opplæringen har jeg gitt en punktgrafikk, som jeg lastet ned fra cgtextures.com.

Endre filnavnet til "metal.jpg" og kopiere det inn roten av away3d_cube_tutorial mappen.
< h2> Trinn 15: Import nye klasser

I CreateCube01.as legge til noen nye klasser
import flash.display.Bitmap, importere away3d.materials.BitmapMaterial, import away3d.core.utils.Cast; <. h2> Trinn 16: Legg Variabler for Texture

Legg variabler for bitmap og tekstur og importere metal.jpg filen
[Bygg (kilde = "metal.jpg")] privat Var myTexture. Class; private Var myBitmap: Bitmap = new myTexture ();
Trinn 17: Legg Materiale til Cube

I offentlig funksjon CreateCube01 vil vi legge til en variabel for materialet og materialet for vår kube <. br> Var myMaterial: BitmapMaterial = new BitmapMaterial (Cast.bitmap (myBitmap)); kube = new Cube ({width: 150, høyde: 150, dybde: 150, materiale: myMaterial});
Trinn 18: Forhåndsvisning Teksturert Cube

Sjekk resultatet! Gå til away3d_cube.fla fra meny eller bruke hurtigtaster Cmd + Enter (Mac OS) eller Ctrl + Enter (Windows). Vi har nå en strukturert
roterende kube!

I de følgende trinnene vil vi legge til et kamera som vi vil være i stand til å regjere sammen med vår mus.

Trinn 19 : Legg Kamera

Legg et kamera til scenen ved å importere en klasse og modifisere privat funksjons "renderThis»
import away3d.cameras *; private funksjons renderThis (e: Hendelses):.. void {kube .rotationX + = 1; cube.rotationY + = 1; cube.rotationZ + = 1; viewport.camera.moveTo (cube.x, cube.y, cube.z); viewport.camera.moveBackward (500); viewport.render (); }
Trinn 20: Legg Control med musen på Kamera

Videre endre de private funksjons renderThis å få kontroll via musa
private funksjons renderThis (e: Hendelses):. void {viewport.camera. rotationY = mouseX /2; viewport.camera.rotationX = mousey /2; cube.rotationX + = 1; cube.rotationY + = 1; cube.rotationZ + = 1; viewport.camera.moveTo (cube.x, cube.y, cube.z); viewport.camera.moveBackward (500); viewport.render (); }
Trinn 21: Get Siste forhåndsvisning

Godt gjort! Vi har opprettet kuben, teksturert det, lagt kameraet og kamerakontroll via musa. I de følgende trinnene vil vi sette vår swf inn i en html-side

Trinn 22:. Sett swf i Web Page

Opprett en ny HTML-fil. Jeg anbefaler deg å lage den i Adobe Dreamveawer (Mac, Windows) eller Coda (Mac), Notepad ++ (Windows)

Trinn 23:. Stil Din HTML

Vi vil legge stil for Kroppen vår side og endre tittelen i hodet delen. Etter det, lagre filen som "index.html" i away3d_cube_html mappen
. ≪ title > Texture Cube (Away3D) < /title > < style type = "text /css" > body {background- farge: #fff; padding: 20px; margin: 0px; } < /style >
Trinn 24:. SWFObject First

For gyldig publisering av våre SWF-fil trenger vi SWFObject skriptet

Gå til code.google.com/p/swfobject /og nedlasting swfobject_2_1.zip og swfobject_generator_1_2_air.zip. Merk:. Hvis du ikke har Adobe Air nedlasting swfobject_generator_1_2_html.zip, men jeg liker Air søknaden bedre

Trinn 25: Importere Javascript

Pakk swfobject_2_1.zip og kopiere swfobject.js filen til away_3d_cube_html mappen

I din index.html legge en linje til hodet delen etter. < /style >, som importerer script
. < script type = "text /javascript" src="http://flashtuts.s3.amazonaws.com/049_3DCubeAway3D/tutorial/swfobject.js"></script>
Step 26: Eksporter SWF

Gå til Adobe Flash og åpen away3d_cube.fla

Velg Fil >. Export > Eksporter film fra menyen. I dialogboksen velger din away3d_cube_html mappe som destinasjon for filen. Lagre det som "cube.swf"

Trinn 27:.. SWFObject Generator

Pakk swfobject_generator_1_2_air.zip og kjøre swfobject_generator.air søknaden

Velg Dynamisk publisering fra Publishing metode . Skriv "flash_content" inn i HTML container id-feltet.

Deretter skriver du "cube.swf" i Flash (.swf) feltet. Satt 550 piksler og 400 piksler i dimensjonene felt for bredde og høyde henholdsvis

Til slutt, klikk Generer knappen

Trinn 28:.. Flytt SWF inn HTML

Fra generert kopien:
< script type = "text /javascript" > Var FlashVars = {}; Var params = {}; Var attributter = {}; swfobject.embedSWF ("cube.swf", "flash_content", "550", "400", "9.0.0", falske, FlashVars, params, egenskaper); < /script >

og lim inn i < head > delen av index.html etter < script type = "text /javascript" src = "http://flashtuts.s3.amazonaws.com/049_3DCubeAway3D/tutorial/swfobject.js" > < /script >. Deretter kopierer:
< div id = "flash_content" > < a href = "http://www.adobe.com/go/getflashplayer" > < img src="http://flashtuts.s3.amazonaws.com/049_3DCubeAway3D/tutorial/http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt = "Get Adobe Flash player" /> < /a > < /div >

og lim den inn i body-delen

Trinn 29: Forhåndsvisning HTML

Forhåndsvis index.html i alle nettlesere manuelt, eller velge. Fil > Forhåndsvisning i nett > . Safari (for eksempel) i Adobe Dreamweaver meny

Vår html-side fungerer perfekt

Trinn 30: Bøy det

Kjør Flex Builder 3. Gå til Fil >! New > Action Project. I dialogboksen skriver du "away3d_cube_tutorial" i Prosjektnavn-feltet og klikker på Fullfør

Trinn 31:. Away3D og Flex

Gjenta trinn 4, hvor vi lastet ned arkivet med Away3D motor og pakket den . . Kopier alle mappene fra den utpakkede arkivet og lime dem inn i away3d_cube_tutorial /src /mappe

Som standard denne mappen ligger i Documents > Flex Builder 3 (Mac OS), C: \\ Program Files \\ Adobe \\ Flex Builder 3 (Windows)

Gå til Flex Builder 3 miljø.. Flex Navigator skal vises som på bildet under:

Trinn 32:. Kompilere kode

Først av alt, kopiere metal.jpg inn away3d_cube_tutorial /src /

Så åpen CreateCube01.as og kopiere følgende linjer med kode, hvor vi importerer klasser etter "import flash.display.Sprite;" inn i Flex enviroinment

Deretter kopierer de private variabler og lime dem før definere offentlig funksjon "away3d_cube_tutorial"

Her er den endelige koden:..
pakke {import flash.display.Sprite; import flash.events.Event; import flash.display.Bitmap; import away3d.cameras. *; import away3d.containers.View3D; import away3d.primitives.Cube; import away3d.materials.BitmapMaterial; import away3d.core.utils.Cast; public class away3d_cube_tutorial strekker Sprite {private Var view: View3D; private Var kube: Cube; [Bygg (kilde = "metal.jpg")] privat Var myTexture: Klasse; private Var myBitmap: Bitmap = new myTexture (); offentlig funksjon away3d_cube_tutorial () {view = new View3D ({x: 200, y: 200}); addChild (view); Var myMaterial: BitmapMaterial = new BitmapMaterial (Cast.bitmap (myBitmap)); cube = new Cube ({width: 150, høyde: 150, dybde: 150, materiale: myMaterial}); viewport.scene.addChild (kube); this.addEventListener (Event.ENTER_FRAME, renderThis); } Private funksjon renderThis (e: Hendelses): void {viewport.camera.rotationY = mouseX /2; viewport.camera.rotationX = mousey /2; cube.rotationX + = 1; cube.rotationY + = 1; cube.rotationZ + = 1; viewport.camera.moveTo (cube.x, cube.y, cube.z); viewport.camera.moveBackward (800); viewport.render (); }}}
Trinn 33: Kjør inn søknaden

Marker ut away3d_cube_tutorial.as i Flex Navigator. . Klikk på høyre museknapp og velg "Set as Default Application"

Klikk på høyre museknapp igjen og velg "Kjør program"

Trinn 34:. Endelig Flex

Godt gjort! Programmet du har opprettet åpnes i et nettleservindu

Konklusjon

I denne opplæringen vi har tatt våre første skritt i å bruke Away3D motor:. Skape en primitiv objekt, teksturering med en enkelt materiale, og legger til kamerakontroll via musa. Vi har også lært å sette vår .swf inn i en HTML-side, hvordan du kobler Away3D motor med Flex og kompilere Actionscript-kode i Flex enviroinment. Jeg håper du likte å følge med, legg gjerne igjen dine kommentarer og spørsmål!