{As} actionscript.gen.tr

AIR İle Dosya ve Dizinlerle Çalışmak – 1

Erol Demirer — Mon, 12 Mar 2012 13:08:58 +0000

AIR ile dosya ve dizinler ile çalışmak için File sınıfı kullanılır. Bu sınıf ile dosya yapısı hakkında bilgi alınabilir, dosya ve dizinler silinebilir, kopyalanabilir veya taşınabilir. Eğer dosya okumak ya da yazmak istiyorsak File sınıfı ile birlikte FileStream sınıfınıda kullanmamız gerekir. Örneğin masaüstündeki deneme.txt isimli dosyaya ulaşmak istiyorsak ilk olarak aşağıdaki kod bloğunu kullanmamız gerekiyor.

var file:File=File.desktopDirectory.resolvePath("deneme.txt");

Yapılan işlem File sınıfına ait yeni bir obje tanımlamak. Değer atama kısmında ise dosyanın yolunu belirtiyoruz, desktopDirectory dosya/klasör’ün bilgisayarın masaüstünde olduğunu belirtiyor. Parantez içerisinde ise ulaşmak istediğimiz dosyanın adı var.

Eğer masaüstünde değilde belgeler klasörü içerisindeki bir dosyayı belirtmek gerekirse desktopDirectory yerine documentsDirectory ifadesini kullanmamız gerekir. Dizinler ile ilgili ifadelerin tamamı aşağıdadır.

desktopDirectory = Masaüstü;
documentsDirectory = Belgeler Klasörü;
applicationDirectory = Uygulamanın bulunduğu dizin;
applicationStorageDirectory = Uygulamaya özel saklama dizini;
userDirectory = Kullanıcı dizini;

Belirtilen dosyanın işletim sistemi üzerindeki tam yolunu bulabilmek için nativePath ve url özellikleri kullanılabilir.

trace(file.nativePath)// C:\Users\UserName\Desktop\deneme.txt
trace(file.url)// file:///C:/Users/Erol/Desktop/deneme.txt

deneme.txt isimli dosyanın masaüstünde var olup olmadığını kontrol etmek içinse exists() metodunu kullanmak gerekir. Eğer belirtilen dosya varsa metod true yoksa false değerini döndürecektir. Eğer dosya var ise dosya içeriğini update ederek içerisine “AIR File System Example” yazısını eklesin. Eğer dosya yok ise bir yeni bir dosya oluşturarak içerisine aynı bilgiyi eklesin.

File sınıfına ait nesne tanımlamasını yukarıda yapmıştık. Şimdi de FileStream sınıfına ait bir nesne ve String bir değişken tanımlayacağız. Sonrasında ise if else koşullu ifadesi ile dosyanın var olup olmadığını kontrol edeceğiz.

var fs:FileStream=new FileStream();
var data:String="AIR File System Example";

if(file.exists)
{
fs.open(file, FileMode.UPDATE);
fs.writeUTFBytes(data+" Updated");
fs.close();
}
else
{
fs.open(file, FileMode.WRITE);
fs.writeUTFBytes(data);
fs.close();
}

Yukarıdaki kod bloğunda koşulllu ifade içerisinde file.exists metodundan geriye dönen değer true ise dosya içerini update ediyoruz. Eğer dosya yok ise yeni bir dosya oluşturuluyor. Bu işlemler için önce FileStream sınıfının open metodunu kullanıyoruz. Metod içerisine ilk parametre olarak tanımladığımız File nesnesini, ikinci parametre olarak ise FileMode değerini giriyoruz. FileMode için dört farklı parametre girilebilir(dosyayı okumak için FileMode.READ, update etmek için FileMode.UPDATE, üzerine ekleme yapmak için FileMode.APPEND, yeniden oluşturmak için FileMode.WRITE). Sonraki satırda String bir değer yazdıracağımız için writeUTFBytes metodunu kullanıyoruz. Bitmap dosyalar için writeUTFBytes metodu yerine writeBytes metodunun kullanılması gerekir.

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.

ActionScript 3.0 Tam Ekran Yapma ve Nesneleri Sahneye Göre Konumlandırma

Erol Demirer — Sun, 14 Feb 2010 00:30:18 +0000

Flash ve ActionScript kullanarak geliştirdiğimiz uygulamarı tam ekran olarak görüntülemek istediğimizde birçok sorun yaşarız ve uygulamamız tam ekran modunda istediğimiz gibi görüntülenmez. Bu sorunların başında uygulamada kullandığımız nesnelerin boyutlarının ve konumlarının değişmesi gelir. ActionScript 3.0 da Event sınıfı içerisinde bulunan RESIZE metodu ile bu tip sorunların önüne geçebiliriz.

Bu örneğimizde hem uygulamamızı tam ekran modunda görüntülemeyi hem de tam ekran modunda sahne üzerindeki nesneleri nasıl konumlandıracağımızı yani RESIZE metodunun kullanılmasını ele alacağız. Yeni bir dökğman açalım ve ilk olarak arkaplan olarak kullanacağımız bir görseli File > Import to Stage menüsünü kullanarak uygulamamıza aktaralım ve boyutunu sahnemize göre ayarlayalım. Aktardığımız imajı MovieClip olarak sembole dönüştürelim(sembole dönüştürken açılan pencerede Registration noktasını sol üst köşe olarak ayarlayalım) ve Instance Name kısmına arkaplan_mc yazalım. Components panelinde bulunan Button bileşeninden iki adet sahneye sürükleyelim. Instance Name kısımlarına tamEkran_mc ve normalEkran_mc yazalım. Evet uygulamamızda kullanacağımız nesnelerimiz hazır artık kodlama kısmına geçerek uygulamamızı düzenleyebiliriz.

Uygulamada kullandığımız nesneler sadece butonlara tıklandığında değil, swf dosyasının boyutu değiştiğinde de belirlediğimiz yerlere yerleştirilecektir.

Herşey hazır olduğuna göre Actions panelini açarak aşağıdaki kodları yazabiliriz.

//Eklediğimiz componentlerin buton modlarını açıyoruz.
tamEkran_mc.buttonMode=true;
normalEkran_mc.buttonMode=true;
//butonların üzerinde bulunan yazıları düzenliyoruz.
tamEkran_mc.label="Tam Ekran";
normalEkran_mc.label = "Normal Ekran";
//sahnenin ölçekleme modunu NO_SCALE olarak dğeiştiriyoruz.
//bu sayede sahnedeki nesnelerin boyutları aynı kalacaktır
//uygulamamızın boyutu büyüse de küçülse de değişmeyecektir.
stage.scaleMode=StageScaleMode.NO_SCALE;
//sahnenin referans noktasını sol üst köşe olarak ayarlıuyoruz
stage.align=StageAlign.TOP_LEFT;

//uygulamamız çalıştırıldığında nesnelerin duracaklerı yerleri
//belirlemek için bir fonksiyon oluşturuyoruz.
function sahneyeYerlestir() {
//arkaplan resmi olarak kullandığımız nesnenin boyutlarını sahneye göre ayarlıyoruz.
arkaplan_mc.width=stage.stageWidth;
arkaplan_mc.height=stage.stageHeight;

//nesnenin x ve y konumlarını belirtiyoruz.
arkaplan_mc.x =arkaplan_mc.y =0;

//tamEkran butonunun sahne üzerinde duracağı konumu belirliyoruz.
tamEkran_mc.x=stage.stageWidth-250;
tamEkran_mc.y=stage.stageHeight-35;

//normalEkran butonunun sahne üzerinde duracağı konumu belirliyoruz.
normalEkran_mc.x=stage.stageWidth-125;
normalEkran_mc.y=stage.stageHeight-35;
}

//fonksiyonumuzu çağırıyoruz.
sahneyeYerlestir();

//Uygulamanın boyutu değiştirildiğinde sahneyeYerlestir isimli fonksiyonu
//tekrar çağırıyoruz.
stage.addEventListener(Event.RESIZE, yenidenDuzenle);
function yenidenDuzenle(e:Event) {
sahneyeYerlestir();
}

//tamEkran_mc isimli nesneye olay dinleyicimizi atıyoruz
//butona basıldığında uygulamamız tam ekran modunda görüntülenecektir.
tamEkran_mc.addEventListener(MouseEvent.CLICK, tamEkranEkran);
function tamEkranEkran(e:MouseEvent) {
stage.displayState=StageDisplayState.FULL_SCREEN;

}

//normalEkran_mc isimli nesneye olay dinleyicimizi atıyoruz
//butona basıldığında uygulamamız normal boyutunda görüntülenecektir.
normalEkran_mc.addEventListener(MouseEvent.CLICK, normalEkran);
function normalEkran(e:MouseEvent) {
stage.displayState=StageDisplayState.NORMAL;
}

Uygulamızın HTML sayfalarında da tarayıcı boyutlarında görüntülenmesini istiyorsak Publish Settings ayarlarında HTML sekmesini aşağıdaki gibi ayarlamamız gerekmektedir.

Gerekli ayarları yaptıktan sonra uygulamanız HTML sayfalarında tam ekran modunda görüntülenecek ve tarayıcının boyutlarına göre ölçeklenecektir.

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

ActionScript 3.0 Sayı Bulma Oyunu v2.0

Erol Demirer — Sat, 13 Feb 2010 00:23:20 +0000

Daha önce yapyınladığım sayı bulma oyununu biraz geliştirdim. Bu versiyonda tahmin edilecek sayı aralığı 1 ile 1000 arasında değişiyor. Sayı aralığı bu kadar geniş olunca çıkan sayıları da bir kenara not etmek gerekiyor. Bu işlemi gerçekleştirmek için ilk olarak tahmin edilen sayıları bir diziye aktarıp her tahminden sonra dinamik bir metin alanına yazdıracağız. Eğer tahmin sayısı çok fazla olursa metin alanı için eklediğimiz scrollbar sayesinde tahmin edilen tüm sayıları görebileceğiz. Ayrıca her tahminden sonra imlecin tahmin_txt isimli metin kutusunda olmasını sağlayacağız ve buraya girilen değerleri sileceğiz.

Uygulamada kullandığım nesneler şu şekildedir.

Kullanacağımız nesneler hazırsa Actions panelini açarak aşağıdaki kodları yazalım.

//giriş metnine kenarlık veriyoruz
tahmin_txt.border=true;
//butonun üzerindeki yazıyı değiştiriyoruz
kontrol_btn.label="Kontrol Et";
//tahmin_txt metin kuutusuna girilecek karakterleri sınırlandırıyoruz.
tahmin_txt.restrict = "0-9";
//Math.random() metodu ile 1-100 arasında bir sayı tutturuyoruz
//Math.round() metodu ile gelen ondalıklı sayıyı tam sayıya yuvarlıyoruz.
var tutulan:Number = Math.round (Math.random ()*1000);
//tahmin isimli bir değişken oluşturuyoruz.
var tahmin:Number;
//tahminSayisi isimli bir değişken oluşturuyoruz.
var tahminSayisi: Number = 0;
//çıkan sayıları eklemek için bir dizi oluşturuyoruz.
var cikanSayi:Array = new Array();
//imlecin tahmin_txt isimli metin kutusunda olmasını sağlıyoruz
stage.focus= tahmin_txt;

//film klibine tıklandığında metni yukarı kaydırmak için olay dinleyici ve
//fonksiyonu yazıyoruz.
yukari_mc.addEventListener(MouseEvent.CLICK, scrollYukari);
function scrollYukari(e:MouseEvent) {
//scrollV metodu ile metin alanını aşağı yukarı kaydırabiliriz.
cikan_txt.scrollV--;
}

//film klibine tıklandığında metni aşağı kaydırmak için olay dinleyici ve
//fonksiyonu yazıyoruz.
asagi_mc.addEventListener(MouseEvent.CLICK, scrollAsagi);
function scrollAsagi(e:MouseEvent) {
cikan_txt.scrollV++;
}

//scroll_mc'yi sürüklerken kullanılacak alanı belirliyoruz.
//buradaki 200 değeri oluşturduğunuz metin kutusunun yüksekliğine göre değişebilir.
//örneğin uygulamanızda metin alanının yüksekliği 50 piksel ise
//200 yerine 50 piksel yazmalısınız.
var scrollAlan:Rectangle=new Rectangle(scroll_mc.x,scroll_mc.y,0,200);

//scroll_mc'nin sürüklenmesi için olay dinleyiciyi ve fonksiyonu yazıyoruz.
scroll_mc.addEventListener(MouseEvent.MOUSE_DOWN,scrollSurukle);
function scrollSurukle(e:MouseEvent) {
//startDrag metodundandan sonra parantez içerisine parametleri girerek
//sürükleme eyleminin belirlediğimiz alanda gerçekleşmesini sağlıyoruz.
scroll_mc.startDrag(true,scrollAlan);
}

//surukleme eylemini bitirmek için olay dinleyicimizi sahneye atıyoruz.
//Böylece sahne üzerinde fareyi nerede bırakırsak bırakalım sürükleme eylemi bitecektir.
stage.addEventListener(MouseEvent.MOUSE_UP, scrollBirak);
function scrollBirak(e:MouseEvent) {
scroll_mc.stopDrag();
}

//dinamik metin alanına olay dinleyicimizi atıyoruz.
cikan_txt.addEventListener(Event.SCROLL,scrollHareket);
function scrollHareket(e:Event) {
scroll_mc.y=scrollAlan.y+(cikan_txt.scrollV/cikan_txt.maxScrollV*200);
}

//scroll_mc hareket ettiğinde metninde hareket etmesini sağlamak için
//olay dinleyimizi sahneye atıyoruz.
stage.addEventListener(Event.ENTER_FRAME,scrollHareket2);
function scrollHareket2(e:Event) {
cikan_txt.scrollV=Math.round((scroll_mc.y-scrollAlan.y)*cikan_txt.maxScrollV/200);
}

kontrol_btn.addEventListener(MouseEvent.CLICK, kontrol);

function kontrol(e:MouseEvent) {
//tahmin_txt'den gelen metinsel veriyi parseInt olarak nümerik veriye çeviriyoruz.
tahmin = parseInt (tahmin_txt.text);
//tahmin edilen sayılı cikanSayi isimli diziye ekliyoruz.
cikanSayi.push(" " +tahmin );
//tahmin edilen sayıları dinamik metin kutusuna yazdırıyoruz.
cikan_txt.text = cikanSayi.toString();
//tahminSayisi değişkeninin değerini bir arttırıyoruz.
tahminSayisi++;
//tahmin_txt metin kutusundaki metni boşaltıyoruz
tahmin_txt.text="";
//imlecin tahmin_txt isimli metin kutusunda olmasını sağlıyoruz
stage.focus= tahmin_txt;
//eğer kullanıcı sayı girmediyse
if (tahmin_txt.text=="") {
uyari_txt.text="Lütfen bir sayı giriniz.";
//eğer tahmin tutulan sayıya eşitse
}
if (tahmin>1000) {
uyari_txt.text = "Lütfen 1 ile 1000 arasında bir sayı giriniz.";
} else if (tahmin == tutulan) {
//uyari_txt metin kutusuna uyarımızı yazdırıyoruz.
uyari_txt.text = ("Tebrikler " +tahminSayisi+" defada buldunuz.");
//tutulan değişkenine yeni bir değer atıyoruz
tutulan = Math.ceil (Math.random ()*100);
//tahminSayisi değişkenini sıfırlıyoruz.
tahminSayisi = 0;
cikanSayi.splice(0,cikanSayi.length);
cikan_txt.text="";
//tahmin tutulan sayıdan küçükse gerekli uyarıyı yazdırıyoruz.
} else if (tahmin < tutulan) {
uyari_txt.text = "Yukarı Çık";
//tahmin tutulan sayıdan büyükse gerekli uyarıyı yazdırıyoruz.
} else if (tahmin > tutulan) {
uyari_txt.text = "Aşağı İn";
}
}

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

ActionScript 3.0 Rotation

Erol Demirer — Fri, 12 Feb 2010 00:17:01 +0000

Bu uygulamamızda internette gezerken hepimizin sıklıkla karşılaştığı fare imlecini takip eden gözler yapacağız. Gözlerin fare ile olan açılarını hesaplamak için kotanjant kullanacağız. ActionScript 3.0 içerisinde kotanjant hesaplamak için iki metot bulunmaktadır. Bu metotlar Math.atan() ve Math.atan2() metodlarıdır. Birbirlerinden farkı ise Math.atan(açı) metodu açı hesaplamalarında kullanılır. Uygulamamızda kullanacağımız Math.atan2(mesafeY, mesafeX) ise dairenin merkez noktasından bir nesnenin y ve x koordinatlarındaki değerini radyan olarak geriye döndürür. Bu metodu kullanırken unutmamamız gereken nokta parantez içerisinde girdiğimiz parametrelerin ilknin y değeri olması gerektiğidir.

İlk olarak uygulamada kullanacağımız nesneleri sahne üzerine yerleştirelim. Ben uygulamada bir yüz kullandım. Gözleri MovieClip olarak sembole dönüştürdükten sonra sagGoz_mc ve solGoz_mc olarak adlandırdım.

Kodları yazmaya başladığımızda ilk olarak bir fonksiyon oluşturarak nesneler arasındaki x ve y konumlarını bulup Math.atan2() metoduna parametre olarak göndereceğiz. Fakat elimizde 2 x ve 2 y değeri var ilk olarak bunları teke düşürmemiz gerekecek. Bir değişken kullanarakta bu değerleri bire indireceğiz. Sonrasında değerleri metodumuza parametre olarak atayarak radyan olarak değeri alacağız ve aldığımız değeri dereceye çevirerek gözlerin dönmesini sağlayacağız. Son olarakta sahneye bir olay tetikleyici atayarak bu işlemin süreklilik kazanmasını sağlayacağız.

Kullanacağımız nesneler hazırsa Actions panelini açarak aşağıdaki kodları yazabiliriz.

//ilk olarak bir fonksiyon oluşturuyoruz.
//bu fonksiyon ile nesneler arasındaki mesafeyi hesaplayıp
//Math.atan2 metodu ile gözlerin döneceği açıyı belirliyoruz.
function dondur(x1:Number, y1:Number, x2:Number, y2:Number):Number {
//ilk olarak x eksenindeki farkı bulup değişkenimize değer olarak atıyoruz
var mesafeX:Number=x1-x2;
//y eksenindeki farkı bir değişkene değer oalrak atıyoruz
var mesafeY:Number=y1-y2;
//Math.atan2 metodu ile radyan cinsinden açı değerini alıyoruz.
//parametre olarak ilk önce y eksenindeki değeri giriyoruz.
var radyan:Number=Math.atan2(mesafeY, mesafeX);
//radyan oalrak aldığımız değeri dereceye çeviriyoruz.
var sonuc:Number=radyan*180/Math.PI;
//sonucu geri döndürüyoruz
return sonuc;
}

//Olay dinleyiciyi sahnemize atıyoruz. Olay tetikleyici olarakta ENTER_FRAME kullanıyoruz.
stage.addEventListener(Event.ENTER_FRAME, takip2);
function takip2(e:Event) {
//Gözlerin dönüş açılarını belirlemek için rotation metodunu kullanıyoruz.
//gözlerin dönüş açısını hesaplamak içinse oluşturduğumuz dondur isimli fonksiyona
//gerekli bilgileri giriyoruz. yani x1, x2,y1,y2 değişkenlerinin hangi değerleri
//alması gerektiğini belirtiyoruz.
sagGoz_mc.rotation=dondur(mouseX,mouseY,sagGoz_mc.x,sagGoz_mc.y);
solGoz_mc.rotation=dondur(mouseX,mouseY,solGoz_mc.x,solGoz_mc.y);
}

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

ActionScript 3.0 Daktilo Efekti İle Yazı Yazmak

Erol Demirer — Thu, 11 Feb 2010 00:10:15 +0000

Geliştirdiğimiz uygulamalara biraz hareket ve görsellik katmak için kullandığımız görsellere geçiş efektleri uygulayarız. Peki ya kullanacağımız metin blokları için ne gibi efektler yapabiliriz? Örneğin metinlerin daktilo ya da klavye ile yazılıyormuş gibi görüntülenmesini sağlayabiliriz. Bu uygulamamızda böyle bir işlemi yapacağız.

İlk olarak sahneye Dinamik bir metin alanı yerleştirelim ve Instance Name kısmına metin_txt yazalım. Sonra kodları yazmak için yeni bi katman oluşturalım ve adını Actions olarak değiştirelim. Kullanacağımız metni bir değişken oluşturarak tanımlayacağız. Gerisini ise olayı tetiklemek için oluşturacağımız sayaç halledecek. Yani sırası ile harfleri yazdıracağız. Actions panelini açarak aşağıdaki kodları yazalım.

stop();
//İlk olarak yazdıracağımız yazıyı içerisinde
//bulunduran metin isimli bir String nesnesi oluşturacağız.
var metin:String="Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur." + "\n" + "\n" +"Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur. ";

//Harfleri belirli zaman aralıkları ile yazdırmak için Timer nesnesi tanımlıyoruz.
//Parantez içerisindeki parametreyi istediğimiz gibi değiştirebliriz.
var sayac:Timer = new Timer(75);

//Metin içerisindeki harfleri sırası ile yazdırırken kullanacağımız bir değişken tanımlılyoruz.
var i:Number=0;

//Sayac isimli nesneye olay dinleyicimizi atıyoruz.
sayac.addEventListener(TimerEvent.TIMER, yazdir);
function yazdir(e:TimerEvent) {
//fonksiyon her çalıştığında değişkenimizin değerini arttırıyoruz.
i++;
//Yeni bir String nesne oluşturuyoruz.
//substr metodunu kullanarak metnin başlangıcından itibaren
//i değişkeninin değerine kadar olan kısmmını alıyoruz.
var harfEkle:String=metin.substring(0,i);
//Dinamik metin alanına harfEkle nesnesinden gelen verileri yazdırıyoruz.
metin_txt.text=harfEkle;
}

//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.

ActionScript 3.0 İle Metinleri Rastgele Renklendirmek

Erol Demirer — Wed, 10 Feb 2010 00:06:03 +0000

Bu uygulamamızda oluşturduğumuz metin alanlarında bulunan harleri rastgele renklendireceğiz. Özellikle banner yapımında fazlasıyla kullanabileceğimiz bir özellik olacak. İlk olarak 600 x 200 piksel ebatlarında bir döküman oluşturalım. Sahne üzerine Static Text alanı açıp yazımızı yazalım. Yazımızı yazdıktan sonra Modify > Break Apart (Ctrl+B) komutu ile harflerin ayrı birer metin alanına yerleşmesini sağlayalım ve oluşan metin alanlarını tek tek MovieClip olarak sembole dönüştürelim. Oluşturduğumuz sembollerin Instance Name kısımlarına herhangi bir şey yazmaya gerek yok.

Oluşturduğumuz Movie Clip’lerle ilgili işlem yaparken nesnelere verdiğimiz isimleri değil sahne üzerinde bulundukları sırayı baz alacağız. Bu işlem içinde getChildAt() metodunu kullanacağız. Bu metod ile index numaraları verilmiş nesneler ile ilgili bilgileri alabiliriz. Kullanımı ise getChildAt(index sırası).y şeklindedir. Nesnelerin renklerini değiştirmek içinse ColorTransform metodunu kullanacağız. Bu metot sayesinde nesnelerin renklerine müdahale edebiliriz. Örneğimizde bu metodla birlikte Math.random() metodunu kullanarak renk değerlerinin rastgele gelmesini sağlayacağız. Yazımız hazırsa Actions isimli yeni bir Layer oluşturup aşağıdaki kodları yazalım.

//ilk olarak bir Timer nesnesi tanımlıyoruz ve süre olarak 100 milisaniye değerini veriyoruz.
var sayac:Timer = new Timer(100);
//indexSirasi isimli bir değişken tanımlıyoruz
var indexSirasi:Number = 0;

//Timer nesnemize olay dinleyici ekliyoruz.
sayac.addEventListener(TimerEvent.TIMER, renkDegistir);
//sayacı başlatıyoruz.
sayac.start();

function renkDegistir(e:TimerEvent):void {
//bir MovieClip nesnesi oluşturuyoruz ve
//getChildAt metodu ile sahne üzerinde bulunan nesneleri
//sırası ile MovieClip nesnesine dönüştürüyoruz.
var nesne:MovieClip = getChildAt(indexSirasi) as MovieClip;
//renkleri değiştirebilmek için bir ColorTransform nesnesi tanımlıyoruz
var renkleriDegistir : ColorTransform = new ColorTransform();
//sayac her çalıştığında rastgele bir renk oluşması için
//Math.random() metodunu kullanıyoruz.
renkleriDegistir.color = Math.random() * 0xffffff;
//MovieClip nesnelerinin rengini değiştiriyoruz.
nesne.transform.colorTransform = renkleriDegistir;
// eğer değişkenimizin değeri sahne üzerindeki obje sayısından 1 eksik ise
if (indexSirasi == numChildren -1) {
//değişkenimizin değerini sıfırlıyoruz
indexSirasi = 0;
//değilse
} else {
//değişkenimizin değerini arttırıyoruz.
indexSirasi ++;
}
}

Ö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 Metin Alanlarına Scroll Eklemek

Erol Demirer — Tue, 09 Feb 2010 23:53:07 +0000

Çoğu zaman uygulamamızda kullandığımız metin alanlaır için Components panelinde bulunan TextArea ya da UIScrollBar bileşenlerini kullanırız. Kullanımları olukça pratik olmasına rağmen bu bileşenler genellikle uygulamamızın tasarımlarına pek uymazlar. Bu uygulamamızda metin alanları için scrollbarımızı oluşturacağız. Böylece metin alanları için hem yerden tasarruf etmiş olacağız hem de scrollbarımız uygulamamızın tasarımına uygun olacak.

Uygulamamızda metnimizi harici bir text dosyasından alacağız. Uygulamamızı kaydedeceğimiz dosyanın içerisine yazilar isimli bir klasör oluşturalım. Buraya kaydedeceğimiz text dosyasının adı da yazi.txt olsun. Dosyayı kaydederken kodlama bölümünde UTF-8 kodlama dilini seçelim. Yoksa Türkçe karakterlerde sorun yaşarız. Flash programına geçerek uygulamada kullanacağımız nesneleri hazırlamaya başlayabiliriz.

Sahneye bir tane dinamik metin alanı oluşturalım ve Instane Name kısmına metin_txt yazalım. Scroll’da kullanmak için 3 nesneye daha ihtiyacımız olacak.İki tanesi metni hangi yöne kaydıracağımızı gösteren yön tuşları bir tanesi de ortada hareket eden küçük bir kare olacak. Nesneleri oluşturduktan sonra Instance Name kısımlarına yön tuşları için yukari_mc ve asagi_mc, diğer nesnemiz içinse scroll_mc olarak adlandıralım.

Nesnelerimizi oluşturduktan sonra kodları yazmak için Actions isimli yeni bir katman oluşturalım ve Actions panelini açarak aşağıdaki kodları yazalım.

//bir URLLoader nesnesi tanımlıyoruz.
var metinYukle:URLLoader = new URLLoader();
//dosya yolunu belirmek için bir URLRequest nesnesi tanımlıyoruz.
var adres:URLRequest = new URLRequest("yazilar/yazi.txt");
metinYukle.load(adres);

//metinYukle isimli nesneye olay dinleyici atayarak yükleme işleminin
//bitip bitmediğini kontrol ediyoruz.
metinYukle.addEventListener(Event.COMPLETE, tamamlandi);
function tamamlandi(e:Event) {
//yükleme bitmiş ise text dosyasınaki veriyi
//sahnedeki dinamik metin alanına yazdırıyoruz.
metin_txt.text = metinYukle.data;
}

//film klibine tıklandığında metni yukarı kaydırmak için olay dinleyici ve
//fonksiyonu yazıyoruz.
yukari_mc.addEventListener(MouseEvent.CLICK, scrollYukari);
function scrollYukari(e:MouseEvent) {
//scrollV metodu ile metin alanını aşağı yukarı kaydırabiliriz.
metin_txt.scrollV--;
}

//film klibine tıklandığında metni aşağı kaydırmak için olay dinleyici ve
//fonksiyonu yazıyoruz.
asagi_mc.addEventListener(MouseEvent.CLICK, scrollAsagi);
function scrollAsagi(e:MouseEvent) {
metin_txt.scrollV++;
}

//scroll_mc'yi sürüklerken kullanılacak alanı belirliyoruz.
//buradaki 200 değeri oluşturduğunuz metin kutusunun yüksekliğine göre değişebilir.
//örneğin uygulamanızda metin alanının yüksekliği 50 piksel ise
//200 yerine 50 piksel yazmalısınız.
var scrollAlan:Rectangle=new Rectangle(scroll_mc.x,scroll_mc.y,0,200);

//scroll_mc'nin sürüklenmesi için olay dinleyiciyi ve fonksiyonu yazıyoruz.
scroll_mc.addEventListener(MouseEvent.MOUSE_DOWN,scrollSurukle);
function scrollSurukle(e:MouseEvent) {
//startDrag metodundandan sonra parantez içerisine parametleri girerek
//sürükleme eyleminin belirlediğimiz alanda gerçekleşmesini sağlıyoruz.
scroll_mc.startDrag(true,scrollAlan);
}

//surukleme eylemini bitirmek için olay dinleyicimizi sahneye atıyoruz.
//Böylece sahne üzerinde fareyi nerede bırakırsak bırakalım sürükleme eylemi bitecektir.
stage.addEventListener(MouseEvent.MOUSE_UP, scrollBirak);
function scrollBirak(e:MouseEvent) {
scroll_mc.stopDrag();
}

//dinamik metin alanına olay dinleyicimizi atıyoruz.
metin_txt.addEventListener(Event.SCROLL,scrollHareket);
function scrollHareket(e:Event) {
//scroll_mc'nin y değerini belirliyoruz.
//bunu işlemi gerçekleştirirken scrrol_mc'nin y değerine
//metin_txt'nin şu andaki V değerini, maksimum V değerine bölüp,
//belirlediğimiz hareket alanının yüksekliği ile çarpıyoruz.
//trace ile scrollV ve maxScrollV değerlerini alırsak buradaki olayı
//daha iyi anlayabiliriz.
//buradaki 200 metin alanının yüksekliğine göre değişebilir.
scroll_mc.y=scrollAlan.y+(metin_txt.scrollV/metin_txt.maxScrollV*200);
}

//scroll_mc hareket ettiğinde metninde hareket etmesini sağlamak için
//olay dinleyimizi sahneye atıyoruz.
stage.addEventListener(Event.ENTER_FRAME,scrollHareket2);
function scrollHareket2(e:Event) {
metin_txt.scrollV=Math.round((scroll_mc.y-scrollAlan.y)*metin_txt.maxScrollV/200);
}

Ö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 Sayı Bulma Oyunu

Erol Demirer — Mon, 08 Feb 2010 23:45:50 +0000

Bu uygulamamızda ActionScript 3.0 ile basit bir sayı bulma oyunu yapacağız. Oyunun mantığını kısaca özetlersek, kullanıcı metin kutusuna rastgele sayılar girecek, uygulama ise arkaplanda Math.random() ile oluşturulmuş olan sayı ile kullanıcınının giriş yaptığı sayıları karşılaştıracak. Eğer kullanıcı doğru tahminde bulunmuşsa uyarı metnine kaç defada doğru tahmini bulduğu yazacak. Metin kutusuna girilen sayıların tutulan sayıdan büyük ya da küçük olmasına göre gerekli yönlendirmeler sahne üzerindeki dinamik metin kutusuna yazdırılacak.

Yukarıdaki mantıkla uygulamamızı oluşturmaya başlarsak, sahne üzerinde bir tane Dynamic Text, bir tane de Input Text alanına ve kontrol işlemlerini gerçekleştirmek içinde bir butona ihtiyacımız olacak. Dymanic Text kutusunun Instance name kısmına uyari_txt, Input Text kutusunun Instance Name kısmına da tahmin_txt, butonunkine de kontrol_btn yazalım.

Kodlama kısmına geçtiğimizde ise ilk olarak bir değişken oluşturarak, Math.rando() metodu ile 1-100 arasında değişen bir değer atayacağız. İkinci bir değişken ile de kullanıcının tahmin sayısını tutacağız. Yapılan tahminleri de if..else if koşullu ifadesini kullanarak tutulan sayı ile karşılaştıracağız. Kodları yazmak için yeni bir katman oluşturalım ve adını Actions olarak değiştirelim. Sonrasında da F9 kısayol tuşu ile Actiions panelini açarak aşağıdaki kodları yazalım.

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

ActionScript 3.0 Harici Dosyalar İçin Preloader Yapımı

Erol Demirer — Mon, 08 Feb 2010 23:38:48 +0000

Dosyalarımız dışarıdan yüklemeye başladık, peki dosya yüklenene kadar kullanıcıya dosyanın ne kadar yüklendiğini gösteren bir preloader (önyükleyici) olsa nasıl olur? Yükleme yapılana kadar o alanın boş kalması yerine kullanıcıya görüntülemeye çalıştığı uygulamanın ya da görselin yüzde kaçının yüklendiğini gösterebiliriz.

İlk olarak çalışmalarımızı kaydedeceğimiz bir klasör oluşturalım. Bu klasörün içerisine yükleyeceğimiz dosyaları içeren bir klasör ve çalışma dosyamızı kaydedeceğiz. Bu örnekte bir imaj dosyası kullandığım için Gorsel isimli bir klasör kullandım. Preloader’ı oluştururken olay sınıfı olarak ProgressEvent ve Event olay sınıflarını kullanacağız. PregressEvent nesnesi yükleme işlemi başladığında (genellikle ses, görsel, swf vb.) veri göndermek için kullanılır. ProgressEvent, progress (yükleme, ilerleme) işlemleri ile ilgili bir Event nesnesi oluşturur ve bu nesneler olay dinleyicilere parametre olarak aktarılır. Event sınıfıının COMPLETE olayını kullanarak yükleme işleminin bitip bitmediğini kontrol edeceğiz. Şimdi preloader’ı oluşturmaya başlayalım.

Sahne üzerine ilk olarak genişliği 350 yüksekliği 20 piksel olan gri renkte bir dikdörtgen çizelim, sahneye ortalayalım ve bir kopyasını alalım. Katman adınıda zemin olarak değiştirelim. Yeni bir katman ekleyip adını progressBar olarak değiştirelim, az önce kopyaladığımız dikdörtgeni Edit > Paste In Place menüsünü kullanarak yeni katmanda aynı koordinatlara yapıştıralım ve rengini mavi olarak değiştirelim. Mavi dikdörtgeni seçerek Movie Clip olarak sembole dönüştürelim, Instance Name kısmına progressBar yazalım. progressBar isimli nesnemizin genişlik değerini properties panelini kullanarak 1 piksel olarak değiştirelim. Oluşturduğumuz nesne yükleme sırasında yükleme durumunu gösterecektir. Bir katman daha ekleyelim ve katman adını text olarak değiştirelim. Bu katmana da dinamil bir metin alanı oluşturalım ve Instance Name kısmına durum_txt yazalım. Dinamik metin alanına da yüklemenin yüzde kaçının gerçekleştiğini yazdıracağız. Son olarakta kodları yazmak için yeni bir katman oluşturalım ve katman adını Action olarak değiştirelim. Timeline ve sahnenin görünümünün aşağıdaki gibi olması gerekmektedir.

Kullanacağımız nesneler hazır olduğuna göre Actions panelini açarak aşağıdaki kodları yazabiliriz.

//gorseli yuklemek için bir Loader objesi tanımlıyoruz.
var gorsel:Loader = new Loader();
//Yükleyeceğimiz dosyanın yolunu belirtmek için URLRequest objesi tanımlıyoruz.
var adres:URLRequest = new URLRequest ("Gorsel/fotograf2.jpg");

//Loader objesine olay dinleyicimizi atıyoruz.
gorsel.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, yukleniyor);

function yukleniyor(e:ProgressEvent) {
//dosyanın kaçta kaçının yüklendiğini bulabilmek için toplam dosya boyutunu,
//yüklenen dosya boyutunun miktarına bölüyoruz.
var yuklenen:Number = e.bytesLoaded / e.bytesTotal;
//progresBar nesnesinin genişliğini yukleme durumuna göre arttırıyoruz.
progressBar.scaleX = yuklenen;
//dinamik metin alanına yüklemenin % kaç olduğunu yazdırıyoruz.
//yüzdelik değer almak için yuklenen değişkenini 100'le çarpıyoruz.
durum_txt.text= "%" + Math.floor(yuklenen * 100);
}

//bu olay dinleyici ile yükleme işleminin bitip bitmediğini kontrol ediyoruz.
gorsel.contentLoaderInfo.addEventListener(Event.COMPLETE, yuklendi);

function yuklendi(e:Event) {
//dinamik metin alanına işlemin tamamlandığını bildiren açıklamayı yazdırıyoruz.
durum_txt.text= "Yükleme işlemi tamamlandı.";
}

//Loader objesinin dosyayı nereden yükleyeceğini belirtiyoruz.
gorsel.load(adres);
//dosyayı sahneye ekliyoruz.
addChild(gorsel);

Kolay gelsin. Umarım beğenirsiniz.

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

ActionScript İle Text Dosyalarından Veri Yüklemek

Erol Demirer — Sun, 07 Feb 2010 23:29:18 +0000

Adobe Flash programı ile oluşturduğmuz uygulamaların içeriklerini sadece Flash programı içerisinden değiştirebiliyoruz. Yani uygulama içerisinde bulunan verileri (text, imaj) değiştirmek oldukça zor. Bu işlemi kolaylaştırmanın yolu ise Text ya da XML dosyalarını kullanarak verileri Flash programına aktarmaktır. Bu uygulamada Text dosyalarından verileri nasıl aktarabileceğimizi göreceğiz. Text dosyalarını kullanarak sadece metinleri değil uygulama içerisinde bulunan imajları da güncellememiz mümkündür. Şimdi de text dosyalarından verileri nasıl aktarabileceğimize bakalım.

İlk olarak bir klasör oluşturalım. Sonra Notepad ya da herhangi bir text editörü programını kullanarak bir text dosyası açalım ve içerisine şunları ekleyelim:

adSoyad=Erol Demirer&mail=info@eroldemirer.com&webSite=www.eroldemirer.com&image=images/Logo.jpg

Text dosyasını oluşturduğumuz klasör içerisine veri ismi ile kaydedelim. Dosyayı kaydederken açılan kayıt penceresinde altta bulunan kodlama sekmesinden UTF-8 kodlama dilini seçelim. Böylece aktaracağımız verilerde Tükçe karakter sorunu yaşamamış oluruz. Uygulamada kullanacağımız tüm dosyaları(text ve imaj) bu klasör içerisinde toplayacağız. Bu klasörün içerisinde images isimli bir klasör oluşturalım ve uygulamada kullanacağımız görseli bu klasör içerisine yerleştirelim.(Ben bu uygulamada 125 x 125 piksellik bir imaj kullandım.)

Text dosyasında = operatöründen önce yazmış olduklarımız değişken isimlerini oluşturuyor, & operatörü ise bu değişkenleri birbirinden ayırıyor. Sıra geldi Flash programında uygulamamızı hazırlamaya, 500 x 200 piksel ebatlarında yeni bir döküman oluşturalım. Sahnenin sol tarafına 125 x 125 piksel ebatlarında bir kare çizelim ve Movie Clip olarak sembole dönüştürelim. Açılan pencerede Type kısmından Registration noktasını sol üst köşe olarak belirleyelim. Instance Name kısmına foto_mc yazalım. Araç çubuğundan Text aracını alalım, properties panelinden metin türü olarak Dynamic Text’i seçelim ve Line Type sekmesinden Multi Line seçeneğini seçelim ve oluştutduğumuz Movie Clip’in sağ tarafına fareyi sürükleyerek bir metin kutusu oluşturalım. oluşturduğumuz bu metin kutusu için Instance Name kısmına bilgi_txt yazalım.

Flash dosyamızda kodları yazmak için Actions isminde yeni bir katman oluşturalım ve aşağıdaki kodları yazalım.

//veriYukle isimli bir URLLoader nesnesi oluşturuyoruz.
var veriYukle:URLLoader = new URLLoader();
//yüklenen değerlerin birer değişken olduğunu tanımlamak için
//veriYukle nesnesinin DataFormat'ını VARIABLES olarak atıyoruz.
veriYukle.dataFormat = URLLoaderDataFormat.VARIABLES;
//yüklenecek dosyanın yolunu belirtmek için URLRequest nesnesi oluşturuyoruz.
var adres:URLRequest = new URLRequest("veri.txt");
//veriYukle nesnesinin yukleme işlemini nereden gerçekleştireceğini belirtiyoruz.
veriYukle.load(adres);

//veriYukle nesnesine bir olay dinleyici atıyoruz.
//Olay dinleyici yükleme işlemi bittiğinde veriYuklendi isimli fonksiyonu çalıştıracak.
veriYukle.addEventListener(Event.COMPLETE, veriYuklendi);
function veriYuklendi(e:Event) {
//dinamik text alanına veriYukle nesnesinden gelen değişkenleri sırası ile yazdırıyoruz.
// "\n" ile bir alt satıra iniyoruz.
bilgi_txt.text="Adı Soyadı: " + veriYukle.data.adSoyad + "\n" + "E-posta : " + veriYukle.data.mail + "\n" + "Site Adresi: " +veriYukle.data.webSite;
//foto isimli bir loader nesnesi oluşturuyoruz.
var foto:Loader = new Loader();
//fotoAdres isimli bir URLRequest nesnesi tanımlıyoruz ve dosya yolunu belirtiyoruz.
var fotoAdres:URLRequest = new URLRequest(veriYukle.data.image);
//foto nesnesinin yüklemeyi nereden gerçekleştireceğini belirtiyoruz.
foto.load(fotoAdres);
//foto isimli nesneyi sahne üzerindeki foto_mc isimli
//Movie Clip'in içerisine ekliyoruz.
foto_mc.addChild(foto);
}

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

Harici Görsel ve Swf Dosyaları İle Çalışmak

Erol Demirer — Sat, 06 Feb 2010 23:17:28 +0000

Uygulamalarımızı oluştururken daha güzel görünmeleri için imajlar kullanırız. Fakat kullandığımız imajlar (hele ki sayısı fazla ise) dosya boyumunu oldukça arttırır. Dosya boyutunun artması da uygulamamızın web üzerinde geç yüklenmesine ve açılmasına sebep olacaktır. Uygulamamızda kullanacağımız imajları dışarıdan yükleyerek dosya boyutumuzu düşürebilir ve uygulamamızın yüklenmesini hızlandırabiliriz. Dışarıdan yüklediğimiz dosyalarında alt özelliklerine (alpha, x ve y konumu, ölçekleme, rotation vb.) özelliklerine müdahale etme şansımız vardır.

Dışarıdan dosya yüklerken ilk olarak imajları ve çalışma dosyamızı kaydedeceğimiz bir klasör oluşturalım. Oluşturduğumuz bu klasör içerisine çalışma dosyamızı kaydedelim ve imaj dosyalarımız için Gorsel isimli bir klasör oluşturalım ve görselimizi bu klasörün içerisine yerleştirelim. Bu işlemleri yaparken herhangi bir sorunla karşılaşmamak için dosya isimlerinde türkçe karakter kullanmamaya özen gösterelim. Artık geriye işin kodlama kısmı kaldı. Yapacağımız işlemleri kısaca aıklayacak olursak, imajları dışarıdan yüklemek için Bu işlemleri gerçekleştirdikten sonra bir dışarıdan yükleme işlemini yapması için bir Loader objesi, dosya adresini belirtmek için de bir URLRequest objesi tanımlayacağız. Son olarakta addChild metodu ile görseli sahneye ekleyeceğiz. Actions panelini açarak aşağıdaki kodları yazmaya başlayalım. Swf dosyaları içinde aynı kodları kullanabiliriz. Sadece dosya adını değiştirmemiz yeterli olacaktır.

//loader objemizi tanımlıyoruz.
var gorsel:Loader = new Loader();
//Dosya yolunu belirtmek için URLRequest objemizi tanımlıyoruz.
var yukle:URLRequest = new URLRequest("Gorsel/fotograf.jpg");
//Loader objesinin dosyayı nereden yükleyeceğini gösteriyoruz.
gorsel.load(yukle);
//addChild metodu ile görseli sahneye ekliyoruz.
addChild(gorsel);

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

Harici Ses Dosyaları İle Çalışarak mp3 Çalar Yapımı

Erol Demirer — Fri, 05 Feb 2010 23:12:57 +0000

Bu uygulamamızda basit bir mp3 çalar yapacağız. Uygulamada kullanacağımız ses dosyalarını harici olarak yükleyeceğiz. Böylece uygulamamızın dosya boyutunu minimumda tutacağız. Harici dosyalarla çalışmanın güzel yanı oluşturduğumuz uygulamada değişiklik yapmak istediğimizde kaynak dosyaya ihtiyaç duymadan kullandığımız dosyaları değiştirdiğimizde uygulamanın da yapılan değişiklikleri otomatik olarak almasıdır. Bu değişiklikleri yaparken dikkat etmemiz gereken şey ise harici kullandığımız dosyaların isimlerinin aynı kalması gerektiğidir. Zira uygulamamız dosyaları dışarıdan yüklerken verdiğimiz dosya isimlerine göre yükleme yapmaktadır.

İlk olarak calismamizi kaydedeceğimiz bir klasör oluşturalım, sonra da bu klasörün içine Sarkilar isimli bir klasör daha oluşturalım ve uygulamada kullanacağımız şarkıları bu klasörün içerisine kopyalayalım. Flash programına geri dönelim ve yeni bir döküman oluşturalım. Çalışmaya başlamadan önce dökümanımızı oluşturduğumuz klasörün içerisine kaydedelim.

Sonrada Window menüsünün altından Components sekmesine tıklayarak Components paletini açalım ve User Interface seçeneğinin altında bulunan ComboBox bileşenini tutup sahneye sürükleyelim. Sahne üzerine yerleşen bileşeni seçelim ilk olarak genişliğini 150 piksel olarak değiştirelim ve Instance Name kısmına secici_mc yazalım. Şarkı listemiz burada görünecek ve listeden seçilen şarkının çalmasını sağlayacağız. Normalde Componentler ile ilgili ayarları Window menüsünün altında bulunan Component Inspector panelini kullanarak yaparız. Sahne üzerindeki bileşeni seçtikten sonra Component Inspector panelinde yapabileceğimiz değişiklikleri görebiliriz. Bu örnek için konuşacak olursak normalde şarkı listemizi panelde bulunan dataProvider sekmesini kullanarak girebiliriz. Fakat uygulamada bu paneli kullanmak yerine kodlama ile bu bilgileri gireceğiz.

Componenti eklediğimize göre, sesleri açıp kapatmak için bir Movie Clip ekleyelim ve Instance Name kısmına acKapa_mc yazalım(Ben örnekte animasyonlu bir Movie Clip kullandım ve ses kısmak için tıklandığında üzerinde bir hoparlörün üzerinde X işareti çıkıyor yani film klibini ikinci kareye gönderiyor tekrar tıklandığında da ilk kareye göndererek normal görünmesini sağlıyor). Sesi arttırıp, azaltmak içinde sahne üzerine iki tane buton ekleyelim ve Instance Name kısımlarına sesArttir_btn ve sesAzalt_btn yazalım. Eğer isterseniz ses seviyesini göstermek için bir tane animasyonlu Movie Clip oluşturup Instance Name kısmına gosterge_mc yazabilirsiniz.

ActionScript 3.0 içerisindeki ses yapısı bir kaç farklı bölümden oluşmaktadır. Bu bölünme aslında olaylara daha detaylı şekilde müdahale edebilmemizide sağlıyor. Bu örnekte kullanacağımız sınıflar ve özellikleri aşağıdaki gibidir.

Sound: Sound sınıfı temel olarak dosyaları yüklemeyi, oynatmayı, yükleme durumu ile ilgili bilgi almaya yarar.

SoundChannel: SoundChannel sınıfı her ses için ayrı bir ses kanalı oluşturmaya ve hepsini ayrı ayrı kontrol edebilmeye yarar. Örneğin arkplanda birden fazla sesin çalması gibi.

SoundMixer: SoundMixer sınıfı ile tüm seslerin kontrolünün yapılması mümkündür.

SoundTransform: SoundTransform sınıfı ile sesin seviyesini hangi hoparlörden çalınacağı gibi ayarları yapabiliriz.

Son olarak kullanacağımız bir diğer sınıf URLRequest sınıfı olacak. URLRequest sınıfını belirteceğimiz adreste bulunan dosya ile bağlantı kurmakta ve oluşturacağımız Sound sınıfına ait objelerin bu adresi kullanarak ses dosyalarını yüklemelerinde kullanacağız. URLRequest sınıfını localde ya da hostta bulunan dosyalara ulaşmakta kullanabileceğimiz gibi web üzerinde herhangi bir adreste bulunan dosyaları yüklemek içinde kullanabiliriz.

Yukarıdaki sınıfları kullanarak ses dosyalarını dışarıdan yükleyecek, ses düzeylerini değiştirecek, parçaları duraklatıp tekrar çalabileceğiz.

Eğer sahne üzerinde gerekli olan nesneleri oluşturduysak kodları yazmak için yeni bir katman oluşturup aşağıdaki kodları yazmaya başlayabiliriz.

Örnekte SarkiAdi olarak geçen bölümleri kendi listemizdeki şarkı isimleri ile değiştirelim.

//film klibine buton özelliği kazandırıyoruz.
acKapa_mc.buttonMode = true;
//sayısal bir değişken oluşturuyoruz.
var a:Number = 0;

//Sound sınıfıına ait objeler oluşturuyoruz.
var sarki1:Sound = new Sound();
//Şarkıların yükleneceği adresleri URLRequest sınıfını kullanarak belirtiyoruz.
//SarkiAdi.mp3 yazan yerleri dosya isimleriyle değiştirelim. Ben 8 parçalık bir liste hazırladım.
//Eğer daha az ya da daha fazla sayıda parça olmasını istiyarsanız seçenekleri siilip arttırabilirsiniz.
var adres1:URLRequest= new URLRequest("Sarkilar/SarkiAdi.mp3");
//oluşturduğumuz objeye nereden yükleme yapacağını belirliyoruz.
sarki1.load(adres1);

//yukarıdaki işlemleri listedeki tüm şarkılar için uyguluyoruz.
var sarki2:Sound = new Sound();
var adres2:URLRequest= new URLRequest("Sarkilar/SarkiAdi.mp3");
sarki2.load(adres2);

var sarki3:Sound = new Sound();
var adres3:URLRequest= new URLRequest("Sarkilar/SarkiAdi.mp3");
sarki3.load(adres3);

var sarki4:Sound = new Sound();
var adres4:URLRequest= new URLRequest("Sarkilar/SarkiAdi.mp3");
sarki4.load(adres4);

var sarki5:Sound = new Sound();
var adres5:URLRequest= new URLRequest("Sarkilar/SarkiAdi.mp3");
sarki5.load(adres5);

var sarki6:Sound = new Sound();
var adres6:URLRequest= new URLRequest("Sarkilar/SarkiAdi.mp3");
sarki6.load(adres6);

var sarki7:Sound = new Sound();
var adres7:URLRequest= new URLRequest("Sarkilar/SarkiAdi.mp3");
sarki7.load(adres7);

var sarki8:Sound = new Sound();
var adres8:URLRequest= new URLRequest("Sarkilar/SarkiAdi.mp3");
sarki8.load(adres8);
//Sarkilari açıp kapatabilmek için SoundChannel objesi oluşturuyoruz
var sesKanal:SoundChannel = new SoundChannel();
//sesi arttırıp, azaltmak için SoundTransform objesi oluşturuyoruz.
var sesDuzeyi:SoundTransform = new SoundTransform();

//yeni bir dizi oluşturuyoruz. Yalnız diziyi oluştururken () operatörleri yerine dizi elemanlarını [] operatörlerinin arasına yazıyoruz.
//elemanların içerisinde iki farklı değer olacağı içinde {} operatörlerinin arasına elemanları ve değerlerini yazıyoruz.
//Sarki Adi yazan yerlere klasör içerisine koyduğumuz şarkıların isimlerini girelim.
var sarkilar:Array = [
{label:"Şarkı Seçiniz", data:"0"},
{label:"Sarki Adi", data:"1"},
{label:"Sarki Adi", data:"2"},
{label:"Sarki Adi", data:"3"},
{label:"Sarki Adi", data:"4"},
{label:"Sarki Adi", data:"5"},
{label:"Sarki Adi", data:"6"},
{label:"Sarki Adi", data:"7"},
{label:"Sarki Adi", data:"8"},
];
//ComcoCox bileşenine dizi ile oluşturduğumuz elemanların değerlerini ekliyoruz.
//böylece sahne üzerindeki bileşende şarkılar görünebilecek.
secici_mc.dataProvider = new DataProvider(sarkilar);

//sesi azaltmak için oluşturduğumuz butona olay dinleyicimizi atıyoruz.
sesAzalt_btn.addEventListener(MouseEvent.CLICK, sesAzalt);
function sesAzalt(e:MouseEvent) {
//sesArttir butonunun mouse özelliklerini açıyoruz.
sesArttir_btn.mouseEnabled = true;
//ses düzeyi 0'dan büyükse
if (sesDuzeyi.volume>0) {
//butona her tıklandığında 0.1 değerinde sesin azalmasını sağlıyoruz.
sesDuzeyi.volume -= 0.1;
//sesKanal objesinin soundTransform özelliğini kullanalar sesDuzeyi seviyesini
//sesKanala atıyoruz.
sesKanal.soundTransform = sesDuzeyi;
//nesnenin bir kare ileri gitmesini sağlıyoruz.
gosterge_mc.nextFrame();
}
}

//sesi arttırmak için butona olay dinleyici atıyoruz.
sesArttir_btn.addEventListener(MouseEvent.CLICK, sesArttir);
function sesArttir(e:MouseEvent) {
sesAzalt_btn.mouseEnabled=true;
//ses düzeyi 1'den küçükse ses düzeyini 0.1 değerinde arttırıyoruz.
if (sesDuzeyi.volume<1) {
sesDuzeyi.volume += 0.1;
sesKanal.soundTransform = sesDuzeyi;
gosterge_mc.prevFrame();
}
}

//sahneye atadığımız olay dinleyici ile sesDuzeyinin volum seviyesini dürekli kontrol ederek
//butonların fare özelliklerini volume seviyesine göre açıp kapatıyoruz.
stage.addEventListener(Event.ENTER_FRAME, kontrolEt);
function kontrolEt(e:Event) {
if (sesDuzeyi.volume>=1) {
sesArttir_btn.mouseEnabled = false;
sesAzalt_btn.mouseEnabled = true;
} else if (sesDuzeyi.volume<=0.1) {
sesArttir_btn.mouseEnabled = true;
sesAzalt_btn.mouseEnabled = false;
}
}

//Combobox bileşenine olay dinleyici atıyoruz.
//Olay dinleyicimiz bileşende gerçekleşen değişiklikleri kontrol edecek.
secici_mc.addEventListener(Event.CHANGE, sarkiCal);
function sarkiCal(e:Event) {
//oluşturduğumuz dizide verdiğimiz data değerine göre seKanal objesinin hangi şarkıyı
//çalacağını belirliyoruz. Herhangi bir karışıklığa sebebiyet vermemk içinde
//ilk olarak çalışan tüm Sarkilari kapatmak için SoundMixer sınıfını kullanıyoruz.
//Ben 8 parçalık bir liste hazırladım.
//Eğer daha az ya da daha fazla sayıda parça olmasını istiyarsanız seçenekleri silip arttırabilirsiniz.
if (secici_mc.selectedItem.data==0) {
SoundMixer.stopAll();
} else if (secici_mc.selectedItem.data==1) {
SoundMixer.stopAll();
sesKanal=sarki1.play(0,1);
sesKanal.soundTransform = sesDuzeyi;
} else if (secici_mc.selectedItem.data==2) {
SoundMixer.stopAll();
sesKanal=sarki2.play(0,1);
sesKanal.soundTransform = sesDuzeyi;
} else if (secici_mc.selectedItem.data==3) {
SoundMixer.stopAll();
sesKanal=sarki3.play(0,1);
sesKanal.soundTransform = sesDuzeyi;
} else if (secici_mc.selectedItem.data==4) {
SoundMixer.stopAll();
sesKanal=sarki4.play(0,1);
sesKanal.soundTransform = sesDuzeyi;
} else if (secici_mc.selectedItem.data==5) {
SoundMixer.stopAll();
sesKanal=sarki5.play(0,1);
sesKanal.soundTransform = sesDuzeyi;
} else if (secici_mc.selectedItem.data==6) {
SoundMixer.stopAll();
sesKanal=sarki6.play(0,1);
sesKanal.soundTransform = sesDuzeyi;
} else if (secici_mc.selectedItem.data==7) {
SoundMixer.stopAll();
sesKanal=sarki7.play(0,1);
sesKanal.soundTransform = sesDuzeyi;
} else if (secici_mc.selectedItem.data==8) {
SoundMixer.stopAll();
sesKanal=sarki8.play(0,1);
sesKanal.soundTransform = sesDuzeyi;
}
}

//çalan şarkının nerede duraklatıldığını bulabilmek için bir değişken oluşturuyoruz.
var pausePozisyon:Number;
//sesi açıp kapatmak için oluşturduğumuz film klibine olay dinleyici atıyoruz.
acKapa_mc.addEventListener(MouseEvent.CLICK, acKapa);
function acKapa(e:MouseEvent) {
//eğer a değişkeninin değeri sıfırsa
if (a==0) {
//sesKanal objesinin pozisyonunu alarak değişkenimize değer olarak atıyoruz.
pausePozisyon=sesKanal.position;
//objenin ses seviyesini sesDuzeyi objesinden gelen değere eşitliyoruz ki
//sesi tekrar açtığımızda şarkı aynı tonda çalmaya devam etsin.
sesKanal.soundTransform = sesDuzeyi;
//sesKanal objesini durduruyoruz.
sesKanal.stop();
//sesin kısıldığını belirtmek için film klibini ikinci kareye gönderiyoruz.
acKapa_mc.gotoAndStop(2);
//a değişkeninin değerini 1'e eşitliyoruz.
a=1;
//film klibine tıklandığında a değişkeninin değeri 1 ise
} else if (a==1) {
//film klibini birinci kareye gönderiyoruz
acKapa_mc.gotoAndStop(1);
//ComcoCoxtan gelen data değerine göre hangi şarkının çalınacağını belirliyoruz.
//Ben 8 parçalık bir liste hazırladım.
//Eğer daha az ya da daha fazla sayıda parça olmasını istiyarsanız seçenekleri siilip arttırabilirsiniz.
if (secici_mc.selectedItem.data==1) {
//sesKanal objesine play komutunu verdiğimizde çalmaya başladığı yeri
//pausePozisyon değişkenimizle belirliyoruz.
sesKanal=sarki1.play(pausePozisyon);
//ses seviyesinin aynı şekilde devam etmesi için de sesDuzeyi'ni kullanıyoruz.
sesKanal.soundTransform = sesDuzeyi;
} else if (secici_mc.selectedItem.data==2) {
sesKanal=sarki2.play(pausePozisyon);
sesKanal.soundTransform = sesDuzeyi;
} else if (secici_mc.selectedItem.data==3) {
sesKanal=sarki3.play(pausePozisyon);
sesKanal.soundTransform = sesDuzeyi;
} else if (secici_mc.selectedItem.data==4) {
sesKanal=sarki4.play(pausePozisyon);
sesKanal.soundTransform = sesDuzeyi;
} else if (secici_mc.selectedItem.data==5) {
sesKanal=sarki5.play(pausePozisyon);
sesKanal.soundTransform = sesDuzeyi;
} else if (secici_mc.selectedItem.data==6) {
SoundMixer.stopAll();
sesKanal=sarki6.play(pausePozisyon);
sesKanal.soundTransform = sesDuzeyi;
} else if (secici_mc.selectedItem.data==7) {
sesKanal=sarki7.play(pausePozisyon);
sesKanal.soundTransform = sesDuzeyi;
} else if (secici_mc.selectedItem.data==8) {
sesKanal=sarki8.play(pausePozisyon);
sesKanal.soundTransform = sesDuzeyi;
}
//a değişkeninin değerini 0 olarak değiştiriyoruz.
a=0;
}
}

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

Örnek Adına Göre Sürükle-Bırak Eylemi

Erol Demirer — Fri, 05 Feb 2010 23:09:07 +0000

Hazır sürükle-bırak ile ilgili örneklere başlamışken bir tane daha eklemek istedim. Bu örnekteki sürükle-bırak eylemi sembollere verdiğimiz Instance Name (Örnek adı) karakterlerine göre işlem yapıyor. Avantajının ne olduğunu merak eden olabilir. Hemen söyleyeyim. Sahne üzerinde çok sayıda nesne var ve bunlardan bazılarına sürükle-bırak eylemi uygulanarak doğru yere gidip gitmediğini kontrol ettireceğiz. Doğru yere gittiğinde belli bir noktada kalacak, gitmediyse başlangıç noktasına geri dönecek. Açıklamasını yazarken bile yoruldum ki kodlarını yazmaya çalıştığımızda hepsine tek tek olay dinleyici eklemek oldukça zor olacaktır.

Yapacağımız örnekte ise sadece iki olay dinleyici kullanıp, 3 tane değişken tanımlayacağız. Yani işin kodlama tarafını minimuma indireceğiz. Güzel tarafı ise sonrasında sahne üzerine nesne eklediğimizde ek kod yazmaya ya da tam tersi nesne sayısını eksilttiğimizde kod eksiltmeye gerek kalmaması.

Yapacağımız işlemin mantığınına gelecek olursak, sahne üzerinde 10 tane sürükle-bırak eylemi uygulanacak nesne ve bu nesnelerin 10 tane de karşılığı olsun. Toplamda sahne üzerinde 20 nesnemiz olacak. Örneğimizde nesnelere verdiğimiz örnek isimlere göre işlem yapacağımıza göre sürükle-bırak eyleminin uygulanacağı nesnelere Instance Name (Örnek Adı) olarak a01, a02, a03 … isimlerini verelim. İsimlerin sonlarına _mc ekini kullanmaya gerek yok. En azından yazacağımız kodda biraz daha tasaruf edelim. Bu nesnelerin karşıklarını da b01, b02, b03 … olarak adlandıralım. Yalnız isimlendirmeleri yaparken a01 nesnesinin doğru karşılığı b01 nesnesi olsun ki herhangi bir karışıklığa sebebiyet vemeyelim. Evet sahne üzerinde yapacaklarımız bu kadar. Gerisini ActionScript ile halledeceğiz.

startDrag metodunu uygulayacağımız nesneleri seçeerken substr metodunu kullanacağız. substr metodunun çalışma şekli şu şekildedir: substr(başlangıç indeksi:Number =0, uzunluk:Number = 3):String. Örnekte nesnenin ismini kontol ettiğimizi varsayarsak ilk karakterden başlayarak 3 karakteri alıp değeri String olarak geri döndürecektir(Saymaya 0(sıfır)’dan başladığı için birinci karakterin karşılığı sıfırdır. Kodu kullanırken parantez içerisine gireceğimiz değerlerin ilki kaçıncı karakterden kontrol etmeye başlayacağını, ikincisi ise kaç karakter kontrol edeceğini belirtiyor. Yani oluşturulan dizenin alt bizim belirlediğimiz alt dizesini geri döndürür. Yapacağımız örnekte ilk olarak nesneler verdiğimiz isimlerin ilk karakterini kontrol ederek startDrag metodunu uygulayacak, stopDrag eylemini uyguladığında ise nesnenin karşılığını bulup bulmadığını son 2 karakteri kontrol ettirerek bulacağız.

İlk bakıldığında yukarıda anlattıklarım biraz karışık gelmiş olabilir. Fakat bir kaç örnek üzerinde uyguladıktan sonra mantığını çözmek o kadar da zor değil. Evet sözü fazla uzatmadan çalışmamızda yeni bir katman oluşturup adını Action olarak değiştirelim ve Actions panelini açarak aşağıdaki kodları yazmaya başlayalım.

//nesneler sürüklenmeye başladığında başlangıçtaki x ve y konumlarını almak için
//iki değişken tanımlıyoruz.
var xKonum,yKonum:Number;
//Instance Name kısmına yazdığımız isimlerin son 2 karakterini almak için
//bir değişken tanımlıyoruz.
var numara:String;

//olay dinleyiciyi sahneye atıyoruz.
stage.addEventListener(MouseEvent.MOUSE_DOWN,surukle);
function surukle(e:MouseEvent) {
//Nesnenin x konumunu xKonum değişkenine, y konumununun değerini
//yKonum değişkenine değer olarak atıyoruz
xKonum=e.target.x;
yKonum=e.target.y;
//setChildIndex metodu ile olayın gerçekleştiği nesneyi sahne üzerindeki
//sıralamada en üste taşıyoruz.
setChildIndex(MovieClip(e.target),numChildren-1);
//eğer olayın gerçekleştiği nesnenin Örnek Adının ilk karakterinin a olup olmadığını
//kontrol ediyoruz ve String veri türüne dönüştürüyoruz.
if (String(e.target.name).substr(0,1)=="a") {
//numara değişkenine de olayın gerçekleştiği nesnenin örnek adının
//2. ve 3. karakterlerini değer olarak atıyoruz.
numara = (String(e.target.name).substr(1,2));
//e.target metodu ile olayın gerçekleştiği nesneyi sürüklemeye başlıyoruz.
e.target.startDrag();
trace(numara);
}
}

stage.addEventListener(MouseEvent.MOUSE_UP,birak);
function birak(e:MouseEvent) {
//nesneyi bırakıyoruz.
e.target.stopDrag();
//sürüklenen nesnenin doğru yere temas edip etmeğini kontrol ediyoruz.
//kontrol ederken hitTestObject metodunu kullanıyoruz.
//parantez içerisindeki parametreye temas edeceği nesnenin örnek adını yazıyoruz.
//root ile anadizine çıkıyoruz ve nesnenin örnek adının ilk karakterini tırmak işaretleri
//içerisine yazıyoyoruz ve + operatörü ile de numara değişkeninin değerini ekliyoruz.
//sonuç olarak geriye dönen değer b01, b02, b03 vb. oluyor. Yani sahne üzerindeki nesnelerimizin
//örnek adlarına karşılık geliyor.
if (e.target.hitTestObject(root["b"+numara])) {
//sürüklenen nesne doğru yere geldiği için x ve y konumlarını temas ettiği nesnenin
//x ve y konumuna eşitliyoruz.
e.target.x=root["b"+numara].x;
e.target.y=root["b"+numara].y;
//x ve y konumları eşitlendikten sonra nesnenin tekrar sürüklenmesi için
//dare işlevlerini iptal ediyoruz.
e.target.mouseEnabled=false;
//eğer nesne doğru yere temas etmezse çalışacak kod bloğunu yazıyoruz.
//olumlu koşuldan tek farkı baştaki ! operatörüdür. Koşulun başına ! operatörü
//eklendiği takdirde koşul olumsuza çevrilmiş olur.
} else if (! e.target.hitTestObject(root["b"+numara])) {
//nesneyi x ve y ekseninde, başlangıç noktasına geri döndürmek için
//oluşturduğumuz değişkenleri kullanıyoruz.
e.target.x=xKonum;
e.target.y=yKonum;
}
}

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

Timeline Kontrolleri

Erol Demirer — Thu, 04 Feb 2010 23:48:39 +0000

Geliştirdiğimiz uygulamalarda nesnelerin belli bir kareye geldiklerinde durmalarını/hareket etmelerini, ya da animasyonumuzun bir butona tıklandığında başlatılmasını isteyebiliriz. Uygulamamız için oluşturduğumuz nesneleri istediğimiz gibi kontrol edemezsek ortaya çıkan sonuçtan memnun kalmamamız oldukça yüksek bir ihtimaldir.

Örneğin toplamda 150 frame’den oluşan bir animasyonumuz var ve 50. frame’e geldiğinde durmasını istiyorsak timeline üzerinde 50. frame’i seçip F6 ile Keyframe ekledikten sonra Actions paneline stop(); yazarsak animasyonumuz 50. frame’e geldiğinde duracaktır. Eğer tam tersi olsun yani hareket etmesini istersek stop(); yerine play(); yazmamız yeterli olacaktır. Bu işlemleri bir buton aracılığı ile yapmak istersek aşağıdaki kodlar işimizi görecektir.

baslat_btn.addEventListener(MouseEvent.CLICK, animasyonuBaslat);
function animasyonuBaslat(e:MouseEvent){
play();
}

durdur_btn.addEventListener(MouseEvent.CLICK, animasyonuDurdur);
function animasyonuDurdur(e:MouseEvent){
stop();
}

Animasyonlarımızı nasıl başlatıp durdurabileceğimizi öğrendik. Eğer butona tıklandığında animasyonun olduğu frame’den değilde farklı bir frame’den başlamasını ya da farklı bir frame’e gidip durmasını istersek gotoAndPlay() ve gotoAndStop() metotlarını kullanabiliriz. kullanımları aynı play ve stop metodları gibidir. Hangi frame’e gidilmesi gerektiği de parantez içerisinde yazılır.

git_btn.addEventListener(MouseEvent.CLICK, gitVeBasla);
function gitVeBasla(e:MouseEvent){
gotoAndPlay(50);
}

dur_btn.addEventListener(MouseEvent.CLICK, gitVeDur);
function gitVeDur(e:MouseEvent){
gotoAndStop(25);
}

Animasyonumuzun butona her tıklandığında ya da animasyon içerisinde gerçekleşecek olaylara göre birer frame ileri ya da geri gitmesini istersek prevFrame(); ve nextFrame(); metotlarını kullanmamız gerekecektir. Genellikle fotoğraf galerilerinde çok kullandığım bir yöntemdir. Kullanımı aşağıdaki gibidir.

ileriGit_btn.addEventListener(MouseEvent.CLICK, birKareIleri);
function birKareIleri(e:MouseEvent){
nextFrame();
}

geriGit_btn.addEventListener(MouseEvent.CLICK, birKareGeri);
function gitVeDur(e:MouseEvent){
prevFrame();
}

Frame’ler ile ilgili olarak kullanacağımız son metot ise Frame Etiketleridir. Aynı sembollerde olduğu gibi frame’leride isimlendirebiliriz. Frame’lere etiket verebilmek için ilgili frame’i seçtikten sonra Properties panelinde Frame Label kutucuğunu kullanılır. Frame’lere etiketlendirdikten sonra ilgili karenin hemen yanına kırmızı bir bayrak belirecek ve sağ tarafında frame etiketi yazacaktır. Frame etiketleri genellikle gotoAndPlay() ve gotoAndStop() metodları ile kullanılırlar. Parantez içerisine frame etiketi girilir.

deneme_btn.addEventListener(MouseEvent.CLICK, etiketeGit);
function etiketeGit(e:MouseEvent){
gotoAndPlay("baslangic");
}

Yukarıdaki örneklerin tümünda animasyonlarımızı Ana Sahne (Scene) ‘ni Timeline’ı üzerinde gerçekleştirdiğimizde geçerli olacaktır. Eğer herhangi bir nesneye aynı şekilde müdahale etmek istersek yapmamız gereken tek şey metottan önce nesnenin ismini yazmaktır.

baslat_btn.addEventListener(MouseEvent.CLICK, baslat);
function baslat(e:MouseEvent){
deneme_mc.play();
}

durdur_btn.addEventListener(MouseEvent.CLICK, durdur);
function durdur(e:MouseEvent){
deneme_mc.stop();
}

ilerlet_btn.addEventListener(MouseEvent.CLICK, kareyeGit);
function kareyeGit(e:MouseEvent){
deneme_mc.gotoAndStop(12);
}

Flash CS4 ve AS 3.0 Mesafe ve Açı Hesaplama

Erol Demirer — Thu, 04 Feb 2010 22:29:39 +0000

Bu örnekte sahne üzerinde bulunan iki nesnenin birbirine olan mesafesini ve açı değerini hesaplayacağız. Bu örrneği yapabilmek için Flash CS4 ve Flash Player 10 sürümü gerekmektedir. Ben örnekte sürekli birbirlerini kovalayan Tom ve Jerry karakterlerini kullandım. Örnekte kullanmak üzere sahne üzerine iki film klibi ekleyelim ve Proporties panelinde Instance Name kısımlarına kedi_mc ve fare_mc yazalım. Mesafe ve açı değişkenlerinden gelen verileri yazdırmak için bir dinamik text alanı oluşturalım ve Instance Name kısmına bilgi_txt yazalım. Son olarakta sahneye bir buton ekleyelim ve Instance Name kısmına tekrar_btn yazalım. Böylece butona her tıklandığında nesnelerin yerleri değişecektir.

İki nesnenin birbirine olan mesafesini hesaplamak için Math.sqrt() metotunu, açıyı hesaplamak içinse Math.atan2() metotunu kullanacağız.

Yukarıda belirttiğim tüm nesneleri sahneye eklediysek, artık kodlamaya geçebiliriz. Çalışma için gerekli olan kodlar aşağıdadır.

tekrar_btn.addEventListener(MouseEvent.CLICK, tekrarla);
function tekrarla(e:MouseEvent) {
kedi_mc.x=150+Math.random()*450;
kedi_mc.y=150+Math.random()*300;
/* Nesneler arası mesafeleri hesaplamak için,
elde olan ikişer x ve y konumlarını değerlerini teke dşürüyoruz.
Bu işlemi bir fonksiyonun içerisinde gerçekleştirerek
işleme süreklilik kazandırıyoruz.
*/
function mesafe(x1:Number, y1:Number, x2:Number, y2:Number):Number {
var farkX:Number=x1-x2;
var farkY:Number=y1-y2;
//Sonra değerlerin karekökünü alınarak hesaplama işlemi sonlandırılır.
var fark:Number=Math.sqrt(farkX*farkX+farkY*farkY);
return fark;
}

var fark1:Number=mesafe(fare_mc.x,fare_mc.y,kedi_mc.x,kedi_mc.y);
//Nesnelerden değerleri aldık ve bu değerleri teke düşürdük.
//yani x ve y mesafelerini hesapladık. Radyan hesabını yapabilmek için
//Math.atan2() metodunu kullanıyoruz. Burada dikkat edilecek nokta ilk önce "y" değeri
//sonra "x" değerinin girilmesi gerektiğidir.
var aciRadyan:Number = Math.atan2((kedi_mc.y-fare_mc.y),(kedi_mc.x-fare_mc.x));
//Radyan olarak aldığımız değer açıya çeviriyoruz.
var aciDerece:Number=180*aciRadyan/Math.PI;
//geriye dönen açı değerinde 180 dereceden sonrası - olarak görüneceğinden dolayı
//değere 360 ekleyerek 180 ve sonrassı açılarıda dahil ediyoruz.
if (aciDerece<0) {
aciDerece+=360;
}
//alınan tüm değerleri dinamik metin alanına yazdırıyoruz.
bilgi_txt.text="Tom'un Jerry'ye mesafesi "+(Math.floor(fark1)).toString() + " piksel ve " + (Math.floor(360 - aciDerece)).toString() + " derecedir.";

//aci_txt.text = ((Math.floor(360 - aciDerece)).toString() + " derece");
//nesnelerin gelen açı değerine göre sahnede dönmelerini sağlıyoruz.
kedi_mc.rotation=aciDerece;
fare_mc.rotation=aciDerece-180;
//nesnelerin ters görünmemesi için nesneleri "x" ekseninde döndürüyoruz.
if (aciDerece>90||aciDerece<270) {
kedi_mc.rotationX=180;
fare_mc.rotationX=0;
}
if (aciDerece<90||aciDerece>270) {
kedi_mc.rotationX=0;
fare_mc.rotationX=180;
}
}

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

AS 3.0 Bitmap ve BitmapData Sınıfını Kullanarak Webcam Üzerinden Görüntü Almak

Erol Demirer — Thu, 04 Feb 2010 22:24:14 +0000

Bu çalışmada ilk bilgisayarımızda bulunan webcami kullanarak görüntü alacağız sonrasında da aldığıımız bu görüntünün kopyasını yan tarafa çizdireceğiz. Bu işlemleri yaparken webcamden görüntüyü almak için Camera sınıfını, aldığımız görüntüyü izleyebilmek içinde Video sınıfını kullanacağız. Videodan anlık görüntüler alabilmek içinse Bitmap ve BitmapData sınıflarını kullanacağız

DisplayObjects sınıfının bir alt sınıfı olan Bitmap sınıfı görüntüleri görüntülemek için kullanılır.Bitmap örneği oluşturulduktan sonra, sahne alanında oluşturulması gereken BitmapData nesnesi için bir sarıcı olarak düşünülebilir. BitmapData sınıfı yüklenen veya dinamik olarak oluşturulan bir bitmap görüntüsü içerisindeki piksellerin fotoğrafik anlık görüntüsüne benzetilebilir.

Sahne alanına buton olarak kullanacağımız bir MovieClip oluşturalım ve Instance Name kısmına gotuntu_mc yazalım. Sonrada aşağıdaki kod bloğunu kullanarak bilgisayarımızda bulunan webcam üzerinden görüntü almaya başlayalım.

//goruntu almak için gerekli sınıfları import ediyoruz
import flash.display.Bitmap;
import flash.display.BitmapData;

//webcamden görüntüyü alabilmek için değişkenlerimizi tanımlıyoruz.
var kamera:Camera=Camera.getCamera();
//aldığımız görüntüyü izleyebilmek için değişkenimizi tanımlıyor ve boyutlarını belirliyoruz.
var video:Video=new Video(280,200);
//webcamden aldığımız görüntüyü videoya aktarıyoruz.
video.attachCamera(kamera);
//videonun x ve y konumunu belirliyoruz
video.x=60;
video.y=20;
//videoyu sahneye ekliyoruz
addChild(video);

//Bitmap ve BitmapData sınıfını kullanarak video görüntüsünün
//bir kopyasını alıyoruz ve konumunu belirliyoruz.
var bitmapData:BitmapData=new BitmapData(video.width,video.height);

var bitmap:Bitmap=new Bitmap(bitmapData);
bitmap.x=360;
bitmap.y=20;
addChild(bitmap);

goruntu_mc.buttonMode=true;
goruntu_mc.addEventListener(MouseEvent.CLICK,goruntuYakala);
//butona tıklandığında bitmapDatayı kullanarak alınan resmi videonun yan tarafına çizdiriyoruz.
function goruntuYakala(e:MouseEvent):void {
bitmapData.draw(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 Nesneyi Bir Eksenin Etrafında Döndürmek

Erol Demirer — Wed, 03 Feb 2010 22:17:31 +0000

ActionScript kullanarak nesneleri belirli bir eksenin etrafında döndürebiliriz. Bunu yapabilmek için Math sınıfının Math.cos ve Math.sin metotlarını kullanacağız. Çalışmada kullanacağımız tüm nesneleri kodlama ile çizeceğiz, bu yüzden sahne üzerine herhangi bir nesne çizmemize gerek yok.

Math.cos ve Math.sin metotlarının yaptıkları işlemler aşağıda belirtilmiştir.

cos ()
Kosinüsün radyan olarak açı değerini, -1.0 ile 1.0 arasında değişen değerler olarak geri döndürür.
trace(Math.cos(0)); // 1

sin ()

Sinüsün radyan olarak açı değerini, -1.0 ile 1.0 arasında değişen değerler olarak geri döndürür.
trace(Math.sin(90)); // 0.89

Actions panelini açarak aşağıdaki kodları yazmaya başlayabiliriz.

//derece isimli sayısal bir değişken oluşturup nesnenin dönüş açısı için kullanacağız
var derece:Number = 1;
//yaricap isimli bir değişken oluşturuyoruz
var yaricap:Number = 150;

//cember isimli MovieClip sınıfına ait bir değişken oluşturuyoruz
var cember:MovieClip = new MovieClip();
//cemberin çizgi stilini belirliyoruz
cember.graphics.lineStyle(1,0x000000);
//cemberimizi çiziyoruz ilk rakam x, ikinci rakam y koordinatı, üçüncü rakam ise cemberin yaricapini belirler
cember.graphics.drawCircle(0,0, yaricap);
addChild(cember);

var daire:MovieClip = new MovieClip();
daire.graphics.beginFill(0xFF0000);
daire.graphics.drawCircle(0,0,35);
daire.graphics.endFill();

cember.addChild(daire);

addEventListener(Event.ENTER_FRAME, basla);
function basla(e:Event) {
derece+=10;
cember.x = stage.stageWidth/2;
cember.y = stage.stageHeight/2;
var radyan:Number = derece * Math.PI / 180;
var xKonum = Math.cos(radyan) * yaricap;
var yKonum = Math.sin(radyan) * yaricap;
daire.x = xKonum;
daire.y = yKonum;
}

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

Timer ve Graphics Sınıfı İle Çizim Yapmak

Erol Demirer — Wed, 03 Feb 2010 22:14:39 +0000

ActionScript’in çizim apisini kullanarak bir daire çizeceğiz. Çizimi gerçekleştirirkense lineTo ve lineStyle metotlarını kullanacağız. lineTo metodu düz çizgiler çizmemize, lineStyle ise çizdiğimiz çizgilerin boyutu, rengi, alfası gibi özelliklerini

belirlememize yardımcı olur. lineTo metotuna x ve y korrdinatlarını göndererek çizgimizi çizebiliriz. Çalışmamızda lineTo metotu ile çizeceğimiz çizgiye açıları vermek için Math sınıfını kullanarak merkez noktaya göre sinüs ve kosinüs açılarını hesaplayacağız. Son olarakta yapacağımız işlemlere süreklilik kazandırmak için Timer sınıfını kullanacağız.

Sahne üzerine ekleyeceğimiz herhangi bir nesne olmadığına göre Actions panelini açarak aşağıdaki kodları yazmaya başlayabiliriz.

//Daireyi oluşturken açıları vereceğimiz bir değişken oluşturuyoruz.
var aci:Number=0;

//sahnenin merkez noktasını alıp değişkenlere atıyoruz.
var merkezX:Number=stage.stageWidth/2;
var merkezY:Number=stage.stageHeight/2;
trace(merkezX, merkezY);

//Olayı süreklilik kazandırmak için bir sayaç oluşturuyoruz ve
//süresini 25 milisaniye olarak ayarlıyoruz.
var sayac:Timer=new Timer(25);

sayac.addEventListener(TimerEvent.TIMER, tekrarla);
function tekrarla(e:TimerEvent) {
//aci değişkeninin değerini birer birer arttırıyoruz.
aci++;
//aci degerine göre radyanı hesaplıyoruz.
var aciRadyan:Number=aci*Math.PI/180;
//Dairenin konturunu çizmek için sinüs ve kosinüs açılarını hesaplıyoruz.
//başlangıç noktalarını belirlemek içinde merkezX ve merkezY değişkenlerinin değerinden 175 çıkardık.
//Bu değer çizeceğimiz dairenin yarıçapı olacaktır, değeri değiştirerek dairenin çapınıda değiştirebiliriz.
var a:Number=merkezX-175*Math.cos(aciRadyan);
var b:Number=merkezY-175*Math.sin(aciRadyan);
//Değişkenlerden aldığımız değerleri graphics sınıfının lineTo yöntemini kulllanarak
//çizeceğimiz çizginin x ve y korrdinatlarına atıyoruz.
graphics.lineTo(a,b);
//Çizginin kontur kalınlığı ve kontur rengini belirliyoruz.
graphics.lineStyle(1, 0xff0000);
//Eğer açı değeri 360'ı geçerse sayacı durduruyoruz.
if (aci==361) {
sayac.stop();
}
}

//Sayacı başlatıyoruz.
sayac.start();

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

AS 3.0 İle Dört Fonksiyonlu Hesap Makinesi Yapımı

Erol Demirer — Wed, 03 Feb 2010 22:10:12 +0000

Bu çalışmamızda AS 3.0 ile dört fonksiyonlu hesap makinesi yapacağız. İlk olarak sahne üzerinde ihtiyacımız olan objeleri yerleştirmeye başlayalım. İşlemlerde kullanılacak sayıların girilebilmesi için iki tane Input Text alanına ihtiyacımız var. Text alanlarını sahneye ekledikten sonra Properties panelinde Instance Name kısımlarına soldaki için giris1_txt, sağdaki içim giris2_txt yazalım. Sonrasında yapılacak işlemlerin sembolünü ve işlemlerin sonuçlarını göstermek için iki tane Dynamic Text alanına ihtiyacımız olacak. Semboller için olan metin alanını oluşturduğumuz Input Text alanlarının arasına, Sonuç için olan metin alanını ise alt kısma yerleştirelim. Instance Name kısımlarına semboller için olanına sembol_txt, sonuç için olanına ise sonuc_txt yazalım.

Çalışmada kullanılacak butonlar için Window > Components panelindeki User Interface seçeneğinin altında bulunan butonlardan beş tane gerekli. Butonların beşini de ekleyip tek tek ölçüleri ile uğraşmaktansa, önce bir tanesini ekleyelim ve boyutunu 35 x 20 piksel olarak ayarlayalım ve Alt tuşu ile 4 tane kopyasını oluşturalım. Sırasıyla Instance Name kısmına topla_btn, cikar_btn, bol_btn, carp_btn ve esittir_btn yazalım. esittir_btn isimli butonuda sağdaki giris2_txt metin kutusunun sağına alalım. Butonların üzerindeki yazıları kodlama tarafında değiştireceğiz.

Eğer gerekli tüm nesneleri sahne üzerine yerleştirdiysek, hesap makinemizi çalıştırmak için aşağıdaki kod bloğunu kullanabiliriz.

//Componentlerden eklediğimiz butonların üzerindeki yazıları değiştiriyoruz
topla_btn.label= "+";
cikar_btn.label= "-";
bol_btn.label= "/";
carp_btn.label="x";
esittir_btn.label= "=";

//Intput Text'lere girilecek karakterleri sınırlandırıyoruz.
//yani sadece rakam ve nokta girilebilmesini sağlıyoruz.
giris1_txt.restrict = "0-9" + ".";
giris2_txt.restrict = "0-9" + ".";

//değişkenlerimizi tanımlıyoruz.
//giris1 ve giris2 Input Textlerin karşılığı olacak.
var giris1:String;
var giris2:String;
//seçilen işleme göre çıkan sonucu sonuç değişkenine atayacağız.
var sonuc:Number;
//değişkenin değerine göre hangi işlemin yapılacağını belirleyeceğiz.
var islemler:Number = 0;

//topla butonuna tıklandığında islemler değişkeninin değerini belirliyoruz.
//ve sahnedeki sembol_txt metin alanına + yazdırıyoruz.
topla_btn.addEventListener(MouseEvent.CLICK, topla);
function topla(e:MouseEvent) {
islemler = 1;
sembol_txt.text = "+";
}

//cikar butonuna tıklandığında islemler değişkeninin değerini belirliyoruz.
//ve sahnedeki sembol_txt metin alanına - yazdırıyoruz.
cikar_btn.addEventListener(MouseEvent.CLICK, cikar);
function cikar(e:MouseEvent) {
islemler = 2;
sembol_txt.text = "-";
}

//bol butonuna tıklandığında islemler değişkeninin değerini belirliyoruz.
//ve sahnedeki sembol_txt metin alanına / yazdırıyoruz.
bol_btn.addEventListener(MouseEvent.CLICK, bol);
function bol(e:MouseEvent) {
islemler = 3;
sembol_txt.text = "/";
}

//carp butonuna tıklandığında islemler değişkeninin değerini belirliyoruz.
//ve sahnedeki sembol_txt metin alanına x yazdırıyoruz.
carp_btn.addEventListener(MouseEvent.CLICK, carp);
function carp(e:MouseEvent) {
islemler = 4;
sembol_txt.text = "x";
}

//eşittir butonuna tıklandığında yapılacak işlemleri sıralıyoruz.
esittir_btn.addEventListener(MouseEvent.CLICK, esittir);
function esittir(e:MouseEvent) {
//Input Text'lere girilen değerleri değişkenlerimize atıyoruz.
giris1=giris1_txt.text;
giris2=giris2_txt.text;
//eğer kutucuklar boşsa dinamik metin alanına gerekli uyarıyı yazıyoruz.
if (giris1_txt.text==""&&giris2_txt.text=="") {
sonuc_txt.text="Lütfen kutulara sayı giriniz.";
//eğer islemler değişkeninin değeri 1 ise toplama işlemini gerçekleştiriyoruz.
} else if (islemler == 1) {
//sonuc değişkenine toplama işleminin sonucunu atıyoruz.
//giris1 ve giris2 değişkenleri String türünden değişkenler olduğu için
//değişkenlerden gelen değerleri sayısal değerlere çeviriyoruz.
sonuc=parseInt(giris1) + parseInt(giris2);
sonuc_txt.text = String(sonuc);
//eğer islemler değişkeninin değeri 2 ise çıkarma işlemini gerçekleştiriyoruz.
} else if (islemler == 2) {
sonuc=parseInt(giris1) - parseInt(giris2);
sonuc_txt.text = String(sonuc);
//eğer islemler değişkeninin değeri 3 ise bölme işlemini gerçekleştiriyoruz.
} else if (islemler == 3) {
sonuc=parseInt(giris1) / parseInt(giris2);
sonuc_txt.text = String(sonuc);
//eğer islemler değişkeninin değeri 4 ise çarpma işlemini gerçekleştiriyoruz.
} else if (islemler == 4) {
sonuc=parseInt(giris1) * parseInt(giris2);
sonuc_txt.text = String(sonuc);
//herhangi bir işlem seçilmemişse gerekli uyarıyı yazıyoruz.
} else {
sonuc_txt.text="Lütfen bir işlem seçiniz.";
}
}

Ö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 Hareketlere İvme Kazandırmak

Erol Demirer — Tue, 02 Feb 2010 22:06:29 +0000

İvmenin anlamı hızın zamana göre değişiklik göstermesidir. Örnek olarak hızı artan ya da azalan bir nesne gösterebiliriz. Nesnenin ivmesinin değişimi nesnenin yönünün veya hızının zaman içerisinde değiştirilmesidir. Öyleyse bizim yapacağımız işlemde animasyon sırasında hıza müdahale etmek olacak. Yani nesneye bir hız kazandırdıktan sonra bunu arttırarak ya da azaltarak hızına müdahale edeceğiz.

Örneği uygulamak için öncelikle sahne üzerine bir daire çizelim ve MovieClip olarak sembole dönüştürelim ve özellikler panelinden Instance Name kısmına top_mc yazalım. Actions panelini açarak aşağıdaki kod bloğunu yazmaya başlayalım.

var hiz:Number=20;
var ivme:Number=0.5;

addEventListener(Event.ENTER_FRAME, topHareketi);
function topHareketi(e:Event) {
top_mc.x+=hiz;
hiz-=ivme;
trace(hiz);
if (hiz<=0) {
removeEventListener(Event.ENTER_FRAME, topHareketi);
}
}

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

AS 3.0 İle Sınırlı Sürükle Bırak

Erol Demirer — Tue, 02 Feb 2010 22:01:24 +0000

ActionScript ile nesneler sürüklerken, sadece istediğimiz alanda hareket etmelerini sağlama ihtiyacı duyabiliriz. Bunu gerçekleştirebilmek için sahne üzerine çizim apisini kullanarak görünmeyen bir alan çizeriz ve nesneye startDrag komutunu verdiğimizde bu alanı belirterek sadece bu alan içerisinde hareket etmesini sağlayabiliriz.

Animasyonu gerçekleştirmek için sahne üzerine bir daire çizelim ve Instance Name kısmına daire_mc yazalım. Sonra da Actions panelini açarak aşağıdaki kodları yazmaya başlayalım.

/*sayısal bir değişken oluşturuyoruz
ve değer olarak sahne genişşliğinin yarısını atıyoruz.*/
var a:Number = stage.stageWidth-daire.width;
/*sayısal bir değişken oluşturuyoruz
ve nesne genişliğinin yarısını değer olarak atıyoruz*/
var b:Number = daire.width/2;
/*dikdortgen isimli bir değişken oluşturuyoruz, parantez içerisindeki
değerler sırasıyla x ve y korrdinatları ile genişlik ve yüksekliktir.
x değeri olarak b değişkenini genişlik değeri olaraksa a değişkenini atıyoruz*/
var dikdortgen:Rectangle=new Rectangle (b,200,a,0);

daire.addEventListener(MouseEvent.MOUSE_DOWN, surukle);
function surukle(e:MouseEvent) {
/*parantez içerisine true değerini girerek sürükleme işleminin
oluşturduğumuz dikdörtgen içerisinde gerçekleşmesini sağlıyoruz.
virgülden sonra da değişkenimizin ismini giriyoruz*/
daire.startDrag(true,dikdortgen);
}

stage.addEventListener(MouseEvent.MOUSE_UP, birak);
function birak(e:MouseEvent) {
daire.stopDrag();
}

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

ActionScript 3.0 Sürükle – Bırak (StartDrag – StopDrag)

Erol Demirer — Mon, 01 Feb 2010 21:56:21 +0000

ActionScript ile geliştirdiğimiz uygulamalarda kullandığımız nesneleri fare ile taşaınabilir hale getirebiliriz. Bu sayede puzzle’lar, oyunlar yapabilir, ya da kullanıcının uygulama arayüzünü istediği gibi şekillendirmesini sağlayabiliriz.

ActionScript içerisinde bu tip taşıma işlemlerini yapmak için startDrag() metodu, taşınan nesneyi bırakmak içinse stopDrag() metodu kullanılır. Sürükleme ve bırakma işlemlerinin hangi olaya bağlı olarak gerçekleşeceğini ise nesneye ya da sahneye atadığımız olay dinleyici ile belirleriz. Bu örnekte nesnemize biir olay dinleyici atayacağız. Nesnenin üzerine gelindiğinfarenin sol tuşuna basılıt tutarsak taşıma işlemi gerçekleşecek, fareyi bıraktığımız anda da taşıma işlemi sonlananacak. Yani dinlenmesini istediğimiz olaylar MouseEvent’lerinin içerisinden MOUSE_DOWN ve MOUSE UP olayları.

Sahne üzerine Oval Tool ile bir daire çizip F8 kısayol tuşu ile Movie Clip olarak sembole dönüştürelim ve Instance Name kısmına ornek_mc yazalım. Kodları yazmak için Actions isimli bir layer oluşturalım ve Actions panelini açarak aşağıdaki kodları yazalım.

//oluşturduğumuz nesneye olay dinleyici ekliyoruz
ornek_mc.addEventListener(MouseEvent.MOUSE_DOWN, surukle);
//olay gerçekleştiğinde çalışacak fonksiyonumuzu yazıyoruz
function surukle(e:MouseEvent) {
//startDrag metodu ile nesnenin sürüklenmesini sağlıyoruz
ornek_mc.startDrag();
}

ornek_mc.addEventListener(MouseEvent.MOUSE_UP, birak);

function birak(e:MouseEvent) {
//stopDrag metodu ile sürükleme işlemini sonlandırıyoruz
ornek_mc.stopDrag();
}

Ö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 Link Vermek

Erol Demirer — Mon, 01 Feb 2010 21:49:26 +0000

ActionScript 3.0 ile hazırladığımız buton ya da Movie Cliplere link vermek isteyebiliriz. ActionScript 2.0 ile bu işlem aşağıdaki gibi yapılıyordu.

on (release) {
getURL("http://www.eroldemirer.com","_blank");
}

ActionScript 3.0′ın gemesiyle birlikte bu işlemde biraz değişiklik oldu. Sahneye bir buton ekleyelim ve Instance Name kısmına deneme_btn yazalım. Actions panelini açarak aşağıdaki kodları yazalım.

deneme_btn.addEventListener(MouseEvent.MOUSE_DOWN, link);

function link(e:MouseEvent){
navigateToURL(new URLRequest("http://www.eroldemirer.com"),"_blank");
}

Burada yapılan işlen navigateToURL yöntemini kullanarak yeni bir URLRequest objesi oluşturmak ve yönlendirmek istediğimiz adresi yazmaktır. _blank parametresi ise adresin yeni bir sayfada açılmasını sağlayacaktır.

ActionScript 3.0 İle Yerçekimi Animasyonu

Erol Demirer — Mon, 01 Feb 2010 21:47:34 +0000

Yerçekimini animasyonumuzda nasıl oluşturabiliriz? Bunu yapabilmek için öncelikle nesnenin hareketi için hız ve ivme gibi değerlere ihtiyacımız olacak. Hız değerimiz sabit iken, ivme değeri ile topun hareketini yavaşlatacağız. Bu değerleri belirledikten sonra bir de nesnenin çarpıp geri döneceği bir noktaya yani taban noktasına ihtiyacımız olacak. Vermiş olduğumuz ivme değeri sayesinde nesne taban noktasına çarptıktan sonra hareketini tersine çevirerek yukarı doğru çıkacaktır.

var hiz:Number = 10;
var ivme:Number = 4;
var taban:Number = 355;
var hizlanma:Number = -1;

addEventListener(Event.ENTER_FRAME, topHareketi);
function topHareketi(e:Event) {
hiz += ivme;
top_mc.y += hiz;
trace(hiz)
if (top_mc.y + top_mc.height >= taban) {
top_mc.y = taban - top_mc.height;
hiz *= hizlanma;
//trace(hiz)
if(hiz>=-0){
removeEventListener(Event.ENTER_FRAME, topHareketi);
}
}
}

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

ActionScript 3.0 Sayaç Yapımı

Erol Demirer — Sun, 31 Jan 2010 21:39:21 +0000

Yapacağımız çalışma zamanla ilgili olduğundan dolayı Timer sınıfını kullanacağız. Kodlamaya geçmeden önce sahneye dinamik text alanı ekleyelim, text alanının içerisine 30 yazalım ve instance name (Örnek Adı) kısmına sayac_txt yazalım. Sonra sahneye iki tane buton ekleyelim ve butonların instance name (Örnek Adı) kısmına birine baslat_btn, diğerine de durdur_btn yazalım. Timeline’da katman adını butonVeText olarak değiştirelim ve yeni bi layer ekleyerek ismini Action olarak değiştirelim. Yazacağımız kodları bu layerdaki Anahtar kareye yazacağız.

Şimdi de F9 tuşu ile Action (Eylemler) paneline şu kodları yazalım.

/*ilk olarak sayacımızı tanımlıyoruz, parantez içerisindeki parametlerin ilk değer
sayacın kaç milisaniyede bir çalışacağını belirliyor,
saniye bazında işlem yapacağımız için değeri 1000 olarak girdik,
ikincisi ise kaç defa tekrar edeceğini belirliyor, yani sayacımız
30 saniye boyunca geriye doğru sayacak
*/
var sayac:Timer=new Timer(1000,30);

/*sayaç çalışmaya başladığında kalan sürenin ne kadar olduğunu bulabilmek için
kalan isimli bir değişken tanımlıyoruz, fakat değişkene şimdilik bir değer atamayacağız.
*/
var kalan:Number;

//baslat_btn butonuna olay dinleyici atayarak butona tıklandığında sayacın çalışmasını sağlıyoruz.
baslat_btn.addEventListener(MouseEvent.CLICK, baslat);
function baslat(e:MouseEvent) {
sayac.start();
}

//sayaça bir olay dinleyici atıyoruz
sayac.addEventListener(TimerEvent.TIMER, geriSay);
function geriSay(e:TimerEvent) {
/*kalan değişkenine kalan süreyi değer olarak atıyoruz.
kalan süreyi hesaplamak için sayac değişkenini tanımlarken
parantez içerisine girdiğimiz tekrar sayısından(repeatCount),
şu ana kadar kaç defa tekrarlamış olduğunu bularak çıkartıyoruz(currentCount.
*/
kalan=sayac.repeatCount-sayac.currentCount;
/*kalan değişkeninin değerini sahnedeki dinamik text alanına yazdırıyoruz
fakat sayısal bir değeri, metinsel bir veri olarak yazdıramayacağımız için
kalan değişkenini String (metinsel) bir veriye dönüştürüyoruz.
*/
sayac_txt.text=kalan.toString();
//Eğer iki sayıda birbirine eşitse, yani sayaç sıfırlandıysa
if (sayac.currentCount==sayac.repeatCount) {
//sahnedeki metin alanına yazılacak yazı
sayac_txt.text="Süre Bitti";
/*sayacı resetliyoruz ki başlat butonuna tekrar bastığımıza
- değerler çıkmasın ve sayaç 30 saniyeden geriye doğru saysın.
*/
sayac.reset();
}
}

//durdur_btn butonuna olay dinleyici atayarak butona tıklandığında sayacın durmasını sağlıyoruz.
durdur_btn.addEventListener(MouseEvent.CLICK, durdur);
function durdur(e:MouseEvent) {
sayac.stop();
}

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

ActionScript 3.0 Çizim Apisini Kullanarak Daire Çizme

Erol Demirer — Sun, 31 Jan 2010 21:28:29 +0000

Çizim apisini kullanarak daire çizebilmek için aşağıdaki kod bloğunu kullanabiliriz.

/*MovieClip sınıfına ait daire isimli bir değişken oluşturuyoruz.
Kullanacağımız alana göre MovieClip ya da Shape sınıflarından
birini tercih edebiliriz.*/
var daire:MovieClip = new MovieClip();
//Daireyi sahneye ekliyoruz
addChild(daire);
//dairenin kontur kalınlığı ve rengini belirliyoruz.
daire.graphics.lineStyle(3, 0x666666);
//dairenin dolgu rengini belirleyip başlatıyoruz.
daire.graphics.beginFill(0x669999);
//dairenin x, y koordinatları ve yarıçapını belirliyoruz.
daire.graphics.drawCircle(275, 200, 150);
//dolgu rengini sonlandırıyoruz.
daire.graphics.endFill();

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

ActionScript 3.0 Çizim Apisini Kullanarak Dikdörtgen Çizme

Erol Demirer — Sun, 31 Jan 2010 21:23:43 +0000

ActionScript çizim apilerini kullanarak sahneye istediğimiz geometrik şekilleri, çizim araçlarına ihtiyaç duymadan çizebiliriz. Örneğin bir dikdörtgen çizmek istersek aşağıdaki kod bloğunu kullanabiliriz.

var dikdortgen:Shape=new Shape();
addChild (dikdortgen);

//Kontur Kalınlığı ve Rengi
dikdortgen.graphics.lineStyle(3, 0x666666);
//Dolgu rengi başlangıcı
dikdortgen.graphics.beginFill(0xFF0000);
//Şeklin x,y koordinatı, genişlik ve yüksekliği
dikdortgen.graphics.drawRect(150, 125, 350, 150)
//Dolgu rengi sonu
dikdortgen.graphics.endFill();

Kenarları yuvarlatılmış bir dikdörtgen çizmek içinde aşağıdaki kod bloğunu kullanabiliriz

var dikdortgen2:Shape=new Shape();
addChild(dikdortgen2)

dikdortgen2.graphics.lineStyle(3, 0x666666);
//diğerinden farklı olarak en sona kenar yuvarlatmak için radius değerini giriyoruz.
dikdortgen2.graphics.drawRoundRect(360, 100, 150, 75, 30);

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

Tween Sınıfını Kullanarak Fareyi Takip Eden Obje Yapımı

Erol Demirer — Sat, 30 Jan 2010 21:16:53 +0000

İnternette gezerken flashla yapılmış birçok sitede fareyi takip eden objeler ya da farenin normal imleci yerine imleç olarak kullanılan farklı objeler görürüz. Bu tip animasyonların çoğu düz hareketler içerir. Ya direk farenin x ve y konumuna kilitlenmişlerdir ya da uygulama çalışmaya başladığı andan itibaren farenin x ve y konumuna göre düz bir şekilde hareket ederler. Düz hareketlerle yapıldıkları içinde genellikle ilgi çekmezler.

Bu tarz bir animasyon yapmak istiyorsak hareketleri biraz daha hoş hale getirmemiz gerekecektir. Hareketlere estetik katmak içinde Tween sınıfını kullanacağız. Uygulamaya başlamadan önce sahne üzerine fareyi takip edecek objeyi ekleyelim ce Movie Clip olarak sembole dönüştürelim. Instance Name kısmına da sembol_mc yazalım. F9 kısayol tuşu ile Actions panelini açalım ve aşağıdaki kodları yazalım.

//Gerekli sınıfları import ediyoruz.
import fl.transitions.Tween;
import fl.transitions.easing.*;

//Tween sınıfı kullanılarak yapılacak animasyonları belirliyoruz.
var xkonum:Tween =new Tween(sembol_mc, "x", Elastic.easeOut,sembol_mc.x,mouseX,250,true);
var ykonum:Tween =new Tween(sembol_mc, "y", Elastic.easeOut,sembol_mc.y,mouseY,250,true);

stage.addEventListener(Event.ENTER_FRAME, takip);
function takip(e:Event) {
//Farenin konumu sürekli değişeceği için animasyondaki başlangıç noktasıda değişecektir.
//Başlangıç noktasını her defasında değiştirerek oluşturduğumuz nesnelere gönderiyoruz.
xkonum.begin = sembol_mc.x;
xkonum.finish = mouseX;
xkonum.resume();

ykonum.begin = sembol_mc.y;
ykonum.finish = mouseY;
ykonum.resume();

}

Ö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ı Kullanımı

Erol Demirer — Sat, 30 Jan 2010 21:09:57 +0000

Tween sınıfı ile animasyonlarımızı daha estetik hale getirebiliriz. Bu sınıf ile nesnenin yeniden boyutlandırılması, koordinat değişimi, ölçeklenmesi vb. işlemlerde kullanılıyor. Güzel tarafı ise fazla kod kalabalığına gerek olmadan işlemleri daha kısa kodlamalarla yapıyor olması. Tween objesinin kodlama içerisindeki kullanımı aşağıdaki gibidir.

var yeniTween:Tween = new Tween(“object”, “properties”, function, begin, finish, duration, useSeconds);

object: Animasyonda kullanılacak nesnenin adı,

properties: Nesnenin müdahale edilecek özelliği(width, height, alpha, scaleX, scaleY, vb.),

function: Animasyona uygulanacak hareket türü,

begin: Başlangıç parametresi, yani objeyi hareket ettireceksek hangi eksende hareket ettireceksek, o eksendeki başlangıç koordinatı(ornek_mc.x = 50),

finish: Bitiş parametresi (ornek_mc.x = 500),

duration: Nesneye uygulanacak animasyonun süresi,

useSeconds: Burada true değeri verilirse animasyonun süresi saniye olarak, false verilirse frame hızı olarak hesaplanır.

Tween sınıfını bir nesneye uygulamak istersek aşağıdaki örnekteki gibi bu sınıfı kullanabiliriz.

import fl.transitions.Tween;

import fl.transitions.easing.*;

var yeniTween:Tween = new Tween(ornek_mc, “y”, Regular.easeOut, 0, 350, 5, true);

Bu kodlamayla sahne üzerindeki nesne y ekseninde 0 noktasından 350 piksele gönderiyoruz. Animasyonun hareket türünü ise Regular sınıfını kullanarak belirledik. Bu ve diğer sınıflarla ilgili bilgiler altta sıralanmıştır.

Back: Hareket hızlı bir şekilde başlar, bitiş noktasını geçtikten sonra bitiş noktasına döner.

Bounce: Nesne özelliğinin verilen değer üzerinden sıçramasını sağlar. Örnek olarak top zıplatma animasyonu gösterilebilir.

Elastic: Hareketlerin elastik bir şekilde yapılmasını sağlar. Nesne önce bitiş noktasını geçer, sonra geri gelir, belirlenen süreye göre bu işleme devam eder ve belirlenen noktaya gelir.

None: Adındanda anlaşılacağı gibi herhangi bir hareket uygulamadan animasyonun normal şekilde devam eder.

Regular: Belirli bir ivme uygular.

Strong: Regular sınıfına benzer bir yapısı vardır fakat hareketler daha serttir.

Bu sınıfın yapıları ile birlikte aşağıdaki 3 özellikten birininde kullannılması gerekmektedir.

easeIn: Hareketin başlangıç noktasında yapılmasını sağlar.

easeInOut: Hareketin hem başlangıç hem bitiş noktasında yapılmasını sağlar.

esaseOut: Hareketin bitiş noktasında yapılmasını sağlar.

Bu sınıfı kontrol etmek için aşağıdaki metotları kullanabiliriz.

yeniTween.stop(); : Animasyonu durdurmaya yarar.

yeniTween.resume(); : Durdurulan animasyonun kaldığı yerden devam etmesini sağlar.

yeniTween.start(); : Durdurulan animasyonu baştan başlatmaya yarar.

yeniTween.fforward(); : Aniamsyondan bitirmek istersek bu metodu kullanabiliriz.

yeniTween.yoyo(); : Sıkılırda animasyonu tersten oynatmak istersek bu metodu kullanabiliriz.

ActionScript 3.0 Kar Yağdırma Efekti

Erol Demirer — Fri, 29 Jan 2010 21:06:47 +0000

Bu uygulamamızda ActionScript ile kar yağdırma efekti yapacağız. Üst bölümden sahnenin hemen dışına bir dolgu rengi beyaz ve çağı 4 piksel olan bir daire çizelim. Çizdiğimiz daireyi MovieClip olarak sembole dönüştürelim, açılan pencerede name kısmına karTanesi yazalım. Animasyonumuzu MovieClip’in içerisinden yapacağımız için çift tıklayarak sembolün içine girelim ve sembolün içerisinde de şekli seçip tekrar MovieClip olarak sembole dönüştürelim.

Açılan pencerede name kısmına Kar yazalım. Timeline da 40. frame’i seçip F6 kısayolu ile KeyFrame ekleyelim ve sembolümüzü sahnenin alt kısmından dışarı çıkacak şekilde hareket ettirelim. İşlemi bitirdikten sonra Timeline’da Keyframe’ler arasına sağ tıklayarak Motion Tween oluşturalım ve ana sahneye geri dönelim. Library’de bulunan karTanesi isimli sembolün üzerinde sağ tık ile açılan pencereden Linkage (Flash CS4 için Properties açılan pencerede de Advansed sekmesi) sekmesine tıklayalım. Açılan pencerede Export for ActionScript seçeneğini işaretleyelim ve Ok diyerek pencereyi kapatalım. Eğer bir uyarı penceresi gelirse yine Ok butonuna tıklayarak pencereyi kapatalım. Bu işlem sayesinde nesnemizi ActionScript Library’sine yeni bir sınıf kaydetmiş olduk. Böylece aynı MovieClip’i tek tek sahneye eklemeyle uğraşmak yerine yazacağımız kodlarla sürekli yenilerinin sahneye eklenmesini sağlayacağız. Bu işlemi gerçekleştirmek için de ilk önce nesnemizi bir değişkene atayacağız ve olay tetikleyici sayesinde sürekli sahneye eklenmesini sağlayacağız.

Artık kodlarımızı yazmaya başlayabiliriz. Kodları yazmak için yeni bir layer oluşturalım ve Aşağıdaki kodları yazalım.

//sahneye olay dinleyicimizi ekliyoruz. ENTER_FRAME sayesinde fonksiyonumuzun
//sürekli tetiklenmesini saplıyoruz.
stage.addEventListener(Event.ENTER_FRAME, karYagisi);

function karYagisi(e:Event) {
//ActionScript Library'sine kaydettiğimiz sınıfımıza ait yeni bir nesne tanımlıyoruz.
var kar:karTanesi = new karTanesi();
//addChild metodu ile nesnemizi sahneye ekliyoruz.
addChild(kar);
//nesnenin x konumunu rastgele belirliyoruz ve
//550 ile çarparak sahne genişliğine eşitliyoruz
//eğer farklı bir sahne genişliği kullandıysak 550 yerine sahne genişliğimizi yazmamız gerekecektir
kar.x = Math.random() * 550;
//nesnemizin boyutlarını ve alphasını rastgele olarak belirliyoruz.
//Böylece gelen her kar tanesi farklı boyutlarda ve saydamlıkta olacaktır.
kar.scaleX = kar.scaleY = Math.random();
kar.alpha = Math.random();
}

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

ActionScript 3.0 Klavye Kontrolleri

Erol Demirer — Fri, 29 Jan 2010 21:00:29 +0000

ActionScript 3.0 da klavye kontrolleri için aşağıdaki kodları kullanabiliriz. Animasyona başlamadan önce eğer elimizde bir balon çizimi varsa onu sahneye ekleyelim yoksa bir şekil çizerek bunu MovieClip olarak sembole dönüştürelim ve InstanceName kısmına balon_mc yazalım. Sonra da Actions panelini açarak aşağıdaki kodları yazmaya başlayalım.

//sahneye bir olay dinleyici atıyoruz ve Klavye Hareketlerini kontrol ediyoruz.
stage.addEventListener(KeyboardEvent.KEY_DOWN, hareket);

function hareket(event:KeyboardEvent) {
//eğer basılı tutuşan tuş sol yön tuşuysa nesneyi sola doğru hareket ettiriyoruz.
if (event.keyCode==Keyboard.LEFT) {
balon_mc.x-=5;
}
//eğer basılı tutuşan tuş sağ yön tuşuysa nesneyi sağa doğru hareket ettiriyoruz.
if (event.keyCode==Keyboard.RIGHT) {
balon_mc.x+=5;
}
//eğer basılı tutuşan tuş yukarı yön tuşuysa nesneyi yukarı doğru hareket ettiriyoruz.
if (event.keyCode==Keyboard.UP) {
balon_mc.y-=5;
}
//eğer basılı tutuşan tuş aşağı yön tuşuysa nesneyi aşağı doğru hareket ettiriyoruz.
if (event.keyCode==Keyboard.DOWN) {
balon_mc.y+=5;
}
}

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

for Döngüsünü Kullanarak Sahneye Nesne Ekleme

Erol Demirer — Wed, 27 Jan 2010 20:56:37 +0000

Döngüleri kullanarak uygulamamızda kullandığımız nesneleri sahne üzerine istediğimiz sayıda ekleyebiliriz. Eklediğimiz nesnelerin x ve y konumlarını ister rastgele istersek belli arallıklarla belirleyebiliriz. Böylece bir nesneyi defalarca sahneye eklemek ile uğraşmak yerine bir kaç satır kod yazarak yapacağımız işlemi daha da kısaltabiliriz. Döngülerin en sevdiğim yanı da bu.

Bu uygulamamızda oluşturduğumuz bir nesneyi for döngüsünü kullanarak sahne üzerine 10 tane ekleyecceğiz. x ve y konumlarını da rastgele belirleyeceğiz. İlk olarak 600 x 400 piksel ebatlarında yeni bir döküman açalım ve kullanacağımız nesneyi oluşturup Movie Clip olarak sembole dönüüştürelim. Açılan pencerede Symbol Name kısmına “Nesne” yazalım. Sembole dönüştürdükten sonra Library panelinde sembolü seçip sağ tıklayalım ve açılan pencerede Linkage (Flasf CS4 sürümü için Properties > Advanced) seçeneğine tıklayıp Export for ActionScript seçeneğini işaretleyelim.

Bu seçeneği işaretledikten sonra üst kısımdaki kutucuklar aktif hale gelecektir. Class sekmesinde sembolu kaydederken vermiş olduğumuz isim, Base Class sekmesinde de flash.display.MovieClip yazacaktır. Bir şeyi değiştirmeden Ok tuşuna basalım. Eğer bir uyarı penceresi açılırsa Ok butonuna tıklayalım.

Böylece nesnemizi ActionSCript kütüphanesine yeni bir Class olarak kaydetmiş olduk. Sahne üzerinde duran nesneyi artık silebiliriz. Artık sahne üzerine ekleme işlemini kaydetmiş olduğumuz Nesne Class’ını kullanarak yapacağız. Class’ımızı oluşturduğumuza göre Actions panelini açıp aşağıdaki kodları yazabiliriz.

//Döngümüzü oluşturuyoruz
for (var i:Number=0; i<10; i++) {
//oluşturduğumuz Nesne Class'ına ait bir nesne tanımlıyoruz
var ornek_mc:Nesne = new Nesne();
//tanımladığımız nesnenin x ve y konumlarını belirtyoruz.
//Math.random() metodu ile bu değerleri rastgele olarak belirliyoruz.
//Sahne ölçülerimiz 600 x 400 piksel ebatlarındaydı eklediğimiz nesnelerin sahnenin dışına çıkmasını
//engellemek için oluşturduğumuz rastgele sayıları genişlik ve yükseklik değerlerinden
//100'er sayı küçük oluşturduk ve 50 ekledik. Böylece nesnelerin x konumu 50 - 550 piksel
// y konumları ise 50 - 350 piksel arasında değişecek
ornek_mc.x = 50 + Math.random() * 500;
ornek_mc.y = 50 + Math.random() * 300;
//addChild metodu ile nesneleri sahneye ekliyoruz.
addChild(ornek_mc);
}

Ö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 Fare İşaretçisini Değiştirmek

Erol Demirer — Wed, 27 Jan 2010 20:42:30 +0000

Geliştirdiğimiz uygulamalarda klasik fare işaretçilerinin yerine tasarımımıza daha uygun fare işaretçileri kullanabiliriz. İlk olarak yapmamız gereken fare işaretçisi olarak kullanacağımız nesneyi oluşturmak olacak. Sahne üzerine işaretçi olarak kullanmak istediğiniz bir şekil çizin(ya da herhangi bir fotoğrafı sahne üzerine import edin) ve Movie Clip olarak sembole dönüştürün.

Sembole dönüştürürken dikkat edilmesi gereken nokta açılan penceredeki Registration noktasını doğru olarak işaretlemektir. Yoksa fare tıklanacak nesnelerin üzerine geldiğinde işaretçi farklı bi noktada olabilir. Bu uygulama için Registration noktasını merkez nokta olarak işaretledim.

Fare işaretçimizi oluşturduktan sonra Properties panelindeki Instance Name alanına imlec_mc yazalım. Yeni bir layer ekleyelim ve layer ismini Actions olarak değiştirelim. F9 kısayolunu kullanarak Actions panelini açarak aşağıdaki kodları yazalım.

//imleci sürükleme işlemini başlatıyoruz.
//parantez içerisindeki true parametresi oluşturduğumuz fare işaretçisinin x ve y noktalarını
//fare ile eşitleyecektir.
imlec_mc.startDrag(true);

//Farenin orijinal işaretçisini gizliyoruz
Mouse.hide();

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

ActionScript 3.0 Math Sınıfı Metodları

Erol Demirer — Tue, 26 Jan 2010 20:40:14 +0000

ActionScript 3.0 Math sınıfının metodları ve kullanım şekilleri aşağıda sıralınmıştır.

abs ()

Sayının mutlak değerini alır. Yani negatif sayıları pozitife çevirir.
trace (Math.abs(-21)); // 21

ceil ()
Ondalıklı sayıyı, en yakın üst sayıya yuvarlar.
trace (Math.ceil(17.4)); // 17
trace (Math.ceil(-17.4)); // -17

floor ()

Pozitif ondalıklı sayıyı, pozitif tam sayıya çevirir.
trace (Math.floor(25.8)); // 25
Negatif ondalıklı sayıyı, bir alt negatif tam sayıya çevirir.
trace (Math.floor(-25.8)); // -26

max ()

Matematiksel olarak sayılar arasındaki en büyük sayıyı bulur.
trace(Math.max(4,8)); // 8;

min ()

Matematiksel olarak sayılar arasındaki en küçük sayıyı bulur.
trace(Math.min(4,8)); // 4;

pow ()

Bir sayının üssünü almak için kullanılır. 43 = 4x4x2
trace(Math.pow(4,3)); // 64

round ()

Ondalıklı sayının ondalık kısmı 5 ve üzeri ise, bir üst tam sayıya yuvarlar.
trace(Math.round(7.8)); // 8

Pozitif ondalıklı sayının ondalık kısmı 5 in altında ise, tam sayıya çevirir.
trace(Math.round(7.3)); // 7

random ()

0 ile 1 arasında ondalıklı olarak rastgele sayı üretir.
trace(Math.random()); // 0.8564752196452185

0 ile 100 arasında bir tam sayı üretmek için;
trace(Math.round(Math.random()*100)); // 43

sqrt ()

Pozitif sayıların karekökünü alır.
trace(Math.sqrt(144)); // 12

cos ()

Kosinüsün radyan olarak açı değerini, -1.0 ile 1.0 arasında değişen değerler olarak geri döndürür.
trace(Math.cos(0)); // 1

sin ()

Sinüsün radyan olarak açı değerini, -1.0 ile 1.0 arasında değişen değerler olarak geri döndürür.
trace(Math.sin(120)); // 0.58

tan ()

Tanjantın radyan olarak açı değerini hesaplar.
trace(Math.tan(45)); // 1.619

acos ()

-1.0 ile 1.0 arasında değişen kosinüs sayılarının radyan değerlerini bulur.
trace(Math.acos(0.8)); // 0.64

asin ()

-1.0 ile 1.0 arasında değişen sinüs sayılarının radyan değerlerini bulur.
trace(Math.asin(0.8)); // 0.92

atan ()

Açı değerlerinin arc tanjant değerlerini bulur.
trace(Math.atan(90)); // 1.55

atan2 (y,x)

Dairenin (0,0) noktasından belirtilen y ve x noktalarını radyan olarak döndürür.
trace(Math.atan2(75,24)); // 1.26

String Sınıfı

Erol Demirer — Tue, 26 Jan 2010 20:37:59 +0000

ActionScript ile metinsel verilerle çalışmak için String sınıfını kullanırız. Oluşturduğumuz metinsel verileri String sınıfına ait bir nesne oluşturarak değer olarak atarız. Dikkat etmemiz gerekn nokta atadığımız değerleri ” ” işaretleri içerisine yamaktır. String sınıfı sadece oluşturduğumuz verileri saklamakla kalmaz, onlar üzerinde işlem yapabilmemizi de sağlar. Örneğin; oluşturduğumuz veriler kaç karakterden oluşuyor, içerisinde istediğimiz karakterler mevcut mu? Gibi sorulara cevap bulabileceğimiz gibi var olan birden fazla veriyi birleştirerek tek bir veri haline de getirebiliriz. String sınıfına ait bir nesne oluşturmak için aşağıdaki yöntemleri kullanabiliriz.

var metinselVeri:String = new String("String Deneme");
var metinselVeri2:String = "String Deneme2";

Oluşturduğumuz String nesnelerinden birini yeni bir String nesnesine değer olarak atamak istersek:

var metinselVeri3 = new String (metinselVeri);

Evet String nesneleri oluşturarmak bu kadar basit.

Uygulamamızda kullandığımız sayısal verileride String veri türüne çevirerek kullanabiliriz. Bunu aşağıdaki şekilde gerçekleştirebiliriz.

var sayisalVeri: Number = 5;
var metinselVeri:String = new String (sayisalVeri);

Metinsel bir veriyi sayısal veriye dönüştrmek için ise yukarıdaki işlemin tam tersini yapmamız gerekiyor.

var metinselVeri:String = new String ("5");
var sayisalVeri:Number = new Number (metinselVeri);

Örneklere dikkat edecek olursanız, oluştturduğumuz nesnelere değer atarken veriyi herhangi bir değişkenden almadığımızda değerimizi ” ” operatörleri kullanarak atıyoruz. Eğer String nesnemiz başka bir değerden veri alacaksa atadığımız değeri atamak için ” ” operatörlerine ihtiyacımız yok. ( ) operatörleri arasına değişkenimizin adını yazarak nesnemizi oluşturabiliriz.

Metinsel verilerin karakter uzunluklarını öğrenmek istersek:

var metinselVeri:String = new String ("Erol Demirer");
trace (metinselVeri.length);

Veriler içerisindeki karakterleri bulmak istersek, while döngüsü kullanımında verdiğim örneği tekrarlayabiliriz. Buraca charAt() metodu veri içerisinde bulunan karakterlere teker teker ulaşmamızı sağlıyor. Metinsel veriler içerisinde bulunan karakterlerde aynı dizi değişkenlerinde olduğu gibi birer indeks numarasına sahiptir ve bu indeks numaraları 0′dan başlar.

var metin:String = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec feugiat nunc vitae justo ultrices et venenatis nisi consectetur. Fusce pharetra vehicula libero, sed dictum elit auctor quis. Etiam in dolor quis neque pellentesque porttitor. Donec magna tortor, blandit a placerat et, tristique rutrum massa.";

var i:Number =0;

var harfSayisi:Number=0;

while (i<metin.length) {
if (metin.charAt(i)=="e") {
harfSayisi++;
trace("Yazı değişkeni içerisindeki e harfi sayısı: " +harfSayisi);
}
i++;
}

Yukarıdaki örnekte veri içerisinde kaç tane i harfi olduğunu kontrol ettik ve çıktı ekranına yazdırdık. Mesela oluşturduğumuz iletişim formlarında formu dolduran kişinin girdiği mail adresini @ işareti kullanarak girip girmediğini kontrol etmek istiyoruz. Bu örnekte de for döngüsünü kullanalım.

var eMail:String = "deneme@deneme.com";

for (var i:Number = 0; i<eMail.length; i++) {
if (eMail.charAt(i)=="@") {
trace("Mail Adresi Doğru");
break;
} else {
trace("Mail Adresi Geçersiz");
}
}

Örnekte break metodu @ işareti varsa for döngüsünün çalışmasını durduracaktır. Eğer break metodunu kullanmazsak döngü @ işaretini bulduktan sonra da çalışmaya devam edecektir.

Oluşturduğumuz metinsel bir veriye sonradan yeni veriler eklemek istersek += operatörünü kullanabiliriz.

var deneme:String= "Selam";

deneme += " Dünyalı";

trace(deneme);

Harflerin tamamının küçük ya da büyük olmasını istersek toLowerCase() ve toUpperCase() metotlarını kullanabiliriz.

var deneme:String= "Selam Dünyalı";

trace(deneme.toLowerCase());

veya

var deneme:String= "Selam Dünyalı";

trace(deneme.toUpperCase());

Farklı türlerdeki verileri metinsel veri türüne dönüştürmek istersek toString() metodunu kullanabiliriz.

var rakam:Number = 9;

var metin:String = rakam.toString();

trace(metin);

veya

var renkler:Array = new Array ("Sari", "Kirmizi", "Mor", "Mavi", "Kahverengi", "Turuncu")

var metin:String = renkler.toString();

trace(renkler);

ActionScript 3.0 Diziler (Array)

Erol Demirer — Mon, 25 Jan 2010 20:34:19 +0000

Dizileri içerisinde birden fazla veri barındırabilen değişkenler olarak yorumlayabiliriz. Bu değişkenleri markete gittiğimizde elimizdeki alışveriş listemiz olarakta görebiliriz. Uygulamalarımızı geliştirirken bir sürü veri ile çalışmamız gerekmektedir. Örneğin bir mp3 çalar yapacağız ve içerisinde onlarca parça olacak. Bu parçaların her biri için ayrı bir olay dinleyici ya da değişken oluşturarak çalışmak mı daha kolay olur, parçaları bir dizinin içerisine kaydederek basit bir döngüyle aynı işlemi yapabilmek mi?

Dizi değişkenlerinin içerisine kaydettiğimiz her verinin ismine element denir ve bu elementlerin dizi içerisinde kendilerine ait bir indeks numarası vardır. İndeks numaralarını kullanarak dizi içerisinde bulunan elementlere ulaşabiliriz. Yalnız dikkat etmemiz gereken şey indeks numaralarının 1′den değil 0!dan başladığıdır. Yani dizinin ilk elementinin numarası “0″ dır.

Yeni bir dizi değişkeni oluşturabilmek için aşağıdaki yöntemleri kullanabiliriz.

var dizi:Array = new Array();

Yukarıdaki kod boş bir dizi oluşturur.

var dizi1:Array = new Array("element1", "element2", "element3");

Dizi değişkenini tanımlarken yukarıdaki satırda olduğu gibi parantez içerisine değerleri girerek yapabiliriz.

var dizi2:Array = ["element1", "element2", "element3"]

Yine değişken tanıamlanırken değerler atanır fakat new metodu kullanılmaz.

var dizi3:Array = new Array();
dizi3[0] = "element1";
dizi3[1] = "element2";
dizi3[2] = "element3";

Bu yöntemde de dizi elementleri indeks numaraları girilerek tanımlanır.

Yukarıdaki dizi değişkenlerinin tümünde String verilerle çalıştık. Peki ya sayısal verilerle çalışmak istersek? Bunun içinde aşağıdaki yöntemi kullanabiliriz.

var sayisalDizi:Array = new Array (1, 2 , 3 , 3.5, 4 , 5);

Eğer matematiksel işlemler yaptırmak istersek:

var matematikselDizi:Array = new Array (1, 1+1, 2+1, 3+2, 5+3, 8+5)

Uygulamalarımızda dizi değişkenlerinin elementlerine ulaşabilmek için indeks numaralarını kullanacağımızı söylemiştik. Dizi elementlerine ulaşabilmek için indeks numaralarını [ ] operatörlerinin içerisine yazmamız gerekmektedir. Bu işlemi aşağıdaki gibi yapabiiliriz.

var dizi:Array = new Array("element1", "element2", "element3");
trace(dizi[0])

Dizi değişkenlerinin element sayılarını öğrenmek istersek length metodunu kullanabiliriz. length metodu bize dizi değişkenlerinin element sayısını geri döndürür.

var dizi:Array = new Array("element1", "element2", "element3");

trace (dizi.length)

Döngümüzün element sayısı kadar çalışmasını istersek:

var dizi:Array = new Array("element1", "element2", "element3", "element4", "element5", "element6", "element7");
for (var i:Number=0; i<dizi.length; i++)
trace(dizi.length)
}

Olaylar ve Olay Dinleyiciler

Erol Demirer — Mon, 25 Jan 2010 20:26:25 +0000

Olaylar ve Olay Dinleyiciler oluşturduğumuz uygulamara etkileşim kazandırarak işlevselliğin artmasını sağlarlar. En basit örnek olarak sahne üzerindeki bir butona tıklanması da bir olaydır fakat sadece butonlara özgü birşey olmadığını da bilmemiz gerekir. Zamanla ilgili işlemlerde, harici olarak yüklenen bir dosyanın yüklemesi bittiğinde ya da animasyonumuz bittiğinde vb. daha bir çok şey sayılabilir. Sahne üzerinde kullandığımız objeler üzerindeki hakimiyetimizin artmasını sağlarlar. Temel olarak olayları objelerin çevresinde bulunan diğer objelerle etkileşime girmesi olarak ta açıklayabiliriz. Olay dinleyicilerde bu etkileşimleri dinlerler ve belirlediğimiz etkileşim gerçekleştiğinde kod bloklarının çalışmasını ya da diğer olay dinleyicilerin tetiklenmesini sağlarlar.

Oluşturacağımız uygulamalarda en fazla kullanacağımız olay sınıfları ve olaylar:

MouseEvent: Fare ile gerçekleşen olayları kontrol eder,

KeyboardEvent: Klavye olaylarını kontrol eder,

TimerEvent: Timer olaylarını kontrol eder,

Event: Genel olayları kontrol eder (örn.: Harici bir dosyanın yüklenip yüklenmediğini, belirli aralıklarla tetiklenmesi gereken olayları vb.).

MouseEvent olay sınıfının olaylarını inceleyecek olursak:

CLICK: Tıklama olayı,
DOUBLE_CLICK: Çift tıklama olayı (Bu olay için objenin doubleClickEnabled özelliğinin true olması gerekmektedir.),
MOUSE_DOWN: Farenin sol tuşuna basılı tutma olayı,
MOUSE_MOVE: Farenin hareket etmesi,
MOUSE_OUT: Farenin objenin üzerinden çıkması olayı,
MOUSE_OVER: Farenin objenin üzerinde olması,
MOUSE_UP: Fareye basılı tutmayı bırakma olayı,
MOUSE_WHEEL: Fare tekerleği ile gerçekleşen olaylar,
ROLL_OUT: Farenin butonun üzerinden çıkması olayı,
ROLL_OVER: Farenin butonun üzerinde olması

Kullandığımız objelere olay dinleyici atayabilmemiz için objeyi oluşturduktan sonra properties panelinde bulunan Intance Name kısmına mutlaka bir isim vermeliyiz ki ActionScript ile bu objelere müdahale edebilelim (Eğer Movie Clip kullanacaksak ornek_mc, buton kullanacaksak ornek_btn, yazi alanı kullanacaksak ornek_txt gibi.). Şimdi sahne üzerine bir obje ekleyelim ve Button olarak sembole dönüştürelim. Instance Name kısmına da deneme_btn yazalım. Sonrada yeni bir layer ekleyerek adını Action olarak değiştirelim ve F9 tuşu ile Actions panelini açıp aşağıdaki kodları yazalım.

deneme_btn.addEventListener(MouseEvent.CLICK, tiklama);

function tiklama(e:MouseEvent) {
trace("butona tıklandı");
}

Yazdığımız kodu açıklayacak olursak;

deneme_btn: Objeye verdiğimiz Instance Name,
addEventListener: Objemize olay dinleyici ekler,
MouseEvent.CLICK: Olay dinleyicimizin hangi olay sınıfını dinleyeceğini belirler, burada fare olaylarından CLICK olayını dinliyor,
tiklama: Belirttiğimiz olay gerçekleştiğinde çalışacak olan fonksiyonun adı,
function tiklama(e:MouseEvent): Buradaki bölümde fonksiyonumuzu tanımlıyoruz ve parantez içerisinde tanımladığımız fonksiyonun hangi olaya göre çalışacağını belirtiyoruz ve bloklar ( { } ) arasına da çalışacak olan kodlarımızı yazıyoruz.

deneme_btn isimli objemize bir olay dinleyici ekliyoruz ve bu olay dinleyici MouseEvent’larından CLICK olayını kontrol ediyor. Olay gerçekleştiğinde ise tiklama isimli fonksiyonu çalıştırıyor. Böylece istediğimiz etkileşimi gerçekleştirmiş oluyoruz.

Bir Objede Olay Dinleyici Olup Olmadığını Kontrol Etmek

Kullandığımız objelerde olay dinleyici olup olmadığını kontrol etmemiz gerekebilir. Bu işlemi gerçekleştirmek için hasEventListener metodunu kullanmamız gerekir. Kullanımı ise şu şekildekir:

if (deneme_btn.hasEventListener(MouseEvent.CLICK)) {
trace("deneme_btn isimli objede olay dinleyici var");
} else {
trace("deneme_btn isimli objede olay dinleyici yok");
}

Olay Dinleyicisini Kaldırma

Yaptığımız uygulamada kullandığımız olay dinleyicileri gerekli olduğu taktirde kaldırmamız yani iptal etmemiz gerekebilir. Bu işlem için removeEventListener metodunu kullanmamız gerekir. Kullanımı ise addEventListener ile aynıdır. Olay dinleyiciyi atadığımız satırda yapmamız gereken tek değişiklik addEventListener yerine removeEventListener kullanmaktır.

//objeye atadığımız olay dinleyiciyi kaldırıyoruz
deneme_btn.removeEventListener(MouseEvent.CLICK, tiklama);

Değişkenler ve Veri Türleri

Erol Demirer — Mon, 25 Jan 2010 20:23:43 +0000

Oluşturacağımız uygulamalarda değişkenleri bir takım bilgileri saklaması için kullanırız. Değişkenlere verilecek değerler sabit olacağı gibi, uygulama çalıştırıldıktan sonra kullanıcının yaptığı işlemlere göre sürekli değişiklikte gösterebilir. Kısaca değişkenleri içerisinde bilgileri saklayan aktarıcılar olarakta tanımlayabiriz.

Değişkenleri kullanmaya başlamadan önce tanımlamamız gerekmektedir. Kullanacağımız değişkenleri tanımlamak oldukça kolay ve basittir. Örneğin:

var degiskenAdi:Değişken Türü;
degiskenAdi = Değişken Değeri;

Örneği açıklayacak olursak;

Tüm değişkenler tanımlanırken var kelimesi ile başlamak zorundadır. Bu kelime ingilizce variable(değişken) kelimesinin kısaltılmışıdır. Sonrasında değişkene bir isim vermemiz gerekmektedir. Bu isim sayesinde tanımladığımız değişkene istediğimiz zaman ulaşmamız mümkkün olacaktır. Değişkenleri istediğimiz gibi isimlendirebiliriz. : operatöründen sonra değişken türümüzü belirlememiz gerekmektedir. Eğer yanlış bir veri türünü değişkene atayacak olursak derleyici hata mesajı verecektir. Değiişken türü olarakta uygulamamızda kullanacağımız veri türlerine göre farklı sınıflar tanımlayabiliriz. (Örneğin; Number, String, Sound, MovieClip, Shape, Array vb.)

İkinci satırda ise değişken adı yazıldıktan sonra = operatörü kullanılarak değişkenimize bir değer atanmıştır. Başlangıçta verilen değer uygulama çalıştığı sürece değiştirilebilir. Şimdi sayısal bir değişken oluşturalım ve oluşturduğumuz bu değişkenin değeri 25 olsun.

var degiskenSayi:Number;
degiskenSayi = 25;
trace(degiskenSayi);

Değişkenimizi tanımlamaya var kelimesi ile başladık sonrasında değişken ismimizi degiskenSayi olarak belirledik, : operatörünü kullanarak değişken türümüzü Number olarak belirledik. Bir alt satırda da değişkenimizin değerini 25 değerini atadık ve çıktı ekranına değişkenimizi yazdırdık. Çıktı ekranında değişkenimizin değerini görüntülenecektir. Yukarıdaki örnekte Number sınıfına ait bir değişken oluşturduk. Metinsel bir değişken oluşturmak istersek alttaki örnekte olduğu gibi String sınıfına ait bir değişken oluştumamız gerekecektir.

var isim:String;
isim = "Erol Demirer";
trace(isim);

Şu ana kadar değişkenlerimizi hep iki satırda oluşturduk. Değişkenleri oluştururken daha kısa yöntemlerde kullanabiliriz. Bir ya da birden fazla değişkeni tek satırda tanımlamamız mümkündür.

var a:Number = 25;

Bu tanımlama şeklide yukarıdaki tanımlamalarla aynı işlevi görecektir. Eğer bir satırda birden fazla değişken tanımlamak istersek dikkat edeceğimiz nokta tanımladığımız değişkenlerin hepsinin aynı değişken türünden olmasıdır. Aynı değere sahip 3 değişken tanımlamak istediğimizde aşağıdaki gibi tanımlayabiliriz.

var a, b, c : Number = 0;

Eğer tanımladığımız değişkenlerin değerleri farklı olacak ise;

var a, b, c : Number;
a = 4;
b = 8;
c = 12;

şeklinde değişkenlerimizi tanımlayabiliriz.

Tanımladığımız değişkenler sadece yazı ya da sayıları kullanmayız. Eğer uygulamamızda ses dosyaları ile çalışacaksak Sound sınıfını, zamanla ilgili işlemler yapacaksak Timer sınıfını kullanabiliriz. Bu sınıfları genişletmek mümkündür. (Örn.; MovieClip, Tween, Shape, BitmapData vb.) Bu sınıflara ait değişkenler oluştururken new operatörü kullanılarak değişkenler tanımlanabilir.

var ses:Sound = new Sound();
var yukleyici:Loader = new Loader();

Veri Türleri

Veri türleri ile objelerin hangi türde bilgi taşıyacaklarını belirleriz. ActionScript içerisinde farklı veri türleri mevcuttur. Bu veri türlerini genel olarak Metinsel (String), Sayısal(Number, uint, int) ve Mantık (Boolean) olmak üzere 3 ana başlık altında toplamamız mümkündür.

Metinsel (String) Veri Türü:

Metin, rakam, noktalama işaretleri vb. bir çok karakteri içerebilir. Örneğin Erol Demirer, Kocaeli, 23-08-1978 gibi.

String veri türüne ait değişkenlere atancak değerlerin ” “ operatörleri arasına yazılması gerekmektedir. Atanan değerlerde Türkçe karakter kullanımının herhangi bir sakıncası bulunmamaktadır.

var aciklama:String = "Lorem Ipsum is simply dummy text of the printing and typesetting industry.";

Sayısal Veri Türleri:

ActionScript içerisindeki üç farklı sayısal veri türü bulunmaktadır (Number, int, uint).

Number Veri Türü:

Temel olarak bakıldığında int ve uint veri türlerinide içerisinde barındıran veri türüdür. Tüm matematik işlemlerinde kullanılabilir. Negatif, pozitif ve ondalıklı sayıları kapsar.

var sayi:Number = 8.5;

int Veri Türü:

Açılımı integer (tamsayı) olan bu veri türü pozitif ve negatif tamsayıları kapsar, ondalıklı sayıları içermez.

var sayi:int = 5;

veya

var sayi:int = -5;

uint Veri Türü:

Açılımı unsigned integer (Belirsiz tamsayı) olan bu veri türünün int veri türünden tek farkı sadece pozitif tamsayıları kapsamasıdır. Minimum değeri 0(sıfır)’dır. Negatif sayıları içermez.

var sayi:uint = 5;

Mantık (Boolean) Veri Türü:

Bu veri türü true ve false değerlerini taşır ve genellikle karşılaştırmalarda kullanılır. Varsayılan değeri false olarak düzenlenmiştir.

var temas:Boolean;

if (temas==true) {
trace("Nesneler birbirine temas ediyor.");
}

şeklinde kullanılır.

ActionScript içerisinde yukarıdaki veri türlerinin dışında da kullanılan veri türleri bulunmaktadır. (Örn.; MovieClip, Tween, Shape, BitmapData vb.)

while, do..while Döngüleri ve Kullanımları

Erol Demirer — Sun, 24 Jan 2010 20:01:38 +0000

while döngüsüde kullanım olarak for döngüsüne benzer, fakat daha basittir. Kullanımı aşağıdaki gibidir:

while (koşul) {
//çalışacak olan kod bloğu
}

Basit bir örnekle açıklayacak olursak;

var i:Number=0;

while (i<5) {
//çalışacak olan kod bloğu
i++;
}

Örnekte ilk olarak bir değişken oluşturulmuş ve değer olarak 0 atanmıştır. while döngüsü içerisinde ilk olarak koşul yazılmış, sonrasında da kod bloğu yazılmıştır. Kod bloğunun içerisinde ilk olarak istediğimiz olayı gerçekleştirecek kod bloğunu yazıyoruz, sonra da değişkenimizin değerini arttırıyoruz. Böyece döngü koşul gerçekleştiği sürece yani değişkenin değeri 5′ten küçük olduğu sürece çalışacaktır.

Kullanımı bir örnekle daha pekiştirelim. Fakat bu sefer ki örneğimiz biraz daha karışık olsun. Mesela bir metnin içerisinde herhangi bir harften kaç tane olduğunu bulalım. İlk olarak iki değişkene ihtiyacımız olacak. Birincisi metin içerisindeki karakter sayısı kadar döngüyü çalıştırmak, diğeri ise belirlediğimiz harflerin metin içerisinde kaç tane olduğunu bulmak için gerekli olacak.

var i:Number=0;
var harfSayisi:Number = 0;

Sonra da bir metne ihtiyacımız olacak ve bu metni String türünden bir değişken olarak tanımlayacağız.

Evet metnimizi de oluşturduk. Sıra geldi döngümüzü oluşturmaya,

while (i<metin.length) {
if (metin.charAt(i)=="e") {
harfSayisi++;
trace("Yazı değişkeni içerisindeki e harfi sayısı: " +harfSayisi);
}
i++;
}

Döngümüzü metin içerisindeki karakter sayisi kadar çalıştırıyoruz. Döngü çalışmaya başladıktan sonra metin içerisinde e harfı olup olmadığını charAt metodunu kullanarak kontrol ediyoruz. Eğer varsa harfSayisi değişkenimizin değerini arttırıyoruz. Döngü her çalıştığında çıktı ekranına metin içerisinde kaç tane e harfi olduğunu yazdırıyoruz.

do..while Döngüsünün Kullanımı

do..while kullanım açısından diğer döngülerden biraz farklıdır. Diğer döngülerde ilk önce koşul kontrol edilip sonra döngü çalıştırılırken bu döngüde tam tersidir. Yani önce kod bloğu çalışır sonra koşul kontrol edilir. Kullanımı ise şu şekildedir:

var i:Number = 15;

do {
trace(i);
i++;
} while (i<8);

for, for..in, for each..in Döngüleri ve Kullanımları

Erol Demirer — Sun, 24 Jan 2010 19:56:42 +0000

for döngüsü kod blooğunun belirli bir sayıda tekrar etmesini sağlamak için kullanılır. Mantığı oldukça basittir. Önce bir değişken tanımlarız, sonra bu değişkene bir koşul atarız son olarakta değişkenin değeri arttırılarak ya da azaltılarak kod bloğunun kaç kez çalışacağını belirleriz. Kullanımı ise şu şekildedir.

for (değişken:Number; koşul; değer değiştirme){

// çalışacak olan kod bloğu

}

Bir örnekle açıklayacak olursak;

for (var i:Number=0; i<;20; i++) {
trace("i değişkeninin değeri: " + i);
}

Örnekteki kod bloğu 20 defa çalışacaktır. Biraz açacak olursak, ilk olarak nümerik bir değişken tanımlıyor ve bu değişkene bir değer atıyoruz(var i:Number=0), sonra döngünün koşulunu belirliyoruz, yani değişkenin değerinin 20′den küçük olup olmadığını kontrol ediyoruz (i<20), son olarakta değişkenin değerini değiştirerek i değeri 20 den küçük olduğu sürece değeri 1 sayı arttırıyoruz. Son olarakta bloklar ( { } ) içerisine çalışacak olan kod bloğunu yazıyoruz. Örnekte çıktı ekranına i değeri yazdırılmıştır.

Döngüyü farklı bir şekilde kullanmak istersek:

var sehirler:Array = new Array("İstanbul", "Ankara", "İzmir", "Antalya", "Rize", "Kocaeli", "Edirne", "Trabzon", "Rize", "Mersin", "Bolu");

for (var i:Number = 0; i<sehirler.length; i++) {
trace(sehirler[i]);
}

Örnekte ilk olarak sehirler isimli bir dizi değişkeni tanımlanıyor ve bazı şehirlerin isimleri bu dizi değişkenine değer olarak atıyoruz. Sonrasında bir döngü oluşturuyoruz ve döngü koşulunu sehirler değişkeninin element sayısına göre belirliyoruz (i

for..in Döngüsü ve Kullanımı

Yukarıda for döngüsü ile yaptığımız işlemi for in dögüsünü kullanarak daha basit bir şekilde yapabiliriz. for in dögüsü dizi elemanlarını ya da objelerin özelliklerini almak için kullanılır ve bu işlemi oldukça kolaylaştırır. Yukarıdaki işlemi for in döngüsü ile yapacak olursak:

for (var i:String in sehirler) {
trace(sehirler[i]);
}

Döngünün çalışma mantığı aynı, dizi içerisindeki eleman sayısı kadar döngünün çalışması sağlanıyor. Çıktı ekranında iki kullanımı karşılaştırdığınızda alınan sonucun aynı olduğunu göreceksiniz. Şimdi de bir objenin özelliklerine ulaşmayı deneyelim. Mesela bir arabamız olsun ve bu arabanın tekerlekleri, motoru, vitesi, aynaları gibi özelliklerini listeleyelim. İlk önce araba objemizi tanımlayalım.

var araba:Object = new Object();

sonrasında da araba isimli objemizin özelliklerini belirleyelim.

araba.Marka = "Renault Clio";
araba.Model = "2009";
araba.Renk = "Siyah";
araba.Tekerlekler = "Bridgestone";
araba.Motor = "2.0 Benzinli";
araba.Vites = "Otomatik";
araba.Koltuklar = "Deri";
araba.Camlar = "Filmli";

Evet araba objemizin özelliklerini de belirledik. Şimdi sıra geldi for in döngüsünü kullanarak bu özellikleri listelemeye, objeye özellikleri verirken nokta ( . )operatörünü kullandık. Normalde program içerisinde bu özellikler yok, fakat bir objeye bir takım özellikler vermek istediğimizde obje ismini yazdıktan sonra nokta operatörünü kullanarak özellik adını yazabiliriz. Sonrasında da kullandığımız özellikler için değerleri tanımlarız. Döngümüzü oluşturup değerleri çıktı ekranına yazdıralım.

for (var ozellik:String in araba) {
trace(ozellik+": " + araba[ozellik]);
}

Evet kod yazma işlemi bittiğine göre uygulamamızı Ctrl + Enter tuşları ile test ettiğimizde çıktı ekranında yazanların şı şekilde olması gerekiyor.

Koltuklar: Deri
Motor: 2.0 Benzinli
Tekerlekler: Bridgestone
Model: 2009
Renk: Siyah
Marka: Renault Clio
Camlar: Filmli
Vites: Otomatik

Çıktı ekranında önce özellikler sonra da özelliklerin değerleri görüntülenecektir.

for each..in Döngüsü ve Kullanımı

for each in dögüsünün for in döngüsünden tek farkı objenin özellik ya da fonksiyonlarına direkt olarak ulaşmasıdır. Yukarıdaki örneği for each in döngüsü ile kullandığımızda döngüyü şu şekilde oluşturmamız gerekiyor.

for each (var ozellik:String in araba) {
trace(ozellik);
}

Çıktı ekranı:
Deri
2.0 Benzinli
Bridgestone
2009
Siyah
Renault Clio
Filmli
Otomatik

Görüldüğü gibi sadece özelliğin kendisini alıyor. Özelliklere direkt olarak ulaşabildiği içinde XML objelerinde daha fazla kullanılmaktadır. Nedeni ise tagleri almayıp taglerin içerisinde bulunan özellikleri almasıdır.

Döngüler

Erol Demirer — Sun, 24 Jan 2010 19:54:23 +0000

ActionScript içerisinde döngüler kod bloklarını belirli bir sayıda ya da bir koşul gerçekleşene kadar çalıştırmak için kullanılır. Örneğin sahne üzerine aynı film klibinden 20 adet eklemek ya da benzeri işlemleri gerçekleştirebilmek için döngüler oldukça kullanışlıdır ve yazılan kod satırları daha kısadır.

Koşullu ifadelerle karşılaştıracak olursak, koşullu ifadelerde kod satırları koşul gerçekleştiğinde çalışırken döngülerde kod satırları koşul gerçekleşene kadar çalışmaya devam eder. Koşul yerine getirildikten sonra kod satırlarının çalışması derleyici tarafından durdurulur.

ActionScript içerisinde yer alan döngüler aşağıda sıralanmıştır:

for
for..in
for each..in
while
do while

Kısaca özelliklerinden bahsedecek olursak for döngüsü bir kod bloğunu belli bir sayıda çalıştırmaya, for..in döngüsü objelerin özelliklerini almak, dizi elemanlarına ulaşmak için, for each..in objenin özellik ve fonksiyonlarına direk ulaşılmak istendiğinde (genellikle XML objelerinde), while döngüsü belli bir işlem meydana gelene kadar kod bloğunu çalışması istendiğinde kullanılır.

Döngülerin detaylı açıklama ve kullanımları ile ilgili bilgileri diğer makalelerde bulabilirsiniz.

switch Koşullu İfadesi ve Kullanımı

Erol Demirer — Sat, 23 Jan 2010 00:40:17 +0000

switch koşullu ifadesi bir koşul olmak şartıyla bir çok kod bloğunu içerisinde barındırabilir. if koşullu ifadesinden farkı ise sonucu true ya da false olarak geri döndürmek yerine koşulun değerini alarak ifade seçimini yapar. Kullanımı aşağıdaki gibidir:

switch (koşul) {
case ifade1 :
//çalışacak kod bloğu
break;
case ifade2 :
//çalışacak kod bloğu
break;
case ifade3 :
//çalışacak kod bloğu
break;
case ifade4 :
//çalışacak kod bloğu
break;
default :
//çalışacak kod bloğu
}

if-else koşullu ifadesinde kullanılan örneğe uygulayacak olursak;

switch (ay) {
case "Ocak":
trace("Yılın ilk ayı ve mevsimlerden kış.");
break;
case "Mart" :
trace("Yılın üçüncü ayı ve mevsimlerden Bahar.");
break;
case "Temmuz" :
trace("Yılın yedinci ayı ve mevsimlerden Yaz.");
break;
case "Kasım" :
trace("Yılın onbirinci ayı ve mevsimlerden Kış.");
break;
default :
//Uygulamanın hangi ay olduğunu bulamadığında çalışacak olan kod bloğu.
}

Kullanıcıya aylar ile ilgili bilgiler verilmektedir. Koşula bağlı olarak ifadelerden hangisi uygunsa kullanıcıya verilen mesajda değişmektedir. Eğer ifadelere ulaşılamazsa default ifadesine bağlı olan kod bloğu çalışacaktır.

if..else if Koşullu ifadesi ve Kullanımı

Erol Demirer — Sat, 23 Jan 2010 00:37:28 +0000

if koşullu ifadesi bir koşul ve ona bağlı olarak çalışacak olan iki adet kod bloğundan meydana gelir. Eğer belirttiğimiz koşul meydana gelirse if ifadesinde belirtilen kod bloğu, koşul gerçekleşmezse else ifadesine bağlı olan kod bloğu çalışır. Kısaca özetleyeek olursak;

if (koşul) {
//Koşul meydana geldiğinde çalışacak olan kod bloğu
} else {
//Koşul meydana gelmezse çalışacak olan kod bloğu
}

Eğer bir örnekle pekiştirecek olursak;

var i:Number = 10;
var j:Number = 10;

if (i==j) {
//değişkenlerin değerleri birbirine eşitse çalışacak olan kod bloğu
} else {
//değişkenlerin değerleri birbirine eşit değilse çalışacak olan kod bloğu
}

Bu seferde eşit olup olmadığını değilde değerin büyük ya da küçük olup olmadığını kontrol edelim.

if (yas>=35) {
//Yaş 35 ya da daha büyükse çalışacak olan kod bloğu
trace("Yolun yarısı geçilmiş");
} else {
//Yaş 35'ten küçükse çalışacak olan kod bloğu
trace("Yolun yarısına daha var");
}

if ifadesini else ifadesi olmadan da kullanabiliriz. Sonuç olarak baktığımızda else ifadesindeki kod bloğu koşul meydana gelmezse çalışacaktır. Eğer belirttiğimiz koşul oluşmadığında herhangi bir işleme ihtiyaç duymuyorsak if ifadesini tek başına kullanabiliriz.

if (deneme_mc.x>=500) {
deneme_mc.stop();
}

Örnekte sahne üzerinde bulunan deneme_mc isimli sembolün x eksenindeki konumunun 500′e eşit ya da büyük olup olmadığı kontrol ediliyor ve nesnenin x konumu bu değere ulaştığında ya da geçtiğinde sembol durduruluyor.

if-else if – else Koşullu İfadesinin Kullanımı

Bu kouşullu ifadenin kullanımı da temel olarak if ifadesi ile aynıdır. Aralarındaki fark ise bu ifadede kontrol edilecek koşul sayısının en az iki ya da daha fazla olmasıdır. Yani hazırlayacağımız uygulamada kullanacağımız koşullu ifadelerle farklı kullanıcıların, farklı hareketlerine göre etkileşimler oluşturarak uygulamamızın daha gelişmiş olmasını sağlayabiliriz. Kullanımı aşağıdaki gibidir:

if (birinciKoşul) {
//birinci koşul oluştuğunda çalışacak kod bloğu
} else if (ikinciKoşul) {
//birinci koşul oluşmaz ise ikinci koşula bağlı olarak çalışacak kod bloğu
} else if (üçüncüKoşul) {
//diğer koşullar oluşmaz ise ikinci koşula bağlı olarak çalışacak kod bloğu
} else {
//koşulların hiç biri oluşmaz ise çalışacak olan kod bloğu
}

Bir örnekle pekiştirecek olursak:

if (ay == "Ocak") {
trace("Yılın ilk ayı ve mevsimlerden kış.");
} else if (ay == "Mart") {
trace("Yılın üçüncü ayı ve mevsimlerden Bahar.");
} else if (ay == "Temmuz") {
trace("Yılın yedinci ayı ve mevsimlerden Yaz.");
} else if (ay == "Kasım") {
trace("Yılın onbirinci ayı ve mevsimlerden Sonbahar.");
} else {
//Uygulamanın hangi ay olduğunu bulamadığında çalışacak olan kod bloğu.
}

Uygulamada aylar ile ilgili bilgiler verilmektedir. Yılın kaçıncı ayı olduğu, hangi mevsim olduğu gibi. Eğer uygulama ay bilgisine ulaşamaz ise yani hiç bir koşul oluşmaz ise else ifadesine bağlı olan kod bloğu çalışacaktır. Uygulamada kullanacağımız else if sayısını istediğimiz kadar arttırabiliriz. Böylece uygulamamız kullanıcıların yaptığı işlemlere göre farklı tepkiler vererek daha da zenginleşmiş olacaktır.

Koşullu İfadeler Nedir? Ne İşe Yarar?

Erol Demirer — Sat, 23 Jan 2010 00:36:11 +0000

Koşullu ifadeler yaptığımız uygulamanın daha mantıklı olması için kullanılır. Yani gerçekleşen etkileşimlere, olaylara göre uygulamanın karar vermesini sağlayabiliriz. Uygulamanın bu kararları verebilmesi için bizim belirttiğimiz bir takım şartların gerçekleşmesi gerekmektedir. Bu sayede kişiye ya da verilen kararlara göre değişen gelişmiş uygulamalar geliştirebiliriz.

Bu ifadeler içerisinde yer alan kod blokları sadece belirlenen koşulun yerine getirilmesi ile çalışır. Koşullu ifadeler ile çok seçeneği bulunan işlemlerde belirlenen koşullar sayesinde doğru olan işlemin yapılmasını sağlayabiliriz. Koşullu ifadelerin tümü temelde Boolean mantığına göre çalışır. Koşul yerine getirildiyse true değerini döndürür ve işlem gerçekleşir, eğer koşul yerine getirilmediyse false değerini geri döndürür.

ActionScript 3.0 içerisinde kullanılan koşullu ifadeler şunlardır:

if, else
if, else if , else
switch

Koşullu ifadelerin kullanımları ile ilgili bilgilere diğer makalelerde bulabilirsiniz.

ActionScript Yazım Kuralları ve Operatörler

Erol Demirer — Fri, 22 Jan 2010 00:31:50 +0000

Günlük hayatta yazmak ve konuşmak için kullandığımız dillerde olduğu gibi ActionScript programlama dilinin de kendine özgü yazım kuralları mevcuttur. Bu kurallar bize uygulama oluştururken neyin nerede kullanılacağı konusunda yardımcı olur. Eğer yazımda bir hata varsa örneğin “.” yerine “,” kullanılırsa yapılan derleyici hata verecek ve uygulama çalışmayacaktır.

ActionScript BÜYÜK ve küçük harfe duyarlı bir dildir. Eğer aynı kelime iki farkllı şekilde yazılırsa;

daire

Daire

Derleyici bu iki kelimeyi de iki farklı obje olarak algılayacaktır. Bu yüzden özellikle değişken isimlendirmelerinde verilen isimlere dikkat etmek gerekir. Çünkü iki farklı yazım şekliyle değişkene ulaşmak mümkün değildir. Her zaman için isimlendirirken kullandığımız şekilde kullanmalıyız. ActionScript ile bir takım işlemleri yapabilmek (örn: Objelerin alt özellikleri, satır sonlandırma vb.) bazı operatörler kullanılır. Bu operatörler aşağıda sıralanmıştır.

Nokta( . ) :

Bu operatör ile objelerin özelliklerine (porperties) ulaşabilmemiz ve müdahale edebilmemiz mümkündür. Objenin özelliklerinin birbirinden ayrılmasını sağlar. Kullanım şekli ise şöyledir;

deneme_mc.x = 125;

deneme_mc.alpha(0.5);

Noktalı Virgül ( ; ) :

Bu operatör satırları sonlandırmada kullanılır. Eğer kod satırı bu operatör ile kapatılmazsa derleyici noktalı virgül operatörünü ( ; ) gördüğü yere kadar tüm satırları tek bir satır olarak yorumlayacaktır.

var a:Number = 10;

trace (a);

Parantez ( ( ) ) :

Parantezler AS içerisinde farklı şekillerde kullanılabilir. Parantezleri kullanarak yorumlanacak satırın sıralaması değiştirilebilir. Burada bildiğimiz basit matematik mantığı işler. Yani önce parantez içerisindeki sayılar hesaplanır sonra diğerleri.

trace ( 5 + 9 / 2);

trace ((5+9) / 2);

Yukarıdaki kod satırlarını yazdığınızda çıkacak iki sonucunda birbirinden farklı olduğunu göreceksiniz.

İkinci olarak parantezler virgül ile birlikte kullanılarak birden fazla işlem yapmaya yarar.

var a:Number = 8;

var b:Number = 3;

trace(a-b, a+b, a*b);

Örnekte a ve b isimli iki değişken oluşturulmuş ve değerler atanmıştır. Sonrasında parantez içerisinde ilk olarak bir çıkarma işlemi yapılmış, sonrasında değerler birbirleri ile toplanarak çarpılmıştır. Böylece parantez içerisinde üç farklı işlem gerçekleştirilmiştir.

Son olarak parantezler metot ve fonksiyonlara parametre göndermede kullanılır.

deneme_mc.gotoAndSt0p(5);

Örnekte deneme_mc isimli objeye gotoAndStop metotu uygulanmış kaçıncı kareye gidip duracağı ise parantez içerisindeki parametre ile belirlenmiştir.

Bloklar ( { } ) :

Bu operatörler arasında kalan satırlar bir kod bloğunun parçasıdır diyebiliriz. Daha basit bir açıklama ile satırları gruplandırmaya yarar.

if (i==25) {

araba_mc.play();

gotoAndPlay(8);

}

Yukarıdaki örnekte i değişkeninin değer 25 olduğunda çalışması gereken kod satırları { } operatörlerinin arasına yazılmıştır. Eğer i değişkeninin değeri 25 değilse bloklar arasındaki kod satırları çalışmayacaktır.

Yorumlar (//, /* */);

Yazdığımız kodları sonrasında değiştirmek ya da tekrar kullanmak isteyebiliriz. Aradan geçen zaman sürecinde değişkenlerin, fonksiyonların nerede ve ne için kullanıldığı unutulabilir. Bu tip durumlarla karşılaşmamak için yazdığımız kodlara açıklama ekleyebiliriz. Yazdığımız kodlara açıklama eklemek için aşağıdaki yöntemleri kullanabiliriz.

//Tek satırlı yorum.

/* Çok

satırlı

yorum*/

Arttırma ve Azaltma (++, –)

Varolan sayısal değerleri 1 sayı arttırmak veya azaltmak için kullanılırlar.

var sayi:Number = 10;
trace (sayi++); //11
trace (sayi–);//10

Kullandığımız değişkeni başka bir değişkene değer atarken dikkat etmemiz gereken bir nokta ise operatörlerin değişkenden önce mi sonra mı olması gerektiğidir.

var sayi2:Number;
sayi2 = sayi++ //Sonuc 10 olarak geriye dönecektir.
sayi2 = ++sayi //Sonuç 11 olarak geri dönecektir.

Bileşik Matematiksel İşlem Operatörleri (+=, -=, *=, /=, %=)

Bu operatörler ile yapılan işlemin sonucunu ilk değere atayabiliriz.

var sayi:Number = 10;
sayi += 1;
sayi -= 5;
sayi *= 2;
sayi /=5;
sayi %= 2;

şeklinde kullanılırlar.

Eşitlik ve Eşitsizlik Operatörleri ( ==, !=)

Verileri karşılaştırarak birbirlerine eşit olup olmadıklarını kontrol etmek için kullanılırlar. Sonucu true ya da false olarak geri döndürür.

var sayi1:Number = 8;
var sayi2:Number = 15;

if (sayi1==sayi2){
//değerler birbirine eşitse çalışacak olan kod bloğu
}

if (sayi1!=sayi2){
//değerler birbirine eşitse çalışacak olan kod bloğu
}

İlişkisel Operatörler ( >, >=, <, <= )

İlişkisel operatörlerin çalışma mantığı Eşitlik operatörleri ile aynıdır. ARadaki tek fark İlişkisel Operatörler değerlerin birbirinden küçük ya da büyük olup olmadıklarını karşılaştırırlar.

var sayi1:Number = 10;
var sayi2:Number = 20;

if (sayi1 //sayi1 değeri sayi2 değerinden küçükse çalışacak kod bloğu
}

sayi2 -= 10;

if (sayi1>=sayi2) {
//sayi1 değeri sayi2 değerinden büyük ya da eşitse çalışacak olan kod bloğu
}

Mantıksal Operatörler ( &&, ||)

Birden fazla şartı aynı anda kontrol edebilmek için kullanılan operatörlerdir. && operatörü ve anlamına, || operatörü veya anlamına gelir.

var sayi1:Number=10;
var sayi2:Number=12;
var sayi3:Number=18;
var sayi4:Number=18;

if (sayi1 //sayi1 değeri sayi2 değerinden küçükse ve sayi3 değeri ile sayi4 değeri birbirine eşitse çalışacak olan kod bloğu
}

if (sayi1==sayi2 || sayi3==sayi4) {
//sayi1 değeri, sayi2 değerine veya sayi3 değeri, sayi4 değerine eşitse çalışacak olan kod bloğu
}

ActionScript Nedir?

Erol Demirer — Fri, 22 Jan 2010 00:29:38 +0000

ActionScript, Flash Player için oluşturulan içeriklere etkileşim kazandırmak için kullanılan programlama dilidir. ActionScript programlama dili Flash ve Flex programları ile kullanılmaktadır. Bu dil ile etkileşimli, sonrasında update edilip geliştirilebilen uygulamalar geliştirmek mümkündür. ActionScript ile yapılacak bazı işlemlere kısaca göz atacak olursak;

Fare ya da klavye olaylarına yanıt verilebilir,
Harici dosyalarla çalışılabilir (Ses, görsel, metin, video),
Çizim ya da boyama yapılabilir,
Yapılan uygulamaların yazıcılardan çıktısının alınması sağlanabilir,
Matematik ya da Fizik hesaplamaları yaptırılabilir,
Animasyonlar hazırlanabilir.

ActionScript dilinin 1.0, 2.0 ve 3.0 olmak üzere üç farklı sürümü bulunmaktadır. Bunların en günceli Adobe Flash CS3 sürümü ile birlikte kullanılmaya başlanan ve Nesne Tabanlı Programlama (Object Oriented Programing)’ya geçiş yapılmıştır. Sitede inceleyeceğiniz tüm örnekler ActionScript 3.0 ile hazırlanmıştır. ActionScript 3.0′ın gelmesiyle birlikte varolan bir çok alışkanlık değişmeye mecbur kalmıştır. Daha önceki sürümlerde kullanılan sembollerin üzerine, Timeline’da herhangi bir kareye kod yazılabilirken AS 3.0 ile sadece Anahtar Kareler (Key Frame)’e kod yazılabilmektedir. Böylece yazılan kodların daha derli toplu olması ve sonrasında herhangi bir değişiklik yapılmak istendiğinde yazılmış olan kodların daha kolay bulunabilmesi sağlanmıştır. ActionScript kullanımı ile ilgili daha detaylı bilgilere diğer makaleleri takip ederek ulaşabilirsiniz.

Tekrar Merhaba…

Erol Demirer — Tue, 19 Jan 2010 22:17:06 +0000

Bir kaç ay önce kendi sitem üzerinden başlamış olduğum actionscript ile ilgili makale yazma olayını artık buradan devam ettireceğim. Sizlerin desteğinden güç alarak böyle bir olaya giriştim. Umarım yeni arayüz ve konulardan memnun kalırsınız. Hosting konusunda desteklerini esirgemeyen BMT Network‘e vermiş oldukları kaliteli hizmetten dolayı teşekkür ederim.

Umarım herşey gönlünüzce olur ve sitede aradıklarınızı bulursunuz.

Sevgilerle