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

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

Bir arayüzün kalp atışı butonlardır. Kullanıcı “ne yapılacağını” değil “neye basılacağını” görerek anlar; bu yüzden buton tasarımı yalnız görsel değil, davranış, erişilebilirlik, performans ve geri bildirim meselesidir. Flash (Macromedia/Adobe) ekolü, butonu zaman çizelgesi (timeline), semboller (MovieClip / SimpleButton) ve ActionScript ile düşünmeyi öğretti: durumlar (up/over/down/hit), mikro-animasyonlar, hit alanı, klavye gezilebilirliği, tıklama izleme, tema/skin mimarisi, ses ve yükleme durumları…
Bu kapsamlı rehberde, Flash’ta buton tasarımını uçtan uca ele alacağız: görsel hiyerarşiden easing psikolojisine, SimpleButton ile MovieClip yaklaşımının farklarından Scale9Grid (nine-slice) ile esnek ölçülendirmeye, ActionScript 3 ile olay yönetiminden erişilebilirlik (tab/fokus/okunurluk) kurallarına, performans–bellek hijyeninden tema/skin mimarisine, toggle/radio/checkbox türlerine ve QA kontrol listesine kadar. Son bölümde “Sistematik Buton Kütüphanesi” adlı uygulamalı mini proje ile tüm parçaları bir araya getireceğiz.

Gelişme

1) Amaç, İçerik ve Hiyerarşi: Buton Ne Söyler?

Buton, eylemi tek fiille söyler: “Gönder”, “Devam et”, “Şimdi indir”. İyi bir buton:

  • Mesajı kısa ve eylem odaklı verir (isim + fiil kalabalığından kaçının).

  • Hiyerarşide öne çıkar (renk/kontrast/boşluk).

  • Komşu bileşenlerle (kart, form, banner) görsel uyum içindedir.

  • Erişilebilir metin kullanır (Türkçe karakter desteği; Latin-Ext gövdeli fontlar).

2) Görsel Dil: Renk, Kontrast, Boşluk ve Kenarlık

  • Renk: Birincil eylem için marka vurgusu; ikincil için nötr/çizgisel.

  • Kontrast: WCAG hedeflerine yaklaşın (normal metin ≥ 4.5:1).

  • Boşluk: İç dolgular (padding) dikey–yatay orantılı; başlık uzunluğuna göre genişler.

  • Kenarlık/Radius: Marka tonuna göre köşe yarıçapı; Scale9Grid ile esnek büyüme (detay bölüm 8).
    Vaka: Form CTA’sında yazı koyuluğunu bir kademe artırmak ve iç padding’i 4 px büyütmek “tıklanabilirlik” algısını belirgin artırdı.

3) SimpleButton mı MovieClip mi?

SimpleButton: upState, overState, downState, hitTestState olmak üzere dört görsel hâli DisplayObject olarak içerir. Hızlı ve yalındır.
MovieClip Buton: Daha esnek—iç zaman çizelgesi, durum etiketleri (up, over, down, disabled, focus), mikro-animasyonlar, ses ve veri bağlama kolaydır.
Pratik kural:

  • Sade banner/mini CTA → SimpleButton iş görür.

  • Durumu zengin, tema/skin’li tasarım → MovieClip buton yazın.

4) Durum Seti: Up / Over / Down / Disabled / Focus / Hit

Buton en az şu durumları tanımalı:

  • Up: Varsayılan.

  • Over (Hover): Hafif büyüme/gölge/renk tazeleme (180–220 ms, easeOut).

  • Down (Pressed): Hafif içe gömme / koyulaşma; anlık klik hissi.

  • Disabled: Kontrast ve doygunluk düşer; fokus alamaz, tıklanamaz.

  • Focus (Klavye): Net “focus ring” / dış çizgi.

  • Hit: Görselden daha büyük tıklanabilir alan (en az +8–12 px); mobil/kiosk için hayati.

5) Mikro-Animasyon ve Easing Psikolojisi

Easing duyguyu belirler:

  • easeOutQuad: CTA vurgusunda nazik hız kesme.

  • easeInOutCubic: premium/pürüzsüz geçişler.

  • back/elastic: oyun/çocuk odaklı—dozu düşük tutun.
    Tek baskın hareket: Aynı anda hem renk hem ölçek yarışmasın; ilki → sonra ikincisi.

6) ActionScript 3 ile Olay Yönetimi (Klavye Dahil)

Temel olaylar: MOUSE_OVER, MOUSE_OUT, MOUSE_DOWN, MOUSE_UP, CLICK, FOCUS_IN, FOCUS_OUT, KEY_DOWN.
AS3 kalıbı (MovieClip buton sınıfı):

public class McButton extends MovieClip {
public var labelField:TextField;
public var enabled:Boolean = true;
public var isToggle:Boolean = false;
private var _selected:Boolean = false;

public function McButton() {
buttonMode = true; useHandCursor = true; tabEnabled = true;
addEventListener(MouseEvent.ROLL_OVER, onOver);
addEventListener(MouseEvent.ROLL_OUT, onOut);
addEventListener(MouseEvent.MOUSE_DOWN, onDown);
addEventListener(MouseEvent.MOUSE_UP, onUp);
addEventListener(FocusEvent.FOCUS_IN, onFocus);
addEventListener(FocusEvent.FOCUS_OUT, onBlur);
addEventListener(KeyboardEvent.KEY_DOWN, onKey);
gotoAndStop(“up”);
}
public function set text(s:String):void { labelField.text = s; autoSize(); }
public function set selected(v:Boolean):void { _selected=v; v ? gotoAndStop(“down”) : gotoAndStop(“up”); }
public function get selected():Boolean { return _selected; }
private function onOver(e:MouseEvent):void { if(enabled) gotoAndPlay(“over”); }
private function onOut(e:MouseEvent):void { if(enabled && !_selected) gotoAndPlay(“up”); }
private function onDown(e:MouseEvent):void { if(enabled) gotoAndStop(“down”); }
private function onUp(e:MouseEvent):void {
if(!enabled) return;
if(isToggle) selected = !selected; else gotoAndStop(“over”);
dispatchEvent(new MouseEvent(MouseEvent.CLICK));
}
private function onFocus(e:FocusEvent):void { if(enabled) gotoAndStop(“focus”); }
private function onBlur(e:FocusEvent):void { if(enabled && !_selected) gotoAndStop(“up”); }
private function onKey(e:KeyboardEvent):void {
if(!enabled) return;
if(e.keyCode==Keyboard.SPACE || e.keyCode==Keyboard.ENTER) onUp(null);
}
private function autoSize():void {
// label’e göre genişlik/padding ayarla; scale9Grid ile birleşecek
}
}

Notlar:

  • buttonMode/useHandCursor = işaretçi eli.

  • Klavye desteği → erişilebilirlik için şart (Space/Enter tıklama tetikler).

  • tabEnabled/tabIndex ile sıra kontrol edilebilir.

7) Metin, Font ve Çok Dilli Düşünme

  • Latin-Ext destekli font gömün (ı, İ, ğ, ş, ç, ö, ü).

  • TextField.embedFonts=true, antiAliasType=ADVANCED.

  • autoSize=TextFieldAutoSize.LEFT ile metne göre genişleme; uzun metinde iki satıra izin verin veya kısaltma (ellipsis) kullanın.

  • RTL diller (Arapça vb.) için metin kutusunu ve ikon yönlerini ayna çevirin.

8) Esnek Ölçekleme: Scale9Grid (Nine-Slice)

Yuvarlatılmış köşeli bir butonu farklı genişliklerde bozulmadan ölçeklemek için:

  • Sembolünüzü MovieClip yapın.

  • scale9Grid dikdörtgenini (köşeleri sabit, kenarlar gerilebilir, orta alan esner) tanımlayın.

  • autoSize() fonksiyonunda label genişliğine göre width ayarlayın—köşeler bozulmaz.

9) Hit Alanı (Hit Test State): Görselden Geniş

Özellikle küçük ikon butonlarda, hit alanını görünenden daha geniş tasarlayın. SimpleButton.hitTestState veya MovieClip içinde görünmez (alpha=0) büyükçe bir şekli hit katmanı yapın. Mobil/kiosk için en az 44×44 px hedef boyutu.

10) Ses Geri Bildirimi ve Sessiz Mod

Kısa klik ve hover sesleri davranışı pekiştirir.

  • Varsayılan sessiz başlatın; kullanıcı açarsa ses çalın.

  • Sesi üst üste bindirmeyin; arka arkaya kliklerde volume/pitch küçük varyasyonlar kulak yorgunluğunu azaltır.

  • Ekranın bir köşesinde “ses açık/kapalı” anahtarı (toggle) tasarlayın.

11) Toggle, Radio ve Checkbox Butonları

  • Toggle: Aç/Kapat; selected durumu.

  • Radio: Grup içinde tek seçim (grup yöneticisi).

  • Checkbox: Çoklu seçim; mark alanı net olmalı (tik animasyonu 120–160 ms).
    İpucu: “Seçili” butonda renk ve şekil birlikte değişsin (ör. dolu arka plan + ikon); yalnız renkle anlatmayın → renk körlüğü senaryosu.

12) Yükleme ve Bekleme: “Busy/Loading” Hâli

Sunucuya form gönderimi gibi beklemelerde buton loading durumuna geçer:

  • Metni geçici “Gönderiliyor…” ya da dönen ikonla değiştirin.

  • enabled=false + görsel “meşgul” ifadesi.

  • Başarısızlıkta hata mesajı (yakınında) + butonda sarsıntı (±2 px) kısa uyarı.

13) Performans ve Bellek: Filtreler, Cache, Temizlik

  • Filtreleri (blur/glow/shadow) sınırlı kullanın; pahalıdır.

  • Sık değişmeyen katmanlarda cacheAsBitmap=true.

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

  • Olay dinleyicilerini yaşam döngüsünde kaldırın (özellikle popup/overlay kapanırken).
    Vaka: Yoğun gölge kullanan bir menüde gölgeleri tek “dış halka bitmap” ile simüle etmek FPS’i sabitledi.

14) Tema/Skin Mimarisi: Tek Kod, Çok Görünüm

Butonları skin–logic ayrımıyla kurgulayın:

  • McButton yalnız davranışı bilir; thieme/skin MovieClip’i dışarıdan enjekte edilir.

  • Işık (light) / Karanlık (dark) / Marka (brand) temaları swapSkin() ile değişir.

  • Ölçek–renk–radius token’larını JSON’dan okuyarak tasarım sistemi kurabilirsiniz.

15) Analitik ve Tıklama İzleme

  • Olay etiketi: click:cta:{id}; form başarı/hata olayları.

  • Reklam/banner bağlamında clickTag parametresi kodda hard-code edilmez; dışarıdan alınır.
    AS3 reklam kalıbı:

16) Erişilebilirlik: Klavye, Fokus, Kontrast, Dil

  • tabEnabled=true, gerekirse tabIndex sırala.

  • Focus durumu gözle görünür olsun (dış çizgi).

  • Renk yetmiyorsa ikon/şekil ile destekleyin.

  • Animasyon yoğunluğu için ayarda “Hareketi Azalt” seçeneği sunun; overshoot kapanır, süreler kısalır.

  • Ekran okuyucular için AccessibilityProperties ile anlamlı ad verin (ör. “Formu gönder”).

17) Menü ve Liste İçinde Butonlar: Yoğunluk ve Ritim

Kart/listelerde çok sayıda buton olduğunda:

  • Birincil eylemi vurgulayın; ikincil eylemleri link stili yapın.

  • Hover gölgesini hafif tutun; satır arası titremeyi önleyin.

  • Klavye ile satır seçimi + Enter/Space tetikleyicisini destekleyin.

18) Kod mu Timeline mı? Hibrit Strateji

  • Görsel koreografi timeline’da;

  • Davranış ve durum geçişleri kodda.
    Bu hibrit, hem görselcinin hızını hem de geliştiricinin ölçeklenebilirliğini sağlar.

20) Uygulamalı Mini Proje: Sistematik Buton Kütüphanesi

Amaç: Üç tema (Light/Dark/Brand) ve dört boy (S/M/L/XL) destekleyen, çok dilli buton kütüphanesi.
Bileşenler:

  • McButton (davranış)

  • Skin_Light, Skin_Dark, Skin_Brand (MovieClip; up/over/down/focus/disabled label’ları)

  • Icon_Left, Icon_Right (opsiyonel)

  • tokens.json → padding, radius, fontSize, renkler
    Akış:

  1. McButton oluştur, skin=Skin_Brand; text="Hemen Başla".

  2. Ico’lu varyant: setIcon(Icon_Right); iconGap=6.

  3. autoSize() metne göre genişlik + Scale9Grid.

  4. “Karanlık tema”: swapSkin(new Skin_Dark()).

  5. RTL test: İkon yönlerini çevir; metin hizasını sağa al.

  6. Toggle modu: isToggle=true; seçili/boş durum görselleri.
    Beklenti:

  • Bir tasarım sistemi içinde tek kod, çok görünüm.

  • Lokalizasyon (TR/EN/AR) ve uzun/ kısa metinlerde bozulmayan düzen.

  • Klavye + mouse ile tutarlı kullanım, ölçümlenebilir tıklamalar.

21) Modern Köprü: Animate (HTML5) / Canvas / GSAP

Flash mantığını bugüne taşıyın:

  • MovieClip buton → Canvas sprite/komponent

  • Timeline easing → GSAP timeline

  • enterFrame → requestAnimationFrame

  • Scale9Grid → 9-slice Canvas/SVG teknikleri

  • AccessibilityProperties → ARIA / odak yönetimi
    Prensipler aynıdır: tek baskın hareket, yeterli hit alan, net kontrast, klavye desteği, ölçüm ve temizlik.

Sonuç

Flash’ta buton tasarımı; “bir dikdörtgen + metin” değil, davranışı, erişilebilirliği ve hissi olan bir arayüz yapıtaşı kurmaktır. Bu yazıda, SimpleButton ve MovieClip yaklaşımlarını, durum setlerini (up/over/down/disabled/focus/hit), hit alanı ve Scale9Grid ile esnekliği, ActionScript 3 olay yönetimi ve klavye etkileşimini, mikro-animasyon ve easing psikolojisini, ses geri bildirimi, toggle/radio/checkbox çeşitlerini, busy/loading hâllerini, performans–bellek hijyenini, tema/skin mimarisini, analitik–clickTag entegrasyonunu ve QA kontrol listesini uçtan uca ele aldık.
Esas prensipler sadedir: Amaçlı metin, net kontrast, yeterli hit alan, tek baskın hareket, klavye ve ekran okuyucu dostu tasarım, temiz kapanış (dinleyici/tween temizliği) ve ölçüm. Bu omurga ile, ister bir eğitim modülünün “Gönder” butonu, ister bir portfolyo sitesinin “Projeyi Gör” çağrısı, ister bir kampanya banner’ının CTA’sı—hepsi güven veren, hızlı ve akılda kalan bir etkileşime dönüşür. Araçlar değişse de (Animate/HTML5/GSAP), iyi butonun anatomisi sabit 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.

yazar avatarı
İçerik Üreticisi
Biyografinin Tamamını Gör
Etiketler: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

Bir yanıt yazın