Adobe Animate(2017) de Google reklamları tasarımı nasıl tasarlanır?

Merhabalar öncelikle bu yazıyı yazma amacım, Google’ın ürünü olan web designer programında çabaladım ancak bir tasarımcı olarak yine Adobe’dan vazgeçemedim 🙂 Daha önceden adı Flash Pro olan bu program aslında kullanımı hala flash gibi olsada temel yapısı tamamen değiştirildi. Adobe Edge Animate’i kullanan varsa aranızda çok fazla yabancılık çekmezsiniz ancak biraz acemilik olmazsa olmaz 😀

Burada size programın kullanımından değilde, Google reklamları için Animate’de dikkat etmeniz gereken hususlardan bahsedeceğim, eğer bunları uygulamasınız programın başında çok fazla çabalar durursunuz 5 adımda hususlar şu şekilde:

1- HTML belge (canvas) boyutları

Çalışmayı oluştururken Google tarafından belirlenen (link) boyutların dışına çıkmayınız.

https://support.google.com/adsense/answer/6002621?hl=tr

2- Harici kütüphane veya dosya çağırma

Çalışmanıza Js, Css ve resim gibi öğeleri harici çağırmayınız, dahili olarak klasörde tutunuz. Adobe Animate varsayılan ayarlarında createjs dosyasını kendi sunucusundan harici olarak çağırıyor bu yüzden Google reklamı kabul etmiyor, bu sorunun çözümü şu şekilde:

Dosya > Yayınlama ayarları iç menüden Gelişmiş sekmesini açıyoruz,

Ardından Barındırılan Kütüphaneler seçeneğini resimdeki gibi pasif hale getiriyoruz, artık createjs çalışmamızla aynı klasörde olucak.

3- HTML meta reklam boyutu etiketi

Google yükleyeceğimiz çalışmanın içinde bulunan .html uzantılı dosyanın içerisinde boyutlarının geçtiği bir etiket görmek istiyor, bu kodu <head> etiketlerinin arasına yazmak zorundayız.

<meta name=”ad.size” content=”width=300,height=250″>

4- clickTag Link etiketi

Çalışmamızın html dosyasının içerisine <head> etiketlerinin arasına eklememiz gereken bir yönlendirme linki var.

<script type=”text/javascript”>
var clickTag = “http://www.ornek.com”; </script>

Ardından aşağıdaki resimde göründüğü gibi body etiketlerinin arasına <a> etiketlerini yerleştiriyoruz

<a href=“javascript:window.open(window.clickTag)”>    </a>

5- 150 Kb’lık zorlu sınır

Siz mükemmel tasarımlar uçan kaçan nesneler yapsanızda işe yaramaz çünkü tüm çalışmanızı şıkıştırıp (Zip) bir arşiv oluşturduğunuzda maksimum 150 Kilobayt olmak zorunda aksi taktirde reklam kabul edilmez.

Peki ne yapabiliriz? Ben çok fazla yol denedim

a) Resim boyutlarını küçültme : Animate’den çalışmamızı yayınladıktan sonra images klasöründe olan resimi Photoshop kullanmayı bilenler açıp web için kaydet bölümünde boyutunu azaltabilir, bilmeyenler içinde www.optimizilla.com sitesine girip bu adresten resim boyutlarını ciddi oranda düşürebilirsiniz.

b) Resim yerine vektör kullanmak: Adobe Illustrator programını kullanmayı biliyorsanız çizdiğiniz vektörleri kopyala yapıştır yaparak Animate’e aktarabilirsiniz, resim yerine vektörleri kullanırsanız 150Kb olayını düşünmezsiniz bile 😉

c) Js kütüphanelerini sıkıştırmak: Çok fazla etki etmez ancak 5-10 Kb ile kurtarılacak haldeyseniz işinizi görür www.jscompress.com

Mutlu Son

Artık çalışmamız Google için hazır durumda, ama bunu kesinleştirmek için test etmemiz lazım, Google’ın test amaçlı sunduğu bir yazılım vasıtasıyla çalışmamızdaki hataları görebiliyoruz

https://h5validator.appspot.com/dcm#/asset ( Test Uygulaması ) Zip şeklinde yüklüyoruz.

 

Menü