ต่อไป »

[คี]

วันนี้ลองเขียน AIR กับโจทย์ที่เคยเห็นมีคนถามถึง นั่นคือ
การลากไอคอนไฟล์ บน desktop มาใส่ใน Flash(AIR)

เอาแบบง่ายๆล่ะกัน เพราะผมเองก็เพิ่งเคยทำ
ไม่ขอพูดถึงการติดตั้ง AIK บน flash นะ เพราะที่ผมทำก็มั่วๆจนใช้งานได้

เริ่มที่ สร้างเอกสารใหม่
File->new...
เลือก Flash File (ActionScript 3.0)
กด ctrl+shift+F12 เพื่อเปิด Publish Settings
ที่แทบ Flash บรรทัดแรก หัวข้อ Version เลือกเป็น Adobe AIR 1.0
เลือก OK
แล้ว save as เป็นชื่อที่ต้องการ ในที่นี้ผมตั้งชื่อว่า dragdrop.fla

ลองกด ctrl+Enter ทดสอบดู จะได้หน้าต่างที่มุมบนซ้ายเป็น icon ของ AIR
ลองลาก icon บน desktop ไปลอยอยู่บนหน้าต่างนี้จะเห็นเป็น เครื่องหมายห้ามคาดอยู่
ปิดหน้าต่างนี้ไป

พิมพ์ script ในเฟรมแรกดังนี้

โค๊ด:

// ดึงเอา package ที่เกี่ยวกับการทำ DragDrop มารวมในงานของเรา
import flash.desktop.NativeDragManager;
import flash.events.NativeDragEvent;

// สร้าง InteractiveObject มาเพื่อเป็นพื้นที่สำหรับวาง
var dropArea:Sprite = new Sprite();
dropArea.graphics.beginFill(0xff0000,0.1);
dropArea.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
dropArea.graphics.endFill();
addChild(dropArea);

// หากมีการลากเข้ามาใน stage ให้ทำ onDragIn
dropArea.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER,onDragIn);
function onDragIn(e:NativeDragEvent):void
{
// ยอมให้มีการลากมาใส่
NativeDragManager.acceptDragDrop(dropArea);
}

ลองกด ctrl+Enter ทดสอบลาก icon จากบน desktop มาใส่ใน หน้าต่างนี้ จะมีเครื่องหมาย + ปรากฏขึ้นมาแทน เครื่องหมายห้าม
ปิดหน้าต่างนี้ไป แล้วลองทำความเขาใจกับ script ข้างบน (มี comment ให้แล้ว)

จากนั้นพิมพ์ script เพิ่มเข้าไปอีก

โค๊ด:

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

// เราจะรับข้อมูลที่ลากเข้ามาผ่านทาง clipboard เราก็ต้องเพิ่ม package นี้เข้ามา
import flash.desktop.Clipboard;
import flash.desktop.ClipboardFormats;

var dropArea:Sprite = new Sprite();
dropArea.graphics.beginFill(0xff0000,0.1);
dropArea.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
dropArea.graphics.endFill();
addChild(dropArea);

dropArea.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER,onDragIn);
function onDragIn(e:NativeDragEvent):void
{
NativeDragManager.acceptDragDrop(dropArea);
}

// เพิ่มให้รอเหตุการ เมื่อวางไอคอนที่ลากเข้ามา ให้ทำ onDragDrop
dropArea.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP,onDragDrop);
function onDragDrop(e:NativeDragEvent):void
{
// ดึงข้อมูลที่ลากเขามา ผ่านทาง clipboard เป็นรายการของไฟล์
var files:Array = e.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;
for(var i:int = 0; i < files.length; i++) // วนรอบตามจำนวนไฟล์ที่ลากเข้ามา
{
// โหลดไฟล์ เหล่านั้นเข้ามาแสดงใน stage
var req:URLRequest = new URLRequest(files[i].nativePath);
var ldr:Loader = new Loader();
ldr.load(req);
addChild(ldr);
}
}

ลองกด ctrl+Enter ทดลองลากไฟล์เข้ามาแล้ววางในหน้าต่างนี้
ถ้าเป็นไฟล์รูปภาพ jpg gif png หรือ swf ก็จะโหลดเข้ามา แสดงแบบง่ายๆ ไม่มีปัญหาอะไร
แต่ถ้าเป็นไฟล์ อย่างอื่นที่ไม่ใช่รูป เช่น .txt .mp3 ก็จะ Error ต้องเขียนป้องกันกันอีกที

Error #2044: Unhandled IOErrorEvent:. text=Error #2124: Loaded file is an unknown type.

ตอนนี้ก็สามารถลาก ไฟล์รูปเข้ามาเพื่อโหลดแสดงผลได้แล้ว ลองเอาไปประยุกต์ต่อดูนะครับ

[นายก่อสตูดิโอ]

  กรี๊ดด ขอบคุณครับพี่คี บวกให้เลย

[ฮาร์ท]

ปักไว้

[คี]

เอา icon ของไฟล์ที่ลากเข้ามา แสดงในโปรแกรมของเรา

จากตัวอย่างข้างบน เปลี่ยน function onDragDrop เป็นอย่างนี้

โค๊ด:

function onDragDrop(e:NativeDragEvent):void
{
var files:Array = e.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;
var X:int = 0;
for(var i:int = 0; i < files.length; i++)
{
for(var j:int = 0; j < files[i].icon.bitmaps.length; j++)
{
var icon:Bitmap = new Bitmap(files[i].icon.bitmaps[j]);
addChild(icon);
icon.x = X;
X+= icon.width;
}
}
}

จากตัวอย่างก่อนหน้านี้ เราเอาข้อมูล nativePath จาก object File ที่ได้จาก clipboard เพื่อโหลด รูปภาพมาแสดง
นอกจาก nativePath แล้วยังมีข้อมูลอย่างอื่นอีก ในที่นี้เราหยิบ icon มาใช้
เออ.. ไม่รู้จะอธิบายยังไงดี
โค้ดไม่ยากครับ ลองทำความเข้าใจกันดู

[เซนบะ สตูดิโอ ฮิฟิ]

good la

[นายก่อสตูดิโอ]

  กรี๊ดดด เรียกใช้ไอคอนได้ด้วย กรี๊ดดดด

[FL]

ถ้าเป็นไฟล์รูปภาพ jpg gif png หรือ swf ก็จะโหลดเข้ามา แสดงแบบง่ายๆ ไม่มีปัญหาอะไร
แต่ถ้าเป็นไฟล์ อย่างอื่นที่ไม่ใช่รูป เช่น .txt .mp3 ก็จะ Error ต้องเขียนป้องกันกันอีกที

โค๊ด:

addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER, onDragEnter);

function onDragEnter(e:NativeDragEvent):void {
var file:Object = e.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT);
if (file[0].extension == "jpg" || file[0].extension == "png") {
NativeDragManager.acceptDragDrop(this);
}
}

ถ้าไฟล์ที่ drag มาเป็นไฟล์ "jpg" หรือ "png"
ก็จะยอมให้ Drop ลงได้(สังเกตที่ไอคอนเล็กๆตรงข้างเม้าส์จะเป็นเครื่องหมายบวก)
แต่ถ้าไม่ใช่ก็จะไม่สามารถ Drop ได้(สังเกตไอคอน)

(ใช้สำหรับตรวจสอบไฟล์ที่ลากมาเพื่อป้องกันความผิดพลาด)

[คี]

ขอบคุณ FL ครับ
กะว่าเดี๋ยวกลับมาเพิ่มให้อยู่เชียว เอา .gif ด้วยสิ 

[FL]

จะเป็นอะไรก็ได้ครับ (ที่แฟลชรองรับ)
เราก็แค่ไปแก้ที่นามสกุล(extension)ของไฟล์คับ

file[0].extension == "jpg"

[คี]

 

[matanume]

อ่า ผมไปอยู่หลังเขาไหนมาเนี่ยพึ่งรุ้ว่ามันทำได้ = ="

[นายก่อสตูดิโอ]

เอาไปทำตามแล้วได้มาเป็นตัวนี้ครับเย้

Drag-and-Drop Picture Gallery Example


ลากไฟล์ png, jpg, gif, swf มาใส่ในช่องแล้วแสดงเป็น Thumbnail ด้านซ้าย
ดับเบิ้ลคลิกแล้วจะแสดงภาพใหญ่ครับ

ตัวนี้เขียนคร่าวๆ เพื่อทดสอบโค้ด + ลองทำตาม Tutorial ดูครับ สนุกมากๆ
เวลาโหลด swf มันจะแปลกๆ หน่อยนะครับ ถ้าจะใช้งานจริงค่อยปรับอีก

ไฟล์ fla: http://tutorials.korstudioxd.com/airdragdrop/airdragdrop.rar
ไฟล์ AIR: http://tutorials.korstudioxd.com/airdragdrop/AIRDragAndDropExample.air

[พล]

 

เยี่ยมเลย ขอบคุณครับ

[คุณชาย]

 
เดี๋ยวจะลองเด้อ

[Tlecoco]

ไรกัน ไรกันนนน 


นู๋ไม่รู้เรื่องเลย