Flash ile Buton Tasarımı Nasıl Yapılır?

Buton, etkileşimli bir arayüzün “eylem motoru”dur. Kullanıcıya ne yapacağını söyleyen yalnızca bir kelime (veya ikon) değildir; hiyerarşi, okunurluk, erişilebilirlik, geri bildirim, performans ve marka sesinin tam kesişimidir. Macromedia/Adobe Flash (günümüzde Adobe Animate) ekosisteminde buton tasarımı; vektör çizim, 9-slice ölçekleme, MovieClip/Component skinning, timeline (in/idle/out etiketleri), ActionScript 3 (AS3) ile olay odaklı programlama, ses/mikro-animasyon, JSON/i18n ve tema (skin) sistemi gibi unsurlarla tek bir stüdyoda çözülür.
Bu kapsamlı rehberde, Flash ile buton tasarımını uçtan uca sistematize ediyoruz: bilgi mimarisinde butonun rolünden başlayıp (primary/secondary/tertiary), okunurluk–kontrast–negatif alan, durum seti (idle/hover/focus/active/disabled/loading), dokunma/klavye ergonomisi, mikro-animasyon & easing, ikon–metin hizası, toggle/radio/checkbox varyantları, form & validasyon entegrasyonu, erişilebilirlik (Reduce Motion/klavye/kontrast), performans-bellek hijyeni, A/B ölçüm, QA kontrol listesi ve modern HTML5/Canvas/GSAP köprüsüne dek derinleşiyoruz. Her bölüm uygulanabilir kalıplar, AS3 iskeletleri, vaka notları ve kontrol listeleri içerir.

---

Gelişme

1) Butonun Sistemdeki Rolü: Hiyerarşi ve Amaca Hizmet

• Primary (Birincil): Ekranın ana eylemi — görsel olarak en baskın (dolu stil, güçlü kontrast).

• Secondary (İkincil): Alternatif eylem — zeminle daha uyumlu, konturlu/ikincil renk.

• Tertiary (Üçüncül/Metin Link): Düşük öncelikli — metin-link ya da ikon-link.
  Kural: Tek ekranda yalnız bir primary olsun; karar yorgunluğunu azaltır, akışı hızlandırır.

2) Okunurluk Ergonomisi: Tipografi, Kontrast, Negatif Alan

• Metin boyutu: 16–20 pt; projeksiyon/tablette bir boy büyük.

• Kontrast: Metin/zemin ≥ 4.5:1. Vurgu rengini yalnız CTA için kullanın.

• İç boşluk (padding): Yatay 16–24 px, dikey 10–14 px; kısa-uzun metinlerde nefes koruyun.

• Negatif alan: Buton çevresinde 16–24 px boşluk; çakışan öğe yok.

3) 9-Slice Ölçekleme ve Vektör Hijyeni

Farklı uzunluktaki yazılarda kenarların bozulmaması için 9-slice kullanın.

• Stroke kalınlığı 1–1.5 px altına düşmesin (düşük DPI’da kaybolur).

• Yuvarlatma (radius) tutarlı; marka kişiliğiyle uyumlu.

• cacheAsBitmap: Sık değişmeyen arka planlar için performans desteği.

4) Durum Seti: idle/hover/focus/active/disabled/loading

• Idle: Varsayılan; metin ve ikon net.

• Hover: 180–220 ms easeOutQuad; gölge/scale 1.00→1.04 gibi nazik bir vurgu.

• Focus: Klavye odak halkası görünür; hover’dan bağımsız tasarlayın.

• Active/Pressed: Kısa inset gölge ya da 1–2 px “basılma” hissi.

• Disabled: Kontrastı düşürün (ancak okunmaz hale getirmeyin); imleç default.

• Loading: İçeride küçük spinner ya da metin değişimi (“Gönderiliyor…”). İkisi birden değil.

5) AS3 ile Temel UIButton Sınıfı (İskelet)

import flash.events.MouseEvent;

public class UIButton extends MovieClip {
public var enabled:Boolean = true;
public var loading:Boolean = false;

public function UIButton() {
buttonMode = true; tabEnabled = true; // klavye için
gotoAndStop(“idle”);
addEventListener(MouseEvent.ROLL_OVER, onHover);
addEventListener(MouseEvent.ROLL_OUT, onOut);
addEventListener(MouseEvent.MOUSE_DOWN, onDown);
addEventListener(MouseEvent.CLICK, onClick);
}

private function onHover(e:MouseEvent):void { if (enabled && !loading) gotoAndPlay(“hover”); }
private function onOut(e:MouseEvent):void { if (enabled && !loading) gotoAndPlay(“idle”); }
private function onDown(e:MouseEvent):void { if (enabled && !loading) gotoAndPlay(“active”); }
private function onClick(e:MouseEvent):void {
if (enabled && !loading) dispatchEvent(new Event(“ui:click”));
}

public function setEnabled(v:Boolean):void {
enabled = v;
mouseEnabled = v; alpha = v ? 1 : 0.6;
gotoAndStop(v ? “idle” : “disabled”);
}

public function setLoading(v:Boolean):void {
loading = v; // timeline’da “loading” durumunuz olsun
gotoAndStop(v ? “loading” : “idle”);
}
}

Not: Timeline’da idle/hover/active/disabled/loading etiketlerini tanımlayın. Focus için ayrı bir görsel katman (outline) ekleyin.

6) Klavye ve Dokunma Ergonomisi

• Klavye: TAB → buton; ENTER/SPACE tetikler. Focus ring zorunlu.

• Dokunma: Hit alan ≥ 44–64 px; parmak toleransı için iç boşlukları cömert tutun.

• Basılı tutma: İsteğe bağlı uzun basma eylemi (örn. “Silmek için basılı tut”).

7) Mikro-Animasyon ve Easing Psikolojisi

• easeOutQuad — hover/klik reaksiyonu (180–220 ms).

• easeInOutCubic — modal açılışı veya buton–panel geçişleri (240–420 ms).

• back/elastic — eğlenceli tonlar için az doz (öğrenme/oyun).
  Tek baskın hareket: Aynı karede yalnız bir öğe baskın animasyon yapsın; dikkat dağılmasın.

8) İkon–Metin İlişkisi: Hizalama ve Okunurluk

• İkon boyutu: 16–20–24 px grid; metinden bir tık daha sönük.

• Aralık: İkon–metin 8–12 px; sıkıştırmayın.

• Sola ikon, sağa metin dizilimi genelde en okunur düzen.

9) Toggle, Radio ve Checkbox Butonları

• Toggle: Açık/kapalı durum; görsel fark renkten fazlası olmalı (ikon/biçim).

• Radio/Checkbox: Grup davranışı; change olayıyla model güncelleyin.

• Erişilebilirlik: Seçili durum yalnız renkle verilmez — tik/çentik gibi şekil eklenir.

10) CTA ve Tehlikeli Eylemler (Destructive)

• Primary CTA: Dolu renk; tek ekranda bir tane.

• Destructive (Sil, Kaldır): Kırmızı ton; çoğu zaman onay diyaloğu (modal) ile.

• Geri alınabilirlik: Hata riskinde geri al veya undo toast.

11) Form ve Validasyon Akışı

• Buton metni: “Gönder”, “Kaydet”, “Devam Et” — fiille başlar.

• Validasyon başarısızsa: Buton sarsılmaz; alanlar işaretlenir, kısa hata cümlesi gösterilir.

• Yükleme: setLoading(true) → spinner → yanıt gelince kapat. “Ghost click”e karşı butonu geçici kilitleyin.

12) Erişilebilirlik: Kontrast, Focus, Reduce Motion

• Kontrast ≥ 4.5:1, Latin-Ext font (ı, İ, ğ, ş, ç, ö, ü).

• Focus ring görünür; mouse kullanıcıları için de estetik ama net.

• Reduce Motion: Overshoot/back kapanır; süreler %30 kısalır; parallax/partikül durur.

• Renk körlüğü: Kritik durumlar yalnız renkle anlatılmaz — ikon/biçim eklenir.

13) Tema (Skin) ve Yerelleştirme (i18n)

• Skin değişkenleri: Arka plan/kenar/metin/vurgu, radius, spacing, gölge.

• JSON ile metin dışarıda: “Dene”, “Gönder” gibi kopyalar i18n dosyalarından; RTL dillerde ikon yönleri aynalanır.

var L:URLLoader=new URLLoader();
L.addEventListener(Event.COMPLETE, onData);
L.load(new URLRequest(“i18n/tr.json”));
function onData(_:Event):void { btnLabel.text = JSON.parse(L.data).buttons.submit; }

14) Ses ve Mikro Geri Bildirim

• Sessiz varsayılan; kullanıcı açarsa çok kısa foley (klik/ping).

• Pitch varyasyonu tekrarlarda yorgunluğu azaltır.

• Denge: Ses, görsel geri bildirimin yerini almaz, yalnız destekler.

15) Performans–Bellek Hijyeni: Uzun Oturumlar İçin

1. Görünmeyen butonları sahneden kaldırın (removeChild), alpha=0 yetmez.

2. Tek ENTER_FRAME döngüsü: tüm mikro-animasyonları merkezi yönetin.

3. Filtreler (blur/glow) minimum — efektleri çizimle simüle edin.

4. cacheAsBitmap: statik vektörler.

5. Object pool: tekrar eden spinner/toast.

6. Temizlik: Panel kapanırken event/tween/stream stop.

16) A/B Test ve Ölçüm

• Olaylar: click:primary, hover:cta, focus:cta, disabled:click (istatistik), loading:time.

• Değişkenler: Metin (fiil vs. isim), renk tonu, hover süresi, ikon var/yok, boyut (M/L).

• KPI: Tıklama oranı, görev tamamlama süresi, hatalı tıklama, loading süresi.

18) Uygulamalı Mini Proje — “Primary CTA (Dolu) + Secondary (Konturlu)”

Bağlam: Raporlar sayfası.

• Primary: “Rapor Oluştur” — dolu marka rengi, hover’da 200 ms gölge, active’de 1 px inset.

• Secondary: “Dışa Aktar” — konturlu; hover’da kontur koyulaşır.

• Loading: “Rapor Oluştur” tıklandığında metin “Oluşturuluyor…” + küçük spinner; tamamlanınca toast: “PDF hazır.”

19) Uygulamalı Mini Proje — “Tehlikeli Eylem + Undo”

Bağlam: Liste öğesi silme.

• Buton: Kırmızı dolu “Sil” — tıklandığında onay modalı.

• Onay sonrası: “Silindi — Geri Al (5 sn)” toast; undo butonu secondary stilinde.

• Reduce Motion: Modal aç/kapat crossfade, overshoot yok.

20) Flash/Animate → HTML5/Canvas/GSAP Köprüsü

Flash’ta kurduğunuz buton dili birebir taşınır:

• MovieClip → JS bileşeni, Timeline → GSAP timeline

• enterFrame → requestAnimationFrame

• Sound → WebAudio (sessiz varsayılan)

• SharedObject → LocalStorage (durum hatırlama)

• Reduce Motion → prefers-reduced-motion
  Öz: Araçlar değişir; okunurluk, tek baskın hareket, erişilebilirlik, performans sabit kalır.

---

Sonuç

Flash ile buton tasarımı, piksellerin ötesinde davranış tasarımıdır. Başarılı bir buton;

1. Hiyerarşiyi net kurar (tek primary),

2. Okunurluk–kontrast–negatif alanı korur,

3. Durum setini (idle/hover/focus/active/disabled/loading) eksiksiz uygular,

4. Klavye/dokunma ergonomisini ciddiye alır (focus ring, 44–64 px hit alan),

5. Mikro-animasyonu nazik ve amaçlı kullanır (tek baskın hareket),

6. Erişilebilirlik (Reduce Motion, renk körlüğü, Latin-Ext) ve

7. Performans–bellek hijyeni ile uzun oturumlarda stabil kalır;

8. A/B ve analitik ile veriye dayanarak iyileştirilir.

Bu omurgayla üretilen butonlar; ister kurumsal bir raporlama aracı ister eğitsel bir modül, ister ürün içi bir e-ticaret akışı olsun—hızlı algılanır, güven verir ve tıklanır. Flash/Animate’te öğrendiğiniz prensipleri HTML5/Canvas/GSAP tarafına taşıdığınızda da sonuç değişmez: tutarlı, erişilebilir ve verimli eylem deneyimleri.

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.