Flash’a Giriş

Yazan: karflake | Tarih 18 Aralık 2007 | Yorum  10 Yorum
BerbatKötüOrtaGüzelHarika 3 kez puan verildi, Ortalama: 5 (5 üzerinden)
Loading ... Loading ...

Sayfalar: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

BİR SİTEYİ TAMAMEN İLE OLUŞTURMA

’ta komple bir web sitesi aşağıdaki gibi yapılır:

Öncelikle 400×300 boyutunda bir belgesi oluşturulur. Daha sonra yukarıdan aşağıya; as, etiket, içerik, düğmeler, banner katmanları oluşturulur.

Daha sonra banner katmanında üst tarafa 60 pixel yüksekliğinde gradyanlı bir bölüm eklenir. Bunu yapabilmek için üst tarafa bir dikdörtgen 60 pixel yüksekliğinde bir dikdörtgen, dış çizgisi olmadan çizilir. Daha sonra renk paletindeki gradyan bölümünün ilk hazır renk stili seçilir.

renkpaleti

Yukarıda da görüldüğü gibi gradyan soldan sağa doğru renk değiştiriyor. Bunu yukarıdan aşağıya olarak değiştirmek için Gradient Transform Tool seçilir.

gradyan4

Bu araç çizilen dikdörten seçili iken kullanıldığında yukarıdaki gibi dikdörtgenin üst tarafında boş bir daire belirir. Bu daire kullanılarak gradyanın yukarıdan aşağıya çevrilmesi sağlanır. Dairenin alt tarafında görünen içinde ok olan dikdörtgen ile de gradyanın renk değişim büyüklüğü değiştirilir. En son dikdörtgen aşağıdaki gibi görünmelidir.

gradyanson

Bir sonraki adımda sol üst köşeye Meb logosu eklenir. Logoyu arka planla uyumlu hale getirebilmek için şu işlemler yapılır. Öncelikle Ctrl+R ile meb logosu sahneye getirilir. Free transform tool ile boyutu banner’ın sol üst köşesine uygun hale getirilir. Logo yukarıda hazırlanan gradyanlı bölüme değil de, sahnenin beyaz bölümüne yerleştirilir. Daha sonra Modify-Bitmap-Trace Bitmap komut verilir. Bu komut verildiğinde aşağıdaki gibi bir ekran görüntüsü ile karşılaşılacaktır.

meblogo

Logo yukarıdaki hale geldikten sonra bir kez dışarıda bir yere tıklanır, daha sonra yukarıdaki şekilde gri olarak gösterilen yerlerden birine tıklanıp delete ile grafiğin arka planı silinir. Daha sonra grafiğin geri kalanı olması gereken yere, yani gradyanlı çizilen dikdörtgenin sol üst köşesine yerleştirilir. En son sitemizin banner kısmı aşağıdaki gibi olmalıdır. Daha sonra “HAYALİ İLÇE MİLLİ EĞİTİM MÜDÜRLÜĞÜ” yazısı banner’a eklenir.

banner1

Daha sonra düğmeler katmanı gidilip, hazır düğmeler eklenir. Bunların yazıları silinir. Düğmelere ana_btn, personel_btn, bolumler_btn, ataturk_btn, bilgi_btn isimleri verilir. Yeni bir düğme yazıları katmanı oluşturulup bunlara düğmelerin yazıları yazılır.

Yukarıdaki işlemden sonra etiket katmanına gidilerek bu ilk frame’e anasayfa etiketi verilir. 10. frame’e personel, 20. frame’e bolumler, 30. frame’e ataturk, 40. frame’e bilgiedinme etiketleri verilir.

etiket1

Daha sonra her bölümün anahtar karesinin olduğu yere içerik katmanında gidilir. Anasayfa için günbatımı.jpg, Personel için birkaç tane resim, Bölümler içinse yazı eklenir. Bölümlere yazı ekleyebilmek için A aracı yazı yazılır, türü DynamicText seçilir. Özelliklerinden Multiline seçilir. Daha sonra sağ tıklanarak Scrollable özelliği işaretlenir. http://www.lipsum.com/ adresinde gidilip beş paragraflık yazı yazdırılır. Yazı nesnesine çift tıklanarak bu beş paragraflık yazı yapıştırılır. Nesneye bilgi_txt adı verilir. İstenirse bu yazının seçilebilir olması, selectable onay kutusu işaretlenerek sağlanır. Bu yazıya scroll kutusu eklemek için şu işlemler yapılır. Window menüsünden Components seçilir. User Interface bölümünden UIScrollBar seçilir ve formun üstüne, yazı nesnesi ile üst tarafları eşleşecek şekilde konur. Daha sonra bu komponentin _targetInstanceName özelliğine bilgi_txt değeri girilir. Böylece kod yazmadan scroll’un çalışması sağlanır. Daha sonra Ataturk bölümüne gidilir ve Atatürk’ün bir resmi eklenir. Son olarak da bilgiedinme bölümüne gidilir ve 5 tane yazı alanı çizilir, tipleri Input text yapılır, Properties’lerinden Show border around text işaretlenir. Window-Components bölümünden bir tane button konulur ve parameters’indaki label bölümünden üzerindeki yazı değiştirilir. Son olarak da as katmanına gidilir ve ilk kareye boş bir keyframe F7 ile konulur. Aşağıdaki kod yazılır.

stop();

_root.ana_btn.onRelease=function(){

gotoAndStop(”anasayfa”);

}

_root.personel_btn.onRelease=function(){

gotoAndStop(”personel”);

}

_root.bolumler_btn.onRelease=function(){

gotoAndStop(”bolumler”);

}

_root.ataturk_btn.onRelease=function(){

gotoAndStop(”ataturk”);

}

_root.bilgi_btn.onRelease=function(){

gotoAndStop(”bilgiedinme”);

}

’ta hazırlanan bir site yerelde son derece hızlı olarak çalışmasına rağmen, internete konulduğunda, ilk frame’in tamamı download edilene kadar kullanıcıyı bekletir. Bu frame download edildikten sonra site görünür ama tamamı download edilene kadar da tüm bölümleri düzgün çalışmaz. Bu sorunu engellemek için pre loader’lar kullanılır. Pre loader’a yazılacak ActionScript kodu ile tüm site indirilmeden sitenin görünmesi engellenir.

Bir sitenin internetten ne kadar hızla indirileceğini anlamak için Ctrl+Enter yapıldıktan sonra açılan Player’da View menüsünden Simulate Download seçeneği seçilir. Bir alttaki seçenek olan Download Setting ile de hangi hızın simüle edileceği ayarlanır.

Daha sonra bu site için bir preloader şu şekilde yapılır: as dışındaki tüm katmanlar seçilir ve bir kare sağa kaydırılır. En alta ön yükleyici katmanı oluşturulur. Bu katmanın sadece ilk frame’i görünecek, diğer frame’ler Shift+F5 ile silinir. Daha sonra bu katmanda Crtl+F8 ile yeni bir Movie Clip oluşturulur ve içine girilir. Yazı aracı ile YÜKLENİYOR yazılır. 10. frame’e gidilip F6 ile keyframe eklenir ve yazının sonuna bir . eklenir. 20. frame’e gidilip F6 ile dolu keyframe eklenir, yazının sonuna bir nokta daha eklenir. 30. ve 35. frame için de aynı işlem yapılır. 40. frame’e gidilip F5 ile boş frame eklenir. Daha sonra as katmanındaki ilk frame ikinci frame’e kaydırılır. Sonra birinci frame’e geçilir ve aşağıdaki kod eklenir.

stop();

toplam=_root.getBytesTotal();

//trace(toplam);

_root.onEnterFrame=function(){

yuklenen=_root.getBytesLoaded();

//trace(yuklenen);

if (yuklenen==toplam) {

gotoAndStop(”anasayfa”);

delete _root.onEnterFrame;

}

}

Daha sonra on yükleyici katmanına bir Dynamic text yazılır, adı oran_txt olarak verilir. İçine 100% yazılır. Ve yukarıdaki kod aşağıdaki şekilde değiştirilir.

stop();

toplam=_root.getBytesTotal();

//trace(toplam);

_root.onEnterFrame=function(){

yuklenen=_root.getBytesLoaded();

//trace(yuklenen);

oran=Math.round(yuklenen/toplam*100);

//trace(oran);

oran_txt.text=”%”+oran;

if (yuklenen==toplam) {

gotoAndStop(”anasayfa”);

delete _root.onEnterFrame;

}

}

İlerleme çubuğu da yapmak için ilerleme çubuğu adında yeni bir Movie Clip oluşturulur. Instance Name’i ilerleme_mc verilir. İçine 300 genişliğinde 5 yüksekliğinde çizgisi beyaz içi yeşil bir dikdörtgen çizilir. Burada yukarıdan aşağıya as, çizgi ve dolgu katmanları oluşturulur. Çizgi, çizgi katmanına taşınır. Daha sonra 100. frame’e gidip F6 ile dolu frame eklenir. Birinci frame’e dönülüp dolgunun büyüklüğü 1 yapılır. Sonra da shape tween yapılır. Bu movie clip %100 yazısının önüne eklenir. Action Script kodu aşağıdaki şekilde değiştirilir.

stop();

toplam=_root.getBytesTotal();

//trace(toplam);

_root.onEnterFrame=function(){

yuklenen=_root.getBytesLoaded();

//trace(yuklenen);

oran=Math.round(yuklenen/toplam*100);

//trace(oran);

oran_txt.text=”%”+oran;

ilerleme_mc.gotoAndStop(oran);

if (yuklenen==toplam) {

gotoAndStop(”anasayfa”);

delete _root.onEnterFrame;

}

}

Sayfalar: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

Yazdır Yazdır | 9,790 Görüntülenme | Kategori: Flash & Action Script & Flex & Silverlight, Web Grafik Tasarımı | Trackback  Geri İzleme
Etiketler  Etiketler: , ,

Benzer Yazılar


Yorum Yap


(gerekli)

(gerekli,yayınlanmaz)




XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>