AIR – drag ‘n’ drop

3.12.2007· Autor: Ondřej Brichta· Počet komentářů: 2

V dnešním článku se podíváme na postup tvorby AIR aplikací pomocí Flash CS3, konkrétně si ukážeme zajímavou možnost přetahování souborů dovnitř naší AIR aplikace.

Co to je Adobe AIR?

Jedná se podobné prostředí, jakým je flashplayer + SWF soubory, ovšem tentokrát jsme se přesunuli do oblasti desktopovoých aplikací. Pokud nám chybí možnost ukládat soubory, přesouvat je, mazat, kopírovat, pokud potřebujeme pracovat přímo s databází, můžeme využít AIR jako platformu, která „oživí" naše flashové aplikace tak, že budeme moci využívat komfortu běžných aplikací.

Výhodou je to, že u vytvořených flashových aplikacích nemusíme nic upravovat, pouze doplníme několik potřebných příkazů například pro práci se soubory, vyexportujeme aplikaci jako AIR a máme hotovo.

Stejně jako v případě webových animací, tak i zde musíme mít nainstalovaný „přehrávač", kterým je Adobe AIR runtime (ke stažení zde: http://labs.adobe.com/downloads/air.html). Abychom mohli ve Flashi CS3 exportovat aplikace pro AIR, musíme si nainstalovat následující update: http://labs.adobe.com/wiki/index.php/AIR:Flash_CS3_Professional_Update.

Export AIR

Pokud chceme vytvořit AIR aplikaci, musíme nejprve v nastavení exportu (Publish Settings) pod záložkou Flash nastavit verzi na Adobe AIR 1.0:

publish

Teprve poté můžeme přejít k exportu AIR aplikace samotné. Nejprve si otevřeme v hlavní nabídce položku Commands - AIR - Applicxation and Installer Settings:

settings

Kde se nám zobrazí okno nastavení vlastností exportované aplikace:

settings 2

Kromě standardních názvů aplikace, její verze a možnosti nastavení vlastní ikony budeme muset minimálně při prvním exportu vytvořit vlastní certifikát, kterých zajistíme originalitu exportované AIR aplikace. Certifikát si lze vytvořit u položky „Digital signature" pod tlačítkem „Change". Objeví se okno s možností výběru již vytvořeného certifikátu:

signature

Nebo máme možnost po kliknutí na tlačítko „Create" vytvořit nový certifikát:

certificate

Po vytvoření AIR instalátoru aplikace se po jeho spuštění objeví okno s nabídkou instalace připravené aplikace:

install 1

install 2

V případě, že již stejnou aplikaci máme nainstalovanou, bude nám nabídnuto jí odinstalovat, přeinstalovat a nebo rovnou spustit:

reinstall

Drag 'n' drop aplikace

Jak jsme si již uvedli, AIR aplikace nám umožňují pracovat přímo se systémem, kde jsou nainstalovány. Základní práce s AIR ve Flashi CS3 je popsána zde: http://livedocs.adobe.com/labs/air/1/devappsflash/ , celá řada zajímavých článků je pak k dispozici na adobe.devnet: http://www.adobe.com/devnet/air/flash/

My si dnes ukážeme jednoduchou ukázku, kde využijeme možnosti přetahovat soubory do AIR aplikace a dále s nimi pracovat. Základem bude nový dokument pro ActionScript 3.0, u kterého nastavíme export do AIR.

Aby celá aplikace mohla detekovat události spojené s akcemi myši, nakreslíme na pozadí dokumentu objekt, který bude tvořit „tělo" aplikace.

Otevřeme si nyní panel akcí pro první snímek hlavní časové osy a začneme psát příkazy:

import flash.desktop.DragManager;
import flash.events.NativeDragEvent;
import flash.desktop.ClipboardFormats;
this.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER,dragEnter);
this.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP,dragDrop);
function dragEnter(evt:NativeDragEvent):void {
 var myFile:Object = evt.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT);
 if (myFile[0].extension=="swf"||myFile[0].extension=="jpg"||myFile[0].extension=="png"||myFile[0].extension=="gif") {
 DragManager.acceptDragDrop(this);
 }
}
function dragDrop(evt:NativeDragEvent):void {
 var myFile:Object = evt.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT);
 loadImg(myFile[0].url ,dropTg);
}

Použité události, které jsou spojené s přetahováním objektů v rámci systému, mají název „NativeDragEvent.NATIVE_DRAG_ENTER" (začátek přetahování) a „NativeDragEvent.NATIVE_DRAG_DROP" (konec přetahování). K oběma událostem připojíme vlastní funkci listeneru, přičemž první funkce pomocí vlastnosti „clipboard" objekt události umožní přistoupit k přetahovanému objektu díky metodě getData. Parametrem této metody pak bude typ, který očekáváme, v našem případě se jedná o seznam souborů.

Do objektu „myFile" se tak vloží pole, jehož prvky budou přetahované soubory. V naší ukázce využijeme pouze první soubor, u které nejprve zkontrolujeme jeho typ, pomocí vlastnosti „extension". Pokud se jedná o jeden z obrazových souborů, které umíme zobrazit, povolíme akci přetahování objektu pomocí metody „acceptDragDrop".

Funkce detekce upuštění objektu do aplikace pak už jenom zjistí cestu k přetahovanému souboru a pomocí funkce „loadImg" jej zobrazí v naší aplikaci. Samotná funkce „loadImg" vypadá následovně:

import fl.transitions.*;
import fl.transitions.easing.*;
var img:MovieClip;
var imgLoader:Loader;
function loadImg(src:String,tg:MovieClip):void {
 img = new MovieClip();
 imgLoader = new Loader();
 var imgURL:URLRequest= new URLRequest(src);
 imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadComplete);
 img.addChild(imgLoader);
 tg.addChild(img);
 imgLoader.load(imgURL);
}
function loadComplete(e:Event):void {
 fadeInPict(img);
}
function fadeInPict(im:MovieClip):void {
var tm:TransitionManager = new TransitionManager(im);
tm.startTransition({type:Fade, direction:Transition.IN, duration:3, easing:Regular.easeOut}); 
}