Thaigraph

 

   

ค้นหา
Thaigraph หน้าฟอรั่ม Flash [Flash]วิธีทำ Change image on mouse over
Maple Avatar ห้องแต่งตัวใหม่วิธีการเขียน Blog ส่วนตัววิธีโพสคลิปจาก Youtubeตารางข้อมูล เครดิต + Moneyวิธีการโพสกระทู้แบบรวดเร็ว
ดู: 4562|ตอบ: 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-9-2017 17:31 , Processed in 0.041988 second(s), 23 queries .

Powered by Discuz! X1.5

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

Top 10 Best Sellers in Clothing for 2017 Top 10 Best Sellers in Clothing Best Sellers in Clothing
Top 10 Best Sellers in Books reviewer 2017 Top 10 Best Sellers in Books Best Sellers in Books