Grafik ve Animasyon-II

... konulu sunumlar: "Grafik ve Animasyon-II"— Sunum transkripti:

1 Grafik ve Animasyon-II
FLASH CS5 Öğr.Gör. Onur BULUT

2 Flash CS5 hareketli görüntüler yani animasyon oluşturmak için kullanılır.  
Çalıştırdığımızda standart dosya şablonları, eğitimleri ve diğer kaynaklarla bağlantıları sağlayan karşılama ekranı görüntülenir. 

3 OPEN A RECENT ITEM başlığı altında son açılan 8 flash çalışması listelenir ve buradan seçilerek kolayca ulaşılabilir. Bu çalışmalar dışında bir çalışma açmak için en alttaki OPEN düğmesine tıklayabilirsiniz. CREATE FROM TEMPLATE başlığı altında şablondan oluştur kategorileri listelenir. Bu kategorilerden birine tıkladığınızda açılan pencereden bir şablon türü seçebilir ve projenize hızlı bir başlangıç yapabilirsiniz. Ekranın altındaki bağlantılardan adobe nin sunduğu yeni özellikler, ipuçları ve güncellemelere ulaşabilirsiniz.

4 Ekranın sağ tarafındaki konu başlıkları ile ilgili yardım konularına üzerlerine tıklayarak erişebilirsiniz. Flash CS5 programını her açtığınızda karşılama ekranını görüntülemek istemiyorsanız en altta Dont Show Again i seçmeniz gerekmektedir. Yeni Bir Proje başlatmak için CREATE NEW başlığını kullanırız. Biz uygulamalarımız için Action Script 3.0 seçeneğini kullanacağız.

5 ÇALIŞMA ALANI Flash CS5’te çalışma alanı ekranın üst kısmında bulunan menülerin yanı sıra çeşitli düzenlemeleri yapmak, özellikleri değiştirmek ve çeşitli öğeleri eklemek için paneller ve araçları da içerir.

6 ÇALIŞMA ALANI A: Menü çubuğu: bir Flash dosyası üzerinde çalışırken uygulayabileceğiniz çeşitli görevlerin ve değiştirebileceğiniz çeşitli seçeneklerin bulunduğu alandır. B: Araçlar paneli: Animasyon yazılımına ait araçların yer aldığı paneldir. C: Zaman çizelgesi: Katmanlardan ve karelerden oluşur. Animasyon Filmlerinde kullanılacak öğeler katmanlara yerleştirilir. Hareket ettirilmesi planlanan her nesnenin farklı bir katmana konulması tavsiye edilir. İçerikler, varlıklar, görseller katmanlardaki karelere yerleştirilirler. Bu karelerin zaman içerisinde farklılık göstermesi ile animasyon oluşturulur.

7 ÇALIŞMA ALANI D: Eylemler: Etkileşimli animasyonlar hazırlamak için kodlama yapılan alandır. E: Sekme: Açık olan dosyalar arasında gezinmek için dosyaların üzerinde bulunan sekmedeki isimlerine tıklamak yeterlidir. F: Sahne: Flash animasyonunda kullanılan görsellerin kullanıcılar tarafından görülebileceği alandır. G: Özellikler paneli: Seçilen her araca göre her aracın kendi seçeneklerinin geldiği değişken bir bölümdür.

8 Flash CS5 çok çeşitli projeleri geliştirmek için kullanılan bir programdır. Bu projeler üzerinde çalışan kullanıcıların çeşitli panellere ve panel düzenlemelerine ihtiyaçları vardır. Bu yüzden flash tüm kullanıcı grupları için en uygun arayüzleri geliştirmiştir. Flash ilk çalıştırıldığında varsayılan olarak ESSENTIAL arayüzünde açılır. Kullanıcı arayüzünü değiştirmek için sağ üst taraftaki menü kullanılır. Buradaki öğelere tıkladıkça kullanıcı arayüzü öğeyle ilgili düzende görüntülenir. Örneğin flash cs5 i çizim ve animasyon yapmak için kullanacaksanız, kullanıcı arayüzünü ANIMATOR düzenine getirebilirsiniz.

9 İsterseniz varolan düzenlerde de panellerin yerini değiştirebilirsiniz
İsterseniz varolan düzenlerde de panellerin yerini değiştirebilirsiniz. Bunun için panel başlığından tutarak yerleştirmek istediğiniz yere sürükleyin ve eklemek istediğiniz yere geldiğinizde mavi bir çizgi çıktığında paneli bırakabilirisiniz. Bu şekilde panelleri kendi çalışma tarzınıza göre düzenleyebilirsiniz. Panel başlıklarının sağüst köşesinde bulunan oklara tıklayarak panelleri küçültebilir ve çalışma alanınızı genişletebilirsiniz. Kullanıcı arayüzünü eski haline getirmek için Kullanıcı Arayüzü menüsünden RESET komutunu seçmelisiniz.

10 SAHNE Ekranın ortasındaki büyük beyaz dikdörtgen sahne olarak adlandırılır. Flashtaki bu sahne gerçekte olduğu gibi izleyenlerin oynatılan filmi görebildikleri alandır. Belirli öğeleri sahne içine yada sahne dışına taşıyarak, bu öğelerin görüntüye girecek yada görüntüden çıkacak şekilde hareket etmesini sağlayabilirsiniz. Sahne üzerine yerleştireceğiniz öğeleri düzenli bir şekilde yerleştirmek veya hizalamak için cetvellerden ve ızgaralardan yararlanabilirsiniz. Cetvellerin görünmesi için View menüsünden Rulers komutu seçilir. Izgaranın görüntülenmesi için ise View menüsünden Grid açılır listesinden Show Grid komutu seçilir. Bu ızgara animasyon sırasında görünmezler. Izgara aralıkları ve rengi gibi özellikleri değiştirmek için View menüsünden Grid açılır listesinden Edit Grid komutu seçilir.

11 SAHNE Sahnede yakınlaşmak yada uzaklaşmak için sahne üzerindeki açılır menü kullanılabilir yada kendiniz değer girebilirsiniz. Sahnenin uygulama anlanının kaplanması için Fit in Window seçilir. Bu değişikler View menüsünden Magnification açılır listesindeki komutları kullanarakta gerçekleştirilebilir.

12  PROPERTIES Sahne ilk oluşturulduğunda 550x400 piksel ve beyaz renktedir. Bu özellikleri değiştirmek için PROPERTIES panelini kullanabilirisiniz. Bu paneldeki Size alanının yanında sahne ölçüleri görüntülenir. Edit düğmesine tıklayarak açılan pencerede genişlik ve yükseklik değerlerini değiştirebilirsiniz. Sahnenin rengini değiştirmek için Background Color yanındaki renk kutusuna tıklayın ve istediğiniz rengi seçin.

13  PROPERTIES Frame Rate bir Flash filminin 1 sn de kaç kare göstereceğini belirler. Bu değer varsayılan olarak 24 karedir. Bu değeri arttırırsanız flash filminiz daha hızlı oynar, düşürülmesi ise tam tersi etki yaratır. İnsan gözü saniyede en fazla 24 kare görebilir. Bu yüzden eğer özel bir amacınız yoksa bu değerin varsayılan olarak kullanılması faydalı olur. Sahne özelliklerini çalışma esnasında da istediğimiz zaman değiştirebiliriz.

14 Properties paneli en çok ihtiyaç duyduğumuz özelliklere hızlı bir şekilde ulaşmamızı sağlar. Properties panelinde görünen özellikler seçili olan öğeye aittir ve her nesneye göre farklılık gösterir. Properties panelinde görüntülenen öğeler seçili olan bileşene bağlı olarak farklılık gösterir. Eğer çalışma alanında properties paneli görünmüyorsa window menüsünden properties seçeneği seçilerek veya Ctrl+F3 tuşlarına basarak panel görüntülenebilir.

15 Properties paneli seçili olan nesneye ait öğeleri görüntüler
Properties paneli seçili olan nesneye ait öğeleri görüntüler. Eğer hiçbir şey seçilmemişse sahne rengi, boyutu gibi genel flash belgesi seçenekleri görülür. Eğer sahne üzerindeki bir resim seçilirse bu resmin X ve Y koordinatları görülür. Ve bu koordinat sistemi sol üst köşe noktasını 0 noktası olarak kabul eder. X ekseni resmin sol kenardan uzaklığı, Y ise üstten uzaklığını ifade eder. Properties panelinden de koordinat değerleri girilebilir yada boyut değiştirilebilir. Kilit simgesine tıklayarak boyut değiştirirken en ve boy oranı sabitlenebilir.

16 TRANSFORM Transform paneli seçili nesnelerin yüzdece genişlik ve yüksekliklerini,açılarını, çarpıklıklarını ve konumlarını gösteren paneldir. Ekranda bu panel görünmüyorsa Ctrl+T tuş kombinasyonu ile görünür hale getirilebilir. Rotate ile seçili olan nesneyi döndürebilirsiniz. Skew seçeneği ile nesneyi yatay ve dikey eksende çarpıtabilirsiniz.

17 TRANSFORM Panelin sağ alt köşesinde bulunan Remove Transform ile nesneler üzerinde yaptığınız değişiklikler iptal olur ve nesneler eski haline döner. Yanındaki Duplicate Selection and Transform düğmesi ile nesnelerin ve transform değerlerinin birer kopyası ile yeni bir nesne oluşturulur. Bu seçenek simetrik çizimler oluşturmak için kullanılabilir.

18 LİBRARY Properties panelinin hemen yanındaki sekmeye tıklayarak Library (Kütüphane) panelini açabilirisiniz. Library paneli flashta oluşturulan sembollerin yanı sıra grafikler, ses dosyaları ve video cliplerde dahil olmak üzere içe aktarılan çeşitli dosyaların saklandığı ve organize edildiği alandır.

19 LİBRARY Library paneli öğeleri klasör halinde düzenlemenizi ve bir öğenin kaç defa kullanıldığını görmenizi ve öğeleri tiplerine göre sınıflandırmanızı sağlar. Flash CS5’e öğe aktarırken doğrudan sahneye yada kitaplığa sürükleyerek ekleyebilirisiniz. Sahneye eklediğiniz her öğe doğrudan kitaplığa da eklenmektedir. Ayrıca File menüsünden İmport açılır listesinden İmport Stage ile sahneye , İmport Library ile de kitaplığa öğe ekleyebiliriz.

20 TIMELINE Timeline yani zaman çizelgesi flashta hareketli görüntü oluşturmak için gerekli en önemli bileşendir. Flash ta film mantığı kullanılarak ardı ardına gelen kareler oynatılarak hareketli görüntüler oluşturulur. Timeline bir belgenin içeriğini zaman içerisinde katmanlar ve kareler halinde organize ve kontrol eder. Timeline nın başlıca bileşenleri katmanlar, kareler ve oynatma kafasıdır. Katmanları üst üste yığılmış çok sayıda film şeridi olarak düşünebilirsiniz. Her katman sahnede görüntülenen farklı bir öğe içerir. Bir katmanda diğer katmanlardaki öğeleri etkilemeden yeni nesne ekleyebilir veya mevcut nesneleri düzenleyebilirsiniz. Katmanların Timeline daki sıralanışı sahnede de aynıdır. Yani Timeline da en üstte bulunan katmanın içerisindeki öğe sahnede de en üstte yani en önde görüntülenir. Katmanların sıraları ve yerleri sürükleyerek değiştirilebilir. O an hangi katman üzerinde çalıştığımızı katman adının yanındaki kalem simgesinden anlayabiliriz.

21 TIMELINE Yeni bir katman oluşturmak için New Layer düğmesine tıklamalısınız. Katman isimlerini içeriğine göre isimlendirmek işimizi çalışma esnasında oldukça kolaylaştıracaktır. Bunun için katman adını üzerine çift tıklayarak değiştirebiliriz. Katman adının yanındaki düğmelerle katmanları gizleyebilir ve kilitleyebiliriz. Kilitlenen katman üzerindeki öğelerde düzenleme yapılamaz. Bir katmanı silmek için katman seçilir ve delete düğmesine basılır.

22 Kareler zaman çizelgesi üzerindeki animasyonun uzunluğunu belirtir
Kareler zaman çizelgesi üzerindeki animasyonun uzunluğunu belirtir. Bu uzunluğu arttırmak için kare eklemeniz gerekmektedir. Bir katmana kare eklemek için, uzatmak istediğiniz kare numarasına tıklanarak ve F5 tuşuna basılır veya sağ tuş menüsünden İnsert Frame komutu seçilir. Örneğin bir katmanda 48. Karede bu işlemi uygularsak sahnedeki nesnemiz 48 kare boyunca ekranda kalacaktır. 1 sn 24 kare olduğuna göre 2 sn lik bir animasyon oluşturulmuş olur. Eğer birden fazla katmanda aynı anda kare ekleme işlemi uygulamak istiyorsak shift tuşu basılıyken eklenecek kareleri seçmemiz gerekmektedir. Keyframe yani anahtar kareler sahnedeki içerikteki meydana gelen bir değişikliği gösterir. Anahtar kareler zaman çizelgesi üzerinde birer yuvarlak olarak gösterilir. Beyaz yuvarlak o anda ilgili katman içerisinde hiç bir şey olmadığını gösterir. Siyah yuvarlak daire ise katman içerisinde yeni bir şeyler olduğunu gösterir.

23    Timeline üzerinde anahtar kare oluşturmak için eklemek istediğimiz kareye tıklayarak sağ tuş menüsünden Insert Keyframe komutu seçilir yada F6 tuşuna basılır. Bu şekilde bir anahtar kare eklenmiş olur ve katman içerisindeki öğeler önceki karelerden bağımsız olmak üzere görüntülenmeye devam eder. Eğer katman için boş bir anahtar kare eklemek isterseniz istenilen kare tıklanır, sağ tuş menüsünden Insert Blank Keyframe komutu seçilir yada F7 tuşuna basılır. Bu şekilde katmana yeni bir anahtar kare eklenir fakat katmanın içindeki öğeler bu boş anahtar kareden itibaren görüntülenmez.

24    Anahtar kareler sürükle bırak metodu ile taşınabilir. Anahtar kareyi silmek için anahtar kare seçilir ve sağ tuş menüsünden Clear Frames komutu seçilir. Eğer kareleri silmek istersek, silmek isteğimiz karelerin tümünü seçerek sağ tuş menüsünden Remove Frames komutu seçilir. Oynatma kafası sahnede görüntülenen geçerli kareyi belirtir. Timeline nın alt tarafındaki zaman çizelgesi durum göstergesi seçili kare numarasını, geçerli kare hızını ve geçerli kareye gelene kadar geçen süreyi gösterir.

25 Katman klasörleri ile ilişkili katmanlar gruplandırılabilir ve böylece timeline daki karmaşıklığı önleyebiliriz. Klasör oluşturmak için Timeline nın altındaki New Folder düğmesine tıklanır. Klasör adı aynı layerlardaki gibi üzerine çift tıklayarak değiştirebiliriz. Klasör içerisine ilişkili katmanları eklemek için katmanları seçin ve klasör içine sürükleyin. Sürüklenen Katmanın seviyesini gösteren bir çizgi görüntülenir. Katmanlar bir seviye sağa kayarak içeri girmiş olur. Klasörden çıkarmak için de tam tersi işlem uygulanır.

26 Timeline da daha fazla katman görüntülemek için katmanları küçültebilirsiniz. Bunun için timeline nın sağ üst köşesindeki açılır menüden short komutu seçilerek kare hücrelerin satır yüksekliği azaltılır. Yine sağ üst köşedeki açılır menüden boyutlar seçilerek de karelerin sayısı çoğaltılabilir.

27 TOOLS    Çalışma alanının en sağ tarafında yer alan Tools Paneli, seçim araçlarını, çizim ve yazım araçlarını, boyama ve düzenleme araçlarını, gezinti araçlarını ve araç seçeneklerini içerir. Bir aracı seçtiğinizde Tools Panelinin en altında ve Properties panelinde yer alan seçenekleri ilgili araca göre değişecektir. Tools Panelinde hepsi aynı anda görüntülenmeyecek kadar çok araç bulunduğundan bazı araçlar gruplar halindedir. Bir grupta sadece en son seçtiğimiz araç görüntülenir. Bir araç düğmesinin sağ alt köşesinde küçük bir üçgen bulunuyorsa bu bir gruptur ve başka araçlarda barındırıyordur. Araç düğmesini basılı tutarak istediğiniz aracı seçebilirsiniz.

28 TOOLS Örneğin bir metin eklediğimizde, İlk olarak yeni bir katman oluşturmalıyız. Metnin görüntülenmesini istediğimiz kareye tıklanır ve bir keyframe eklenir. Tools panelinden Text aracı seçilerek sabit bir metin ekleyeceğimiz için Classic Text ve Static Text’i seçeriz. Dinamic Text ve Input Text etkileşimli öğeler oluşturmak için kullanılan ve action script ile kontrol edilebilen özel metin seçenekleridir. Font ve renk seçimi yapılır, Alpha değeri ile saydamlık yüzdesi değiştirilebilir. Anahtar kareye tıklanarak sahne üzerinde metnin olmasını istediğimiz yere tıklayarak ve yazmak istediğimiz metni yazarız. Tools panelinden Selection aracını seçerek Text aracının seçimi kaldırılır.

29 HISTORY Yaptığımız işlemleri geri almak için Undo komutunu kullanıyoruz. Eğer geri alma adımını bir hamleden fazlası için kullanmak istiyorsak History panelini kullanmalıyız. History panelini açarak yaptığınız işlemleri geri alabilirsiniz. Varsayılan olarak son yapılan 100 işlem görüntülenir. History panelinin solundaki sürgüyü istediğimiz işlemin üzerinde getirerek işlemi gerçekleştiririz. (CTRL+F10)

30 ACTIONS PANELİ  Action Script kodlarını Flash dokümanımıza kolayca uygulayabilmemiz için bazı hazır Action Script kodlarının bulunduğu ve Action Script kodlarını yazdığımız kısımlardan oluşan paneldir.(F9)

31 SCENE PANELİ  Scene paneli sayfalarca animasyon oluturduğumuzda çok işimize yarayacaktır. Scene paneline ulaşmak için Window menüsü altındaki Others Panels menüsünden Scene'e tıklarız. (SHIFT+F2)

32 SCENE PANELİ  Duplicate Scene komutu ile sahnenin aynısından kopyalayabilirsiniz. Add Scene komutu ile yeni bir sahne ekleyebilirsiniz. Delete Scene seçeneği ile seçili sahneyi silebilirsiniz. İstediğiniz sahnenin üzerine tıkladıktan sonra sürükleyip taşıyarak da sahnenin sırasını değiştirebilirsiniz.

33 COLOR PANELİ  Color Paneli Color Mixer ve Color Swatches isminde iki kısımdan olumaktadır. (ALT+SHIFT+F9) Color Mixer bize dolgu renkleriyle ilgili olarak Tools panelinden daha fazla seçenek sunmaktadır. Color Mixer açık deilse Window menüsünden Color Mixer komutuyla açabilirsiniz. Color Mixer kontrollerini kullanarak bitmap ve degrade dolgular oluturabiliriz.

34 Color Swatches panelini kullanarak da renk seçimi yapabilirsiniz.
COLOR PANELİ  Type menüsünden rengin yayılma türünü seçebilirsiniz. Solid tek renk için, Linear yatay veya dikey geçişli renk için, Radial oval geçişli renk için, Bitmap ise resim dolgusu oluşturmak için kullanılabilir. Alpha seçeneği ile seçilen rengin saydamlık değerini değiştirebilirsiniz. RGB kutucuklarındaki değerleri değiştirerek de istediğiniz rengi oluşturabilirsiniz. Color Swatches panelini kullanarak da renk seçimi yapabilirsiniz.

35 ÖNİZLEME Animasyonun Önizleme işlemi için Control menüsünden Play komutu seçilir. Tekrar tekrar oynamasını istemiyorsak, Yine Control menüsünden Loop Playback seçeneğinin seçimi iptal edilir. Eğer ayrı bir pencere izleyicinin göreceği şekilde görmek istiyorsak çalışmayı Test Movie/ in Flash Professional ya da Test komutlarından birini seçebiliriz. Önizleme esnasında klasörde .swf dosyalarıda otomatik olarak oluşur.

36  Projeyi YAYINLAMA Flash projelerinde çalışmanız bittiğinde bu çalışmalarınızı başkalarıyla paylaşmak veya başka projeler içinde kullanmak için yayınlamalısınız. Yayınlama ayarlarını değiştirmek için File/Publish Settings komutu seçilir. Açılan pencereden Formats sekmesi altında hangi dosya türlerinin oluşturulacağını seçebilirsiniz. Html sekmesi içinden Loop işaretini kaldırarak animasyonun tekrarlı oynamasını kapatabiliriz. Publish Butonuna bastığımızda proje klasör içerisinde yayınlanmış olur.