Saturday, March 27, 2010

9. Operator part3 (Assignment)

ตัวดำเนินการกำหนดค่า หรือ Asisgnment Operator

มีอยู่สองแบบด้วยกัน คือ แบบกำหนดค่าอย่างเดียว และ แบบทำอย่างอื่นก่อนแล้วค่อยกำหนดค่า

สำหรับแบบกำหนดค่าอย่างเดียวคือ เครื่องหมาย

=

ที่เรารู้จักกันมาแสนนานนั่นแหล่ะครับใช้กำหนดค่าทางซ้ายให้เป็นเหมือนค่าทางขวา

หรืออาจจะเขียนเป็นรูปแบบเท่ห์ได้ดังนี้ครับ

expression1 = expression2;

ความหมายคือ ให้ ค่า expression1 เป็นตัวแปร แล้วโยนค่าข้อมูลจาก expression2 ให้ expression1 เพื่อให้ expression1 เก็บไว้เป็นที่ระลึกหรือเอาไปใช้ต่อไปนั่นเอง

ตัวอย่าาง

เช่น

var a:Number=0;

var b:Number=55;

a = b;

trace(a);

จะผลลัพธ์การทำงานจะแสดงค่า a คือ 55 ออกมา

 

var a:Number=0;

var b:Number=32;

a = b*2;

trace(a);

คือ 32คูณ2 เป็น 64 แล้วเก็บใน a ผลลัพธ์คือ 64

ซึ่งจากตัวอย่างข้ืางบนจะเป็นว่า ด้านซ้ายของ เครื่องหมายเ่ท่ากับจะต้องเป็น ตัวแปรเท่านั้น

จะเป็นอะไรแบบนี้ไม่ได้ครับ

a+2 = 10
a+b = c
2+3 = a

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

แต่อย่างไรก็ตามก็มีบางภาษาครับ ที่โยนจากซ้ายไปขวาได้ ก็ไม่ต้องไปใส่ใจเพราะไม่ใช่เรื่องของเรา

ย้ำ เครื่องหมาย = ไม่ใชการแก้สมการที่เรารู้จักในวิชาคณิตศาสตร์ ถ้าต้องการให้มันแก้เราจะต้องเขียนขั้นตอนวิธีการให้กับมันครับ

Tuesday, March 9, 2010

8. Operator part2 (Arithmetic)

Arithmetic Operator (ตัวดำเนินการที่เกี่ยวกับตัวเลข)


เครื่องหมายชื่อเรียกหน้าที่วิธีใช้
+
additionใช้บวกตัวเลขเอาตัวที่ต้องการบวกกันมาเชื่อมด้วยเครื่องหมายนี้ เช่น 3+4 (จะได้7)
-
subtractionใช้ลบเลขเอาตัวตั้งวางไว้หน้าเครื่องหมายนี้แล้วเอาตัวที่ต้องการลบออกวางไว้ข้างหลัง เช่น 55-2 (จะได้53)
*
multiplicationใช้คูณเลขเอาตัวที่ต้องการคูณกันมาเชื่อมด้วยเครื่องหมายนี้ เช่น 3*4 (จะได้12)
/
divisionใช้หารเลขเอาตัวตั้งวางไว้หน้าเครื่องหมายนี้แล้วเอาตัวที่ต้องการหารวางไว้ข้างหลัง เช่น 55/2 (จะได้27.5)
%
moduloใช้หารเอาเศษเอาตัวตั้งวางไว้หน้าเครื่องหมายนี้แล้วเอาตัวที่ต้องการหารวางไว้ข้างหลัง เช่น 55%2 (จะได้ 1)
++
incrementใช้เพิ่มค่าตัวแปรขึ้น1เอาตัวที่ต้องการเปลี่ยนแปลงค่าขึ้น1เชื่อมด้วยตัวนี้เช่น i++ หรือ ++i
--
decrementใช้ลดค่าตัวแปรขึ้น1เอาตัวที่ต้องการเปลี่ยนแปลงค่าลง1เชื่อมด้วยตัวนี้เช่น i-- หรือ --i

Note 1: i++ vs ++i ต่างกัน ดังนี้ครับ
1.1) i++ จะทำประโยคำสั่งนั้นก่อน ค่อยเพิ่มค่าขึ้น
เช่น
var i:uint=5;
trace(3*i++); //ผลลัพธ์คือ 15
1.2) ++i จะเพิ่มค่าขึ้นก่อนแล้วค่อยทำประโยคคำสั่งนั้นเช่น
var i:uint=5;
trace(3*++i); //ผลลัพธ์คือ 18
ส่วน i-- กับ --i ก็คล้ายกันครับ
Note 2: / vs % สองตัวเป็นตัวหารเหมือนกันแต่ / หารเอาผลลัพธ์ส่วน % หารเอาเศษ
เช่น
99/10 //ได้ 9.9
99%10 //ได้ 9
ตัวอย่างการใช้งาน / กับ %
45612
โดยใช้ arithmetic operator ให้คุณลองแยกหลักหน่วย หลักสิบ หลักร้อยออกมาครับ

เฉลย
หลักหน่วย หาได้โดย % ด้วย 10 คือ 45612%10 //จะได้ 2
หลักสิบ หาได้โดย / ด้วย 10 คือ 45612/10 จะได้ 4561.2 ตัดเศษทิ้งด้วย Math.floor(45612/10) จะได้ 4561 ทำการ % ด้วย 10 อีกทีก็จะได้ 1 ซึ่งก็คือหลักสิบนั่นเอง
สรุปเราจะได้คำสั่งสำหรับหาหลักสิบดังนี้
Math.floor(45612/10)%10 หรือ Math.floor(yourNumber/10)%10
ส่วนหลักร้อยก็คล้ายๆกันครับแต่ตอบ / ทีแรก / 100

บทนี้ได้กล่าวถึงตัวดำเนินการสำหรับกระทำกับตัวเลข แต่ว่ายังไม่ได้กล่าวถึงการเก็บข้อมูลเลย
จะพูดง่ายๆ คือ ดำเนินการเสร็จก็ยังไม่มีการเก็บข้อมูล ดังนั้นในบทต่อไปเราจะมาพูดถึงการเก็บข้อมูลในตัวแปรด้วยการกำหนดค่าด้วยเครื่องหมาย = หรือจะพูดเป็นภาษาอังกฤษว่า Assignment ติดตามตอนต่อไปน่ะครับ
:)

Wednesday, February 17, 2010

7. Operator Part1

โดยปกติในการเขียนโปรแกรมเราจะต้องมีการสั่งให้โปรแกรมดำเนินการโดยใช้เครื่องหมาย สัญลักษณ์ หรือฟังก์ชั่น ซึ่งในหัวข้อนี้เราจะมาว่ากันในเรื่องของ เครื่องหมายและการดำเนินการของเครื่องหมาย
แน่นอนคุณควรสงสัยเป็นอย่างยิ่งว่าใครถูกดำเนินการ ครับ ก็คือตัวถูกดำเนินการนั่นแหล่ะ หลายๆ คนอาจจะคุ้นๆ กับคำว่า Operator(ตัวดำเนินการ) กับ Operand(ตัวถูกดำเนินการ) ที่เค้าพูดเทห์ๆ ให้มือใหม่งงกันเล่นๆ
เรื่องของตัวดำเนินการนั้นมีอยู่ว่า ต้องมาคู่กับ ตัวถูกดำเนินการ รูปแบบประมาณนี้ครับ
operarand1 operator operand2
ตัวอย่างเช่น
3 + 2 ← จะพูดง่ายๆ มันก็กลายเป็นนิพจน์นั่นแหล่ะครับ
พูดกันง่ายๆ ตัวดำเนินการก็คือ ตัวที่จะนำเอาข้อมูล มาทำอะไรซักอย่าง ตามความหมายของตัวดำเนินการนั้่น อาจจะเป็นสัญลักษณ์ หรือ ฟังก์ชั่น หรืออะไรก็ได้
ต่อไปเราจะมาพูดถึง เรื่องของ ตัวดำเนินการประเภทต่างๆครับ
ซึ่งเนื้อหาก็จะนำมาจากหน้านี้ครับ
http://www.adobe.com/livedocs/flash/9.0/ActionScriptLangRefV3/operators.html
แต่อาจจะเพิ่มส่วนที่เป็นตัวอย่างเข้ามาครับ

Saturday, February 13, 2010

6. ตัวแปร

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

ถ้าจะเปรียบเทียบแล้ว ตัวแปร ก็เหมือนกระดาษที่เราใช้จดบันทึก และการจดบันทึกงานแต่ละงานต้องใช้กระดาษที่แตกต่างกันออกไป เช่นเดียวกับตัวแปรใน ActionScript ที่มีชนิดของข้อมูลให้เราเลือกใช้ตามความต้องการของแต่ละชิ้นงาน ซึ่งตัวแปรที่เราสามารถเรียกใช้ได้ใน ActionScript มีดังนี้

ชนิดของตัวแปร

หน้าที่

ตัวอย่างข้อมูล

Boolean

เก็บค่า บูลีน true/false

FALSE

int

เก็บค่าตัวเลขจำนวนเต็ม

-15

uint

เก็บค่าตัวเลขจำนวนเต็บบวก

99

Number

เก็บค่าตัวเลขเต็มบวก เต็มลบ รวมทั้งทศนิยม

3.15

String

เก็บค่าข้อความ

I'm Animatorizt”

Array

เก็บค่าตัวแปรหลายๆในชื่อเดียวกันแต่อินเดกซ์ต่างกัน

[1,3,7,5,3]

Object

เก็บค่าตำแหน่งอ้างอิงของตัวแปรต่างๆ

MyObject


ถ้าคุณคิดจะใช้ตัวแปรสิ่งแรกที่คุณควรจะทำนั่นก็คือการประกาศตัวแปร เพื่อให้ AVM จองพื้นที่ในหน่วยความจำให้คุณ ถึงแม้ในบางเวอร์ชั่นของ Flash IDE จะสามารถคอมไพล์ผ่านโดยไม่ต้องประกาศตัวแปร แต่เพื่อความเป็นระเบียบ และเพื่อที่จะได้อ่านโค๊ดง่ายคุณก็ควรจะประกาศตัวแปรเอาไว้

การประกาศตัวแปร

var variableName:dataType;

variableName เป็นชื่อของตัวแปรที่คุณต้องการประกาศ

dataType เป็นชนิดข้อมูลที่คุณต้องการ


ตัวอย่างการประกาศ

var A:Number;
//ประกาศตัวแปรชื่อ A ที่มีชนิดเป็น Number

var i:uint;//ประกาศตัวแปรชื่อ i ที่มีชนิดเป็น uint

var name:String;//ประกาศตัวแปรชื่อ str ที่มีชนิดเป็น String

และสุดท้ายครับ
แนะนำสำหรับผู้ที่อยากได้กระดาษรูปแบบต่างๆ
ที่อยากจะได้มาเขียนในงานต่างๆครับ
http://incompetech.com/graphpaper/

Friday, February 5, 2010

5. Convert Math to AS Expression

เมื่อคุณได้สมการที่สามารถคำนวณหาคำตอบของปัญหาของคุณได้แล้ว คุณจะต้องนำสมการที่ได้นั้นมาแปลงเป็นสมการที่ ActionScript จะเข้าใจ ดังนั้นในหัวข้อนี้เราจะพูดถึงการแปลงนิพจน์ทางคณิตศาสตร์เป็นนิพจน์ที่ตัวแปรภาษา ActionScript จะเข้าใจ เอาไปเลยครับ ตัวอย่าง
ตัวอย่างการแปลงนิพจน์ทางคณิตศาสตร์
คณิตศาสตร์(ออกภาษาพูดนิดๆ)ActionScript
A+BA+B;
C-DC-D;
E คูณ DE*D;
X หาร YX/Y;
sin A/sin BMath.sin(A)/Math.sin(B);
Log 2Log10(2);
103Math.pow(10,3);
รากที่สองของ 100Math.sqrt(100);

ปกติใน ActionScript เมื่อมีการเขียนนิพจน์ขึ้นเราจะต้องนำไปประมวลผลต่อในภายหลัง หรืออาจจะเก็บค่าไว้ ซึ่งการเก็บค่า ActionScript สามารถเขียนได้ดังนี้
C = A*B; ความหมายคือ สั่งให้ A*B จากนั้นเก็บค่าที่ได้ไว้ใน C โยนค่าจากขวาไปซ้าย

ในหัวข้อถัดไปเราจะเริ่มก้าวเข้าสู่ความเป็น ActionScriptWriter กันนะครับ....

Wednesday, February 3, 2010

How to use preFab and Away3D



I hope it useful for you.
หวังว่าคงเป็นประโยชน์น่ะครับ :)

Tuesday, February 2, 2010

4. Trigonometry and ActionScript

ตรีโกณมิติ หรือภาษาอังกฤษเค้าเรียกโก้ๆ ว่า Trigonometry ครับ ถึงแม้ว่าฟังก์ชันที่ทำงานทางด้านตรีโกณมิติ ActionScript จะมีมาให้แล้วใน คลาส Math แต่มันคงจะไม่เกิดประโยชน์อะไรถ้าหากคุณไม่รู้ที่มาแล้วความหมายของมัน และมาสามารถประยุกต์ใช้ได้
มาเริ่มเลยครับ ดูภาพข้างล่างนี้ครับ (ใช้โปรแกรม gimp วาดครับ สวยมั้ย)
รูปที่ 4.1

สมมุติว่ามันเป็นเกมนะครับ ไอ้วงกลมตรงกลาง เป็นศัตรู แล้ว ไอ้สามเหลียมเป็นตัวละครของผู้เล่นที่สามารถเคลื่อนที่ ขึ้น ลง ซ้าย ขวา ลักษณะของเกมคือ ศัตรูจะยิง อาวุธออกมาใส่ผูเล่น ถ้าผู้เล่นหลบทัน ก็ผ่านด่าน ถ้าผู้เล่นหลบไม่ทันก็จบเกม
ปัญหาคือ ทำยังไงจะให้ ศัตรูยิงตัวละครของผู้เล่นได้
(หลายคนตอบว่าคงเป็นไปยาก จะเป็นไปได้ไง อยากรู้อ่ะพี่ )

คำตอบของปัญหานี้ก็เราต้องใช้ความรู้ทางด้านตรีโกณมิติมาใช้ครับ
ก่อนที่จะไปถึงตรีโกณมิติเราจะต้อง ตอบได้ ว่า ....
เราจะหมุน ลำกล้องปืนของศัตรูไปกี่องศา
ทวนเข็มนาฬิกา หรือตามเข็มนาฬิกา
จากรูปที่ 4.1 จะเป็นว่าต้องหมุนตามเข็มนาฬิกาเป็นมุม theta องศา ใช่ไหมครับ
ถ้าเราหา theta ได้ ก็คือ เราจะรู้ว่าจะหมุนปืน ไปทางใด แล้วเราก็สามารถเขียนโปรแกรมให้ศัตรูยิงผู้เล่นได้อย่างเมามันแล้วล่ะครับ

ต่อไปมาว่าถึงเรื่องของ ตรีโกณมิติครับ
ในที่นี้เราจะพูดถึงตรีโกณมิติในแง่ที่ว่ามันเพียงฟังก์ชั่น ที่แทนค่าเข้าไปแล้วจะได้ค่าของฟังกั่นออกมา ส่วนรายละเอียดเกี่ยวกับ ตรีโกณมิติถ้าท่านชื่นชอบ ท่านสามารถสืบค้นได้จากเว็บอื่นๆ
รูปที่ 4.2

A,B,C คือ มุม
a,b,c คือ ความยาวของแตต่ละด้าน

รูปที่ 4.3


จากความรู้ข้างต้นเราก็จะสามารถหามุมได้โดยการวาดภาพก่อนครับดังนี้
รูปที่ 4.4

จากภาพบวกกับความรู้ที่สูตรที่ให้ในรูปที่ 4.3 เราก็จะตอบได้ว่า มุม theta ที่เราจะหมุนไปมีค่า
theta = atan(a/b)
แค่นี้ ส่วนสำหรับใครที่อยากเติมลูกเล่นวูปว๊าบ ก็คงต้องเขียนโค๊ดกันยาวหน่อย
แต่อย่างไรก็ตามในบางที่เมื่อเราไม่ทราบค่าความยาวของด้านสามเหลี่ยมเราก็สามารถหาได้โดยใช้ทฤษฎีปีทาโกรัสได้น่ะครับ อีกอย่างหนึ่งที่สำคัญก่อนจะจากกันไปวันนี้ครับ คือ : ในการเขียนโปรแกรมคอมพิวเตอร์เราจะใช้แค่บางส่วนของคณิตศาสตร์เท่านั้น ดังนั้นคณิตศาสตร์จึงจำเป็นสำหรับการเขียนโปรแกรมความพิวเตอร์ครับ (อันนี้ความคิดผมเอง)

Monday, February 1, 2010

haXe คืออะไร?

เนื่องจากมีการพูดถึง haXe ในหน้านี้ครับ
http://animatorizt.blogspot.com/2010/01/actionscript-30.html
ทำให้หลายคนเกิดความสงสัยว่า haXe คืออะไร ? นั่นดิมันคือตัวอะไร
Haxe เป็นซอฟต์แวร์ตัวหนึ่งที่สามารถสร้างไฟล์ .swf ให้เราได้ครับ ความสามารถก็ใกล้เขียนกับ Flex
Haxe เป็น open source อีกตัวที่น่าสนใจครับเพราะมีความสามารถค่อนข้างเยอะ อย่างเช่น
- สร้างไฟล์ .swf (อันนี้น่าสน)
- สร้างไฟล์ .js ที่เป็น จาวาสคริปต์ จาก .hx ของ haXe
- สร้างไฟล์ .php ด้วยการเขียน จาก haxe
- สร้างโค๊ด .as ของ ActionScript ให้เราได้ด้วยครับ
ฯลฯ
สรุปคือ haXe เป็นภาษาและซอฟต์แวร์อีกตัวครับ ที่สามารถทำ Flash ให้เราได้ และอีกหลายอย่างที่เราต้องการ จะว่าไปแล้วก็ดีเหมือนกันนะครับศึกษาแค่ haXe ตัวเดียวเราก็สามารถเขียนได้ ทั้ง ActionScript,JavaScript,PHP,CPP
http://haxe.org/doc/intro

ศึกษาเพิ่มเติมจากเอกสาร
http://haXe.org/doc

หนังสือจาก Amazon.com ลองดูเนื้อหาข้างในคร้บ

แจ๊กโค๊ดในหนังสือครับจากเว็บ haXe.org
http://haxe.org/file/Professional-haXe-and-Neko-code.zip
แต่ถ้าวันดีคืนดีเค้าลบไฟล์ออกก็ลองเข้าไปในเว็บ haxe.org

ผมลองใช้ดูแล้วไม่ต่างจาก Flex SDK เลยครับยกเว้นส่วนที่เป็น UI ลักษณะภาษาของ haxe มีความคล้ายคลึงกับ ActionScript ครับ ประยุกต้เข้าด้วยกันไม่ยาก ยกเว้นคุณจะใช้ haxe ใน platform อื่นๆ คุณก็จะต้องไปศึกษาความสามารถและขอบเขตการทำงานของ platform นั้นครับ
ดีๆ ครับ สนับสนุน
Keyword :
- haXe
- Neko
- Crossplatform
- haXe Programming

Sunday, January 31, 2010

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

Saturday, January 30, 2010

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

Followers