Basit Flash Eğitimi

FLASH'A GIRIS....

Flash'i tanimadan önce web sayfasinin ne gibi teknolojiler içerdigine bakalim.
Öncelikle web sayfalarinin içerik olarak iki elemandan olustuklarini söleyebiliriz.Bunlardan birincisi text'ler , ikincisi Bitmaolardir.
Web sayfalarinda bulunan her karekter , sayfayi olusturan html dosyasinin uzunlugunu bir byte arttiracaktir. Bir sayfada yaklasik 3000 harf oldugu ve karakter sayisinin sayfa uzunluguna aynen yansidigi düsünülürse , her sayfa dosya uzunlugunun 3000 byte (3kb) artmasina neden olacaktir.
Web sayfasinin içerigini olusturan ikinci elemanlar ise , sayfalara esas agirligi veren ve sayfalarin tarayiciya yüklenmesini zorlastiran bitmap (resim) çalismalardir. Bu durum bitmap resimlerin çalisma prensipleri nedeniyle HTML dosyasi içinde fazla alan kaplamalarindan kaynaklanmaktadir.
Bitmap çalismalarin boyutlari pixel (nokta) olarak verilir. 200x300 pixel olarak verilen bir resmin genisligi 200 nokta, yüksekligi ise 300 noktadan olusur. Resmin toplamda kapladigi alan ise 60.000 noktadir. Resmi olusturan her renk ve sekilile ilgili bilgiler , bu noktaciklarin içinde teker teker saklanir. Her resim için ölçü olmasada , yukarida ölçüleri verilen resmin en sikistirilmis hali 60.000 Byte olrak kabul edilir. Tam sayfa bir yazinin ekranimiza gelmesi tahmini 1-2 saniye sürerken , resim aracinin internet tarayicimiza yüklenmesi kat kat daha fazla zamanimizi alacaktir .Dolayisiyla , bu da internet kullanicimizin yavaslamasina neden olacaktir.
Bitmap'in yani sira baska teknoloji ise , vektör teknolojisidir.Adini AUTOCAD ile duyuran bu çizim teknolojisi ilk basta teknik ve mühendislik için kullanilmis , daha sonralari ise degisik uygulama alanlarina yayilmistir. Vektör teknolojisinde bütün çizimler ve olusturulan nesneler , sanki matematiksel bir fonksiyon gibi ele alinir. Bitmap kullanirken çizdigimiz bir daire bir sürü noktadan olusurken , vektör çizimi için söz konusu olan sadece bir yariçap (r) ve dairenin çizilecegi x-y koordinatlaridir.
200x300 pixel boyutlarindaki bir bitmap resimde dairenin yeriçapinin degismesi , resmi olusturan 60.000 noktanin içerdigi bilgilerin degismesi amlamina gelir. Halbuki vektör tabanli bir resimde ayni daire için hafizada tutulan x,y ve r degerlerinden sadece r'nin degerini degistirmekle , dairenin yariçapini degistirmis oluruz.
Zamanla vektörlerin kullanim alanlari genisleyip , grafik ve resim isleme programlarinda da uygulanmaya baslanmistir.Bunun nedeni ise Pixel tabanliu programlara göre çok daha hizli çalismasidir.
Grafikerlerin kullandigi Corel Draw , Adobe Illustrator programlara verilebilecek en iyi örneklerdendir.Hem üzerinde yapilan islemlerin hizli olmasi , hemde dosya boyutlarinin fazla yer tutmamasi nedeniyle, dünyanin en büyük oyun programlari üreten firmalari bile,vektör motorlu oyunlar üretmeye baslamislardir.

FLASHDERS2

HTML ve FLASH

Html' nin tarihi ve anlamindan yola çikarak, internetin çalisma prensiplerini de göz önünde bulundurursak asagidaki gibi bir
sonuç çikartabiliriz.

Içinde bulundugumuz iletisim çaginda veri transferi, hizli bir evrim geçirmektedir.Yakin tarihe kadar veri transferi ve haberlesme ara yüzü sadece yazi karakterleri(text) ile
sinirliydi.Hyper Test Markup Language sayesinde internet ortamindaki sunumlar artik sadece yazi ile degil, beraberinde resim ilave yapilabilmektedir.

www protokolü zaman içersinde daha fazla kullanilmaya baslanmis ve sayfalarda ses ve resim kullaniminin yogunlasmasina neden olmustur. Ancak buna bagli olarak da hiz ve kalite konusunda problemler ortaya çikmistir.

Bu problemleri asmak için, uydu teknolojisi, yeni yazilimlar, yeni versiyomlar,java ve diger konularda çalismalar yapilirkenFlash’ da önemli gelismelerden biri olarak yerini almistir.
Simdiye kadar web sayfasinin tek hakimi HTML idi. Bu nedenle internet üzerinde sayfa hazirlayanlar HTML' nin zahmetli kod yazma isinin üstesinden gelmek zorundaydilar. Java bu tahti sarsmak yerine saglamlastirdi ve elinden geldigince HTML'ye destek verdi ve bu sayede HTML gerçek bir standart oldu.HTML'ye veri tabani konusundaki destegi de CGI,ASP,PHP gibi programlama araçlari sagladilar.

Her sey yerli yerine oturmustu, ama hala bir eksik vardi; "Animasyon ,ses ve hareket"

Iste bu eksikligi de macromedia firmasi gidererek bu konuda HTML'ye Flash ile destek verdi.

Flash ile olusturulan tüm çalismalar. HTML i.ine sanki bir resimmis gibi yerlestirilmekte ve HTML ile sorunsuz
çalisabilmektedir.. Ayrica Front Page ve Diger HTML editörleri ile uyumu sayesinde Flash, Gün geçdikçe

daha vazgeçilmez bir web tasarim araci haline gelmistir.

Böylece yeni bir standart format olusmus oldu: SWF (Shock Wave Flash). Flash yardimci programlari diye adlandirabilecegimiz
bu programlarda artik mürferit olarak SWF ürünleri verebiliyor. Ayrica bu ürünler, üzerinde hiçbir degisiklik yapilmadan HTML
Içindede kullanilabiliniyor.

FLASH DERS-3

FLASH IÇIN DONANIM VE YAZILIM GEREKSINIMLERI

Donanim Gereksinimleri:

133 MHz Intel Pentium islemci ve Windows 95/98, NT4, 2000, ME, XP, 32 MB RAM, 40 MB Kullanilabilir disk alani, 256 renk 800x600 çözünürlük ekran destegi.

Power Macintosh ve MacOs 8,5 ve üstü: 32 MB RAM, 40 MB Kullanilabilir disk alani, 256 renk 800x600 çözünürlük ekran destegi.

Yazilim gereksinimleri:

Windows: Microdoft Windows 95, 98, Me, NT, 2000, Xp, Tarayicilardan Netscape Navigator 3 + Plug - in ve üstü.

Macintosh:System 8,1 ve üstü, Tarayicilardan Netscape Navigator ve expsorer 3.0 ve üstü.

Linux: Pentium tabanli Linx Redhat 5.1 veya Linux Slackjware 3.5, Netscape Navigator 3 ve üstü(Standart Yükleme).

Solaris: Solaris 2.5 ve 2.6(Sadece 24-bit renk destegi ile), Netscape Navigator 3 ve üstü(Standart Yükleme).

Baslamadan Önce:

Ilk Önce flash’i niçin ve nasil kullanacagimiza karar verelim. Ilerledikçe Flash’ in içerik olarak bize nasil genis bir yelpaze sundugunu ve bizimde flash kullanirken ister istemez bu içerigi kullanmak zorunda oldugumuzu görecegiz.

Öncelikle kendi kütüphanemizin belli bir düzen içersinde olabilmesi için, asagidaki klasörleri Flash isimli ana bir klasörün içine atmanizi tavsiye ederim.
1.Flash movie Için : SWF
2. Flash çalismalari için : FLA
3. Müzik arsivi için : SOUNDS
4. Resim arsivi için : IMAGE


Yukaridaki klasörleri açalim ve Flash Kullanirken de Export, Import Save ve Save As islemlerini hepsini bu klasörler üzerinden yapalim. Böylece herhangi bir karisikliga neden olmadan Flash ögrenirken bir yandan da kendi arsivimizi olusturmus oluruz.

FLASH DERS-4

WEB SAYFALARI TASARIMINDA NE ZAMAN FLASH KULLANMALIYIZ?

Bu sorunun cevabi aslinda ortadadir. C dilini bilen bir programcinin çok eski bir dil olan Fortran ‘i bilmesine gerek yoktur. Onun için Fortran ögrenmek merak yada lüks olarak kabul edilir. Oysa Fortran ile çalisan bir programcinin C’ yi bilmeye kesinlikle ihtiyaci vardir. Eger islerini Fortran ile hallediyorsa, buna zaten gerek duymayacak ve C le ilgilenmeyecektir.Eger sunuya yönelik bir web sitesinin yapilmasi amaçlaniyorsa , iyi bir HTML bilgisine ihtiyaç yoktur. Tüm islemler Flash araçlari yardimi ile gerçeklestirilebilir. Ögrenme isleminin genellikle merak ve ihtiyaç sonucunda ortaya çiktigini düsünürsek, web tasarincilarinin flash’i çogunlukla ihtiyaç için ögrendiklerini görürüz .

Sonuç olarak her yaptigimiz web sayfasini flash yapacagiz diye bir kaide yoktur. Nasil bir web sayfasi yapilacagina karar verildikten sonra bunu en kolay hangi ara yüz ile yapacagimiza karar verip en kisa ve en güzel sekilde bunu gerçeklestirmeliyiz.

Programimizi çalistirdiktan sonra buton yapmak istedigimi nesnemizi çizelim.Örnegin bir kareyi butonumuz yapalim.Bunu öncelikle çizdigimiz karemizin tamamini seçerek F8 butonuna basariz ve karsimiza çikan diyalog kutusundan Buton seçenegini seçeriz.





Daha sonra dügmemizin etkilesimli olmasini istiyorsak;Örnegin üzerine geldigimizde buton yapimi yaizmizin beyaz olmasi ve arka planinda mavi rengi yerine kirmizi olmasini istiyorsak yapmamiz gereken butonumuza çift tiklamak veya sag tiklayip edit,edit in place veya edit in new window seçeneklerinden birini seçeriz.Daha sonra karsimiza yeni bir timeline çikacaktir.




Bu Timelinede bulunan Up frame’I butonumuzun normal halidir.Over frame’I butonumuzun üzerine fare ile geldigimizde ne olacagi,Down frame’I faremiz ile üzerine gelip tikladigimizdaki tiklanmis hali en son olarak da Hit frame’I faremizin butonumuzu ne kadar alan içinde algilmasini istedigimizi ayarlariz.

bookmark::
flashla hazyrladiymiz sayfalary bi butonla bookmark etmeyi ögrenceez bu sefer..bir buton olusturun ve seçili hale getirin..ondan sonra action panelini açin ve :

on (release) {
getURL ("java******:window.external.A ddFavorite('http://www.flash.g en.tr/','FLaSh GeN' )");
}

kodunu girin
unutmayin bu internet explorer için geçerlidir

Ders-5
Yazdigimiz yaziyi eski anlattiklarimdaki gibi yine ilk önce harekete tabi tutmammiz içim öncelikle yazimizi F8 butonuna basarak Graphic yapariz ve daha sonra animasyonumuzun kaç frame olacagini belirleriz.Örnegin; 50. frame’e geliriz ve F6 tusuna basariz ve daha sonra ilk frame gideriz ve burda yine ayni sekilde Create Motion Tween deriz ve daha sonra frame properties seçeneginden rotate bölümünden CW(Saat Yönünde). CCW(Saa Yönün Tersinde) dönmesini saglariz. Biz buradan CW(Saat yönünde)’yi seçiyoruz ve daha sonra yan tarafinda çikan bölüme yani rotate yazan bölüme 1 degerini giriyoruz ve böylece olusturdugmuz 40 frame içinde yazimizin 1 kere dönmesini saglamis oluruz.Oraya istedigimiz bir tam degeri girebiliriz
ders-6
En basit komutlardan biridir. Temel kullanimi;
Kod:
getURL("Http://www.esdesign.net", "_blank");

seklindedir. “” arasindaki birinci bölüm gidecegi adresi, _blank yazan kisim ise hangi Explorer penceresinde açacagini belirler.
_blank = yeni pencere
_self = swf’nin kullandigi frame
_top = ana pencerede açar.
_parent = bitisikteki frame’de açar.

Kod:
getURL("Http://" add _root.URL, "_blank");

seklindeki bir kullanim ise anamovie’de belirtilmis bir URl variable’inin basina “[Üye Olmayanlar Linkleri Göremezler Üye Olmak İçin Tıklayınız...] ekleyerek yeni bir pencerede açmasini saglar.


ders7
Go To Komutu Ne Ise Yarar?


Yapmis oldugumuz herhangi bir animasyonda örnegin bir baslat butonu koyduk. Ve biz buna tiklayinca animasyonumuzun oynamasini istiyoruz.Bunu için ilk önce animasyonumuzun en önündki framein önüne bir frame ekliyoruz.Bunu için ilk frame tiklariz ve burdan çikan menünden insert frame deriz.Bu animasyonu oynatma çalistirma bir çok yoldan yapilabilir fakat , biz bu yoldan anlatiyoruz

Daha sonra bu bölüme yapmis oldugumuz veya flash library’sinde bulunan herhangi bir butonu ekleriz ve daha sonra butonumuza sag tiklayarak çikan menüden Actions butonuna tiklariz.(Butonu ekledigimiz yere dikkat edelim bu bizim yeni eklemis oldugumuz bos frame olmalidir.)





Bu bölümden basic actions ordanda go to komutunu seçeriz.





Daha sonra çikan bölümden goto and play seçeneginin seçilmis ve frame number’ini ise 2 yaptiktan sonra





Bu seferde ilk frame’mize yani butonumuzun bulundugu frame’e bir stop komutu ekleriz ve bitmis olur.




Bu komutumuzuda ekledikten sonar animasyonumuzu test ederiz ve daha sonra baslat dügmemmize tiklamadan animasyonumuzun baslamiycaginida görmüs oluruz.

ders8
Guide Layer Uygulamasi


Bu islemin mantigi aslinda kendi çizdigimiz bir rota üzerinde herhangi bir nesnenin yada bir kaç nesnenin ilerlemesini saglamaktir.Bunun için öncelikle flashi açtigimizda bir nesneoluturalimen basitinden bir daire çizelim ve bunun çizdigimiz bir rota üzerinden ilerlemesini saglayalim.




Daha sonra bu nesnemizi 20. frame de herhangi bir yere yerlestirelim ve daha sonra bu layerda bulunan ilk frame sag tiklayarak Create Motion Tween diyelim.

Dahasonra





Add Guide Layer butonuna tiklariz ve flash bizim için buraya bir layer daha ekler fakat bu layer digerlerinden farklidir.Bu layerda bulunua grafik ve benzeri seyler aniamsyonumuz içersinde gözükmez.Biz bu bölüme ne ise yaradigini ögrenmek amaci ile bir rota çiziyoruz.Biz bu rotayi çizdigimizde zaten direk olarak nesnemiz center bölgesinden çizdigimiz çizginin,rotanin kendine en yakin yerinden kitleyceketir.Bizim yukaridaki grafigimizde çizginin en ucundan kitlenmistir.Daha sonra 20. frame’de giderek ayni sekilde nesnemizi bu sefer çizgimizin son noktasina yani çizginin son bölümüne nesnemizi tasiriz ve kitlemis oluruz. Daha sonra CTRL+Enter tusalri ile animasyonumuzu test edebiliriz

ders9
Load Movie Komutu:

Load movie bir swf içinde baska bir swf çalistirmak için kullanilir. En genel kullanimi
Kod:
loadMovieNum("yeni.swf", 1);

seklindedir. Bu kodda her iki swf’de ayni dizinde olmalidir. Eger baska bir yerden swf yükletmek istiyorsaniz.
Kod:
loadMovieNum("http://www.xxx.com/yeni.swf", 1);

seklinde yazmaniz gerekmektedir. Virgülden sonraki 1 degeri Level degeri olarak 1 girildigidir. Ilk olarak açtiginiz swf (html tarafindan çalistirilan) level 0 olarak yerlesir. Bunun üzerine 1…9 toplam 9 tane daha swf yükletebilirsiniz. Bu komutu kullanirken dikkat etmeniz gereken kural ne kadar fazla swf üst üste çalisirsa hiz ve performansin ayni oranda düsecegidir.
Level degeri yerine isterseniz ana swf’de olusturdugunuz bir mc içine de swf yükletebilirsiniz. Level komutundan tek farki depth(derinlik) olacaktir.
Kod:
loadMovieNum("http://www.xxx.com/yeni.swf", _root.mc);

komutu ana swf’nin kök dizininde instance name olarak “mc” ayarlanmis bir movieclip’in içine swf yükletmenizi saglar.




ders10
E-Mail butonu yapimida tipki normal buton gibidir.Programimizi çalistirdiktan sonra buton yapmak istedigimi nesnemizi çizelim.Örnegin bir kareyi butonumuz yapalim.Bunu öncelikle çizdigimiz karemizin tamamini seçerek F8 butonuna basariz ve karsimiza çikan diyalog kutusundan Buton seçenegini seçeriz.


Daha sonra dügmemizin etkilesimli olmasini istiyorsak;Örnegin üzerine geldigimizde buton yapimi yaizmizin beyaz olmasi ve arka planinda mavi rengi yerine kirmizi olmasini istiyorsak yapmamiz gereken butonumuza çift tiklamak veya sag tiklayip edit,edit in place veya edit in new window seçeneklerinden birini seçeriz.Daha sonra karsimiza yeni bir timeline çikacaktir.



<![endif]> Bu Timelinede bulunan Up frame’I butonumuzun normal halidir.Over frame’I butonumuzun üzerine fare ile geldigimizde ne olacagi,Down frame’I faremiz ile üzerine gelip tikladigimizdaki tiklanmis hali en son olarak da Hit frame’I faremizin butonumuzu ne kadar alan içinde algilmasini istedigimizi ayarlariz.Son olarakda scene butonuna tiklariz ve butonumuza sag tiklar actions menüsünü seçeriz.Ve karsimiza çikan object actions menüsünden Get URL komutunu ekleriz butonumuza.Ve daha sonra URL bölümüne örnegin “ mailto:deneme@deneme.com “ yazdigimizda ve butonumuza tikladigimiza bundan sonra direk olarak makinemizde bulunan Outlook programini çalistiracaktir ve bu adresi direk olarak gidecek E-Mail bölümüne yazar.

ders11
Guide Layer Uygulamasi


Bu islemin mantigi aslinda kendi çizdigimiz bir rota üzerinde herhangi bir nesnenin yada bir kaç nesnenin ilerlemesini saglamaktir.Bunun için öncelikle flashi açtigimizda bir nesneoluturalimen basitinden bir daire çizelim ve bunun çizdigimiz bir rota üzerinden ilerlemesini saglayalim.




Daha sonra bu nesnemizi 20. frame de herhangi bir yere yerlestirelim ve daha sonra bu layerda bulunan ilk frame sag tiklayarak Create Motion Tween diyelim.

Dahasonra





Add Guide Layer butonuna tiklariz ve flash bizim için buraya bir layer daha ekler fakat bu layer digerlerinden farklidir.Bu layerda bulunua grafik ve benzeri seyler aniamsyonumuz içersinde gözükmez.Biz bu bölüme ne ise yaradigini ögrenmek amaci ile bir rota çiziyoruz.Biz bu rotayi çizdigimizde zaten direk olarak nesnemiz center bölgesinden çizdigimiz çizginin,rotanin kendine en yakin yerinden