Reklam tasarımı, mesaj → dikkat → eylem zincirinin milisaniyeler içinde kurulduğu yüksek tempolu bir iletişim formudur. Macromedia/Adobe Flash (günümüzde Adobe Animate) uzun yıllar boyunca bu zincirin tasarım ve geliştirme atölyesi oldu: vektör çizim, timeline koreografisi, MovieClip mimarisi, maskeleme, easing eğrileri, ses/müzik (sessiz varsayılan) ve en önemlisi ActionScript ile “eylem komutları”.
Bu rehber, reklam tasarımlarında Flash ve eylem komutlarının (ActionScript 2/3) nasıl sistematik ve emniyetli kullanılacağını uçtan uca anlatır: KVE (Kimlik–Vaat–Eylem) hiyerarşisi, clickTag standartları, polite load mantığı, CTA koreografisi, mikro-animasyon ve tek baskın hareket, ölçüm–etiketleme, frekans sınırı (frequency capping), replay/mute kontrolleri, erişilebilirlik (Reduce Motion/klavye/kontrast), performans–bellek hijyeni, QA kontrol listesi ve HTML5/Canvas/GSAP köprüsü. Her bölüm pratik kalıplar, mini AS3 iskeletleri ve vaka notlarıyla akışa alınabilir.
Gelişme
1) Brief’i Kısa, Vaadi Kristal
Reklam her şeyi anlatmaz; tek vaat ve tek eylem.
-
Kime? (segment), nerede? (envanter/cihaz), ne kadar sürede? (3–6 sn ilk tur)
-
KVE hiyerarşisi:
-
Kimlik: Markayı tanıtan imza (logo/renk/ton).
-
Vaat: Tek cümle net fayda (“Raporlarını 60 sn’de hazırla”).
-
Eylem (CTA): “Ücretsiz Dene”, “Teklif Al”, “Sepete Ekle”.
Kural: Animasyon dili, eylem komutlarının (tıklama/hover/klavye) önünü açacak şekilde odaklı ve hafif olmalı.
-
2) Zaman–Panel Kurgusu: 3–4 Karalık Hikâye
Banner’ı paneller halinde düşünün:
-
Hook (0–1.2 sn) – Problem/ilgi kıvılcımı;
-
Vaat (1.2–2.4 sn) – Çözüm/kanıt;
-
CTA + Logo (2.4–3.0 sn) – Karar anı;
-
Loop (opsiyonel) – Kısa tekrar.
Eylem komutu politikasını (tıklama alanı, hover etkisi, klavye tetik) bu ritmin üzerine yerleştirirsiniz.
3) Tek Baskın Hareket ve Odak
Aynı karede tek öğe baskın animasyon yapar.
-
Başlık içeri giriyorsa CTA sabit; CTA pulse yaparken başlık sabit.
-
Arka plan hareketleri nazik ve düşük kontrast.
Vaka: Aynı anda başlık + ikon + CTA hareketi yerine sıraya koymak, CTR’ı gözle görülür artırır.
4) Tipografi–Renk Ergonomisi
-
Başlık: 6–11 kelime, iki satırı geçmez.
-
Kontrast: Metin/zemin ≥ 4.5:1.
-
Latin-Ext gömülü font: ı, İ, ğ, ş, ç, ö, ü desteği.
-
CTA: Vurgu rengi yalnız butona; aşırı parlak arka plan yok.
5) clickTag Standartları (AS3)
Ağ geçitleri/Ad server’lar için güvenli clickTag zorunlu disiplindir.
// AS3 – Güvenli tıklama yönlendirmesi
import flash.events.MouseEvent;
import flash.net.URLRequest;
import flash.net.navigateToURL;
var clickArea:Sprite = new Sprite(); // görünmez üst katman
clickArea.graphics.beginFill(0xFFFFFF, 0);
clickArea.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
clickArea.graphics.endFill();
addChild(clickArea);
var clickTag:String = loaderInfo.parameters.clickTag || “https://ornek.com/kampanya”;
clickArea.buttonMode = true;
clickArea.addEventListener(MouseEvent.CLICK, function(_:MouseEvent):void {
navigateToURL(new URLRequest(clickTag), “_blank”);
});
İlkeler:
-
Tıklanabilir alan tüm sahneyi kapsar (UI çakışmıyorsa).
-
Tek yön –
navigateToURLdışında ağ/JS çağrıları yok. -
Parametre adı genellikle
clickTag, bazenclickTag1/2…(çoklu çıkışlar için).
6) Çoklu Çıkışlar (Exit) ve Mikro-Hedefleme
Birden fazla CTA varsa (örn. “İndir”, “Detaylar”), her biri ayrı exit tetikler.
btnDownload.addEventListener(MouseEvent.CLICK, function(_:MouseEvent):void {
navigateToURL(new URLRequest(loaderInfo.parameters.clickTag1), “_blank”);
});
btnLearn.addEventListener(MouseEvent.CLICK, function(_:MouseEvent):void {
navigateToURL(new URLRequest(loaderInfo.parameters.clickTag2), “_blank”);
});
Not: UI’de hiyerarşiyi bozmayın; birincil CTA görsel olarak üstün kalsın.
7) Polite Load (Nazik Yükleme)
Kreatif öğeler, sayfa içeriğini bloke etmeden nazik yüklenmeli.
-
İlk kare: Yerleşim iskeleti + marka imzası (1 karede görünür).
-
Ağır varlıklar: Poster/placeholder; hazır olunca crossfade.
-
Video: Varsayılan sessiz; kullanıcı etkinleştirirse oynat.
8) CTA Koreografisi ve Easing
-
Giriş: 180–220 ms
easeOutQuad. -
Hover: İnce gölge/ölçek 1.00→1.04; tek baskın.
-
Fokus: Klavye ile görünür “focus ring”.
-
Reduce Motion: Pulse kapanır; düz görünür.
9) Replay, Mute ve Duraklatma
Kullanıcıya saygı: tekrar ve ses kontrolü bariz ve tutarlı olmalı.
btnReplay.addEventListener(MouseEvent.CLICK, function(_:MouseEvent):void {
gotoAndPlay(“start”); // timeline etiketleri ile
});
var muted:Boolean = true;
btnMute.addEventListener(MouseEvent.CLICK, function(_:MouseEvent):void {
muted = !muted;
SoundMixer.soundTransform = new SoundTransform(muted ? 0 : 0.6);
});
Varsayılan: Ses kapalı; tıklamayla açılır. Autoplay ses kaçınılır.
10) Frekans Sınırı (Yerel) ve Durum Hatırlama
Ad server tarafındaki frequency capping’e ek olarak yerel bir uyarı katmanı, tekrar yorgunluğunu azaltır.
// Basit yerel sınır: Gün içinde 3’ten fazla replay önermesin
var so:SharedObject = SharedObject.getLocal(“adfreq”);
var dayKey:String = (new Date()).fullYear + “-” + (new Date()).month + “-” + (new Date()).date;
if(!so.data.day || so.data.day != dayKey){ so.data.day = dayKey; so.data.views = 0; }
so.data.views++;
so.flush();
if(so.data.views > 3) { hideReplayNudge(); } // “Tekrar izle” hatırlatıcısını gizle
11) Ölçüm–Etiketleme: Öğrenmeden İyileştirme Olmaz
-
Olaylar:
view,panel:hook,panel:cta,cta:click,hover:cta,replay,mute:on/off. -
KPI: CTR, görünüm→tıklama süresi, hover dwell, loop sayısı, ses etkileşim oranı.
-
A/B değişkenleri: Başlık tipi (rakam/durum), CTA metni, CTA rengi, ritim (0.8×/1.0×), geçiş (wipe/fade).
12) Vaka – B2B SaaS 300×250
USP: “Raporlar 60 sn’de hazır.”
-
Hook: “Haftalık rapor saatlerinizi geri verelim.” (maskeli wipe)
-
Vaat: 3 ikon akışı (Topla → Analiz → Paylaş).
-
CTA: “Ücretsiz Dene” (180–220 ms pulse).
-
Eylem komutu: Tüm sahnede clickTag; CTA öncelikli görsel.
Sonuç: CTA hover nefesi her 6–8 sn’de bir → CTR ↑, yorgunluk yok.
13) Vaka – E-Ticaret İndirim 728×90
USP: “%40’a varan indirim – bu hafta.”
-
Renk: Vurgu yalnız fiyat ve CTA’da.
-
Zamanlayıcı simgesi: Gerçek sayaç yerine “takvim/hafta” ikonografisi.
-
Exit’ler:
clickTag1(Fırsatlar),clickTag2(Sepete ekle). -
Reduce Motion: Wipe → crossfade; CTA sabit.
14) Erişilebilirlik: Kontrast, Klavye, Reduce Motion
-
Kontrast ≥ 4.5:1, Latin-Ext font.
-
Klavyeyle CTA’ya gidilebilmeli (
TAB/ENTER/SPACE). -
Reduce Motion aktifse overshoot/back kapanır; süreler %30 kısalır; parallax/partikül durur.
-
Renk körlüğü: Durum yalnız renkle verilmez; ikon/biçim de kullanılır.
15) Performans–Bellek Hijyeni (FPS Dostu 10 Kural)
-
Tek
ENTER_FRAMEdöngüsü; animasyon merkezi. -
Görünmeyeni sahneden kaldır (
removeChild);alpha=0yetmez. -
cacheAsBitmap: statik vektörler.
-
Filtreler minimum (blur/glow pahalı).
-
Sprite sheet/atlas ile frame-by-frame ekonomisi.
-
Object pool: partikül/konfeti tekrarları.
-
Polite load + poster: medya gelmezse anlamlı ilk kare.
-
Temizlik:
removeEventListener, tween/stream stop (panel çıkışında). -
Çoklu çözünürlük bitmap (retina/düşük DPI).
-
Profiling: Gerçek envanter simülasyonu; tahmin değil ölçüm.
16) Güvenlik ve Politikalar
-
Zorunlu alanlar: clickTag parametreleri, yönlendirme domain whitelisti.
-
Üçüncü taraf çağrılar: Ölçüm pikselleri Ad server politikalarına tabidir.
-
Kişisel veri: Banner seviyesinde gereksiz; ölçüm anonim olmalı.
18) Uygulamalı Şablon — “Sweep Reveal + CTA Pulse” (≈3 sn)
Bileşenler: MC_Headline, MC_Icon, MC_CTA, MC_Logo, MC_BG, MC_Sweep.
Akış:
-
0–0.3 sn: Başlık çapraz maskeyle (
easeOutCubic) girer. -
0.3–0.5 sn: İkon 96→100% scale-in.
-
0.5–0.7 sn: CTA görünür; 200 ms
easeOutQuadpulse. -
0.7–1.0 sn: Logo fade-in.
-
1.0–3.0 sn: End frame; CTA hafif nefes (6–8 sn’de bir).
Eylem: Tüm sahneclickTag; CTA ayrıcaclickTag1(A/B için ölçülebilir).
Reduce Motion: Wipe → crossfade; pulse kapalı.
19) İçerik–Davranış Ayrımı: JSON ile Çeviklik
Metni ve zamanlamayı sahnenin dışına taşıyın; derlemesiz revizyon/A-B.
var L:URLLoader = new URLLoader();
L.addEventListener(Event.COMPLETE, onData);
L.load(new URLRequest(“data/ad_script.json”));
function onData(e:Event):void {
var d:Object = JSON.parse(L.data);
headline.text = d.hook.title; // “Raporlar 60 sn’de hazır”
// d.timing.headlineIn, d.timing.ctaIn parametreleriyle animasyonları sür
}
20) HTML5/Canvas/GSAP Köprüsü
Flash’ta öğrendiğiniz eylem komutları, HTML5 tarafında birebir kavramlara karşılık gelir:
-
MovieClip → JS bileşeni, Timeline → GSAP timeline
-
enterFrame →
requestAnimationFrame -
Sound → WebAudio (sessiz varsayılan)
-
SharedObject → LocalStorage (basit yerel sayaç)
-
clickTag → URL param/parça (IAB yönergeleriyle)
Ders: Araçlar değişir; okunurluk, tek baskın hareket, erişilebilirlik, ölçüm ve nazik yükleme değişmez.
Sonuç
Reklam tasarımlarında Flash ve eylem komutları, görsel virtüöziteyi davranış mühendisliği ile birleştirir. Başarının çekirdeği; tek cümlelik vaat, KVE hiyerarşisi, tek baskın hareket kuralıyla sade koreografi, clickTag/exit disiplinine uygun güvenli yönlendirme, polite load ve poster ile hızlı algılanan performans, erişilebilirlik (kontrast/klavye/Reduce Motion), ölçüm–A/B ile sürekli iyileştirme ve performans–bellek hijyenidir.
Özetle; (1) vaadi kristalize et, (2) panelleri ritme bağla, (3) CTA’yı tek baskın hareketle parlat, (4) clickTag/exit’i güvenli uygula, (5) polite load + poster ile hızlı algılan, (6) ölç–öğren–iyileştir. Bu omurgayla üretilen kreatifler, ister SWF/Animate ister HTML5/Canvas tarafında olsun, hızlı, hafif, anlaşılır ve tıklanabilir kalır.
Tasarım Yaptırma olarak, hayalinizdeki mekanı gerçeğe dönüştürme yolculuğunuzda yanınızda olmaktan gurur duyuyoruz. İster yaşam alanlarınızda sıcak ve samimi bir atmosfer yaratmak isteyin, ister iş yerinizde profesyonel ve etkileyici bir ortam oluşturmayı hedefleyin, her ihtiyacınıza özel çözümler sunuyoruz. Mobilya tasarımından iç mekan düzenlemesine, konut projelerinden ticari alanlara kadar geniş bir yelpazede hizmet veriyoruz. Her projeye özel olarak yaklaşıyor, detayları titizlikle değerlendiriyor ve fonksiyonellikle estetiği bir araya getirerek sizin için hem kullanışlı hem de görsel olarak tatmin edici mekanlar tasarlıyoruz. Sıradanlıktan uzak, sizi ve tarzınızı yansıtan mekanlar yaratmak bizim için bir tutku.
Web sitenizden yaşam alanlarınıza kadar her alanda sizi yansıtan, özgün ve kaliteli tasarımlara ulaşmak istiyorsanız doğru yerdesiniz. Tasarım Yaptırma ekibi olarak, kullanıcı odaklı, estetik ve işlevsel çözümler üretiyoruz. Her müşterimizin ihtiyaçları farklıdır; bu bilinçle hareket ediyor, her tasarımı kişiye özel olarak hazırlıyoruz. Sürecin her aşamasında sizinle iş birliği içinde çalışarak memnuniyetinizi ön planda tutuyoruz. Hedefiniz ne olursa olsun, birlikte başarılı bir tasarım süreci geçirmeniz için buradayız. Hayallerinizi profesyonel ellere emanet edin; çünkü biz onları hayata geçirmek için çalışıyoruz. Yolculuğunuza başlamak için bize ulaşmanız yeterli.
Hayal gücünüzün sınırlarını zorlayan, ilham verici tasarımlar arıyorsanız, doğru adrestesiniz. Tasarım Yaptırma olarak, evinizde huzur dolu bir ortam, ofisinizde ise verimliliği artıracak işlevsel alanlar yaratmak için size özel çözümler geliştiriyoruz. Her bir projemizde; yaratıcı fikirleri, çağdaş tasarım anlayışıyla harmanlıyor ve estetikle fonksiyonelliği dengede tutuyoruz. Müşteri memnuniyetini temel ilkemiz olarak benimsiyor, her adımda size değer katmayı hedefliyoruz. Profesyonel hizmet anlayışımız ve özgün tasarım bakış açımızla mekanlarınıza yeni bir soluk getiriyoruz. Daha fazla bilgi almak, projelerinizi planlamaya başlamak ve hayallerinizi adım adım gerçeğe dönüştürmek için bizimle iletişime geçin. Tasarım Yaptırma ile yaşam alanlarınıza yeni bir kimlik kazandırın, tarzınızı mekanlarınıza yansıtın.
