วันจันทร์ที่ 6 มิถุนายน พ.ศ. 2554

คาบที่ 17 หิมะตกซะแล้วสิ (2)

ครั้งที่แล้วยังไม่จบ มาต่อกันดีกว่า

1. การสร้างลูกกลมสีขาว ก่อนอื่น คุณเปิดโปรแกรมแฟลชขึ้นมา ให้เป็น as 3.0 มาที่ช่องใส่สคริป และกำหนดสคริปตามข้าพเจ้า ดังนี้

stop(); //เอาไว้หยุดเฟรมไว้ที่เฟรมที่ 1

var pick:MovieClip = new MovieClip(); //สร้างตัวแปรชื่อ pick ที่มีชนิดตัวแปรเป็นมูฟวี่คลิ๊ป ซึ่งเป็นการสร้างมูฟวี่คลิ๊ปขึ้นมาใหม่

pick.graphics.beginFill(0xff66ff); //pickนั้นใช้คำสั่งในหมวดกราฟฟิคซึ่งเป็นหมวดเฉพาะ เริ่มสร้างรูปร่าง กำหนดสีเป็นสี ชมพู
pick.graphics.drawCircle(50,50,10); //วาดวงกลม ตำแหน่ง x อยู่ที่ 50 pixel และ y = 50 pixel มีรัศมีออกจากจุดทั้ง 2 =10 pixel
pick.graphics.endFill(); //วาดเสร็จแล้ว

addChild(pick); //วางลงบนหน้าจอ

เอาล่ะครับ สำหรับคำสั่งที่เห็นนี้จะเป็นการวาดวงกลมสำหรับหิมะ ในคำสั่ง pick.graphics.beginfill ผมกำหนดสีให้เป็นชมพู เพราะพื้นมันขาวอยู่ ถ้าอยากเปลี่ยนสีอื่นก็ตามใจครับ รหัสสีดูได้จากเว็บสี หรืออาจจะเปิกโฟโต้ชอปดูก็ได้ โดยสีนั้น จะเป็นตัวเลขไม่ก็ตัวอักษร 6 ตัว ตามตำแหน่งดังภาพ

รหัสสีจากโปรแกรมแฟลช



รหัสสีจากโฟโต้ชอป



พอได้ทั้ง 6 ตัวแล้ว ในการกำหนดสี ให้เติม 0x ไว้ข้างหน้า เพื่อบอกเครื่องว่า นี่คือรหัสสีครับ

หลังจากนั้นก็สั่งให้สคริป วาดวงกลม และจบการวาด รวมถึง วางภาพที่วาดแล้วลงกระดานหรือ stage ครับ

ถ้าทำอย่างนี้แล้ว เราจะได้อะไรที่มีลักษณะหน้าตาแบบนี้


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

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

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

ปรกติ เมื่อจุด origin หรือจุดที่ x และ y มีค่าเท่ากับ 0 อยู่มุมบนซ้าย ในการกำหนดตำแหน่งในควอตร์ซแร้นทซ์นี้ หรือควอเตอร์นี้ ค่า x จะเป็น + และค่า y จะเป็น - แต่โปรแกรมแฟลชนั้น แม้จุด origin ของโปรแกรมจะอยู่บนซ้ายเช่นกัน แต่ค่า y จะถูกกำหนดให้เป็นบวก ซึ่งต่างจากการคำนวนคณิตศาสตร์ปรกติ


ดังนั้น ในโปรแกรมแฟลช ถ้าเคลื่อนที่ไปในแกน x จากซ้ายไปขวา ค่า x จะเพิ่มขึ้น
ถ้าเคลื่อนที่ในแกน y จากบนลงล่าง ค่า y จะเพิ่มขึ้น
ถ้าไปตรงกันข้าม เครื่องหมายก็ตรงกันข้าม

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

การกำหนดให้หิมะร่วงจึงกลายเป็น

pick.y += 2; //หมายถึง ตำแหน่งของตัวแปร pick ในทิศทาง y ไม่ว่าจะมีค่าเท่าไร ก็จะเพิ่มขึ้น +2

เพื่อความเข้าใจได้ง่ายๆ ก็จะขอสรุปความรู้ดังนี้

ถ้าวัตถุ มีค่า x เพิ่มขึ้น จะเคลื่อนที่จากซ้ายไปขวา
ถ้าวัตถุเคลื่อนที่ในแนว x มีค่า x ลดลง จะเคลื่อนที่จากขวาไปซ้าย
ถ้าวัตถุเคลื่อนที่ในแนว y มีค่า y เพิ่มขึ้น จะเคลื่อนที่จากบนลงล่าง
ถ้าวัตถุเคลื่อนที่ในแนว y มีค่า y ลดลง จะเคลื่อนที่จากล่างขึ้นบน

แล้วมาต่อกันคราวหน้านะครับ

วันพฤหัสบดีที่ 2 มิถุนายน พ.ศ. 2554

คาบที่ 16 หิมะตกซะแล้วสิ

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

STAGE 1 !!!!!!!!!! SNOW FALL !!!!!!!!!!!!

เป้าหมาย: ทำหิมะตก ด้านหน้า ส่วนพื้นหลัง จะไม่กำหนด ให้แต่ละคนหาภาพมาใส่เอง
แยกจุดประสงค์เป็นจุดประสงค์ย่อย:
1 หิมะตก
2 ตกด้านหน้าของภาพ

แยกจุดประสงค์ย่อยเป็นตัวแปรและการกระทำของตัวแปร
1 หิมะตก : 1.1 ใช้ลกกลมสีขาวเป็นตัวแทนหิมะ (หรือใครอาจจะใช้ภาพเกร็ดหิมะจากพี่กูเกิ้ลก็ได้)
การกระทำของหิมะ
1.1.1 ร่วงลงมาจากข้างบนจอถึงข้างล่างจอ
1.1.2 ไม่ได้ร่วงเป็นเส้นตรง แต่อาจปลิวไปมาตามแรงลมได้
1.1.3 เมื่อมาถึงพื้นก็หยุด
ได้ตัวแปรตาม :
1.2 พื้น
1.3 ลม
การกระทำของพื้น
1.2.1 อยู่เฉยๆ ด้านล่าง เมื่อหิมะลงมาโดนก็หยุด
การกระทำของลม
1.3.1 มองไม่เห็น แต่ส่งผลให้หิมะเคลื่อนที่ไม่ใช่เส้นตรงซะทีเดียว

2 ตกด้านหน้าภาพ : นำมาไว้ที่เลเยอร์หรือมูฟวี่คลิ้ปที่หิมะตกไว้หน้าสุด

โอเค ดังนั้นเราได้สิ่งที่เราต้องทำทั้งหมดแล้ว แต่อาจเพิ่มได้ทีหลังถ้าเรามองข้ามอะไรไป เอาล่ะ มาสรุปสิ่งที่ต้องลงมือทำเลยดีกว่า

1.1 ใช้ลกกลมสีขาวเป็นตัวแทนหิมะ โดย ต้องร่วงลงมาจากข้างบนจอถึงข้างล่างจอ ไม่ได้ร่วงเป็นเส้นตรง แต่อาจปลิวไปมาตามแรงลมได้ และ เมื่อมาถึงพื้นก็หยุด
1.2 พื้น โดย อยู่เฉยๆ ด้านล่าง เมื่อหิมะลงมาโดนก็หยุด
1.3 ลม โดย >>>มองไม่เห็น<<< แต่ส่งผลให้หิมะเคลื่อนที่ไม่ใช่เส้นตรงซะทีเดียว

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

ทำเสร็จไปแล้ว 50 % ครับผม ง่ายมะ
เราได้สิ่งที่จะทำแล้ว บทหน้า ผมจะเริ่มการทำงานตามแผนงานที่เราวางไว้นะครับ

คาบที่15 สรุปความเข้าใจ

เอาล่ะ ไม่คิดเหมือนกันว่าจะมาถึงคาบที่ 15 ได้ เอาเถอะ งั้นมาสรุปใจความกันหน่อยดีกว่า กันลืม

ก่อนอื่นถามนิด ยังมั่นใจที่อยากจะเรียนแฟลชกันอยู่ไหม ถ้าไม่แล้วกรุณาปิดหน้านี้ไปเลยครับ

........

........

...........

....

โอเค ถือว่ายังอยากรู้ต่อนะ

เรามาเริ่มกันที่ความรู้ความเข้าใจที่ผ่านมากันเลยดีกว่า

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

การเขียนสคริปแฟลช (แอคชั่นสคริป)

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

คำสั่งที่ใช้ในแอคชั่นสคริป 3.0 ที่ใช้มาก และควรศึกษาเพิ่มเติม

stop();
var;
function();
addEventListener();
gotoAndStop();
if();

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

จากนี้ จะเป็นภาคประยุกต์แล้ว หวังว่าท่านที่อยากทำความเข้าใจ ก็ต้องไปหาอ่านเพิ่มเติมด้วยนะครับ เจอกันครั้งหน้าครับ