Bir önceki makalemde AIR eklentisinin nasıl kullanılabileceğini anlatmıştım. Bu makalede ise; AIR Class’ları hakkında yardıma nasıl ulaşabileceğinizi, FLASH CS 3 ve AIR ile masaüstü flv playerin nasıl yapılabileceğini, FLVPlayback Componentlerini nasıl kullanabileceğinizi, yaptığınız AIR çalışmalarını masaüstünde nasıl sürükleyebileceğinizi ve dosya sürükle bırakma işlemini (Örn: flv dosyalarını sürükleyip bıraktığınızda dosyayı otomatik olarak tanıyıp oynatması) Olay dinleyicilerin nasıl kullanıldığını, PSD dosyalarını nasıl flash içerisine import edebileceğinizi, anlatmaya çalışacağım.

Eğer AIR kurulumu ile ilgili bilgi almak isterseniz aşağıdaki linkten "Flash CS3 ve AIR (Apollo) Eklentisi ile Masaüstü Programlama" adlı makaleye ulaşabilirsiniz.

İlk olarak değinmek istediğim konu AIR sınıfları ve bu sınıflara nasıl ulaşabileceğiniz. Malesef şu an için Flash Cs3 için de AIR sınıfları hakkında herhangi bir bilgi yer almamaktadır, umarım kısa sürede bu değişikliği yaparlar. Peki bu yardım dosyalarına ve class ların hakkındaki bilgilere nasıl ulaşılabilir.Bu sorunun çözümü için http://livedocs.adobe.com/labs/flex/3/langref/ adresindeki flex 3 dosyalarından yardım alabilirsiniz. Flex 3 teki Action Script yardım dosyalarının tamamını, tüm sınıf yapıları ve sınıf dosyalarını AIR içinde kullanabilirsiniz.

Şimdi uygulamamıza geçebiliriz ama daha önce kaynak dosyaları indirmeniz gerekiyor. Adobe Air FLVPlayer çalışma dosyaları.

1- İlk olarak yeni bir AIR dokümanı açın ve dokümanınızı kaydedin.

2- Şimdi indirmiş olduğunuz kaynak dosyalardaki psd dosyasını flashın içerisine import edelim. "Control+R" ye ya da menüden "File>Import>Import to Stage" basarak kaynak dosyaların içinde bulunan psd klasörünün içerisindeki chrome adlı psd dosyasını seçip Aç’ı seçiniz.

Karşınıza çıkan pencere de sol tarafta psd dosyasının içerisindeki katmanlar(layerlar) yer almaktadır. Sol tarafta istediğiniz katmanı seçerek o katmana ait ayarları sol taraftan yapabilirsiniz.

Yukarıdan aşağıya doğru gidecek olursak;

Bitmap image with editable layer styles – Seçilen resim katman veya katmanlarının bir movie clip haline getiriyor ve her resmi ayrı ayrı katmanlara ayırıyor.

Flattened Bitmap image -Seçilen resim katmanlarını tek bir resim haline dönüştürüyor.

Create Movie Clip – Seçilen resim katmanlarını movie clip içine almak isterseniz bu seçeneği işaretleyip, movie clip adını yazabilirsiniz.

Compression – Import edilen resmin sıkıştırılıp sıkıştırılmayacağını belirliyorsunuz."Lossless" seçeneğini seçerseniz resimde herhangi bir sıkıştırılma yapılmaz. "Lossy" seçeneğini seçerseniz, seçeneğin hemen altında iki adet seçenek çıkacak birincisi "Use Publish setting" bu ayar fla dosyanızdaki ayar ila aynıdır.Yani bu seçenek işaretli olursa daha sonradan fla dosyasında yapacağınız resim sıkıştırma ayarı geçerli olacaktır.İkincisi "Custom" seçeneğinde ise resmin sıkıştırılma oranını kendiniz ayarlayabiliyorsunuz.

Calculate Bitmap Size – Size seçili olan resmin boyutunu verir.

Convert Layers to -Burada resim katmanlarını flashın içinde nasıl görüntüleyeceğinizi ayarlıyorsunuz. Yani resimler ayrı ayrı layerlaramı ayrılsın yoksa her biri ayrı framelerimi ayrılsın onu belirliyorsunuz.

Place Layers At Original Position – Örnek vererek başlayacak olursak, mesela photoshopta bir objenin pozisyonu x:200 y:200 , Flasha bunu import ederken bu seçenek işaretlenirse objenin pozisyonu photoshoptaki ile aynı olacaktır. Yani obje flashın içinde x:200 y:200 koordinatlarında olacaktır.

Set Stage Size To Same Size As Photoshop Canvas-Bu seçeneği işaretlerseniz flash dokümanınızın boyutu resmin boyutu ile aynı olacaktır

Bu örnekte ise kullanacağımız ayarlar şu şekilde:

Flattened Bitmap Image seçili, Create movie clip for this layer seçeneğini tıklayarak instance name kısmına "chrome_mc" yazıyoruz.

3-Ekrandaki chromemc movie clibi seçip instance name olarak "chromemc" yazın. Daha sonra chrome_mc yi seçerek çift tıklayın.

4- chrome_mc movie clipin içine girdikten sonra import ettiğiniz resmin üzerine 366×272 boylarında bir siyah dikdörtgen çizin.Dikdörtgen x:17 y:47 koordinatlarına koyun(resmin pozisyonunu x:0 y:0 olarak hesapladım ).Kareyi çizmemizin nedeni ilk açıldığında ekranın boş durmaması yani herhangi bir video yüklü olmadığı için herhangi bir görüntü gelmeyecektir onun için bir kare çizerek ekranın boş olduğunu anlamak ve göze hoş görünmesi için tabiî ki

5- Components panelinden Video sekmesinin altındaki FLVPlayBack componentini sürükleyip ekranın üzerine bırakın ve instance name olarak "video_ui" yazın

6- FLVPlayBack componentini seçerek Component Inspector (Shift+F7) panelini açıp, Parameters kısmından skin bölümüne gelin. Skin bölümüne çift tıklayın önünüze gelen listeden normal şekilde istediğiniz herhangi bir ara yüzü seçebilirsiniz. Ama bu örnek için herhangi bir ara yüz seçmeyeceğiz. Skin bölümünden "None" seçerek işlemi tamamlayın.

7- FLVPlayBack componentini biraz önce çizdiğiniz kare ile aynı boyuta getirip üzerine bırakın. Yani x ve y koordinatları aynı olsun.

8-Tekrar components panelinden video sekmesinin altından "PlayPauseButton", "MuteButton" , "SeekBar", "VolumeBar" componentlerini seçerek ekranın alt kısmına, resmin üzerinde kalan boşluğa dilediğiniz şekilde yerleştirin. Bu butonlar için herhangi bir kod yazmamıza gerek yok çünkü flash aynı sahnede bulunan bu elementlerin birbiri ile iletişime geçmesini sağlıyor. Yani siz hiçbir kod yazmadan Play butonuna devreye sokabiliyorsunuz.

9- Şimdi Kapatma butonu için bir x yapın, bu text olabilir çizmenize gerek yok. Yaptığınız x i seçip movieClip yapın, ve daha sonra instance name olarak ta "kapat_bt" yazın.

10- Yaptığımız uygulamayı sürüklemek için 375×28 boyutlarında bir dikdörtgen çizin, instance name olarak "surukle_mc" yazın.X ve y koordinatlarını x:10 y:7 olarak ayarlayın. Ve Movie clibin alphasını 0 yapın, yani transparan. Buradaki amaç sadece tutup sürüklemek o yüzden bu karenin görünmesine gerek yok.

11- İsterseniz pencerenin sol kısmına FLV player için isim verebilirsiniz. Bu tamamen size kalmış.

12- Şimdi ana sahneye tekrar dönüp yeni bir katman açıp bu katmana Action adını verip, aşağıdaki kodları bu katmana yazıyoruz.

/////////////////////////////////////////////////////////////
//Gerekli olan classları import ediyoruz
import flash.desktop.*;
import flash.events.NativeDragEvent;

//Ana sahnenin boyutunu maximun yapıyoruz
stage.window.maximize();
//Ana sahnenin kendini boyutlamasını engelliyoruz
stage.scaleMode = StageScaleMode.NO_SCALE;

//Mouse chrome_mc nin içindeki surukle_mc ye tıkladıgında
//Olay dinleyici bunu hemen algılıyor ve fonksiyonu devreye sokuyor
//Fonksiyon pencereyi istediğimiz yere sürüklememize izin veriyor
chrome_mc.surukle_mc.addEventListener(MouseEvent.MOUSE_DOWN, playeriSürükle);
//Mouse chrome_mc nin içindeki surukle_mc ye tıklandıgında deverey giren
//sürükleme fonksiyonu durdurmak için MOUSE_UP eventini kullanıyoruz
chrome_mc.surukle_mc.addEventListener(MouseEvent.MOUSE_UP, playeriSürüklemeyiDurdur);
//Kapat dugmesine bastıgımınzda programı kapatacak olan fonksiyon
chrome_mc.kapat_bt.addEventListener(MouseEvent.MOUSE_DOWN, playeriKapat);
//AS 3 teki yeni bir özellik, mouse bt üzerine Button Mode true yapıyoruz böylece mouse
//x'in üzerine geldiğinde cursor cıkıyor.Bu değeri false yaparsak cursor çıkmasını engellliyoruz.
chrome_mc.kapat_bt.buttonMode =true;
//video_ui isimli FLVPlayback componentini tıklandığında tam ekran olması için çalıştırılacak kod
chrome_mc.video_ui.addEventListener(MouseEvent.CLICK,tamEkran);
//Sürükleme ve bırakma olay dinleyicileri
this.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER, suruklendiginde);
this.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP, birakildiginda);



//Playeri kapatma fonksiyonu
function playeriKapat(e:Event):void {
stage.window.close();
}

//chrome_mcı sürüklemeye başlıyor
function playeriSürükle(e:Event):void {
chrome_mc.startDrag();
}

//chrome_mc sürüklemeyi bırakıyor
function playeriSürüklemeyiDurdur(e:Event):void {
chrome_mc.stopDrag();
}

//Ekranı boyyutu nu ayaarlamak için gereken fonksiyon
function tamEkran(event:MouseEvent):void {
switch (stage.displayState) {
case "normal" :
stage.displayState = "fullScreen";
break;
case "fullScreen" :
default :
stage.displayState = "normal";
break;
}
}

//Herhangi bir dosya sürüklenmeye başlandığında o dosyanın flv dosyası olup olmadığını kontrol ediyoruz.
function suruklendiginde(event:NativeDragEvent):void {
//td adından yeni bir değişken yapıyoruz
//TransferableData: Transferi yapılacak data veya obje için bir nevi taşıyıcı görevi bulunuyor.
var trData:TransferableData = event.transferable;
if (trData.hasFormat(TransferableFormats.FILE_LIST_FORMAT)) {
//yeni bri array oluşturuyoruz.
//Buradaki amaç formatların birbirne uyuşup uyuşmadığını anlamak,
var d:Array = trData.dataForFormat(TransferableFormats.FILE_LIST_FORMAT, TransferableTransferMode.ORIGINAL_PREFERRED) as Array;
//For döngüsüne sokuyoruz çünkü bu class içerisinde jpg. png gibi dosyaların format bilgileride yer alıyor.
//uyaşan dosya ile yani flv dosyası bu classın içerisinde yer alıyorsa izin veriyoruz.
for (var i:int=0; i<d.length; i++) {
///Eğer uzantı flv ise dosyayı kabul ediyor
if (d[i].extension == "flv") {
DragManager.acceptDragDrop(this);
}
}
}
}

//Flv dosyasını alıp oynatmaya başlıyoruz
function birakildiginda(event:NativeDragEvent):void {
var trData:TransferableData = event.transferable;
if (trData.hasFormat(TransferableFormats.FILE_LIST_FORMAT)) {
var d:Array = trData.dataForFormat(TransferableFormats.FILE_LIST_FORMAT, TransferableTransferMode.ORIGINAL_PREFERRED) as Array;
//Dosyanın kaynağını belirliyoruz
chrome_mc.video_ui.source = d[0].nativePath;
//dosya oyantıyorouz.
chrome_mc.video_ui.play();
}
}
///////////////////////////////////////////////////////////

13- Menüden Commands> AIR-Application And Package Settings seçin

14- Burada pencere tipini(Windows Style) Custom Chrome(Transparent) olarak ayarlayın.İstediğiniz takdirde diğer kısımları da doldurabilirisiniz. Daha sonra Package butonuna basarak işlemi bitirebilirsiniz.

Normal koşullarda bu yapılan işlemi Flash ve Action Script ile içli dışlı olan herkes yapabilir. Ama bu işlemleri masa üzerinde gerçekleştirmek gerçekten çok zordu. Artık değil.

Masaüstünde çalışan bir flv player a sahipsiniz.!

Umarım faydalı olabilmişimdir.

Kendinize iyi bakın…

Kolay Gelsin..