โทษทีครับ นึกว่าไม่มีคนดูผมก็เลยปล่อยผ่านบล็อคนี้ เผลอมาดูอีกที มีผู้ติดตามซะ 5 คน
งั้นผมจะมาเขียนต่อละกันครับ
แล้วจะเอางานจากประสบการณ์มาสอนด้วย
น่าจะประมาณ เมษา ผมน่าจะว่างมาอัพต่อครับ
วันศุกร์ที่ 9 มีนาคม พ.ศ. 2555
วันจันทร์ที่ 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 ลดลง จะเคลื่อนที่จากล่างขึ้นบน
แล้วมาต่อกันคราวหน้านะครับ
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 % ครับผม ง่ายมะ
เราได้สิ่งที่จะทำแล้ว บทหน้า ผมจะเริ่มการทำงานตามแผนงานที่เราวางไว้นะครับ
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 และผมจะยกมาตอบในแต่ละกรณีกันเลย
จากนี้ จะเป็นภาคประยุกต์แล้ว หวังว่าท่านที่อยากทำความเข้าใจ ก็ต้องไปหาอ่านเพิ่มเติมด้วยนะครับ เจอกันครั้งหน้าครับ
ก่อนอื่นถามนิด ยังมั่นใจที่อยากจะเรียนแฟลชกันอยู่ไหม ถ้าไม่แล้วกรุณาปิดหน้านี้ไปเลยครับ
........
........
...........
....
โอเค ถือว่ายังอยากรู้ต่อนะ
เรามาเริ่มกันที่ความรู้ความเข้าใจที่ผ่านมากันเลยดีกว่า
แฟลชนั้น คือ โปรแกรมที่สามารถ ทำภาพเคลื่อนไหวได้ ดังนั้น เมื่อทำได้ เราจึงสามารถทำอะไรต่อมิอะไรได้หลายอย่าง ทั้งเกม สื่อกรสอน อนิเมชั่น 2D จริงๆ แล้ว 3D ก็เริ่มมีเข้ามาแล้วด้วย ดังนั้น ถ้าคิดจะรู้แฟลชไว้ไม่เสียหาย หลายท่านอาจสงสัยทำไมผมปูพื้นฐานแบบฐานมากๆ หรือบางคนอาจไม่เข้าใจเลย แต่พอเรียนรู้ไป แล้วเข้าใจก็มี ทั้งนี้ ทำก็เพื่อวัดความตั้งใจของคุณๆครับ ว่าเอาจริงไหม เพราะต่อจากนี้ จะเป็นก้าวกระโดดของการให้ความรู้แฟลช เช่นการประยุกต์ใช้ฟังก์ชั่น หรือแม้กระทั่ง การสร้างงานจากความว่างเปล่าหรือจินตนาการ ซึ่งมันนับว่าเลเวลที่ค่อนข้างสูงพอสมควร ใช้ความพยายามเข้าใจสูง แต่ถ้าทำได้ มันก็จะมีประโยชน์มากในการทำภาพเคลื่อนไหวด้วยแฟลชนี้
การเขียนสคริปแฟลช (แอคชั่นสคริป)
การเขียนสคริปแฟลชนั้น นั่นคือ "การสร้างตัวแปร และกำหนดค่าตัวแปรให้รัดกุม โดยสอดคล้องกับเหตุการณ์" และอย่างที่ผมปูพื้นฐานไป ทั้งเรื่องตัวแปร การกำหนดค่ตัวแปร ทั้งยังมีการลองใช้คำสั่งเบื้องต้น รวมถึงยังมีการจำลองและลองเล่นกับเหตุการณ์ด้วย เหล่านี้เป็นองค์ประกอบที่สำคัญของแฟลชโดยแท้
คำสั่งที่ใช้ในแอคชั่นสคริป 3.0 ที่ใช้มาก และควรศึกษาเพิ่มเติม
stop();
var;
function();
addEventListener();
gotoAndStop();
if();
6 ตัวนี้จะพบว่ามีการใช้งานบ่อยมาก แน่นอน อาจมีเพิ่มเติมจากนี้ แต่ถ้าเรารู้การใช้งานสคริปเหล่านี้ เราก็ทำงานได้แทบจะครอบจักรวาลแล้วล่ะ อาจมีสคริปอื่นที่สามารถย่นการเขียนสคริปให้ั่สั้นลงได้ ซึ่งเราจะศึกษาเป็นกรณีไป เพราะต่อจากนี้ จะเป็นการยกปัญหาที่มีคนถามมาจริงๆ จากบอร์ด TFD และผมจะยกมาตอบในแต่ละกรณีกันเลย
จากนี้ จะเป็นภาคประยุกต์แล้ว หวังว่าท่านที่อยากทำความเข้าใจ ก็ต้องไปหาอ่านเพิ่มเติมด้วยนะครับ เจอกันครั้งหน้าครับ
วันพุธที่ 18 พฤษภาคม พ.ศ. 2554
คาบที่ 14 ตัวแปร และ ฟังก์ชั่น
วันก่อน ผมไปเจออะไรน่าสนใจที่เกี่ยวข้องกับการทำงานของฟังก์ชั่นและตัวแปร จากเว็บ TFD
นั่นคือ การสร้างตัวแปรภายในและภายนอกฟังก์ชั่น มันต่างกันอย่างไร
var pick:int = 20;
function pock(){
gotoAndStop(pick);
}
pock();
และ
function pock(){
var pick:int = 20;
gotoAndStop(pick);
}
pock();
สองชุดสคริปนี้ต่างกันอย่างไร
- ถ้าให้สคริปทั้งสองทำงาน ในกรณีนี้ การทำงานของทั้งคู่จะไม่มีความแตกต่าง นั่นคือ จะไปหยุดที่เฟรมที่ 20
แต่ความจริงแล้วมีความแตกต่างกันอย่างเห็นได้ชัด นั่นคือ
ถ้าลองใส่คำสั่ง
trace(pick);
ลงไปแล้วลองแสดง คุณจะเห็นความแตกต่าง นั่นคือ ค่าในสคริปแรก จะได้เท่ากับ 20 และสคริปที่ 2 จะได้เท่ากับ error
อ้าว error ได้ไง
ได้ครับ เพราะตัวแปรที่สร้างในฟังก์ชั่นหรือสร้างในคำสั่งนั้น จะไม่สามารถเรียกได้จากภายนอก แต่สามารถเรียกได้เฉพาะภายในคำสั่งนั้นเท่านั้น
เช่น
function pick(){
var p:int = 10;
trace(p);
}
pick();
trace(p);
ในที่นี้จะมีการ trace 2 ครั้ง ครั้งแรกในฟังก์ชั่น และครั้งที่ 2 นอกฟังก์ชั่น เมื่อทำการแสดงในโปรแกรม ค่าที่ออกมาที่ output จะ error จาก trace ภายนอก เพราะตัวแปร p สร้างขึ้นในฟังก์ชั่น การเรียกถามตัวแปรนอกฟังก์ชั่นไม่สามารถทำได้ เพราะถ้าการทำงานของฟังกชั่นจบลงแล้ว ตัวแปรนั้นก็จะถูกโปรแกรมเคลียร์ไป (เขาว่ากันแบบนั้นนะ) แต่ถ้าคุณลบ trace(p); ที่อยู่ข้างนอกฟังก์ชั่นออกไป โปรแกรมก็จะทำงานเป็นปรกติ
ของพวกนี้รู้ไปเพื่ออะไร
แน่นอนครับว่า ทุกความรู้ต้องมีประโยชน์ ดังนั้น เมื่อคุณต้องการเขียนงานแฟลชอะไรสักอย่าง คุณต้องวางแผนให้ดี ถ้าตัวแปรที่คุณสร้าง ต้องโยงการทำงานระหว่างฟังก์ชั่นโน้นฟังก์ชั่นนี้ คุณต้องสร้างตัวแปรไว้นอกฟังก์ชั่น เท่านั้นแหละครับ สาระสำคัญ
สรุป
จะสร้างตัวแปรต้องคิดถึงการใช้ด้วย ถ้ามีหลายจุดต้องอ้างอิงตัวแปรนี้ คุณต้องสร้างตัวแปรไว้นอกฟังก์ชั่น
คาบนี้แค่นี้ คาบหน้าเจอกันใหม่ครับ
นั่นคือ การสร้างตัวแปรภายในและภายนอกฟังก์ชั่น มันต่างกันอย่างไร
var pick:int = 20;
function pock(){
gotoAndStop(pick);
}
pock();
และ
function pock(){
var pick:int = 20;
gotoAndStop(pick);
}
pock();
สองชุดสคริปนี้ต่างกันอย่างไร
- ถ้าให้สคริปทั้งสองทำงาน ในกรณีนี้ การทำงานของทั้งคู่จะไม่มีความแตกต่าง นั่นคือ จะไปหยุดที่เฟรมที่ 20
แต่ความจริงแล้วมีความแตกต่างกันอย่างเห็นได้ชัด นั่นคือ
ถ้าลองใส่คำสั่ง
trace(pick);
ลงไปแล้วลองแสดง คุณจะเห็นความแตกต่าง นั่นคือ ค่าในสคริปแรก จะได้เท่ากับ 20 และสคริปที่ 2 จะได้เท่ากับ error
อ้าว error ได้ไง
ได้ครับ เพราะตัวแปรที่สร้างในฟังก์ชั่นหรือสร้างในคำสั่งนั้น จะไม่สามารถเรียกได้จากภายนอก แต่สามารถเรียกได้เฉพาะภายในคำสั่งนั้นเท่านั้น
เช่น
function pick(){
var p:int = 10;
trace(p);
}
pick();
trace(p);
ในที่นี้จะมีการ trace 2 ครั้ง ครั้งแรกในฟังก์ชั่น และครั้งที่ 2 นอกฟังก์ชั่น เมื่อทำการแสดงในโปรแกรม ค่าที่ออกมาที่ output จะ error จาก trace ภายนอก เพราะตัวแปร p สร้างขึ้นในฟังก์ชั่น การเรียกถามตัวแปรนอกฟังก์ชั่นไม่สามารถทำได้ เพราะถ้าการทำงานของฟังกชั่นจบลงแล้ว ตัวแปรนั้นก็จะถูกโปรแกรมเคลียร์ไป (เขาว่ากันแบบนั้นนะ) แต่ถ้าคุณลบ trace(p); ที่อยู่ข้างนอกฟังก์ชั่นออกไป โปรแกรมก็จะทำงานเป็นปรกติ
ของพวกนี้รู้ไปเพื่ออะไร
แน่นอนครับว่า ทุกความรู้ต้องมีประโยชน์ ดังนั้น เมื่อคุณต้องการเขียนงานแฟลชอะไรสักอย่าง คุณต้องวางแผนให้ดี ถ้าตัวแปรที่คุณสร้าง ต้องโยงการทำงานระหว่างฟังก์ชั่นโน้นฟังก์ชั่นนี้ คุณต้องสร้างตัวแปรไว้นอกฟังก์ชั่น เท่านั้นแหละครับ สาระสำคัญ
สรุป
จะสร้างตัวแปรต้องคิดถึงการใช้ด้วย ถ้ามีหลายจุดต้องอ้างอิงตัวแปรนี้ คุณต้องสร้างตัวแปรไว้นอกฟังก์ชั่น
คาบนี้แค่นี้ คาบหน้าเจอกันใหม่ครับ
วันอาทิตย์ที่ 8 พฤษภาคม พ.ศ. 2554
คาบที่ 13 การใช้งานจริงของสคริปอย่างง่ายๆ
เอาล่ะนะ คาบนี้จะเริ่มการทำงานสนุกๆกัน ผมได้สคริปของ AS3 มาชุดหนึ่ง ดังนั้น ลองมาดูสคริปทำงานของจริงกันดีกว่า
var pick:Sprite = new Sprite();
pick.graphics.beginFill(0x009900);
pick.graphics.drawCircle(50,50,20);
pick.graphics.endFill();
addChild(pick);
pick.addEventListener(MouseEvent.MOUSE_DOWN, pick01);
pick.addEventListener(MouseEvent.MOUSE_UP, pick02);
function pick01 (MouseEvent):void{
startDrag();
}
function pick02 (MouseEvent):void{
stopDrag();
}
และเมื่อคุณกดให้มันแสดงผลงาน ผลที่ได้คือ
กดที่ลูกเขียวแล้วลองลากไปมาดูครับ
กด
เอาล่ะเราจะมาวิเคราะห์สคริปกันเลย
var pick:Sprite = new Sprite();
อันนี้เคยสอนไปแล้วนะ สร้างตัวแปรชื่อ pick มีชนิดตัวแปรเป็นภาพวาด(กราฟฟิค ซิมโบล) เมื่อเป็น มูฟวี่คลิ๊ป ปุ่ม หรือสไปร์ค ให้ new เมื่อสร้าง
บรรทัดต่อมาจะเป็นชุด คือ
pick.graphics.beginFill(0x009900);
pick.graphics.drawCircle(50,50,20);
pick.graphics.endFill();
ในการวาดภาพโดยใช้สคริปนั้น จะมีคำสั่งที่ใช้อยู่คือ
beginFill และ endFill(); ซึ่งคำสั่งทั้ง 2 นี้จะถูกจัดอยู่ในหัวข้อ graphics ดังนั้น ถ้าจะเรียกคำสั่งทั้งคู่ ก็ต้องอยู่ภายใต้คำสั่งของหมวด graphics และเพราะคำสั่งชุุดนี้คือการสร้างวงกลมใน symbol pick เมื่อมีคำว่า สร้างใน เราจึงต้องเติมหน้ามันด้วย pick. ตลอด
ในbeginFill เราสามารถกำหนดสีได้ด้วย แต่ต้องเป็นเลขฐาน 16 ซึ่งเราเปิดหาดูรหัสสีได้ในเน็ตทั่วไป พวก 00ffff aabbcc อะไรพวกนี้แหละ แถมยังกำหนดความเข้มจางได้ด้วย แต่เราไม่ลงลึก เพราะเรายังเลเวลน้อยอยู่ เอาเป็นว่า การสร้างภาพขึ้นมา เราจำต้องเปิดประเด็นการวาดภาพด้วยคำสั่ง beginFill และเมื่อวาดภาพเสร็จก็ให้จบด้วย endFill ส่วน คำสั่ง drawCircle นั้น คือการวาดวงกลม ทั้งนี้ยังมี drawRect สำหรับวาดสี่เหลื่ยม และวาดอื่นๆ อีก ในคำสั่งวาดวงกลม จะมีตัวเลขอยู่ 3 ชุดที่กำหนดค่าการสร้างวงกลม ตัวแรกคือตำแหน่งที่จะลงจุดศูนย์กลางของวงกลมในแนว x ตัวที่ 2 คือ ตำแหน่งที่จะลงจุดศูนย์กลางของวงกลมในแนว y และตัวที่ 3 คือรัศมีของวงกลม
เราสร้างวงกลมเสร็จ แต่วงกลมอยู่ตรงไหนเราก็ไม่รู้ รู้แค่สร้าง ถ้าจะเรียกมันให้แสดงที่หน้าจอก็
addChild(pick); เหมือนการลากจาก ไลบราลี่ลงสเตจนั่นแหละคำสั่งนี้
ต่อจากนี้ เราจะมาเจอกับคำสั่งที่เราเคยเรียนกันไปบ้างแล้ว
pick.addEventListener(MouseEvent.MOUSE_DOWN, pick01);
pick.addEventListener(MouseEvent.MOUSE_UP, pick02);
function pick01 (MouseEvent):void{
startDrag();
}
function pick02 (MouseEvent):void{
stopDrag();
}
ในที่นี้ มีการสร้างคำสั่งขึ้น นั่นคือ function ชื่อ (){} จะเห็นได้ว่ามีการสร้างคำสั่ง 2 คำสั่งคือ pick01 และ pick02 คำสั่งนั้น ในช่องวงเล็บ เพราะเหตุการณ์มันเกี่ยวกับเม้าส์ พูดง่ายๆ ยกอีเว้นท์ลงมาใส่นั่นแหละ แต่ไม่ต้องลึกถึงเหตุการณ์ย่อย ส่วน void ไม่ต้องจำ ใส่ตามไปเลยครับ ไม่ต้องเข้าใจด้วย
โอ้ addEventListener(); จะต้องพูดถึงไหมเนี่ย อืม สักนิดนะ เหตุการณ์ที่เกิดขึ้นกับตัวแฟลช ให้เราลองจินตนาการนิดนึงว่าเราเป็นโปรแกรมแฟลชเวลาคนเขียนคำสั่ง เราต้องรู้อะไรบ้าง คิดตามนะ ช้าๆ เมื่อมีคนมากดเม้าส์ลงบนวงกลมเขียวที่สร้างไว้ คำสั่ง pick01 จงทำงาน นั่นคือคำสั่งบรรทัดแรกในช่วงนี้
กดเม้าส์ลงบนลูกกลมเขียว ดังนั้น ลูกกลมเขียวคือตัวแปรที่ถูกกระทำ จึงต้องเอาเขาไปไว้หน้า addEventListener เลย เหตุการณ์ก็อย่างที่บอก กดเม้าส์ กดเม้าส์ ไม่ใช่ CLICK เพราะ CLICK คือกดแล้วปล่อย มันมีอีกเยอะ MOUSE_OVER = เม้าส์อยู่บนลูกกลมเขียว ไม่ใช่นะ เราต้องกดก่อนสิถึงจะทำงาน ในที่นี้จึงใส่ MOUSE_DOWN แทนเหตุการณ์ย่อย ที่เหลือก็ตามที่สอนในบทที่แล้วชื่อคำสั่งที่ต้องการเรียกให้ทำงานนั่นเอง
MOUSE_UP ก็ตรงกันข้ามครับ ที่เพิ่มเข้ามานอกเหนือจากที่เคยสอนก็คือ
startDrag();
stopDrag();
ที่ทำหน้าที่ตามชื่อของมัน เริ่มขยับตามเม้าส์ และหยุดขยับตามเม้าส์
ถาม ถ้าคุณใช้คำสั่งกับลูกกลมเขียวเลย จะเกิดอะไรขึ้น
pick.startDrag();
ตอบ เมื่อคุณ C+E เม้าส์ขยับไปทางไหน pick ก็จะไปทางนั้น แต่ไปพร้อมกันเลยนะ ไม่ใช่ว่าอยู่ตรงตำแหน่งเม้าส์ เช่นเม้าส์คุณอยู่ห่างจากลูกกลมเขียว 13 ซม เมื่อคุณขยับเม้าส์ เจ้าลูกกลมเขียวก็จะรักษาระยะห่าง 13 ซม ไว้ตลอดครับ
สรุปครับ
สำหรับการใช้งานสคริปนั้น สิ่งสำคัญก็คงหนีไม่พ้นการมีตัวแปรและคำสั่ง จะเห็นได้ว่า สคริปส่วนใหญ่มักจะทำการประกาศตัวแปรไว้อันดับต้นๆ ตามาด้วย คำสั่งต่างๆ ซึ่งในแฟลชก็มีคำสั่งที่ยังไม่รู้อีกมาก หรือใช้งานได้น้อยโอกาสอีกมาก ดังนั้น ขอจงจำรูปแบบการทำงานไว้ก็พอ รวมถึงรู้ว่าเป้าหมายของเราคืออะไร โดยมองจากโปรแกรมเป็นหลัก เท่านี้ คุณก็จะสามารถใช้งานแฟลชได้อย่างง่ายดายแล้วล่ะ
var pick:Sprite = new Sprite();
pick.graphics.beginFill(0x009900);
pick.graphics.drawCircle(50,50,20);
pick.graphics.endFill();
addChild(pick);
pick.addEventListener(MouseEvent.MOUSE_DOWN, pick01);
pick.addEventListener(MouseEvent.MOUSE_UP, pick02);
function pick01 (MouseEvent):void{
startDrag();
}
function pick02 (MouseEvent):void{
stopDrag();
}
และเมื่อคุณกดให้มันแสดงผลงาน ผลที่ได้คือ
กดที่ลูกเขียวแล้วลองลากไปมาดูครับ
กด
เอาล่ะเราจะมาวิเคราะห์สคริปกันเลย
var pick:Sprite = new Sprite();
อันนี้เคยสอนไปแล้วนะ สร้างตัวแปรชื่อ pick มีชนิดตัวแปรเป็นภาพวาด(กราฟฟิค ซิมโบล) เมื่อเป็น มูฟวี่คลิ๊ป ปุ่ม หรือสไปร์ค ให้ new เมื่อสร้าง
บรรทัดต่อมาจะเป็นชุด คือ
pick.graphics.beginFill(0x009900);
pick.graphics.drawCircle(50,50,20);
pick.graphics.endFill();
ในการวาดภาพโดยใช้สคริปนั้น จะมีคำสั่งที่ใช้อยู่คือ
beginFill และ endFill(); ซึ่งคำสั่งทั้ง 2 นี้จะถูกจัดอยู่ในหัวข้อ graphics ดังนั้น ถ้าจะเรียกคำสั่งทั้งคู่ ก็ต้องอยู่ภายใต้คำสั่งของหมวด graphics และเพราะคำสั่งชุุดนี้คือการสร้างวงกลมใน symbol pick เมื่อมีคำว่า สร้างใน เราจึงต้องเติมหน้ามันด้วย pick. ตลอด
ในbeginFill เราสามารถกำหนดสีได้ด้วย แต่ต้องเป็นเลขฐาน 16 ซึ่งเราเปิดหาดูรหัสสีได้ในเน็ตทั่วไป พวก 00ffff aabbcc อะไรพวกนี้แหละ แถมยังกำหนดความเข้มจางได้ด้วย แต่เราไม่ลงลึก เพราะเรายังเลเวลน้อยอยู่ เอาเป็นว่า การสร้างภาพขึ้นมา เราจำต้องเปิดประเด็นการวาดภาพด้วยคำสั่ง beginFill และเมื่อวาดภาพเสร็จก็ให้จบด้วย endFill ส่วน คำสั่ง drawCircle นั้น คือการวาดวงกลม ทั้งนี้ยังมี drawRect สำหรับวาดสี่เหลื่ยม และวาดอื่นๆ อีก ในคำสั่งวาดวงกลม จะมีตัวเลขอยู่ 3 ชุดที่กำหนดค่าการสร้างวงกลม ตัวแรกคือตำแหน่งที่จะลงจุดศูนย์กลางของวงกลมในแนว x ตัวที่ 2 คือ ตำแหน่งที่จะลงจุดศูนย์กลางของวงกลมในแนว y และตัวที่ 3 คือรัศมีของวงกลม
เราสร้างวงกลมเสร็จ แต่วงกลมอยู่ตรงไหนเราก็ไม่รู้ รู้แค่สร้าง ถ้าจะเรียกมันให้แสดงที่หน้าจอก็
addChild(pick); เหมือนการลากจาก ไลบราลี่ลงสเตจนั่นแหละคำสั่งนี้
ต่อจากนี้ เราจะมาเจอกับคำสั่งที่เราเคยเรียนกันไปบ้างแล้ว
pick.addEventListener(MouseEvent.MOUSE_DOWN, pick01);
pick.addEventListener(MouseEvent.MOUSE_UP, pick02);
function pick01 (MouseEvent):void{
startDrag();
}
function pick02 (MouseEvent):void{
stopDrag();
}
ในที่นี้ มีการสร้างคำสั่งขึ้น นั่นคือ function ชื่อ (){} จะเห็นได้ว่ามีการสร้างคำสั่ง 2 คำสั่งคือ pick01 และ pick02 คำสั่งนั้น ในช่องวงเล็บ เพราะเหตุการณ์มันเกี่ยวกับเม้าส์ พูดง่ายๆ ยกอีเว้นท์ลงมาใส่นั่นแหละ แต่ไม่ต้องลึกถึงเหตุการณ์ย่อย ส่วน void ไม่ต้องจำ ใส่ตามไปเลยครับ ไม่ต้องเข้าใจด้วย
โอ้ addEventListener(); จะต้องพูดถึงไหมเนี่ย อืม สักนิดนะ เหตุการณ์ที่เกิดขึ้นกับตัวแฟลช ให้เราลองจินตนาการนิดนึงว่าเราเป็นโปรแกรมแฟลชเวลาคนเขียนคำสั่ง เราต้องรู้อะไรบ้าง คิดตามนะ ช้าๆ เมื่อมีคนมากดเม้าส์ลงบนวงกลมเขียวที่สร้างไว้ คำสั่ง pick01 จงทำงาน นั่นคือคำสั่งบรรทัดแรกในช่วงนี้
กดเม้าส์ลงบนลูกกลมเขียว ดังนั้น ลูกกลมเขียวคือตัวแปรที่ถูกกระทำ จึงต้องเอาเขาไปไว้หน้า addEventListener เลย เหตุการณ์ก็อย่างที่บอก กดเม้าส์ กดเม้าส์ ไม่ใช่ CLICK เพราะ CLICK คือกดแล้วปล่อย มันมีอีกเยอะ MOUSE_OVER = เม้าส์อยู่บนลูกกลมเขียว ไม่ใช่นะ เราต้องกดก่อนสิถึงจะทำงาน ในที่นี้จึงใส่ MOUSE_DOWN แทนเหตุการณ์ย่อย ที่เหลือก็ตามที่สอนในบทที่แล้วชื่อคำสั่งที่ต้องการเรียกให้ทำงานนั่นเอง
MOUSE_UP ก็ตรงกันข้ามครับ ที่เพิ่มเข้ามานอกเหนือจากที่เคยสอนก็คือ
startDrag();
stopDrag();
ที่ทำหน้าที่ตามชื่อของมัน เริ่มขยับตามเม้าส์ และหยุดขยับตามเม้าส์
ถาม ถ้าคุณใช้คำสั่งกับลูกกลมเขียวเลย จะเกิดอะไรขึ้น
pick.startDrag();
ตอบ เมื่อคุณ C+E เม้าส์ขยับไปทางไหน pick ก็จะไปทางนั้น แต่ไปพร้อมกันเลยนะ ไม่ใช่ว่าอยู่ตรงตำแหน่งเม้าส์ เช่นเม้าส์คุณอยู่ห่างจากลูกกลมเขียว 13 ซม เมื่อคุณขยับเม้าส์ เจ้าลูกกลมเขียวก็จะรักษาระยะห่าง 13 ซม ไว้ตลอดครับ
สรุปครับ
สำหรับการใช้งานสคริปนั้น สิ่งสำคัญก็คงหนีไม่พ้นการมีตัวแปรและคำสั่ง จะเห็นได้ว่า สคริปส่วนใหญ่มักจะทำการประกาศตัวแปรไว้อันดับต้นๆ ตามาด้วย คำสั่งต่างๆ ซึ่งในแฟลชก็มีคำสั่งที่ยังไม่รู้อีกมาก หรือใช้งานได้น้อยโอกาสอีกมาก ดังนั้น ขอจงจำรูปแบบการทำงานไว้ก็พอ รวมถึงรู้ว่าเป้าหมายของเราคืออะไร โดยมองจากโปรแกรมเป็นหลัก เท่านี้ คุณก็จะสามารถใช้งานแฟลชได้อย่างง่ายดายแล้วล่ะ
วันเสาร์ที่ 7 พฤษภาคม พ.ศ. 2554
คาบที่ 12 การเรียกใช้คำสั่งโดยใช้เหตุการณ์
การเรียกใช้คำสั่งนั้น ก็อย่างที่บอกไปแล้ว คุณก็แค่ เรียกไปที่ชื่อคำสั่ง ตามด้วย ();
แต่ถ้าเราต้องการการทำงานที่โต้ตอบกับการกระทำของผู้ใช้ล่ะ
การโต้ตอบการกระทำของผู้ใช้ นั่นคือ เมื่อผู้ใช้ใช้งานทำกิจกรรมอะไรบางอย่าง ตัวงานที่เราทำก็จะตอบรับอย่างเป็นระบบ เช่น
ผู้ชายคนหนึ่งเมาเหล้าและต่อยเมีย(ต่อยเมียคือกิจกรรมหรือเหตุการณ์ที่ทำ) ผลก็คือ วันรุ่งขึ้นเขานอนอยู่โรงพยาบาลหยอดน้ำข้าวต้ม (ผลของกิจกรรม) รูปแบบมันก็มีเช่นนี้แหละ เป็นรูปแบบที่เราต้องกำหนดไว้ แปลง่ายๆคือ ถ้ามีการกระทำ ก็ต้องมีผลตามมา
เพียงแต่เราต้องเป็นคนกำหนดเหตุการณ์ และกำหนดผลที่ตามมา
ในงานที่คุณจะสร้างมันขึ้น ถ้าคุณกดปุ่มลง ตัวละครของคุณจะย่อเข่าลง ถ้ากดขึ้น ตัวละครก็จะกระโดด ไอ้ที่คุณกดปุ่มต่างๆเหล่านี้คือการเกิดเหตุการณ์(กิจกรรม)ทั้งสิ้น เราเรียกเหตุการณ์เหล่านี้ว่า Event
เอาล่ะ เจ้าEvent หรือเหตุการณ์เนี่ย พูดถึงมันก็คือสิ่งที่จะเกิดกับงานแฟลชที่เราสร้าง โชคดีที่คนสร้างแฟลชนั้น คิดเผื่อพวกเราไว้แล้วว่า มันจะมีเหตุการณ์อะไรเกิดขึ้นได้บ้าง ดังนั้น เราจึงมีคำสั่งสำเร็จรูปไว้ใช้ได้เลย นั่นคือ
addEventListener();
โอ้ว ตัวเนี้ยแหละสำคัญ ว่าแต่ เราจะใช้งานมันยังไงล่ะ ง่ายๆ เมื่อเราจะเรียกใช้คำสั่งอะไร ก็ให้เอาคำสั่งนั้น ยัดลงไปในคำสั่งนี้ งงล่ะสิ ค่อยๆไปละกันนะ การทำงานของแฟลชมันก็แบบนี้ละ เอาตัวแปร มาซ้อนตัวแปร เอาคำสั่งมาซ้อนคำสั่ง ค่อยๆทำความเข้าใจไปช้าๆก็ได้ครับ ไม่ว่าหรอก
เจ้าคำสั่งนี้ รูปแบบการทำงานก็เหมือนคำสั่งทั่วไป เพียงแต่ เราต้องกำหนดค่าที่จะใช้ในคำสั่ง ให้ครบเท่านั้นเอง ซึ่งโดยรวมแล้วก็มี
ตัวแปรที่เราอยากรู้ เหตุการณ์ที่เราคาดว่าจะเกิด และคำสั่งที่จะให้เกิดขึ้นเมื่อเกิดเหตุการเหล่านั้น เช่น
stage.addEventListener(Event.ENTER_FRAME , pick);
ข้อความด้านบนคือ เมื่อ เสตจ หรือหน้าจอหลักของเรา เกิดเหตุการณ์ที่เรียกว่า แสดงเฟรม ให้เรียกการทำงานคำสั่งที่ชื่อว่า pick
ในวงเล็บของคำสั่ง addEventListener จะมี 2 ตัวแปรที่เราต้องใส่มันลงไปเพื่อกำหนดการทำงาน นั่นคือ
1 เหตุการณ์เฝ้าระวัง
2 คำสั่งที่ต้องการถ้าเหตุการณ์เฝ้าระวังนั้นดันเกิดขึ้นจริง
การพิมพ์ addEventListener นั้น บอกตามตรงว่า ยาวจนเมื่อยมือ แต่น่าเสียดายที่คำสั่งนี้เป็นคำสั่งที่ใช้งานมากที่สุด ดังนั้น เราจึงต้องจำวิธีการใช้งานให้ดีๆ
คำถาม ถ้าเราสร้างตัวแปรขึ้นมา แล้วเราอยากตรวจจับเหตุการณ์ของตัวแปรนั้น เราจะทำอย่างไร
เฉลย - ตัวแปรนั้น.addEventListener();
คำถาม ตัวแปรเดิม ถ้าเราสร้าง function pick(){} อยู่ แล้วตรวจจับเหตุการณ์ของตัวแปรนั้น ถ้าเจอเหตุการณ์ที่ว่า ให้คำสั่ง pick ทำงาน เราจะทำอย่างไร
เฉลย - ตัวแปรนั้น.addEventListener(เหตุการณ์ที่ว่า , pick);
ต่อๆ รูปแบบเท่าที่อ่านมันไม่ได้มีความยากอะไรเลยล่ะ จะติดก็ตรง เหตุการณ์ที่ว่าที่เราจะใส่นั่นเอง แล้วเหตุการณ์มีอะไรบ้าง
เหตุการณ์ที่เกิดบ่อยๆมีดังนี้
Event - คือเหตุการณ์ที่เห็นโดยทั่วไปและแบ่งหมวดยาก แต่สำหรับเรา ไม่ค่อยได้ใช้หรอก ได้ใช้แค่ไม่กี่อันเอง
MouseEvent - เหตุการณ์ที่เกี่ยวข้องกับการใช้เมาส์ เช่น ถ้าเรากดเม้าส์ คำสั่งก็จะทำงาน
KeyboardEvent - เป็นเหตุการณ์เกี่ยวกับการกดแป้นพิมพ์ต่างๆ
TimerEvent - เป็นเหตุการณ์ที่เกี่ยวกับการตั้งเวลา
เอาล่ะ เราเข้าใจแล้วล่ะนะว่า แต่ละเหตุการณ์นั้น ก็จะแยกหมวดหมู่ชัดเจน เหล่าเหตุการณ์นี้ จะนำเอาไปใส่ลงในคำสั่ง addEventListener กันล่ะ
addEventListener(Event.ENTER_FRAME , pick);
ลืมบอกไปนิด หลังเหตุการณ์ที่เป็นหัวข้อ คุณต้องระบุด้วยว่า เหตุการณ์ที่ว่านั้นคืออะไร สมมติ คุณเรียกนามสกุลของคนคนหนึ่งขึ้นมา คุณจะรู้ไหมว่าเรียกใคร คุณต้องระบุชื่อด้วย จะได้เรียกถูกคน นั่นคือ ซับอีเว้นท์ หรือเหตุการณ์ย่อย
ถ้าเกิดเหตุการณ์กับเม้าส์ คุณจะรู้ไหมว่า เกิดอะไรกับเม้าส์ เพราะมันเป็นได้หลายอย่าง เช่น การขยับเม้าส์ กดเม้าส์ เม้าส์อยู่บนข้อความนั้น มันเป็นได้หลายอย่าง คุณต้องกำหนดเหตุการณ์ย่อยลงไป
จากตัวอย่าง เหตุการณ์ที่เกิดคือเหตุการณ์ทั่วไป เหตุการณ์ย่อยคือ แสดงเฟรม แน่นอนว่า การทำงานของแฟลชนั้น คือการที่โปรแกรมจะค่อยๆแสดงทีละเฟรมของไทม์ไลน์จากซ้ายไปขวา เพราะเป็นการแสดงทีละเฟรม ดังนั้น เมื่อให้
addEventListener(Event.ENTER_FRAME , pick); ทำงาน
เมื่อไม่กำหนดตัวแปร มันจะถือว่า เมนหลักของไทม์ไลน์ เป็นตัวที่กำลังทำการตรวจจับเหตุการณ์ ถ้าเกิดเหตุการณ์ แสดงในเฟรมเมื่อไหร่ ฟังก์ชั่น(คำสั่ง) pick จะถูกเรียกทำงาน 1 ครั้ง แต่โดยปรกติ flash จะทำงาน 12 เฟรม/ 1 วินาที ดังนั้น คำสั่ง pick จึงถูกเรียกใช้งาน 12 ครั้งต่อวินาที ซึ่งก็ถือว่ามากโขอยู่นะ ดังนั้น จะสั่งอะไรให้ทำงาน คิดด้วยละกัน
แล้วเราจะประยุกต์ใช้อย่างไร
เอาเป็นว่า ในตอนนี้ คุณแค่จำรูปแบบไว้ก่อนก็พอ ว่า มันทำงานอย่างไร เพราะเมื่อถึงการใช้งานจริง ผมจะเข้าสู่รายละเอียดอีกที
สรุป
1. ถ้าเราต้องการให้คำสั่งของเราทำงานเลย ให้เราเลือกชื่อคำสั่งนั้น ตามด้วย (); เช่น pick(); นั่นคือคำสั่ง pick ถูกเรียกใช้งานแล้ว
2. ถ้าเราต้องการให้เกิดเหตุการณ์ก่อนถึงจะเรียกคำสั่ง pick ให้ทำงาน ให้เราใส่ไว้ในคำสั่ง addEventListener เพียงแต่ต้องกำหนดเหตุการณ์ที่จะเกิดด้วย เช่น addEventListener(เหตุการณ์.เหตุการณ์ย่อย, pick);
อาจเริ่มหนักสมองกันบ้างแล้วล่ะนะ แต่พอได้ทำจริงประกอบไปด้วยเดี๋ยวจะเข้าใจมากขึ้น เจอกันใหม่คาบหน้าครับ
แต่ถ้าเราต้องการการทำงานที่โต้ตอบกับการกระทำของผู้ใช้ล่ะ
การโต้ตอบการกระทำของผู้ใช้ นั่นคือ เมื่อผู้ใช้ใช้งานทำกิจกรรมอะไรบางอย่าง ตัวงานที่เราทำก็จะตอบรับอย่างเป็นระบบ เช่น
ผู้ชายคนหนึ่งเมาเหล้าและต่อยเมีย(ต่อยเมียคือกิจกรรมหรือเหตุการณ์ที่ทำ) ผลก็คือ วันรุ่งขึ้นเขานอนอยู่โรงพยาบาลหยอดน้ำข้าวต้ม (ผลของกิจกรรม) รูปแบบมันก็มีเช่นนี้แหละ เป็นรูปแบบที่เราต้องกำหนดไว้ แปลง่ายๆคือ ถ้ามีการกระทำ ก็ต้องมีผลตามมา
เพียงแต่เราต้องเป็นคนกำหนดเหตุการณ์ และกำหนดผลที่ตามมา
ในงานที่คุณจะสร้างมันขึ้น ถ้าคุณกดปุ่มลง ตัวละครของคุณจะย่อเข่าลง ถ้ากดขึ้น ตัวละครก็จะกระโดด ไอ้ที่คุณกดปุ่มต่างๆเหล่านี้คือการเกิดเหตุการณ์(กิจกรรม)ทั้งสิ้น เราเรียกเหตุการณ์เหล่านี้ว่า Event
เอาล่ะ เจ้าEvent หรือเหตุการณ์เนี่ย พูดถึงมันก็คือสิ่งที่จะเกิดกับงานแฟลชที่เราสร้าง โชคดีที่คนสร้างแฟลชนั้น คิดเผื่อพวกเราไว้แล้วว่า มันจะมีเหตุการณ์อะไรเกิดขึ้นได้บ้าง ดังนั้น เราจึงมีคำสั่งสำเร็จรูปไว้ใช้ได้เลย นั่นคือ
addEventListener();
โอ้ว ตัวเนี้ยแหละสำคัญ ว่าแต่ เราจะใช้งานมันยังไงล่ะ ง่ายๆ เมื่อเราจะเรียกใช้คำสั่งอะไร ก็ให้เอาคำสั่งนั้น ยัดลงไปในคำสั่งนี้ งงล่ะสิ ค่อยๆไปละกันนะ การทำงานของแฟลชมันก็แบบนี้ละ เอาตัวแปร มาซ้อนตัวแปร เอาคำสั่งมาซ้อนคำสั่ง ค่อยๆทำความเข้าใจไปช้าๆก็ได้ครับ ไม่ว่าหรอก
เจ้าคำสั่งนี้ รูปแบบการทำงานก็เหมือนคำสั่งทั่วไป เพียงแต่ เราต้องกำหนดค่าที่จะใช้ในคำสั่ง ให้ครบเท่านั้นเอง ซึ่งโดยรวมแล้วก็มี
ตัวแปรที่เราอยากรู้ เหตุการณ์ที่เราคาดว่าจะเกิด และคำสั่งที่จะให้เกิดขึ้นเมื่อเกิดเหตุการเหล่านั้น เช่น
stage.addEventListener(Event.ENTER_FRAME , pick);
ข้อความด้านบนคือ เมื่อ เสตจ หรือหน้าจอหลักของเรา เกิดเหตุการณ์ที่เรียกว่า แสดงเฟรม ให้เรียกการทำงานคำสั่งที่ชื่อว่า pick
ในวงเล็บของคำสั่ง addEventListener จะมี 2 ตัวแปรที่เราต้องใส่มันลงไปเพื่อกำหนดการทำงาน นั่นคือ
1 เหตุการณ์เฝ้าระวัง
2 คำสั่งที่ต้องการถ้าเหตุการณ์เฝ้าระวังนั้นดันเกิดขึ้นจริง
การพิมพ์ addEventListener นั้น บอกตามตรงว่า ยาวจนเมื่อยมือ แต่น่าเสียดายที่คำสั่งนี้เป็นคำสั่งที่ใช้งานมากที่สุด ดังนั้น เราจึงต้องจำวิธีการใช้งานให้ดีๆ
คำถาม ถ้าเราสร้างตัวแปรขึ้นมา แล้วเราอยากตรวจจับเหตุการณ์ของตัวแปรนั้น เราจะทำอย่างไร
เฉลย - ตัวแปรนั้น.addEventListener();
คำถาม ตัวแปรเดิม ถ้าเราสร้าง function pick(){} อยู่ แล้วตรวจจับเหตุการณ์ของตัวแปรนั้น ถ้าเจอเหตุการณ์ที่ว่า ให้คำสั่ง pick ทำงาน เราจะทำอย่างไร
เฉลย - ตัวแปรนั้น.addEventListener(เหตุการณ์ที่ว่า , pick);
ต่อๆ รูปแบบเท่าที่อ่านมันไม่ได้มีความยากอะไรเลยล่ะ จะติดก็ตรง เหตุการณ์ที่ว่าที่เราจะใส่นั่นเอง แล้วเหตุการณ์มีอะไรบ้าง
เหตุการณ์ที่เกิดบ่อยๆมีดังนี้
Event - คือเหตุการณ์ที่เห็นโดยทั่วไปและแบ่งหมวดยาก แต่สำหรับเรา ไม่ค่อยได้ใช้หรอก ได้ใช้แค่ไม่กี่อันเอง
MouseEvent - เหตุการณ์ที่เกี่ยวข้องกับการใช้เมาส์ เช่น ถ้าเรากดเม้าส์ คำสั่งก็จะทำงาน
KeyboardEvent - เป็นเหตุการณ์เกี่ยวกับการกดแป้นพิมพ์ต่างๆ
TimerEvent - เป็นเหตุการณ์ที่เกี่ยวกับการตั้งเวลา
เอาล่ะ เราเข้าใจแล้วล่ะนะว่า แต่ละเหตุการณ์นั้น ก็จะแยกหมวดหมู่ชัดเจน เหล่าเหตุการณ์นี้ จะนำเอาไปใส่ลงในคำสั่ง addEventListener กันล่ะ
addEventListener(Event.ENTER_FRAME , pick);
ลืมบอกไปนิด หลังเหตุการณ์ที่เป็นหัวข้อ คุณต้องระบุด้วยว่า เหตุการณ์ที่ว่านั้นคืออะไร สมมติ คุณเรียกนามสกุลของคนคนหนึ่งขึ้นมา คุณจะรู้ไหมว่าเรียกใคร คุณต้องระบุชื่อด้วย จะได้เรียกถูกคน นั่นคือ ซับอีเว้นท์ หรือเหตุการณ์ย่อย
ถ้าเกิดเหตุการณ์กับเม้าส์ คุณจะรู้ไหมว่า เกิดอะไรกับเม้าส์ เพราะมันเป็นได้หลายอย่าง เช่น การขยับเม้าส์ กดเม้าส์ เม้าส์อยู่บนข้อความนั้น มันเป็นได้หลายอย่าง คุณต้องกำหนดเหตุการณ์ย่อยลงไป
จากตัวอย่าง เหตุการณ์ที่เกิดคือเหตุการณ์ทั่วไป เหตุการณ์ย่อยคือ แสดงเฟรม แน่นอนว่า การทำงานของแฟลชนั้น คือการที่โปรแกรมจะค่อยๆแสดงทีละเฟรมของไทม์ไลน์จากซ้ายไปขวา เพราะเป็นการแสดงทีละเฟรม ดังนั้น เมื่อให้
addEventListener(Event.ENTER_FRAME , pick); ทำงาน
เมื่อไม่กำหนดตัวแปร มันจะถือว่า เมนหลักของไทม์ไลน์ เป็นตัวที่กำลังทำการตรวจจับเหตุการณ์ ถ้าเกิดเหตุการณ์ แสดงในเฟรมเมื่อไหร่ ฟังก์ชั่น(คำสั่ง) pick จะถูกเรียกทำงาน 1 ครั้ง แต่โดยปรกติ flash จะทำงาน 12 เฟรม/ 1 วินาที ดังนั้น คำสั่ง pick จึงถูกเรียกใช้งาน 12 ครั้งต่อวินาที ซึ่งก็ถือว่ามากโขอยู่นะ ดังนั้น จะสั่งอะไรให้ทำงาน คิดด้วยละกัน
แล้วเราจะประยุกต์ใช้อย่างไร
เอาเป็นว่า ในตอนนี้ คุณแค่จำรูปแบบไว้ก่อนก็พอ ว่า มันทำงานอย่างไร เพราะเมื่อถึงการใช้งานจริง ผมจะเข้าสู่รายละเอียดอีกที
สรุป
1. ถ้าเราต้องการให้คำสั่งของเราทำงานเลย ให้เราเลือกชื่อคำสั่งนั้น ตามด้วย (); เช่น pick(); นั่นคือคำสั่ง pick ถูกเรียกใช้งานแล้ว
2. ถ้าเราต้องการให้เกิดเหตุการณ์ก่อนถึงจะเรียกคำสั่ง pick ให้ทำงาน ให้เราใส่ไว้ในคำสั่ง addEventListener เพียงแต่ต้องกำหนดเหตุการณ์ที่จะเกิดด้วย เช่น addEventListener(เหตุการณ์.เหตุการณ์ย่อย, pick);
อาจเริ่มหนักสมองกันบ้างแล้วล่ะนะ แต่พอได้ทำจริงประกอบไปด้วยเดี๋ยวจะเข้าใจมากขึ้น เจอกันใหม่คาบหน้าครับ
สมัครสมาชิก:
บทความ (Atom)