Thaigraph

 

   

ค้นหา
Thaigraph หน้าย่อย Flash [Flash]วิธีทำ Change image on mouse over
Maple Avatar ห้องแต่งตัวใหม่วิธีการเขียน Blog ส่วนตัววิธีโพสคลิปจาก Youtubeตารางข้อมูล เครดิต + Moneyวิธีการโพสกระทู้แบบรวดเร็ว
ดู: 4163|ตอบ: 1
go

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

Rank: 7Rank: 7Rank: 7

โพสต์เมื่อ 27-2-2013 17:43 |แสดงโพสต์ทั้งหมด

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

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

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


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

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

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

ไฟล์แนบ: คุณจำเป็นต้องเข้าสู่ระบบก่อนจึงจะสามารถดูและดาวน์โหลดไฟล์แนบได้ หากยังไม่มีแอคเคานต์หรือยังไม่ได้เป็นสมาชิก กรุณาสมัครสมาชิก
บางบทความคุณจำเป็นต้องสมัครสมาชิกแบบ VIP และ SUPERVIP ถึงจะเข้าอ่านบทความได้

Rank: 7Rank: 7Rank: 7

โพสต์เมื่อ 27-2-2013 17:45 |แสดงโพสต์ทั้งหมด
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
(ขอสงวนสิทธิ์ให้เผยแพร่เฉพาะในเว็บไทยกราฟเท่านั้น!!!)

ไฟล์แนบ: คุณจำเป็นต้องเข้าสู่ระบบก่อนจึงจะสามารถดูและดาวน์โหลดไฟล์แนบได้ หากยังไม่มีแอคเคานต์หรือยังไม่ได้เป็นสมาชิก กรุณาสมัครสมาชิก
บางบทความคุณจำเป็นต้องสมัครสมาชิกแบบ VIP และ SUPERVIP ถึงจะเข้าอ่านบทความได้

Thaigraph

GMT+7, 24-3-2017 11:20 , Processed in 0.046625 second(s), 23 queries .

Powered by Discuz! X1.5

© 2001-2010 Comsenz Inc. Thai Language by DiscuzThai! Team.