Neler yeni

Yeni mesajlar Yeni konular En çok mesaj En çok tepki En çok görüntülenen

Flash ile 360° Panoramik Animasyon Oluşturalım

muratcdemirci

🏆Pro Tasarımcı🏆
Katılım
14 Ara 2007
Mesajlar
507
Tepkime puanı
40
Web sitesi
www.manyakbirsite.com
Burada kullanılan kodlar tamamen kayan menü hazırlamadaki kodlarla aynıdır. 360 derece dönen bir resim oluşturmada asıl önemli olan kullanılacak resmi elde etmektir. Bunun için webde arama yapabileceğiniz gibi panoramic resim hazırlayan programları da kullanabilirsiniz.

Animasyonu oluşturalım:

1-Önce panoramic resmimizi flash içine import edelim.İmport edilen resimleri sahneden silelim, sahne tamamen boş kalmalıdır. Resimler sahneden silinmesine rağmen kütüphanede kullanıma hazır olarak bekler.

2- Insert--> New Symbol komutunu verelim ve davranış olarak film klibi seçeneğini kullanalım. Adına imaj koyalım. Kütüphaneyi açalım ve az evvel import ettiğimiz resmi bu klibin içine yerleştirelim.

3- Tekrar CTRL+F8`e basarak yeni bir klip oluşturalım. Adına mc_foto adını verelim. Kütüphaneden imaj klibimizi alarak bu klip içine yerleştirelim. İmaj klibimizi seçelim ve properties panelinde örnek adını yine imaj olarak ayarlayalım.

4- Şimdi hala tamamen boş olan ana sahneye dönelim. En son oluşturduğuuz mc_foto klibini sahneye yerleştirelim ve örnek adı olarak foto adını verelim. Üste bir katman ekleyelim ve dikdörtgen aracı ile dış çizgisi olmayan bir dikdörtgen çizelim. Bu dikdörtgen maske olarak kullanıldığından boyutlarını arzu ettiğiniz şekilde düzenleyin. Maske katmanının timeline`da sol kenarında görülen dosya ikonuna çift tıklayarak layer properties panelini açalım( veya katmana sağ klik yapıp properties seçeneğini kullanalım) Mask seçeneğini işaretleyelim. bu katman altındaki resimlerin bulunduğu katmanı da Masked olarak oluşturalım. Şayet animasyonu süslemek isterseniz en üst kısma bir katman daha ekleyerek bizim yaptığımız gibi görsel eklentiler verebilirsiniz.

Hazırlık tamam. Şimdi sıra kodlarda.

5- CTRL+F8`e basarak yeni bir klip oluşturalım. (mc_script) Bu klip içine hiçbir kod konulmayacaktır. Sahnedeki animasyonu yönlendirecek kodlar eklenecektir. Ana sahneye dönelim. Bu boş klibi kütüphaneden sahnenin herhangibir yerine çekelim. Boş daire şeklindeki klibi seçelim ve şu komutları atayalım:

onClipEvent (load) {
film_eni = 550;
hiz = 20;
}
onClipEvent (enterFrame) {
xpos = _root._xmouse;
xpos = xpos-(film_eni/2);
_root.foto._x = _root.foto._x-(xpos/hiz);
}

Yukardaki komutlar fare hareketi ile animasyonun sola-sağa kaymasında ihtiyaç duyacağımız işlemleri sağlar. Klip sahneye yüklendiğinde iki değişkeni film içine alıyor. film_eni ve hiz. Hiz değeri ne kadar düşük olursa film sahnede o kadar hızla kayma yapar. Film_eni değeri için kullanılan filmin genişlik değerini yazın. Bizim filmimiz 550 piksel olduğundan 550 değeri verildi.

Sonra yeniden onClipEvent komutunu verelim ve enterframe olayını seçelim. Enterframe olayında verilen kodlar devamlı tetiklendiğinden birkez değil sonsuz olarak tekrarlanacak ve animasyonumuz hiçbir zaman kesintiye uğramıyacaktır.

xpos değişkenine farenin o an bulunduğu x ekseninden film_eni değerinin (550 değeri) yarısının çıkartılması ile elde edilen değeri atıyoruz. İkiye bölünme nedeni fare sahnenin sol yarısında ise animasyon sağa, sağ yarısında ise animasyonun sola hareketini sağlamak içindir.

6- Sahneye dönelim ve foto film klibimizi çift tıklayarak açalım. Bildiğiniz gibi bu klip içinde örnek adı imaj olan film klibimiz vardır. Bu klibimizi seçelim ve şu komutları atayalım:

onClipEvent (enterFrame) {
if (_root.foto._x<_root.foto.imaj._width/2) {
_root.foto._x = _root.foto._width/2;
} else if (_root.foto._x>_root.foto._width/2) {
_root.foto._x = _root.foto.imaj1._width/2;
}
}

klibe sonsuz döngüyü sağlaması için yine enterframe olayı atanmıştır. Burada yapılan işlem foto ve imaj kliplerinin _y düzlemini birbirine çakıştırmak içindir.

7- Şimdi bu klip timeline`ındaki mevcut olan tek kareyi seçelim:

for (i=1; i<3; i++) {
_root.foto.imaj.duplicateMovieClip("imaj"+i, i);
_root.foto.imaj1._x = _root.foto.imaj._x+_root.foto.imaj._width;
_root.foto.imaj2._x = _root.foto.imaj._x-_root.foto.imaj._width;
}

Bir döngü hazırlayarak imaj klibimizi çoğaltmaya başladık. Yapılan işlem klasik bir döngü i değişkeni 1 den başlayıp 3 olmadan sona erecek, yani i 1 ve 2 değerlerini alabilecek. Sonra bu değerler duplike komutu ile "image"+1 ve "image"+2 yani imaj1 ve imaj2 şeklinde kopyalanacak. Ve alttaki atanan _x düzlem değerleri ile asıl imaj animasyonunun peşine eklenerek kesintisiz bir kayma sağlayacak.

Evet, hepsi bu. Herzaman belirtiğim gibi , bu kodlar kullanılabilecek en basit kodlardır. Uygun kodlar bu olmayabilir ama animasyonunuz basit kodlarla hatasız çalışacaktır.
 
Üst