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

NOOKFUFU2

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

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



โหลดไฟล์ต้นฉบับ เพื่อนำไปศึกษาได้ที่นี่ค่ะ ^^"

ผู้เยี่ยมชมเนื้อหาถูกซ่อนไว้ คุณจะต้องแสดงความคิดเห็นก่อนจึงจะสามารถมองเห็นเนื้อหาส่วนที่ถูกซ่อนนี้ได้

NOOKFUFU2

ขั้นตอนที่ 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. 
   
3. 
   
4. var numclick:int = 0; //<<<---สร้างตัวแปรเพื่อใช้นับจำนวนครั้งที่ทำการคลิกปุ่ม ใช้ป้องกันไม่ให้ Zoom ภาพใหญ่เกินไป - ภาพเล็กเกินไป
   
5. var zoomAmount:int = 40; //<<<----สร้างตัวแปรมาใช้ในการปรับเพิ่ม - ลด ค่าระยะการ Zoom เข้า - ออก
   
6. 
   
7. zoom_out.addEventListener(MouseEvent.CLICK, zoomout); //<---เรียกใช้เหตุการณ์ การคลิกเม้าส์(ที่ปุ่ม)เพื่อย่อภาพ
   
8. 
   
9. //สร้างฟังก์ชั่นเงื่อนไขว่า ถ้าคลิกเม้าส์ Zoom ออก เกินจำนวนครั้งที่กำหนด ให้หยุดการขยายภาพ
   
10. function zoomout (event:MouseEvent): void {
    
11.    if (numclick >= 1 ) {
    
12.     ring.width -= zoomAmount;
    
13.     ring.height -= zoomAmount;
    
14.     numclick -= 1;
    
15.    } else {
    
16.     ring.width == zoomAmount;
    
17.     ring.height == zoomAmount;
    
18.     numclick == 0;
    
19.    }
    
20. }
    
21. 
    
22. //สร้างฟังก์ชั่นเงื่อนไขว่า ถ้าคลิกเม้าส์ Zoom เข้า เกินจำนวนครั้งที่กำหนด ให้หยุดการย่อภาพ
    
23. zoom_in.addEventListener(MouseEvent.CLICK, zoomin); //<---เรียกใช้เหตุการณ์ การคลิกเม้าส์(ที่ปุ่ม)เพื่อขยายภาพ
    
24. function zoomin (event:MouseEvent): void {
    
25.    if (numclick <= 5 ) {
    
26.     ring.width += zoomAmount;
    
27.     ring.height += zoomAmount;
    
28.     numclick += 1;
    
29.    } else {
    
30.     ring.width == zoomAmount;
    
31.     ring.height == zoomAmount;
    
32.     numclick == 5;
    
33.    }
    
34. }

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

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


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

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


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



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

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

Chirokung

ขอบคุณครับ