Away3D Model Part3

จากความเดิมตอนที่แล้ว
เราได้ไฟล์ Home.as กับโฟลเดอร์ images ติดมา ก่อนอื่นต้องขอบอกกันก่อนเลยนะครับว่า Home.as เป็นไฟล์โมเดลของเราที่อยู่ในรูปแบบของภาษา ActionScript 3.0 ส่วนโฟล์เดอร์ images จะเป็นโฟล์เดอร์ที่เก็บไฟล์ ซึ่งจะถูกเรียกใช้โดย Home.as พูดง่ายๆก็คือมันจะต้องอยู่ได้กันครับ
เมื่อได้มาแล้วถัดไปเราจะเริ่มเขียนไฟล์เพื่อทดสอบกันนะครับ ว่าที่เราได้มามันโอเคไหม?
1. เขียนไฟล์ TestHome.as ครับ

package{         import flash.display.Sprite;         import flash.events.Event;         import away3d.containers.View3D;         public class TestHome extends Sprite{                 private var view:View3D;                 private var myHome:Home;                 public function TestHome(){                         view = new View3D({x:200,y:200});                         addChild(view);                         myHome = new Home();                         view.scene.addChild(myHome);                         view.camera.y = 3;                         view.camera.zoom = 10;                         stage.addEventListener(Event.ENTER_FRAME                         ,onEnterFrame);                 }                 public function onEnterFrame(e:Event):void{                         myHome.rotationZ +=1;                         view.render();                 }         } }

2. ทำการบันทึกไว้ในโฟล์เดอร์เดียวกันกับไฟล์ Home.as
3. คอมไพล์แล้วลองรันผลลัพธ์ดูครับ ซึ่งตามหลักการคุณก็จะได้วัตถุ3มิติที่หมุนติ้วๆ ใน Flash แล้ว แต่ถ้าไม่ได้ ก็ ลองใหม่อีกทีน่ะคร้บ
จบแล้วครับ

Away3D Model Part2

เมื่อเราได้ ไฟล์ โมเดล 3มิติ ที่เป็น *.3ds มาแล้วขั่นต่อไปเราจะทำการใส่ลวดลายให้กับโมเดลสามมิตินั้น ซึ่งการใส่ลวดลายให้กับวัตถุด้วย Away3D นั้น เป็น Flash Platform ที่เขียนด้วย ActionScript ดังนั้นเราจึงจำเป็นต้องใช้ preFab ซึ่งเป็นเครื่องมือที่จะช่วยสร้างคลาสของโมเดลสามมิติพร้อมลวดลายให้กับเรา แทนที่เราจะมานั่นเล็งเอาเองพล็อตจุดแทนจุดเอาเองจริงไหมครับ :)
1. ไปดาวน์โหลดโปรแกรม preFab กันก่อนครับ ที่นี่ครับ http://www.closier.nl/prefab/ ไอ้เจ้า preFab เนี้ยเป็นโปรแกรมที่ทำงานบน Adobe AIR ถ้าคุณต้องการดาวน์โหลด preFab มาติดตั้งคุณจะต้องลง Adobe Air ก่อน (ซึ่งคุณก็เลือกได้ทางเดียวครับต้องลง AIR และโหลด preFab มาติดตั้ง :D ไม่ติดตั้งก่อนก็ไม่ได้ใช้หรอก) ถ้าคุณไปถึงเป็น preFab คุณก็จะเห็นว่าหน้าเว็บเค้าจ๊าบจริงๆ ติดตั้งเสร็จแล้วใช่ไหมครับ โอเค... เริ่มเลย ครับ

รูปที่ a3d2.1

ความเดิมตอนที่แล้ว : เราได้ ไฟล์ Home.3ds มาแล้วใช่ไหมครับ (น่าจะใช่น่ะ)
1. เปิด preFab ครับ (นี่แหล่ะคือเหตุผลที่ให้ไปโหลด) ถ้าคุณใช้เวอร์ชั่น เดียวกันกับผมนะครับ มันจะมี หน้าต่างหลักอยู่ตัวหนึ่ง แล้วก็มีหน้าต่าง Light manager และก็ หน้าต่าง Renderings list อีกตัว รวมกันเป็น 3 ตัว(อันนี้บวกให้ กลัวไม่รู้) คลิ๊กดูภาพใหญ่รูปที่ a3d2.1 (จะดูทำไม ในเมื่อโหลดมาแล้วลูกพี่? อ้าวก็เผื่อมีคนยังไม่ลง..)
2. เริ่มของจริงครับ ไปที่ File > Import 3D model ดังรูปที่ a3d2.2จากนั้นโปรแกรมก็จะถามว่าจะรีสเกลหรือไม่อะไรประมาณนี้ ถ้าคุณพอใจแล้วคุณก็กด OK ไป

รูปที่ a3d2.2

3. เห็นไหมโมเดลที่เราทำใน Blender ก็จะมาประกฏกายบน preFab ในพริบตาเหมือนในรูปที่ a3d2.3

รูปที่ a3d2.3

4. เมื่อโหลดโมเดลมาแล้วต่อไปเราจะโหลดภาพที่จะมาแปะครับที่ สังเกตุที่ Renderings list จะมีที่ให้โหลด ดูในรูปที่ a3d2.4 ครับ จากนั้นเราก็เลือกภาพมาครับ

รูปที่ a3d2.4

5. เมื่อโหลดภาพมาแล้ว ตอนนี้โมเดลเราก็จะมีลวดลายแล้วแต่เป็นลายแปลกๆ เพี้ยน ต่อไปเราจะทำการ จัดการกับลายนั้น คลิ๊ก UV editor รูปที่ a3d2.5

รูปที่ a3d2.5

6. จะปรากฏหน้าต่างมาให้เรา เพื่อทำการจัดการระหว่าง face กับ picture ที่เราโหลดมา แต่ก่อนที่จะลุยกันส่วนนี้ ผมจะขอสรุปสั่นๆ แบบ twitter ให้ฟังก่อนว่า
หน้าจอทางขวา เป็นส่วนของการ preview และเลือกวัตถุ กด Ctrl ค้าง แล้วลากเพื่อหมุน
หน้าจอทางซ้าย เป็นส่วนของ face ที่ถูกทำการเลือกโดยหน้าจอทางขวา เพื่อทำการแก้ไข
ส่วน หน้าจอ panel ตรงกลาง เป็นส่วนของการ rotate,flip ,ฯลฯ กับ vertex ของ face ที่ถูกเลือกจาก หน้าจอทางซ้ายอีกที งงไหม?

รูปที่ a3d2.6

เมื่อคุณเล่นๆ จับลากๆ คุณก็จะรู้เองว่าแต่ละอันมันใช้งานยังไง
7. จากนั้นเมื่อคุณจัดภาพกับโมเดลจนเป็นที่พอใจแล้วคุณก็ ไปที่ Export>Export to Away3D AS3 class เพื่อบันทึกภาพที่คุณทำๆอยู่น่ะ ออกไปเป็นไฟล์ .as

รูปที่ a3d2.7

8. ใส่ชื่อและ package ของคลาสลงไปครับ แล้วก็กด Save file

รูปที่ a3d2.8

9. เสร็จขั้นตอนที่ 8 แล้วตอนนี้คุณจะต้องได้ไฟล์ Home.as แล้วก็โพล์เดอร์ images ถ้าไม่ได้ ก็ลองพยายามทำใหม่อีกรอบนะครับ :)

รูปที่ a3d2.9

10. และสุดท้ายไม่ใช่กิจกรรมบังคับ

รูปที่ a3d2.10

---

คลาส Home.as มีประโยชน์อะไร?
โฟล์เดอร์ images มีมาทำไม?
โปรดติดตามตอนหน้านะครับ...
ตอนต่อไปเสนอตอน Away3D Model Part3 sub thai ตอนจบครับพี่น้อง!!

[en]Away3D Model Part1

In first step,when you created some 3D work,you must modelling your model.In this blog I use Blender
1. First, you model by you what you want. Learn more about blender goto wiki.blender.org

Figure a3d1.1

2. Next,You set your UVMap,It's the material of your model. Shown in Figure a3d1.2

Figure a3d1.2

3. When you modelled your model and finish in setting up UV Map, You go to
File > Export > 3D Studio. Shown in Figure a3d1.3

Figure a3d1.3

In this case,I save and named Home.3ds I'll Import on preFab.
In reality you can Export many extension in Blender,but you make sure that support in preFab

---

Continue... :)
In Away3D Model Part2 sub English

Away3D Model Part1

ในตอนแรกถ้าเราต้องการที่จะทำอะไรสามมิติ เราจะต้องทำการปั้นมันขึ้นมาจริงไหมครับ แน่นอน เราจะต้อง ใช้เครื่อง มือ พวก 3D Software ต่างๆ ซึ่งในที่นี้ เราเลือกใช้ Blender ครับ
1. ขั้นตอนแรกคุณก็ปฏิบัติการเลยครับจัดการปั้นโมเดลของคุณ ตามใจชอบ ในที่นี้ผมปั้นรูปบ้านครับทุกท่าน สุดยอดเลย...

รูปที่ a3d1.1

2. ต่อมาคุณก็ทำการกำหนด UV Map ให้กับชิ้นงาน ใน Blender 2.49b กด U เมนูมันก็จะขึ้นมาเหมือนในรูปที่ a3d1.2 (เลือกตาลงไปดู) คุณก็เลือกเอาว่าจะกำหนด UV Map เป็นแบบไหน เพราะจะเป็นรูปแบบในการใส่ลายให้กับชิ้นงานของคุณ ถ้าไม่รู้ล่ะว่า UV Map คืออะไร ? ไปที่นี่ครับพี่น้อง wikipedia ส่วนคนที่รู้งูๆปลาก็ต่อครับ..

รูปที่ a3d1.2

3. เมื่อได้ปั้นเสร็จ ได้ UV Map แล้ว ก็ทำการ Export ไปเป็น .3ds ครับ

รูปที่ a3d1.3

ผมทำการบันทึกไว้ในไฟล์ชื่อ Home.3ds น่ะครับพี่น้อง ช่วยจำหน่อย เพราะว่าตอนต่อไปเราจะนำไฟล์ Home.3ds นี้ไปนำเข้าแล้วแปะลายให้มัน ในโปรแกรม preFab เพื่อให้มันดูหรูหราขึ้นครับพี่น้อง

จริงๆแล้วคุณสามารถ Export ไฟล์ได้หลายรูปแบบจาก Blender แต่คุณจะต้องมั่นใจก่อนน่ะครับว่า คุณ โปรแกรม preFab รองรับ ไฟล์ประเภทนั้น เพราะถ้า preFab ไม่รองรับ คุณก็ลำบากล่ะครับงานนี้

---

เบื้องหน้าเบื้องหลังเป็นอย่างไร ข้อเท็จจริงคืออะไร โปรดติดตามตอนต่อไป... :)
ใน Away3D Model Part2 sub thai

3. Math กับ ActionScript

หลายคนคงสงสัยว่า คณิตศาสตร์เกี่ยวข้องอะไรกับการเขียนโปรแกรม คนที่เรียนทางด้านนี้มาโดยตรงคงเข้าใจดีว่าคณิตศาสตร์ใช้ทำอะไรในการเขียนโปรแกรมบ้าง สำหรับมือใหม่ก็อาจจะยังสงสัยว่าคณิตศาสตร์ใช้ทำอะไรในการเขียนโปรแกรม ซึ่งคุณจะหายสงสัยถ้าคุณลองคิดดูดีๆว่าที่แท้จริงแล้วเครื่องคอมพิวเตอร์ก็เป็นเครื่องคำนวณอย่างหนึ่ง เราจะต้องใช้ความรู้ทางด้านคณิตศาสตร์ในการสั่งงาน ไม่ว่าจะเป็นเรื่องของการบวก/ลบ/คูณ/หาร ความรู้เกี่ยวกับเมทริกซ์ การหาค่าลอกการิทึมเอ็กโพเน้นเทียล ตรีโกณมิติ รวมถึง การหาอนุพันธ์และ ปริพันธ์ ก็อาจจะถูกนำมาประยุกต์ใช้ในการเขียนโปรแกรมได้ตามความเหมาะสม ถึงแม้ว่าภาษา ActionScript จะมีชุดคำสั่งสำเร็จรูปทางด้านคณิตศาสตร์มาให้คุณแล้ว แต่คุณก็จำเป็นที่จะต้องมีความรู้พื้นฐานทางด้านคณิตศาสตร์ เพื่อที่จะความรู้ทางด้านนี้ มาประยุกต์กับงานเขียนโปรแกรมได้อย่างเหมาะสม ในหัวข้อนี้เราจะกล่าวถึงคณิตศาสตร์ที่จำเป็นกับการสร้างชิ้นงานของเรา

ระบบพิกัดฉากใน ActionScript
ก่อนที่จะไปถึงทฤษฎีคณิตศาสตร์เราจะต้องมาทำความเข้าใจกันก่อนว่า ActionScript มีการนับพิกัดหรืออ้างอิงวัตถุบนจอภาพอย่าง
จากรูปที่ 3.1 จะเห็นว่าระบบพิกัดฉากใน ActionScript จะเริ่มนำจาก ซ้ายไปขวา(แกน X) และ จากบนลงล่าง(แกน Y) ซึ่งเรียกการอ้างอิงจุดแบบนี้ ว่า screen coordinate ประโยชน์ของการอ้างอิงต่ำแหน่งของวัตถุบนจอภาพก็คือ ช่วยในการย้ายตำแหน่ง ย่อหรือขยายภาพ เป็นต้น

รูปที่ 3.1

ทฤษฏีบทปีทาโกรัส

รูปที่ 3.2

ใจความของทฤษฎีบทปีทาโกรัสกล่าวว่า รูปสามเหลี่ยมมุมฉากใดๆ เมื่อรู้ความยาวของด้านสองด้านแล้วจะสามารถหาความยาวของด้านที่เหลือได้ โดยใช้สูตร

รูปที่ 3.3

2. จัดการไฟล์ใน ActionScriptProject

ปกติเมื่อมีการสร้างโปรแกรมหรือพัฒนาระบบอะไรซักอย่าง เราจะควรจะมีการจัดการไฟล์ของเราให้เป็นหมวดหมู่ เพื่อให้ง่ายต่อการพัฒนาระบบต่อไป สำหรับแนวทางในการก็จะมีดังนี้

MyProject เป็นแฟ้มข้อมูลสำหรับเก็บไฟล์งานทั้งหมดของเรา
----- assets เป็นแฟ้มที่เก็บข้อมูลที่โปรแกรมหลักจะเรียกใช้ อาจจะเป็นไฟล์ .txt .xml เป็นต้น
----- images เป็นแฟ้มข้อมูลที่ใช้เก็บไฟล์ภาพที่จะใช้ในชิ้นงาน อาจจะเป็นไฟล์ .jpg .gif .png .psd .xcfเป็นต้น
----- sources เป็นแฟ้มข้อมูลที่เก็บโค๊ดทั้งหมดของชิ้นงาน อาจจะเป็นไฟล์ .fla .mxml .as เป็นต้น
---- models เป็นไฟล์คลาสต่างๆของเรา
---- libs เป็นไฟล์ไลบรารี่ภายนอกที่เราจะเรียกใช้
--- utils เป็นแฟ้มที่เก็บไฟล์ที่เป็นประโยชน์โดยทั่วไปกับระบบของเรา
----views เป็นแฟ้มที่เก็บไฟล์ต่างๆ เกี่ยวกับการแสดงผล
----- outputs เป็นแฟ้มข้อมูลใช้เก็บไฟล์ที่เกิดจากการคอมไพล์โค๊ดแล้ว อาจจะเป็นไฟล์ .swf .air .html เป็นต้น

อย่างไรก็ตามครับ ที่ผมแนะนำมาเป็นเพียงการจัดระเบียบของไฟล์งานในระบบ ที่ควรปฏิบัติ ถึงแม้ว่าระบบงานหลายระบบอาจจะมีการออกแบบที่แตกต่างออกไป แต่สิ่งที่ผมอยากจะย้ำนั่นก็คือ ถ้าไฟล์เราเป็นระเบียบเราก็จะทำงานได้ง่ายขึ้น

1. เริ่มต้นกับ ActionScript 3.0

เป็นที่รู้กันดีว่า ActionScript เป็นภาษาสคริปต์ที่ใช้งานร่วมกับโปรแกรม Flash CS ซึ่งปัจจุบันภาษาตัวนี้ก็ได้มีการพัฒนามาจนถึงเวอร์ชั่น 3 นั่นก็คือ ActionScript 3.0 ก่อนอื่นต้องตกลงก่อนว่าขอบเขตของเนื้อหาที่เราจะกล่าวถึงต่อไป จะเป็นเรื่องของหลักการ ActionScript 3.0 , API หลักๆ ของภาษา และก็ตัวอย่างการประยุกต์ ที่สำคัญคือ ผู้เขียนหวังว่าเมื่ออ่านเอกสารชุดนี้จบ ผู้อ่านจะสามารถนำความรู้ไปประยุกต์ใช้กับ Adobe Flash , Adobe Flex หรือจะเป็นเครื่องมือที่เป็นโอเพ่นซอร์ซอย่าง, Swftools, haXe

ActionScript ก็เหมือนกับการเขียนโปรแกรมภาษาอื่นๆ คือมีการเขียนโค๊ด คอมไพล์ ทดสอบโปรแกรม และแก้ไขข้อผิดพลาด หลายคนอาจจะเคยใช้โปรแกรม Flash CS จะเห็นว่ามีส่วนของการเขียนโค๊ดลงบน Keyframe ของ รหัสต้นฉบับไฟล์นามสกุล .fla ส่วนคนที่เคยใช้ Flex ก็คงจะเคยเขียน AcitonScript ลงใน แท็ก CDATA ในไฟล์ .mxml

สำหรับทั้ง Flash และ Flex มีความสามารถที่เหมือนกันคือสร้าง ActionScript Projectsได้ ซึ่งจะเห็นว่าเป็นผลดีสำหรับคนที่ศึกษา ActionScript เพราะศึกษาเพียงครั้งเดียวก็สามารถประยุกต์ใช้งานกับโปรแกรมหรือเครื่องมือตัวอื่นอย่างเช่น Flash Flex หรือ haXeได้ไม่ยาก ดังนั้นผู้เขียนจึงเน้นๆ เฉพาะ ActionScript ส่วนที่สามารถเข้ากันได้ของ Flash และ Flex

โครงสร้างพื้นฐานของ ActionScript

package{ //ประกาศ package ของชิ้นงาน (ปล่อยว่างเป็น defualt package)         import flash.display.*;                                                   public class Test extends MovieClip{//ประกาศ Class หลักของชิ้นงาน                 private var tf:TextField = new TextField();                 public function Test(){//ประกาศ Constructor                         tf.text = "Hello World"; //ส่วนของการทำงาน                         addChild(tf);//ส่วนของการทำงาน                 }         } }

จากโค๊ดข้างต้นทำการบันทึกไว้ในไฟลที่ชื่อ Test.as แล้วสั่งคอมไพล์ด้วย คำสั่ง

mxmlc Test.as

เพื่อให้ได้ไฟล์ชิ้นงาน Test.swf ออกมา หรือถ้าหากว่าผู้อ่านใช้ ซอฟต์แวร์ตัวอื่นคอมไพล์ คุณก็ต้องศึกษาการคอมไพล์ในวิธีการที่ซอฟต์แวร์ดังกล่าวกำหนดมา แต่ในที่นี้จะใช้ mxmlc ของ Flex SDK เป็นหลัก
จากนั้นให้ทำการเขียนไฟล์ Test.html เพื่อเปิดไฟล์ Test.swf อีกที

<object width="550" height="400">         <param name="movie" value="Test.swf">         <embed src="Test.swf" width="550" height="400">         </embed> </object>

ทำการบันทึกไว้ในชื่อ Test.html จากนั้นทำการเปิดขึ้นเพื่อดูผลลัพธ์
จะปรากฏข้อความ Hello World