Unit 8 หลากหลายสีสัน

Unit 8 หลากหลายสีสัน & เทคนิคการแต่งงาน

อย่าเพิ่งเข้าใจผิด.. ผมไม่ได้ชวนใครมาแต่งงาน หรือว่าสละโสดนะครับ เพียงแต่เนื้อหาที่กำลังนำเสนอต่อไปนี้ จะเป็นเรื่องเกี่ยวกับ การใช้ภาษา Script มาช่วยในการสร้างงาน ให้มีสีสัน.. เหมือนคล้ายๆ กับการเขียนภาษาโฮมเพจ แล้วสามารถทำให้โต้ตอบ กับผู้ใช้ได้ แต่การเขียนภาษา Script ใน ToolBook จะต่างกันตรงที่ งานจะเน้นเอาไว้ใช้ในด้านของกราฟิก เช่นการสร้างปุ่ม หรือ Scrolling (แถบเลื่อน) ให้มีความแปลกประหลาด อยากรู้ว่าแปลกประหลาดยังไง ก็คงจะต้องลองติดตาม อ่านไปเรื่อยๆ เดี๋ยวจะเข้าใจเองนะครับ (อย่าใจร้อน)..

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

มาแต่งงานกันเถอะ..
คราวนี้ชวนกันมาแต่งงาน ที่เราได้จัดทำเอาไว้นะครับ ก็คืองานที่เราทำการใส่เนื้อหา โดยการใช้ Field โดยการตั้งชื่อของ Object ว่า "Detail" และเราได้ทำการ ตั้งค่าการใช้ Scrolling เอาไว้ เพื่อความสะดวกในการเลื่อนดูเนื้อหา แต่หากดูไปแล้ว อาจจะไม่ค่อยสวยงามนัก เพราะว่าก็เหมือนกับ การนำเอาข้อมูลมาใส่ไว้ทั่วไป ซึ่งหากเป็นเช่นนั้น นักพัฒนา CAI อย่างเรา ก็ไม่มีสิ่งจูงใจ ให้ผู้เรียน เกิดความน่าสนใจได้เลย รสชาติ ก็คงไม่ต่างกับการอ่านหนังสือ เล่มหนึ่ง แต่ดีหน่อยที่อ่านบนคอมเท่านั้นเอง ดังนั้น เราจึงควรปรับวิธีการ ดังนี้

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

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

ปุ่ม และ Effect ผมมักจะทำการเน้นเสมอว่า การทำสื่อที่ดี ไม่ว่าจะเป็นงานโฆษณา หรืออะไรก็ตาม ที่เน้นวิธีการนำเสนอด้วยสื่อทาง คอมพิวเตอร์ ก็ควรที่จะมี เทคนิค หรือEffect อะไรที่สร้างความน่าสนใจ และที่ดูดีด้วยเช่นกัน เช่น การสร้างการเปลี่ยนฉาก ค่อยๆ จางลง จนเปลี่ยนเป็นฉากที่ 2 หรือ ใการกดปุ่มแต่ละครั้ง จะให้ความรู้สึก เหมือนกับผู้ใช้ ใช้นิ้วมือเข้าไปกดเอง เช่น หากยังไม่ทำการกด ปุ่มจะทำการนูนขึ้นมา แต่พอกดลงไป ปุ่มจะยุบหรือว่าบุ๋มลงไป ซึ่งทำให้เกิดความแตกต่าง ระหว่างตอนกดและยังไม่กดปุ่ม ซึ่งอาจจะรวมถึงการใช้ Scroll Bar ด้วยเช่นกัน

คราวนี้.. ก็คงจะต้องมาถึงการนำเอาเครื่องมือ ที่เป็นตัวเอกอีกตัวหนึ่ง เข้ามาช่วย ซึ่งในตอนแรก เราก็พอทราบแล้วว่า การออกแบบ สื่อการเรียนการสอนนั้น ผู้ช่วยที่จะทำการเรียกใช้ ก็คงไม่พ้น PhotoShop ปัจจุบันนี้ ออกมาถึง Version 5 ความน่าสนใจอยู่ตรงที่ มีการพัฒนาเครื่องมือหลายๆตัว ให้ใช้งานง่าย และสามารถย้อนระบบการผิดพลาดจาก History ได้ ส่วนรายละเอียดตรงนี้ ผมอาจจะไม่ทำการเน้นนะครับ เพราะว่าเนื้อหาที่ต้องการนำเสนอจริงๆ อยู่ตรงการหยิบจับ มาใช้เฉพาะส่วนเท่านั้นเอง ซึ่งจะได้กล่าวในหัวข้อถัดไป

เริ่มต้นกับการแต่ง Scroll Bar.. แต่เดิมจะมีการใช้ที่ ใช้ แถบเลื่อน ( Scroll Bar) เป็นตัวที่ช่วยในการเลื่อนข้อความ จากรูป ที่แสดง

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

ลักษณะ..รูปแบบของ Scroll Bar จะมีความน่าสนใจ กว่าแบบที่1 เพราะว่าจะมีการเล่นสีสัน และลูกเล่น เช่น หากมีการ กดไปยัง หัวลูกศร นอกจากข้อความจะทำการเลื่อนแล้ว (Control ด้วย ภาษา Script ก่อน จึงจะทำการให้เลื่อนข้อความได้ ) ส่วนการกด แล้วให้สีของรูปภาพ ที่เป็นหัวลูกศร จะมีการเปลี่ยนรูปภาพ จากภาพที่แสดง ให้เห็น

สถานะของภาพแรก คือ เมื่อยังไม่มีการกดปุ่ม ไปยังรูปภาพ จะเป็นแบบรูปที่ 1 และเมื่อการกดปุ่ม จะเป็นแบบที่ 2 เพราะฉะนั้น.. ตอนนี้ เราจะเริ่มทำการสร้างรูปภาพ ที่จะแสดง ต่อไปนี้ จาก PhotoShop เสียก่อน (ซึ่งอาจจะทำการแต่ง ภายหลังก็ได้นะครับ) จากรูปที่ทำการแสดง จะทำการ Download โดยการคลิกขวา แล้วเลือก Save Picture..

แต่หาก..ต้องการลองทำการสร้างเอง เริ่มต้น.. ทำการเปิดโปรแกรม PhotoShop ขึ้นมาก่อน จากนั้นทำการ คลิก New แล้วกำหนดค่า ตามรูป Dialog Box ที่ทำการแสดง

ตำแแหน่ง 1.. กำหนดชื่อวัตถุ หรือรูปภาพที่จะทำว่า จะทำการตั้งชื่ออะไร ในที่นี้ กำหนดเป็น "Ia1" หากไม่ทำการกำหนดตอนนี้ อาจจะมาทำการกำหนดตอน Save a copy.. อีกครั้งก็ได้ เพราะมีค่าเท่ากับทำการ ตั้งชื่อเหมือนกัน ที่สำคัญ หากทำการบันทึก เพื่อใช้ในงาน Comment จะต้องทำการ Save เป็นนามสกุล .BMP เพราะว่าจะสามารถนำมาใช้งาน กับ ToolBook แล้วไม่ค่อยมีข้อผิดพลาด ในการสร้างโปรแกรม

ตำแหน่ง 2 , 3.. กำหนดความสูง และความกว้างของชิ้นงาน ในที่นี้ ให้กำหนดหน่วยวัด เป็น "Pixels" (กำหนดตามค่าที่ทำการแสดง คือ 30 x30 Pixels )
ตำแหน่งที่ 4.. Resolution ค่าความละเอียดของวัตถุ ยิ่งตั้งค่าสูงจะทำให้วัตถุ มีความชัดเจนมากขึ้น ดังนั้น ค่าไม่ควรที่จะตั้งต่ำกว่า 72-96 เพราะ Resolution ยิ่งสูง ยิ่งทำให้วัตถุ มีความชัดเจนมากเช่นกัน แต่ขนาดพื้นที่ ก็จะใหญ่ขึ้น

ตำแหน่งที่ 5.. Contents จะเป็นการกกำหนดรูปแบบ ของ Background ในที่นี้ให้ทำการ กำหนดวัตถุเป็น Transparent คือให้พื้นหลังวัตถุมีความโปร่งใส ซึ่งจะเหมาะกับงานที่จะนำไปใช้งาน

เมื่อทำการตั้งค่า..เรียบร้อยแล้ว ก็ทำการสร้างงานกันเลยครับ ก่อนอื่น คงต้องไม่ต้องพูดถึง หรือทำการแนะนำเครื่องมือ PhotoShop อีกแล้วนะครับ เพราะว่าได้กล่าวถึง ไปแล้ว คราวนี้.. ผมคงจะจับเครื่องมือ และพูดถึงวิธีใช้เลยก็แล้วกัน

กดปุ่มซ้ายค้างเอาไว้...จากนั้นทำการเลือก Polygonal Lasso Tool จะได้เครื่องมือดังรูป ที่ทำการแสดง

จากนั้น..ในรูป.(จะอยู่ล่าง ใกล้ๆกับ Status Bar) จะเป็นเครื่องมือในการ Zoom ขยายขนาด 500 % โดยทำการคลิก แล้วพิมพ์จำนวน % ที่ต้องการ เพื่อสะดวกในการวาดรูป เพราะรูปภาพ มีขนาดค่อนข้างเล็ก

วิธีการใช้ Polygonal Lasso คลิกซ้าย1ครั้ง จากนั้นทำการลากเส้นไป หากต้องการลากเป็น ก็ทำการคลิกอีกครั้ง เมื่อบรรจบกันที่เก่าก็ทำการคลิก ปิด อีก 1 ครั้ง จากรูปที่ทำการแสดง.. (ให้ทำการสร้างรูปเป็นหัวลูกศร)

แล้ว..จึงจะได้ภาพที่เห็น แต่จะต้องทำการ เทสีใส่ โดยการเลือกม่วง..

ทำการเลือก Menu (Select) => Expand โดยทำการกำหนด 3 Pixels แล้วทำการคลิก OK จากนั้น จึงทำการเลือก สีเขียวอ่อน แล้วทำการเทสีเหมือนครั้งแรก ดังรูปที่แสดง

จากนั้น..ทำการเลือก Layer => Effects => Bevel and Emboss..

Style : Emboss เลือกให้มีลักษณะวัตถุที่นูนขึ้นมา
Angle : 150 ค่าองศาของวัตถุในการแสดงผลลัพธ์ จะมีความเอียง หรือนูน ขึ้นอยู่กับรูปแบบที่ทำการเลือก
Depth : 1 พื้นหลังของวัตถุที่แสดงจะมีความเด่นชัด หรือไม่ (ค่ากำหนดในการตั้ง สามารถทำการตั้งได้ ตั้งแต่ 1-20 แต่ห้ามตั้งค่า ศูนย์ )
Blur : 1 ความเบลอของพื้นหลังวัตถุ ให้มาก หรือน้อย และการตั้งค่าตัวเลขมากจะ Blur มาก (ค่ากำหนดในการตั้ง สามารถทำการตั้งได้ ตั้งแต่ 1-20 แต่ห้ามตั้งค่า ศูนย์ เพราะค่าของเครื่องจะทำการรับค่าต่ำสุดเป็น 1 เท่านั้น )

ผลลัพธ์ที่ได้ จากการกำหนดค่าต่างๆ ตาม Dialog Box จะได้รูปดังนี้

ส่วนอีกรูป จะทำเหมือนรูปแรกทุกขั้นตอน เพียงแต่..ให้ทำการ Select รูปที่ 1 โดยการเลือก Select => ALL (Ctrl+A) จากนั้นก็ทำการ Copy งานชิ้นที่ 1 ขึ้นมา แล้ว New งานใหม่ แล้วจึงทำการ Paste แล้วจึงทำการ ใช้เครื่องมือ Magic Wand Tool เข้าไปทำการคลิกสี ม่วงออก แล้วจึงทำการ Clear โดยการเลือก Menu(Edit)=> Clear แล้วจะได้ ดังภาพ(2) ที่ทำการแสดง ส่วนหาก..ต้องการที่จะสร้างภาพที่ 3,4 เพียงแต่ทำการ Select ภาพที่ 1 แล้วทำการ Copy และทำการ New ใหม่อีกครั้ง แต่จะ..ต่างกันตรง ให้ทำการวางรูป (Paste) จากนั้นรูปจะต้องยังคงถูกการ Select อยู่ แล้วจึง เลือก Menu(Edit) =>Transfrom => Flip Vertical จากนั้น การก็จะทำให้ได้รูป ดังนี้ จากนั้น เมื่อได้รูปที่ต้องการทั้งหมด แล้ว จึงทำการ Save เก็บเอาไว้ใน Sub Directory ที่มีชื่อว่า Exam1 โดยกำหนดชื่อ ดังนี้

รูปที่ 1 ตั้งชื่อว่า Ia1.bmp
รูปที่ 2 ตั้งชื่อว่า Ia2.bmp
รูปที่ 3 ตั้งชื่อว่า Ib1.bmp
รูปที่ 4 ตั้งชื่อว่า Ib2.bmp

ส่วน..Border ที่เป็นเส้นในแนวตั้งนั้น กำหนดความกว้าง และความสูง 5 x 250 Pixels Resulotion 72-96 Pixelsแต่ในที่นี้..กำหนดเป็น 72 Pixels จากนั้น..ใช้เครื่องมือ Linear Gradient แต่ก่อนที่จะใช้เครื่องมือนี้ จะต้องทำการ Select ที่รูปที่แสดงก่อน จากนั้นจึงใช้ Linear Gradient แล้วจะได้..รูปดังที่แสดง วิธีการลากเส้น ลากในแนวทแยงลงมา จากนั้น..ทำการ Save เป็นชื่อ L1.bmp เป็นอันเสร็จขั้นตอน ในการแต่งภาพ ที่เหลือ ก็เพียงแต่ Import ภาพเข้าไปใน ToolBook 5 เท่านั้นเอง และทำการเขียนภาษา Script เพื่อใช้ในการควบคุม แทน Scroll Bar (แถบเลื่อนข้อความ)

คราวนี้..ก็มาถึงการ Import รูปภาพ เข้ามาไว้ในในงาน อย่างแรกเนี่ย เราคงจะต้องทำการ คลิก..ไปยัง Field (Detail) ที่เราทำการใส่ข้อความ ไว้ในหน้า "คำนำ" แล้วทำการคลิกไปยัง Object Properties แล้วทำการเลือก Border Style : เป็น None ดังรูปที่ทำการแสดง

จากนั้น..ทำการคลิก OK เป็นอันสิ้นสุด การเปลี่ยน Scroll Bar ให้เป็น None เพื่อที่ต่อไปนี้..จะได้ทำการนำเอารูปภาพ ที่ได้จัดเตรียมเอาไว้ มาใช้งานแทน

ก้าวต่อมา..ก็คือการนำเอา Button มาวางไว้ข้างๆ Detail ทางด้านขวามือ (มาวางไว้ ทั้ง บนและล่าง ) ดังรูปที่แสดง

จากนั้น..ก็ทำการคลิกเลือกที่ละ Button เพื่อให้เกิดกรอบล้อมที่วัตถุก่อน แล้วจึงทำการตั้งค่า โดยการคลิกไปยัง Object Properties

Name ให้ทำการตั้งชื่อ Iup หมายถึง เมื่อทำการกดปุ่มนี้ จะมีค่าเท่ากับ การเลื่อน Scroll Bar ส่วนอีก Button ก็เช่นกัน ให้ทำการตั้งชื่อเป็น Idown หมายถึง การเลื่อน Scroll Bar ลงไป

Border Style : จะทำการกำหนดเป็น None (ทั้งสอง Button กำหนดเหมือนกัน)
Caption Position : กำหนดการวางตำแหน่งเป็น Auto เพื่อสะดวกในการวางต่ำแหน่ง
Transparent , Exclude from Tab Order เป็นค่าที่จะทำการกำหนด เอาไว้ประจำอยู่แล้ว คือในการใช้งานจริง อย่างเช่น Transparent เป็นค่า ที่ทำการกำหนดวัตถุ ให้มีความโปร่งใส เพื่อให้กลมกลืนกับพื้นวัตถุ ส่วน..Exclude from Tab Order เป็นการกำหนดการเลื่อน โดยการใช้ Tab ช่วยในการควบคุม ได้อีกทางหนึ่ง ซึ่งทำให้สะดวก แต่ในที่นี้ที่เราต้องการ คือ ต้องการให้ใช้ได้จาก Mouse เพื่อไม่ให้มีปัญหา เมื่อเวลาเขียน Script เพื่อใช้ในการควบคุม.. ให้การตั้งค่าเหมือน Dialog Box ที่ทำการแสดง

ส่วนตำแหน่งสุดท้าย (4).. ก็คือการนำเอากราฟิก เข้ามาใช้ หรืออาจจะกล่าวง่าย ก็คือ การนำเอารูป มาวางไว้บนปุ่มนั่นเอง คลิกที่ปุ่ม Graphics.. แล้วปฏิบัติตามขั้นตอน คือ

Button State : จะมีสภาวะ 2 อย่างที่เราจะต้องทำการใช้ คือ Normal Graphic หมายความว่า สภาวะปกติ เมื่อยังไม่มีการถูกใช้งาน เช่น หากยังไม่มี Mouse ไป ถูกหมายถึง ทำการคลิก หรือดับเบิลคลิก จะไม่มีการเปลี่ยนแปลง เราจะทำการเรียสภาวะนี้ว่า Normal Graphic.. ส่วนอีกสภาวะหนึ่ง คือ Invert Graphic จะหมายถึง กรณีที่มีเหตุการณ์ (Event) ใดมากระทบ จะเกิดการเปลี่ยนแปลงขึ้น เช่น การคลิก หรือ การดับเบิลคลิก เป็นต้น สรุป..เพราะฉะนั้น รูปที่ทำการกำหนด จึงต้องแสดง 2 สถานะ คือ สภาวะที่เป็น Normal และสภาวะที่เป็น Invert

มาลุยกัน.. กำหนด Button State : Normal Graphic.. จากนั้นจึงทำการ คลิกที่ Choose แล้วทำขั้นตอนการ Import รูปที่เก็บเอาไว้ Exam1 ออกมา โดยเรียก Ia1.bmp จากนั้น ตอบ OK

ขั้นตอนต่อมา..จึงทำการเปลี่ยน Button State : Invert Graphic.. แล้วทำคล้ายกับขั้นตอนแรก คือ คลิกที่ Choose แล้ว ทำการ Import รูปที่มีชื่อว่า Ia2.bmp จากนั้น ตอบ OK (เท่านี้ก็เสร็จขั้นตอน การตั้งค่า Button ที่ 1)

ย้อนขั้นตอน..อีกครั้ง โดยการทำซ้ำกันแบบเดียวกับ Button1

จากนั้น.. ทำการปรับแต่งขนาดให้เหมาะสม ซึ่งจะได้รูป ดังนี้

ก็จะได้รูป..ที่แสดงให้เห็น แต่ยังไม่เสร็จนะครับ เพราะว่า หากสังเกตยังขาด Border ซึ่งเป็นจุดหนึ่ง ที่เราจะต้องนำมาใส่ โดยการ คลิกไปที่ Menu (File) => Import Graphic.. ลักษณะๆคล้ายเหมือนกับ การนำเอารูปมาใส่ ที่ปุ่มนั่นแหละครับ ต่างกันตรงที่ เราต้องเอาอะไรมาลองที่วัตถุ เพราะสามารถนำรูปมาวางได้เลย จากนั้น ก็จะได้งาน อย่างที่แสดง..

ในบทถัดไป จะกล่าวถึงการ Control ด้วยภาษา Script เพื่อใช้งาน