หน้า: [1]
 
ผู้เขียน หัวข้อ: ลากไฟล์ใส่ Flash App ด้วย Flash และ AIR  (อ่าน 6765 ครั้ง)
0 สมาชิก และ 1 ขาจร กำลังดูหัวข้อนี้
ความจริงแล้ว ฟังก์ชั่นนี้มีมาตั้งแต่ 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 )
บันทึกการเข้า

น่าจะเป็นช่องเดียวเลยเนาะ

วางไฟล์ลงไปปุ๊บก็เปลี่ยนเป็นภาพตัวอย่างในช่องนั้นทันทีเลย

พอคลิ๊กก็เป็นรูปใหญ่อย่างที่ว่า




แต่ก็เป็นเพียงแค่ความคิดเท่านั้น!!!  (ผ่างงง)
แต่ก็คงไม่เกินความสามารถของพี่น้องแน่นอน  เจ๋ง
บันทึกการเข้า

เราก็เปลี่ยนจาก dropArea_mc เป็น picPanel ครับ
เสร็จเลย หยี
บันทึกการเข้า

เมพขิงๆ  (แจ๋ว แจ๋ว)
เดี๋ยวของลองโหลดไปศึกษาดูก่อนนะครับ  กรี๊ดดดดด
บันทึกการเข้า

+ (เหงื่อแตกพลั่ก) ทำไมเดี๋ยวนี้มองสคริป AS เยอะๆ แล้วเหมือนอ่านภาษาต่างดาวเลยนะ  ง่ะ
บันทึกการเข้า

ผมก็เริ่มไปไกลแล้วนะ  เริ่มไกล จาก as อะ  ฮือๆ~
บันทึกการเข้า

ล้ำลึกคนึงหาในดวงจิต ใจเคยคิดตัดสวาทมิอาจสิ้น
ดั่งก้านบัวหักกลางชลาสินธุ์ ผิว่าสิ้นไร้เยื่อยังเหลือใย
AS 3.0  โวย ฮือๆ~
ยังไม่ได้เริ่มศึกษา 3.0 เลย ฮือๆ~ ฮือๆ~ ฮือๆ~
บันทึกการเข้า
 อู้ย.. หูย.. งั้น ไว้ผมจะทำบทความสอน AS 3.0 ตั้งแต่เริ่มต้นละกันนะครับ
ตอนนี้ขอเคลียร์งานก่อนเด้อ
บันทึกการเข้า

 กรี๊ดดดดด สุดยอด
บันทึกการเข้า

หน้า: [1]
 
 
Powered by MySQL Powered by PHP Powered by SMF 1.1.21 | SMF © 2006-2007, Simple Machines | Thai language by ThaiSMF Valid XHTML 1.0! Valid CSS!