ความจริงแล้ว ฟังก์ชั่นนี้มีมาตั้งแต่ AIR 1.0 แล้วครับ แต่ผมเพิ่งค้นพบว่ามันมี!!!
จากกระทู้ Tutorial ที่
ไทยแฟลชเดฟ (
จิ้มที่นี่ )
พี่คีได้นำเอาคำสั่งจาก AIR มาสอนให้ลองเล่นกันครับ
ผมเลยนำเอา Tutorial จากลิงค์ มาดัดแปลงเล็กน้อยและแจกจ่ายไปให้เล่นกันอีกที
เอ บางคนอาจจะงง AIR นี่มันอะไร(วะ)
อะ เดี๋ยวผมจะเกริ่นนำให้ฟังคร่าวๆ
AIR หรือ
Adobe Integrated Runtimeคือแพล็ตฟอร์มหนึ่งของ Flash ที่รันเป็นโปรแกรมบน Desktop ครับ
หรืออธิบายให้ง่ายลงไปอีกคือ
Flash ในภาคที่เป็น Desktop Application* นั่นเอง
(*แปล Desktop Application = โปรแกรมที่รันบนเครื่อง ไม่ได้รันบนเว็บ เช่น Microsoft Word เป็นต้น)ด้วยความที่มันป็น Desktop Application มันก็เลยมีคำสั่งแปลกๆ ใหม่ๆ
ที่ช่วยให้ทำงานบน Desktop Application ได้ดีขึ้น อย่างเช่น การเขียนไฟล์ลงเครื่อง (AIR 1.5)
การเข้าถึงไฟล์บนเครื่อง การนำไฟล์/ข้อความจากคลิปบอร์ด เป็นต้น
รวมไปถึง การลากไฟล์ ลงไปในโปรแกรมที่เขียนจาก AIR ด้วย
(คือ อย่างผมเนี่ย เวลาเปิดไฟล์ ผมขี้เกียจกด File > Open ผมก็จัดการ ลากไฟล์ใส่โปรแกรมเลย
ง่ายกว่าอีก ในกรณีที่เปิดโฟลเดอร์ทิ้งไว้อยู่แล้ว)
ซึ่งการจะเขียน AIR นั้นจะต้องมีโปรแกรม Flash CS 3 ขึ้นไป
แต่สำหรับ Flash CS 3 นั้น จะต้องไปอัพเดตเป็นเวอร์ชั่น 9.0.2 ก่อน
แล้วลงตัว Add-on เพิ่มเข้าไปให้สามารถสร้างไฟล์ AIR ได้
แต่ถ้าใครใช้ Flash CS 4 ก็สบายหน่อย เพราะเลือก New Flash File (Adobe AIR) ได้เลยจ้ะ
หรือถ้าฝ่ายโปรแกรมเมอร์ที่ทำงากับ Flex อยู่แล้ว
ก็สามารถเลือกคอมไพล์จาก Flex Builder ให้ทำเป็น AIR ได้ทันทีเช่นกัน
สรุปว่า AIR สามารถสร้างได้จาก 3 ทางคือ
- Flash IDE หรือ Flash CS 3, Flash CS 4
- FlexSDK/AIRSDK (หาโหลดได้ฟรี จากเว็บของ Adobe)
- Flex Builder 3
อ้อ.. ใช้
ActionScript 3.0 ในการเขียนเท่านั้นครับ
เกริ่นนำไปบ้างแล้ว มาเข้าสู่เนื้อหาจริงๆ กันเถอะครับ (เดี๋ยวยาว)
เอาล่ะ จาก Tutorial (ลิงค์อยู่ด้านบน) ผมจึงเอามาลองทำเป็น แกเลอรี่รูป (เขียนทับศัพท์ถูกมั้ยนี่)
แบบง่ายๆ ดู เผื่อใครปิ๊งไอเดียจะเอาไปพัฒนาต่อ ก็ไม่ว่ากันนะจ๊ะ
หลักการทำงานของโปรแกรมคือ
1. มีการลากไฟล์เข้ามาในพื้นที่ที่กำหนด
2. โปรแกรมตรวจจับได้ว่ามีเหตุการณ์การลากไฟล์เข้ามา (NativeDragEvent.NATIVE_DRAG_ENTER)
3. ตรวจสอบนามสกุลไฟล์ว่าตรงตามที่เราอนุญาตหรือไม่ (ใช่ครับ เรากำหนดได้ว่า จะรับไฟล์อะไร ไม่รับอะไร)
4. เมื่อมีการปล่อยเมาส์ (คือทิ้งไฟล์ลงพื้นที่ที่กำหนด) ก็จะทำการเพิ่มไฟล์เหล่านั้น ลงไปใน TileList
5. TileList ทำการแสดงชื่อ และรูปภาพขนาดเล็ก (จริงๆ คือรูปขนาดเท่าของเดิมแต่โดนบีบให้อยู่ในพื้นที่น่ะครับ)
6. รอจับเหตุการณ์ ถ้ามีการดับเบิ้ลคลิกที่ Thumbnail ให้แสดงรูปใหญ่
7. โดยมี MovieClip ขนาดใหญ่ + UILoader รอรับพาธรูปอยู่แล้ว
คลาสที่ใช้เพิ่มเติม (Import)แน่นอนครับว่า มันไม่ได้ใช้คลาสพื้นฐานที่ไม่ต้อง import ดังนั้นเราจึงต้อง import เข้ามาให้โปรแกรมรู้จัก
คลาสที่จำเป็นครับ
- flash.desktop.
NativeDragManager => เป็นคลาสที่จัดการทุกอย่างที่เกี่ยวกับการลาก-วางไฟล์ครับ
- flash.desktop.
Clipboard => คลาสตัวนี้จะจำว่า มีไฟล์อะไรที่กำลังโดนลากอยู่บ้าง
- flash.desktop.
ClipboardFormats => คลาสรูปแบบของข้อมูลที่เราต้องการจากคลิปบอร์ดครับ
- flash.events.
NativeDragEvent => Event ที่เกี่ยวกับการลาก-วางไฟล์
- fl.events.
ListEvent => Event ที่เกี่ยวกับ List ทั้งหลาย เช่น คลิกวัตถุในลิสต์, ข้อมูลในลิสต์เปลี่ยน ฯลฯ
- com.korstudio.utils.EasyFilter => เอ่อ... คลาสขี้เกียจส่วนตัวของผมเองครับ (แนบมาในไฟล์ rar แล้ว)
โค้ดทั้งหมด(ผมว่าโหลด fla ไปเปิดง่ายกว่า
)
ตัวอย่างโปรแกรมหน้าต่างหลัก
เวลาลากไฟล์มาในช่อง (ช่องที่รับไฟล์มีการเปลี่ยนสีด้วย)
หลังจากวางแล้วก็แสดงเป็น Thumbnail เล็กๆ
ดับเบิ้ลคลิกที่ Thumbnail ก็จะได้รูปใหญ่ครับ
แต่ว่ามันเป็นเพียงแค่ ตัวอย่างเท่านั้นครับ!!! (ผ่างงง)
หากนำไปใช้จริง เราต้องปรับปรุงอีกมากครับ แต่ก็คงไม่เกินความสามารถของพี่น้องแน่นอน
โหลดไฟล์ fla: (
จิ้มที่นี่ )
โหลดไฟล์ AIR ไปลองเล่น: (
จิ้มที่นี่ ) <= ขั้นตอนเหมือนลงโปรแกรมครับ ไม่ยากๆ
**ต้องลง AIR Runtime ก่อนนะครับ หาโหลดจากเว็บ Adobe ได้เลย**(ดัดแปลงจาก
http://korstudio.exteen.com/20090514/ksxd-flash-07-flash-app-flash-air-2 )
