Share
Vom crea un cub în mediul Adobe Flash (sau Flex) folosind motorul Away3D. Vom alege textura necesară și vom suprapune pe fețele cubului. De asemenea, vom face cubul să se rotească și să conducă scena printr-o cameră.
Să rămânem în ...
În timpul acestui tutorial vom folosi Adobe Flash și motorul Away3D 2.3.3 pentru Flash Player 9. Pentru inserarea SWF final vom folosi Adobe Dreamweaver (puteți folosi orice editor html), SWFObject și SWFObject Generator (aer-version sau html-versiune). Voi explica, de asemenea, cum să creați și să texturăți un cub în mediul Flex.
Creați un nou fișier ActionScript3.
În panoul Proprietăți, apăsați butonul Editare.
Alegeți profilul Flash Player 9 și faceți clic pe OK.
Salvați fișierul ca "away3d_cube.fla" în dosarul away3d_cube_tutorial.
Descărcați motorul Away3D de la Descărcări Away3D. Vom folosi versiunea 2.3.3 pentru Flash Player 9.
Despachetați o arhivă și copiați toate folderele în dosarul away3d_cube_tutorial.
Creați un nou fișier ActionScript în Adobe Flash. Salvați fișierul ca "CreateCube01.as" în dosarul away3d_cube_tutorial.
În câmpul Class al panoului Publicați introduceți "CreateCube01".
Deschideți CreateCube01.as și începeți prin a importa toate clasele necesare.
pachet import flash.display.Sprite; importul flash.events.Event; import away3d.containers.View3D; import away3d.primitives.Cube;
Definiți o clasă care extinde clasa Sprite. Acordați atenție la numele clasei, trebuie să fie același cu clasa pe care am introdus-o în câmpul Clasă din panoul Publicare.
clasa publica CreateCube01 extinde Sprite
Declarați variabilele private pentru containerul Viewport (View3D) și primitivul cub (Cube).
clasa publica CreateCube01 extinde Sprite private var viewport: View3D; privat var cub: Cube;
Adăugați o funcție publică după liniile în care am declarat variabilele noastre private.
funcția publică CreateCube01 () viewport = vizualizare nouă (x: 200, y: 200); addChild (fereastra);
Într-o funcție publică creați un cub cu setările principale și adăugați-l la scenă.
cub = nou Cub (lățime: 150, înălțime: 150, adâncime: 150); viewport.scene.addChild (cub);
Adăugați o adresă la funcția de redare.
Creați o funcție privată pentru redarea cubului și rotirea acestuia în jurul axelor X, Y, Z. Funcția privată trebuie să vină după funcția noastră publică.
this.addEventListener (Event.ENTER_FRAME, renderThis); funcția privată renderAcest lucru (e: Eveniment): void cube.rotationX + = 1; cube.rotationY + = 1; cube.roreaZ + = 1; viewport.render ();
Pentru a vedea ce avem până acum, du-te la away3d_cube.fla și alege Control> Test Movie sau folosiți tastele Cmd + Enter (Mac OS) sau Ctrl + Enter (Windows). Avem un cub rotativ!
Rețineți că motorul Away3D dă o culoare aleatorie cubului dvs. În următorii pași vom adăuga textura proprie.
Avem nevoie de un bitmap de textură. De dragul acestui tutorial am oferit un bitmap, pe care l-am descarcat de pe cgtextures.com.
Redenumiți fișierul la "metal.jpg" și copiați-l în rădăcina folderului away3d_cube_tutorial.
În CreateCube01.as adăugați câteva clase noi.
import flash.display.Bitmap; import away3d.materials.BitmapMaterial; import away3d.core.utils.Cast;
Adăugați variabile pentru bitmap și textură și importați fișierul metal.jpg.
[Embed (sursa = "metal.jpg")] privat var myTexture: Clasa; privată var myBitmap: Bitmap = noua myTexture ();
În funcția publică CreateCube01 vom adăuga o variabilă pentru material și material pentru cubul nostru.
var myMaterial: BitmapMaterial = BitmapMaterial nou (Cast.bitmap (myBitmap)); cub = nou Cub (lățime: 150, înălțime: 150, adâncime: 150, material: myMaterial);
Verificați rezultatul! Accesați meniul away3d_cube.fla din meniu sau utilizați tastele rapide Cmd + Enter (Mac OS) sau Ctrl + Enter (Windows). Acum avem a texturată cub rotativ!
În următorii pași vom adăuga o cameră pe care o vom putea controla cu mouse-ul.
Adăugați o cameră la scena importând o clasă și modificând funcția privată "renderThis".
importa away3d.cameras. *; funcția privată renderAcest lucru (e: Eveniment): void cube.rotationX + = 1; cube.rotationY + = 1; cube.roreaZ + = 1; viewport.camera.moveTo (cube.x, cube.y, cube.z); viewport.camera.moveBackward (500); viewport.render ();
Modificați în continuare funcția privată renderThis pentru a obține controlul prin intermediul mouse-ului.
funcția privată renderAcest lucru (e: Eveniment): void viewport.camera.rotationY = mouseX / 2; viewport.camera.rotationX = mousey / 2; cube.roareaX + = 1; cube.rotationY + = 1; cube.roreaZ + = 1; viewport.camera.moveTo (cube.x, cube.y, cube.z); viewport.camera.moveBackward (500); viewport.render ();
Foarte bine! Am creat cubul, l-am texturat, am adăugat camera și controlul camerei prin intermediul mouse-ului. În următorii pași vom introduce swf-ul nostru într-o html-pagină.
Creați un nou fișier .html. Vă recomandăm să creați-o în Adobe Dreamveawer (Mac, Windows) sau Coda (Mac), Notepad ++ (Windows).
Vom adăuga stil pentru corpul paginii noastre și vom schimba titlul în secțiunea cap. După aceea, salvați fișierul ca "index.html" în folderul away3d_cube_html.
Textură Cub (Away3D)
Pentru publicarea validă a fișierului swf avem nevoie de scriptul swfobject.
Accesați code.google.com/p/swfobject/ și descărcați swfobject_2_1.zip și swfobject_generator_1_2_air.zip. Notă: dacă nu aveți descărcare swfobject_generator_1_2_html.zip Adobe Air, dar îmi place mai bine aplicația Air.
Despachetați swfobject_2_1.zip și copiați fișierul swfobject.js în folderul away_3d_cube_html.
În index.html, adăugați o linie în secțiunea cap după , care importă javascript.
Accesați Adobe Flash și deschideți 3d_cube.fla.
Selectați Fișier> Export> Export film din meniu. În fereastra de dialog alegeți folderul dvs. away3d_cube_html ca destinație pentru fișierul dvs. Salvați-l ca "cube.swf".
Despachetați swfobject_generator_1_2_air.zip și rulați aplicația swfobject_generator.air.
Alegeți publicarea dinamică din metoda publicării. Introduceți "flash_content" în câmpul ID-ul containerului HTML.
Apoi tastați "cube.swf" în câmpul Flash (.swf). Setați 550 de pixeli și 400 de pixeli în câmpurile Dimensiuni pentru lățime și respectiv înălțime.
În cele din urmă, faceți clic pe butonul Generați.
Din copia generată de ieșire:
și lipiți în
secțiune din index.html după . Apoi copiați:și lipiți-o în secțiunea corpului.
Previzualizați-vă index.html în orice browser manual sau alegeți File> Preview in browser> Safari (de exemplu) în meniul Adobe Dreamweaver.
Pagina noastră html funcționează perfect!
Rulați Flex Builder 3. Mergeți la File> New> Project ActionScript. În fereastra de dialog introduceți "away3d_cube_tutorial" în câmpul Nume proiect și faceți clic pe Terminare.
Repetați pasul 4, unde am descărcat arhiva cu motorul Away3D și l-am despachetat. Copiați toate folderele din arhiva dezarhivată și inserați-le în folderul away3d_cube_tutorial / src /.
Implicit, acest dosar este localizat în Documente> Flex Builder 3 (Mac OS), C: \ Program Files \ Adobe \ Flex Builder 3 (Windows).
Mergeți la mediul Flex Builder 3. Flex Navigator ar trebui să apară ca în imaginea de mai jos:
Mai întâi de toate, copy metal.jpg în away3d_cube_tutorial / src /.
Apoi deschideți CreateCube01.as și copiați următoarele linii de cod, unde vom importa clase după "import flash.display.Sprite;" în mediul Flex.
Apoi, copiați variabilele private și le lipiți înainte de a defini funcția publică "away3d_cube_tutorial".
Iată codul final:
pachet import flash.display.Sprite; importul flash.events.Event; import flash.display.Bitmap; importa away3d.cameras. *; import away3d.containers.View3D; import away3d.primitives.Cube; import away3d.materials.BitmapMaterial; import away3d.core.utils.Cast; clasa publica away3d_cube_tutorial extinde Sprite private var viewport: View3D; privat var cub: Cube; [Embed (sursa = "metal.jpg")] privat var myTexture: Clasa; privată var myBitmap: Bitmap = noua myTexture (); funcția publică away3d_cube_tutorial () viewport = new View3D (x: 200, y: 200); addChild (fereastra); var myMaterial: BitmapMaterial = BitmapMaterial nou (Cast.bitmap (myBitmap)); cub = nou Cub (lățime: 150, înălțime: 150, adâncime: 150, material: myMaterial); viewport.scene.addChild (cub); this.addEventListener (Event.ENTER_FRAME, renderThis); funcția privată renderThis (e: Eveniment): void viewport.camera.rotationY = mouseX / 2; viewport.camera.rotationX = mousey / 2; cube.roareaX + = 1; cube.rotationY + = 1; cube.roreaZ + = 1; viewport.camera.moveTo (cube.x, cube.y, cube.z); viewport.camera.moveBackward (800); viewport.render ();
Marcați away3d_cube_tutorial.as în Flex Navigator. Faceți clic pe butonul din dreapta al mouse-ului și alegeți "Setare ca aplicație implicită".
Faceți clic mai repede pe butonul din dreapta al mouse-ului și alegeți "Run Application".
Foarte bine! Aplicația pe care ați creat-o se va deschide într-o fereastră de browser.
În acest tutorial am făcut primii pași în utilizarea motorului Away3D: crearea unui obiect primitiv, texturarea cu un singur material, adăugarea controlului camerei prin intermediul mouse-ului. De asemenea, am învățat cum să inserăm .swf într-o pagină HTML, cum să conectăm motorul Away3D cu Flex și să compilați codul actionscript în Flex. Sper că v-ați bucurat de urmărirea de mai jos, nu ezitați să lăsați comentariile și întrebările!
Accentsconagua
