จะจ๊างงง... กลับมาอีกแล้วกับ how to มั่วซั่วปนกันไปหมด
เดี๋ยวพิกเซล เดี๋ยวตัดเส้น โผล่มาคราวนี้เป็นแฟลชเฉยเลย 555
เนื่องจากว่ามีเพื่อนกำลังจะทำงานแฟลช แล้วเกริ่นๆ มาเกี่ยวกับการทำปุ่ม
แล้ววันนี้ก็ว่างๆ พอสมควร เรามาลองทำปุ่มในแฟลชแบบมี rollOut กันดีกว่า
อาจจะงงว่าไอ้แบบมี rollOut มันเป็นยังไง ลองเทียบกับปุ่มแบบพื้นฐานที่มีมากับแฟลช
(symbol แบบ button) จะมีอยู่ 4 เสตทคือ on over down hit
ซึ่งจะเห็นการเปลี่ยนแปลงเมื่อเอาเมาส์ไปวางที่ปุ่ม (rollOver)
แต่ไม่มีเสตทสำหรับเวลาที่เราเอาเมาส์ออกจากปุ่ม (rollOut)
ซึ่งถ้าเป็นปุ่มที่มีการอนิเมทจะทำให้เกิดการกระตุกเวลาเอาเมาส์ออก
เราเลยจะมาทำปุ่มแบบที่มีการอนิเมทตอน rollOut กันด้วย
เวิร์คช็อปนี้เหมาะกับผู้ที่มีพื้นฐานแฟลชมานิดหน่อยแล้ว
ใช้ actionscript2 นิดหน่อย เอาล่ะ เริ่มดีกว่า
เริ่มจากสร้างไฟล์แฟลชขึ้นมาใหม่ เอากราฟิกปุ่มไปวางไว้
Convert to Symbol (F8) ตั้งชื่อ แล้วเลือกชนิดซิมโบลเป็น Movieclip
ดับเบิ้ลคลิ๊กเข้าไปภายในมูวี่คลิปที่เพิ่งสร้างไป อนิเมทหน้าตาปุ่มเมื่อถูก RollOver
แล้วกลับมาเป็นหน้าตาเดิมตอนวางปุ่มไว้เฉยๆ
สร้างเลเยอร์ใหม่ 2 เลเยอร์ เลเยอร์นึงเอาไว้สำหรับตั้งชื่อเฟรม (label)
อีกเลเยอร์ เอาไว้ใส่ actionscript โดยวางตำแหน่งคีย์เฟรมไว้ตามรูป
สำหรับใครที่ยังไม่คุ้นชินการใช้งาน label มันก็คือการตั้งชื่อให้เฟรมต่างๆ
จากที่มันเคยเป็น เฟรม 1, 2, 3, ... ก็จะมีชื่อเรียกเพิ่มตามที่เราตั้งไว้ให้เป็นศรีแก่เฟรม
มีประโยชน์มากในการใช้ร่วมกับ actionscript
(ถ้าอยากรู้เพิ่มเติมว่ามันมีประโยชน์ยังไงบ้าง คอมเม้นท็ไว้เผื่อบอกเอนทรี่หน้า 555)
วีธีการตั้ง label คือคลิ๊กที่คีย์เฟรม ดูที่กล่อง properties jpg>แล้วใส่ชื่อในช่อง label เลย
ในที่นี้เราตั้งชื่อเฟรมเป็น $over สำหรับตำแหน่งเมื่อเอาเมาส์ไปวาง
และ $out สำหรับตำแหน่งเมื่อเอาเมาส์ออก
ส่วนคีย์เฟรมที่เป็น actionscript ภายในปุ่ม สั้นๆ ง่ายๆ แค่
สำหรับคนที่ไม่คุ้นชินวิธีใส่สคริปต์ลงบนคีย์เฟรมคือคลิ๊กที่คีย์เฟรมแล้ว F9
เป็นอันเสร็จขั้นตอนภายในปุ่ม ทีนี้ ออกมาจากมูวี่คลิป มาที่เสตจด้านนอก
ทำการตั้งชื่อให้มูวี่คลิปนี้ด้วย โดยการคลิกที่มูวี่คลิป ไปตั้งชื่อที่กล่อง properties
เอาไว้ใช้สำหรับการอ้างอิงกับ actionscript เราตั้งเป็น btnSample
จากนั้นสร้างเลเยอร์ขึ้นมาใหม่เพื่อเอาไว้ใช้ใส่สคริปต์
โดยบนเฟรมนั้น ใส่สคริปต์ตามนี้
เป็นอันเสร็จพิธีการ publish ออกไปใช้งานได้เลยจ้า เยเย
ทีนี้มาลองทำความเข้าใจสคริปต์ที่เพิ่งใส่ไปตะกี๊กัน
btnSample คือชื่อของมูวี่คลิปตามที่เราได้ตั้งเอาไว้
btnSample.onRollOver หมายถึงเมื่อเอาเมาส์ไปวางที่มูวี่คลิป
btnSample.onRollOver = function(){...} คือ เมื่อเอาเมาส์ไปวางที่มูวี่คลิป btnSample ให้ทำงานตามฟังก์ชั่นนี้
ภายในฟังก์ชั่น
this.gotoAndPlay("$over"); โดย this ในที่นี้หมายถึง btnSample
ก็คือให้ btnSample วิ่งไปที่เฟรมที่ชื่อว่า $over
พอไปที่เฟรมนั้น ก็ทำให้ภายในปุ่มอนิเมทตามไทม์ไลน์ที่เราได้ทำไว้ก่อนหน้านี้นั่นเอง
ลองโหลดไฟล์ FLA ไปดูกันได้
ใครสงสัย ไม่เข้าใจตรงไหนเม้นท์ไว้ได้เลยนะ
หวังว่าจะเป็นประโยชน์ได้ไม่มากก็น้อย
