รายละเอียดบริการลงโฆษณา
 บริการจดโดเมนเนม เว็บไซด์ .Com, .Net, .Org เพียง 550 บาท / ปี    สำหรับโดเมนอื่นๆ คลิกเพื่อดูรายละเอียด สายด่วน WebSite, Domain, Hosting
 
หน้าแรกเว็บไทยดีดี      บทความรู้      เว็บบอร์ด      บริการเว็บไซต์      จดโดเมน      โฮสติ้ง ติดต่อเรา แจ้งชำระเงิน
 
ทำปุ่มเคลื่อนไหวใส่เว็บด้วย Flash MX (ตอนที่ 1) จัดทำโดย : มรกต อุ่นเสรี พิมพ์

ทำปุ่มเคลื่อนไหวใส่เว็บด้วย 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
โดย มรกต อุ่นเสรี

คุณอาจสนใจ
เทคนิคการหมุนภาพแบบสั่งองศาได้
Lek (46,349 - 27 มิ.ย. 49)
การค้นหา และแทนที่คำในเอกสาร Web Page
Mr.GuruZ (37,064 - 05 ก.ย. 49)
เทคนิคการทำอักษรเงาตกทอด
ล่องลอย (42,327 - 01 ส.ค. 49)
แนะนำการใช้งาน Filter -> Texture
first (79,212 - 28 ม.ค. 51)
การตั้งค่าหน้ากระดาษ
นายนุก (23,980 - 07 ก.พ. 51)
วิธีป้องกันไวรัสโดยการเขียนไฟล์ autorun.inf ลงใน Handy Drive
เว็บไทยดีดี (72,143 - 25 ส.ค. 50)
Javascript HV menu นำข้อมูลจาก DB มาแสดง
Zerohate (36,196 - 19 ม.ค. 51)
การกำหนดรูปแบบตัวอักษร HTML
สายลม (45,080 - 04 มิ.ย. 49)
หน้าแรกเว็บไทยดีดี      บทความรู้      เว็บบอร์ด      บริการเว็บไซต์      จดโดเมน      โฮสติ้ง ติดต่อเรา แจ้งชำระเงิน
บริษัท เว็บไทยดีดี จํากัด ที่อยู่ 154 ซอยสุขศรีเฉลิมพจน์ แขวงวงศ์สว่าง เขตบางซื่อ กทม. 10800
โทร. 02-910-9930-1 แฟกซ์ 02-910-9931 กด 5
©
2005-2014 All rights reserved. เลขทะเบียนพาณิชย์ 0105549132957