เริ่มต้นติดตั้ง Away3D กันดีกว่า : Part 1

ก่อนอื่นต้องทำความเข้าใจว่า Away3D เป็นคลาสสำหรับสร้างภาพ 3 มิติภายในตัวเองลักษณะโครงสร้างแบบ Vector เราจะต้องนำพื้นผิวภายนอกที่ทำจาก Photoshop ทำการ Linkage เข้าไปโดยการ Set ที่ Property และทำการ addChild ภาพที่ Render ได้เข้าไป

ในขณะที่ผมเขียนนี้ Away3D มีแนวโน้มที่ดี จากการพูดคุยกับเทพทั้งหลาย เขาเล่าว่ามันจะไปสวมต่อกับ Flash Player ที่สามารถเล่น 3D ได้เนียนตา ในเวอร์ชั่น 11 ต่อไป ในชื่อของ Molehill ได้ในเร็วๆนี้ ส่วน PaperVision ได้ข่าวว่ากลุ่มนักพัฒนาแยกวงกันไปแล้ว ซะงั้น เพราะไม่มีอะไรใหม่ๆออกมาได้ ปีสองปีแล้ว

มาดูตัวอย่างเว็บไซต์ที่ใช้ Away3D ในการพัฒนาอย่างเว็บนี้ http://www.splinelab.de/ จริงๆแล้ว PV ก็ำทำได้แต่ว่า เพื่ออนาคตที่ดีกว่านักพัฒนา Flash เชื่อกันว่า Away3D ยังดูสดใสซาบซ่ากว่าเจ้าอื่นๆที่ยังเป็นอะไรที่ ฟรีๆๆๆอยู่นะคับ (ขนาด Alternativa Platform สายพันธุ์ Russia ยังยอมให้ เวอร์ชั่น 7 ใฟ้ใช้ฟรีได้ แต่ยังไม่ OpenSource ซะทีเดียว ฟังแล้วก็ งงๆๆ)

Concept ก่อนเริ่มต้น

1. มันคือ Class ดังนั้น จะต้องทำการ Import Class เข้าไป ไม่งั้นมัน Render ไม่ได้ก็แสดงผลไม่ได้

2. ไม่ต้องงง ว่าถ้าเข้าไปดาวน์โหลด Away3D Class แล้วเจออะไรมั่งให้ดาวน์โหลดเต็มไปหมด ให้เข้าใจดังนี้ว่า นักพัฒนาได้แบ่ง เป็น 2 กำมะพัน คือ "away3d " กับ "away3dlite" ไอ้ตัวแรกมาเต็ม หนัก แต่เต็มเปี่ยมไปด้วยคลาสเวอร์ชั่นเต็ม แต่ away3dlite คือตัวเบา มีจัดให้เป็นชุดเล็ก ดังนั้นก็แล้วแต่จะเลือกเล่น แต่สำหรับผู้เริ่มต้นลองเล่นแบบ lite ดูก่อนก็ได้คับ ^^

จุดสังเกตุ

Away3D Class แบบจัดหนัก

import away3d.containers.*;

import away3d.primitives.*;

import flash.display.Sprite;

Away3Dlite Class แบบจัดเบาๆ

import away3dlite.containers.*;

import away3dlite.primitives.*;

import flash.display.Sprite;

3. องค์ประกอบคือ Folder ที่บรรจุคลาสเหล่านี้ ถ้าไม่มีรันไม่ได้ ดังนั้นควรเอามาไว้ใน Folder เดียวกันกับไฟล์ fla นะครับ

เริ่มต้นดาวน์โหลด

1. เข้าเว็บไซต์ http://away3d.com/download/ หาไฟล์ที่ชื่อ away3dlite_1_0_0.zip แล้วดาวน์โหลด

2. เปิดไฟล์คลาย Zip จะเห็น 2 Folder ดังนี้

3. สำหรับใครที่เป็นมือใหม่ Flash Builder ก็ลองทำตามดูนะ เปิดโปรแกรม Flash Builder 4 แล้วสร้างโปรเจ็คใหม่ ในที่นี้ตั้งชื่อ MyAway3dInter

4. เลือกชนิด Application เป็น Web

5. Use default SDK

6. กด Next ลุยโลด

7. Flex จะถามว่าให้เก็บไฟล์แสดงผลที่ Folder ไหน ก็เลือกตาม Default name ไปเลยก็ได้นะ แล้วกด Next

8. กด Finish เป็นอันเรียบร้อยในการสร้าง Project ใน Flex4 ใครมาถึงรูปด้านล่าง ถือว่าเดินขึ้นภูกระดึงได้ครึ่งทางแล้วนะ ^^

** Default Code ตรงนี้ไม่ต้องตกใจ ดูให้เพลินๆ เพราะยังไม่ได้ใช้ตอนนี้นะ

** คำเตือนใครเล่น Collection CS5 แล้วเครื่องไม่แรง รับรอง ตาค้างกันจนสว่างแน่ๆ อัพเกรด HW กันด้วยนะ

9. ตรงนี้สำคัญ เราต้อง เอา Class ตามภาพตัวอย่าง Copy หรือ ลากโฟลเดอร์ ทั้ง away3dlite และ net ไปวางใน Flash Builder ตรงโฟลเดอร์ src เพื่อใช้อ้างอิงคำสั่งตอน Render เข้่าใจ๋

10.ดาวน์โหลดไฟล์ Example เราจำเป็นต้องใช้โค้ดตัวอย่างเพื่อเป็นการศึกษาให้เข้าใจได้เร็วยิ่งขึ้น http://away3d.googlecode.com/svn/trunk/fp10/Examples/Away3DLite/as/src/ ให้ copy ออก

มาเป็นไฟล์ เอาทุกไฟล์เลยนะ

Advanced_Mario1000.as

Advanced_MultiMario.as

Basic_InteractiveObjects.as

Basic_LoadModel.as

Basic_SceneSetup.as

ExCamera.as

ExCameraMove.as

ExCollada.as

ExLayer.as

ExLight.as

ExLookAt.as

ExMD2Cubic.as

ExMQO.as

ExPlane.as

ExSphere.as

ExSphereSpeedTest.as

ExSprite3D.as

Intermediate_Skybox.as

--------------------------------------------------------------------

11. โค้ดตัวอย่างที่ให้ลองดาวน์โหลด จะได้เริ่มต้นง่ายๆ ด้วยการเห็นภาพรวมก่อน ว่ามันทำยังไง ตอนนี้อาจจะยังไม่ใช่เวลาที่จะมาพะวง เรื่องการเขียนโค้ดนะครับ ดูภาพรวมก่อนจะได้รู้ว่า เรายังขาดอุปกรณ์อะไรอยู่อีกหรือเปล่า

ต่อๆๆ นะคับ เมื่อได้ไฟล์ *.as ตามรายการชื่อไฟล์ด้านบนครบแล้ว ให้สร้างโฟลเดอร์ใหม่ใน Project MyAway3dInter > src > คลิกขวา new > Folder > ตั้งชื่อว่า code เสร็จแล้วให้ก๊อปปี้ File *.as ทั้งหมดไปใส่ใน โฟลเดอร์ code

เหตุผลไม่มีอะไรมาก แต่อยากให้เอา Code เหล่านี้ทดลอง Run ให้เห็นภาพก่อนนะครับ ถ้าใคร Run แล้ว Error ให้ดูว่าคลาสมีอยู่หรือเปล่า หรือลืมก๊อปมา หรือคลาสที่ใช้มันอยู่ใน ชุดเต็ม ก็ลองตรวจสอบดูครับ

ในบทความหน้า จะมาลอง Run Script ต่างๆ ก่อนที่จะเริ่มเรียนรู้การเขียน Code Away3D ต่อไป

หน้าเริ่มยาว เดี๋ยวเอาไว้ต่อหน้าต่อไปนะครับ ^^ GogogoGOgogoGOogooo>>>>>>