Flash:วิธีทำให้วัตถุสามารถลากวางได้ เพื่อใช้ทำ cai แบบจับคู่

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

1. even  อีเว้นต์ หรือเหตุการ ในกรณีนี้ จะมีเหตุการณ์เกิดขึ้นสองแบบคือ 1 ตอนกดเม้า(เพื่อลาก) 2 ตอนปล่อยเม้า(เพื่อวาง )  ดังนั้น เราจะใส่คำสั่งลากไ้ว้ที่ event กด และ คำสั่ง วาง ที่ปล่อย

มาดูกันเลย

ขั้นตอนที่ 1 สร้าง movie clip มา 1 ตัว ตั้ง ชื่อว่า drag1

ขั้นตอนที่ 2 คลิกที่ movie clip Drag1 แล้วกดปุ่ม f9 เพื่อเปิดหน้าต่าง action scrip ขึ้นมาแล้วพิมพ์ code 

on(press) {

startDrag(this,false);

}

เมื่อเสร็จขั้นตอนนี้แล้ว หากท่านกดปุ่ม control+enter จะสังเกตุเห็นว่า สามารถลากวัตถุได้แล้ว แ่ต่ยังวางไ่ได้  ก็เพราะว่า เราสั่งให้มันลากผ่านเหตุการคลิกอย่างเดียวอยู่ ต่อไปก็มาสั่งให้วาง ผ่านเหตุการณ์ปล่อยเม้าส์กันดูบ้างครับ

ขั้นตอนที่ 3 คลิกที่ movie clipตัวเดิม แล้วกดปุ่ม f9 เพื่อเปิดหน้าต่าง action script อีกครั้ง 

จากนั้นพิมพ์คำสั่ง 

on(release) {

stopDrag();

}

เพิ่มเข้าไป

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

CAIเชียงใหม่:การป้องกันการติดเชื้อในกระแสโลหิต จากการฟอกเลือกด้วยเครื่องไตเทียมสำหรับพยาบาล

ขอแสดงความยินดีกับพี่จิต ปุณณดา นักศึกษาปริญญาโท สาขาวิชาพยาบาลศาสตร์ คณะพยาบาลศาสตร์ มหาวิทยาลัยเชียงใหม่ ที่จบการศึกษาระดับปริญญาโทเรียบร้อยแล้วครับ จากการทำสื่อคอมพิวเตอร์ช่วยสอน เรื่อง การป้องกันการติดเชื้อในกระแสโลหิต จากการฟอกเลือดด้วยเครื่องไตเทียม สำหรับพยาบาล ซึ่งผู้จัดทำเอง บอกได้เลยว่าเนื้อหานั้นเป็นประโยชน์สำหรับผู้ศึกษามาก (แต่ว่าทำแล้วไม่ค่อยเข้าใจ เพราะเค้าทำไว้ให้พยาบาลดู - -*)
CAI นี้ทำด้วย Flash ประกอบไปด้วยวิดีโอ, แบบทดสอบแบบต่างๆ  ที่จะวัดความรู้ทั้งก่อนเรียนและหลังเรียน

Flash:การทำเฟืองเกียร์ให้หมุนด้วยโปรแกรมflash

คราวก่อนที่สอน illustrator เรื่องการทำเฟืองเกียร์ โดยใช้ path finder มาแล้ว หลายๆคนคงอยากให้เฟืองเกียร์อันนี้มันหมุนได้ใช่มั๊ยครัับ เอ๊ะ ทำยังไงล่ะ illustrator นั้นทำภาพเคลื่อนไหวไม่ได้ซะด้วย คงต้องหาโปรแกรมที่ใช้สร้างภาพ animation หรือภาพเคลื่อนไหว ซึ่งก็คือโปรแกรม Adobe Flash ยังไงล่ะครับ

สำหรับผู้ที่ยังทำเฟืองเกียร์ไม่เป็น สามารถไปอ่าน วิธี่ำการทำเฟืองเกียร์ จากโปรแกรม illustrator ได้ครับ
ส่วนท่านที่ทำเฟืองเกียร์ได้แล้ว มาเริ่มทำให้เฟืองเกียร์หมุนได้ ด้วยโปรแกรม flash กันเลยครับ

ก่อนอื่น เรามาสร้างเฟืองเกียร์ ให้มีเกียร์หลายๆอันกันก่อน และให้ดีควรจะสีขนาดที่แตกต่างกันด้วย เพราะว่าจะได้เหมือนจริงยังไงล่ะครับ ในกรณีนี้ ผมลองสร้างเฟืองเกียร์จากโปรแกรม illustrator ไว้ 3 อันด้วยกัน โดยไม่ขนาดเล็กใหญ่ดังภาพด้านล่าง

ขั้นตอนที่ 1
เลือกเฟืองทั้งหมด เสร็จแล้วคลิกขวาเลือก copy

ขั้นตอนที่ 2 เปลี่ยนที่โปรแกรม flash คลิกขวา แล้วเลือก paste เพื่อวาง เฟืองเกียร์ไว้ใน stage  เลือก paste using AI

จากนั้นเราจะทำให้เกียร์หมุนทีละอัน โดยเริ่มจากเฟืองเกียร์อันที่ใหญ่ที่สุดก่อนนะครับ

ขั้นตอนที่ 3 เลือกเฟืองเกียร์อันใหญ่ แล้วคลิกขวาเลือก convert to symbol (หรือกดปุ่ม F8 )

เมื่อปรากฏหน้าต่างเลือกแบบ symbol ให้เลือก movie clip แล้วเปลี่ยนชื่อเป็นเกียร์1


ขั้นตอนต่อไปเราก็จะมาทำให้เฟืองหมุนกัน

ขั้นตอนที่ 4 ที่ movie clip เกียร์1 คลิกขวาที่ frame จากนั้นเลือก create motion tween

ไปที่เฟรมที่ 100 ครับ คลิกขวาเลือก insert key frame  จะปรากฏจุด key ที่เฟรม 100

ขั้นตอนที่ 5  ต่อไปคลิกที่คีย์เฟรมแรกครับ  แล้วเปิดหน้าต่าง properties ขึ้นมา

ที่ rotate คลิกเลือกเป็น cw เลือกรอบเป็น 1 เพื่อหมุนเฟืองตัวนี้ตามเข็มนาฬิกา 1 รอบ

ถ้าของ play โดยการ กด enter ดู จะเห็นว่าเฟืองเกียร์หมุนได้แล้วครับ




ส่วนเฟืองเกียร์ อีกสองอันก็ทำขั้นตอนเดียวกันครับ แต่ให้ปรับแต่งดังนี้

เฟืองเกียร์ตัวขนาดกลาง ให้กำหนดเฟรมสุดท้ายอยู่ที่ 70 ครับ

เฟืองขนาดตัวเล็กสุด ให้กดหนดเฟรมสุดท้ายที่ 40 ครับ แล้วให้ rotate เป็นแบบ ccw คือหมุนทวนเข็มนาฬิกาครับ เพราะตามหลักการแล้วต้องหมุนอย่างนั้น

แค่นี้ก็จะได้เฟืองเกียร์หมุนได้แล้วครับ

CAI: การใช้โปรแกรมflashสร้างแบบทดสอบในสื่อคอมพิวเตอร์ช่วยสอน

เนื้อหาวันนี้จะเน้นไปที่การสร้างแบบฝึกหัดแบบตัวเลือกหรือ ช้อยส์(Choices) จากโปรแกรม flash
หลายๆคนที่ำจะใช้โปรแกรม flash ในการสร้างสื่อคอมพิวเตอร์ช่วยสอน คงสงสัยว่า เวลาคลิกคำตอบที่ถูกต้องแล้วให้คะแนนเพิ่มขึ้นนั้น มีิวิธีการทำยังไง เราไปดูวิธีทำกันเลยครับ

ก่อนอื่นก็ทำแบบฟอร์มหน้าแบบฝึกหัดกันก่อน ส่วนใหญ่ก็จะประกอบด้ว
1. โจทย์ ก็ใช้ตัวหนังสือธรรมดาครับ พิมพ์ไปเลย
2. หัวข้อคะแนน ก็ตัวหนังสือธรรมดาเหมือนกัน
3. ชัอยตัวเลือก ตรงนี้ใช้ปุ่มกดครับ จะมีกี่ช้อยก็แล้วแต่ กรณีนี้ลองทำแค่สองอันก่อน


ต่อไปเรามาสร้างส่วนการแสดงผลคะแนนกันก่อน
1.คลิกเลือกที่เครื่องมือ text tool ที่ properties เลือกเป็น text แบบ dynamic text

จากนั้น ลากเม้าส์เพื่อสร้างส่วนแสดงคะแนนในจุดที่กำหนด

เมื่อสร้างส่วนแสดงผลคะแนนเสร็จ ก็ทำการกดหนดค่าให้กับส่วนแสดงผลคะแนน โดย

1.เปลี่ยนค่าเริ่มต้นเป็น 0 (พอตอบถูกก็ค่อยบวกคะแนนไปเรื่่อยๆ )

2.กำหนดชื่อตัวแปร ตรงส่วน var เป็นชื่อ points (จะใช้ชื่ออื่นก็ได้นะครับ แล้วแต่ )

มาถึงขั้นตอนของการเขียน action script เพื่อเพิ่มคะแนนให้กรณีที่เลือกคำตอบที่ถูกต้องแล้วครับ

1.เลือกปุ่มที่เป็นคำตอบที่ถูกต้อง

2.เปิดหน้าต่าง action script  ขึ้นมา (กด F9) แล้วพิมพ์

on(release) {

points++;

}

อธิบาย : ก็หมายความว่าถ้ากดปุ่มนี้ แล้ว ให้เพิ่มค่าให้กับ points (หรือชื่ออื่นที่ตั้ง) เพิ่มขึ้นอีก 1 คะแนนนั่นเอง 

ลองทดสอบกันเลยกด control+enter เลยครับ

ผลลัพท์ที่ได้คือ เืมื่อคลิกปุ่มที่เป็นคำตอบที่ถูก คะแนนก็จะเพิ่มขึ้นครับ 

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

Flash:เทคนิคการใช้maskเพื่อทำไฟฉายส่อง

มาถึงเรื่องราวการใช้ function mask ในโปรแกรม flash กันอีกครั้ง วันนี้เราจะมาดูวิธีการสร้างภาพเหมือนกำลังถูกไฟฉายส่อง สำหรับผู้ที่เคยอ่านบทความเกี่ยวกับmask ในบทก่อนๆอาจจะพอเดากันออกบ้าง ว่าทำยังไง
อ๊ะ มาลองดูกันเลยครับ ว่าจะเดาถูกกันหรือเปล่า 5555

ก่อนอื่น นำภาพไปปรับโทนให้มันแตกต่างกันก่อนครับ ให้รูปนึงเป็นรูปที่มืดๆ อีกรูปนึงเป็นรูปที่สว่างๆก็ได้ครับแล้ว save เป็นไฟล์รูปสองรูปนะครับ

กรณีนี้ผมลองทำในโปรแกรม Photoshop ครับ รูปด้านบน  ชื่อว่ารูป1 ปรับให้ภาพดูมืดๆ

 รูปด้านล่างตั้งชื่อว่ารูป 2 ปรับ adjust ให้ภาพดูสว่างๆ 

ที่โปรแกรมFlash เปลี่ยนชื่อ layer เป็นรูปมืดครับ เลเยอร์นี้เราจะเอารูปมืดมาวาง

นำรูปที่เราเตรียมไว้มาใส่ในเลเยอร์มืดครับ โดยไปที่ file import to stageแล้วเลือกรูปมืดที่เราเตรียมไว้

ได้รูปมืดเข้ามาในโปรแกรม flash แล้วล่ะครับ

ขั้นตอนต่อไป 1. คลิกทีปุ่ม new layer เพื่อสร้าง layer ใหม่ แล้ว 2.เปลี่ยนชื่อ layer เป็นชื่อ รูปสว่าง (ใครไม่เปลี่ยนก็ได้นะ  แต่ระวังจะ งง อิอิ) จากนั้นก็ import รูปสว่างมาไว้ที่ layer นี้โดยวิธีเดียวกับรูปมืดครับ

ตอนนี้เราก็จะมีรูปอยู่สองรูปนะครับ รูปที่อยู่ layer ด้านล่าง เป็นรูปมืด รูปที่อยู่เลเยอร์ด้านบน เป็นรูปสว่าง

ขั้นตอนต่อไป1.คลิกที่ปุ่ม new layer อีกครั้งเพื่อสร้าง layer ใหม่ แล้ว 2. เปลี่ยนชื่อเป็นไฟฉาย (เหมือนเดิม ไม่เปลี่ยนก็ได้ แต่ระวัง งง!!)

ที่ layer ไฟฉาย สร้างวงกลม สีอะไรก็ได้ขึ้นมา ที่ไม่จำกัดสี ก็เพราะว่าวงกลมจะเป็นพื้นที่แสดงขอบเขตของ mask เฉยๆครับ ดังนั้นใช้วงกลมสีอะไรก็มีค่าเท่ากัน

ทำการเพิ่ม frame โดยคลิกขวาที่เฟรม 40 จากนั้นเลือก insert frame ครับ (อันนี้แล้วแต่ครับ ว่าใครจะใช้ frame ไหนแล้วแต่ว่าต้องการใช้ไฟฉายมันวิ่งไวแค่ไหน frame ยิ่งมากก็ยิ่งวิ่งช้าครับ) 

เมื่อได้ความยาวของเฟรมที่จะแสดงแล้ว 1. คลิกขวาที่เฟรมบนเลเยอร์ไฟฉาย แล้ว 2.  เลือก create motion tween เพื่อจะสร้างการเคลื่อนที่ให้ไฟฉาย

สีของ frame จะเปลี่ยนเป็นสีฟ้า ให้คลิกขวาที่เฟรมสุดท้าย เลือก insert Keyframe

เมื่อปรากฏจุด keyframe 1.ใ้ห้คลิกที่ keyframe สุดท้าย จากนั้น 2. ย้ายไฟฉายไปทางซ้ายหรือขวา แล้วแต่ว่าต้องการให้ไฟฉายส่องไปทางไหน

เมื่อทำครบทุกขั้นตอนแล้ว ให้คลิกขวาที่ layer ไฟฉาย (คลิกขวาตรงชื่อไฟฉายเลยก็ได้ครับ)  จากนั้นเลือก mask 

ลองกด control enter เพื่อทดสอบชิ้นงานดูครับ รูปภาพเหมือนถูกไฟฉายส่องมั๊ยครับ 

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

Illustrator:แค่เปลี่ยนสีเส้นขอบรูปสี่เหลี่ยม ก็สามารถสร้างเป็นปุ่มกดได้

รูปสี่เหลี่ยมที่มีเส้นขอบสีเดียวกัน ก็จะเป็นแค่สี่เหลี่ยมธรรมดาๆ ว่ามั๊ยครับ

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

ไม่เชื่อเหรอ อะฮ้า มาลองดูกันเลยครับ

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

จากนั้นเรามาทำเส้นขอบให้รูปสี่เหลี่ยมกันครับ โดยเริ่มทำทีละมุมครับ (มุมบนก่อนละกัน )

ขั้นตอนก็คือ 1. คลิก pen tool  เสร็จแล้ว2. ปรับสีเส้นให้เป็นสีดำ โดยไม่ต้องมีสีพื้นด้านใน จากนั้น 3. นำมาวาดเป็นขอบของรูปสี่เหลี่ยมมุมบนซ้าย 

เมื่อได้รูปแล้วทำการ copy รูปขอบด้านบน จากนั้นหมุนเส้นขอบ 180 องศา เพื่อที่จะนำมาเป็นเส้นขอบ

ด้านล่าง ดังภาพ

ปรับสีเส้นขอบด้านล่างให้เป็นสีโทนที่อ่อนกว่า ในกรณีนี้เลือกสีเทาอ่อนๆ 

เมื่อได้เส้นขอบโทนอ่อนแล้วก็นำไปวางไว้ที่ขอบด้านล่างดังภาพ

เห็นมั๊ยครับ ว่าแค่สีเส้นขอบไม่เหมือนกัน ก็ทำให้สี่เหลี่ยมธรรมดาๆกลายเป็น text box ขึ้นมาได้แล้ว

เราลองมากลับด้านของสี่เหลี่ยมดูกันนะครับ ว่าจะเกิดอะไรขึ้น

รูปเดียวกันนะครับ แค่หมุนก็กลายปุ่มกดแล้ว นี่รูปเดียวกันนะเนี่ย เห็นมั๊ยครับว่าภาพมันดูหลอกตาจิงๆ 

อาจจะนำไปประยุกต์ใช้กับชิ้นงานอื่นๆได้อีกเพียบเลยนะครับ 

ไม่ว่าจะเป็น check box ,text box ปุ่ม ไว้คราวหน้าจะนำเทคนิคดีๆมาฝากกันใหม่นะครับ 

Illustrator:สร้างรูปเฟืองเกียร์โดยใช้ pathFinder

บทความนี้เป็นบทความเทคนิคการใช้เครื่องมือของโปรแกรม illustator เพื่อทำเป็นชิ้นงาน โดยผู้อ่านควรจะมีพื้นฐานการใช้งานโปรแกรม illustrator พื้นฐานบ้างเล็กน้อยครับ

การสร้างรูปเกียร์ด้วยโปรแกรม illustrator นั้นมี CONCEPT อยู่ว่า เราจะสร้างรูปดาวจากเครื่องมือ star ขึ้นมาก่อน แล้วทำการตัดปลายของดาวด้วยเครื่องมือ path finder ก็จะได้รูปเฟืองเกียร์แล้วครับ หลายๆคนคงร้องอ๋อ จนไม่ต้องลงไปดูวิธีการแล้วละมั๊ง ^^* มาดูวิธีการกันดีกว่าครับ

1. เลือกที่เครื่องมือ star tool เพื่อสร้างรูปดาวแฉกๆก่อนครับ โดยในครั้งแรกให้คลิก 1 ครั้งที่หน้าจอครับ (อย่าเพิ่งลากเม้าส์นะครับ ให้คลิกแค่ครั้งเดียวก่อน เพื่อจะกำหนดค่าให้กับรูปดาว)

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

จากนั้นวาดรูปดาวลงบนพื้นที่ทำงานเลยครับ

เมื่อได้รูปดาวแล้ว คลิกที่เครื่องมือรูปวงกลมครับ

จากนั้นวาดวงกลม เพื่อจะทำขอบเขตของเฟืองเกียร์ครับ

เมื่อวาดวงกลมเสร็จแล้วเปิดหน้าต่าง alignment ขึ้นมา เพื่อให้วงกลมกับดวงดาว อยู่ในตรงกัน

จากนั้น 1.ลากเม้าส์คลุมดวงดาว และวงกลม (ต้องแน่ใจว่าวัตถุถูกเลือกทั้งสองอย่าง)
เมื่อวัตถุถูกเลือกแล้ว 2.คลิกปุ่มจัดกึ่งกลางในแนวนอน และ 3. คลิกปุ่มจัดกึ่งกลางในแนวตั้ง



วงกลมและดาวก็จะอยู่กึ่งกลางกันพอดีแล้วครับ

เปิดหน้าต่าง pathfinder ขึ้นมา เพื่อจากนั้นเลือกให้รวมวัตถุสองชิ้นในลักษณะ intersection กัน(พื้นที่ซ้อนทับกัน)

ก็จะได้เฟืองเกียร์แล้วครับ อะฮ้าา

ต่อไปมาทำรูของเฟืองเกียร์ครับ ก็คล้ายๆกับวิธีเดิมครับ คือสร้างรูปวงกลมเล็กๆเพื่อทำเป็นรูของเฟืองเกียร์ก่อน

จากนั้นจัดให้ทั้งคู่อยู่จุดศูนย์กลางกันโดยใช้ alignment ขั้นตอนก็เหมือนขั้นตอนด้านบนน่ะครับ

เมื่อวงกลมอยู่กลางตัวเกียร์แล้วก็เปิด pathfinder ขึ้น มาทำเพื่อจะทำการเจาะรูปเฟืองเกียร์กันครับ

คลิกที่ปุ่ม ตัดของ pathfinder ครับ


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