Grafik ve Animasyon Adobe Flash Hafta-7

Grafik ve Animasyon 25 Şubat 2019 - 0:34 255 KEZ OKUNDU 0 YORUM YAPILDI

Grafik ve Animasyon Adobe Flash Hafta-7
Sayfayı Paylaş...
  •  
  • 6
  • 1
  •  
  •  

Adobe Flash Animasyon Oluşturma

Grafik ve Animasyon Adobe Flash Hafta-7 dersimizde aşağıdaki konu başlıklarını inceleyip örnek uygulamalar yapacağız.

A. Maske Katmanı ile Animasyon Oluşturma

B. Bir Yol Boyunca Animasyon Oluşturma

C. Ters Kinematik animasyon Oluşturma

A. Maske Katmanı ile Animasyon Oluşturma (Creating a Layer Mask in Adobe Flash)

Maske katmanlarını, alt katmandaki resim veya grafiğin belirli kısımlarını görüntülemek için kullanılır.

Uygulama Faaliyeti-1 Maske Katmanı ile Animasyon Oluşturma

Adım 1: 550×367 piksel ebatlarında istediğiniz renkte bir sahne açın.

Adım 2: Katmanın adını “resim” olarak değiştirin ve beğendiğiniz bir resim ekleyin. Uygulamada kullanacağımız resmi indirmek için tıklayınız…

Adım 3: Resmin boyutunu sahneye sığacak şekilde küçültün. Dilerseniz bu resmi seçerek hizala panelinden “Sahne alanına hizala”’yı seçerek “yatay ortayı hizala” ve “dikey ortayı hizala” ya tıklayın ve resmi sahneye ortalayın.

Adım 4: Yeni bir katman ekleyin ismini “maske” olarak değiştirin ve bu katmana 150×150 boyutlarında bir daire ekleyin. Şimdi daireyi seçin ve hizala panelinden daireyi sahnenin sol üst köşesine hizalayın.

Adım 5: Şimdi “resim” katmanını seçin, 150. kareye tıklayın ve “F6” ile anahtar kare ekleyin.

Adım 6: Şimdi de “maske” katmanını seçin, 25. kareye tıklayın ve “F6” ile anahtar kare ekleyin ve 25. karedeyken eklediğiniz daireyi seçip hizala panelinden “sağ kenarı hizala” deyip sağ üst köşeye hizalayın.

Adım 7: maske” katmanını seçiliyken, 50. kareye tıklayın ve “F6” ile anahtar kare ekleyin ve 50. karedeyken eklediğiniz daireyi seçip hizala panelinden “alt kenarı hizala” deyip sağ alt köşeye hizalayın.

Adım 8: Adım 5 ve 6’da anlatılanların benzerini maske” katmanını seçiliyken, 75. karede “sol kenarı hizala” , 100. karede “üst kenarı hizala” , 125. karede “yatay ortayı hizala” ve “dikey ortayı hizala” deyip 125. karede daireyi sahnenin ortasına hizalayın.

Adım 9: 150. kareye tıklayın ve “F6” ile anahtar kare ekleyin ve daireyi tüm resim görünecek şekilde “Alt+Shift” tuşlarına basarak daireyi merkezden büyütün.

Adım 10: “maske” katmanındaki tüm aralıklara “klasik ara” ekleyin.

Adım 11: “maske” katmanı üzerine sağ tıklayın ve “Maske” seçeneğini seçin. (Şekil 1) Seçimin ardından katmanlar Şekil 2’deki gibi değişecektir.

Şekil-1
Şekil-2

Adım 12: Animasyonunuzun hızını biraz yavaşlatın ( 10 fps yapın ) ve animasyonu test etmek için “Ctrl + Enter”  tuş kombinasyonunu kullanın. Sonuç aşağıdakine benzer olmalıdır. Not: Flash uygulamasını göremiyorsanız “Adobe Flash Player eklentisini etkinleştirmek için tıklayın” yazan yere tıklayın ve açılan pencereden izin ver’e tıklayın.

 

Maske Katmanı ile Animasyon Oluşturma Dosyalarını indir. download-1

 

Uygulama Faaliyeti-2 Büyüteç Kullanarak Maske Katmanı İle Animasyon Oluşturun?

Yukarıdaki örneği biraz daha geliştirerek büyüteç ile aşağıdaki gibi bir tasarım yapınız. Aşağıda uygulamaya ait “swf” dosyası görülmektedir.

Uygulamada kullanılan resmi indir, büyüteci indir…

Uygulamanın nasıl yapıldığını öğrenmek için yazımızı okuyun…

 

Maske Katmanı ile Büyüteçli Animasyon Oluşturma Dosyalarını indir. download-1

 

B. Bir Yol Boyunca Animasyon Oluşturma (Motion Path in Adobe Flash)

Nesnenin en kısa yolu değil de istenilen bir yolu takip etmesi isteniyorsa hareket yolu kullanılır. Yol gösterildiğinde ise hareket eden nesne o yola bağlı olarak gider ve o yol dışına çıkmaz.

Uygulama Faaliyeti-3 Bir Yol Boyunca Animasyon Oluşturma

Adım 1: 500×300 piksel ebatlarında istediğiniz renkte bir sahne açın.

Adım 2: Katmanın adını “klavuz” olarak değiştirin ve “kalem” aracına tıklayarak aşağıdaki gibi bir yol oluşturun. Not: Çizdiğiniz yolu düzenlemek için çift tıklayın ve aşağıdaki gibi düzenleyin.

Adım 3: Yeni bir katman ekleyin, “klavuz” katmanın altına taşıyın ismini de “şekil” olarak değiştirin ve bu katmana 70×70 boyutlarında bir daire ekleyin.

Adım 4: “klavuz” katmanı üzerine sağ tıklayın ve “Klavuz” seçeneğini seçin. (Şekil 1) Seçimin ardından katmanlar Şekil 2’deki gibi değişecektir.

Şekil-1
Şekil-2

Adım 5: “şekil” katmanını “klavuz” katmanının altına sürükleyip bırakın. Ardından daireyi yolun başlangıç noktasına yerleştirin. 50. kareye tıklayın her iki katmana da “F6” tuşuna basak “anahtar kare” ekleyin. 50. karede daireyi yolun sonuna getirip bırakın. Son olarak “şekil” katmanına klasik ara animasyonunu ekleyin.

Adım 6: Animasyonunuzun hızını biraz yavaşlatın ( 8 fps yapın ) ve animasyonu test etmek için “Ctrl + Enter”  tuş kombinasyonunu kullanınız. Sonuç aşağıdakine benzer olmalıdır. Not: Flash uygulamasını göremiyorsanız “Adobe Flash Player eklentisini etkinleştirmek için tıklayın” yazan yere tıklayın ve açılan pencereden izin ver’e tıklayın.

 

Bir Yol Boyunca Animasyon Oluşturma Dosyalarını indir. download-1

 

Uygulama Faaliyeti-4 : Dünya Etrafında Dönen Ay

Adobe Flash yazılımını kullanarak yukarıdaki örneği geliştirerek Dünya etrafında dönen Ay animasyonu tasarlayınız. Aşağıda uygulamaya ait “swf” dosyası görülmektedir.

Uygulamada kullanılan dünya resmini indir, ay resmini indir…

Uygulamanın nasıl yapıldığını öğrenmek için yazımızı okuyun…

 

Dünya Etrafında Dönen Ay Flash Dosyalarını indir. download-1

C. Ters Kinematik (Inverse Kinematics in Adobe Flash)

Ters kinematik, üst-alt ilişkilerinde doğrusal ya da dallı armatürlere zincirlenen eklemler kullanarak nesneleri hareketlendirmenin bir yoludur. Bir eklem hareket ettiğinde, buna bağlı diğer eklemler de hareket edecektir.

Ters kinematik doğal hareket oluşturulmasına izin verir. Ters kinematik kullanarak animasyon uygulamak için zaman çizelgesindeki eklemlerin başlangıç ve bitiş konumlarını belirtmeniz yeterlidir. Animasyon yazılımı, başlangıç ve bitiş kareleri arasında bulunan armatürdeki eklem konumlarını otomatik olarak tanımlar ve tamamlar.

Not: Şekillere dilediğiniz gibi eklem ekleyebilirsiniz fakat sembole dönüştürdüğünüz şekillere veya kütüphane elemanlarında ise bir tane eklem ekleyebilirsiniz.

Uygulama Faaliyeti-5 Ters Kinematik ile Animasyon Oluşturma

Adım 1: 500×300 piksel ebatlarında istediğiniz renkte bir sahne açın.

Adım 2: Aşağıdaki gibi bir şekil çizin.

Adım 3: Kemik aracına tıklayın ve aşağıdaki gibi eklemler ekleyin.

Adım 4: Zaman çizelgesinde 50.kareye Mouse ile sağ tıklayın ve “Poz ekle” ye basın. (Armatür_1 yeşile renge dönecek.)

Adım 5: Zaman çizelgesinde 50.karedeyken şeklin konumunu eklem yerlerinden dilediğiniz gibi değiştirin ve animasyonu oynatarak değişimi izleyin.

Adım 6: Animasyonunuzun hızını biraz yavaşlatın ( 10 fps yapın ) ve animasyonu test etmek için “Ctrl + Enter”  tuş kombinasyonunu kullanınız. Sonuç aşağıdakine benzer olmalıdır. Not: Flash uygulamasını göremiyorsanız “Adobe Flash Player eklentisini etkinleştirmek için tıklayın” yazan yere tıklayın ve açılan pencereden izin ver’e tıklayın.

 

Ters Kinematik Animasyonu Flash Dosyalarını indir. download-1

Uygulama Faaliyeti-6 : Ters Kinematik ile Lamba Uygulaması

Adobe Flash yazılımını kullanarak aşağıdaki görsele benzer bir lamba çizin ve ilgili kısımlarına eklem ekleyin ve dilediğiniz gibi lambayı oynatın. Aşağıda uygulamaya ait “swf” dosyası görülmektedir.

Uygulamanın nasıl yapıldığını öğrenmek için yazımızı okuyun…

 

Ters Kinematik ile Lamba Animasyonu Flash Dosyalarını indir. download-1

 

Grafik ve Animasyon Adobe Flash

Konu Anlatımları için Tıklayınız…

Grafik ve Animasyon Adobe Flash konu Anlatımları




BU KONULAR DA İLGİNİZİ ÇEKEBİLİR

Grafik ve Animasyon Adobe Flash Hafta-12

CheckBox Bileşeni (CheckBox Component) ile Çoklu Seçim Uygulaması

Grafik ve Animasyon Adobe Flash Hafta-11

ColorPicker Bileşeni (ColorPicker Component) ile Renk Değiştirme

Grafik ve Animasyon Adobe Flash Hafta-10

Adobe Flash Bileşen Uygulamaları

Grafik ve Animasyon Adobe Flash Hafta-9

ActionScript Programlama Dili

BU MAKALEYE YORUM YAP