มาสร้าง Cursor ดุ๊กดิ๊กกันเถอะ
เริ่มเรื่อง entry นี้
คือมีผู้อ่านท่านหนึ่งอยากให้ช่วยสอนเกี่ยวกับการทำ cursor แบบภาพเคลื่อนไหวหน่อย
ส่วนตัวผมเคยทำแต่ cursor ธรรมดาแบบไม่เคลื่อนไหวครับ
ถามมาแบบนี้ก็คล้ายๆ งานจะเข้า
แต่เผอิญว่าว่างเลยนั่งเล่นไปด้วยในตัว
cursor แบบภาพเคลื่อนไหว คืออะไร? (เผื่อบางท่านไม่คุ้นเคยคำนี้จริงๆ)
cursor เฉยๆ เมื่อพูดถึงในแง่ที่เกี่ยวกับคอมพิวเตอร์ก็คือตัวแสดงตำแหน่งของเมาส์นั่นแหละครับ
เวลาเราเลื่อนเมาส์ไป-มาบนหน้าจอแสดงผลก็จะแสดงสัญลักษณ์เพื่อแสดงตำแหน่งของเมาส์ ณ ขณะนั้นพร้อมๆ กันด้วย
รูป cursor เมาส์มาตรฐานที่พบเห็นทั่วไป (ในระบบปฏิบัติการ Windows) คงจะเป็นรูปนี้ครับ
โดยทั่วไป (พูดถึง Windows เป็นสำคัญนะครับ)
..ไฟล์ cursor แบบปกติ (ที่ไม่ใช่ภาพเคลื่อนไหว)จะมีนามสกุลไฟล์เป็น *.cur ครับ
ทีนี้หากพูดถึง cursor แบบเป็นภาพเคลื่อนไหว บทบาทหน้าที่มันก็คล้ายๆ กัน
คือมันก็เป็นส่วนแสดงผลตำแหน่งของเมาส์บนหน้าจอแสดงผลนั่นแหละ เพียงแต่มันมีภาพเคลื่อนไหวในตัวของมันเอง
ตัวอย่างก็เช่น
(..cursor รูปนาฬิกาทรายพลิกไป~มาขณะมีการประมวลผลอะไรอยู่ ที่พบเห็นได้ทั่วไปเวลาใช้งาน Windows
นั่นก็จัดอยู่ใน cursor ประเภทที่ว่านี่นะครับ
ไม่ได้เอาภาพมายกตัวอย่าง..เพราะขี้เกียจ)
..ไฟล์ cursor แบบเป็นภาพเคลื่อนไหวโดยปกติจะมีนามสกุลไฟล์เป็น *.ani
ซึ่งนามสกุลที่ว่านี่ก็คือเป้าหมายที่จะพูดกันใน entry นี้
มาพูดถึงโปรแกรมที่ใช้สร้างไฟล์ .ani ครับ
โปรแกรมประเภทนี้จริงๆ มีให้เลือกหลากหลายยี่ห้อ ..เลือกใช้ได้ตามสะดวก
แต่ในที่นี้ผมจะแนะนำโปรแกรมที่ชื่อ Realworld Cursor Editor
ผมเองก็เพิ่งหา เพิ่งโหลด เพิ่งลองใช้เหมือนกันครับ ซึ่งจากการที่เพิ่งทดลองใช้สดๆ ค่อนข้างน่าสนใจ
เป็น Freeware ด้วย นอกจากนี้ยังสามารถสร้างไฟล์ .cur ได้, สามารถเลือกภาพเพื่อสร้าง cursor ได้ ฯลฯ
(โดยส่วนตัวผมว่ามันทำอะไรได้เยอะกว่า Shareware บางตัวที่เรียกเก็บเงินเสียอีก)
(อ้อ.. ที่ว่า Freeware นี่ เป็น Freeware ไม่ทั้งหมดนะครับ
คือตัวโปรแกรมนี้มีลูกเล่นในการสร้างไฟล์ cursor โดยการสร้างภาพเคลื่อนไหวแบบสามมิติหมุนไป~มาได้ด้วย
ซึ่งในส่วนนี้เป็น Shareware ครับ สามารถเลือกที่จะไม่ติดตั้งก็ได้
..สำหรับการสร้าง cursor แบบธรรมดาทั่วไป ..ไม่จำเป็นต้องติดตั้งครับผม
สามารถใช้งานส่วน Freeware ได้ปกติ)
หน้าตาโปรแกรมเมื่อเปิดใช้งาน จะลักษณะประมาณนี้
เริ่มต้นใช้งานก็ดับเบิ้ลจิ้มที่ New Animated Cursor บริเวณกลางโปรแกรมครับ
ก็จะมีช่องให้กำหนดค่าของ cursor นั้นๆ ตามภาพครับ
ขนาด cursor ปกติทั่วไปที่ใช้งานทั่วๆ ไป จะมีขนาดตามค่า default ครับ
ส่วนสี ปรับตามประสงค์ ..หากไม่เข้าใจแนะนำให้ตั้งค่าตามภาพข้างต้น
จากนั้นก็จะปรากฏหน้าตาโปรแกรมในส่วนการสร้าง cursor ตามนี้
A: ชื่อ cursor และรายละเอียดผู้สร้างสรรค์
ระบุได้ตามประสงค์
B: จุดสัมพันธ์สำหรับ cursor
ถือเป็นจุด pixel หลักสำหรับการที่จะยึดเป็นจุดทำงานของเมาส์
ตรงนี้ค่า default จะเป็นพิกัด [0,0] ซึ่งหมายถึงมุมบน-ซ้ายของ cursor ครับ
อันนี้ไว้อธิบายอีกที
C: ความเร็วในการเปลี่ยนภาพไปยังภาพถัดไป
จำง่ายๆ ว่า เลขยิ่งน้อย มันยิ่งเปลี่ยนไปยังภาพถัดไปเร็วขึ้น
D: พื้นที่แสดงผล cursor ครับ
ผมมองว่าค่อนข้างสะดวกต่อการเรียกดูผลทีเดียว
วิธีใช้ก็แสนง่ายครับ ..แค่เลื่อนเมาส์ไปวางบนพื้นที่สีเทา
ก็จะแสดงผล cursor ที่เรากำลังทำอยู่นั้นขึ้นมาสดๆ โดยไม่ต้อง save
E: เฟรมภาพ cursor
cursore จะแสดงภาพเรียงลำดับจากซ้ายไปขวาตามเวลาที่แสดงใต้ภาพ
ซึ่งก็กำหนดจาก C นั่นแหละครับ
F: เครื่องมือในการวาด Pixel ต่างๆ
ยางลบ ดินสอ เครื่องมือวาดรูปทรง เครื่องมือเทสี
การใช้งาน สัมพันธ์กับการตั้งค่าสีและเครื่องมือ ..ขวามือของโปรแกรมตามที่เห็น
G: พื้นที่แสดงผลและแก้ไข cursor แต่ละเฟรม
วิธีแก้ไขแต่ละเฟรม ก็จิ้มเฟรมนั้นๆ แล้วก็แก้ไขในพื้นที่ G นั่นเอง
เพื่อให้เข้าใจวิธีใช้งานโดยคร่าว ..ในที่นี้จะสาธิตวิธีที่ผมทำละกันครับ
เริ่มต้นก็ใช้เครื่องมือวาดลักษณะคล้ายดินสอ วาด pixel ลงไปในพื้นที่แก้ไขภาพครับ
แนะนำทริคเล็กน้อย คุณสามารถวาดภาพหรือก๊อปปี้ภาพจากโปรแกรม Photoshop
แล้วมา paste แปะลงในโปรแกรมนี้ได้ โดยขนาดที่ก๊อปมาก็ไม่ควรเกินขนาดของ cursor ที่กำหนดตอนแรก
มีประเด็นนิดเดียวคือถ้าก๊อปส่วนที่เป็น alpha (โปร่งใส) มาล่ะก็..
มันจะแทนที่ส่วนโปร่งใสนั้นด้วยสีดำสนิท (#000000) ครับ
..ซึ่งเป็นปัญหาแน่นอน เพราะ cursor โดยปกติค่อนข้างจำเป็นอย่างยิ่งในการแสดงผลแบบ alpha (โปร่งใส)
วิธีแก้ไขง่ายๆ ก็คือเทสีอะไรก็ได้ที่ต่างจากสีที่ใช้ใน cursor ลงไปแทนส่วนโปร่งใสก่อนจากโปรแกรม Photoshop
จากนั้นค่อยก๊อปปี้ภาพมา และค่อยมาใช้เครื่องมือ Erase with: Flood Fill จิ้มลบสีที่ว่าในโปรแกรม Cursor Editor ทีหลัง
เครื่องมือที่ว่าอยู่ตามภาพด้านล่างครับ
จากนั้นก็ตกแต่งตามสะดวก..
จริงๆ อาจไม่จำเป็น ถ้าตกแต่งมาจากโปรแกรม Photoshop แล้ว
ในที่นี้ผมเพิ่มเติมตัวหนังสือลงไป
จากภาพข้างบน จะได้ cursor แบบภาพเคลื่อนไหวได้ ที่มีภาพเฟรมเดียว (ซึ่งแปลว่าไม่เคลื่อนไหวอะไร) เรียบร้อย
การจะสร้างภาพเคลื่อนไหวถัดไป.. เราก็ต้องมาสร้างเฟรมถัดไปกันต่อ
สองภาพข้างบนเป็นปุ่มสำหรับสร้าง frame ใหม่ให้กับ cursor
ต่างกันที่ insert หมายถึงการสร้างเฟรมเปล่าๆ ขึ้นมาใหม่
ขณะที่ duplicate หมายถึงการก๊อปปี้เฟรมล่าสุดขึ้นมาใหม่
ในแง่ของการทำ cursor สำหรับเคสนี้ ..ผมต้องการให้ภาพลูกศรคงเดิม ..เปลี่ยนแต่ตัวอักษรด้านล่าง
ลักษณะแบบนี้ผมเลือกที่จะ duplicate ขึ้นมา แล้วมาลบตัวหนังสือเอาทีหลังครับ
เมื่อจิ้ม duplicate ก็จะมีเฟรมฝาแฝดโผล่มา ตามภาพข้างบน
ก็จัดการเลือกและลบ-แก้ไขตัวหนังสือ ตามสะดวก
ในที่นี้ผมจะทำจนครบเฟรมตามต้องการเลยนะครับ ..ขอข้ามส่วนที่ซ้ำละกัน
สังเกตเฟรมด้านล่าง ..ในที่นี้ครบสามเฟรมตามต้องการแล้ว
สิ่งต่อไปที่จะกำหนด คือเวลาในการเปลี่ยนภาพไปยังเฟรมถัดไป
วิธีก็ง่ายๆ ครับ
เลือกเฟรมที่ต้องการกำหนดเวลา
จากนั้นก็ระบุเวลาที่ต้องการลงไปตามภาพประกอบ
จากตัวอย่าง ผมกำหนดเวลาสำหรับสองเฟรมแรกคือ 30
และเฟรมสุดท้ายคือ 60 เพื่อต้องการแสดงผลเฟรมสุดท้ายนานกว่าสองเฟรมแรกหน่อย
(..เข้าใจนะครับว่าเมื่อสิ้นสุดเวลาของเฟรมสุดท้าย มันก็จะวนไปแสดงผลเฟรมแรกใหม่)
ในส่วนของ Hot Spot เคสนี้ใช้ค่าดั้งเดิมครับ พิกัด [0,0]
ที่กำหนด 0-0 เพราะว่าปลายของลูกศรใน cursor อยู่ที่พิกัดบนสุด-ซ้ายสุดของภาพ
ซึ่งนั่นก็คือตำแหน่งพิกัด [0,0] นั่นเองครับ
ตอนต้นทิ้งไว้ว่าจะอธิบายส่วนนี้เพิ่มเติม เพราะจากตัวอย่างแรกเลยผมยกตัวอย่างพิกัด [7,2]
ทำไมถึงต่างกัน?
ขยาย cursor ให้ดูง่ายๆ ครับ..
จะเห็นว่า cursor รูปลูกศรมีส่วนปลายอยู่บริเวณมุมซ้ายบนของภาพ ซึ่งตามที่บอกครับว่าพิกัดมันคือ [0,0]
(เรานับพิกัดตัวแรกแทนแนวนอนครับ 0 ที่ซ้ายสุด ค่าเพิ่มก็ถัดไปทางขวา
ขณะเดียวกันพิกัดตัวที่สองก็แทนแนวตั้งครับ 0 คือบนสุด ค่าเพิ่มก็ถัดลงมา)
ในขณะเดียวกัน ภาพ cursor ที่เป็นรูปนิ้ว ..จะเห็นว่าตัวปลายนิ้วที่ยื่นออกมาไม่ได้มีพิกัดมุมบนซ้ายเหมือนรูปลูกศร
(..แต่กลับเหลื่อมออกมาทางขวา-ล่างเล็กน้อย ซึ่งพิกัดมันจะอยู่ประมาณ [7,2] ตามที่ยกตัวอย่างตอนแรก)
ถึงตรงนี้คงพอเข้าใจนะครับ ..ควรจะกำหนดตรงไหน อย่างไร
มีข้อพึงระวังประการหนึ่ง
ในกรณีเปลี่ยนพิกัดเป็นค่าอื่นที่ไม่ใช่ default 0-0 ..ต้องเปลี่ยนทุกเฟรมให้สัมพันธ์กันนะครับ
เว้นเสียแต่ว่าคุณอยากจะสร้าง cursor ประหลาดที่ pointer ไม่อยู่กับที่ อันนี้ก็แล้วแต่
ขณะทำ cursor สามารถวางเมาส์บริเวณ Test Area เพื่อดูผลงานสดๆ ได้ตามสะดวก
หากพอใจก็ Save ผลงานครับ
ตามนั้น
แถมท้าย
ผลลัพธ์ที่ได้จากการทดลองโปรแกรมนี้
zip file
เพิ่มเติมครับ
บังเอิญเจอผู้ให้บริการฝากไฟล์ cursor โดยเฉพาะ
ฟรี..ง่าย และไม่ต้องสมัครสมาชิก
..แปลกดีครับ และบังเอิญน่าจะเป็นประโยชน์กับกรณีนี้โดยตรง..
CursorHost.com
