{As} actionscript.gen.tr

Funny Photos Beta Yayında

Erol Demirer — Mon, 05 Sep 2011 10:35:11 +0000

Funny Photos uygulaması ile bilgisayarınızda bulunan webcam’i kullanarak eğlenceli fotoğraflar çekebilir, çektiğiniz fotoğrafları bilgisayarınıza kaydedebilir ya da Facebook’ta paylaşabilirsiniz. Başlangıç aşamasında program yazmak aklımda yoktu. Sadece bir iki efekte ihtiyacım vardı ve bu efektler için deneme yapmak niyetindeydim. Fakat iş geliştirme aşamasına gelince oldukça keyifli olmaya başladı ve o da olsun, bu da olsun derken bir ara durup baktığımda toplamda 27 efekt içeren eğlenceli bir uygulama ortaya çıktı. Uygulama yine Adobe AIR tabanlı, uygulamayı kullanabilmek için bilgisayarınızda Adobe AIR’in yüklü olması gerekiyor. Eğer yüklü değilse aşağıdaki install butonuna tıkladığınızda AIR kurulumundan sonra uygulama kurulacaktır. Uygulama altyapısı Adobe AIR olduğu için tüm işletim sistemlerinde sorunsuz olarak çalışacaktır. (Mac kullananlar bizim Photo Booth’umuz var diyebilirler )

Uygulamayı bilgisayarınıza kurduktan sonra ilk ekranda efektlerin önizlemeleri bulunmakta. İstediğiniz efektin önizlemesine tıklayarak tekli görünüme geçebilir ve fotoğrafı çekmek istediğiniz anda kamera butonuna tıklayarak fotoğrafınızı çekebilirsiniz. Butona tıkladıktan sonra 3 saniye sonunda fotoğrafınız çekilecektir. Çektiğiniz fotoğrafları alt taraftaki bulunan önizleme bölümünde görebilir ve fotoğraflar üzerinde bulunan ikonları kullanarak bilgisayarınıza kaydedebilir ya da Facebook’ta paylaşabilirsiniz. Kaydettiğiniz fotoğraflar Documents klasörü içerisinde oluşturulacak olan Funny Photos isimli klasöre kaydedilecektir. Facebookta paylaşmak istediğinizde ise Funny Photos isimli bir albüm oluşturularak, albüme kaydedilecektir. İşletim sistemlerine göre bilgisayarınızdaki kayıt adreslerini aşağıda bulabilirsiniz.

Windows: C:/Users/Kullanıcı Adı/Documents/Funny Photos
Macintosh: Users/Kullanıcı Adı/Funny Photos
Linux: home/Kullanıcı Adı/Funny Photos

Uygulamanın şu anki sürümü betadır. Gerekli testler vs. yapılmasına rağmen gözümden kaçan şeyler olabilir. Bu tip durumlar ile görüş ve önerilerinizi bildirmek için alt tarafta bulunan yorum bölümünü kullanabilirsiniz.

Programı indirmek için aşağıdaki butona tıklamanız gerekmektedir.

Umarım keyifle kullanacağınız bir uygulama olur. Son olarak uygulama bireysel kullanıcılar için ücretsizdir. Ticari kullanımlar ile ilgili olarak iletişim bölümünden benimle irtibata geçmeniz gerekmektedir.

AIR Uygulamalarını System Tray veya Dock Menüye Küçültmek

Erol Demirer — Wed, 26 Jan 2011 18:41:11 +0000

AIR ile uygulama geliştirirken minimize() metodunu kullanarak uygulamayı/pencereleri minimize ettiğimizde görev çubuğuna küçültülür. Eğer bir kaç program/pencere açıksa görev çubuğu üzerinde istenmeyen bir karmaşa olabilir. Bunun yerine kullanıcı uygulamayı minimize etmek istediğinde uygulamayı görev çubuğuna değil de System Tray yani sistem tepsisine küçültülebilir(Win – Linux işletim sistemlerinde Sistem tepsisi, Macintosh işletim sisteminde Dock menüye küçültülür). Fakat bu işlem için gerekli metot AIR içerisinde bulunmamaktadır(Bulunmamasından kastım minimize() veya maksimize() metotları gibi bir metodun olmayışıdır). Uygulamayı sistem tepsisi/dock menü’ye küçültebilmek için ikonlara ihtiyaç vardır. Windows-Linux işletim sistemlerinde 16×16, Macintosh işletim sisteminde ise 128×128 piksel ebatlarındaki ikon kullanılır.

Bu uygulama için yeni bir Adobe AIR dökümanı açın ve dökümanı kaydedin. Daha sonra components panelinde bulunan Button bileşenini sahneye sürükleyin. Bileşeni sahneye sürükledikten sonra butonu sahne üzerinden silin. Properties panelinde bulunan Adobe AIR Settings bölümündeki Edit butonuna tıklayın ve Açılan pencerede Icons sekmesini kullanarak uygulama için hazırladığınız ikonları uygulamaya dahil edin.

Uygulama sistem tepsisi / Dock menüye küçültüldüğünde kullanıcının tekrar uygulamayı görüntüleyebilmesini sağlamak için bir menü kullanmamız gerekecek. Menülerle çalışabilmek için NativeMenu ve NativeMenuItem sınıflarına ihtiyacımız olacak. NativeMenu menüleri oluşturmak ve kontrol etmek için, NativeMenuItem sınıfı ise menüye yeni seçenekler eklemek için kullanılır.

Actions panelini açarak kodları yazmaya başlayabiliriz. İlk olarak gerekli sınıfları import edeceğiz ve uygulama içerisinde ihtiyacımız olacak nesneleri tanımlayacağız. Button bileşenini sahneye ekledikten sonra olay dinleyici ekleyeceğiz.

import flash.display.NativeMenu;
import flash.display.NativeMenuItem;
import flash.desktop.*;
import flash.display.NativeWindow;

var uygulama:NativeApplication = NativeApplication.nativeApplication;
var anaPencere:NativeWindow = stage.nativeWindow;

var kucult_btn:Button=new Button();
anaPencere.stage.addChild(kucult_btn);
kucult_btn.x = (anaPencere.width-kucult_btn.width)/2;
kucult_btn.y =(anaPencere.height-kucult_btn.height)/2;
kucult_btn.label = "Küçült";

var iconLoader:Loader = new Loader();

var menu:NativeMenu;
var kapat:NativeMenuItem;
var goster:NativeMenuItem;
var trayIcon:SystemTrayIcon;
var dockIcon:DockIcon;

kucult_btn.addEventListener(MouseEvent.CLICK, kucult);

function kucult(e:MouseEvent)
{
trayaKucult();
}

Butona tıklandığında trayaKucult() fonksiyonu çağırılacak. Fonksiyon içerisinde ilk olarak uygulamanın hangi işletim sisteminde çalıştırıldığınız kontrol edeceğiz. Bu işlemi gerçekleştirebilmek içinse NativeApplication sınıfının supportsSystemTrayIcon ve supportsDockIcon özelliklerini kullacağız. Eğer işletim sistemi Windows veya Linux ise ilk özellikten, Macintosh işletim sistemi ise ikinci özellikten dönen değer true olacaktır. İşletim sistemine göre de tanımladığımız Loader nesnesinin hangi ikonu yükleyeceğini belirleyeceğiz. Menüyü oluşturmak için tanımladığımız nesnelerin birer kopyasını oluşruracağız. NativeMenuItem sınıfına ait nesneleri tanımlarken parantez içerisinde menüde görünmesini istediğimiz ifadeyi ekliyoruz. Bu ifadenin String veri türünde olması gerekmektedir. Sonrasında ise tanımladığımız menülere ve Loader nesnesine olay dinleyici ekleyeceğiz.

Yükleme işlemi tamamlandığında fonksiyon içerisinde ilk olarak yüklenen ikon görselini NativeApplication sınıfının icon.bitmaps özelliğine değer olarak atayacağız ve yine uygulamanın çalıştırıldığı işletim sistemine göre trayIcon nesnesini mi yoksa dockIcon nesnesini mi kullanacağınız belirleyip uygulamayı gizleyeceğiz. uygulamayiKapat fonksiyonu içerisinde exit() metodunu kullanarak uygulamanın kapatılmasını, uygulamayiGoster fonksiyonunun içerisinde ise ilk olarak activate() metodu ile pencerenin açık pencereler içerisinde en üste gelmesini sağladıktan sonra visible özelliğinin değerini true olarak değiştirerek pencerenin tekrar görünür olmasını sağlayacağız.

Kodların tamamı aşağıdaki gibidir.

import flash.display.NativeMenu;
import flash.display.NativeMenuItem;
import flash.desktop.*;
import flash.display.NativeWindow;
import fl.controls.Button;
import flash.display.Loader;
import flash.events.MouseEvent;
import flash.events.Event;
import flash.net.URLRequest;

var uygulama:NativeApplication = NativeApplication.nativeApplication;
var anaPencere:NativeWindow = stage.nativeWindow;

var kucult_btn:Button=new Button();
anaPencere.stage.addChild(kucult_btn);
kucult_btn.x = (anaPencere.width-kucult_btn.width)/2;
kucult_btn.y =(anaPencere.height-kucult_btn.height)/2;
kucult_btn.label = "Küçült";

var iconLoader:Loader = new Loader();

var menu:NativeMenu;
var kapat:NativeMenuItem;
var goster:NativeMenuItem;
var trayIcon:SystemTrayIcon;
var dockIcon:DockIcon;

kucult_btn.addEventListener(MouseEvent.CLICK, kucult);

function kucult(e:MouseEvent)
{
trayaKucult();
}

function trayaKucult()
{
if (NativeApplication.supportsSystemTrayIcon)
{
iconLoader.load(new URLRequest("AppIconsForPublish/16x16.png"));
}
else if (NativeApplication.supportsDockIcon)
{
iconLoader.load(new URLRequest("AppIconsForPublish/128x128.png"));
}

menu = new NativeMenu();
kapat = new NativeMenuItem("Kapat");
goster = new NativeMenuItem("Göster");
menu.addItem(kapat);
menu.addItem(goster);

kapat.addEventListener(Event.SELECT, uygulamayiKapat);
goster.addEventListener(Event.SELECT, uygulamayiGoster);

iconLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, iconYuklendi);
}

function iconYuklendi(e:Event)
{
uygulama.icon.bitmaps = [e.target.content.bitmapData];

if (NativeApplication.supportsSystemTrayIcon)
{
trayIcon = uygulama.icon as SystemTrayIcon;
trayIcon.menu = menu;
}
else if (NativeApplication.supportsDockIcon)
{
dockIcon = uygulama.icon as DockIcon;
dockIcon.menu = menu;
}

anaPencere.visible = false;
}

function uygulamayiKapat(e:Event)
{
uygulama.exit();
}

function uygulamayiGoster(e:Event)
{
anaPencere.activate();
anaPencere.visible = true;
}

Örnek çalışma dosyasını indirebilmek için siteye üye olmanız gerekmektedir. Siteye üye olmak için tıklayın.

AIR Uygulamalarında Yeni Pencere Oluşturmak

Erol Demirer — Sun, 23 Jan 2011 22:54:07 +0000

Bu bölümde AIR uygulamaları geliştirirken yeni sistem pencereleri ile çalışırken neler yapılması gerektiğine değineceğim. Bu uygulamaya başlayabilmek için bir önceki yazıda bulunan örneğe ihtiyacınız olacak. İlk olarak NativeApplication isimli dosyayı açın ve Save As komutu ile farklı bir isimle kaydedin. Dosyayı kaydettikten sonra Components panelindeki User Interface sekmesinin altında bulunan Button bileşenini tutup sahneye sürükleyin. Bileşeni sahneye ekledikten sonra sahne üzerinden silin.

Pencereler ile ilgili gerekli ayarları yapabilmek için NativeWindowInitOptions sınıfının kullanılması gerekmektedir. Bu sınıfı kullanabilmek içinse yeni bir NativeWindow nesnesi tanımlamak gerekir. Tanımlanan NativeWindow nesnesini tanımlarken NativeWindowInitOptions nesnesini parametre olarak geçmek gerekir. Artık kodları yazmaya başlayabiliriz. Actions panelini açın ve aşağıdaki kod bloğunu panelde en üstte bulunan kısmın altına ekleyin. Button sınıfı ile Library’de bulunan Button bileşeni ile ilgili işlemleri gerçekleştireceğiz.

import flash.display.NativeWindowInitOptions;
import fl.controls.Button;

Şimdi de yeni bir sistem penceresi oluşturabilmek ve bu pencere ile ilgili ayarlamaları yapabilmek için iki değişken tanımlayacağız. yeniPencere isimli değişken açılacak olan pencereyi temsil edecek. winOptions nesnesi ile de açılacak olan pencerenin ayarlarını yapacağız. yeniPencere_btn isimli nesne ile de pencerenin açılmasını sağlayacağız. Aşağıdaki kod bloğunu

anaPencere.title = "First Application";

satırının altına ekleyin.

var winOptions:NativeWindowInitOptions = new NativeWindowInitOptions();
var yeniPencere:NativeWindow;
var yeniPencere_btn:Button=new Button();
anaPencere.stage.addChild(yeniPencere_btn);
yeniPencere_btn.label = "Yeni Pencere Aç";

Sahne üzerindeki butona tıklandığında sürekli olarak yeni bir pencere oluşturulacaktır. Bunu önleyebilmek için Boolean veri türünde bir değişken tanımlayacağız. Eğer değişkenin değeri false ise yeni pencere açılacak, true ise herhangi bir işlem yapılmayacaktır. Tanımlayacağımız değişkenin ismi yeniPencereAcik olsun. Aşağıdaki kod bloğunu

var maksimize:Boolean;

satırının altına ekleyin.

var yeniPencereAcik:Boolean;

Kullanılacak pencereyi oluşturmak ve pencere ile ilgili ayarları yapabilmek için bir fonksiyon tanımlayacağız. Tanımlayacağımız bu fonksiyona iki adet parametre göndereceğiz. Bu parametrelerden w parametresi ile pencerenin genişilik değerini, h ile de pencerenin yükseklik değerini belirleyeceğiz. Fonksiyon içerisinde ise ilk olarak tanımladığımız NativeWindowInitOptions nesnesinin özelliklerini belirleyeceğiz. Açılacak olan pencere minimize-maksimize edilemeyecek ve büyütülemeyecektir(resizable). Pencerenin kullanacağı krom tipini ise systemChrome özelliği ile belirleyeceğiz. Bu özelliğin değeri NONE ise sistem kromu kullanılmayacaktır. Sistem kromlarını kullanabilmek için bu özelliğin değerini STANDART olarak değiştirmeniz veya bu satırı iptal etmeniz gerekecektir. Pencere şeffaflığı ile ilgili işlemleri de transparent özelliğini kullanarak yapacağız.

Bu ayarları yaptıktan sonra daha once tanımlamış olduğumuz NativeWindow nesnesinin bir kopyasını oluşturacağız ve parametre olarak winOptions nesnesini göndereceğiz. Kopyayı oluşturduktan sonra ise pencerenin genişlik ve yükseklik değerlerini belirleyip pencerenin ölçekleme ve hizalama özelliklerini düzenleyeceğiz. Bu işlemleri yapabilmek için NativeWindow nesnesinin daha once tanımlanmış olması gerekmektedir. Açılacak pencere ile ilgili son olarak title özelliğini düzenleyeceğiz.

Pencere ile ilgili genel ayarları bitirdikten sonra ise DragBar ve CloseButton nesnelerinin birer kopyasını açılan pencereye ekleyeceğiz. Gerekli işlemlerin (sürükleme ve pencereyi kapatma) yapılabilmesi için bu nesnelere birer oaly dinleyici ekleyeceğiz. Fonksiyon içerisinde son olarak pencerenin görüntülenebilmesi gerekli satırı ekleyeceğiz. Bu işlemi de activate() metodunu kullanarak yapacağız. Aşağıdaki kodları Actions panelinin en altına yerleştirebilirsiniz.

function yeniPencereAc(w:int, h:int)
{
winOptions.maximizable = false;
winOptions.minimizable = false;
winOptions.resizable = false;
winOptions.systemChrome = NativeWindowSystemChrome.NONE;
winOptions.transparent = false;

yeniPencere = new NativeWindow(winOptions);
yeniPencere.width = w;
yeniPencere.height = h;
yeniPencere.stage.scaleMode = StageScaleMode.NO_SCALE;
yeniPencere.stage.align = StageAlign.TOP_LEFT;
yeniPencere.title = "Yeni Pencere";

var yeniPencereDragBar_mc:DragBar=new DragBar();
var yeniPencereClose_mc:CloseButton = new CloseButton();
yeniPencere.stage.addChild(yeniPencereDragBar_mc);
yeniPencere.stage.addChild(yeniPencereClose_mc);
yeniPencereClose_mc.buttonMode = true;
yeniPencereClose_mc.x = yeniPencere.width - 20;
yeniPencereDragBar_mc.width = w;
yeniPencereDragBar_mc.x = 0;

yeniPencereDragBar_mc.addEventListener(MouseEvent.MOUSE_DOWN, pencereSurukle);
yeniPencereClose_mc.addEventListener(MouseEvent.CLICK, pencereyiKapa);

yeniPencere.activate();
}

Şimdi de sırası ile sahne üzerinde bulunan butona biro lay dinleyici ekleyeceğiz ve yeniPencereAc fonksiyonu içerisinde eklediğimiz olay dinleyicilerin fonksiyonlarını oluşturacağız. Butona tıklandığında çalışacak olan fonksiyonun içerisinde ilk once yeniPencereAcik değişkeninin değerini kontrol edeceğiz. Eğer değişkenin değeri false ise değişkenin değerini true olarak değiştirecek ve yeniPencereAc isimli fonksiyonu çağıracağız. pencereSurukle fonksiyonun içerisinde ise startMove() metodunu kullanarak açılan pencerenin sürüklenmesini sağlayacağız. pencereyiKapa fonksiyonun içerisinde ise açık olan pencereyi kapatacak ve yeniPencereAcik isimli değişkenin değerini false olarak değiştireceğiz. Aşağıdaki kodları yine Actions panelinin en altına yerleştirebilirsiniz.

yeniPencere_btn.addEventListener(MouseEvent.CLICK, pencereAc);

function pencereAc(e:MouseEvent)
{
if (! yeniPencereAcik)
{
yeniPencereAcik = true;
yeniPencereAc(250,250);
}

}

function pencereSurukle(e:MouseEvent)
{
yeniPencere.startMove();
}

function pencereyiKapa(e:MouseEvent)
{
yeniPencere.close();
yeniPencereAcik = false;
}

Kodların tamamının görünümü aşağıdaki gibidir.

import flash.desktop.NativeApplication;
import flash.display.NativeWindow;
import flash.system.Capabilities;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.display.NativeWindowInitOptions;
import fl.controls.Button;

var anaUygulama:NativeApplication = NativeApplication.nativeApplication;
var anaPencere:NativeWindow = stage.nativeWindow;
anaPencere.title = "First Application";

var winOptions:NativeWindowInitOptions = new NativeWindowInitOptions();
var yeniPencere:NativeWindow;
var yeniPencere_btn:Button=new Button();
anaPencere.stage.addChild(yeniPencere_btn);
yeniPencere_btn.label = "Yeni Pencere Aç";

var dragBar_mc:DragBar = new DragBar();
var minimize_mc:MinimizeButton=new MinimizeButton();
var maksimize_mc:MaksimizeButton=new MaksimizeButton();
var close_mc:CloseButton=new CloseButton();

anaPencere.stage.addChild(dragBar_mc);
anaPencere.stage.addChild(minimize_mc);
anaPencere.stage.addChild(maksimize_mc);
anaPencere.stage.addChild(close_mc);

minimize_mc.buttonMode = true;
maksimize_mc.buttonMode = true;
close_mc.buttonMode = true;

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
var maksimize:Boolean;
var yeniPencereAcik:Boolean;

anaPencere.addEventListener(Event.RESIZE, resized);

function resized(e:Event)
{
dragBar_mc.x = dragBar_mc.y = 0;
dragBar_mc.width = anaPencere.width;
minimize_mc.x = anaPencere.width - 70;
minimize_mc.y = 0;
maksimize_mc.x = anaPencere.width - 45;
maksimize_mc.y = 0;
close_mc.x = anaPencere.width - 20;
close_mc.y = 0;
yeniPencere_btn.x=(anaPencere.width-yeniPencere_btn.width)/2;
yeniPencere_btn.y=(anaPencere.height-yeniPencere_btn.height)/2;
anaPencere.x =(Capabilities.screenResolutionX-anaPencere.width)/2;
anaPencere.y=(Capabilities.screenResolutionY-anaPencere.height)/2;
}

anaPencere.dispatchEvent(new Event(Event.RESIZE));

dragBar_mc.addEventListener(MouseEvent.MOUSE_DOWN, pencereyiSurukle);

function pencereyiSurukle(e:MouseEvent)
{
anaPencere.startMove();
}

minimize_mc.addEventListener(MouseEvent.CLICK, minimizeEt);

function minimizeEt(e:MouseEvent)
{
anaPencere.minimize();
}

maksimize_mc.addEventListener(MouseEvent.CLICK, maksimizeEt);

function maksimizeEt(e:MouseEvent)
{
if (! maksimize)
{
anaPencere.maximize();
maksimize = true;
}
else if (maksimize)
{
anaPencere.width = 625;
anaPencere.height = 400;
maksimize = false;
}
}

close_mc.addEventListener(MouseEvent.CLICK, uygulamayiKapat);

function uygulamayiKapat(e:MouseEvent)
{
anaUygulama.exit();
}

function yeniPencereAc(w:int, h:int)
{
winOptions.maximizable = false;
winOptions.minimizable = false;
winOptions.resizable = false;
winOptions.systemChrome = NativeWindowSystemChrome.NONE;
winOptions.transparent = false;

yeniPencere = new NativeWindow(winOptions);
yeniPencere.width = w;
yeniPencere.height = h;
yeniPencere.stage.scaleMode = StageScaleMode.NO_SCALE;
yeniPencere.stage.align = StageAlign.TOP_LEFT;
yeniPencere.title = "Yeni Pencere";

var yeniPencereDragBar_mc:DragBar=new DragBar();
var yeniPencereClose_mc:CloseButton = new CloseButton();
yeniPencere.stage.addChild(yeniPencereDragBar_mc);
yeniPencere.stage.addChild(yeniPencereClose_mc);
yeniPencereClose_mc.buttonMode = true;
yeniPencereClose_mc.x = yeniPencere.width - 20;
yeniPencereDragBar_mc.width = w;
yeniPencereDragBar_mc.x = 0;

yeniPencereDragBar_mc.addEventListener(MouseEvent.MOUSE_DOWN, pencereSurukle);
yeniPencereClose_mc.addEventListener(MouseEvent.CLICK, pencereyiKapa);

yeniPencere.activate();
}

yeniPencere_btn.addEventListener(MouseEvent.CLICK, pencereAc);

function pencereAc(e:MouseEvent)
{
if (! yeniPencereAcik)
{
yeniPencereAcik = true;
yeniPencereAc(250,250);
}

}

function pencereSurukle(e:MouseEvent)
{
yeniPencere.startMove();
}

function pencereyiKapa(e:MouseEvent)
{
yeniPencere.close();
yeniPencereAcik = false;
}

Örnek çalışma dosyasını indirebilmek için siteye üye olmanız gerekmektedir. Siteye üye olmak için tıklayın.

AIR Uygulamalarında Ana Pencere İle Çalışmak

Erol Demirer — Sun, 23 Jan 2011 22:53:15 +0000

Oluşturulan uygulamalar içerisinde birden fazla pencere ile çalışmak mümkün. Bu bölümde sadece ana penceresi üzerinde çalışacağız. Ana uygulama penceresi üzerinde ilk etapta en fazla ihtiyacınız olacak şeyler, bu pencereyi sürüklemek, minimize ve maksimize etmek olacaktır. AIR uygulamalarında ana pencereyi NativeApplication objesi temsil eder ve her uygulama için sadece bir tane NativeApplication objesi tanımlanabilir. Uygulama oluşturululduğuna bu objede otomatik olarak oluşturulur. Sonrasında bu objeyi silme şansınız yoktur.

Uygulamaya başlayabilmek için yeni bir Adobe AIR belgesi oluşturun ve belgeyi NativeApplication ismi ile kaydedin. Properties panelinde bulunan Adobe AIR Settings sekmesinin karşısındaki Edit butonuna tıklayın ve açılan pencerede General sekmesinde bulunan Window Style seçeneğini Custom Chrome (opaque) olarak değiştirin.

Sahne üzerinde sahne genişliğinde ve yüksekliği 20 piksel olan bir dikdörtgen çizin ve MovieClip olarak sembole dönüştürün. Convert To Symbol panelinde Advanced ikonuna tıklayın ve açılan pencerede Export for ActionScript onay kutusunu işaretleyin. Class sekmesine de DragBar yazarak pencereyi kapatın. Daha sonra uygulama penceresini minimize, maksimize etmek ve uygulamayı kapatmak için kullanacağınız üç tane MovieClip hazırlayın. Yine Convert to Symbol panelinde Export for ActionScript onay kutusunu işaretleyin ve Class sekmelerine pencereyi minimize etmek için kullanacağınız sembol için MinimizeButton, maksimize etmek için kullanacağınız MovieClip için MaksimizeButton, uygulamayı kapatmak için kullanacağınız MovieClip içinse CloseButton yazın.Bu sembollere örnek teşkil etmesi için herhangi bir uygulama üzerinde kullanılan ikonlara bakabilirsiniz. Son olarakta Timeline üzerindeki layerın ismini Actions olarak değiştirin ve eğer sahne üzerinde herhangi bir sembol varsa bu sembolleri silin.

İlk olarak kullanılacak sınıfları import edilmesi gerekiyor. AIR uygulamalarında pencereler ile çalışabilmek için NativeWindow sınıfını kullanmanız gerekmektedir.Sınıfları import ettikten sonra NativeApplication ve NativeWindow sınıflarına ait yeni birer nesne tanımlıyoruz. NativeApplication nesnesinin ismi anaUygulama NativeWindow nesnesinin ismide anaPencere olsun. (Eğer standart sistem kromlarını kullanıyorsanız title özelliği ile pencerelerin sol üst köşesinde istediğiniz bilgileri görüntüleyebilirsiniz. Standart sistem kromlarını kullanmıyorsanız da yeni bir pencere açtığınızda TaskBar da ya da uygulamalar arasında geçiş yapmak istediğinizde bu özelliğe verdiğiniz değer görüntülenecektir.) Uygulamanın çalıştırıldığı ekran çözünürlüğü ile ilgili bilgileri alabilmek içinse Capabilities sınıfını kullanılması gerekmektedir. Son olarakta oluşturduğumuz MovieClip’leri kod ile çağırarak sahne üzerine ekliyoruz ve bu sembollerinin buttonMode özelliklerinin değerini true olarak değiştiriyoruz. Sembolleri anaPencere isimli pencereye ekleyeceğiz. Web uygulamalarında sahne üzerine sembol ekleyebilmek için addChild() metodunu kullanıyoruz. AIR uygulamalarında pencereye nesne ekleyebilmek için addChild() metodunun kullanımı biraz farklıdır. Pencereye içerik ekleyebilmek için ilk once pencere ismini, sonra da stage ifadesinin kullanılması gerekir.

import flash.desktop.NativeApplication;
import flash.display.NativeWindow;
import flash.system.Capabilities;

var anaUygulama:NativeApplication = NativeApplication.nativeApplication;
var anaPencere:NativeWindow = stage.nativeWindow;
anaPencere.title = "First Application";

var dragBar_mc:DragBar = new DragBar();
var minimize_mc:MinimizeButton=new MinimizeButton();
var maksimize_mc:MaksimizeButton=new MaksimizeButton();
var close_mc:CloseButton=new CloseButton();

anaPencere.stage.addChild(dragBar_mc);
anaPencere.stage.addChild(minimize_mc);
anaPencere.stage.addChild(maksimize_mc);
anaPencere.stage.addChild(close_mc);

minimize_mc.buttonMode=true;
maksimize_mc_buttonMode=true;
close_mc.buttonMode=true;

Şimdi de sahnenin scaleMode ve align özelliklerinin değerlerini değiştirmemiz gerekiyor ki uygulama resize edildiğinde pencere üzerindeki sembollerin görünümleri değişmesin. Sembollerin boyutlarının değişmemesi için scaleMode özelliğinin değerini NO_SCALE olarak değiştirmemiz gerekmektedir.Pencere üzerindeki sembollerin hangi konuma gore hizalanacaklarını belirlemek içinde align özelliği kullanılır. Bu uygulamada nesnelerin pencerenin sol üst köşesine gore hizalanması gerekmektedir.Bunun için align için özelliğin değerini TOP_LEFT olarak değiştiriyoruz. Böylece pencere üzerine eklenen nesneler sol üst köşeye göre hizalanacaktır. Ana pencerenin maksimize edilip edilmediğini kontrol etmek için Boolean veri türüne ait bir değişken tanımlıyoruz. Bu değişkenin ismi de maksimize olsun. Pencere resize edildiğinde pencere üzerinde bulunan sembollerin konumlarını belirleyebilmek içinde anaPencere isimli nesneye Event.RESIZE olayını dinleyen bir olay dinleyici ekliyoruz. Bu olay dinleyici sayesinde pencerenin boyutu değiştiğinde pencere üzerindeki sembollerin konumları ile anaPencerenin x ve y konumlarını ayarlayacağız. Pencerelerin x ve y konumlarını belirleyebilmek için bildiğimiz klasik değer atama yöntemini kullanabiliriz. Fakat pencerenin ekranın tam ortasında açılmasını için Capabilities sınıfını kullanılması gerekir. Sınıf içerisinde bulunan screenResolutionX ve screenResolutionY özellikleri ile ekranın genişlik ve yükseklik değerleri alınabilir. Uygulama ilk çalıştırıldığında pencere üzerinde herhangi bir ölçekleme işlemi olmayacağı için tanımladığımız olay dinleyici çalışmayacaktır. Küçük bir trick ile bu fonksiyonun çalışmasını sağlayabiliriz. Bunun için anaPencere nesnesinin dispatchEvent metodunu kullanacağız. dispatchEvent metodu ile olay meydana gelmiş gibi olay dinleyiciyi tetikleyerek fonksiyonun çalışmasını sağlayacaktır.

stage.scaleMode = "noScale";
stage.align = "TL";
var maksimize:Boolean;

anaPencere.addEventListener(Event.RESIZE, resized);

function resized(e:Event)

{
dragBar_mc.x = dragBar_mc.y = 0;
dragBar_mc.width = anaPencere.width;
minimize_mc.x = anaPencere.width - 70;
minimize_mc.y = 0;
maksimize_mc.x = anaPencere.width - 45;
maksimize_mc.y = 0;
close_mc.x = anaPencere.width - 20;
close_mc.y = 0;
anaPencere.x =(Capabilities.screenResolutionX-anaPencere.width)/2;
anaPencere.y=(Capabilities.screenResolutionY-anaPencere.height)/2;
}
anaPencere.dispatchEvent(new Event(Event.RESIZE));

Uygulamayı test ettiğinizde görüntünün aşağıdaki gibi olması gerekiyor.

Şimdi de pencereyi sürükleme işlemini gerçekleştireceğiz. Web uygulamalarında nesneleri sürüklemek için startDrag(), sürükleme işlemini sonlandırmak içinse stopDrag() metodu kullanılır. AIR uygulamalarında ise pencereyi sürükleyebilmek için NativeWindow sınıfının startMove() metodunu kullanmanız yeterlidir. Bırakma işlemi için ekstra koda ihtiyaç yoktur. Sürükleme işlemi için dragBar_mc isimli sembole MOUSE_DOWN olayını dinleyen biro lay dinleyici ekleyerek ve fonksiyonu oluşturuyoruz.

dragBar_mc.addEventListener(MouseEvent.MOUSE_DOWN, pencereyiSurukle);

function pencereyiSurukle(e:MouseEvent)
{
anaPencere.startMove();
}

Uygulamayı minimize edebilmek için NativeWindow sınıfının minimize() metodunu kullanacağız. Pencere üzerindeki minimize_mc isimli sembole oaly dinleyici ekleyerek fonksiyonu oluşturuyoruz.

minimize_mc.addEventListener(MouseEvent.CLICK, minimizeEt);

function minimizeEt(e:MouseEvent)
{
anaPencere.minimize();
}

Sıra geldi pencereyi maksimize etmeye. Pencereyi maksimize edebilmek için NativeWindow sınıfının maximize() metodunu kullanacağız. maksimize_mc isimli sembole ilk tıklandığında uygulama penceresi maksimize edilecek, ikinci kez tıklandığında ise pencere eski boyutuna geri dönecektir. Hangi işlemin yapılacağını belirlemek için tanımlamış olduğumuz maksimize isimli değişkeni kullanacağız. Boolean veri türündeki değişkenler default olarak false değerini alırlar. Eğer değişkenin değeri false ise pencereyi maksimize edecek ve değişkenin değeri true olarak değiştireceğiz. Eğer değişkenin değeri true ise pencereyi eski boyutuna geri döndürecek ve değişkenin değerini false olarak değiştireceğiz. Bu kontrolleri yapabilmek içinde if..else if koşullu ifadesini kullanacağız.

maksimize_mc.addEventListener(MouseEvent.CLICK, maksimizeEt);

function maksimizeEt(e:MouseEvent)
{
if (! maksimize)
{
anaPencere.maximize();
maksimize = true;
}
else if (maksimize)
{
anaPencere.width = 625;
anaPencere.height = 400;
maksimize=false;
}
}

Geriye uygulamanın kapatılma işlemi kalıyor. Bu işlemi gerçekleştirebilmek için NativeApplication sınıfının exit() metodu kullanacağız.

close_mc.addEventListener(MouseEvent.CLICK, uygulamayiKapat);

function uygulamayiKapat(e:MouseEvent)
{
anaUygulama.exit();
}

Bu uygulama için gerekli kodların tamamı şu şekildedir.

import flash.desktop.NativeApplication;
import flash.display.NativeWindow;
import flash.system.Capabilities;
import flash.events.Event;
import flash.events.MouseEvent;

var anaUygulama:NativeApplication = NativeApplication.nativeApplication;
var anaPencere:NativeWindow = stage.nativeWindow;
anaPencere.title = "First Application";

var dragBar_mc:DragBar = new DragBar();
var minimize_mc:MinimizeButton=new MinimizeButton();
var maksimize_mc:MaksimizeButton=new MaksimizeButton();
var close_mc:CloseButton=new CloseButton();

anaPencere.stage.addChild(dragBar_mc);
anaPencere.stage.addChild(minimize_mc);
anaPencere.stage.addChild(maksimize_mc);
anaPencere.stage.addChild(close_mc);

minimize_mc.buttonMode = true;
maksimize_mc.buttonMode = true;
close_mc.buttonMode = true;

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
var maksimize:Boolean;

anaPencere.addEventListener(Event.RESIZE, resized);

function resized(e:Event)
{
dragBar_mc.x = dragBar_mc.y = 0;
dragBar_mc.width = anaPencere.width;
minimize_mc.x = anaPencere.width - 70;
minimize_mc.y = 0;
maksimize_mc.x = anaPencere.width - 45;
maksimize_mc.y = 0;
close_mc.x = anaPencere.width - 20;
close_mc.y = 0;
anaPencere.x =(Capabilities.screenResolutionX-anaPencere.width)/2;
anaPencere.y=(Capabilities.screenResolutionY-anaPencere.height)/2;
}

anaPencere.dispatchEvent(new Event(Event.RESIZE));

dragBar_mc.addEventListener(MouseEvent.MOUSE_DOWN, pencereyiSurukle);

function pencereyiSurukle(e:MouseEvent)
{
anaPencere.startMove();
}

minimize_mc.addEventListener(MouseEvent.CLICK, minimizeEt);

function minimizeEt(e:MouseEvent)
{
anaPencere.minimize();
}

maksimize_mc.addEventListener(MouseEvent.CLICK, maksimizeEt);

function maksimizeEt(e:MouseEvent)
{
if (! maksimize)
{
anaPencere.maximize();
maksimize = true;
}
else if (maksimize)
{
anaPencere.width = 625;
anaPencere.height = 400;
maksimize = false;
}
}

close_mc.addEventListener(MouseEvent.CLICK, uygulamayiKapat);

function uygulamayiKapat(e:MouseEvent)
{
anaUygulama.exit();
}

AIR uygulamarı oluştururken yeni pencereler açmak ve bu pencereler ile çalışmayı bir sonraki yazımda anlatacağım.

Örnek çalışma dosyasını indirebilmek için siteye üye olmanız gerekmektedir. Siteye üye olmak için tıklayın.

XML Dosyasını Kullanarak AIR Uygulamalarını Yapılandırmak

Erol Demirer — Sun, 23 Jan 2011 22:52:30 +0000

AIR uygulamalarının ana konfigürasyon dosyası XML dosyasıdır. Bu XML dosyası içerisinde oluşturulan uygulama için gerekli ayarlar ile ilgili bilgiler bulunmaktadır. AIR ile uygulama geliştirirken Adobe Flash veya Adobe Dreamweaver programlarını kullanıyorsanız XML dosyasını el ile oluşturmanıza gerek kalmayacaktır. Zira her iki programda da bu dosyayı oluşturabilmek için gerekli paneller mevcut. Fakat farklı programlar ile uygulama geliştiriyorsanız XML dosyasını manuel olarak oluşturmanız gerekmektedir. Oluşturduğunuz uygulamayı ilk test ettiğiniz anda bu XML dosyası otomatik olarak UygulamaAdı-app.xml ismi ile oluşturulacaktır.

XML dosyasının ana etiketi application etiketidir. Bu etiket içerisinde kullanılan AIR verisyonu ile ilgili bilgiler yer almaktadır.

xmlns="http://ns.adobe.com/air/application/2.5">

id etiketlerinin içerisinde uygulamanın kimlik bilgileri yer almaktadır.

>com.actionscript.gen.tr.FirstApplication>

versionNumber etiketleri içerisinde uygulamanın versiyon bilgileri yer almaktadır. Geliştirdiğiniz uygulamaların yeni sürümlerini oluşturdukça buradaki bilgiyi değiştirmeniz gerekmektedir. Eğer versiyon bilgisini yenilemezseniz uygulamanın kurulu olduğu bir bilgisayara yeni versiyonu kurmaya kalktığınızda hata mesajı ile karşılaşırsınız. Versiyon numaraları rakamlardan oluşmak zorunda değildir. Versiyonlar Alpha, Beta, v1 şeklinde de adlandırılabilir.

>1.0>

filename etiketleri içerisinde uygulama yüklendikten sonra kullanıcının bilgisayarında görüntülenecek olan isim bilgisi yer almaktadır. Bu etiket içerisinde kullanılamayacak bazı karakterler mevcuttur. Bu karakterler şunlardır: * “ : ? < > \ | Bu karakterlerin kullanılamasının sebebi ise bazı işletim sistemlerinin bu karakterleri yasaklamış olmasıdır.

>First Application>

description etiketleri içerisinde uygulama ile ilgili açıklayıcı bilgiler yer almaktadır. Eğer geliştirdiğimiz uygulama farklı dillerde gösterilecekse buradaki bilgileri de dillere gore değiştirmeniz mümkün. Bu işlemi yapabilmek içinse xml:lang özniteliğini kullanmanız gerekir. Uygulama yüklenmeye başladığında kullanılan işletim sistemi diline göre gerekli seçimi yapacaktır.

>
xml:lang=”tr” >http://actionscript.gen.tr AIR Uygulama Geliştirme İlk Uygulama>
xml:lang=”en” >http://actionscript.gen.tr AIR Application Development Firs Application>
>

name etiketleri içerisinde uygulama yüklenirken kullanıcıya gösterilecek olan uygulama ismi bilgileri yer almaktadır. Eğer sistem kromları kullanılırsa bu etiket içerisindeki bilgiler pencere üzerinde görünecektir. Description etiketi için geçerli olan dil bilgileri bu etiket içinde geçerlidir.

>
xml:lang=”tr”>İlk Uygulama>
xml:lang=”en”>First Application>
>

>http://actionscript.gen.tr | Erol Demirer>

initialWindow etiketi içerisinde birden fazla ve birbirinden farklı alt etiketler vardır. Bu etiket içerisinde uygulama çalıştırıldığında açılacak olan pencerenin görünümü ve işlevselliği ile ilgili bir takım biligiler yer almaktadır.

>
>FirstApplication.swf>
>standard>
>false>
>true>
>false>
>false>
>true>
>false>

>

Content etiketinin içerisinde uygulama içeriği daha doğrusu uygulama çalıştırıldığında kullanılacak olan ana dosyanın ismi bulunmaktadır.

systemChrome etiketleri içerisinde uygulamanın hangi krom tipini kullanacağı bilgisi yer almaktadır. Bu etiketler içerisindeki değer standart ise varsayılan system kromlarını kullanır. Bu etiket içerisinde kullanabileceğiniz diğer iki seçenek opaque ve none. Standart ve opaque seçeneklerini kullanacaksanız bir sonraki etiket olan transparent etiketinin değerini değiştirmenize gerek yok. Fakat none seçeğini kullandığınızda transparent seçeneğinin değerini true olarak değiştirmeniz gerekmektedir.

visible etiketi içerisinde uygulama çalıştırıldığı ilk anda görüntülenip görüntülenmeyeceği ile ilgili bilgiler yer almaktadır. Bu etiket içerisine false ve true olmak üzere iki değer girebilirsiniz. Varsayılan değer false değeridir. Yani uygulama çalıştırıldığında görüntülenir. Eğer uygulama çalıştırıldığında görüntülenmesini istemiyorsanız bu değeri true olarak değiştirmeniz gerekmektedir.

fullScreen etiketi içerisinde uygulama çalıştırıldığında tam ekran olup olmayacağı ile ilgili bilgiler yer almaktadır. Bu etiket içerisinde de false ve true değerleri kullanılmaktadır.

Maximizable, minimizable ve resizable etiketleri içerisinde uygulama penceresinin tam ekran olması, minimize edilmesi ve ölçeklendirilebilmesi ile ilgili bilgiler yer almaktadır. Bu etiketler içerisinde false ve true değerleri kullanılmaktadır. Örneğin uygulama penceresinin tam ekran olmasını istemiyorsanız maximize etiketinin değerini false olarak değiştirmeniz yeterli olacaktır.
Width etiketi içerisinde uygulamanın genişlik değeri, height etiketi içerisinde ise uygulamanın yükseklik değeri yer almaktadır.
X ve y etiketleri içerisinde uygulama çalıştırıldığında alacağı konum ile ilgili bilgiler yer almaktadır.

minSize ve maxSize etiketleri içerisinde ise uygulamanın alabileceği minimum ve maksimum genişlik-yükseklik bilgileri yer almaktadır. Bu etiketler içerisinde girilecek değerler ilk once genişlik arada bir boşluk sonrasında yükseklik değeridir.

icon etiketileri içerisinde uygulama için kullanılacak olan icon dosyalarının nerede olduğunun bilgisi yer almaktadır. İconların boyutlarına göre açılan alt etiketler içerisinde ölçüler belirtilmektedir.

>
>AppIconsForPublish/16x16.png>
>AppIconsForPublish/32x32.png>
>AppIconsForPublish/48x48.png>
>AppIconsForPublish/128x128.png>
>

customeUpdateUI etiketi içerisinde güncelleme bilgileri yer almaktadır. Etiket içerisindeki değer false ise güncelleme işlemi için kullanıcıya soru sorulacaktır. Değer true ise kullanıcıya herhangi bir soru sorulmadan güncelleme işlemi başlatılacaktır. (Güncelleme işlemlerinin yapılabilmesi için uygulama geliştirirken gerekli işlemleri yapmış olmanız gerekmektedir.)

>false>

allowBrowserInvocation etiketleri içerisinde uygulamanın tarayıcı üzerinden başlatılıp başlatılamayacağı bilgisi yer almaktadır. (Uygulamanızı bir web sayfası üzerinden yüklenecek şekilde ayarladıysanız etiket içerisindeki değeri true olarak değiştirdiğinizde uygulama yüklendikten sonra otomatik olarak çalıştırılacaktır.) Varsayılan değer olarak false ayarlanmıştır.

>false>

fileTypes etiketi içerisinde uygulama ile ilişkilendirilecek olan dosya türleri ile ilgili bilgiler yer almaktadır.

>
>
>>
>>
>>
>>
/>
>
>

Oluşan XML dosyasının tamamı aşağıdaki gibidir.

version="1.0" encoding="UTF-8" standalone="no" ?>
xmlns="http://ns.adobe.com/air/application/2.5">

>com.actionscript.gen.tr.FirstApplication>

>1.0>

>First Application>

>http://actionscript.gen.tr AIR Uygulama Geliştirme İlk Uygulama>
>FirstApplication>
>http://actionscript.gen.tr | Erol Demirer>

>
>FirstApplication.swf>
>standard>
>false>
>true>
>false>
>false>
>true>
>false>

>

>
>AppIconsForPublish/16x16.png>
>AppIconsForPublish/32x32.png>
>AppIconsForPublish/48x48.png>
>AppIconsForPublish/128x128.png>
>

>false>

>false>

>desktop extendedDesktop >

>

Adobe AIR İle İlk Uygulama

Erol Demirer — Sun, 23 Jan 2011 22:49:57 +0000

İlk olarak Welcome Screen üzerinde Create New sekmesinin altında bulunan seçeneğini ya da File menüsünün altında bulunan New sekmesine tıkladıktan sonra açılan pencerede Adobe AIR 2 seçeneğine tıklayarak yeni bir döküman oluşturup ve FirstApplication ismiyle dökümanı kaydedin. Dökümanı oluşturduktan sonra Actions panelini açarak aşağıdaki kodları yazın. Bu kodlarla sahne üzerine bir text alanı ekleyeceksiniz.

import flash.text.TextField;

var tf:TextField=new TextField();
tf.text="Lorem Ipsum is simply dummy text of the printing and typesetting industry.";
tf.autoSize=TextFieldAutoSize.LEFT;
addChild(tf);

Uygulamayı test ettiğinizde sonucun aşağıdaki gibi olması gerekiyor.

Sonuç web uygulamalarını oluştururken görmeye alışık olduğumuz Flash Player’dan biraz farklı. Oluşturacağınız uygulamanın standart(İşletim sistemlerine gore değişebilir) görünümü bu şekilde olacaktır. Uygulamaların masaüstünde sürüklenebilmesi, minimize-maksimize edilebilmesi, kapatılabilmesi, yeniden boyutlandırılabilmesi gibi işlemler çoğu zaman standart sistem kromları ile yapılır. İsterseniz bu görünüm üzerinde değişiklik yapabilirsiniz. Kullandığınız AIR uygulamalarına dikkat ederseniz neredeyse hiç biri sistem kromlarını kullanmaz (Örneğin bilgisayarınızda yüklü olan Adobe Media Player uygulamasını inceleyebilirsiniz). Bu konu ile ilgili olarak neler yapılabileceğine sonraki yazılarda değineceğim.

Sıra geldi uygulamayı paketlemeye, bunun için bir takım ayarlar yapılması gerekiyor. Bu ayarları yapabilmek için iki farklı yöntem izleyebilirsiniz. Bu yöntemlerden ilk ve basit olanı şu şekilde: Properties panelininde bulunan Adobe AIR Settings butonuna ya da File > Publish Settings sekmesine tıkladıktan sonra açılan pencerede Flash sekmesinin altında bulunan Player bölümünündeki settings butonuna tıklayarak Application & Installer Settings panelini açın.

Açılan pencerede birden fazla sekme bulunmakta. Bu sekmelerden ilki olan General sekmesinde uygulama ile ilgili genel ayarları yapabilirsiniz.

Output File bölümünde oluşturulacak .air dosyasının kaydedileceği konumunu belirleyebilirsiniz.

File Name sekmesini kullanarak dosya ismini belirleyebilirsiniz.

App Name sekmesini kullanarak oluşturulacak uygulamanın adını belirleyebilirsiniz.

Version sekmesini kullanarak oluşturulan uygulamanın versiyonunu belirleyebilirsiniz.

App Id sekmesini kullanarak uygulamanın ID’sını belirleyebilirsiniz.

Description sekmesine uygulama ile ilgili bilgiler ekleyebilirsiniz.

Window style sekmesi ile uygulamanın kullanacağı krom tipini belirleyebilirsiniz. Bu bölümde 3 farklı krom seçeneği bulunmaktadır.

System Chrome: Standart sistem kromunu kullanır.

Custom Chrome(opaque): Standart system kromları kullanılmaz fakat uygulamanın arka planı görüntülenir.

Custom Chrome (transparent): Standart system kromları kullanılmaz ve uygulamanın arkaplanı şeffaf olarak görüntülenir.

Profiles sekmesinde bulunan seçenekler ile uygulamanın hangi platformlarda çalışacağını belirleyebilirsiniz.
Included Files sekmesini kullanarak uygulama içerisinde kullanılması gereken harici dosyalar var ise bu dosyaları ekleyebilirsiniz(İmaj dosyaları, ses-video dosyaları, xml dosyaları vb.). Bu sekmede default olarak uygulama için gerekli olan .swf dosyası ve uygulama ayarlarının bulunduğu UygulamaAdı-app.xml dosyası bulunmaktadır. Application & Installer Settings penceresinden yaptığımız ayarların bir çoğunu bu xml dosyasını kullanarakta yapabilirsiniz.

Signature sekmesi ile oluşturduğumuz uygulama için gerekli olan sertifika bilgilerini ekleyebilirsiniz.

Daha önceden oluşturulan bir sertifika varsa Browse butonuna tıklayarak bu sertifika kullanılabilir. Eğer sertifika yok ise Create butonuna tıklayarak yeni bir sertifika oluşturulabilirsiniz. Create butonuna tıkladıktan sonra açılan pencerede gerekli alanları doldurarak sertifika oluşturma işlemi tamamlanabilir.

Publisher Name bölümüne geliştiricinin ismini yazmamız gerekir.

Organization Unit ve Organization Name bölümlerine varsa kurum ile ilgili bilgiler, yoksa kişisel bilgileri girebilirsiniz.

Country bölümünden ülke seçimi yapılır.

Password bölümüne sertifika için kullanılacak şifreyi yazabilirsiniz.

Confirm password bölümüne belirlenen şifre tekrar girmeniz gerekir.

Type bölümünden şifreleme türü seçebilirsiniz.

Save As bölümü ile de sertifikanın kaydedileceği konum belirleyebilirsiniz.

Son olarakta Ok butonuna tıklayarak sertifikayı oluşturabilirsiniz. Sertifika başarılı bir şekilde oluşturulduğunda pencere kapanacaktır. Use code signing certificate seçeneğinin altında bulunan password bölümüne sertifika için oluşturduğunuz şifreyi girmeniz gerekmektedir. Eğer program açık kaldığı sürece şifrenin hatırlanmasını istiyorsanız “Remember password this session” seçeneğini işaretleyebilirsiniz.

“Prepare an AIR Intermediate (AIRI) file that will be signed later” seçeneğini işaretleyerek daha sonra imzalamak ve paketlemek için bir AIRI dosyası oluşturabilirsiniz.

Icons sekmesi ile uygulama için oluşturduğunuz ikonları pakete dahile edebilirsiniz. Oluşturacağınız ikonların .png uzantılı olması gerekmektedir. Boyut olarak ise 16×16, 32×32,48×48,128×128 piksel olmak üzere 4 farklı ikon boyutu vardır.

Son olarak Advanced sekmesi ile de uygulama ilgili daha detaylı ayarları yapabilirsiniz.

Associated file types bölümünden uygulamanın ilişkilendirileceği dosya türlerini belirleyebilirsiniz. Örneğin bir text editor geliştirdiniz ve kullanıcı bu uygulamayı bilgisayarına yüklediğinde default text editorü olarak uygulamanızın kullanılmasını istiyorsunuz. Bu bölümde bulunan + ikonuna tıklayarak uygulamanızla ilişkilendirecek dosya türlerini ve bu türler için belirlediğiniz ikonları ekleyebilirsiniz.

Inıtial window settings bölümünde,

Width, Height seçenekleri ile uygulamanın genişlik-yükseklik değerlerini,

X, Y bölümleri ile uygulama çalıştırıldığında bulunacağı x ve y konumlarını,

Maximum ve Minimum bölümleri ile uygulamanızın alabileceği maksimum ve minimum genişlik-yükseklik değerlerini belirleyebilirsiniz.

Bu seçeneklerin hemen altında bulunan Maximizable, Minimizable, Resizable ve Visible check box’ları sırası ile uygulamanın tam ekran olabilmesini, simge durumuna küçültülebilmesini, ölçeklendirilebilmesini ve gizlenmesini sağlar.

Install Folder ve Program Menu Folder seçenekleri ile uygulamanın yükleneceği dizinleri belirleyebilirsiniz. Unutulmaması gerekn nokta Program Menu Folder özelliği sadece Windows işletim sistemi için geçerlidir.

Son olarakta Use custom UI for updates seçeneği ile uygulamanın yeni bir versiyonunu yayınladığınızda güncelleme işlemi için kullanıcıya soru sorulup sorulmamasını belirleyebilirsiniz. Bu seçenek işaretli değilse kullanıcıya güncelleme işlemi ile ilgili soru sorulacaktır ve kullanıcı isterse güncellenmiş versiyonu yükleyecektir. Eğer seçenek işaretli ise kullanıcıya sorulmadan güncelleme işlemi gerçekleştirilecektir.(Güncelleme işlemlerinin yapılabilmesi için uygulama geliştirirken gerekli işlemleri yapmış olmanız gerekmektedir.)

Uygulama ile ilgili olarak Application & Installer Settings panelini kullanarak yapabileceğimiz işlemler bu kadar. Bu işlemleri yaptıktan sonra oluşan xml dosyası (benim yaptığım uygulama için) şu şekilde

version="1.0" encoding="UTF-8" standalone="no" ?>
xmlns="http://ns.adobe.com/air/application/2.5">

>com.actionscript.gen.tr.FirstApplication>

>1.0>

>FirstApplication>

/>

>FirstApplication>

/>

>
>FirstApplication.swf>
>standard>
>false>
>true>
>false>
>portrait>
>auto>
>true>
>true>
>true>
>

/>

>false>

>false>

>deneme>

>

UygulamaAdı-app.xml dosyasını kullanarakta uygulama için gerekli ayarlar yapılabilir. Nasıl yapılabileceğine ise bir sonraki yazıda değineceğim.

Örnek çalışma dosyasını indirebilmek için siteye üye olmanız gerekmektedir. Siteye üye olmak için tıklayın.

ADOBE AIR İle Uygulama Geliştirmek

Erol Demirer — Sun, 23 Jan 2011 22:48:27 +0000

Adobe AIR Nedir?

Adobe AIR (Adobe Integred Runtime) ile web için kullandığımız Markup dillerini (ActionScript, JavaScript, ASP, PHP, HTML, XML vb.) kullanarak masaüstü uygulamalar geliştirebiliriz. Normal şartlarda masaüstü uygulama geliştirebilmek için C# veya C++ dillerini öğrenmek gerekmektedir. Bu hem zaman alan hem de zor bir süreçtir. Adobe AIR ile kullandığımız yazılım dillerinden herhangi biri ile masaüstü uygulama gelişitirmemiz mümkün. Adobe Flash, Adobe Flash Builder ya da Adobe Dreamweaver programlarından herhangi birini kullanarak var olan yazılım bilgisi ile masaüstü uygulama geliştirilebilir.

Adobe AIR’in en büyük avantajı cross-platform çalışmasıdır. Yani geliştirilen uygulama hangi işletim sisteminde olursa olsun ekstra bir işlem yapılmasına gerek kalmadan sorunsuz bir şekilde çalışacaktır. AIR uygulamaları birer .zip dosyası gibi sıkıştırılıp, paketlenerek kullanılan dosyalar tek bir dosya içerisinde toplanır. Bu dosyanın uzantısı .air’dir. Bu dosya içerisine uygulama için ihtiyacımız olan tüm dosyaları ekleyebiliriz(XML, imaj dosyaları, ses ve video dosyaları vb.). Adobe AIR ile geliştirilen uygulamalar farklı işletim sistemlerinde çalıştırılsalar bile aynı davranış biçimini sergiler. Bu oluşturulan web sayfasının Internet Explorer üzerinde sorunsuz çalışırken diğer tarayıcılarda sorun çıkartması olarak düşünülebilir. Web üzerinde bu tip durumların önüne geçebilmek için Adobe Flash kullanılır. Adobe AIR ise aynı özelliğin masaüstüne taşınmasına olanak sağlar.

Adobe AIR ile uygulama geliştirirken verileri saklamak için veritabanı (SQLLite) kullanılabilir. Avantajı ise veritabanının çalışması için ekstra bir yazılıma ve herhangi bir sunucuya ihtiyaç duymamasıdır. Böylece kullanıcı arkaplanda bir veritabanının çalıştığını çoğu zaman farketmeyecektir. Veritabanı kullanıcı programı yüklediğinde ya da ilk işlem yaptığında oluşturulabilir.

Adobe AIR uygulamarının çalıştırılabilmesi için kullanıcının bilgisayarında Adobe AIR Runtime’ın yüklü olması gerekmektedir. Adobe AIR Runtime http://get.adobe.com/air/ adresinden indirilebilir. Desteklenen işletim sistemleri ise aşağıdadır.

Windows:
Windows XP Service Pack 2,
Windows XP Tablet PC,
Windows Vista® (Home Premium, Business, Ultimate ve Enterprise(64 bit)),
Windows 2003 Server,
Windows® 2000 (Service Pack 4),
Windows 7

Macintosh:
Mac OS X 10.4.9 veya daha yüksek bir işletim sistemi

Linux:Fedora Core 12,
Ubuntu 9.10,
openSUSE® 11.2

Adobe Flash CS3 sürümünü kullanıyorsanız AIR ile uygulama geliştirebilmek için programa eklenti yapmak zorundasınız. CS4 ve CS5 sürümleri için bu gerekmemekte. Yine de kullandığınız AIR versiyonu son sürüm değilse veya kullandığınız programlar AIR ile uygulama geliştirmek için gerekli araçlara sahip değilse aşağıdaki linklerden gerekli paketleri indirip kurabilirsiniz.

En son Adobe AIR SDK paketini indirmek için: http://www.adobe.com/products/air/sdk/

Uygulama paketleri için: http://www.adobe.com/products/air/tools/

Şu anda kullanılan güncel SDK 2.5 paketidir. Bu paket ile birlikte AIR altyapısını kullanarak Android cihazlar içinde uygulama geliştirilebilir. (Eğer kullandığınız AIR sürümü 1.5’ten küçük ise trace() metodu çalışmayacaktır. Böyle bir durumda tavsiyem AIR sürümünüzü güncellemenizdir. Eğer mecburen düşük bir sürümü kullanmak zorunda isenizde uygulamayı test ederken CTRL+ENTER yerine CTRL+Shift+ENTER kombinasyonunu kullanarak Flash Debugger’ı çalıştırmanızdır.

XML Kullanarak Dinamik Rotator Yapımı

Erol Demirer — Sun, 21 Nov 2010 10:49:25 +0000

Bu uygulamamızda XML tabanlı dinamik banner rotator yapacağız. Uygulamanın bitmiş hali yukarıda görmüş olduğunuz gibi. Uygulama için ilk olarak Rotator isminde bir klasör oluşturalım. Klasörü oluşturduktan sonra 625 x 325 piksel boyutlarında yeni bir belge açalım ve klasörün içerisine BannerRotator ismi ile kaydedelim. Belgenin arka plan rengi #333333 olsun. Rotatör isimli klasörün içerisine data ve images isimli iki klasör oluşturalım. XML dosyamızı data klasorunun içerisine, imajlarıda images klasörünün içerisine kaydedeceğiz. Klasör yapısının aşağıdaki gibi olması gerekmektedir.

İlk olarak XML dosyamızı oluşturup data.xml adı ile data klasörünün içerisine kaydedelim. XML belgesinin içeriği aşağıdaki gibidir.İmajların adres bilgileri için path, imajlara tıklandığında açılacak sayfaların adresleri içinde link niteliklerini(Attribute) kullanacağız. İmages klasörünün içerisine de kullanacağımız imajları kaydedelim. Kullanacağımız imajların boyutlarını da 575 x 275 piksel olarak ayarlayalım.

<images>

<image path="images/image1.jpg" link="http://actionscript.gen.tr"/>
<image path="images/image2.jpg" link="http://actionscript.gen.tr"/>
<image path="images/image3.jpg" link="http://actionscript.gen.tr" />
<image path="images/image4.jpg" link="http://actionscript.gen.tr"/>
<image path="images/image5.jpg" link="http://actionscript.gen.tr"/>
<image path="images/image6.jpg" link="http://actionscript.gen.tr"/>

images>

Şimdi Flash belgemize geri dönelim. Uygulama içerisinde kullacağımız butonları hazırlayalım. İmajlar arasında ileri geri hareket edebilmek için iki tane, toplam imaj sayısını gösterebilmek içinde 1 tane olmak üzere toplamda 3 butona ihtiyacımız olacak. Butonlar MovieClip sembolü olarak hazırlamamız gerekiyor. Ayrıca tüm butonların içlerinde birer tane dinamik text alanı olması gerekiyor. Dinamik text alanlarının isimleri aşağıdaki gibidir. MovieClipleri oluştururken ileri gitmek için kullanacağımız butonun ismini Next, geri gitmek için kullanacağımız butonun ismini Previous, sayıları göstermek için kulanacağımız butonun ismini de Selector olarak değiştirelim ve Convert to Symbol penceresindeki Advanced ikonuna tıklayalım ve açılan bölüme Export for ActionScript seçeneğini işaretleyelim. Bu seçeneği işaretledikten sonra Class sekmesinde yukarıda belirttiğim isimler yoksa düzeltelim ve Ok butonuna tıklayarak pencereyi kapatalım. Selector isimli MovieClip’in içerisindeki text alanının renginide #333333 olarak değiştirelim.

Yüklenen imaj sayısını kullanıcıya bildirmek içinde bir Preloader kullanacağız. Sahne boyutlarında bir dikdörtgen çizelim. Rengi #99999 ve Alpha değeri %50 olsun. Dikdörtgeni seçelim ve MovieClip olarak sembole dönüştürelim. Convert to Symbol panelinde ismini Preloader olarak değiştirelim ve pencereyi kapatalım. Instance Name kısmına preloader_mc yazalım. Sonrada çift tıklayarak sembolün içerisine girelim ve sembolün içerisine dinamik bir text alanı ekleyelim. Text alanının isminde load_txt olsun.

MovieClipleri hazırladığımıza göre kodları yazmaya başlayabiliriz. İlk olarak varsa sahne üzerinde bulunan sembolleri temizleyelim ve Actions panelini açalım. İlk olarak XML dosyasındaki verileri yüklemek için URLLoader nesnesi t tanımlayacağız.

var xmlLoader:URLLoader=new URLLoader();
xmlLoader.load(new URLRequest("data/data.xml"));

Sonrada uygulama içerisinde kullanacağımız değişkenleri tanımlayacağız. xmlData nesnesi XML dosyasındaki tüm datayı, xmlList nesnesi ise images tagları içerisindeki bilgiyi içerisinde tutacak. imageLoader nesnesini imajları yüklemek için kullanacağız. loaded değişkeni ile yüklenen imaj sayısını, howImage değişkeni ile hangi imajın görüntülendiğini, imageWidth değişkeni ile de imajların genişlik değeri bilgilerini saklayacağız.

var xmlData:XML;
var xmlList:XMLList;
var imageLoader:Loader;
var loaded:int = 0;
var howImage:int;
var imageWidth:int;

Şimdi de uygulama içerisinde kullanacağımız MovieClipleri tanımlıyoruz. maskMC ile imajları maskeleme işlemini gerçekleştireceğiz. holderMC ve imageHolderMC MovieClipler’i sadece imajları taşıma işlemi yapacak. Son olarakta oluşturduğumuz MovieClip’leri uygulama içerisine dahil ediyoruz.

var maskMC:MovieClip=new MovieClip();
maskMC.graphics.beginFill(0x000000);
maskMC.graphics.drawRect(25,25,575,275);
maskMC.graphics.endFill();
addChild(maskMC);
var holderMC:MovieClip;
var imageHolderMC:MovieClip;
var selectorMC:MovieClip;

var nextButton:Next;
var prevButton:Previous;
var selector:Selector;

Üç tane dizi tanımlaması yapıyoruz. imagePosition dizisine imajların x konumlarını, images dizisine imajları taşıyacak MovieClipleri, selectors dizisine ise imaj sayısına göre oluşturulacak butonları ekleyeceğiz.

var imagePosition:Array=new Array();
var images:Array=new Array();
var selectors:Array=new Array();

Geçişlerin belirlediğimiz süre bitiminde otomatik olarak yapılması için bir Timer nesnesi tanımlıyoruz ve süreyi 5 saniye olrak ayarlayoruz.

var transitionsTimer:Timer = new Timer(1000 * 5);

Kullanacağımız nesne ve değişkenleri tanımladıktan sonra xmlLoader nesnesine bir olay dinleyici ekleyerek yükleme işleminin bitişini kontrol edeceğiz. Fonksiyon içerisinde de kullanacağımız değişken ve nesnelere değer atamalarını yapacağız. holderMC isimli MovieClip tüm imajları içerisinde taşıyacak. maskMC ile de maskeleme işlemini gerçekleştireceğiz. imageLoader nesnesine olay dinleyici ekleyerek yükleme işlemi bittiğinde bir sonraki imajın yüklenmesini sağlayacağız. Preloader_mc içerisindeki text alanına da toplam imaj sayısını ve bu imajların kaç tanesinin yüklendiğini yazdıracağız

xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

function xmlLoaded(e:Event)
{
xmlData = new XML(e.target.data);
xmlList = new XMLList(xmlData.children());

imageLoader=new Loader();
holderMC=new MovieClip();
imageHolderMC=new MovieClip();
addChild(holderMC);
holderMC.x = 25;
holderMC.y = 25;
maskMC.cacheAsBitmap = true;
holderMC.cacheAsBitmap = true;
holderMC.mask = maskMC;

imageHolderMC.buttonMode = true;
imageLoader.load(new URLRequest(xmlList[loaded].@path));
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
preloader_mc.load_txt.text = String(loaded + 1) + " / " + xmlList.length() + " IMAGES LOADING";
}

imageLoaded fonksiyonunu tanımlıyoruz. Fonksiyon içerisinde yüklenen imajları imageHolderMC isimli MovieClip içerisine, imageHolderMC MovieClip’lerinide holderMC isimli MovieClip içerisine ekleyeceğiz. imageHolderMC MovieClip’lerini images isimli diziye ekledikten sonra loaded değişkenin değerini bu nesnelere isim olarak atayacağız. imageWidth değişkenine değer olarak yüklenen imajların genişliklerini atayacağız. imagePositions isimli dizi içerisinde de yüklenen her imajın x konumunu ekleyeceğiz. Slayt sola doğru hareket edeceği içinde -1 ile çarpıp negatif değere çevireceğiz.

İf.. else if koşullu ifadesi ile de yüklenen imajların sayısını kontrol edeceğiz. Eğer XML içerisindeki element sayısından küçükse loaded değişkeninin değerini artıracağız. Yeni bir imageLoader nesnesi tanımlayacağız ve yükleme işleminin bitişini kontrol etmek için bir olay dinleyici ekleyeceğiz. Eğer loaded değişkeninin değeri(yani yüklenen imaj sayısı) eleman sayısına eşitse buton olarak kullanacağımmız MovieClip’leri sahneye ekleyip geçişleri sağlayabilmek için olay dinleyicileri ekleyeceğiz. Selector isimli MovieClip’leri sahneye eklemek ve imajlara link verebilmek içinse bir döngü oluşturacağız. Oluşturduğumuz MovieClipleri selectorMC içerisinde ekleyip, butonlara tıklandığında ilgili imaja geçilebilmesini sağlamak için olay dinleyici ekleyeceğiz. Oluşturulan MovieClip’lerin isimlerini de döngünün içerisindeki i değişkeninden alacağız. İmages dizisi içerisindeki eleman sayısıda aynı olacağı için döngü içerisinde images dizisinin elemanlarına birer olay dinleyici ekleyerek sayfaların linklerini vereceğiz. Son olarakta preloader_mc isimli MovieClip’i sahneden kaldırıp Timer nesnesini çalıştıracağız.

Geçişileri sağlayabilmek için transitions() isminde bir fonksiyon oluşturacağız. Fonksiyon içerisinde ilk olarak Timer nesnesini resetleyip tekrar başlatacağız. Böylece süre dolmadan nextImaga, prevImage ya da selector butonlarından birine tıklandığında süreyi baştan başlatacağız. Sonrasında howImage degişkeninin değerini kontrol edeceğiz. Fonksiyon çalıştığında eğer xmlList nesnesinin eleman sayısına eşitse değerini sıfıra, eğer howImage değişkeninin değeri sıfırdan küçükse xmlList nesnesinin eleman sayısına eşitleyeceğiz. Böylece ilk veya son imaj görüntülenirken takılma olmayacak. Sonrasında da for döngüsü ile selector butonlarının içerisinde bulunan text alanının yazı rengini #999999 olarak değiştireceğiz. Döngünün çalışması bittikten sonra da howImage değişkeninin değerine göre hangi imaj görüntüleniyorsa selectors dizisinin ilgili elemanın içerisindeki text alanının yazı rengini #000000 olarak değiştireceğiz. Fonksiyon içerisinde son olarakta bir tween oluşturarak geçişlerin yapılmasını sağlayacağız. Tween animasyonunun başlangıç noktası holderMC isimli MovieClip’in x konumu, bitiş noktası ise imagePositions dizisinin içerisinde ilgili index numarasına sahip elemanın değeri olacak. Tween nesnesini oluşturmadan önce ilgili sınıfların import edilmesi gerekmektedir.

import fl.transitions.Tween;
import fl.transitions.easing.*;

Fonksiyonun aşağıdaki gibi olması gerekmektedir.

Son bölümde de Timer nesnesine bir olay dinleyici ekleyeceğiz ve daha öncesinde butonlara eklemiş olduğumuz olay dinleyicilerin fonksiyonlarını tanımlayacağız. nextImage butonuna tıklandığında veya Timer nesnesi çalıştığında howImage değişkenin değerini artırıp, prevImage butonuna tıklandığında azaltacağız. Selector butonlarından birine tıklandığında ise howImage değişkeninin değerini tıklanan butonun ismine göre değiştireceğiz. Tüm fonksiyonlarda değişkenin değerini değiştirdikrten sonra transitions() fonksiyonunu çağırarak geçişin yapılmasını sağlayacağız. transitions() fonksiyonun en altta kalacak şekilde aşağıdaki kod bloklarını yazalım.

transitionsTimer.addEventListener(TimerEvent.TIMER, startTransitions);

function startTransitions(e:TimerEvent)
{
howImage++;
transitions();
}

function nextImage(e:MouseEvent)
{
howImage++;
transitions();
}

function prevImage(e:MouseEvent)
{
howImage--;
transitions();
}

function selectImage(e:MouseEvent)
{
howImage = e.target.name;
transitions();
}

Son olarakta gotoURL fonksiyonunu tanımlayacağız. Hangi sayfanın açılacağını tıklanan imajın ismine göre xmlList nesnesinin ilgili elemanının içerisinde bulunan link niteliğini(attribute) kullanarak belirleyeceğiz. Eğer sayfanın aynı pencerede açılmasını istiyorsak “_blank” ifadesini “_self” olarak değştirebiliriz.

function gotoURL(e:MouseEvent)
{
navigateToURL(new URLRequest(xmlList[e.currentTarget.name].@link),"_blank");
}

Evet böylece rotatoru tamamlamış olduk. Kodların bitmiş halinin aşağıdaki gibi olması gerekmekdedir.

import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
import flash.display.Loader;
import flash.display.MovieClip;
import flash.utils.Timer;
import flash.events.TimerEvent;
import fl.transitions.Tween;
import fl.transitions.easing.*;
import flash.events.MouseEvent;
import flash.ui.Mouse;

var xmlLoader:URLLoader=new URLLoader();
xmlLoader.load(new URLRequest("data/data.xml"));

var xmlData:XML;
var xmlList:XMLList;
var imageLoader:Loader;
var loaded:int = 0;
var howImage:int;
var imageWidth:int;

var maskMC:MovieClip=new MovieClip();
maskMC.graphics.beginFill(0x000000);
maskMC.graphics.drawRect(25,25,575,275);
maskMC.graphics.endFill();
addChild(maskMC);
var holderMC:MovieClip;
var imageHolderMC:MovieClip;
var selectorMC:MovieClip;

var nextButton:Next;
var prevButton:Previous;
var selector:Selector;

var imagePosition:Array=new Array();
var selectors:Array=new Array();
var images:Array=new Array();

var transitionsTimer:Timer = new Timer(1000 * 5);

xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

function xmlLoaded(e:Event)
{
xmlData = new XML(e.target.data);
xmlList = new XMLList(xmlData.children());

imageLoader=new Loader();
holderMC=new MovieClip();
imageHolderMC=new MovieClip();
addChild(holderMC);
holderMC.x = 25;
holderMC.y = 25;
maskMC.cacheAsBitmap = true;
holderMC.cacheAsBitmap = true;
holderMC.mask = maskMC;

imageHolderMC.buttonMode = true;
imageLoader.load(new URLRequest(xmlList[loaded].@path));
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
preloader_mc.load_txt.text = String(loaded + 1) + " / " + xmlList.length() + " IMAGES LOADING";
}

function imageLoaded(e:Event)
{
imageHolderMC=new MovieClip();
holderMC.addChild(imageHolderMC);
imageHolderMC.addChild(imageLoader);
imageHolderMC.x = loaded * imageLoader.content.width;
imageHolderMC.buttonMode = true;
images.push(imageHolderMC);
imageHolderMC.name=String(loaded);
imageWidth = imageLoader.content.width;
imagePosition.push(((imageWidth*loaded)*-1)+25);
preloader_mc.load_txt.text = String(loaded + 1) + " / " + xmlList.length() + " IMAGES LOADING";
setChildIndex(MovieClip(preloader_mc), numChildren-1);

if (loaded + 1 < xmlList.length())
{
loaded++;
imageLoader=new Loader();
imageLoader.load(new URLRequest(xmlList[loaded].@path));
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
}
else if (loaded + 1 >= xmlList.length())
{
nextButton=new Next();
prevButton=new Previous();
addChild(nextButton);
addChild(prevButton);
nextButton.x = stage.stageWidth - 25;
nextButton.y = stage.stageHeight / 2;

prevButton.x = 25;
prevButton.y = stage.stageHeight / 2;
nextButton.buttonMode = true;
prevButton.buttonMode = true;
nextButton.mouseChildren = false;
prevButton.mouseChildren = false;

nextButton.addEventListener(MouseEvent.CLICK, nextImage);
prevButton.addEventListener(MouseEvent.CLICK, prevImage);

selectorMC=new MovieClip();

for (var i:int=0; i<xmlList.length(); i++)
{
selector=new Selector();
selectorMC.addChild(selector);
selector.selector_txt.text = String(i + 1);
selector.name = String(i);
selector.x = 25 * i;
selector.buttonMode = true;
selector.mouseChildren = false;
selectors.push(selector);
selector.addEventListener(MouseEvent.CLICK, selectImage);
images[i].addEventListener(MouseEvent.CLICK, gotoURL);
}

addChild(selectorMC);
selectorMC.x = stage.stageWidth / 2 - selectorMC.width / 2;
selectorMC.y = 305;
selectors[howImage].selector_txt.textColor = 0x000000;
removeChild(preloader_mc);
transitionsTimer.start();
}
}

transitionsTimer.addEventListener(TimerEvent.TIMER, startTransitions);

function startTransitions(e:TimerEvent)
{
howImage++;
transitions();
}

function nextImage(e:MouseEvent)
{
howImage++;
transitions();
}

function prevImage(e:MouseEvent)
{
howImage--;
transitions();
}

function selectImage(e:MouseEvent)
{
howImage = e.target.name;
transitions();
}

function gotoURL(e:MouseEvent)
{
navigateToURL(new URLRequest(xmlList[e.currentTarget.name].@link),"_blank");
}

function transitions()
{
transitionsTimer.reset();
transitionsTimer.start();

if (howImage >= xmlList.length())
{
howImage = 0;
}
else if (howImage<0)
{
howImage = xmlList.length() - 1;
}

for (var j:int=0; j<xmlList.length(); j++)
{
selectors[j].selector_txt.textColor = 0x999999;
}

selectors[howImage].selector_txt.textColor = 0x000000;

new Tween(holderMC,"x",Regular.easeOut,holderMC.x,imagePosition[howImage],1,true);
}

Örnek çalışma dosyasını indirebilmek için siteye üye olmanız gerekmektedir. Siteye üye olmak için tıklayın.

ContextMenü Ögelerini Değiştirmek

Erol Demirer — Mon, 16 Aug 2010 09:40:37 +0000

Bu örneğimizde geliştirdiğimiz uygulamalarda farenin sağ tuşuna tıklandığında açılan menüyü özelleştireceğiz. Bu işlem için ContextMenu sınıfını kullanacağız. Eğer bu menüyü özelleştirmediysek default hali aşağıdaki gibidir. Menüyü default hali ile kullandığımızda bazen uygulamalarımızda küçük sorunlar oluşabilir. Örneğin,uygulamada birden fazla frame var ve kullanıcının bir sonraki frame’e doğru işlemi yapmadan geçmesini istemiyoruz. Uygulamamızı buna göre hazırladık. Fakat ContextMenu’yu değiştirmezsek kullanıcı burada bulunan İleri seçeneğine tıklayarak bir sonraki frame’e geçiş yapabilir.

Şimdi bu menüyü özelleştirmeye başlayalım. Yukarıda da bahsetmiş olduğum gibi bu işlem için ContextMenu sınıfını kullanacağız. Bu da demek oluyor ki ilk olarak bu sınıfa ait bir nesne tanımlamamız gerekiyor.

var menum:ContextMenu = new ContextMenu();

Nesnemizi tanımladıktan sonra menü öğelerini gizleyelim ve contextMenu nesnesine değer olarak atayalım.

menum.hideBuiltInItems();
contextMenu = menum;

Menüde bulunan seçenekleri gizledik. Şimdi de kendimize özel bir menü oluştutalım. Oluşturacağımız menü ögeleri için ContextMenuItem sınıfını kullanacağız.

var siteAdresim = new ContextMenuItem("Türkiye’nin ActionScript Portalı");
var copyRight = new ContextMenuItem("© 2010");

Bu menüde copyRight isimli menüsü ile işlem yapılmasını engelleyelim ve diğer menü ögelerinden ayıralım. Bunu yapabilmek için de menü ögesinin separatorBefore özelliğinin değerini true olarak değiştireceğiz.

Oluşturduğumuz menü ögelerini ekleyelim.

menum.customItems.push(siteAdresim, copyRight);

Uygulamamızı çalıştırıp farenin sağ tuşuna tıkladığımızda menünün görünümü yandaki gibi olacaktır. Şimdi de menü ögelerine olay dinleyicileri nasıl ekleyebileceğimize bakalım. Kullanağımız olay sınıfı ContextMenuEvent olacak. Bu olay sınıfı içerisinde MENU_SELECT ve MENU_ITEM_SELECT olmak üzere iki nesne bulunmaktadır. Bu uygulamada MENU_ITEM_SELECT nesnesini kullanacağız.

siteAdresim isimli menü ögesi seçildiğinde belirlemiş olduğumuz bir sayfanın tarayıcıda açılmasını sağlayalım. siteAdresim isimli menü ögesine olay dinleyicimizi ekleyelim ve fonksiyonumuzu oluşturalım.

siteAdresim.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, siteyeGit);

function siteyeGit(e:ContextMenuEvent){
navigateToURL(new URLRequest("http://actionscript.gen.tr"), "_blank");
}

Kodların tamamı aşağıdaki gibidir.

var menum:ContextMenu = new ContextMenu();
menum.hideBuiltInItems();
contextMenu = menum;

var siteAdresim = new ContextMenuItem("Türkiye'nin ActionScript Portalı");

var copyRight = new ContextMenuItem("© 2010");

copyRight.enabled=false;

copyRight.separatorBefore=true;

menum.customItems.push(siteAdresim, copyRight);

siteAdresim.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, siteyeGit);

function siteyeGit(e:ContextMenuEvent){
navigateToURL(new URLRequest("http://actionscript.gen.tr"), "_blank");
}

Eğer default menü ögelerinin tamamını gizlemek yerine bazılarını gizlemek isterseniz, aşağıdaki yöntemi kullanabilirsiniz. Yapmanız gereken görünmesini istediğiniz özelliklerin değerlerini true olarak değiştirmeniz.

var menum:ContextMenu = new ContextMenu();
menum.builtInItems.forwardAndBack = false;
menum.builtInItems.loop = false;
menum.builtInItems.play = false;
menum.builtInItems.print = false;
menum.builtInItems.quality = false;
menum.builtInItems.rewind = false;
menum.builtInItems.save = false;
menum.builtInItems.zoom = false;
contextMenu = menum;

Örnek çalışma dosyasını indirebilmek için siteye üye olmanız gerekmektedir. Siteye üye olmak için tıklayın.

RadioButton Bileşeninin Kullanımı

Erol Demirer — Sun, 18 Jul 2010 16:46:17 +0000

Bu örneğimizde RadioButton bileşeninin kullanımını anlatacağım. Örnekte sahne üzerinde bulunan bir MovieClip nesnesinin rengini RadioButton’lar sayesinde değiştireceğiz.

Yeni bir ActionScript 3.0 belgesi açarak uygulamamıza başlayalım. Sahne boyutunu 625 x 300 piksel olarak değiştirelim ve Window menüsünün altında bulunan Components sekmesine tıklayalım ya da Ctrl+F7 kısayol tuşlarını kullanarak Components panelini açalım. Components panelinde User Interface sekmesinin altınna bulunan RadioButton seçeneğine çift tıklayalım. Bu sayede RadioButton bileşenini sahneye eklemiş olduk. Sahne üzerinde bulunan RadioButton bileşenini seçelim ve silelim. Bileşeni sahne üzerine ekleme işlemini ActionScript 3.0 ile gerçekleştireceğiz.

Şimdi de sahne üzerine bir 400×250 piksel boyutunda bir dikdörtgen çizelim. Dikdörtgenin x konumunu 200 piksel, y konumunu ise 25 piksel olarak değiştirelim ve MovieClip olarak sembole dönüştürelim. Sembolü seçerek Instance Name kısmına dikdortgen_mc yazalım.

Timeline’da yeni bir layer ekleyelim ve layer ismini Actions olarak değiştirelim. F9 kısayol tuşu ile Actions panelini açalım ve kodları yazmaya başlayalım. İlk olarak gerekli sınıfları import ediyoruz.

import fl.controls.RadioButton;
import fl.controls.RadioButtonGroup;

Gerekli sınıfları import ettikten sonra kullanacağımız RadioButton nesnelerini tanımlayalım. RadioButton nesnelerini tanımladıktan sonra ise RadioButtonGroup nesnesi tanımlayacağız. Böylece grup içerisinde bulunan bir RadioButton seçildiğinde, aynı grupta bulunan başka bir RadioButton nesnesinin seçilmesini engellemiş olacağız.

var kirmiziRB:RadioButton =new RadioButton();
var maviRB:RadioButton =new RadioButton();
var yesilRB:RadioButton =new RadioButton();
var rbGrup:RadioButtonGroup=new RadioButtonGroup("renkler");

Oluşturduğumuz MovieClip’in rengini değiştirebilmek için bir ColorTransForm nesnesi tanımlayalım ve RadioButton’ların özelliklerini belirleyelim. RadioButton bileşeni için iki temel özellik kullanacağız. Birisi label yani etiket özelliği. Bu özellik ile seçeneklerimizi RadioButton’ların yanına yazacağız. Diğer özellik ise value özelliği. Bu özellik, yapılan seçime göre arka planda ne yapılması gerektiği ile ilgili bilgileri saklıyor diyebiliriz. Örnek üzerinden gidecek olursak, yapılan seçime göre MovieClip’in alacağı renk bilgilerini value özelliğine ekleyeceğiz.

var renkDegistir:ColorTransform=new ColorTransform();

kirmiziRB.label="Kırmızı";
kirmiziRB.value=0xFF0000;

maviRB.label="Mavi";
maviRB.value=0x0000FF;

yesilRB.label="Yeşil";
yesilRB.value=0x00FF00;

Şimdi de RadioButton’ları sahneye ekleyelim. Oluşturduğumuz gruba dahil edelim ve konumlarını belirleyelim. X ve y konumlarını belirlerken move metodunu kullanacağız. Bu metoda göndereceğimiz ilk parametre x konumu, ikinci parametre ise y konumu olacaktır.

addChild(kirmiziRB);
addChild(maviRB);
addChild(yesilRB);

kirmiziRB.group=maviRB.group=yesilRB.group=rbGrup;

kirmiziRB.move(25,25);
maviRB.move(25,50);
yesilRB.move(25,75);

Son olarak rbGrup nesnesine olay dinleyicimizi ekleyelim ve yapılan seçime göre dikdortgen_mc isimli nesnenin rengini değiştirelim. Fonksiyon içerisinde renkDegistir nesnesinin color özelliğine değer olarak seçilen RadioButton’un value değerini atıyoruz.

rbGrup.addEventListener(Event.CHANGE, renkKontrol);

function renkKontrol(e:Event) {
renkDegistir.color=e.target.selection.value;
dikdortgen_mc.transform.colorTransform=renkDegistir;
}

Kodların tamamı aşağıdaki gibidir.

import fl.controls.RadioButton;
import fl.controls.RadioButtonGroup;

var kirmiziRB:RadioButton =new RadioButton();
var maviRB:RadioButton =new RadioButton();
var yesilRB:RadioButton =new RadioButton();

var rbGrup:RadioButtonGroup=new RadioButtonGroup("renkler");

var renkDegistir:ColorTransform=new ColorTransform();

kirmiziRB.label="Kırmızı";
kirmiziRB.value=0xFF0000;

maviRB.label="Mavi";
maviRB.value=0x0000FF;

yesilRB.label="Yeşil";
yesilRB.value=0x00FF00;

addChild(kirmiziRB);
addChild(maviRB);
addChild(yesilRB);

kirmiziRB.group=maviRB.group=yesilRB.group=rbGrup;

kirmiziRB.move(25,25);
maviRB.move(25,50);
yesilRB.move(25,75);

rbGrup.addEventListener(Event.CHANGE, renkKontrol);

function renkKontrol(e:Event) {
renkDegistir.color=e.target.selection.value;
dikdortgen_mc.transform.colorTransform=renkDegistir;
}

Örnek çalışma dosyasını indirebilmek için siteye üye olmanız gerekmektedir. Siteye üye olmak için tıklayın.

Combobox Bileşeninin Kullanımı

Erol Demirer — Mon, 05 Jul 2010 22:31:12 +0000

Combobox bileşeninin kullanımı ile ilgili bilgileri videoda ve yazının devamında bulabilirsiniz.

Click here to view the embedded video.

Videoda anlatılanların dışında Combobox bileşeni açıldığında görüntülenecek seçenek sayısını belirlemek için;

cb.rowCount=5;

uygulama çalıştırıldığında belirlediğimiz herhangi bir seçebeğin seçili olması için;

cb.selectedIndex=2;

Çoklu dizilere eleman eklemek için,

imajlar.push({label:"Etiket", data:”bilgi”});

kod satırlarınız kullanabilirsiniz.

Örnek çalışma dosyasını indirebilmek için siteye üye olmanız gerekmektedir. Siteye üye olmak için tıklayın.

ActionScript 3.0 ve JavaScript Kullanarak Pop-Up Pencere Açmak

Erol Demirer — Sun, 20 Jun 2010 11:38:34 +0000

Bu uygulamamızda ActionScript 3.0 ve JavaScript kullanarak Pop-Up pencere yapacağız. Normal şartlar altında Pop-Up pencereye gerek kalmadan Flash içerisinde oluşturacağımız MovieClip’ler ile istediğimiz bilgilerin ya da imajların flash içerisinde yeni bir pencerede görüntülenmesini sağlayabiliriz. Fakat bu bilgileri farklı sitelerden almak istiyorsak ve içerikleri HTML ise bunu flash içerisinden yapmak biraz zorlaşabilir. Bu tip durumlarda Pop-Up pencereler kullanarak içeriği görüntülemek daha basit olacaktır.

Yeni bir ActionScript 3.0 belgesi açalım ve sahneye bir buton yerleştirelim. Butonun Instance Name kısmına popup_btn yazalım. Actions isminde yeni bir layer oluşturalım ve Actions panelini açarak kodlarımızı yazmaya başlayalım.

İlk olarak butonumuza olay dinleyicimizi ekleyip, fonksiyonumuzu oluşturalım.

popup_btn.addEventListener(MouseEvent.CLICK, pencereAc);

function pencereAc(e:MouseEvent) {

}

Fonksiyon içerisine Pop-Up pencerenin açılması için gerekli olan kodları yerleştirelim. İlk olarak açılmasını istediğimiz sayfanın adres bilgilerini içerisinde barındıracak olan yeni bir URLRequest nesnesi tanımlayalım. Normal link verme işlemlerinden farkı ise adresi yazmak (örn.:http://www.actionscript.gen.tr) yerine değer olarak JavaScript kodlarını yerleştirmek olacaktır.

var popup:URLRequest = new URLRequest("javascript:NewWindow=window.open('http://actionscript.gen.tr/popup.html','newWin','location=0,toolbar=0,scrollbars=0,statusbar=0,menubar=0,resizable=0,width=400,height=250,left = 200,top = 100'); NewWindow.focus(); void(0);");

javascript:NewWindow=window.open komutu ile tarayıcıda yeni bir pencere açılmasını sağlayacaktır. Parantez içerisinde ilk önce açılmasını istediğimiz sayfanın adresini yazıyoruz. newWin komutu ile sayfanın yeni bir pencerede açılmasını sağlıyoruz. Sonrasında açılacak olan pencerenin özelliklerini belirliyoruz, örneğin location özelliğinin değerini 0 olarak belirlediysek tarayıcıda adres satırı görüntülenmeyecektir. Eğer değeri 1 olarak değiştirirsek açılan pencerede adres satırı görüntülenecektir. Diğer özellikler içinde aynı şey geçerlidir. Width, height özelliklerine verdiğimiz değerler ile açılacak pencerenin boyutlarını belirleyebiliriz. Top ve left kısmına gireceğimiz değerler ile açılan pencerenin konumunu belirleyebiliriz.

Son olarakta navigateToURL yöntemi ile penceremizin açılmasını sağlıyoruz.

navigateToURL(popup, "_self");

Kodların tamamı aşağıdaki gibidir.

popup_btn.addEventListener(MouseEvent.CLICK, pencereAc);

function pencereAc(e:MouseEvent) {

var popup:URLRequest = new URLRequest("javascript:NewWindow=window.open('http://actionscript.gen.tr/popup.html','newWin','location=0,toolbar=0,scrollbars=0,statusbar=0,menubar=0,resizable=0,width=400,height=250,left = 200,top = 100'); NewWindow.focus(); void(0);");

navigateToURL(popup, "_self");

}

Uygulamayı test etmek için bir sunucuya yükleyeniz gerekmektedir. Aksi takdirde çalışmayacaktır.
Örnek çalışma dosyasını indirebilmek için siteye üye olmanız gerekmektedir. Siteye üye olmak için tıklayın.

ActionScript 3.0 ve PHP İle İletişim Formu Oluşturmak

Erol Demirer — Sun, 13 Jun 2010 00:35:28 +0000

Bu uygulamamızda ActionScript 3.0 ve php ile iletişim formu yapacağız. Bu formların amacı kullanıcı ve site sahibi arasında yazılı olarak iletişimin gerçekleşmesini sağlamaktır. Fakat bu iletişimin gerçekleşebilmesi için kullanıcıdan bir takım bilgilerin alınması gerekmektedir (Örn. : Ad, Soyad, mail adresi, mesaj vb.).

İlk olarak kullanıcıdan gerekli bilgileri alabilmek için Flash ve ActionScript 3.0 kısmını halledelim. Yeni bir doküman açalım ve dökümanı belirlediğimiz herhangi bir klasörün içerisine MailYolla ismi ile kayedelim. Sahneye 4 adet Input Text , 1 adet Dynamic Text ve 2 adet buton yerleştirelim. Butonlar için Components panelinde bulunan butonları kullanabilirsiniz. Nesnelerin Instance Name’leri ve yerleşimi için alttaki imajı inceleyebilirsiniz.

Şimdi de yeni bir layer oluşturalım ve ismini Actions olarak değiştirelim. Actions panelini açalım ve kodları yazmaya başlayalım.

Her ihtimale karşılık metin kutularının içerisini boşaltalım ve tab tuşuna basıldığında yağılacak geçişlerin sırasını belirleyelim.

isim_txt.text="";
mail_txt.text="";
konu_txt.text="";
mesaj_txt.text="";
uyari_txt.text="";

isim_txt.tabIndex=1;
mail_txt.tabIndex=2;
konu_txt.tabIndex=3;
mesaj_txt.tabIndex=4;

Kullandığımız butonların Label’larını değiştirelim.

temizle_btn.label="Temizle";
gonder_btn.label="Gönder";

Uygulama açıldığında fare imlecinin isim_txt adındaki metin kutusunda olmasını sağlayalım. Bunun için stage.focus özelliğini kullanacağız.

stage.focus=isim_txt;

Input Text alanlarına girilecek olan karakter sayılarını sınırlandıralım. Karakter sayılarını sınırlandırabilmek için maxChars özelliğini kullanacağız.

isim_txt.maxChars= 30;
mail_txt.maxChars=40;
konu_txt.maxChars=100;
mesaj_txt.maxChars=500;

Şimdi de temiz_btn isimli butona olay dinleyici ekleyelim ve butona tıklandığında bütün text alanlarının içlerinin boşaltılmasını sağlayalım.

temizle_btn.addEventListener(MouseEvent.CLICK, formuTemizle);

function formuTemizle(e:MouseEvent) {
isim_txt.text="";
mail_txt.text="";
konu_txt.text="";
mesaj_txt.text="";
uyari_txt.text="";
stage.focus=isim_txt;
}

Geriye gonder_btn isimli butona tıklandığında kullanıcıdan aldığımız verileri php dosyasına göndermek kaldı. Fakat butona tıklandığında ilk olarak verileri göndermeyeceğiz. Mesajın gönderilebilmesi için istenilen tüm bilgilerin eksiksiz olarak girilmesi gerekmektedir. Eğer tüm bilgiler eksiksiz olarak girildi ise mail adresinin hatalı olup olmadığını kontrol edeceğiz. Bilgiler eksiksiz ve mail adresi de doğru ise bilgileri php dosyasına göndereceğiz. Bu kontrollerin hepsini if..else if koşullu ifadesini kullarak yapacağız.

Mail adresinin hatalı olup olmadığını nasıl kontrol edeceğiz? Sorusunu duyar gibi oldum Bu kontrolü basit bir şekilde yapabiliriz. Her mail adresinde olması gerekn bir takım karakterler mevcuttur. Bu karakterler @ ve alan adı ve uzantısını ayırmak için kullanılan . ‘dır. Biz de kullanıcının girdiği mail adresinde bu karakterlerin olup olmadığını indexOf metodunu kontrol edeceğiz. Eğer aradığımız karakter var ise geriye dönecek değer 0, yok ise -1 olacaktır. Yani kullanıcının girdiği mail adresinde @ veya . karakteri yok ise arama sonucunda geriye -1 değeri dönecektir.

Kontroller sonucu her şey istediğimiz gibi ise verileri php dosyasına göndereceğiz. İlk olarak bir URLVariables nesnesi tanımlayacağız. PHP dosyasına göndereceğimiz verileri bu nesneye birer özellik olarak ekleyecek ve kullanıcıdan aldığımız bilgileri özelliklere değer olarak atayacağız. Sonrasında ise bir URLRequest nesnesi tanımlayarak kullanacağımız php dosyasının yolunu belirteceğiz ve bu nesnenin data özelliğine tanımlamış olduğumuz URLVariables değişkenini değer olarak atayacağız. Son olarak veriyi göndermek ve gönderme işleminin sonucunu almak için bir URLLoader nesnesi tanımlayacağız. Sonucun dönme süresini hesaplama imkanımız olmadığı için URLLoader nesnesine bir olay dinleyicisi ekleyerek işlemin bitip bitmediğini kontrol edeceğiz.

Gonder_btn isimli nesnemize olay dinleyicimizi ekleyelim ve gerekli kontrolleri yapalım.

gonder_btn.addEventListener(MouseEvent.CLICK, mesajiGonder);

function mesajiGonder(e:MouseEvent) {
if (isim_txt.text==""||mail_txt.text==""||konu_txt.text==""||mesaj_txt.text=="") {
uyari_txt.text="Lütfen tüm alanları eksiksiz doldurun.";
} else if (mail_txt.text.indexOf("@")==-1||mail_txt.text.indexOf(".")==-1) {
uyari_txt.text="Mail adresi hatalı. Lütfen kontrol edin.";
} else {
var adres:URLRequest=new URLRequest("php/gonder.php");
var formBilgileri:URLVariables=new URLVariables();
var phpLoader:URLLoader=new URLLoader();

adres.method=URLRequestMethod.POST;

formBilgileri.isim=isim_txt.text;

formBilgileri.mail=mail_txt.text;

formBilgileri.konu=konu_txt.text;

formBilgileri.mesaj=mesaj_txt.text;

adres.data=formBilgileri;

uyari_txt.text="Mesajınız gönderiliyor.";

phpLoader.load(adres);

phpLoader.addEventListener(Event.COMPLETE, mesajGonderildi);

}
}

mesajGonderildi fonksiyonunu oluşturalım. Bu fonksiyon ile php dosyasından geri dönen veriyi alacağız. Geriye dönen veriye göre mail gönderme işleminin sonucunu kullanıcıya bildireceğiz.

function mesajGonderildi(e:Event) {
if (e.target.data=="mesajGonderildi") {
uyari_txt.text="Mesajınız Gönderildi";
} else {
uyari_txt.text="Gönderme sırasında bir hata oluştu. Lütfen tekrar deneyin.";
}
}

Flash ve ActionScript 3.0 tarafını hallettik. Şimdi de php tarafını halledelim. Php konusunda çok fazla bilgim olmadığı için açıklamalarda çok derine inemeyeceğim. İlk olarak mailin gönderileceği adresi belirlemek için $to adında bir değişken oluşturuyoruz. Değer olarak ise mail adresimizi atyırouz. Sonrasında ActionScript 3.0 ile gönderdiğimiz verileri php içerisinde oluşturulan değişkenlere değer olarak atıyoruz. En son ise mail metodu ile işlemin sonucunu belirleyip echo komutu ile çıktı alıyoruz. ActionScript tarafında mesajGonderildi isimli fonksyionda kontrol ettiğimiz veri buradaki echo komutu ile çıktı alınan veridir.

$to = "Mail adresinizi buraya yazın.";

$subject = $_POST["konu"];

$headers = "From: " . $_POST["isim"] . "\r\n";

$headers .= "<".$_POST["mail"].">";

$headers .= "Reply-To: " . $_POST["mail"] . "\r\n";

$message = $_POST["mesaj"] ;

if( mail($to, $subject, $message, $headers) ){
echo "mesajGonderildi";
}else if (!mail($to, $subject, $message, $headers)){
echo "hata";
}

?>

Oluşturduğumuz php dosyasını fla dosyamızı kaydettiğimiz klasör içerisinde php isimli bir klasör oluşturalım ve bu klasör içerisine gonder.php ismi ile kaydedelim.

Kodların tamamı aşağıdaki gibi olacaktır.

ActionScrip 3.0

isim_txt.text="";
mail_txt.text="";
konu_txt.text="";
mesaj_txt.text="";
uyari_txt.text="";

isim_txt.tabIndex=1;
mail_txt.tabIndex=2;
konu_txt.tabIndex=3;
mesaj_txt.tabIndex=4;

temizle_btn.label="Temizle";
gonder_btn.label="Gönder";

stage.focus=isim_txt;

isim_txt.maxChars=30;
mail_txt.maxChars=40;
konu_txt.maxChars=100;
mesaj_txt.maxChars=500;

temizle_btn.addEventListener(MouseEvent.CLICK, formuTemizle);

function formuTemizle(e:MouseEvent) {
isim_txt.text="";
mail_txt.text="";
konu_txt.text="";
mesaj_txt.text="";
uyari_txt.text="";
stage.focus=isim_txt;
}

gonder_btn.addEventListener(MouseEvent.CLICK, mesajiGonder);

function mesajiGonder(e:MouseEvent) {
if (isim_txt.text==""||mail_txt.text==""||konu_txt.text==""||mesaj_txt.text=="") {
uyari_txt.text="Lütfen tüm alanları eksiksiz doldurun.";
} else if (mail_txt.text.indexOf("@")==-1||mail_txt.text.indexOf(".")==-1) {
uyari_txt.text="Mail adresi hatalı. Lütfen kontrol edin.";
} else {
var adres:URLRequest=new URLRequest("php/gonder.php");
var formBilgileri:URLVariables=new URLVariables();
var phpLoader:URLLoader=new URLLoader();

adres.method=URLRequestMethod.POST;

formBilgileri.isim=isim_txt.text;

formBilgileri.mail=mail_txt.text;

formBilgileri.konu=konu_txt.text;

formBilgileri.mesaj=mesaj_txt.text;

adres.data=formBilgileri;

uyari_txt.text="Mesajınız gönderiliyor.";

phpLoader.load(adres);

phpLoader.addEventListener(Event.COMPLETE, mesajGonderildi);

}
}

function mesajGonderildi(e:Event) {
if (e.target.data=="mesajGonderildi") {
uyari_txt.text="Mesajınız Gönderildi";
} else {
uyari_txt.text="Gönderme sırasında bir hata oluştu. Lütfen tekrar deneyin.";
}
}

gonder.php

Son olarak gelen mesajlarda Türkçe karakter sorunu yaşarsanız. ActionScript kodlarının en başına

System.useCodePage=true;

satırını ekleyin.

Örnek çalışma dosyasını indirebilmek için siteye üye olmanız gerekmektedir. Siteye üye olmak için tıklayın.

Farenin Etrafında Saçılan Parçacıklar Yapmak

Erol Demirer — Sun, 16 May 2010 12:02:34 +0000

Bu örneğimizde farenin etrafında saçılan parçacıklar (particles) yapacağız. Demoda gördüğünüz gibi fare hareket ettikçe yeni parçacıklar ekleniyor ve eklenen bu parçacıklar bir süre sonra küçülerek kayboluyorlar. İlk olarak yeni bir ActionScript 3.0 belgesi açalım ve arkaplan rengini #333333 olarak değiştirelim.

Arkaplan rengini değiştirdikten sonra araç çubuğundan PolyStar Tool’u seçelim ve Properties panelindeki Options sekmesine tıklayarak Styles sekmesinden Star’ı seçelim, Number of Sides sekmesi ile de yıldızımızın köşe sayısını belirleyelim. Ben yıldızın köşe sayısını 7 olarak belirledim. Dolgu rengi olarak beyaz rengi seçelim ve sahneye bir yıldız çizelim.

Yıldızı Çizdikten sonra F8 kısayol tuşu ile Convert to Symbol penceresini açalım ve Name kısmına Yildiz yazalım(verdiğimiz ismin ilk harfinin büyük olmasına dikkat edelim). Sembole isim verdikten sonra Advanced sekmesine tıklayalım ve açılan pencerede Export For ActionScript seçeneğinin yanındaki onay kutucuğunu işaretleyelim. Class sekmesine sembolümüze verdiğimiz ismin otomatik olarak geldiğini göreceksiniz. Ok butonuna tıklayak pencereyi kapatalım ve sahne üzerindeki sembolü silelim. Bu yaptığımız işlem sayesinde oluşturduğumuz sembole ActionScript içerisinden ulaşıp kullanabileceğiz.

Artık kodları yazmaya başlayabiliriz. Yapacağımız ilk işlemler Library’deki sembolümüze ulaşmak ve fare hareket ettikçe sahneye eklenmesini sağlamak olacak. Fare hareketlerini için olay dinleyicimizi sahneye ekleyeceğiz. Oluşturduğumuz sembolü sahneye eklemek içinse addChild() metodunu kullanacağız. Actions panelini açalım ve ilk olarak aşağıdaki kodları yazalım.

var yildiz:Yildiz;

stage.addEventListener(MouseEvent.MOUSE_MOVE, tasi);

function tasi(e:MouseEvent) {
yildiz=new Yildiz();

addChild(yildiz);
}
}

Uygulamayı test ettiğimizde nesnemizin sahnenin üst köşesine yani x ve y ekseninde 0 noktasına eklendiğini göreceğiz. Nesnenin farenin etrafında olabilmesi için x ve y konumlarını sürekli olarak değiştirmemiz gerekiyor. Bu işlemi gerçekleştirebilmek için addChild(yildiz) satırının sonuna gellerek bir alt satıra geçelim ve aşağıdaki kodu ekleyelim. Burada yaptığımız işlem nesnemizin x ve konumlarını farenin o anki x ve y konumlarına göre belirlemek. Nesnenin farenin etrafında sürekli olarak aynı yere gelmemesi içinde mouseX ve moueY değerlerine ilave olarak Math.random() ile rastgele bir sayı üreterek nesnenin genişlik ve yükseklik değerleriyle çarpıyoruz.

yildiz.x=mouseX+Math.random()*yildiz.width;
yildiz.y=mouseY+Math.random()*yildiz.height;

Uygulamayı şimdi test ettiğimizde yildizlarin istediğimiz gibi eklendiğini göreceğiz. Şimdi de yıldızlarımıza animasyon ekleyerek hareket etmelerini sağlayalım. yildiz.y=mouseY+Math.random()*yildiz.height; satırının sonuna gelerek bir alt satıra geçellim ve yildizlarimiza olay dinleyici ekleyelim. Animasyona süreklilik kazandırmak için ENTER_FRAME olayını kullanacağız.

yildiz.addEventListener(Event.ENTER_FRAME, animasyon);

Olay dinleyiciyi ekledikten sonra fareHareketi isimli fonksiyonun dışarısına çıkalım ve animasyon isimli fonksiyonumuzu tanımlayalım. animasyon fonksiyonu ile ilk olarak yildizların belirlediğimiz bir oranda küçülmelerini, alfa değerlerinin azalmalarını ve aşağıya doğru hareket etmelerini sağlayacağız. Bu olayların hangi nesnelerde gerçekleşeceğini belirtmek için ise nesnemizin adı yerine e.target ifadesini kullanarak olay dinleyicide belirttiğimiz olayın gerçekleştiği nesneyi hedef alacağız. (e.target yerine yildiz yazarsak fonksiyonumuz istediğimiz gibi çalışmayacaktır. Nedeni ise yildiz yazdığımızda sahneye eklenen en son nesnenin hedef alınmasıdır. Sahneye sürekli olarak yeni bir nesne eklediğimiz içinde yenisi eklendiğinde öncekinin fonksiyonu geçersiz olacaktır.)

function animasyon(e:Event) {
e.target.scaleX-=.03;
e.target.scaleY-=.03;
e.target.alpha-=.03;
e.target.y+=3;
}

Evet yıldızlarımız artık istediğimiz gibi hareket ediyor. Fakat addChild() ile sürekli olarak sahneye eklediğimiz için bir süre sonra animasyon yavaşlamaya ve uygulama şişmeye başlayacaktır. Bunun önüne geçebilmek için eklediğimiz yıldızları bir süre sonra silmemiz gerek. Peki bu zamanı nasıl bulacağız? ENTER_FRAME olayı ile nesnemizin scaleX, scaleY ve alpha değerlerini sürekli olarak azaltıyoruz. Bu değerlerden biri 0 olduğunda o nesneye ait olay dinleyiciyi kaldırabilir ve sahneden silebiliriz. Bunun içinde bir koşullu ifade tanımlayacağız ve nesnenin alpha değeri 0 olduğunda olay dinleyiciyi kaldırıp, nesneyi sahneden sileceğiz. Yıldızları sahneye eklerken addChild() metodunu kullanmıştık. Silerkende removeChild() metodunu kullanacağız. animasyon fonksiyonu içerisinde son satıra gelelim ve bir alt satıra geçerek aşağıdaki kodları ekleyelim.

if (e.target.alpha<=0) {
e.target.removeEventListener(Event.ENTER_FRAME, animasyon);
removeChild(e.target as MovieClip);
}

Artık uygulamamız istediğimiz gibi çalışıyor. Eğer yıldızları rastgele renklendirmek istersek aşağıdaki kodları fareHareketi fonksiyonunun içerisinde addChild(yildiz) satırından sonrasına ekleyebiliriz. Burada ilk olarak renkleriDegistir isimli ColorTransform nesnesi tanımlıyoruz ve tanımladığımız nesnenin renk değerinin rastgele olması için Math.random() metodu ile rastgele bir sayı üreterek 0xFFFFFF değeri (beyaz rengin değeridir) ile çarpıyoruz.

var renkleriDegistir : ColorTransform = new ColorTransform();
renkleriDegistir.color = Math.random() * 0xffffff;
yildiz.transform.colorTransform = renkleriDegistir;

Kodların bitmiş hali aşağıdaki gibidir.

var yildiz:Yildiz;

stage.addEventListener(MouseEvent.MOUSE_MOVE, tasi);

function tasi(e:MouseEvent) {
yildiz=new Yildiz();

yildiz.x=mouseX+Math.random()*yildiz.width;
yildiz.y=mouseY+Math.random()*yildiz.height;
addChild(yildiz);

var renkleriDegistir : ColorTransform = new ColorTransform();
renkleriDegistir.color=Math.random()*0xffffff;
yildiz.transform.colorTransform=renkleriDegistir;

yildiz.addEventListener(Event.ENTER_FRAME, animasyon);
}

function animasyon(e:Event) {
e.target.scaleX-=.03;
e.target.scaleY-=.03;
e.target.alpha-=.03;
e.target.y+=3;

if (e.target.alpha<=0) {
e.target.removeEventListener(Event.ENTER_FRAME, animasyon);
removeChild(e.target as MovieClip);
}
}

Örnek çalışma dosyasını indirmek için tıklayın.

Adobe Flash CS5 Ai ve Ps ile Entegrasyon

Erol Demirer — Thu, 06 May 2010 19:35:50 +0000

Click here to view the embedded video.

Adobe Flash CS5 versiyonu ile Illustrator ve Photoshop programları ile entegre şekilde çalışmanın detaylarını videoda bulabilirsiniz.

Adobe CS5 Ürünlerini Download Edebilirsiniz

Erol Demirer — Fri, 30 Apr 2010 07:51:38 +0000

Adobe Creative Suite Programlarının deneme sürümlerini aşağıdaki linklerden download edebilirsiniz. Programları indirebilmek için Adobe ID’nizin olması gerekmektedir. Adobe’nin sitesinden basit bir şekilde hesap açabilirsiniz.

Adobe Flash CS5 download.

Adobe Fireworks CS5 download.

Adobe Dreamweaver CS5 download.

Adobe PhotoshopCS5 download.

Adobe Photoshop Lightroom 2 download.

Adobe Illustrator CS5 download.

Adobe After Effects CS5 download.

Adobe Premirere Pro CS5 download.

Adobe InDesign CS5 download.

Paketler:

Adobe Creative Suite 5 Master Collection download.

Adobe Creative Suite 5 Web Premium download.

Adobe Creative Suite 5 Design Premium download.

Adobe Creative Suite 5 Production Premium download.

Burada olmayan programlarıda Adobe Resmi Sitesinde bulabilirsiniz.

Adobe Flash CS5 Deco Tool

Erol Demirer — Thu, 29 Apr 2010 14:34:28 +0000

Adobe Flash Professional programının CS5 sürümü ile birlikte Deco Tool’a getirilen yeni özellikler ile ilgili bilgileri videoda bulabilirsiniz.

Click here to view the embedded video.

Adobe Flash CS5 Yeni Dosya Formatları

Erol Demirer — Thu, 29 Apr 2010 14:33:57 +0000

Adobe Flash Professional programının CS5 sürümü ile birlikte kullanmaya başlayacağımız yeni dosya formatları olan FXG ve XFL ile ilgili bilgileri videoda bulabilirsiniz.

Click here to view the embedded video.

Adobe Flash CS5 Text Alanları Yenilikleri

Erol Demirer — Thu, 29 Apr 2010 14:31:31 +0000

Adobe Flash Professional programının CS5 sürümü ile birlikte text alanlarına gelen yenilikler hakkındaki bilgileri videoda bulabilirsiniz.

Click here to view the embedded video.

Adobe Flash CS5 Arayüz Yenilikleri

Erol Demirer — Thu, 29 Apr 2010 14:25:15 +0000

Adobe Flash Professional programının CS5 sürümü ile birlikte arayüze getirilen yenilikleri videoda bulabilirsiniz.

Click here to view the embedded video.

Sosyal Medya Hesaplarınız İle Siteye Giriş

Erol Demirer — Tue, 20 Apr 2010 11:04:56 +0000

Merhaba arkadaşlar;

Artık Sosyal Medya ağlarından Twitter ve Facebook hesaplarınız ile sisteme giriş yapabilir, arkadaş grubunuzu davet edebilir, yorumlarınızı Sosyal Medya profilinizde yayınlayabilir, yayınlanan örneklerin kaynak dosyalarına ulaşabilirsiniz. Hatta giriş yaptıktan sonra Profile sekmesine tıklayarak profilinizi düzenleyebilir, üye olduğunuz tarihten sonra yayınlanan yazılardan anında haberdar olabilirsiniz.

Twitter ya da Facebook hesabınız ile giriş yapmak için sağ tarafta Sidebar üzerinde bulunan butonlardan birine tıklayabilirsiniz.

Görüşmek üzere.

Flash Açılır Menü Yapımı – 2

Erol Demirer — Tue, 20 Apr 2010 10:31:11 +0000

Bu uygulamamızda bir öncekinden farklı bir yöntem ile açılır (Drop Down) menü oluşturacağız. Uygulamanın detaylı anlatımını videoda bulabilirsiniz.

Click here to view the embedded video.

Örnek çalışma dosyasını indirebilmek için siteye üye olmanız gerekmektedir. Siteye üye olmak için tıklayın.

Adobe Flash ve ActionScript 3.0 Kullanarak Açılır (Drop Down) Menü Yapımı

Erol Demirer — Wed, 14 Apr 2010 07:50:34 +0000

Bu uygulamamızda Adobe Flash ve ActionScript 3.0 kullanarak açılır (Drop Down) menü oluşturacağız. Uygulamanın detaylı anlatımını videoda bulabilirsiniz.

Click here to view the embedded video.

Örnek çalışma dosyasını indirebilmek için siteye üye olmanız gerekmektedir. Siteye üye olmak için tıklayın.

ActionScript 3.0 İle Nesnelerin Hareket Alanlarını Kısıtlamak

Erol Demirer — Sun, 11 Apr 2010 18:50:16 +0000

Bu uygulamamızda yapmış olduğumuz animasyonlarda kullandığımız nesnelerin hareket alanlarını kısıtlayacağız. Detaylı anlatımı videoda bulabilirsiniz.

Click here to view the embedded video.

Örnek çalışma dosyasını indirebilmek için siteye üye olmanız gerekmektedir. Siteye üye olmak için tıklayın.

ActionScript 3.0 Tween Sınıfı İle Slayt Geçişleri Olan Foto Galeri Yapımı

Erol Demirer — Sun, 04 Apr 2010 15:49:57 +0000

Bu uygulamamızda slayt geçişleri olan küçük bir foto galeri hazırlayacağız. İlk olarak yeni bir AS 3.0 belgesi açalım. Belgemizi açtıktan sonra uygulamada kullanacağımız imajları File > Import > Import to Library menüsü ile import edelim. Burada dikkat etmemiz gereken şey kullanacağımız imajların genişlik ve yükseklik değerlerinin aynı olmasıdır. İmajları import ettikten sonra sahne boyutlarını da imajlara uygun olarak değiştirelim.(Benim kullandığım imajlar 625×470 piksel ebatlarında. Bu yüzden sahne boyutlarını 625 x 470 piksel olarak değiştirdim.) Sonra library’de bulunan imajları teker teker sahneye alalım. Alttaki görüntüde olduğu gibi hepsinin yanyana dizilmiş olması gerekiyor. İmajları sahne üzerine yerleştirdikten sonra Layer ismini imajlar olarak değiştirelim.

İmajları sahne üzerine yerleştirdikten sonra hepsini seçili hale getirelim ve F8 kısayol tuşu ile MovieClip olarak sembole dönüştürelim. Name kısmına imajlar yazalım, Registration noktasını da sol üst köşe olarak seçelim. Sembole dönüştürdükten sonra Properties panelinde Instance Name bölümüne imajlar_mc yazalım, x,y konumlarını 0 olarak değiştirelim ve imajlar layerını kilitleyelim.

Yeni bir layer açalım ve ismini butonlar olarak değiştirelim. Bu layerda fotoğraflar arasında gezinebilmek için kullanacağımızı butonları oluşturacağız. Sahnenin sağ ve sol taraflarına iki şekil çizelim ve F8 kısayol tuşu ile Button olarak sembole dönüştürelim. Sağ taraftaki için name bölümüne ileri, sol taraftaki içinse geri yazalım. Properties panelinde Instance Name bölümüne de aynı şekilde sağ taraftaki buton için ileri_btn, sol taraftaki için geri_btn yazalım.

Butonlar layerını kilitleyelim ve yeni bir layer açarak ismini Actions olarak değiştirelim. Bu layerın ilk karesini seçerek F9 kısayol tuşu ile Actions panelini açalım. İlk olarak kullacanığımız sınıfları import edip, geçişlerde kullacağımız Tween nesnelerini tanımlayacağız.

import fl.transitions.Tween;
import fl.transitions.easing.*;

var ileriTW,geriTW=Tween;

Şimdilik Tween nesnelerini sadece tanımladık. Özelliklerini ise butonlara ekleyeceğimiz olay dinleyiciler ile belirteceğiz. Şimdi kullanacağımız butonlar için olay dinleyicilerimizi ve fonksiyonlarımızı ekleyelim.

//ileri_btn isimli nesneye olay dinleyicisi ekliyoruz.
//Bu olay dinleyici MouseEvent'lerinden CLICK olayını kontrol edecek ve
//ileri isimli fonksiyonu çalıştıracak.
ileri_btn.addEventListener(MouseEvent.CLICK, ileri);

function ileri(e:MouseEvent) {
//ileriTW isimli Tween nesnesinin özelliklerini tanımlıyoruz.
//ilk olarak nesnenin ismi, sonrasında hangi özelliğe müdahale etmek istiyorsak özelliğin ismi,
//geçiş türü, başlangıç ve bitiş konumları, burada başlangıç konumu nesnenin o anki x konumu,
//bitiş konumunu ise o anki x konumundan kullandığımız imajların genişlik değerini çıkararak belirtiyoruz.
//Son olarakta süre ve süre türünü belirtiyoruz. Böylece imajlar sola doğru hareket edecek.
ileriTW=new Tween(imajlar_mc,"x",Regular.easeOut,imajlar_mc.x,imajlar_mc.x-625,.5,true);
}
//geri_btn isimli nesneye olay dinleyici ekliyoruz.
geri_btn.addEventListener(MouseEvent.CLICK, geri);

function geri(e:MouseEvent) {
//Tween nesnesinin özelliklerini tanımlıyoruz.
//Burada sadece bitiş değerini - yerine + olarak olarak değiştiriyoruz.
geriTW=new Tween(imajlar_mc,"x",Regular.easeOut,imajlar_mc.x,imajlar_mc.x+625,.5,true);
}

Şu anda uygulamamızı test ettiğimizde çalıştığını göreceğiz fakat ilk resimdeyken geri butonuna veya son resimdeyken ileri butonuna basarsak beyaz bir ekranla karşılaşağız. Bunu önleyebilmek için Event sınıfı içerisinde bulunan ENTER_FRAME olayını kullanacağız. ENTER_FRAME olayı ile imajlar_mc isimli nesnenin x konumunu sürekli kontrol ederek hangi butonların görünür olacağını belirleyeceğiz. Bunuyapabilmek için if..else if koşullu ifadesini kullanacağız.

//sahneye olay dinleyici ekliyoruz.
stage.addEventListener(Event.ENTER_FRAME, kontrolEt);

function kontrolEt(e:Event) {
//eğer nesnenin x konumu 0'dan büyük ya da 0'a eşitse
if (imajlar_mc.x>=0) {
//geri_btn isimli nesnenin visible özelliğini yani grünürlüğünü
//false olarak değiştiriyoruz.
geri_btn.visible=false;
//eğer nesnenin x konumu -1875'ten küçük ya da -1875'e eşitse
} else if (imajlar_mc.x<=-1875) {
//ileri_btn isimli nesnenin visible özelliğini yani grünürlüğünü
//false olarak değiştiriyoruz.
ileri_btn.visible=false;
//eğer nesnenin x konumu -1'den küçük ya da -1'e eşitse ve
//nesnenin x konumu -1874'ten büyük ya da -1874'e eşitse
//iki butonunda visible özelliğini true olarak değiştiriyoruz.
} else if(imajlar_mc.x <=-1&&imajlar_mc.x>=-1874){
ileri_btn.visible=true;
geri_btn.visible=true;
}

}

Buradaki x konumlarını kullandığımız imajların genişliğine ve sayısına göre değiştirebiliriz. Bu uygulamada 4 imaj kullandım ve imajların genişliği 625 piksel. Yani en son imaja geldiğimizde imajlar_mc isimli nesnenin x konumu hesaplamak için şu formülü kullandım = imaj genişliği x (imaj sayısı-1). Rakamlarla açıklayacak olursak 625 x 3 = 1875 sonucunu elde ettim. Farklı genişlik ve sayıdaki imajlar için bu formülü kullanabilirsiniz. Örneğin 500 piksel genişliğinde 11 imaj kullacaksak hesabı şu şekilde yapabiliriz. 500 x 10 = 5000. Tabi bu hesabın oluşturduğumuz sembolün kayıt noktası sol üst köşe seçili ise geçerli olacağını unutmamak lazım.

Kodların en son hali aşağıdaki gibi olmalıdır.

import fl.transitions.Tween;
import fl.transitions.easing.*;

var ileriTW,geriTW=Tween;

//ileri_btn isimli nesneye olay dinleyicisi ekliyoruz.
//Bu olay dinleyici MouseEvent'lerinden CLICK olayını kontrol edecek ve
//ileri isimli fonksiyonu çalıştıracak.
ileri_btn.addEventListener(MouseEvent.CLICK, ileri);

function ileri(e:MouseEvent) {
//ileriTW isimli Tween nesnesinin özelliklerini tanımlıyoruz.
//ilk olarak nesnenin ismi, sonrasında hangi özelliğe müdahale etmek istiyorsak özelliğin ismi,
//geçiş türü, başlangıç ve bitiş konumları, burada başlangıç konumu nesnenin o anki x konumu,
//bitiş konumunu ise o anki x konumundan kullandığımız imajların genişlik değerini çıkararak belirtiyoruz.
//Son olarakta süre ve süre türünü belirtiyoruz. Böylece imajlar sola doğru hareket edecek.
ileriTW=new Tween(imajlar_mc,"x",Regular.easeOut,imajlar_mc.x,imajlar_mc.x-625,.5,true);
}
//geri_btn isimli nesneye olay dinleyici ekliyoruz.
geri_btn.addEventListener(MouseEvent.CLICK, geri);

function geri(e:MouseEvent) {
//Tween nesnesinin özelliklerini tanımlıyoruz.
//Burada sadece bitiş değerini - yerine + olarak olarak değiştiriyoruz.
geriTW=new Tween(imajlar_mc,"x",Regular.easeOut,imajlar_mc.x,imajlar_mc.x+625,.5,true);
}

//sahneye olay dinleyici ekliyoruz.
stage.addEventListener(Event.ENTER_FRAME, kontrolEt);

function kontrolEt(e:Event) {
//eğer nesnenin x konumu 0'dan büyük ya da 0'a eşitse
if (imajlar_mc.x>=0) {
//geri_btn isimli nesnenin visible özelliğini yani grünürlüğünü
//false olarak değiştiriyoruz.
geri_btn.visible=false;
//eğer nesnenin x konumu -1875'ten büyük ya da -1875'e eşitse
} else if (imajlar_mc.x<=-1875) {
//ileri_btn isimli nesnenin visible özelliğini yani grünürlüğünü
//false olarak değiştiriyoruz.
ileri_btn.visible=false;
//eğer nesnenin x konumu -1'den küçük ya da -1'e eşitse ve
//nesnenin x konumu -1874'ten küçük ya da -1874'e eşitse
//iki butonunda visible özelliğini true olarak değiştiriyoruz.
} else if (imajlar_mc.x <=-1&&imajlar_mc.x>=-1874){
ileri_btn.visible=true;
geri_btn.visible=true;
}

}

Örnek çalışma dosyasını indirebilmek için siteye üye olmanız gerekmektedir. Siteye üye olmak için tıklayın.

ActionScript 3.0 Tween Sınıfı İle Animasyonlu Menü Yapımı

Erol Demirer — Sun, 28 Mar 2010 17:59:58 +0000

Bu uygulamamızda Tween sınıfını kullaranak animasyonlu bir menü yapacağız. Uygulama ile ilgili detaylı anlatımı videoda bulabilirsiniz.

Click here to view the embedded video.

Örnek çalışma dosyasını indirebilmek için siteye üye olmanız gerekmektedir. Siteye üye olmak için tıklayın.

Huzurlarınızda as3 Writer

Erol Demirer — Mon, 15 Mar 2010 22:01:02 +0000

Daha önce paylaşmış olduğum as3 Writer isimli programı artık indirebilirsiniz. Arayüzün nasıl olduğu ile ilgili olarak görselleri sizinle paylaşmıştım. Oluşturulan kod bloklarını daha rahat bir şekilde kopyalayabilmeniz için Kopyala butonunu ekledim. Bu butona tıklayarak kodları kopyalayabilirsiniz. Güncel sürümü kullanıp kullanmadığınızı program açıldıktan sonra alttaki banttan kontrol edebilirsiniz. Ayrıca bu bantta sitede yayınlanan makalelerin başlıklarınıda görebilirsiniz.

Event ve Loader bölümü hariç oluşturacağınız bütün kodların önizlemesini sağdaki bölümden yapabilirsiniz. Programı indirip kullanabilmeniz için küçük bir isteğim olacak, sadece 2 dakikanızı ayırıp siteye üye olmanız. Üye olduktan sonra download linklerini görebilir ve programı indirip kullanmaya başlayabilirsiniz.

Son olarak program AIR tabanlıdır. Kullanabilmeniz için bilgisayarınızda AIR yüklü olması gerekmektedir. Program AIR tabanlı olduğu için tüm işletim sistemlerinde(Macintosh, Windows, Linux) sorunsuz olarak çalışacaktır. Eğer yüklü değilse aşağıdaki linkten indirebilirsiniz.

Program ile ilgili görüş ve önerilerinizi yazının altındaki yorum bölümünden paylaşabilirsiniz.

Umarım severek kullanacağınız bir uygulama olur.

Download linklerini göremiyorsanız Üye Girişi yapınız. Eğer üye değilseniz, lütfen üye olunuz.

Örnek çalışma dosyasını indirebilmek için siteye üye olmanız gerekmektedir. Siteye üye olmak için tıklayın.

as3 Writer Geliyor…

Erol Demirer — Fri, 12 Mar 2010 14:05:38 +0000

Bir süredir üzerinde çalıştığın as3 Writer isimli program final aşamasına geldi. Program ActionScript’e yeni başlayanlar ve kod yazma konusuunda zorluk çeken arkadaşlara yönelik. Tabi kod yazmayı sevmeyen arkadaşları da ihmal etmek istemiyorum. Programı çalıştırdıktan sonra yapacağımız seçimlere göre yazılması gereken kodları otomatik olarak oluşturuyor. Hatta oluşturduğumuz kod bloğu ile ilgili bir örneği de program içerisinde görme imkanı mevcut. Yani seçimlere göre kod bloğunu oluşturmakla kalmıyor, test etme olanağı da sunuyor.

Şimdi de arayüzü biraz inceleyelim. Program içerisinde olay sınıfları olarak 6 sınıf bulunmakta. Alt seçenekler ise ilk bölümde yapacağımız olay sınıfına göre şekilleniyor. Örneğin kare_mc isimli nesneye tıklandığında alfasının yüzde 25 olmasını istiyoruz. Programı açtıktan sonra sırasıyla Olay Sınıfını, Olay Türünü ve properties seçimini yapıyoruz. Sonra alttaki bölüme ise Örnek Adı, Fonksiyon Adı, Değer Giriniz bölümlerine gerekli isim ve değerleri girerek kodu oluştur butonuna tıklayıp kullanmak istediğimiz kodları oluşturabiliriz.

Kodları oluşturduktan sonra sağ tarafta bulunan nesnenin üzerinde oluşturduğumuz kod bloğunu test edebiliriz. Oluşturduğumuz kod bloğunda nesneye tıklanınca alfası yüzde 25 olmasını istiyorduk. Aynı şekilde sağ taraftaki nesnenin üzerinde tıkladığımız zaman alfası yüzde 25 olarak değişecektir. Yani oluşturduğumuz kodları sağ taraftaki bölümde anında test etme olanağı mevcut.

Bu bölüm Event ve Loader harici tüm olay sınıflarında sorunsuz bir şekilde çalışmaktadır. Şimdilik bu kadar. Programın ne zaman indirilmeye hazır olacağı konusunda şunu söyleyebilirim. Kod yazma bölümünün çoğu bitti. Kod yazma aşaması bittikten sonra programın test edilmesi gerekiyor. Testler bittikten sonra da sitede yayınlayacağım. Tahminen 10-15 gün içerisinde bu süreçler bitmiş olur.

ActionScript 3.0 ve XML Kullanarak Grafik Tablo Oluşturma

Erol Demirer — Mon, 08 Mar 2010 11:30:59 +0000

Click here to view the embedded video.

Örnek çalışma dosyasını indirmek için tıklayın.

ActionScript 3.0 XML Kullanımı

Erol Demirer — Mon, 01 Mar 2010 21:38:04 +0000

Click here to view the embedded video.

Örnek çalışma dosyasını indirebilmek için siteye üye olmanız gerekmektedir. Siteye üye olmak için tıklayın.

TextField Sınıfının Kullanımı – Part 02

Erol Demirer — Sun, 28 Feb 2010 21:22:40 +0000

Click here to view the embedded video.

Örnek çalışma dosyasını indirebilmek için siteye üye olmanız gerekmektedir. Siteye üye olmak için tıklayın.

TextField Sınıfının Kullanımı – Part 01

Erol Demirer — Fri, 26 Feb 2010 22:17:21 +0000

Click here to view the embedded video.

ActionScript 3.0 Mouse İle Çizim Yaptırmak

Erol Demirer — Fri, 19 Feb 2010 00:45:16 +0000

Bu uygulamada graphics sınıfını kullanacağız. Kullanacağımız metotlar ise moveTo, lineTo ve clear metotları olacak. moveTo metodu yapılacak olan çizimin başlangıç noktasını belirlemeye, lineTo metodu düz çizgiler çizebilmemizi, clear metodu ise yapılan çizimleri silmeye yarar. Sahne üzerine 400 x 300 piksel ebatlarında bir dikdörtgen çizelim ve Movie Clip olarak sembole dönüştürelim. Instance Name kısmına pano_mc yazalım ve sahne üzerindeki konumunuda x ekseninde 100 piksel, y ekseninde ise 50 piksel olarak ayarlayalım.

Çizim yaparken kullanılacak renklerin seçimini ise Components panelinde bulunan ColorPicker bileşeni ile yaptıracağız. Window > Components sekmesine tıklayarak açılan pencereden ColorPicker bileşenini seçelin ve sahneye sürükleyip bırakalım. InstanceName kısmına da renkPaleti yazalım. Components panelinden bir tane de butonu sahneye alalım ve Instance Name kısmına sil_btn yazalım.

Kullanacağımız objeleri sahneye ekleme işlemi bittiğine göre kodları yazmak için yeni bir katman oluşturalım ve aşağıdaki kodları yazmaya başlayalım.

//çizimi başlatmak ve sonlandırmak için mantıksal bir değişken oluşturuyoruz
var ciz:Boolean=false;
//çizin yapacağımız alanda kullanacağımız bir Shape nesnesi oluşturuyoruz
//ve sahne üzerindeki film klibinin içerisine ekliyoruz.
var tuval:Shape = new Shape();
pano_mc.addChild(tuval);
//butonun üzerindeki yazıyı değiştiriyoruz
sil_btn.label="Sil"

pano_mc.addEventListener(MouseEvent.MOUSE_DOWN, cizimeBasla);
function cizimeBasla(e:MouseEvent):void {
//değişkenimizi true yapıp çizime başlıyoruz
ciz=true;
//fare ile çizilecek çizginin kalınlıığını ve rengini belirliyoruz.
//renk için sahne üzerindeki Component'ten seçilen rengi alıyoruz
tuval.graphics.lineStyle(5, renkPaleti.selectedColor);
//çizimin başlangıç noktasını belirliyoruz. Eğer bu değerler belirlenmezse
//x ve y değeri olarak 0 değerini alır.
tuval.graphics.moveTo(tuval.mouseX, tuval.mouseY);
}

//çizimi bitirmek için gerekli olay dinleyicileri atıyoruz.
pano_mc.addEventListener(MouseEvent.MOUSE_UP, cizimiBitir);
pano_mc.addEventListener(MouseEvent.ROLL_OUT, cizimiBitir);
function cizimiBitir(e:MouseEvent):void {
//değişkenimizi false yapıp çizim işlemini sonlandırıyoruz.
ciz=false;
}

//yapılan çizimin fareyi takip etmesini saplamak için olay dinleyici atıyoruz.
pano_mc.addEventListener(MouseEvent.MOUSE_MOVE, cizimiTasi);
function cizimiTasi(e:MouseEvent):void {
//farenin x ve y konumlarını değişkenlerimize atıyoruz.
var fareX:Number=tuval.mouseX;
var fareY:Number=tuval.mouseY;
//farenin sahne üzerindeki Movie Clip'in üzerinde olup olmadığını kontrol ediyoruz.
if (ciz&&fareX<=400&&fareX>=0&&fareY<=350&&fareY>=0) {
//lineTo metodu ile düz çizgiler çizdiriyoruz.
tuval.graphics.lineTo(fareX,fareY);
//farenin her hareketinden sonra çizimi güncelliyoruz.
e.updateAfterEvent();
}
}

sil_btn.addEventListener(MouseEvent.CLICK, sil);
function sil(e:MouseEvent) {
//yapılan çizimleri siliyoruz.
tuval.graphics.clear();
}

Örnek çalışma dosyasını indirebilmek için siteye üye olmanız gerekmektedir. Siteye üye olmak için tıklayın.

ActionScript 3.0 Boyama Kitabı Yapımı

Erol Demirer — Thu, 18 Feb 2010 00:40:39 +0000

Geliştirdiğimiz uygulamalarda kulllandığımız nesnelerin renklerini değiştirmek ya da bir boyama kitabı yapmak isteyebiliriz. Bu uygulamamızda bir boyama kitabı yapacağız. Uygulamamızda kullanılacak renkleri ise Components panelinde bulunan ColorPicker bileşeni ile belirleyeceğiz.

Uygulamamızda kullanacağımız yani boyamak istediğimiz tüm alanların MovieClip olması ve dolgu rengi olması gerekmektedir. Aksi takdirde boyama işlemi gerçekleşmeyecektir. Boyanacak alanların nreleri olduğunu belirtmek içinde uygulamada kullandığımız nesnenin bir kopyasını alarak sadece kontür rengi verebiliriz. Boyamak istediğimiz nesneler hazırsa Components panelinden ColorPicker bileşenini sahneye yerleştirelim. Boyama işlemini gerçekleştirmek için ActionScript 3.0 içerisinde bulunan ColorTransform sınıfını kullanacağız. Bu sınıf sayesinde nesnelerin renklerini değiştirebiliriz. Şimdi Actions panelini açarak aşağıdaki kodları yazalım.

//renk isimli ColorTransform sınıfına ait yeni bir nesne oluşturuyoruz
var renk:ColorTransform = new ColorTransform();

//olay dinleyicimizi for döngüsü ile atıyoruz.
//böylece sahne üzerinde bulunan tüm MovieClip'lere tek seferde olay dinleyici
//atayabileceğiz. Döngümüz sahne üzerindeki MovieCliplerimizin sayısı kadar
//çalışacak. ve başlangıç değeri 1 olacak.
for (var i:Number=1; i<14; i++) {
this["alan" + String(i)].addEventListener(MouseEvent.CLICK, boya);
}
//fonksiyonumuzu tanımlıyoruz
function boya(e:MouseEvent) {
//oluşturduğumuz renk isimli nesneye değer olarak
//renkKutusundan seçilen rengi atıyoruz.
renk.color=renkKutusu.selectedColor;
//tıklama olayının gerçekleştiği MovieClip'in rengini
//renk nesnesindeki renk ile değiştiriyoruz.
e.target.transform.colorTransform = renk;
}

Örnek çalışma dosyasını indirebilmek için siteye üye olmanız gerekmektedir. Siteye üye olmak için tıklayın.

ActionScript 3.0 Dijital Saat ve Takvim Yapımı

Erol Demirer — Tue, 16 Feb 2010 00:35:32 +0000

Sistemin saat ve tarih bilgilerini kullanarak uygulamalarımızda tarihi ve zamanı gösterebiliriz. Sadece bu bilgileri göstermekle kalmayıp kullandığımız sembollerin açılarını değiştirebilir, günün belirli zamanlarında farklı mesajlar verebiliriz. Hatta biraz daha abartıp farklı arkaplanlar kullanarak gündüz ya da gece saatlerinde uygulamanın arayüzünün farklı görünmesini sağlayabiliriz. Buradaki sınır hayal gücümüze kalıyor. Eğer kullanıcının bilgisayarındaki saat ve tarih yanlış ise uygulamamızda ki tarih ve saatte yanlış görüntülenecektir. Bunun sebebi ise ActionScript’in İstemci Taraflı bir kodlama dili olmasıdır.

Uygulamamızda tarih ve saat kısacası zaman ile ilgili bilgileri vermek istiyorsak Date() sınıfını kullanmamız gerekmektedir. Date sınıfı içerisinde bir çok veriyi barındırmaktadır. Bu tip veriler karmaşık veri tipi olarak isimlendirilirler. Date sınıfının hangi verileri barındırdığını görebilmek için aşağıdaki kodları Actions paneline yazalım.

var zaman:Date = new Date();

trace(zaman)

Output paneline o anki zaman değerleri yazılacaktır. Bu değerler sırası ile Gün ismi, ay ismi, ayın kaçıncı günü olduğu, saat, GMT saatine göre yerel saat ve yıl bilgileridir. Görüldüğü gibi almak istediğimi bilgilere karmaşık bir şekilde ulaştık. Fakat bu bilgiler anlıktır. Dikkat ederseniz saatteki saniye değeri uygulama çalıştığı andaki saniye değerinde kalır ve değişmez, değişmesi için uygulamanın sürekli çalışması gerekmektedir. Bir de bu değerleri düzenleyerek kullanıcıya düzgün bir şekilde aktarmak gerekecek. Bu bilgileri istediğimiz formatta düzenleyebilmek için Date sınıfının metotlarını kullanabiliriz. Böylece oluşturduğumuz zaman nesnesinin içerisinden ihtiyacımız olan bilgileri alarak düzenleyebiliriz. Sınıfın içerisinden istediğimiz bilgileri almak için aşağıdaki metotları kullanabiliriz.

zaman.getDay();//Haftanın kaçıncı günü olduğunu verir.
//Haftanın ilk günü Pazar olarak verilmiştir. Yani haftanın 0. günü Pazar olarak kabul edilir.

zaman.getMonth();//Yılın kaçıncı ayında olduğumuzu verir.

zaman.getDate();//Ayin kaçıncı gününde olduğumuzu verir.
//Burada da 0 değer Ocak ayına eşittir.

zaman.getFullYear();//içinde bulnduğumuz yılı verir.

zaman.getHours();//saat bilgisini verir.

zaman.getMinutes();//dakika bilgisini verir.

zaman.getSeconds();//saniye bilgisini verir.

zaman.getMilliseconds();//milisaniye bilgisini verir.

Date sınıfının içerisinden istediğimiz bilgileri aldık. Sıra geldi bu bilgileri sürekli güncellenmesine; güncellemeyi sağlamak için Bir olay tetikleyiciye ihtiyacımız olacak. Olay tetikleyici olarak ENTER_FRAME ya da Timer kullanabiliriz. Ben bu uygulamada Timer kullandım.

Artık uygulamamızı oluşturabiliriz. İlk olarak sahne üzerine iki adet dinamik metin kutusu oluşturalım ve Instance Name kısımlarına tarih_txt ve saat_txt yazalım.

Uygulamamızda kullanacağımız nesneler bu kadar. Şimdi de Actions panelini açarak aşağıdaki kodları yazalım.

//bir Timer nesnesi oluşturuyoruz süre olarakta 1 milisaniye değerini giriyoruz
var sayac:Timer = new Timer(1);

//oluşturduğumuz timer nesnesine bir olay dinleyici atıyoruz
sayac.addEventListener(TimerEvent.TIMER, zamaniGoster);

function zamaniGoster(e:TimerEvent) {
//zaman isimli yeni bir nesne oluşturuyoruz
var zaman:Date= new Date();
//içerisinde gün isimlerinin olduğu bir dizi oluşturuyoruz
var gunler:Array=new Array("Pazar", "Pazartesi", "Salı", "Çarşamba", "Perşembe", "Cuma", "Cumartesi");
//ay isimlerinin içerisinde olduğu bir dizi oluşturuyoruz
var aylar:Array = new Array("Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık");
//kullanacağımız değişkenlerimizi tanımlamaya başlıyoruz.
//tanımladığımız değişkenler haftanın kaçıncı gününde, yılın kaçıncı ayında,
//ayın kaçıncı gününde olduğumuzgibi bilgileri içerecekler
//bu değişkenleri kullanarak oluşturduğumuz dizilerin elemanlarını sahnedeki metin alanına yazdıracağız.
var haftaninGunu = zaman.getDay();

var hangiAy = zaman.getMonth();

var ayinGunu = zaman.getDate();

var yil = zaman.getFullYear();

//zaman nesnesini kullanarak saat ile ilgili bilgileri alıp
//tanımladığımız değişkenlere değer olarak atıyoruz
//if koşullu ifadesi ile de gelen değerler 10'dan küçükse başına 0 ilave ediyoruz ki
//değerler tek haneli olarak yazdırılmasın(Örn.= 3 yerine 03 vb.)
var saat = zaman.getHours();
if (saat<10) {
saat="0"+saat;
}
var dakika = zaman.getMinutes();
if (dakika<10) {
dakika="0"+dakika;
}
var saniye = zaman.getSeconds();
if (saniye<10) {
saniye="0"+saniye;
}
//saat ile ilgili değerleri sahne üzerindeki saat_txt isimli metin kutusuna yazdırıyoruz
//değerler arasına : ekleyerek birbirinden ayrılmasını sağlıyoruz.
saat_txt.text=saat + " : " +dakika + " : "+ saniye;
//tarih ile ilgili değerleri sahne üzerindeki tarih_txt isimli metin kutusuna yazdırıyoruz
//değerler arasına boşluk ekleyerek değerlerin birbirinden ayrılmasını sağlıyoruz.
tarih_txt.text = ayinGunu + " " + aylar[hangiAy] +" "+ yil+" " + gunler[haftaninGunu] ;
}
//sayacı çalıştırıyoruz
sayac.start();

Örnek çalışma dosyasını indirebilmek için siteye üye olmanız gerekmektedir. Siteye üye olmak için tıklayın.