Anasayfa

Dersler

Flash'da Tam Ekran, Movieclip hizalama ve Arkaplan kaplaması hazırlama

(9 votes)

Yazar Ersin KATIRCI

Salı, 09 Şubat 2010

Merhaba, bu dersimiz birçok kişinin sorunu diye tahmin ettiğim tam ekran flash çalışmalar, ekran hizalaması ve bir resimi kaplama olarak flashda kullanma konusu ile ilgilidir. Ayrıca küçük bir resimi nasıl flashda arkaplan kaplaması haline getirileceğinide dersimizde işleyeceğiz. Dersimiz 3 Bölümden oluşmaktadır.

Hizalama
Kaplama
HTML Dosya Ayarları

Bölüm 1: Sahne Hizalama

Öncelikle flash çalışmamızda yeni bir layer açalım ve herhangi bir kare çizelim yada bir resim atalım.

Daha sonra bunu MovieClip haline getiriyoruz ve registration noktasını da orta olanı seçerek tamam diyoruz.

MovieClip nesnemizin properties name kısmında ki instance name kısmına "logo" ismini belirleyelim.

Şimdi Timeline kısmından frame'i seçerek actionscript panelimizi açıyoruz.

İşimizin hizalama kısmı için aşağıdaki kodları giriyoruz.

logo._x = Stage.width /2;
logo._y = Stage.height /2;

Bu kod ile ilk açılış sahnesinde nesnemizi Sahne ortasına almış oluyoruz. Stage sahne boyutunu verir ve Stage.width /2 sayesinde sahenin genişliğini 2ye bölerek nesneyi de ona göre ortalamış oluyoruz. Unutmayın width genişlik değeri height ise yükseklik değerini ifade eder. Eğer registration noktasını orta yerine sağ köşe yada başka bir yerden belirlerseniz ortalı bir şekilde ekranda gözükmez.

Şuan ki yaptığımız kısımda sadece ilk açılışta logo isimli movieclip sahne ortasında durur fakat köşelerden çektiğimizde ise durum değişir bunun için ise aşağıdaki kodları actionscript panelimize ekliyoruz.

var stageL:Object = new Object();
stageL.onResize = function (){

logo._x = Stage.width /2;
logo._y = Stage.height /2;
}

Stage.addListener(stageL);

Burada stageL tanımlama ismidir yani kendiniz istediğinzi bir isimi de belirtebilirsiniz. Yazdığımız bu kod sayesinde boyut her değiştiğinde flash sahnesinin yeni boyutu ne olursa olsun sahnemizin ortasında kalacaktır.

Diğer bölgelere yerleştirmek için ise ;

Sol üst için:

logo._x = 0;
logo._y = 0;

Sağ üst için:

logo._x = Stage.width;
logo._y = 0;

Sol orta için:

logo._x = 0;
logo._y = Stage.height/2;

Sağ orta için:

logo._x = Stage.width;
logo._y = Stage.height/2;

Sol alt için:

logo._x = 0;
logo._y = Stage.height;

Sağ alt için:

logo._x = Stage.width;
logo._y = Stage.height;

Eğer ortada kullanacaksanız / 2 (Stage.width /2 gibi) belirtmeniz yeterli olacaktır. Eğer belli bir uzaklık yada yakınlık olacak ise + ve - değerlerini kullanabilirsiniz Örnek: logo._x = Stage.width + 50

Not: Unutmayın MovieClip'inizi nereye hizalamak istiyorsanız registration noktasını ona göre seçmelisiniz.

BÖLÜM 2: ARKAPLAN KAPLAMA

Öncelikle zemin için seçtiğimiz dosyayı kütüphaneye ekliyoruz. Bu işlemi isterseniz sahneye bir resim alıp daha sonra silerek yada File>Import> Import to Library kısmından doğru da yapabilirsiniz.

Sonrasında Linkage kısmından yada kütüphanede sağ tıklayarak properties kısmından Advenced'a tıklayarak Linkage bölümünü açıyoruz. Export for ActionScript kısmını seçerek Identifier kısmına zeminkaplama yazıyoruz. ( Kendiniz de bir isim belirtebilirsiniz fakat kod kısmında belirtmeyi unutmayınız.)

Daha önce yazmış olduğumuz kodların en başına

import flash.display.BitmapData;

ekliyoruz ve az önce yazdığımız ilk hizalama kodlarının altına

var zemin:BitmapData = BitmapData.loadBitmap("zeminkaplama");

function arkaplan() {
    this.beginBitmapFill(zemin);
    this.moveTo(0,0);
    this.lineTo(Stage.width,0);
    this.lineTo(Stage.width,Stage.height);
    this.lineTo(0,Stage.height);
    this.lineTo(0,0);
    this.endFill();
}

arkaplan();

kodunu ekliyoruz. BitmapData kütüphanesini kullanarak arkaplanda "zeminkaplama" görselimizi döşeme yapıyoruz. Kodumuzda var:zemin tanımlama ismidir ("zeminkaplama") ise kütüphanede ki görselimizin Identifier de verdiğimiz ismidir. Bu şekilde görselimizi çağırarak işleme yapıyoruz.
Kullanılan diğer kodlar ile ilgili detaylı derslerimizde olacaktır.

Şuan ki işlemde sadece ilk açılış ebatlarına göre kaplama olacaktır bu işlemi her sayfa oranı değiştiğinde göstermek için

var stageL:Object = new Object();
stageL.onResize = function (){

logo._x = Stage.width /2;
logo._y = Stage.height /2;
}

Stage.addListener(stageL);

Kullandığımız kod kısmında hizalama kodunun hemen öncesinde yada sonrasında (logo._x ve _y ile yapılan kısımın) arkaplan(); kodunu eklemeniz yeterli olacaktır.

3: HTML DOSYASIMIZIN HAZIRLANMASI

Sahne üzerinde boş bir yere tıklayarak Properties Panelinden profile kısmında ki edit ile yada File menüsünden Publish settings (Ctrl+Shift+F12) ile yayınlama ayarları kısmına geliniz.

Buradan HTML sekmesine tıklayarak html dosya ayarlarına geliyoruz.

Dimensions: kısmında Match Movie yerine Percent seçili hale getiriyoruz ardından Width ve Height değerlerine 100 değerini giriyoruz.

Scale bölümünden ise Default(Show all) yerine No Scaleyi seçiyoruz.

Flash alignment bölümünden ise Horizontal: Left Vertical ise Top olarak seçiyoruz.

Dosyanız kayıtlı ise Publish dediğinizde dosyanızın kayıtlı olduğu yere flash dosyanız ile aynı isimde bir html dosya oluşacaktır. Biz örnek olarak index kullandık ve index.swf dosyamızın yanında index.html dosyamız oluştu. ( Dosya isimleri index olarakda gelebilir windows pencere ayarlarından bilinen dosya uzantılarını gizle seçeneği ile uzantıları belirtebilir yada kaldırabilirisiniz).

Şimdi index.html dosyamıza sağ tıklayarak not defterinde açıyoruz ve kodlarımız içinde </head> tagının hemen öncesine

kodunu giriyoruz ve dosyamızı kaydedip çalıştırıyoruz.

SONUÇ

ÖRNEK DOSYA İNDİR

Arkaplan Kaynak Dosyası

İndirme Linki:http://rapidshare.com/files/348425888/background.rar

Ayrıca bu adresten de çeşitli arkaplanlar edinebilirsiniz..

http://squidfingers.com/patterns

Not: Dosya kendi yüklememizdir. İçinde ki arkaplan resimlerini photoshop ile istediğiniz ebata getirebilirsiniz. (isterseniz 32*32 piksel olarak bile kullanabileceğiniz resimler mevcuttur. Unutmayın ki piksel oranı büyüdükçe resim boyutu artar bu da çalışmanızın ağır gelmesine sebebiyet verir.)

NOT : Resimlerde bilinçli olarak copyright yazısı işlenmemiştir. Dersi kendi sitelerinde paylaşmak isteyen arkadaşların kaynak göstererek kullanmaları rica olunur.

Ders ile ilgili tüm sorularınızı Bu mail adresi spam botlara karşı korumalıdır, görebilmek için Javascript açık olmalıdır adresimize mail atabilirsiniz. Teşekkür etmek veya sitemize destek olmak için aşağıda ki reklamlardan birine tıklamanız yeterli olacaktır.

Favorilerime Ekle

Bookmark

Tavsiye Et