-
Merhaba.
-
Benim adım Natalie.
Google Web Designer'ın
-
geliştirilmesine yardımcı olan
mühendislerden biriyim.
-
Bu videoda, gelişmiş modda
zaman çizelgesini
-
kullanarak animasyon oluşturma
-
üzerinde duracağız.
-
Zaman Çizelgesi paneli, varsayılan olarak
-
çalışma alanının altındadır.
Bu, sunduğumuz iki zaman çizelgesi
-
aracından biridir. Diğeri ise
Hızlı mod zaman çizelgesidir.
-
Çoğu dosya varsayılan olarak
Hızlı modda açılır
-
ve sağ üst köşedeki bu düğmeye
basarak
-
modlar arasında geçiş yapabilirsiniz.
-
Bu Hızlı mod, bu da Gelişmiş mod.
-
Hızlı modu ele aldığımız
ayrı bir eğiticimiz var.
-
Bu videoda yalnızca, daha karmaşık
-
ancak daha güçlü olan
-
Gelişmiş mod anlatılıyor.
-
Eğitici alıştırması olarak küçük
animasyonlu kısa bir reklam kullanacağım.
-
Reklamda kayan bir resim,
beliren ve kaybolan
-
iki metin kutusu ve
sonda görünen bir logo var.
-
Bu videoda, bu reklamı
Google Web Designer'da
-
nasıl oluşturabileceğimizi
adım adım göreceğiz.
-
İlk olarak kayan resim
animasyonunu yapalım.
-
İlk adım olarak, resmi sahneye
sürükleyip
-
animasyon başladığında görünmesini
-
istediğim yere yerleştiriyorum.
-
Yaklaşık burada bir yerde olacak.
-
Daha sonra bu şekilde
kaydıracağız.
-
Zaman çizelgesinde bu küçük
kanalın göründüğünü fark edebilirsiniz.
-
Bu, zaman çizelgesi katmanıdır.
-
Bu da, bu nesne için zamanla animasyonu
-
yerleştireceğimiz kullanıcı arayüzüdür.
-
Animasyon oluşturmanın temelinde,
-
tanımlayacağımız animasyon kareleri yatar.
-
Bunlar bir öğenin belirli
özellik değerlerine sahip olduğu
-
ve sonra bu değerler arasındaki
geçişin nasıl ve ne kadar süreceğinin
-
belirtildiği zaman noktalarıdır.
-
Bu resmi kaydırmak için
birkaç animasyon karesi oluşturacağız.
-
Yaklaşık bir saniye süreyle
yerinde kalmasını istiyoruz.
-
Bu yüzden animasyon karesini
bir saniyeye koyacağım.
-
Bunun için sağ tıklayıp Animasyon
karesi ekle'yi seçiyorum.
-
Ardından yarım saniye sonrasına
bir tane daha ekliyorum.
-
Sonra bu animasyon karesinde
-
resmi kaydırıp, o anda olmasını
-
istediğim yere getireceğim.
-
Sonra bu resmin, burada bir saniye
daha kalmasını istiyorum.
-
Son olarak da yarım saniye
sonrasında
-
resmin kayarak görünümden tamamen
çıkmasını istiyorum.
-
Şimdi, Oynatma kafasını sürükleyerek
zaman çizelgesinde ileri geri oynatabilir
-
ve animasyonunuzu önizleyebilirsiniz.
-
Ayrıca, sol köşedeki Oynat düğmesine
basarak da
-
doğrudan sahne üzerinde
önizleyebilirsiniz.
-
Güzel görünüyor.
-
Bir sonraki adıma geçelim.
-
Tamamlanmış reklamda, resmin
daha sonra kaymasının yanı sıra
-
başlangıçta yavaşça belirdiğini
-
görmüştük.
-
Şimdi bu yavaşça belirme
animasyonunu yapalım.
-
Noktalı çerçeve aracını kullanarak
tüm animasyon karelerini
-
seçeceğim ve en sonda
yavaşça belirmeye yer açmak için
-
bunu kaydırıp sıfır zaman noktasına
-
bir animasyon karesi ekleyeceğim.
-
Bu animasyon karesinde, öğenin
-
opaklığının sıfır olmasını istiyoruz.
-
Diğer tüm animasyon karelerinde ise
bu değerin %100 olmasını istiyoruz.
-
Şimdi de metni ekleyelim.
-
İki metin kutusu olduğunu görmüştük.
-
Resim kayarken bu metin kutuları
sırayla yavaşça belirmişti.
-
Önce birinci metin kutusunu oluşturalım.
-
İlk metin kutusu yavaşça belirmeli,
-
sonra bu süre boyunca yerinde kalmalı
ve ardından
-
resim kayarken metin yavaşça kaybolmalı.
-
Yapılacak ilk şey bu kutuyu
başlangıç durumuna getirmek için
-
opaklığını sıfırlamak.
-
Ardından, yarım saniye sonrasında
bir animasyon karesi oluşturabilir
-
ve opaklığı %100 yapabiliriz.
-
İki buçuk saniyede, opaklığın %100
olarak kalmaya devam etmesini istiyoruz.
-
Daha sonra, ikinci saniyede
tekrar %0 olmasını istiyoruz.
-
Animasyon karesini daha önce
yaptığımız gibi
-
ekleyebilir ya da isterseniz
-
animasyon karesini çoğaltma
işlevini de kullanabilirsiniz.
-
Alt tuşunu basılı tutarsanız animasyon
karesinin kopyasını oluşturabilir
-
ve bunu farklı bir zamana
sürükleyebilirsiniz.
-
Bu da bazı animasyonlarda
size zaman kazandırabilir.
-
Şimdi de sonuncuyu metin kutusunun
tamamen kaybolduğu
-
zamana ekleyelim.
-
Şimdi önizleyebilirsiniz.
-
Mükemmel.
-
Tamam.
-
İkinci metin kutusu ise
aslında birinci metin kutusunun
-
neredeyse aynısı.
Yalnızca metin farklı ve
-
birincisi kaybolduktan sonra görünüyor.
-
Bu yüzden, zaman harcamamak için
-
bu katmanı animasyonla birlikte
çoğaltacağım.
-
Bunun için sağ tıklayıp
-
Katmanı Çoğalt'ı seçiyorum.
-
Sonra bir kez daha Noktalı Çerçeve
seçim aracını kullanıp
-
tüm animasyon karelerini seçebiliyor
ve bunları animasyonun
-
gerçekleşeceği yere sürüklüyorum.
-
İlk metnin yavaşça kaybolduğu
zamandaki
-
animasyon karelerini düzenleyerek
-
geçişin çakışmamasını sağlıyorum.
-
Animasyon kareleriniz birbirine bu kadar
yakın olduğunda
-
her zaman yakınlaştırma çubuğunu
kullanarak animasyonunuzun
-
daha yüksek çözünürlüklü görünümüne
bakabilirsiniz.
-
Şimdi de metni güncelleyelim.
-
Şu anda üst üste duran
-
bu iki metin kutum var.
-
Burayı sağ tıklarsam yanlışlıkla
-
üsttekini düzenleyebilirim.
-
Bu yüzden, yanlışlıkla
etkinleştirmemek için
-
bunu kilitleyeceğim.
-
Bu şekilde alttakini
düzenleyebileceğim.
-
Artık animasyonumuz
neredeyse tamamlandı.
-
Şimdi animasyon kareleri
-
arasında neler olduğuna bakalım.
-
Her animasyon karesi çifti arasında
Lineer yazdığını görebilirsiniz.
-
Bu ifade, CSS yumuşatma
işleviyle ilgili.
-
Bu işlev, her animasyon karesi
çifti arasındaki değerlerin
-
hesaplanmasında kullanılır.
-
Lineer ifadesi, değerlerin sabit hızda
değiştiği anlamına geliyor.
-
Kullanabileceğimiz başka
seçenekler de var.
-
Sağ tıklarsanız, CSS teknik özelliklerinde
belirtilen,
-
kullanabileceğiniz tüm standart
yumuşatma işlevlerini
-
görebilirsiniz.
-
Resimlerde birinin, yarıdan itibaren
-
kayarak diğerinin yerini aldığı
bu geçişe özel olarak,
-
farklı bir yumuşatma işlevi seçmek
iyi olabilir.
-
Örneğin yavaş gir ve yavaş çık gibi,
hareketi biraz hızlandırıp
-
daha sonra durmadan önce
yavaşlatan bir işlev
-
gerçek dünyaya daha yakın
-
hareket sağlayabilir.
-
Bu sarı tutma yerlerini
yalnızca bu geçişin
-
olduğu yere sürükleyerek
önizleme alanımı sınırlandıracağım.
-
Önizlemeyi Döngü'ye ayarlayacağım
-
ve geçiş hatalarını bulabilmek için
yalnızca bu alan üzerinde
-
önizleme yapacağım.
-
İyi görünüyor.
-
Ayrıca, önceden tanımlı işlevleri
-
kullanmak yerine
-
kendi işlevimizi de oluşturabiliriz.
-
Sağ tıklayıp Yumuşatma seçenekleri'ni
belirlerseniz
-
Bezier eğrisini özelleştirerek
-
istediğiniz gibi olmasını sağlayabilir ve
özel bir ön ayar olarak kaydedebilirsiniz.
-
Uygulamak için Tamam'ı tıklayın.
-
Bu şekilde eğiticiyi tamamlamış
oluyoruz.
-
İlgilenenler için, animasyonla
ilgili konularda
-
daha kapsamlı bilgi veren
başka eğiticilerimiz de var.
-
Şimdilik bu kadar.
-
İzlediğiniz için teşekkürler.
