Share
We gaan een kubus maken in de Adobe Flash (of Flex) -omgeving met behulp van de Away3D-engine. We kiezen de nodige textuur en leggen deze op de gezichten van de kubus. We laten de kubus ook draaien en bepalen de scène via een camera.
Laten we vastlopen in ...
Tijdens deze tutorial gebruiken we Adobe Flash en de Away3D 2.3.3-engine voor Flash Player 9. Voor het invoegen van de laatste swf gebruiken we Adobe Dreamweaver (je kunt elke html-editor gebruiken), SWFObject en SWFObject Generator (air-versie) of html-versie). Ik zal ook uitleggen hoe je een kubus in de Flex-omgeving maakt en structureert.
Maak een nieuw ActionScript3-bestand.
Druk in het paneel Eigenschappen op de knop Bewerken.
Kies Flash Player 9-profiel en klik op OK.
Sla uw bestand op als "away3d_cube.fla" in de map away3d_cube_tutorial.
Download de Away3D-engine van Away3D-downloads. We gebruiken versie 2.3.3 voor Flash Player 9.
Pak een archief uit en kopieer alle mappen naar de map away3d_cube_tutorial.
Maak een nieuw ActionScript-bestand in Adobe Flash. Sla uw bestand op als "CreateCube01.as" in de map away3d_cube_tutorial.
Voer in het veld Klasse in het deelvenster Publiceren "CreateCube01" in.
Open CreateCube01.as en begin met het importeren van alle benodigde klassen.
pakket import flash.display.Sprite; import flash.events.Event; import away3d.containers.View3D; import away3d.primitives.Cube;
Definieer een klasse, die Sprite Class uitbreidt. Let op de klassenaam, deze moet dezelfde zijn als de klasse die we hebben ingevoerd in het veld Klasse in het deelvenster Publiceren.
openbare klasse CreateCube01 breidt Sprite uit
Declareer privévariabelen voor viewport container (View3D) en cube primitive (Cube).
public class CreateCube01 breidt Sprite uit private var viewport: View3D; private var cube: Cube;
Voeg een openbare functie toe na de regels waarop we onze privévariabelen hebben verklaard.
public function CreateCube01 () viewport = new View3D (x: 200, y: 200); addChild (kijkvenster);
Maak in een openbare functie een kubus met hoofdinstellingen en voeg deze toe aan de scène.
kubus = nieuwe kubus (breedte: 150, hoogte: 150, diepte: 150); viewport.scene.addChild (kubus);
Voeg een adres toe aan de rendering-functie.
Maak een persoonlijke functie voor het renderen van de kubus en de rotatie ervan rond de X, Y, Z-as. De privé-functie moet komen na onze openbare functie.
this.addEventListener (Event.ENTER_FRAME, renderThis); private function renderThis (e: Event): void cube.rotationX + = 1; cube.rotationY + = 1; cube.rotationZ + = 1; viewport.render ();
Om te zien wat we tot nu toe hebben, gaat u naar away3d_cube.fla en kiest u Besturing> Film testen of gebruikt u de sneltoetsen Cmd + Enter (Mac OS) of Ctrl + Enter (Windows). We hebben een roterende kubus!
Houd er rekening mee dat de Away3D-engine een willekeurige kleur geeft aan uw kubus. In de volgende stappen zullen we onze eigen textuur toevoegen.
We hebben een bitmapstructuur nodig. In het belang van deze tutorial heb ik een bitmap verstrekt, die ik heb gedownload van cgtextures.com.
Hernoem het bestand naar "metal.jpg" en kopieer het naar de root van de map away3d_cube_tutorial.
In CreateCube01.as voeg enkele nieuwe klassen toe.
import flash.display.Bitmap; import away3d.materials.BitmapMaterial; import away3d.core.utils.Cast;
Voeg variabelen toe voor de bitmap en textuur en importeer het metal.jpg -bestand.
[Embed (source = "metal.jpg")] private var myTexture: Class; private var myBitmap: Bitmap = new myTexture ();
In de openbare functie CreateCube01 voegen we een variabele toe voor materiaal en het materiaal voor onze kubus.
var myMaterial: BitmapMaterial = nieuw BitmapMaterial (Cast.bitmap (myBitmap)); cube = nieuwe Cube (width: 150, height: 150, depth: 150, material: myMaterial);
Bekijk het resultaat! Ga naar away3d_cube.fla vanuit het menu of gebruik de sneltoetsen Cmd + Enter (Mac OS) of Ctrl + Enter (Windows). We hebben nu een getextureerde roterende kubus!
In de volgende stappen zullen we een camera toevoegen die we kunnen beheren met onze muis.
Voeg een camera toe aan de scène door een klasse te importeren en de persoonlijke functie "renderThis" aan te passen.
import away3d.cameras. *; private function renderThis (e: Event): void cube.rotationX + = 1; cube.rotationY + = 1; cube.rotationZ + = 1; viewport.camera.moveTo (cube.x, cube.y, cube.z); viewport.camera.moveBackward (500); viewport.render ();
Verdere aanpassingen van de private functie renderThis om controle te krijgen via de muis.
private function renderThis (e: Event): 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 ();
Goed gedaan! We hebben de kubus gemaakt, getextureerd, de camera en camerabesturing via de muis toegevoegd. In de volgende stappen zullen we onze swf invoegen in een html-pagina.
Maak een nieuw HTML-bestand. Ik raad iedereen aan om het te maken in Adobe Dreamveawer (Mac, Windows) of Coda (Mac), Notepad ++ (Windows).
We voegen stijl toe voor de hoofdtekst van onze pagina en veranderen de titel in hoofdsectie. Sla daarna uw bestand op als "index.html" in de map away3d_cube_html.
Texture Cube (Away3D)
Voor geldige publicatie van ons swf-bestand hebben we het swfobject-script nodig.
Ga naar code.google.com/p/swfobject/ en download swfobject_2_1.zip en swfobject_generator_1_2_air.zip. Opmerking: als je geen Adobe Air download swfobject_generator_1_2_html.zip hebt, maar ik vind de Air-applicatie beter.
Pak swfobject_2_1.zip uit en kopieer het bestand swfobject.js naar de map away_3d_cube_html.
Voeg in je index.html een regel toe aan het kopgedeelte na , welke javascript importeert.
Ga naar Adobe Flash en open away3d_cube.fla.
Kies Bestand> Exporteren> Film exporteren uit menu. Kies in het dialoogvenster de map away3d_cube_html als de bestemming voor uw bestand. Sla het op als "cube.swf".
Pak swfobject_generator_1_2_air.zip uit en voer de toepassing swfobject_generator.air uit.
Kies Dynamisch publiceren vanuit de publicatiemethode. Typ "flash_content" in het veld HTML container-id.
Typ vervolgens "cube.swf" in het veld Flash (.swf). Stel 550 pixels en 400 pixels in de vakken Dimensies in voor respectievelijk breedte en hoogte.
Klik ten slotte op de knop Genereren.
Van de gegenereerde kopie:
en plak in de
sectie van index.html na . Kopieer dan:en plak het in het lichaamssectie.
Bekijk handmatig een voorbeeld van uw index.html in elke browser of kies Bestand> Voorbeeld in browser> Safari (bijvoorbeeld) in het menu van Adobe Dreamweaver.
Onze html-pagina werkt perfect!
Start Flex Builder 3. Ga naar Bestand> Nieuw> ActionScript-project. Voer in het dialoogvenster "away3d_cube_tutorial" in het veld Projectnaam in en klik op Voltooien.
Herhaal stap 4, waar we het archief met de Away3D-engine hebben gedownload en uitgepakt. Kopieer alle mappen uit het uitgepakte archief en plak ze in de map away3d_cube_tutorial / src / folder.
Standaard bevindt deze map zich in Documenten> Flex Builder 3 (Mac OS), C: \ Program Files \ Adobe \ Flex Builder 3 (Windows).
Ga naar de Flex Builder 3-omgeving. Flex Navigator zou moeten verschijnen zoals op de afbeelding hieronder:
Eerst en vooral, kopieer metal.jpg naar away3d_cube_tutorial / src /.
Open vervolgens CreateCube01.as en kopieer de volgende regels code, waar we klassen importeren na "import flash.display.Sprite;" in de Flex-omgeving.
Kopieer vervolgens de privévariabelen en plak ze voordat u de openbare functie "away3d_cube_tutorial" definieert.
Hier is de definitieve code:
pakket 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 breidt Sprite uit private var viewport: View3D; private var cube: Cube; [Embed (source = "metal.jpg")] private var myTexture: Class; private var myBitmap: Bitmap = new myTexture (); public function away3d_cube_tutorial () viewport = new View3D (x: 200, y: 200); addChild (kijkvenster); var myMaterial: BitmapMaterial = nieuw BitmapMaterial (Cast.bitmap (myBitmap)); cube = nieuwe Cube (width: 150, height: 150, depth: 150, material: myMaterial); viewport.scene.addChild (kubus); this.addEventListener (Event.ENTER_FRAME, renderThis); private function renderThis (e: Event): 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 ();
Markeer away3d_cube_tutorial.as in Flex Navigator. Klik met de rechtermuisknop en kies "Set as Default Application".
Klik nogmaals op de rechtermuisknop en kies "Toepassing uitvoeren".
Goed gedaan! De applicatie die je hebt gemaakt, wordt geopend in een browservenster.
In deze tutorial hebben we onze eerste stappen gezet in het gebruik van de Away3D-engine: een primitief object maken, texturen met één materiaal, cameracontrole toevoegen met de muis. We hebben ook geleerd hoe we onze .swf in een .html-pagina kunnen invoegen, hoe de Away3D-engine met Flex kan worden verbonden en hoe code van actionscript in Flex enviroinment kan worden gecompileerd. Ik hoop dat je het leuk vond om mee te nemen, voel je vrij om je opmerkingen en vragen achter te laten!
Accentsconagua
