Sayfa Yükleme – Preloading

Ziyaret ettiğiniz Flashlı web sayfalarında sık sık gördüğünüz “Sayfa Yükleniyor, Lütfen Bekleyiniz..” gibi önceden bir uyarı yazısı veya bir animasyon görünür, sayfa yüklemesi bitince de esas animasyon ortaya çıkar. Bu bölümde bu işlemin nasıl yapıldığını göreceğiz.
Bu uygulama için öncelikle 2 tane Scene (Sahne) gerekmektedir. Birinci Scene (sahne) de esas movie (film) yükleninceye kadar görünecek olan daha küçük size da küçük bir animasyonumuz olmalı, ikinci Scene (sahne) de de esas animasyonumuz olmalıdır.
Birinci Scene (Sahne) de yani küçük animasyonun olduğu sahnede de “If Frame is Loaded” actions’ı olmalıdır. Yani – Şayet esas animasyondaki belirttiğim Frame ler yüklenmişse esas animasyonu oynat – diyeceğiz.
Bu uygulamayı daha iyi anlatabilmek için yukarıdaki örnek animasyonu nasıl yaptığımızı sizlere açıklayalım;
 1-Öncelikle yeni bir Movie (film) oluşturalım [ File>New (Ctrl+N)]. Sahnemizin içine sağ tuş ile tıklayarak Movie Properties’i seçelim. [Modify>Movie (Ctrl+M)]. Buradan movie mizin Frame hızını, dökümanımızın ebatlarını, arkaplan rengini seçebiliriz (biz yukarıdaki örnekte, 12 frame, 400×200 px ve #CCFFCC olarakta arka plan rengini seçtik).
2-Daha sonra ikinci Scene seçme işlemi için de Window>Panels>Scene ile Scene (sahne) panelini açtık. Burada “Scene1” olarak birinci sahnemiz görünmektedir. İkinci bir sahne yaratmadan önce karışmaması için Scene1’e isim vermek için üzerine çitf tıklayarak açılan pencereye “preloader” yazdık ve 1.sahnemizin adı “preloader” oldu. Buraya küçük animasyonumuzu hazırlayacağız.
Daha sonra Scene Panelinin altındaki Add Scene tuşuna tıklayarak ikinci Scenemizi yarattık onda çift tıklayarak “animation” adını verdik. Scene Panelinde “preloader” ve “animation” adlarında 2 tane Scene (Sahne) miz oldu.
3-Scene panelinde “animation” a tıklayarak “animation” sahnesine geçtik ve esas moviemiz olacak olan yukarıdaki örnekteki basit animasyonu hazırladık.
4-Esas moviemiz bitince Scene Panelinden “preloader” ı tıklayarak “preloader” sahnesine küçük animasyonumuzu hazırlamak için geçtik. Burada da bir grafik hazırlayabilirsiniz yada bizim yaptığımız gibi yazı olarak da bu küçük animasyonu hazırlayabilirsiniz. Biz “Yükleniyor Lütfen Bekleyin…” şeklinde yazan bir Movie Clip hazırladık. Bunun için öncelikle Insert>New Symbol (Ctrl+F8) ile yeni bir sembol yaratmak için Symbol Properties’i açarak adına “loading” yazıp bir Movie Clip yarattık. Tools dan Text Tool ‘u seçip “Yükleniyor Lütfen Bekleyin…” şeklinde yazdık. Bu yazıya Alpha efekti vermek için Layer 1 de ve 1. Frame de seçili iken Insert>Convert to Symbol (F8) ile “loadtext” adını yazarak Graphic olarak sembol’e çevirdik. Timeline da 10 frame’e gelerek sağ tuş ile Insert Keyframe (F6) ile bir keyframe ekledik ve 10. Frame’de iken Effect Panelinden Alpha seçip değerini 0 olarak verdik. Sonrada 1 ve 10. Frame lerin ortasına sağ tuş ile tıklayarak Create Motion Tween’i tıkladık. 10. Frame çift tıklayarak açılan Frame Actions Panelinden GoTo’yu seçerek gotoAndPlay (1); scriptini verdik. Böylece “loading” isimli Movie Clip imizi bitirdik. Şimdi bunu “preloader” isimli sahnemiz taşıyacağız.
5-Scene Panelinden “preloader” ı seçerek “preloader” sahnemize geçtik ve Layer 1 de iken Library deki “loading” isimli Movie Clip imizi mause ile tutup çekerek sahnemizin içine taşıdık.
“loading” isimli Movie Clip Layer 1 de 1.Frame’e yerleşti. Layer 1’in adını “Loading_Text” olarak değiştirdik. 10.Frame gelip sağ tuş ile Insert Frame i işaretleyerek Timeline da yeni bir Frame yarattık. Daha sonra Layer Penceresinde iconuna tıklayarak Insert Layer ile yeni bir Layer yarattık. Layer 2 olan bu layerında adını “actions” olarak değiştirdik ve Loading_Text layerinin altına taşıdık. Şimdi “actions” layer’ındaki Frame lere actions vereceğiz.
“actions” Layer’ındaki Timeline da 8. Frame’e gelip sağ tuş ile Insert Keyframe ile bir keyframe yarattık, üzerine çift tıklayarak açılan Frame Actions Panelinden If Frame is Loaded’ı seçtik, alttaki bölümde bulunan “Scene” kısmına esas moviemizin bulunduğu scene adı olan animation yazdık, “Type” kısmı Frame Number olarak kaldı, “Frame” kısmına da animation isimli esas moviemizin bulunduğu sahnemizdeki timeline daki en son frame in numarası olan 95 yazdık. Aynı yere bu defa Go To scriptini işaretleyerek “Scene” kısmına animation yazık, “Type” kısmı aynen kaldı, “Frame” kısmına da 1 yazdık (en alttaki Go to and Play in işaretli olmasına dikkat edin). Yani Türkçesi, – “animation” sahnesindeki 95. Frame yüklendiyse aynı sahnedeki 1. Frame’e git ve oynat – dedik. ifFrameLoaded (“animation”, 95) {}gotoAndPlay (“animation”, 1);
Karışmaması için Frame Actions panelini kapatabilirsiniz.
6- Tekrar Layer penceresine gelip actions layerindeki Timeline daki 9. Frame’e gelip sağ tuş ile Insert Keyframe ile bir keyframe yarattık, üzerine çift tıklayarak açılan Frame Actions Panelinden Go To scriptini işaretleyerek aşağıdaki kısımları olduğu gibi bıraktık. Bunun da Türkçesi, hani yukarıda – 95. Frame yüklendiyse 1. Frame git ve oynat – demiştik ya şimdi de – şayet yüklenmediyse bu sahnede kalıp uyarıya devam et – diyoruz. gotoAndPlay (1);
İşte hepsi bu kadar…
7- Kontrol etmek için Ctrl+ENTER’e basarsanız animasyonunuzu test etmiş olursunuz.

Şayet mesaj kısmına farklı şeyler yazdırmak istiyorsak, yani “görüntü yükleniyor” – “görüntü yüklendi” – gibi birkaç tane mesaj uyarısı vereceksek, birinci Scene (Örneğimizdeki “preloader” sahnesi)’deki frame sayısını arttırıp “If frame loaded” komutlarını bölmek lazımdır. Yani her mesaj uyarısına karşılık gelen iki adet frame koymamız gerekecek. Ve her ilk frame’de esas animasyonun belli bir kısmını yüklenmişse devam edecek, ikinci frame’inde ise döngüye devam edecek şekilde olmalıdır. Yani 100 frame’den oluşan esas animasyona iki adet mesaj vereceksek Scene 1’de dört frame olması lazımdır. 1. frame’e esas animasyonun 50 frame yüklenmişse 2. frame git , 2. frame’de ise geri kalan 50 frame yüklenmişse oynat dememiz lazımdır. Bu frame’lerin altına ilave Layer açarak istediğimiz mesajları yazdırabiliriz.

Yazar: gokhankaya

Gökhan KAYA sitemizde 7 yazı eklemiş...

• Tüm yazıları-> gokhankaya →
• Kişisel Sayfası