[Flash]วิธีทำ Change image on mouse over

NOOKFUFU2

[Flash] วิธีทำ Change image on mouse over

มันก็คือเมื่อนำเม้าส์มาวางบนภาพ Flash ภาพ Flash ก็จะภาพเปลี่ยนไปเป็นอีกภาพแทน นอกจากนี้เรายังคลิกที่ภาพเพื่อสั่งให้คริปทำการเปิดหน้าเว็บที่ต้องการขึ้นมาแสดงได้ (สคริปจะคล้ายกับบทความหลังๆ แต่ก็มีความแตกต่างกันบ้างเพียงเล็กน้อย)

เราสามารถนำไปประยุกต์กับใช่กับงานเว็บ อย่างเช่น สร้างแบนเนอร์ หรือโฆษณา ต่างๆได้ค่ะ


(ตัวอย่าง...ให้ลองเอาเม้าส์เลื่อนเข้ามาในภาพ Flash)

(ปล. ที่ภาพ Flash ตัวข้างบนนี้ มันลิงค์ไปเปิดเว็บอื่นไม่ได้ เพราะว่าถูกบอร์ดดิสคัสล๊อคสคริปกับบอทยิงไว้ เวลาคลิกที่ภาพแล้วมันเลยเงียบค่ะ(ถูกล๊อคโค๊ดลิงค์อยู่) แต่ถ้าเอาไปใส่กับหัวแบนเนอร์หน้าเว็บ มันก็สามารถใช้ได้ตามปกติค่ะ ไม่มีปัญหาอะไร)

***ไฟล์ต้นฉบับเพื่อนำไปศึกษาประกอบค่ะ Flash cs6
[hide][/hide]

NOOKFUFU2

1. ให้เปิดโปรแกรม Flash ขึ้นมาโดยเลือกสร้างไฟล์ใหม่เป็น Actionscript 3.0



2. เปิดแฟ้มที่เก็บภาพ Image ที่เตรียมไว้ทั้ง 2 ภาพ และลากมาปล่อยที่หน้าจอโปรแกรม Flash


3. แยกภาพ Image ออกเป็นภาพละ 1 เลเยอร์ โดยให้ภาพที่เป็นสี อยู่เลเยอร์บน (ตั้งชื่อเลเยอร์ว่าอะไรก็ได้) และภาพที่เป็นเส้นสีดำให้อยู่เลเยอร์ล่าง (ตั้งชื่อเลเยอร์ว่าอะไรก็ได้)


4. จากนั้นให้คลิกที่เลเยอร์ใดก่อนก็ได้ และให้คลิกที่เฟรมี่ 10 แล้วกดปุ่ม F5 (หรือคลิกเม้าส์ขวาเลือกคำสั่ง Insert frame)
5. ทำให้เหมือนกันทั้ง 2 เลเยอร์



6. ให้คลิกที่เลเยอร์ที่เป็นภาพสี (เลเยอร์บน) และกดปุ่ม F8 เพื่อแปลงภาพ Image ให้เป็น Symbol (หรือไปที่คำสั่ง Modify > Convert to Symbol...)

7. ตั้งชื่อ Symbol ว่าอะไรก็ได้ และคลิกปุ่ม "OK"


8. ให้คลิกที่เฟรมแรกของเลเยอร์บน และคลิกเม้าส์ขวา เลือกคำสั่ง Create Motion Tween


9. จากนั้นให้คลิกเลือกที่เฟรมที่ 10 และคลิกเม้าส์ขวา เลือกคำสั่ง Insert Keyframe > All


10. จากนั้นให้คลิกที่เลเยอร์ ภาพสี (เลเยอร์บน) และเปิดพาแนล Properties ขึ้นมา (Window > Properties)
11. ที่พาแนล Properties ให้ตั้งชื่อตัวแปรว่า "Imagecolor"
12. ที่ Color Effect  ให้กำหนด Style เป็น Alpha
13. เลื่อนแถบ Alpha ให้เท่ากับ 0


14. ให้สร้างเลเยอร์ใหม่ขึ้นมาอีกเลเยอร์ค่ะ


15. คลิกที่เลเยอร์ใหม่ และกดปุ่ม F9 (หรือคลิกเม้าส์ขวา และ เลือกคำสั่ง Action)
16. กรอกโค๊ดสคริปลงไปดังนี้เค่ะ

1. stop();
   
2. Imagecolor.addEventListener
   
3. (MouseEvent.ROLL_OUT, Image_out)
   
4. function Image_out(event:MouseEvent):void{this.gotoAndStop(1);
   
5. }
   
6. Imagecolor.addEventListener
   
7. (MouseEvent.ROLL_OVER, Image_over)
   
8. function Image_over(event:MouseEvent):void{this.play();
   
9. }

คัดลอกไปที่คลิปบอร์ด

(ตัวอย่าง...)


17. ที่เลเยอร์ใหม่... ให้คลิกที่เฟรมที่ 10 และคลิกเม้าส์ขวาเลือกคำสั่ง Insert Keyframe


18. แล้วให้กดปุ่ม F9 ที่เฟรมที่ 10 ใส่โค๊ดสคริปลงไปว่า

1. stop ();

คัดลอกไปที่คลิปบอร์ด

19. กดปุ่ม Ctrl+Enter เพื่อรันFlash



หากต้องการให้ภาพที่เฟสไปมาได้นั้นสามารถคลิกเพื่อลิงค์ไปยังที่เว็บต่างได้ด้วย ก็ให้ใส่โค๊ดเพิ่มลงไปดังนี้ค่ะ

1. Imagecolor.addEventListener
   
2. (MouseEvent.CLICK, Image_go)
   
3. function Image_go(event:MouseEvent):void{
   
4. var request:URLRequest = new URLRequest("http://www.thaigraph.com");
   
5. navigateToURL(request);
   
6. }

คัดลอกไปที่คลิปบอร์ด

(ตัวอย่าง นำโค๊ดมาเพิ่มใส่ต่อท้าย)


แล้วแต่จะนำไปประยุกต์ใช้นะค่ะ

บทความโดย NOOKFUFU2
(ขอสงวนสิทธิ์ให้เผยแพร่เฉพาะในเว็บไทยกราฟเท่านั้น!!!)