Web Sayfaları İçin Animasyonlar Hazırlayabilme

Web Sayfaları İçin Animasyonlar Hazırlayabilme Staj Defteri Doldurma Etkinliği

Web Sayfaları İçin Animasyonlar Hazırlayabilme Staj Defteri Doldurma etkinliğinde İşletmelerde Beceri Eğitimi Dersi Staj Dosyası Konuları kapsamında Adobe Flash programı arayüzünün tanıtılması, zaman çizelgesi ve kareler, maske oluşturma, vektörel çizim yapma, metin işlemleri, semboller, kare kare animasyon, ara hareket animasyonu, şekil arası animasyonu, klasik ara animasyonu, ters kinematik, analog saat uygulaması, Maske Katmanı ile Animasyon Oluşturma, Dünya Etrafında Dönen Ay Animasyonu, Ters Kinematik ile Animasyon Oluşturma uygulama faaliyetleri gibi staj dosyasına yazılacak konuları içerir. Yazımızın sonunda dosyaların indirme linkleri mevcuttur.

Adobe Flash

Animasyon yazılımları, etkileşimli web siteleri ve animasyonlar oluşturmak için tasarımcılara yardımcı olmaktadır. Animasyon yazılımları ile videolar, grafikler ve animasyonlarla desteklenen ilgi çekici uygulamalar oluşturulabilir.

Animasyon yazılımı ile web içeriği oluşturulabilir veya diğer web uygulama yazılımlarından alınabilir, hızlı bir şekilde basit animasyonlar tasarlanabilir ve animasyon yazılımı kodlama dili (ActionScript) kullanarak ileri düzeyde etkileşimli projeler geliştirilebilir.

Adobe Flash karşılama ekranının tanıtılması.

Animasyon yazılımı ilk açıldığında karşılama ekranı ile kullanıcıyı karşılamaktadır. Bu ekranda aşağıdaki alanlar bulunmaktadır.

Karşılama ekranından özel bir isteğimiz yoksa ActionScript 3.0 seçilerek yeni bir flash dosyası açınız. Karşılama ekranının tekrar gözükmesini istemiyorsak sol alt köşedeki “Bir daha gösterme” kutucuğunu işaretleyiniz.

 Adobe Flash arayüzünün tanıtılması.

A: Menü çubuğu
B: Araçlar Paneli
C: Zaman Çizelgesi
D: Eylemler
E: Sekme
F: Sahne
G: Özellikler Paneli
H: Diğer Paneller

Adobe Flash arayüzünün değiştirilmesi.

Flash programını ilk açtığımızda karşımıza gelen ekrandan aşağıdaki resimde gösterilen kısımdan istenen arayüz seçilir. Biz derslerimizde “Tasarımcı” arayüzünü kullanacağız.

Belge Özellikleri

Yeni açılan dosyanın üzerinde çalışmaya başlamadan önce belgenin özellikleri ayarlanmalıdır. Eğer daha önce oluşturduğumuz bir belgenin özelliğini değiştirmek istersek, Değiştir > Belge (Ctrl + J) komutunu tıklayabilirsiniz.

Belgenin boyutlarını “Boyutlar” kısmında ayarlayabiliriz. Örnekte genişlik 550 piksel yükseklik 400 piksel olarak ayarlanmıştır.

Belgenizdeki çalışma sahnenizin rengini buradan değiştirebilirsiniz.

Saniyede kaç animasyon karesi gösterileceğini buradan ayarlayabilirsiniz.

Cetvel Birimleri açılır menüsünden genişlik ve yüksekliğe girilen değerlerin birimlerini piksel, cm, mm, inç, nokta seçimi olarak belirleyebilirsiniz.

Varsayılan Yap butonu değiştirilen özelliklerin bundan sonra devamlı olarak bu şekilde olmasını sağlar.

Özellikler Paneli

Ekranın sağ tarafında Özellikler penceresinden sahne özelliklerini değiştirebilirsiniz. Belge ayarlarına ulaşmak için anahtar görseline tıklayarak gerekli değişiklikleri yapabilirsiniz. Sayfa özelliklerini “Ctrl+J” tuş kombinasyonu ile de açabilirsiniz.

Boyut kısmındaki değerlere tıklayarak genişlik ve yükseklik değerlerini değiştirebilirsiniz. Sahne Alanı kısmından sahnenin rengini değiştirebilirsiniz. FPS (frame per second) değeri, 1 saniyede kaç animasyon karesi gösterileceğidir. Yani FPS değerini 1 yaparsak, 1 saniyede 1 kare ilerler. FPS değerini 24 olarak bırakırsak, 1 saniyede 24 kare ilerler. Sahne ile alakalı daha fazla ayar yapmak istiyorsak Özellikler panelindeki anahtar işaretini tıklamalıyız.

Adobe Flash programının zaman çizelgesi, kareler ve katmanların tanıtılması.

Zaman Çizelgesi ve Kareler: Zaman Çizelgesi karelerden oluşur. Animasyon yazılımı kare temelli animasyon yapan bir yazılımdır. Animasyonlar zaman içerisinde karelerin değiştirilmesi, oynatılması ile oluşturulur. Zaman çizelgesinin kadran kısmında bulunan rakamlar kare sayısını göstermektedir.  Bu karelerin içerisinde sembol, ses veya kod bulunabilir.

Kareler ve Anahtar Kareler: Kare, anahtar kare ve boş anahtar kare türleri vardır.

Anahtar Kare ve Kare: Bir olayın başlangıcını ve bitişi belirler. Arada kalanlar normal karedir.

Boş Anahtar Kare: İçerisinde öğe bulundurmayan karelerdir. Boş anahtar kareler içeriğin eklenmesi ile anahtar kare hâline dönüşürler. Herhangi bir kare eğer o an boş ise beyaz renkte gösterilir. İçerisine sembol yerleştirilirse gri renk olur.

Resimde A,B,C ve D ile gösterilen kareler şunlardır;

A: Anahtar Kare    B: İçerisinde sembol olan kare   C: Boş anahtar kare   D: İçerisinde sembol olmayan kare,

Not: İşlemleri hızlı yapmak önemlidir bu nedenle klavye kısa yollarını öğrenmeliyiz.

Kare Eklemek için F5 tuşunu kullanınız.

Anahtar Kare eklemek için F6 tuşunu kullanınız.

Boş Anahtar Kare eklemek için F7 tuşunu kullanınız.

Katmanlar ve Gruplar: Katmanlar sahnede kullanılan öğelerin birbirinden bağımsız hareket etmesini sağlayan yapılardır. Sahnedeki her bir öğe için ayrı katman oluşturulması tavsiye edilmektedir. Katmanlar bir yığın sırası oluştururlar.(Tıpkı üst üste konulmuş tabaklar gibi.) En üstteki katman yığının en üstündedir, yani en öndedir. Karışıklığı önlemek için katmanlara isim verilir ve klasör içine alınarak gruplanır.

Araçlar Paneli

Araçlar paneli sık kullanılan araçların yer aldığı paneldir. Araçlar panelinde yer alan
bazı araçlar tek iken bazı araçların altında aşağı doğru üçgen işaretleri bulunmaktadır. Bu
işaretler araçların altında, benzer araçların bulunduğunu ifade eder.

Şekilleri Seçme ve Değiştirme

Sahneye çizilen çizimlerin seçmek için Seçim Aracı kullanılır. Seçim aracı ile çizimleri seçme işlemi çizimlerin hangi türde çizildiğine göre farklılık gösterir. Nesne çizimi ile oluşturulan cisimler tek tık, birleştirme modu ile çizilen çizimler aynı anda hem dolgu hem de çerçevesinin seçilmesi için iki çift ile seçilir.

Seçilen çizimleri değiştirmek için ise genellikle Alt Seçim Aracı kullanılır.

Uygulama Faaliyeti
Şekilleri Esnetme

Aşağıdaki görseli oluşturalım. Bunu yapmak için bir adet oval ekleyelim ardından araçlar panelinden “seçim aracı” seçilir. Ardından ovalin kenarına gelindiğinde okun ucunda yay işareti görünecektir bu esnada esnetmeyi aşağıdaki şekli oluşturana kadar yapınız.

Çizim Araçlarını Kullanma

Flash programında grafikler Fireworks’e göre daha esnektir.

Çizgi Aracı

Düzgün çizgi çizebilmek (45, 90 135, 180, 225, 270, 315 ve 360 derece) için Shift tuşuna basılı tutun ve fare ile sahne üzerinde sürükleyin. Serbest çizim için Shift tuşunu kullanmayın.

Dikdörtgen ve Dikdörtgen Temel Öğe Araçları

Dikdörtgen Aracı ile kare ve dörtgenler çizilebilir. Düzgün kare çizmek için klavyeden Shift tuşuna basılı tutularak fare ile çizilir.

Oval ve Oval Temel Öğe Araçları

Oval Aracı ile daire ve yuvarlaklar çizilebilir. Düzgün daire çizmek için klavyeden
Shift tuşuna basılı tutularak fare ile çizilir.

ÇokgenYıldız Aracı

ÇokgenYıldız Aracı çokgen veya yıldız şeklinde çizim yapmanızı sağlar.

Bu araç ile çokgen ve yıldız çizebilirsiniz. Aracın özelliklerine ulaşmak için araç seçildikten sonra Özellikler panelindeki Araç Ayarları seçeneğinin altında bulunan Seçenekler butonuna basabilirsiniz.

Degrade Oluşturma

Degrade oluşturmak için Degrade Dönüştürme Aracı kullanılır. Degrade Dönüştürme Aracı ile sahneye çizilen degradelerin renkleri dönüştürülür.

Maske Oluşturma

Bir animasyon içerisinden katmanın sadece belirli bir alanındaki içeriğin görüntülenmesi istenebilir. Bu tür işlemler için Maske katmanları kullanılır. İçeriğin gösterilmesini belirleyen alan Maske katmanında çizilir. İçeriği içeren katman da Maske katmanının altına yerleştirilir.

Uygulama Faaliyeti
Maske Oluşturma

Adım1. Zaman Çizelgesinden yeni bir katman ekleyin.

Adım2.Yeni katman üzerinde sağ tıklayın ve Maske seçeneğini seçin. Katman maskesi simgesinin değiştiği görülür.

Adım3. Çizim1 katmanına bir nesne çizin. Maske katmanına bir nesne çizin. Burada dikkat etmeniz gereken çizim1 katmanındaki nesnenin görünebilmesi için maske katmanındaki nesnenin çizim alanı içerisinde olması gerekir. Ctrl+Enter ile sonucu test edebilirsiniz.

Kütüphane

Animasyon yazılımı çalışmalardaki sembolleri kütüphanede depolar. Animasyon yazılımı dosyalarının kütüphaneleri birbirinden bağımsızdır. Animasyon yazılımı ile aynı anda birden fazla dosya ile çalışılabilir.
Kütüphane paneli her bir dosyanın içeriğini ayrı ayrı gösterebilmektedir. Farklı filmlerin kütüphaneleri arasında gezinmek için Kütüphane panelindeki açılır menü kullanılabilir. Hemen altında sembolün önizlemesi görülür. Önizlemenin altında da kütüphane elemanları listelenir.

Kütüphane Panelinin en altında 4 seçenek bulunur. Bu seçenekler;

A. Yeni sembol: Yeni sembol oluşturmak için kullanılır.

B. Yeni klasör: sembolleri klasörler içerisinde gruplamak için kullanılır.

C. Özellikler… : Sembol türünü değiştirmek için kullanılır.

D. Sil: Sembol silmek için silmek için kullanılır.

Resimleri Alma

Animasyon yazılımı çalışma ortamına dışardan bir bitmap dosyayı içe aktararak kullanılabilir.

Bir bitmap nesnesini sahne içine aktarmak için;

Dosya > İçe Aktar > Sahne Alanına Aktar (Ctrl + R) komutunu seçin.

Vektörel Çizimleri Dışarı Aktarma

Animasyon yazılımında hazırlanan bir görüntüyü dışa aktarmak için;

Dosya >Dışa Aktar > Görüntüyü Dışa Aktar komutunu seçin.

Renk Araçlarını Kullanma

Renk Paleti, Renk Örnekleri Paneli renklerle işlem yapmak için en uygun seçeneklerin bulunduğu alandır. Bir başka renk seçme yöntemi de Damlalık Aracıdır.

Uygulama Faaliyeti
Grafik Araçları İle Çizim Yapma

Not: Yukarıdaki uygulamada Güneş ve yengecin gövdesi oval şeklinden, diğer bütün şekiller dikdörtgenden dönüştürülmüştür. ( Esnetme yapacağınız zaman şekle çift tıklayınız. Şekle yakınlaşmak için “Ctrl + Shift + Mouse Whell” tuş kombinasyonunu kullanabilirsiniz. )

Metin İşlemleri

Adobe Flash’ta yazı yazmak için metin aracı kullanılır. Metin aracına ait görsel aşağıdadır.

Metin aracı seçildikten sonra sahneye tıklanırsa metin aracına ait özellikler paneli yukarıdaki gibi görünür.

Buradakileri kısaca açıklayalım;

<Örnek Adı> : Kod yazarken karmaşayı önemek için kütüphane isimlerinin haricinde her nesneye verilen isimdir. Örnek Adının İngilizce karşılığı “instance name” dir.

Konum Boyut            : Metnin boyutu ve sahnedeki yeri, konumu buradan ayarlanır.

Karakter         : Metinin tipi, stili, boyutu, harf aralığı, renk, yumuşatma ayarları, kenarlık ekleme, font gömme, v.b. ayarlar buradan yapılır.

Paragraf         : Metnin hizalanması, pragraf ayarları, kenar boşlukları buradan ayarlanır.

Seçenekler     : Metin türüne göre metne link verilmesi, maksimum karakter sayısı gibi ayarlar yapılmaktadır.

Filtreler          : Gölgeleme, ışıma, eğim, bulanıklaştırma v.b. eklemeler buradan yapılır.

Belgeye Metin Ekleme

Belgeye metin eklemek için;

Araçlar panelinden metin aracını seçin. Metin aracı seçildikten sonra fare işaretçisinin değiştiği görülecektir.

Özellikler Panelinden Statik, Dinamik veya Giriş Metni seçeneklerinden Statik Metin seçeneğini seçin.

Statik Metin               : Animasyondaki sabit metinlerdir.

Dinamik Metin          : İçeriğini kodla (ActionScript) değiştirebildiğimiz metinlerdir.

Giriş Metni                : Kullanıcının bilgi girişi yapabildiği metinlerdir.

Sahnede fare ile basıp sürüklenerek bir alan oluşturulur veya tıklanıp yazıya alansız başlanır.

Yazı yazma işlemi bitince Seçim Aracı seçilebilir ya da ESC tuşuna basılabilir.

Semboller

Adobe Flash çizilen şekilleri veya çalışma içerisine aktarılan şekilleri sembollere dönüştürerek kütüphanede saklayabilir. Kütüphanede saklanan bu semboller daha sonra çalışılan dokümanlarda da kullanabilir

Sembol kullanımı önemli bir oranda dosya boyutunu azaltır çünkü tekrar tekrar çizim yapılarak dosya boyutunun büyümesinin önüne geçilmiş olur. Ayrıca sembolü oynatıcı bir kere yüklediği için animasyon da daha hızlı yüklenecektir.

Semboller Türleri

Her sembolün, katmanlarla tamamlanan benzersiz bir zaman çizelgesi ve sahne alanı vardır. Ana zaman çizelgesine olduğu gibi, bir sembol zaman çizelgesine de kareler, ana kareler ve katmanlar eklenebilir. Bir sembol oluşturulduğunda sembolün kullanılacağı yere uygun sembol türü seçilmelidir.

1-Grafik

Statik görüntüler için ve ana zaman çizelgesine bağlanmış yeniden kullanılabilen animasyon parçaları oluşturmak için kullanılır. Grafik sembolleri, ana zaman çizelgesiyle senkronize çalışır. Statik, animasyon içermeyecek semboller için kullanılır. Bundan dolayı etkileşimli kontroller ve sesler, bir grafik sembolünün animasyon sekansında çalışmayacaklardır. Grafik sembolleri, zaman çizelgeleri olmadığından düğmelere veya film kliplerine göre animasyon dosyası boyutuna daha az eklerler.

2- Düğme

Fare tıklatmaları, üzerine gelmeler ve başka eylemlere karşılık veren, etkileşimli düğmeler oluşturmak için kullanılan sembol türüdür. Çeşitli düğme durumlarıyla ilişkili grafikler tanımlanabilir ve sonra bir düğme örneğine eylemler atanabilir.

3- Film Klibi

Yeniden kullanılabilen animasyon parçaları oluşturmak için kullanılır. Film kliplerinin ana zaman çizelgesinden bağımsız kendi çok kareli zaman çizelgeleri vardır, bunları etkileşimli kontroller, sesler ve hatta başka film klibi örnekleri içerebilen bir ana zaman çizelgesi içinde yuvalanmış olarak düşünülebilir.

Animasyon Tekniklerini Kullanmak-1

Animasyon Oluşturma

Animasyon yazılımı bir animasyonu oluştururken filmdeki zaman aralıklarını karelere böler. Animasyon oluşturulurken bu kareler ile çalışılır. Karelerin içerisinde sembol, ses veya kod bulunabilir.

Kare, anahtar kare ve boş anahtar kare türleri vardır. Anahtar kare bir olayın başlangıcı ve bitişini belirler. Boş anahtar kare içerisinde öğe bulundurmayan karelerdir. Boş anahtar kareler içeriğin eklenmesi ile anahtar kare hâline dönüşürler. Herhangi bir kare eğer o an boş ise beyaz renkte gösterilir. İçerisine sembol yerleştirilirse gri renk olur.

Animasyon Türleri

Animasyon yazılımı, animasyon ve özel efektler oluşturmak için çeşitli yöntemler sunar. Bu yöntemlerin her biri, ilginç animasyonlu içerikler oluşturmak için kullanıcıya farklı olanaklar sağlar.

Animasyon yazılımı şu animasyon türlerini destekler;

Kare Kare Animasyon: Zaman çizelgesindeki her kare için farklı bir resim seçilmesine olanak tanır.

Ara Hareketler: Bir karedeki ve bir başka karedeki bir nesne için konum ve alfa saydamlığı gibi özellikleri ayarlamak üzere kullanılır. Animasyon yazılımı daha sonra aradaki karelerin özellik değerlerini tahmin ederek tamamlar.

Klasik Aralar: Ara hareketler gibidir, ama oluşturması biraz karmaşıktır. Klasik aralar, bazı özel animasyonlu efektlere olanak tanır. Klasik ara animasyonunda sadece anahtar kareler düzenlenebilir.

Şekil Araları: Animasyon yazılımı bir şekli başka bir şekle dönüştürmek için animasyonu oluştururken aradaki karelerin içine ara şekilleri tahmin ederek uygular.

Ters Kinematik: Şekil nesnelerinin uzatılıp, bükülmesini ve sembol örneklerinden oluşan grupların birbirine bağlamasını ve bu sayede onların birlikte doğal bir biçimde hareket etmelerinin sağlanmasına olanak tanır.

Şimdi yukarıdaki animasyon türleri ile alakalı uygulamalar yapalım.

Uygulama Faaliyeti
Analog Saat Uygulaması (Kare Kare Animasyon)

Adım 1: 550×400 piksel ebatlarında beyaz renkte bir sahne açınız.

Adım 2: Sahnenin orta kısmına 350x350px boyutlarında ve siyah renkte bir çember çiziniz. (Kontur=20)

Adım 3: Saatler katmanına analog saatimizin saat kısımlarını çizgi aracı ile 12 adet olacak şekilde oluşturalım. (Kontur=5)

Adım 4: Saatler katmanına saatleri rakam olarak yazı aracı ile yazalım ve ortaya bağlantı noktasını oval aracı ile çizelim. (1-2-3-4-….12)

Adım 5: Akrep katmanı oluşturalım ve bu katmana saatimizin akrebini çizelim. Akrebi çizerken dikdörtgen aracımıza köşe ekleyebilmek için ALT tuşuna basılı tutarak fare ile köşe ekleyebiliriz.

Adım 6: Yelkovan katmanı ekleyerek aynı işlemleri yelkovan için de yapalım.

Adım 7: Saniye katmanı ekleyerek aynı işlemleri saniye için de yapalım. Saniyemizi kırmızı yapalım ve dönme kısmına oval aracımızla oval ekleyelim.

Adım 8: Döndürme işleminin akrep, yelkovan ve saniye birleşim yerinden olması için saniyeyi serbest dönüştürme ile seçince aşağıdaki gibi beyaz yuvarlağı birleşim yerine sürükleyip bırakın. Böylece o noktadan döndürme gerçekleşmiş olacaktır.

Adım 9: Zaman çizelgesinde F6 kısa yol tuşu ile Anahtar Kare ekleyiniz. 2.karedeyken sahnedeki saatin saniyesini 1 saniye döndürünüz.

Adım 10: Zaman çizelgesinden 30. Kareye gelene kadar F6 ile anahtar kare ekleyerek saniyeyi 1 saniye olacak şekilde döndürünüz.

Adım 11: Aşağıdaki gibi her 10 saniyede 1 yelkovanı da F6 anahtar kare ekleyerek biraz döndürelim. Döndürme işleminin merkezden olması için yelkovanın dönme merkezini saniyede yaptığımız gibi birleşim noktasına sürüklemeniz gerekmektedir.

Adım 12: Animasyonu test etmek için “Ctrl + Enter”  tuş kombinasyonunu kullanınız.

Adım 13: Animasyonun hızını düşürmek için zaman çizelgesindeki 24 fps değerini 1 yapınız. Böylece saatimizin saniyesi saniyede 1 kare ilerlemiş olacaktır.

Uygulama Faaliyeti
Ara Hareket Animasyonu

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

Adım 2: Sahnede sola yakın ve ortaya gelecek şekilde 100×100 piksel ebatlarında ve mavi renkte bir kare çizin.

Adım 3: Çizdiğiniz kareyi grafik sembolüne çevirin.

Adım 4: Zaman çizelgesinden 1. Kareyi seçin ve Ekle > Ara Hareket komutunu seçin veya kare üzerinde sağ tıklayın ve Ara Hareket komutunu seçin. Zaman çizelgesinin “fps” karesi kadar değiştiğini göreceksiniz.

Adım 5: Ara hareketin oluşması için son kareye tıklayın ve klavyeden “F6” tuşuna basarak anahtar kare ekleyin.

Adım 6: Son karede sembolün özelliklerini değiştirin. Bu özellikler konum, ölçek, eğim vb. olabilir.

İsterseniz “Hareket Düzenleyici” panelinden yeni özellikler ekleyebilir veya var olan özellikleri değiştirebilirsiniz.

Adım 7: 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.

Uygulama Faaliyeti
Klasik Ara Animasyonu

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

Adım 2: Sahnede sol üst köşeye yakın 100×100 piksel ebatlarında ve kırmızı renkte bir kare çizin.

Adım 3: Çizdiğiniz kareyi grafik sembolüne çevirin.

Adım 4: Zaman çizelgesinden animasyonun biteceği son kareye “F6” tuşuna basarak bir anahtar kare ekleyin ve sembolün özelliklerini değiştirin. Ben zaman çizelgesinden 30. Kareye anahtar kare ekledim, özellik olarak 30. Karede rengi siyah, boyutunu 50×50 piksel ve konumunu sağ alt köşeye yakın yaptım. Herhangi bir kareyi seçin ve Ekle > Klasik Ara komutunu seçin veya herhangi bir kare üzerinde sağ tıklayın ve Klasik Ara komutunu seçin. Zaman çizelgesinin renginin değiştiğini ve animasyonun bir ok işaretiyle gösterildiğini göreceksiniz.

Adım 5: Animasyonunuzun hızını 8 fps yapın ve animasyonu test etmek için “Ctrl + Enter”  tuş kombinasyonunu kullanınız.

Uygulama Faaliyeti
Şekil Arası Animasyonu

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

Adım 2: Sahnede sol üst köşeye yakın 100×100 piksel ebatlarında ve siyah renkte bir daire çizin.

Adım 3: Zaman çizelgesinden 25. Kareye “F7” tuşuna basarak boş bir anahtar kare ekleyin ve bu kareye beşgen çizin, rengi mavi, boyutunu 50×50 piksel yapın. Ara karelerin herhangi birini seçin ve Ekle > Şekil Arası komutunu seçin veya kare üzerinde sağ tıklayın ve “Şekil Arası” komutunu seçin. Zaman çizelgesinin yeşile döndüğünü göreceksiniz.

Adım 4: Animasyonunuzun hızını 8 fps yapın ve animasyonu test etmek için “Ctrl + Enter”  tuş kombinasyonunu kullanınız.

Animasyon Tekniklerini Kullanmak-2

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.

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.

C. Ters Kinematik animasyon Oluşturma (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
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 resmi sahneye ekleyin.

Adım 3: Resmin boyutunu sahneye sığacak şekilde ayarlayı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. Seçimin ardından katmanlar değişecektir.

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.

Uygulama Faaliyeti
Dünya Etrafında Dönen Ay Animasyonu

Dünya Etrafında Dönen Ay Animasyonunu “Bir Yol Boyunca Animasyon Oluşturma (Motion Path in Adobe Flash)” konusuna bağlı olarak yapacağız. 

Adım 1: “550×400“piksel ebatlarında bir sahne açın ve sahne arkaplanını “siyah” yapın.

Adım 2: Katmanın adını “bg” olarak değiştirin.

Adım 3: Fırça aracını seçin ve beyaz renk kullanarak siyah arkaplan üzerine karışık olarak “beyaz” renkte yıldızlar yapın.

Adım 4: İki yeni katman açın adlarını “dunya” ve “ay” olarak değiştirin.

Adım 5: ”dunya” katmanını seçin içerisine indirdiğiniz “dunya.png” görselini “Ctrl+R” tuşları ile sahneye aktarın, boyutunu “300×300” piksel olarak değiştirin ve sahnenin tam ortasına yerleştirin. Hizalamayı “hizala” panelinden “Sahne alanına hizala”’yı seçerek “yatay ortayı hizala” ve “dikey ortayı hizala” ya tıklayarak resmi sahneye pratik olarak ortalayabilirsiniz.

Adım 6: ”ay” katmanını seçin içerisine indirdiğiniz “ay.png” görselini “Ctrl+R” tuşları ile sahneye aktarın, boyutunu “50×50” piksel olarak değiştirin ve uygun boyutta sahneye yerleştirin.

Adım 7: ”kilavuz_ay” ismiyle yeni bir katman daha açın. Bu katmana aşağıdaki gibi bir oval ekleyin (dolgu yok, kontur kalınlığı “1”, renk beyaz)

Adım 8: ”kilavuz_ay” katmanındaki oval klavuza yakınlaşın ve seçin, silgi aracını seçin, aşağıdaki kırmızı ok ile gösterilen yeri silin.

Adım 9: ”kilavuz_ay” katmana sağ tıklayın ve “kilavuz” seçeneğini seçin. Bu işlemden sonra ”kilavuz_ay” katmanının yanında çekiç işareti olacaktır.

Adım 10: ”ay” katmanını seçin ve “kilavuz_ay” katmanın altına sürükleyip bırakın.

Adım 11: ”ay” katmanındaki ay’ı seçin ve araçlar panelinden “serbest dönüştürmeyi” seçin bunun için “Q” harfine basabilirsiniz. Aşağıda kırmızı ok ile gösterildiği gibi daha önce çizdiğiniz oval’in üzerine ay’ı yerleştirin. (Burası ay’ın dönmeye başlayacağı yer olmuş olacak.)

Adım 12: Şimdi 150. kareye gelin, aşağıdaki gibi tüm katmanları fare ile seçin ve “F6” ile anahtar kare ekleyin. Ya da bu işlemi her katman için tek tek de “F6” ya basarak yapabilirsiniz.

Adım 13: Şimdi kırmızı okla gösterilen 150. kareye gelin “ay” katmanını seçin ardından kırmızı okla gösterilen yere ay’ı klavye yön tuşlarıyla veya fare yardımı ile sürükleyin. (Burası ay’ın dönmeyi bitirdiği yer olmuş olacak.)

Adım 14: Şimdi de “ay” katmanında herhangi bir kareye sağ tıklayarak “klasik ara” animasyonu ekleyelim. Animasyonu test edelim ve ay’ın dönüşünü izleyelim bu esnada ay’ın dünyanın kuzey yarımküresinin arkasında kalmadığını gözlemleyelim.

Adım 15: Bu sorunu şöyle çözelim. Yanlışlıkla silmemek veya yerini değiştirmemek için “dunya” katmanı dışındaki tüm katmanları kilitleyin. Dünyayı seçin ve sağ tuş ile “Parçala” seçeneğini seçin.

Adım 16: Seçim aracı ile dünya’nın kuzey yarım küresini seçin ve “Ctrl+X” ile veya sağ tuş tıklayarak kesin.

Adım 17: Kestiğimiz parçayı yapıştırmak için “dunya_kuzey” ismiyle yeni bir katman oluşturun ve kestiğiniz parçayı bu katman seçiliyken sahnede sağ tuş tıklayarak “Yerinde Yapıştır” deyip yapıştırın.

Adım 18: ”dunya_kuzey” katmanını katman sırası olarak aşağıdaki gibi en üste çıkartın. ”dunya” katmanının adını da “dunya_guney” olarak değiştirin.

Adım 19: Animasyonunuzu ve animasyonu test etmek için “Ctrl + Enter”  tuş kombinasyonunu kullanınız.

Uygulama Faaliyeti
Ters Kinematik ile Animasyon Oluşturma

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

Adım 2: Yukarıdaki gibi bir şekil çizin.

Adım 3: Kemik aracına tıklayın ve yukarı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.

Web Sayfaları İçin Animasyonlar Hazırlayabilme
İşletmelerde Mesleki Eğitim ( İşletmelerde Beceri Eğitimi ) Arşivi İçin Tıklayınız…