Thaigraph

 

   

ค้นหา
Thaigraph หน้าฟอรั่ม Flash [Flash] วิธี zoom ย่อ-ขยาย ภาพด้วย ...
Maple Avatar ห้องแต่งตัวใหม่วิธีการเขียน Blog ส่วนตัววิธีโพสคลิปจาก Youtubeตารางข้อมูล เครดิต + Moneyวิธีการโพสกระทู้แบบรวดเร็ว
ดู: 5817|ตอบ: 2
go

[Flash] วิธี zoom ย่อ-ขยาย ภาพด้วยปุ่ม As3

Rank: 7Rank: 7Rank: 7

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


[Flash] วิธี zoom ย่อ-ขยาย ภาพด้วยปุ่ม As3
เหมาะสำหรับเว็บที่ต้องการโชว์ตัวสินค้านะค่ะ โดยวิธีการนี้ข้าพเจ้าจะ เพิ่มโค๊ดเงื่อนไขมาช่วยป้องกันไม่ให้มีการคลิก Zoom ขยายภาพ จนภาพใหญ่ล้นจอทำให้ดูไม่สวยงาม และป้องกันการคลิก Zoom ย่อภาพ จนภาพกลับด้าน หรือเล็กจนหายไปจากหน้าจอนะค่ะ

ดูตัวอย่างข้างล่างค่ะ (ให้ลองคลิกที่ปุ่ม "สีเขียว" และ "สีฟ้า" ดู)



โหลดไฟล์ต้นฉบับ เพื่อนำไปศึกษาได้ที่นี่ค่ะ ^^"
ผู้เยี่ยมชมเนื้อหาถูกซ่อนไว้ คุณจะต้องแสดงความคิดเห็นก่อนจึงจะสามารถมองเห็นเนื้อหาส่วนที่ถูกซ่อนนี้ได้


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

Rank: 7Rank: 7Rank: 7

โพสต์เมื่อ 17-4-2013 19:47 |แสดงโพสต์ทั้งหมด

ขั้นตอนที่ 1
เมื่อเปิดโปรแกรม ให้เลือกชนิดโค๊ดสคริปงานเป็นแบบ Actionscript 3.0



ขั้นตอนที่ 2
ให้คลิกที่ปุ่ม "New Layer" เพื่อสร้างเลอยร์ใหม่ขึ้นมา ที่เลเยอร์สร้างใหม่ให้ดับเบิ้ลคลิกที่ชื่อเลเยอร์ เพื่อเปลี่ยนชื่อใหม่จาก "Layer 2" เป็น "AS3" จากนั้นให้คลิกที่แม่กุญแจ เพื่อล๊อคเลเยอร์ไว้



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



ขั้นตอนที่ 4
(ยังคลิกเลือกอยู่ที่ภาพแหวน) แล้วให้ไปที่คำสั่ง Modify > Convert to Symbol... ( หรือกดปุ่มคีย์ F8)



ขั้นตอนที่ 5
ที่ช่อง "Name" ให้ตั้งชื่อ Symbol ว่า "ring"
- กำหนดชนิด Type เป็น "Movie Clip"
- ที่ Registration กำหนดให้เป็นตำแหน่งกลาง
(***จะมีผลต่อการซูมภาพ เพื่อให้ภาพวัตถุทำการซูมจากตรงกลางเข้า - ออก ทำให้ภาพไม่เคลื่อนเอียงไปด้านใดด้านหนึ่ง จนดูไม่สวยงาม)
- และคลิกปุ่ม "OK"




- ให้เปิดพาแนล Properties โดยการกดปุ่มคีย์ Ctrl+F3 (หรือไปที่คำสั่ง Window > Properties ) และให้ตั้งชื่อ symbol (ชื่อที่จะนำไปใช้ในโค๊ดสคริป) ว่า "ring"



ขั้นตอนที่ 6
ขั้นต่อไป... ให้สร้างปุ่ม 2 ปุ่ม เพื่อใช้คลิกเพิ่ม- ลดขนาดภาพแหวน จะสร้างจากโปรแกรม Flash หรือนำเข้ามาจากโปรแกรมอื่นก็ได้



ขั้นตอนที่ 7  
แล้วให้คลิกที่ภาพปุ่มที่จะใช้เป็น "ปุ่มซูมเข้า" (มีสัญลักษณ์รูป + ตรงกลาง) กำหนดเป็น Symbol (กดคีย์ F8)
- ที่ช่อง "Name" ให้ตั้งชื่อว่า "zoom_in"
- ที่ "Type" กำหนดเป็นชนิด "Button"
- และคลิกที่ปุ่ม "OK"



- (ยังคลิกเลือกที่ปุ่มซูมเข้าอยู่) ที่พาแนล Properties ให้ตั้งชื่อ symbol (ชื่อที่จะนำไปใช้ในโค๊ดสคริป) ว่า "zoom_in"



ขั้นตอนที่ 8
ให้คลิกที่ภาพปุ่มที่จะใช้เป็น "ปุ่มซูมออก" (มีสัญลักษณ์รูป - ตรงกลาง) แล้วกำหนดให้เป็น Symbol (กดคีย์ F8)
- ที่ช่อง "Name" ให้ตั้งชื่อว่า "zoom_out"
- ที่ "Type" กำหนดเป็นชนิด "Button"
- และคลิกที่ปุ่ม "OK"




- (ยังคลิกเลือกที่ปุ่มซูมออกอยู่) ที่พาแนล Properties ให้ตั้งชื่อ symbol (ชื่อที่จะนำไปใช้ในโค๊ดสคริป) ว่า "zoom_out"



ขั้นตอนที่ 9
ต่อไปนะค่ะ.... ให้คลิกเม้าส์ขวาที่เฟรมที่ 1 เลือกคำสั่ง "Action"  (หรือกดปุ่มคีย์ F9)



- แล้วให้นำโค๊ดด้านล่างนี้ไปใส่ค่ะ (คำอธิบายโค๊ดจะอยู่ด้านหลัง)

  1. //Create Code by Nookfufu2


  2. var numclick:int = 0; //<<<---สร้างตัวแปรเพื่อใช้นับจำนวนครั้งที่ทำการคลิกปุ่ม ใช้ป้องกันไม่ให้ Zoom ภาพใหญ่เกินไป - ภาพเล็กเกินไป
  3. var zoomAmount:int = 40; //<<<----สร้างตัวแปรมาใช้ในการปรับเพิ่ม - ลด ค่าระยะการ Zoom เข้า - ออก

  4. zoom_out.addEventListener(MouseEvent.CLICK, zoomout); //<---เรียกใช้เหตุการณ์ การคลิกเม้าส์(ที่ปุ่ม)เพื่อย่อภาพ

  5. //สร้างฟังก์ชั่นเงื่อนไขว่า ถ้าคลิกเม้าส์ Zoom ออก เกินจำนวนครั้งที่กำหนด ให้หยุดการขยายภาพ
  6. function zoomout (event:MouseEvent): void {
  7.    if (numclick >= 1 ) {
  8.     ring.width -= zoomAmount;
  9.     ring.height -= zoomAmount;
  10.     numclick -= 1;
  11.    } else {
  12.     ring.width == zoomAmount;
  13.     ring.height == zoomAmount;
  14.     numclick == 0;
  15.    }
  16. }

  17. //สร้างฟังก์ชั่นเงื่อนไขว่า ถ้าคลิกเม้าส์ Zoom เข้า เกินจำนวนครั้งที่กำหนด ให้หยุดการย่อภาพ
  18. zoom_in.addEventListener(MouseEvent.CLICK, zoomin); //<---เรียกใช้เหตุการณ์ การคลิกเม้าส์(ที่ปุ่ม)เพื่อขยายภาพ
  19. function zoomin (event:MouseEvent): void {
  20.    if (numclick <= 5 ) {
  21.     ring.width += zoomAmount;
  22.     ring.height += zoomAmount;
  23.     numclick += 1;
  24.    } else {
  25.     ring.width == zoomAmount;
  26.     ring.height == zoomAmount;
  27.     numclick == 5;
  28.    }
  29. }
คัดลอกไปที่คลิปบอร์ด
(ตัวอย่างค่ะ...)


ขั้นตอนที่ 10

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

- ข้าพเจ้าจะคลิกที่เครื่องมือ Text เพื่อพิมพ์ข้อความเพิ่มเติมอธิบายการใช้งานปุ่ม แต่ละปุ่ม


ขั้นตอนที่ 11
กดปุ่มคีย์ Ctrl+Enter เพื่อรันสคริป และดูผลลัพธ์



***ถ้าทำตามขั้นตอนไหนไม่ได้ให้ PM มาถามค่ะ หรือจะโพสถามต่อท้ายจากบทความนี้ก็ได้

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



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

Rank: 1

โพสต์เมื่อ 8-2-2015 18:11 |แสดงโพสต์ทั้งหมด
ขอบคุณครับ

Thaigraph

GMT+7, 24-9-2017 17:25 , Processed in 0.040299 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