Flash:การทำใบไม้ร่วงด้วย motion guide

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

พูดถึงเรื่องโปรแกรมที่ใช้ทำการ์ตูน เช่นการ์ตูนงานแต่งงานที่เรามักจะเห็นกัน (ไว้วันหลังจะเอาการ์ตูนงานแต่งาน ที่่เคยทำในเชียงใหม่มาอวดกันนะครับ) ก็คือโปรแกรม Flash นั่นเอง แต่บางครั้งก็เห็น animation บางอันที่ยังไม่ค่อยจะเหมือนจริงซักเท่าไหร่ ส่วนใหญ่ จะเป็นการเคลื่อนที่แบบที่ไม่ใช่เส้นตรง

วัตถุที่มีการเคลื่อนที่่แบบที่ไม่ใช่เส้นตรงมีอะไรบ้าง
ก็เช่น ใบไม้ ผีเสื้อ ปุยฝ้าย อะไรประมาณนี้

ถ้าทำใบไม้ตกลงกับพื้น ทำผีเสื้อบิน โดยบินเป็นเส้นตรงก็คงไม่ค่อยสมจริงซักเท่าไหร่
ดังนั้น ควรจะใช้เครื่องมือที่ช่วยในการ กำหนดทิศทางการเคลื่อนที่่ของวัตถุักัน
เรียกว่า motion guide ครับ















ขั้นตอนแรกผมลงวาดรูปใบไม้ 1 ใบ โดยผมจะทำให้ใบไม้ใบนี้ปลิวตกลงมา

จากนั้น คลิกเพื่อสร้างเลเยอร์ แบบ motion guide ขึ้นมา

จากนั้น วาดเส้น ผีเสื้อ หรือวัตถุต่างๆ ที่เราต้องการให้ปลิวไป

 ตอนนี้ก็มีสองเลเยอร์นะครับ คือ เลเยอร์ใบไม้ กับ guide layer  ที่จะให้ใบไม้วิ่งตาม

ต่อไปให้คลิกขวาที่ keyframe แรก ของใบไม้แล้วคลิกเลือก insert motion tween

 คลิกที่ frame ท้ายสุดที่ต้องการให้ใบไม้เคลื่อนที่ไป แล้วเลือก insert keyframe

  แล้วคลิกขวาที่ frame สุดท้ายของ guide layer เลือก insert frame เพื่อให้เส้นไกด์ ครอบคลุมถึงการเคลื่อนไหวในเฟรมสุดท้าย

รูปคีย์เฟรมทั้งหมด

ที่ key frame  สุดท้าย ย้ายใบไม้ไว้ีที่ปลายเส้นครับ

ลอง preview ดู จะเป็นว่าใบไม้วิ่งตามเส้นแล้วครับ

เืพื่อให้สมจริง อาจจะลองให้ใบไม้หมุนๆไปด้วยก็ได้ครับ

CAI คณิตศาสตร์ เรื่องเส้นขนาน

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

CAI พระุพุทธศาสนา เรื่องอริยสัจ 4 มีทุกข์ สมุทัย นิโรธ มรรค

CAI สื่อคอมพิวเตอร์ช่วยสอน เรื่อง อริยสัจ4 

CAI ชุดนี้สร้างจากโปรแกรม Adobe Flash ทำให้ได้ภาพและสีสันที่สวยงาม 

เรื่องราวขอบบทเรียนถูกถ่ายทอดด้วยภาพการ์ตูนน่ารักๆ เป็นเณรน้อย และประกอบด้วย

แบบฝึกหัดก่อนและหลังเรียน แบบทดสอบจับคู่ แบบทดสอบแบบโยงภาพ และแบบทดสอบแบบถูกผิด

ภาพ graphic ทำจากโปรแกรม illustrator ลายเส้นจึงคม เขียน script ควบคุมด้วย flash action script 

จึงสร้าง cai ขึ้นได้อย่างที่ต้องการ

Flash:การใช้ selection tool กับวัตถุใน flash

เมื่อก่อนนักเรียนมักจะเจอปัญหานี้บ่อยๆ เรื่องนี้เรื่องที่วางจะลากวงกลม แล้วเส้นไม่มาด้วยบ้าง เลยบอกนักเรียนไปว่า  ปัญหานี้เกิดจากเรายังใช้ selection tool ไม่ครอบคลุม จึงจำเป็นที่จะต้องเรียนรู้การใช้ selection tools ที่ถูกต้อง เพื่อให้เกิดประสิทธิภาพมากที่สุด  วันนี้ เลยจะมาสอน flash เกี่ยวกับการใช้งาน selection tool เพราะจริงๆแล้ว selection tool สามารถทำอะไรได้มากมายเลยทีเดียว

1. วิธีเลือกวัตถุทั้งหมด คือการ double click ครับ

ถ้า click เฉยๆ จะเลือกเฉพาะ fill เส้นขอบจะไม่ถูกเลือกด้วย

หากเป็นเส้นโค้ง สามารถใช้ selection เพื่อ ดึงเส้นโค้งให้เป็นรูปร่างโค้งอย่าที่ใจต้องการ

หากเป็นมุม ก็สามารถใช้ selection เพื่อดึงมุมสำหรับผู้ที่ต้องการย้ายตำแหน่งมุมต่างๆ

เห็นไหมครับว่า selection tool สามารถใช้ทำอะไรได้หลายๆอย่างจริงๆ ฉบัยหน้าจะมาดูเรื่องราวเทคนิคของการใช้ Flash สร้าง CAI หรือสื่อคอมพิวเตอร์ช่วยสอนกันดูบ้างนะครับ

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 คือหมุนทวนเข็มนาฬิกาครับ เพราะตามหลักการแล้วต้องหมุนอย่างนั้น

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