ความจริงแล้ว ฟังก์ชั่นนี้มีมาตั้งแต่ 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 อยู่แล้ว
ก็สามารถเลือกคอมไพล์จาก Fex 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 แล้ว)

สิ่งที่ต้องวาด/เตรียม
- พื้นที่สำหรับวางไฟล์ที่ลาก
  วาดเป็นขนาดเท่าไหร่ก็ได้ครับ แล้วทำเป็น MovieClip ตั้ง Instance name ว่า dropArea_mc
- ที่แสดง Thumbnail
  เปิดหน้าต่าง Components (Ctrl+F7) แล้วลาก TileList จากหมวด User Interface มาวางครับ
- ที่แสดงภาพใหญ่
  สร้าง MovieClip มาอันหนึ่ง ด้านในให้วาดกรอบสี่เหลี่ยมใหญ่ๆ ไว้
  แล้วก็ลาก Component ที่ชื่อ UILoader มาวางครับ ตั้ง Instance Name ว่า loader
  จากนั้นวาดรูปปุ่มปิด ทำเป็น Button แล้วตั้ง Instance Name ว่า close_btn
  ตามรูปด้านล่างนี้ครับ

  จากนั้นก็ตั้ง Instace name ให้ Symbol ตัวนี้ว่า bigPanel ครับ (เอามาวางบน Stage ก่อนนะครับ แล้วค่อยตั้ง)

เริ่มทำเลยดีกว่าครับ

1. ขั้นแรก เราก็ต้อง import คลาสที่จำเป็นก่อน (ตามที่ลิสต์ไว้ด้านบนเลย)

import flash.desktop.NativeDragManager;
import flash.events.NativeDragEvent;

import fl.events.ListEvent;

import flash.desktop.Clipboard;
import flash.desktop.ClipboardFormats;

import com.korstudio.utils.EasyFilter;

2. สร้างตัวแปร allowedFileExtension เพื่อกำหนดว่า เราจะอนุญาตให้ลากไฟล์อะไรเข้ามาบ้าง
    ในตัวอย่างนี้อนุญาตไฟล์ jpg png gif และ swf ครับ

var allowedFileExtension:Array = ["jpg","png","swf","gif"];

3. กำหนดให้ bigPanel (กรอบแสดงภาพใหญ่) ซ่อนตัวก่อนครับ อย่าเพิ่งแสดงให้ใครเห็น

 bigPanel.visible = false;

4. เพิ่ม event listener ให้กับตัว dropArea_mc (พื้นที่สำหรับวางไฟล์ที่ลาก) ครับ 3 อย่างคือ
    NATIVE_DRAG_ENTER => เมื่อมีการลากไฟล์เข้ามายังพื้นที่
    NATIVE_DRAG_EXIT => เมื่อคนลากไฟล์เกิดเปลี่ยนใจ เอาไฟล์ที่ลากออกไปนอกกรอบ
    NATIVE_DRAG_DROP => หลังจากคนลากไฟล์ตกลงปลงใจได้แล้ว ก็ปล่อยไฟล์ลงบนพื้นที่

dropArea_mc.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER, onDragFileEnter);
dropArea_mc.addEventListener(NativeDragEvent.NATIVE_DRAG_EXIT, onDragFileExit);
dropArea_mc.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP, onDropFile);

5. สังเกตว่า ใน event listener เรากำหนดชื่อฟังก์ชั่นไป 3 ฟังก์ชั่นคือ onDragFileEnter onDragFileExit
    และ onDropFile แต่ตอนนี้ยังไม่มีฟังก์ชั่นเหล่านี้จริงๆ ดังนั้น เราจึงต้องมาสร้างฟังก์ชั่นเหล่านี้เองครับ

function onDragFileEnter(event:NativeDragEvent):void{
  //ทำงานต่อเมื่อมีการลากไฟล์เข้ามาในพื้นที่ dropArea_mc
}
function onDragFileExit(event:NativeDragEvent):void{
  //ทำงานเมื่อมีการลากไฟล์ออกจากพื้นที่ dropArea_mc
}
function onDropFile(event:NativeDragEvent):void{
  //ทำงานต่อเมื่อมีการวางไฟล์ลงบนพื้นที่ dropArea_mc
}

6. ลุยทีละอย่างก่อน.. เริ่มที่ onDragFileEnter ครับ

function onDragFileEnter(event:NativeDragEvent):void{
  //สร้างตัวแปร file เพื่อเก็บรายชื่อไฟล์ที่ลากค้างไว้ โดยดึงมาจาก Clipboard
  var file:Array = event.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;
  //เอาไฟล์แรกมาเช็คดูนามสกุลไฟล์ว่า อยู่ในรายการที่อนุญาตให้ใช้มั้ย
   //โดยส่งนามสกุลไฟล์ไปที่ฟังก์ชั่น checkExtension เพื่อตรวจเช็ค
   //ซึ่งฟังก์ชั่นดังกล่าวจะเช็คแล้วส่งผลการเช็คกลับมาเป็น true หรือ false ครับ

  if (checkExtension(file[0].extension)) {
    //ถ้านามสกุลไฟล์ อยู่ในลิสต์ที่อนุญาต.. ก็อนุญาตให้วางได้ทั้งหมด
    NativeDragManager.acceptDragDrop(dropArea_mc);
    //ขั้นนี้เป็นการใส่ฟิลเตอร์ Brightness ให้ dropArea_mc ครับ จะได้เห็นว่ามีการตอบสนอง
    EasyFilter.Brightness(dropArea_mc, -20);
  }else{
    //แต่ถ้าไม่.. ก็ให้ trace ออกมาว่า ไม่เอา
    trace("Not accept *."+file[0].extension);
  }

7. ถัดมาครับ มาทำที่ onDragFileExit ที่นี่ไม่มีอะไร นอกจากเอาฟิลเตอร์ออกครับ

function onDragFileExit(event:NativeDragEvent):void{
  //เมื่อมีการลากไฟล์ออกจาก dropArea_mc ก็ให้เอาฟิลเตอร์ออก
  EasyFilter.Remove(dropArea_mc);

8. และมาต่อที่ onDropFile ตรงนี้จะเยอะหน่อยครับ เพราะต้องจัดการนำไฟล์ไปลงที่ TileList ด้วย

function onDropFile(event:NativeDragEvent):void{
  //คนลากไฟล์วางไฟล์ลงมาในพื้นที่แล้ว
    //สร้างตัวแปร files เพื่อเก็บรายการไฟล์ที่ลากไว้อยู่จาก Clipbard ครับ

  var files:Array = event.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;
  //วนลูปเพื่อนำไฟล์ไปใส่ใน TileList
  for(var i:int = 0; i < files.length; i++){
    //สร้างตัวแปรเพื่อเก็บค่าต่างๆ (อันนี้ผมว่าคงเดากันได้อยู่แล้ว)
    var fileName:String = files[i].name;
    var ext:String = fileName.substring(fileName.lastIndexOf(".")+1);
    //สร้างตัวแปรเก็บพาธเต็มของรูป แล้วทดสอบให้ trace ออกมาดู
    var nativePath:String = files[i].nativePath;
    trace(nativePath);
    //นำข้อมูลไปใส่ใน TileList (ชื่อไฟล์ และพาธรูปเพื่อแสดงรูป)
    picPanel.addItem({label: fileName, source: nativePath});
  }
  //ลบฟิลเตอร์ออก
  EasyFilter.Remove(dropArea_mc);

9. เก็บตกฟังก์ชั่นที่เหลือครับ คือฟังก์ชั่นที่ใช้เช็คนามสกุลไฟล์นั่นเอง

function checkExtension(ext:String):Boolean{
  //วนลูปจากอาร์เรย์ allowedFileExtension ที่เก็บนามสกุลไฟล์ไว้ครับ
  for(var n:String in allowedFileExtension){
    //แปลงนามสกุลที่ส่งมาเป็นพิมพ์เล็ก แล้วก็นำไปเช็คกับค่าในแต่ละตำแหน่งของอาร์เรย์
    //ถ้าตรงกัน ก็ให้หยุดลูปแล้วส่งไปว่า true
    if(ext.toLowerCase() == allowedFileExtension[n]){
      return true;
    }
  }
  //จนแล้วจนรอดก็ลูปไม่เจอนามสกุลไฟล์ที่ว่าเลย เอิ่ม งั้นก็ไม่อนุญาตนะ ส่งไปว่า false โลด
  return false;
}

10. กด Ctrl+Enter ทดสอบ
      ตอนนี้โปรแกรมพอจะทำงานได้บ้างแล้ว เหลือตรงที่ ดับเบิ้ลคลิกรูป Thumbnail แล้วแสดงรูปใหญ่ครับ

11. กลับมายังหน้าต่าง Actions เพิ่มบรรทัดนี้ลงไป หลังจากบรรทัดที่ addEventListener ของ 
      picPanel (ที่เป็น TileList) ครับ

picPanel.addEventListener(ListEvent.ITEM_DOUBLE_CLICK, onItemDoubleClick); 

12. แล้วก็สร้าง listener ต่อ

function onItemDoubleClick(event:ListEvent):void{
  //สั่งแสดงกรอบใหญ่
  bigPanel.visible = true;
  //แล้วสั่ง UILoader ให้โหลดรูป โดยใช้พาธจาก Thumbnail ที่เลือกอยู่
  bigPanel.loader.source = picPanel.selectedItem.source;
}

13. โค้ดทั้งหมดทั้งมวล จะได้ออกมาตามรูปนี้ครับ (บางจุดที่เห็นไม่เหมือนกันไม่ต้องตกใจครับ)

14. ทดสอบโปรแกรม โดยการลองลากไฟล์มาที่พื้นที่ที่กำหนด จากนั้นก็ลองดับเบิ้ลคลิกรูปเล็กดู

15. ในที่สุด ก็เสร็จสมบูรณ์ครับ เย้ 

แต่อย่าเพิ่งดีใจจนเกินไปนะครับ เพราะว่ามันเป็นเพียงแค่ ตัวอย่าง!!! (ผ่างงง)
หากนำไปใช้จริง เราต้องปรับปรุงอีกมากครับ แต่ก็คงไม่เกินความสามารถของพี่น้องแน่นอน

โหลดไฟล์ fla: ( จิ้มที่นี่ )
โหลดไฟล์ AIR ไปลองเล่น: ( จิ้มที่นี่ )

 

Comment

Comment:

Tweet

Lots students transpire the duty to professional resume writers because they miss the ability to compose a respectable resume that is the reason why you need to resume services, but such people like writer don't do that. Thanks for the article. A kind of important topic about this good post.

#33 By Web page (46.161.41.16|46.161.41.16) on 2014-03-19 10:01

Our expert resume writers will provide professional resume writing service to job seekers who do not have time to write a resume. Check out this link and read CV sample. Now you are informed where to buy resume paper, so do not hesitate buy CV and enjoy your career.

#32 By Resumes Expert company (103.7.57.18|46.161.41.16) on 2013-04-18 17:01

On the web page of this company you will have a possibility of getting extensive the best essay writing service review best-essay-sites.com. Thus, you will discover reliable custom paper writing service to buy original essays at.

#31 By site (103.7.57.18|46.161.41.16) on 2013-03-14 17:25

Are you seeking how to write a resume or where to obtain resume templates and professional resume writing? Or you just would like to buy CV from professional resume writers? Only get in touch with Resume company.

#30 By cover letter (103.7.57.18|91.201.64.16) on 2013-03-08 10:14

Following the definite analysis of some experts, students use the custom essay writings supreme-essay.com company constantly.

#29 By buy research paper for college (103.7.57.18|91.201.64.16) on 2012-10-23 21:07

You don’t need to ponder over which company to choose for buying resume from now on. Best resume writers are at a hand’s reach. Check out Prime-Resume company so you can view resume templates or buy resumes. Be certain that you will get quality resume writing tips.

#28 By resume writers (103.7.57.18|91.201.64.16) on 2012-10-09 13:25

Last years people argue that it's not good to buy custom written essay. It is because they did not do it themselves. It can be common to use custom writing companies when you want to gain an academic top!

#27 By Web page (103.7.57.18|91.201.64.16) on 2012-08-03 01:50

Looking for perfect paper writing services? Save your time and check this Internet site "topwritingservice.com" to receive expert help with research paper from the professional team of writers!

#26 By write my essays for me (103.7.57.18|31.184.238.21) on 2012-07-07 16:52

Your perfectly done story related to this topic goes side by side with the dissertation subject. Thus, you could even work for buy thesis service.

#25 By thesis service (103.7.57.18|31.184.238.21) on 2012-05-16 14:23

Thanks for the article. I read the above post.

#24 By Chicgraphic on 2012-03-30 22:58

The custom research paper or term papers writing takes a long period of time, nevertheless time can be a valuable issue, thus that would be better to buy research papers to save a lot of time.

#23 By custom essay (94.242.214.6) on 2011-12-05 07:44

You are very master and your theme referring to this topic is great. Will you continue your story? I should order some thesis title and just thesis from you.

#22 By buy thesis (94.242.214.6) on 2011-12-05 07:04

Everything in our world is not free, however we claim that with our company you get affordable prices. We propose to buy custom writing of premium quality. Don't doubt and try academic papers writing firm!

#21 By essays online (193.105.210.41) on 2011-11-25 07:49

Various people can talk about custom writing corporations a lot. Nonetheless, we ought not to contravene an issue that custom essays writing companies give high school students opportunities to buy pre-written essay and become successful.

#20 By personal essay paper (193.105.210.41) on 2011-11-23 22:52

Your superior facts just like this good post can be shown at dissertation service or in the buy thesis to buy paper from the custom writing service.

#19 By custom dissertation (91.212.226.143) on 2011-11-23 15:00

Thanks so much for your hot outcome close to this good post. I couldn’t detect this kind of phd thesis in web and even was going to order the thesis. Therefore, I receive all the facts at present time.

#18 By thesis writing (91.212.226.143) on 2011-11-23 15:00

My comrade aids me with my coursework composing tasks. My comrade is usually able to aid me if I do not have money to buy Custom written papers.

#17 By Buy a essay paper (193.105.210.41) on 2011-11-22 02:11

Are overloaded with completing america essays paper tasks? You can commonly rely on the supreme custom essays writing organizations, which present the college essays any time you need.

#16 By term papers (193.105.210.41) on 2011-11-19 19:32

Successful guys use link submission, because they understand how essential search engine optimization can be.

#15 By seo link building services (193.105.210.41) on 2011-11-19 19:29

I think, your idea just about this good topic suppose to be nice and people would find the essay writing services to buy essay and order custom essay referring to it!

#14 By buy essay (193.105.210.41) on 2011-11-14 00:16

That is well known that cash makes people free. But what to do if one doesn't have money? The one way is to try to get the <a href="http://goodfinance-blog.com">loan</a> or car loan.

#13 By DominiqueBlair (91.212.226.143) on 2011-11-05 06:35

ช่วยดูเว็บให้หน่อยดิคะ
ว่าทำไใแฟลฃมันถึงไม่ขึ้นอ่าาาาาาาา
http://monkeyland.exteen.comsad smile

#12 By Monkey on 2010-03-15 21:49

โหพี่ก่อ ก้อว่าหายไปไหน มาเมบอยู่ในนี้นี่เอง เพิ่งเล่น exteen ได้ไม่นานคับ แล้วมาเจอเรื่อง Flash ที่คุ้นเคย เข้ามาอ่านปุ๊บ โป๊ะเชะ ... เมบก่อคนเดิม 555

แล้วจะเข้ามาเยี่ยมบ่อยๆคับ

#11 By meen_onboard on 2009-11-07 16:59

ตีมสวยมากเลยครับ

#10 By bellbell on 2009-05-20 14:03

ขอadd บล็อกไว้ศึกษาดีกว่าครับconfused smile

#9 By together-way on 2009-05-17 18:17

อ้ากกกกกกกกกก
สุดยอดดดดดดดด แห่งความยากกก

อ่าน Script ก็งงมากกกกกกกกกกกกกเลยยยยยยยยยยยย

ชาตินี้จะเขียน Action เป็นกับเขาบ้างมั้ยเนี่ย


ป.ล. ไม่รู้ว่าจะจำผมได้หรือไม่น่ะงิ
ตามลิงค์มาจากบอร์ด Thaiflashdev
เพิ่งเล่น Exteen ได้ไม่นานเอง
ผม

เหอๆ

Hot!

#8 By xxvorachaixx on 2009-05-15 00:19

แค่สคิปก็มึนแล้วsad smile

#7 By นายโยจิ^_^ on 2009-05-14 14:25

แปะไว้ก่อนครับ เดี๋ยวมาอ่าน ตาลาย งงจ้ะ sad smile
น่าใช้ syntax highlighter นะครับ แบบเนี้ย
http://tonhor.exteen.com/20090411/howto-syntax-highlighter-on-exteen

แต่มันไม่มี highlight สำหรับ AS นี่หว่า sad smile

#6 By xViStA on 2009-05-14 13:43

เจ๋งครับๆ



ดองนานนะ
อ่านแล้วงงนิดๆHot!

#5 By phil_wc - Music - on 2009-05-14 11:56

ก่อเอ๊ย


เปลี่ยนแนวมาเป็นเขียนโปรแกรมมะ?


ดูรุ่งกว่านะ sad smile



#4 By tara on 2009-05-14 10:28

Hot!

ขอบคุณที่สละเวลาค่ะ :]

#3 By karikkik on 2009-05-14 10:11

เมพจริงๆ ขอadd นะครับ เอาไว้ศึกษาbig smile

#2 By Jackie(Je45) on 2009-05-14 09:59

สุดยอดเลยครับ เดี๋ยวผมขอลองโหลดไปศึกษาก่อน double wink



Hot!

#1 By bellbell on 2009-05-14 08:17