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

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

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 ปุ่ม ไว้คราวหน้าจะนำเทคนิคดีๆมาฝากกันใหม่นะครับ