ทำปุ่มเคลื่อนไหวใส่เว็บด้วย Flash MX (ตอนที่ 1)

เชื่อว่าคุณผู้อ่านหลายคนที่เคยเขียนเว็บคงไม่มีใครไม่รู้จักคำว่า Roll Over กันหรอกนะคะเพราะว่าเจ้า Roll Over นี้น่ะเป็นส่วนสำคัญส่วนหนึ่งในการทำปุ่มสำหรับลิงก์ไปยังส่วนต่างๆ สำหรับใครที่ยังไม่รู้จักก็ไม่ต้องกังวลนะคะ ในคราวนี้คุณจะได้รู้จักมันอย่างแน่นอน

เชื่อว่าคุณผู้อ่านหลายคนที่เคยเขียนเว็บคงไม่มีใครไม่รู้จักคำว่า Roll Over กันหรอกนะคะเพราะว่าเจ้า Roll Over นี้น่ะเป็นส่วนสำคัญส่วนหนึ่งในการทำปุ่มสำหรับลิงก์ไปยังส่วนต่างๆ สำหรับใครที่ยังไม่รู้จักก็ไม่ต้องกังวลนะคะ ในคราวนี้คุณจะได้รู้จักมันอย่างแน่นอน


รูปที่ 1 ปุ่มแบบพื้นฐาน

สำหรับลิงก์ในหน้าเว็บนั้น ปุ่มแบบพื้นฐานก็จะเป็นตัวหนังสือแล้วก็มีขีดเส้นใต้อยู่ด้วย เมื่อเวลาที่คุณเอาเมาส์ไปวางก็จะมีรูปมือปรากฏขึ้น ดังรูปที่ 1 ซึ่งปุ่มลิงก์แบบนี้อาจจะใช้รูปภาพแทนตัวหนังสือก็ได้นะคะ แต่ส่วนใหญ่แล้วถ้าปุ่มลิงก์นั้นเป็นรูปภาพก็มักจะใช้เป็นแบบ Roll Over มากกว่า ก็คือเมื่ออยู่ในภาพปกติ เมื่อเอาเมาส์ไปวางก็จะเปลี่ยนเป็นอีกรูปหนึ่ง ดังรูปที่ 2-3


รูปที่ 2 Roll Over แบบปกติ


รูปที่ 3 Roll Over แบบเอาเมาส์มาวาง

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

รู้จักกับ Flash MX

เครื่องมือตัวเก่งที่จะช่วยให้ Roll Over ของคุณ ดูมีชีวิตชีวาที่จะแนะนำกันในฉบับนี้ก็คงหนีไม่พ้น Flash นี่แหละค่ะ โปรแกรมตัวนี้มีความสามารถในการทำภาพเคลื่อนไหวมากมายอยู่แล้ว แต่สำหรับบทความตอนนี้ผู้อ่านควรจะมีความรู้เกี่ยวกับการใช้งานโปรแกรม Flash พื้นฐานก่อนนะคะ เรามาลองดูกันทีละแบบเลยค่ะ

แบบแรก ปุ่มตัวหนังสือเคลื่อนไหวได้

เริ่มจากเปิดโปรแกรม Flash ขึ้นมาก่อน คลิ้กเมาส์ที่รูปตัว A ที่ทูลบาร์แล้วพิมพ์ข้อความที่ต้องการลงไป ดังรูปที่ 4

ให้คุณสังเกตที่ Timeline ใน Layer1 จะมีแถบสีขาวและจุดสีขาวเกิดขึ้นแสดงว่ามีข้อมูลอยู่ในเลเยอร์นั้นแล้ว


รูปที่ 4 พิมพ์ข้อความใน Flash


           รูปที่ 5 เริ่มทำปุ่ม

ต่อมาคลิ้กที่เมนู Insert > Convert to Symbol จะได้ดังรูปที่ 5

เลือกที่ Button ใส่ชื่อตามที่ต้องการ สำหรับชื่อนี่จะใส่หรือไม่ใส่ก็ได้นะคะ แต่ควรจะใส่เพื่อใช้ในการอ้างอิงต่อไป กดปุ่ม OK ดังรูปที่ 6


                 รูปที่ 6


รูปที่ 7 สัญลักษณ์ของปุ่ม

ให้สังเกตที่ข้อความที่คุณพิมพ์ลงไปเมื่อครู่จะมีสัญลักษณ์ของ Button อยู่ ดังรูปที่ 7
ต่อมาให้คลิ้กที่รูปลูกศรที่ทูลบาร์ แล้วดับเบิลคลิ้กที่สัญลักษณ์ของปุ่มจากรูปที่ 7 จะได้ดังรูปที่ 8


                 รูปที่ 8


                 รูปที่ 9

จะเห็นได้ว่า Timeline เปลี่ยนไปเป็นสถานะของการทำปุ่มโดยมีช่อง UP,OVER,DOWN และ HIT โดยที่ข้อความที่เราพิมพ์ไปนั้นจะอยู่ในช่อง UP ตอนนี้เรามาทำข้อความเคลื่อนไหวในช่อง Down กัน โดยการคลิ้กเมาส์ข้างขวาที่ช่อง DOWN เลือก Insert Keyframe ดังรูปที่ 9

ตอนนี้เราก็จะได้ข้อมูลในช่อง DOWN ที่เหมือนกับในช่อง UP ในส่วนนี้คุณจะทำการเปลี่ยนสีของตัวอักษรก็ได้นะคะ โดยไปที่หน้าต่าง Properties แล้วทำการเปลี่ยนสี ขนาด รูปแบบ หรือลักษณะอื่นๆ ได้ตามใจชอบ ดังรูปที่ 10

ในส่วนนี้ผู้เขียนจะทำการเปลี่ยนสีตัวอักษรเป็นสีเขียว แต่รูปแบบและขนาดเท่าเดิม


    รูปที่ 10 หน้าต่าง Properties


        รูปที่ 11 สถานะของปุ่ม

ต่อมาเราจะมาทำตัวอักษรเคลื่อนไหวกันแล้วนะคะ ก่อนอื่นเราต้องเปลี่ยนตัวอักษรนั้นให้เป็น Movie Clip เสียก่อน โดยไปที่เมนู Insert > Convert to Symbol แล้วเลือก Movie Clip ใส่ชื่อตามต้องการดังรูปที่ 1

กดปุ่ม OK ทีนี้คุณก็จะได้ตัวอักษรสีเขียวที่มีสัญลักษณ์ของ Movie Clip ดังรูปที่ 12


                รูปที่ 12


      รูปที่ 13 ส่วนของการทำงาน

ต่อมาดับเบิลคลิ้กที่ตัวอักษรสีเขียวจากรูปที่ 12 จะได้ดังรูปที่ 13

ข้อมูลจาก : http://www.arip.co.th
โดย มรกต อุ่นเสรี