Unit 8 หลากหลายสีสัน & เทคนิคการแต่งงาน
อย่าเพิ่งเข้าใจผิด.. ผมไม่ได้ชวนใครมาแต่งงาน หรือว่าสละโสดนะครับ เพียงแต่เนื้อหาที่กำลังนำเสนอต่อไปนี้ จะเป็นเรื่องเกี่ยวกับ การใช้ภาษา Script มาช่วยในการสร้างงาน ให้มีสีสัน.. เหมือนคล้ายๆ กับการเขียนภาษาโฮมเพจ แล้วสามารถทำให้โต้ตอบ กับผู้ใช้ได้ แต่การเขียนภาษา Script ใน ToolBook จะต่างกันตรงที่ งานจะเน้นเอาไว้ใช้ในด้านของกราฟิก เช่นการสร้างปุ่ม หรือ Scrolling (แถบเลื่อน) ให้มีความแปลกประหลาด อยากรู้ว่าแปลกประหลาดยังไง ก็คงจะต้องลองติดตาม อ่านไปเรื่อยๆ เดี๋ยวจะเข้าใจเองนะครับ (อย่าใจร้อน)..
เนื้อหา..ในบทนี้นอกจากจะสอนการเขียน ภาษาScript แล้วยังแตกต่างจากตำราเล่มอื่นๆ ตรงที่จะสอนวิธีการสร้างกราฟฟิกอย่างง่าย ด้วย PhotoShop เพื่อเอาไว้ใช้งาน อย่างง่าย แต่หลังจากเป็นแล้ว ก็ลองทำการประยุกต์ดูเอาเองนะครับ เพียงแต่เราต้องรู้ หลักการ.. และวิธีการใช้งาน ก่อนว่า เขามีวิธีการเช่นใด
มาแต่งงานกันเถอะ..
คราวนี้ชวนกันมาแต่งงาน
ที่เราได้จัดทำเอาไว้นะครับ
ก็คืองานที่เราทำการใส่เนื้อหา
โดยการใช้ Field โดยการตั้งชื่อของ
Object ว่า "Detail"
และเราได้ทำการ
ตั้งค่าการใช้ Scrolling
เอาไว้
เพื่อความสะดวกในการเลื่อนดูเนื้อหา
แต่หากดูไปแล้ว
อาจจะไม่ค่อยสวยงามนัก
เพราะว่าก็เหมือนกับ
การนำเอาข้อมูลมาใส่ไว้ทั่วไป
ซึ่งหากเป็นเช่นนั้น
นักพัฒนา CAI อย่างเรา
ก็ไม่มีสิ่งจูงใจ
ให้ผู้เรียน
เกิดความน่าสนใจได้เลย
รสชาติ
ก็คงไม่ต่างกับการอ่านหนังสือ
เล่มหนึ่ง แต่ดีหน่อยที่อ่านบนคอมเท่านั้นเอง
ดังนั้น เราจึงควรปรับวิธีการ
ดังนี้
ข้อความ ต้องดูดี และมีสีสัน พร้อมกับเนื้อหา จะต้องไม่ยาวเกินไป เพื่อไม่เกิดความน่าเบื่อ
การวางรูปภาพ กับเนื้อหา ควรจะวางให้สอดคล้องกัน แต่หากไม่สามารถหารูปที่สอดคล้องกันได้ กับเนื้อหา วิธีการแก้ไข ก็ง่ายมาก โดยการนำเอารูปการ์ตูน มาใส่ก็ได้ครับ เท่านี้ ก็เพิ่มความน่าสนใจ ของเนื้อหา และรูปแบบ ที่ดูจะเป็นมิตรกับคนอ่านมากขึ้น
ปุ่ม และ Effect ผมมักจะทำการเน้นเสมอว่า การทำสื่อที่ดี ไม่ว่าจะเป็นงานโฆษณา หรืออะไรก็ตาม ที่เน้นวิธีการนำเสนอด้วยสื่อทาง คอมพิวเตอร์ ก็ควรที่จะมี เทคนิค หรือEffect อะไรที่สร้างความน่าสนใจ และที่ดูดีด้วยเช่นกัน เช่น การสร้างการเปลี่ยนฉาก ค่อยๆ จางลง จนเปลี่ยนเป็นฉากที่ 2 หรือ ใการกดปุ่มแต่ละครั้ง จะให้ความรู้สึก เหมือนกับผู้ใช้ ใช้นิ้วมือเข้าไปกดเอง เช่น หากยังไม่ทำการกด ปุ่มจะทำการนูนขึ้นมา แต่พอกดลงไป ปุ่มจะยุบหรือว่าบุ๋มลงไป ซึ่งทำให้เกิดความแตกต่าง ระหว่างตอนกดและยังไม่กดปุ่ม ซึ่งอาจจะรวมถึงการใช้ Scroll Bar ด้วยเช่นกัน
![]() |
เริ่มต้นกับการแต่ง
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 เพื่อใช้งาน
Unit 1 | Unit 2 | Unit 3 | Unit 4 | Unit 5 | Unit 6 | Unit 7 | Unit 8 | Unit 9 | Unit 10 | Unit 11