Thaigraph

 

   

ค้นหา
Thaigraph หน้าฟอรั่ม Flash [Flash] วิธี zoom ย่อ-ขยาย ภาพด้วย ...
Maple Avatar ห้องแต่งตัวใหม่วิธีการเขียน Blog ส่วนตัววิธีโพสคลิปจาก Youtubeตารางข้อมูล เครดิต + Moneyวิธีการโพสกระทู้แบบรวดเร็ว
ดู: 5570|ตอบ: 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, 27-6-2017 10:37 , Processed in 0.057987 second(s), 23 queries .

Powered by Discuz! X1.5

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