Photoshop Magazin
 


Flash CS4 / Video 3D Rotation

01 May 2010 | Sayı: May 2010
 
1 2 3 4 5
 

Flash CS4’ programından daha önceleri web sitelerinde videolar için animasyon yapmak pek tercih ettiğimiz bir yol değildi. Hatta ölçeklendirmelerde de gayet anlamsız sonuçlar ortaya çıkıyordu.
Adobe Flash CS4 programı ve Actionscript 3.0 ile videolar için daha sağlam bir altyapı ve Flash CS4 ‘ün 3D Toolları ile videoları animasyon yapmak artık çok kolay. Dilerseniz birlikte Adobe Flash CS4 programımızdaki video işleme birimlerine bir bakalım. 


Uygulamamız için CS4 ile bir Actionscript 3.0 çalışması açalım ve fla olarak kaydedelim. File-import video ile bir flv dosyasını getirelim. Flash CS4 serisiyle beraber daha önce Flash içerisine avi,mpeg,vob gibi dosyaları getiremiyorduk.

Daha önceden getirirken Flash programından çıkmadan bir arayüzle encoding ayarlarını yaparak flv dosyasına çevirebiliyorduk ancak CS4 programıyla eğer uygun formatlı bir dosya değilse Adobe Media Encoder açmayı öneriyor, orada encoding işlemini daha ayrıntılı yaptıktan sonra rahatça bu dosyayı Flash’a flv dosyası olarak getirebiliyoruz.
Actionscript 3.0 ile CS3 versiyonunda gelmiş olan alttaki player skinlerinin tiplerinin renklerini ve şeffaflığını gösteriğim gibi seçebiliyoruz. Ayrıca Fullscreen olan özelliklerini de seçerek yayınlarken HTML dosyasında da gerekli ayarlamaları yaparak Fullscreen butonuyla beraber yayınlayabiliriz.


Eğer video dosyanıza hazır bir player değil kendi playerınızı tasarlamak ve geliştirmek isterseniz , flv dosyasını ekledikten sonra Window-Component kısmını açın ve Video sekmesi içinden kontrolleri tek tek sahneye sürükleyip bırakın. Ekstra kod yazmaya gerek kalmadan sahnedeki FLVPlayback içindeki videoya bu componentlar kontrol etmeye başlayacaktır. Dahası bu controller vektörel olduklarından istediğiniz kadar ölçeklendirebilir, gruplandırabilir ve hatta çift tıklayıp içerilerinde renklerini, şekillerini değiştirebilirsiniz.


Videonuz sahnenize eklendiyse daha sonraki adımlarda bu videoya Actionscript ile erişmek isteyeceğimizden bir isim vermemizin tam sırası. İstanbul’un bir tanıtım videosunu kullandığım için FLVPlayback’ın instance name’ini Istanbul olarak verdim. Bu FLVPlayback kontrolünün ek özelliklerine erişmek için “Instance of FLVPlayback” yazısının hizasında yer alan küplere tıklamanız yeterlidir. 

 


Component Inspector menüsünden bu FLVPlayback dosyasının ayarlarını yapabiliriz. Mesela autoPlay yani direk oynamasını istemiyorsak false diyebiliriz.

Veya ben skinAutoHide yani player oynatıcı skin çubuğunun sadece videonun üzerindeyken çıkmasını, değilken çıkmamasını false diyerek sağlayabiliyorum. Dahası eklediğiniz hazır skinlerin adını, renklerin saydamlığını hala değiştirme şansımız var. Component Inspector menusu tüm Componentlar ‘ın ayarlamaları için geçerlidir.


Devamında bu FLvPlayback kontrolünü daha ayrıntılı animasyonlarda kullanmak amacıyla Movie Klip yapıyorum. F8 ile o seçiliyken Movie Klip yapıp instance name olarak da video_mc veriyorum.
İşte şuanda bir videomuz bir movie klip içerisinde oynatılıyor ve biz bu movie klipi 3D Rotation Tool ile animasyon yapmaya hazırız. Menuden 3D Rotation Tool’u seçelim . Movie Klipin üstünde Maya ve 3DMax kullanıcılarının yabancı olmadığı Bulls Eye denen 3 Boyutlu transform yapmamıza imkan veren control geliyor. 


Animasyon yapacağımız için ve bu animayonu da Motion Tween (CS4’teki adıyla) olacağı için keyframe’in üstüne sağ tıklayarak Create Motion Tween diyerek bir Motion Tween yaratıyoruz,timeline sahnede 30 frame bırakıyor benim için. 


Hemen Bulls Eye üzerinden yeşil kısmı sola doğru sürükleyerek Movie Klipin bir tam tur yapmasını sağlıyorum. Resim 8’de gösterdiğim gibi döndürdükten sonra son halinde Alphasını movie klipi seçip sağdaki panelden ColorEffects – Alpha kısmından %10 yani daha şeffaf hale getiriyorum ve Motion Tween’i seçip göze daha hoş bir geçiş olsun diye Ease : 100 veriyorum.
CTRL-Enter ile animasyonumuzu önizleyebilirsiniz. Video oynarken gayet başarılı bir şekilde dönerek şeffaf hale geliyor.

Bu animasyonu durduracağız ve bir düğmeye tıklanınca yapacak ve arkasında da bir yazı çıkacak. Ama tekrar basılıncada yazı gidecek video geri gelecek ve Alpha %100 olarak oynamaya devam edecek. 


Bunun için öncelikle animasyonumuzu kopyalayıp tersine çevirmeye çalışalım. Geri dönüş animasyonumuz bu olacak. Motion Tween üzerindeyken sağ tıklayıp Copy Frames diyelim.
Hemen animasyonun bittiği frame’in yanında boş bir frame yani 31.frame’e sağ tıklayıp Pase Frames diyelim ve kopyalanan animasyonu seçip ters çevirmek için Reverse Frames diyelim.
Şimdi temel olarak animasyonumuzu yaptık ve kopyalayarak geri dönmesini de sağladık.

Şimdi bu animasyonu ayarlamak ve buton ile yazılarını getirmek kaldı.İsteyenler burada çalışmanın fla’sından inceleyebilir son halini.Resim 11’de de Timeline’dan takip edebilirsiniz. Öncelikle 1.keyframe’de durduralım. Daha sonra 30.keyframe’de de durduracağız. 30.keyframe’de bir layer açarak adını yazı diyerek buraya bir keyframe ekleyip çıkacak yazıyı yazdım. 


Ayrıca Photoshop’tan aldığım bir dönme oku görselini de sadece 1. Ve 30.keyframe’lerde çıkacak şekilde ekledim ve adına ok_btn dedim.  En son adım olarak videonun dönme işlemini tamamlamadan mesela 25.keyframe’de sesinin kısılması ve yazının selectable olarak gelmesi, sonra tekrar geri dönerken sesin açılması. Bunun için as layerında 25.frame’e bir keyframe ekleyip

keyframe’e
istanbul.video_mc.volume = 0.2
yazarak videomuza verdiğimiz instance name’lerle videonun şeffaflaşıp arkaya dönmesi sırasında sesini kıstık, komple de kapatmadık. Tekrar geri dönerkende 50.keyframe’de mesela bu keyframe’lerin belirlenmesi size ait sesi tekrar açmak için

keyframe’e :
istanbul.video_mc.volume = 1


Bandwidth Profiler Panelini
Flash`ın önemli fonksiyonlarından birisidir. Hazırladığınız çalışma ister bir video dosyası olsun, bir site veya bir animasyon karesi hiç farketmez mutlaka bir testten geçirilmesi gerekmektedir. Bir çalışma hazırladığınızı düşünelim. 


Aynı düşünceyi dosya internette yayınlandığında da koruyacakmısınız? Ülkemizdeki bağlantı hızı küçük bir kullanıcı grubunu hariç tutarsak oldukça sınırlıdır. Bu nedenle mükemmel bir çalışma yapsanız dahi internette yüklenmesi uzun sürerse kullanıcı sıkılarak sayfanızı terkedebilir.  Bandwidth profiler ile hazırladığınız sayfalarda yüklenme sorunu çıkartacak kareleri kolaylıkla tüm özellikleri ile görüp optimize edebilirsiniz. Hatta Simulate Download seçeneği ile internette yüklenme şeklinin önizlemesini görebilirsiniz.


Çalışmanızı bitirdikten sonra CTRL+Enter`a basarak test moduna geçip View menüsünden Bandwidth profiler`e ulaşabilirsiniz. time programının özellikleri kullanılır. Bu komutlarla yukarıda gördüğünüz panele ulaşacaksınız. Panelin 2 bölümden oluştuğunu görüyorsunuz. Sol taraf film özelliklerini sağ taraf ise frame özelliklerini göstermektedir.

 

Dim: Filminizin boyutlarını gösterir.
Frame rate: Saniyede gösterilen kare sayısını verir.
Size: Dosya boyutunu Kb ve Byte cinsinden verir.
Duration: Çalışmanızın toplam süresini frame ve byte cinsinden verir. Frame hızını azaltırsanız orantılı olarak bu değerler artacaktır.
Preload: Tarayıcıya yüklenme süresini verir.
Bandwidth: Band genişliğini gösterir.
Frame: Yüklenme esnasında hangi frame`de olduğunuzu gösterir.
Loaded: O anda yüklenen frame sayısını ve yüzdesini verir. Ayrıca yüklenen boyutu rakamsal olarak gösterir.

Dikey çubuklar filminizin her karesindeki byte miktarını gösterir. Yatay olarak çizilen çizgilerin herbiri byte değerini gösterir. Hazırladığınız animasyonda karelerin yatay kırmızı çizgiyi geçmemesine özen gösterin.

Sınırı geçen karelerin yüklenmesinde gecikme olacağından animasyonunuzda kesintiler olacaktır.  Dikey çubuklardaki karelere ait byte değerlerini görmek için View menüsünden Frame by Frame Graphy şeçeneğini işaretleyin. Bu komutla hangi frame üzerinde yüklenme olduğunu görebilirsiniz. 


Filminizin internetten indiriliş hızını görebilmek için viev menüsünden Show Streaming seçeneğini işaretleyin. Bu komutla sanki internette yükleniyormuşcasına yüklenme hızını görme ve değerlendirme şansına sahip olursunuz.  Ana menüdeki Debug seçeneğinden de bahsetmekte yarar var. Buradan filminizin yüklenme hızını ayarlayabilirsiniz. Önerilen seçenek 28.8 Kb.lik modem seçeneğidir. Ama günümüzde 56K seçeneği daha uygun gibi durmaktadır. 


Eğer isterseniz Customize seçeneğini ile ADSL kullanıcılarını band erişim hızlarınıda kendiniz girebilir ve yükleme hız özelliklerini istediğiniz şekilde ayarlayabilirsiniz.  Yükleniyor (Preloader çubuğu) hazırladığınızı düşünelim. Bunun web'de nasıl çalıştığını görmenin en iyi yolu yukarda anlatılan yöntemlerle bandwith panelini kullanmaktır.
Film test modunda iken Simulate Download alanına tıkladığınızda preloaderın webdeki simulasyonunu hatasız olarak görebilirsiniz. Böylece preloaderın çalışıp çalışmadığı şeklindeki endişelerimizden kurtuluruz. 


Gelecek ay tekrar görüşmek dileğiyle, hoşçakalın.

 

 

May 2010

 


Flash