Flash çalışmanıza dışardan içerik çağırma
Yazar : E.Altuğ YILMAZ
Merhaba arkadaşlar ;
Bugün Flash programına dışardan içerik yüklemek üzerine bazı yöntemler göstermeye çalışacağım.Flash çalışmanızda neden dışarıdan içerik yüklemek gerekebilir ? Öncelikle bu sorunun cevabını nedenleriyle söylemek gerekirse , herşeyden önce ilk sebep : optimizasyondur.
Websitenizi ziyaret eden bir ziyaretçiye belkide ziyaret etmeyeceği,ilgilenmeyeceği bazı görselleri veya flash tasarladığınız mesela bir katalog dosyasını en başta projenizle beraber yüklenmesini beklemesi , hem ziyaretçinizin daha fazla beklemesini,hatta sıkılıp cıkmasını hemde sitenizin bant genişliğini boş yere harcamanıza neden olacaktır.
Biliyorsunuz birçok hosting şirketi bir web alanı verirken bantgenişliği olarak sınırda koymaktadır.Bunu da göz önüne alarak gerekli içeriği gerektiği yerde yüklemek gerekir. Sitenize sadece telefon adresi veya krokiyi görmek isteyen bir ziyaretçi için fotoğraf galerilerini,ürün kataloglarını da yükletmek yanlış bir seçimdir. Bu yüzden onların linklerine tıklanıldığında dışarıdan foto galerinizi swf olarak,veya büyük çözünürlüklü olması gereken dosyanızı(mesela son dönemlerde moda olan Google Earth Krokinizi) tıklanıldığında dışarıdan yükletmek 300 kb bir görseli flash projenize eklemekten daha akıllıcadır.
Flash projenize dışarıdan istendiğinde içerik olarak swf,jpeg,png ve gif dosyalarını yükletebilirsiniz. Hatta bu dosyalar aynı domain altında yani sizin serverınızda olmak zorunda değildir. Flash programı içerisinde temel olarak 3 farklı yoldan içerik ekleyebiliriz. Yukarıda göstermeye çalıştığım üzere Behaviors(Davranışlar) panelinden , loadMovie Actionscript kodları ile ve ensonda da Loader Componentı yardımı ile. Burada hangi yolu seçeceğiniz aslında getireceğiniz içeriğin büyüklüğü ve projeye göre değişebilir ancak ben kısaca adım adım 3ünü de göstermek istiyorum.
Öncelikle Behaviors yani Davranışlar paneli. Bu panel aslında önekranda size komutları seçtirme şansı verirken arkada Actionscript kodlarıı üreterek projeye gömüyor,Dreamweaverdaki Behaviors panelinde de Javascript kodları ekleniyordu,panel adları aynı olması buradan kaynaklanıyor.
Örnek senaryomuz için Netron Bilişim Akademisi dersinde bir öğrencim tarafından tasarlanmış alttaki arayüzü alalım. Sizde görsele birkere tıklayıp sağ tık save as ile büyük boyutta kaydedebilirsiniz. Solda gördüğünüz 16 tane mini kutuya katalog ürünlerinin küçük boyuttaki görüntüleri gelse,ziyaretçi bu görsellerden beğendiğine tıklayınca sağ kısımda büyük çözünürlükteki orjinal yüksek çözünürlüklü görselimizi getireceğiz. Eğer bu büyük boyutlu orjinal dosyaları da dışarda tutmayıp tek fla dosyasına ekleseydik fla dosyamızdan çıkan swf dosyamızın boyutu çok fazla büyüyecek ve tam yüklenmeden açılmayacağından ziyaretçi çok bekleyecekti.
16 tane küçük görseli yukarıdaki boş kutulara yerleştirin ve buton yapın.Tıklayınca herbiri 2,3,4,5,.. framelere gitsin ve dursun( gotoAndStop(3); )Gittiği framede de arkaplanı aynen getirin, sol paneldeki menude aynı duruyorken CTRL-F8 basarak sahnenize yeni bir Movie Klip ekleyelim. Bu movie klip bizim dışardan içeriği sağ tarafa yükleyeceğimiz klip olacaktır.
Movie Klip dosyanıza türkçe karakter olmayan bir ad verin. OK dedikten sonra Movie Klip yaratılmış ve sizde içerisindesinizdir. Window-Behaviors panelini açın. Alttaki gibi artık sembolune tıklayın,movie klip - Load External Movie Klip(eğer yüklecenek içerik swf ise) veya Load Graphic (jpg,gif,png ise ) diyelim.
Daha sonra gelen ekrana gelen kısımda swf veya jpeg dosyanızın adını alttaki gibi yazın. Level'in burada Releative olması çok önemli Absolute derseniz anasahneyi kaldırıp onun yerine yükler.
OK diyip o ekrandan çıkalım, moviekliptende çıkalım ve anasahnemize dönelim. Anasahnemizde şuan Movieklipi yapsakta yerleştirmedik.Library'den movieklipimizi alttaki gibi dıştan gelecek içeriğin gelmesini istediğimiz yere sürükleyip bırakalım.
Böylelikle anasahneye dışarıdan içeriğimizi yüklemiş olduk.MovieKlip boş olduğundan küçük bir hedef noktası gibi gözükecektir,eğer istediğiniz yere yüklenmiyorsa bu hedef tahtasının yerini değiştirerek düzeltin.
Bu işlemimiz nekadar Behaviors'tan yapsakta arkaplanda movie klipin içindeki frame dikkat ederseniz actionscript kodları görürsünüz. Eğer birkaç satır kod yazmak zor gelmezse ve mantığı anlarsanız Behaviorsla işiniz olmaz.Nasılmı? Aynı şekilde CTRL-F8 ile yeni bir MovieKlip yaratın ve instance name olarak bir ad verin.
Daha sonra anasahnedeki frame'in actions kısmına alttaki kodu yazın. Yüklenecek dosya adı ve instance name parantez içinde olmasına dikkat edin.
Her frame ve gelecek yeni içerik için yeni bir movieklip ve kodu yazarak işinizi halledebilirsiniz.
Ancak dikkat ederseniz dışardan çağıracağımız içeriğin fotoğraf olduğundan birkaç saniyede yükleneceğini düşünerek bu projemizi yaptık.Ya 1,5 mb bir flash krokiyi çağırsaydık? Zaten genelde proje içine konmaz görece daha büyük olan swf dosyaları ve gerektiğinde link tıklanınca çağırılır ve o süre boyunca bir yükleme izletilir. Bu websitelerinin girişlerindeki preloading yükleniyor yazısı gibidir ancak içerik dışardan geldiği için işler daha karışıktır ve uzun satırlı kodlar yazılması gereklidir.Ancak Flash'ın bizim için hazır kodları barındıran türkçeye aparatlar diye çevirebileceğimiz components panelini kullanacağız.
Farzedelim websitesini yaptığınız şirkete caddeleri,binaları olan,arabalı,trafik lambalı güzel bir flash kroki yaptınız ve kroki linkine tıklanıldığında gelsin istiyorsunuz.Kroki.swf diye ayrı bir dosyada tutuyorsunuz. Tabiiki araba,logo,cadde derken flashın boyutu 1mb yaklaşmış. Bu durumda tıklanınca hemen gelmeyeceğinden onu bir Flash Loader ile çağırıp Progress Bar ile de dış içeriğin yüklenen miktarını gösterebiliriz.
Hemen krokinin geleceği sayfayı açın ve Window - Component panelinden Loader Component'ını sahneye sürükleyip bırakın.Alttaki gibi içeriğin yükleneceği mavi bir dörtgen gelecektir
Bu mavi dörtgene bir instane name vermek için seçin ve alttaki gibi kroki_loader adını verin. Instance Name'ler flash içerisinde actionscript ile çağırabilecek unsurlara verilen isimlerdir. Türkçe karakter ve boşluk içeremez ve rakamla başlayamazlar. Daha sonra Properties sekmesinin yanındaki Parameters sekmesine tıklayın.Burada da altta gösterdiğim gibi contentPath kısmına dışarıdan Loader'ın yükleyeceği dosyanın adını girin. autoLoad true olsunki otomatik yuklensin,ScaleContent ise true olsunki flash içerisinde yüklenen içeriği Free Transform tool ile büyütüp konumlandırabilelim.
Bu Loader ile dışarıdan içeriğimizi yüklemiş oluyoruz.Gelelim bu yükleme sırasında ziyaretçilere yüklenen yüzdeyi gösterecek Progress Bar componentına. Alttaki gibi Progress Barı yine Component panelinden ekrana olmasını istediğiniz,genelde ortasına bırakın.Progress Bara da prog_bar instane name verin.Daha sonra Progress Barın da altta kırmızı ile gösterdiğim 2 önemli noktası mode:polled yapın ve source kısmına da Loaderın Instance Name'ini yazın.(kroki_loader). Progress Bar flash içerisinden bir elementle işlem yapacağından onun Instance Name'ine ihtiyaç duydu.
Böylelikle CTRL-Enter tuşu ile tasarımımızı önizleyebiliriz. Progress Bar Loaderın getireceği yüzdeyi sizin bilgisayarınızdan yani cache'den getireceği için saymayı göremeyeceksiniz,onun için View- Simulate Download diyin veya CTRL-Enter tuşlarına 2kere basın.
Instance name'lerde hata yapmadıysanız yüzdenin saydığını %100 olunca dışarıdan swf dosyasının geldiğini ancak Progress Barın gitmediğini görceksiniz.Bunun içinde bu yüzde sayma olayı bitince Progress Barı kaldır komutunu verecek bir Listener eklememiz gerekiyor. Bunun için alttaki actionscript kodunu frame'e yazın. Bu actionscript kodunda dikkat etmeniz gereken tek şey prog_bar olan yazının Progress Barın instance name'i olmasıdır.
pbListener.progress=function(evt) {
evt.target._visible=true;
};
pbListener.complete=function(evt){
evt.target._visible=false;
};
prog_bar.addEventListener("progress",pbListener);
prog_bar.addEventListener("complete",pbListener);
Umarım uygulamalarınızda faydalı olur. Takıldığınız yerlerde email atabilirsiniz,takılmanızda çok doğal çünkü bu projem giriş seviyesinde değildir. Saygılarımla....
15/11/07
vallahi hocam bravo size yani sizde olmasanız ne yaparız biz
19/1/09
hocam benim önemli bir sorunum mevcut.Gösterdiğiniz yollarla sahneye istediğimboyutlarda swf'yi çağırabiliyorum fakat çağırdığım swf tüm fonksiyonlarıyla çağrılmıyor,yani sahnede swf görünüyor ama üzerinde butonlar,sürükle bırak nesneleri çalışmıyor,ne yapabilirim, acele yanıtlarsanız çok sevinirim
19/1/09
hocam benim önemli bir sorunum mevcut.Gösterdiğiniz yollarla sahneye istediğim boyutlarda swf'yi çağırabiliyorum fakat çağırdığım swf tüm fonksiyonlarıyla çağrılmıyor,
yani sahnede swf görünüyor ama üzerinde butonlar, sürükle bırak nesneleri çalışmıyor,ne yapabilirim, acele yanıtlarsanız çok sevinirim
19/1/09
Selamlar Cerden
fla çalışmanı ve problemini bana yazarsan sevinirim. ercanaltug@gmail.com :)
19/1/09
hocam sorunumu size mail olarak gönderdim,ilgilenirseniz memnum olurum,yarın ödev teslimim var :D
20/12/09
hocam peki bn bir swf yi loader ile yükleme yapıcam fakat bir butona basıp çalıştırmak istiyorum.butonun scriptine ne yazacağmı bulamadım bir türlü
20/12/09
hocam peki bn bir swf yi loader ile yükleme yapıcam fakat bir butona basıp çalıştırmak istiyorum.butonun scriptine ne yazacağmı bulamadım bir türlü
20/12/09
hocam mrb. bnde bişey merak ettim de bulamadım.şimdi swf dosyasını loader ile yükledik otomatik olarak.fakat bn bir butona basınca yüklemek istiyorum butona yazılacak script kodu nedir buun bi türlü bulamadım.teşekkürler
27/12/10
hocam iyi günler. flash cs3 action script 2.0 çalışıyorum. sahnede yukle_mc isimli bir movie clip im var ve dısardan onun içine swf çağırıyorum. ancak çağırdığım swflerde sorun cıkıyor. butonlar ve sürükle bırak nesnelerde sorun cıkıyor. bu konuda nasıl bir çözüm üretilebilir.
27/12/10
hocam iyi günler. flash cs3 action script 2.0 çalışıyorum. sahnede yukle_mc isimli bir movie clip im var ve dısardan onun içine swf çağırıyorum. ancak çağırdığım swflerde sorun cıkıyor. butonlar ve sürükle bırak nesnelerde sorun cıkıyor. bu konuda nasıl bir çözüm üretilebilir.
27/12/10
Nasıl sorun oluyor Önder?
Çağırdıklarında AS 2.0 olmalı.
TÜm projeni rarlayıp bana email atabilirsin.
Altug
24/4/11
hocam ben Behaviors yöntemiyle yaptım çalıştıda. Sorun şu bu bir template ve ben ilk sayfasına koymak istiyorum bunu lakin bütün sayfaları ard arda framelere koymuşlar. ben bunu koydugumda ilk sayfasına mc yi. diğer sayfalar açılmıyor bu sefer onları iptal ediyor. Action Layer demiş ona ActionScript den stop(); vermiş altına diğer sayfaların frameleri ekleyip arka arkaya koymuş sayfaları.