Flash ile Web Sayfası Tasarımı

var data:URLVariables = new URLVariables();
data.name = txtName.text;
data.email = txtEmail.text;
data.message = txtMsg.text;

var req:URLRequest = new URLRequest(“/contact.php”);
req.method = URLRequestMethod.POST;
req.data = data;

var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onDone);
loader.addEventListener(IOErrorEvent.IO_ERROR, onFail);
loader.load(req);

Güvenlik: Sunucu tarafında doğrulama şart; Flash tarafındaki validation yalnız kullanıcı deneyimi içindir.

11) Erişilebilirlik ve Bulunabilirlik: Alternatif İçerik, Kontrast, Klavye

Flash sitelerinde temel sorunlardan biri erişilebilirlikti; bu yüzden alternatif HTML içerik sunmak çok önemliydi: <object> içinde yapısal HTML yedek, ses–video için altyazı, yüksek kontrast teması, klavye navigasyonu, fokus halkaları.
Pratik:

• Metinleri görsel yerine gerçek metin alanı olarak ekleyin (selectable false bile olsa ekran okuyuculara daha anlamlı).

• Renk kontrastını WCAG eşiklerine yakın tutun; buton ve metinlerde 4.5:1 hedefleyin.

12) Performans: Yükleyici (Preloader), Görünürlüğü Yönetme, FPS

Preloader: Yüzde çubuğu yerine kısa iskelet ekran; algılanan hızı artırır.
Görünmez öğeler: alpha=0 yerine sahneden kaldırın; CPU ve olay dinleyicileri boşuna çalışmasın.
Bitmap cache: Sık değişmeyen karmaşık vektörleri bitmap olarak işaretleyin; filtreleri minimumda tutun (blur/shadow pahalıdır).
Vaka: Görünmeyen modülleri kaldırmak bir kurumsal sitede CPU kullanımını %30 azalttı, fan sesi kayboldu.

13) Görsel Optimizasyon: Vektör ↔ Bitmap Dengesi

Logo, ikon, tipografi vektör; fotoğraf–doku–karmaşık illüstrasyon bitmap.
İpucu: Büyük bitmap’leri sahneye uygun çoklu çözünürlükte paketleyin, ekran–cihaza göre seçin (kiosk/4K vs dizüstü).

14) Çoklu Ekran/Çözünürlük: Stage Ölçekleme, Yerleşim Kuralları

Tarihsel Flash sahnelerinde StageScaleMode.NO_SCALE ile otomasyon kapatılıp tüm konumlandırmalar manuel yapılırdı.
Kurallar:

• Kritik içerik “güvenli alan”da.

• Kenar boşlukları oransal; alt–üst navigasyon sabit.

• Pencerede yeniden boyutlandırmada kritik öğeleri merkeze sabitleyin.
  Kiosk: Tam ekran + büyük hit alan + yüksek kontrast.

15) Mikro Etkileşimler: Hover, Focus, Geri Bildirim Dilinin Tutarlılığı

CTA üzerine gelince 180–220 ms easeOut büyüme, form hata durumunda kısa titreşim (±2 px), kopyalandı mesajında yukarı–fade.
Prensip: Her eylem → net geri bildirim. Sitenin davranış dili, görsel dili kadar tutarlı olmalı.

16) Çoklu Dil (i18n): Metni Sahneden Ayır, Sağdan Sola Dil Hazırlığı

JSON/CSV kaynaklarla çok dilli içerik. Sağa–sola (RTL) diller için metin kutularını ayna düzeni ile test edin; ikon ve ok yönlerini çevirmeyi unutmayın.
Vaka: TR/EN/AR üç dillilikte, ikon yönleri düzeltilince görev tamamlama hızında artış görüldü.

17) Analitik ve Etkinlik İzleme

Hangi bölümde terk? Hangi iş kartı daha çok tıklanıyor? “İletişim” formu nerede hata veriyor?
Olay etiketleme: view:works, open:work:ID, cta:contact, error:form:email.
Fayda: Tasarım kararları hissedilen değil ölçülen verilere dayanır.

18) Güvenlik, Köprüler ve Dış Etkileşim

navigateToURL hedeflerini açıkça belirleyin; ExternalInterface ile JS köprülerinde domain kısıtlarına dikkat edin.
Formlarda CSRF/Spam koruması sunucu tarafındadır; Flash tarafı yalnız UX tır.

19) Sürümleme, Dosya Ağacı ve Ekip İş Akışı

• Klasörler: /src, /assets/img, /assets/audio, /data, /build.

• Paylaşılan kütüphane (Shared Library): Karakterler, ikon seti, butonlar.

• Adlandırma: mcHeader, btnCtaPrimary, mcCardWork, mcModal.
  Vaka: Paylaşılan kütüphane yaklaşımı ile 6 alt sayfalı sitenin tema değişikliği 1 günde bitti (önceki projelerde 3–4 gün).

20) Modern Köprü: Animate/HTML5 Canvas ve İlerisi

Flash sitelerinin çoğu bugün Animate → HTML5 Canvas olarak yeniden paketlenebilir. Mantık taşınır:

• MovieClip → komponent,

• Timeline koreografisi → GSAP zaman çizelgesi,

• enterFrame → requestAnimationFrame,

• SharedObject → LocalStorage/IndexedDB,

• SWF deep-link → hash router.
  Strateji: İçeriği (JSON), görsel stili (CSS/tema değişkenleri), davranışı (JS) gevşek bağlı tutun; böylece geleceğe dönük esneklik kazanırsınız.

Uygulamalı Mini Proje: “Ajans Portfolyo Sitesi (Tek Sayfa Deneyimi)”

Hedef: 90 saniyede ajansı tanıtmak, 3–5 iş örneğini gezdirmek, iletişim çağrısı yaptırmak.
Bölümler: Home (Hero), Works, About, Contact.
Bileşenler: MC_Header, MC_Hero, MC_Card, MC_Carousel, MC_Lightbox, MC_ContactForm, MC_Footer, MC_Loader.

1) Akış (ms):

• 0–600: Hero başlık alttan maske ile girer (easeOutCubic), kısa “nefes” animasyonu.

• 600–1200: Ajans vaadi (lede) fade-in; CTA “İşlerimize göz atın”.

• 1200–2000: Scroll tetikli “Works” başlığı + kartlar 3’lü ritimde belirir.

• Detay: Kart tıklanınca lightbox: görseller arasında oklarla gezinme, alt açıklama.

• About: Takım foto kolajı yavaş parallax; değerler 3 madde, ikon + kısa açıklama.

• Contact: Form alanları; doğru/yanlış geri bildirimi, başarıda “teşekkür” ve mail kopyalama.

2) İçerik Dosyaları:

• content.json → works[] { id, title, cover, gallery[], tags[] }, about.text, contact.mail, contact.social[].

• JSON’u yükle, modele yaz; her bölüm render(model) ile güncellensin.

3) Erişilebilirlik–Performans:

• Tab sırası: Header → Works kart 1..n → About → Contact.

• Görünmeyen bölümler sahneden kaldırılır; kart galerileri yalnız açıldığında yüklenir (lazy).

• Kontrast: başlıklar > 3:1, metinler > 4.5:1.

4) Analitik Etiketler:

• view:hero, click:cta:works, open:work:{id}, submit:contact:success, error:form:email.

Beklenen Sonuç:

• İlk oturumda %60+ “Works” görüntüleme,

• Iletişim CTA’sında %8–12 tıklama,

• Galeri başına ortalama 1.8 görsel gezilmesi (baseline).

Vaka Notları

1. Derin Bağlantı = Paylaşılabilirlik: İş detay ekranları hash tabanlı linklendiğinde dışarıdan doğrudan o işe gidilebildi; sosyal paylaşımlar etkili oldu.

2. Görünürlüğü Yönetmek FPS’i Kurtarır: Modülleri visible=false yerine sahneden kaldırınca CPU düşer; laptop fanı susar—kiosk’ta ısı sorununu çözer.

3. Hit Alanı > Görsel: Mobil/dokunmatik kiosk’ta ikon–buton hit alanını görselden büyük tasarlayın; tıklanabilirlik belirginleşir.

4. Ritimli Geçişler, Şovdan İyidir: 300–500 ms aralığında nazik giriş–çıkışlar “profesyonel” hissi artırır; ağır animasyon terk getirir.

5. JSON ile İçerik Esnekliği: Editör ekibi yeni işleri JSON’a ekleyince derleme döngüsü devreden çıktı; yayın hızı arttı.

Sonuç

Flash ile web sayfası tasarımı, tek bir stüdyo içinde görsel kimlik, hareket, etkileşim ve içerik akışını sahici bir deneyime dönüştürmenin okuluydu. Bu yazıda; bilgi mimarisinin sahne diline çevrilmesini, durum makineleri ile ekran akışını, sembol ve zaman çizelgesi stratejilerini, navigasyon–buton–mikro etkileşim tasarımını, XML/JSON içerik ayrıştırma ve medya entegrasyonunu, form gönderimi ve geri bildirim kalıplarını, erişilebilirlik–performans hijyenini, çoklu ekran ve yerelleştirmeyi, analitik–güvenlik temellerini ve Animate/HTML5 Canvas köprüsünü ayrıntılarıyla haritaladık.
Esas prensipler sade ve kalıcı:

• Amaçlı mimari: Her bölüm ve animasyon, kullanıcının yolculuğuna hizmet etmeli.

• Bileşenleşme: MovieClip tabanlı UI parçaları; tek noktadan tema ve davranış yönetimi.

• İçerik–davranış ayrımı: JSON/varlık yönetimi; derlemesiz güncelleme.

• Nazik hareket: Ritmi koruyan, dikkat dağıtmayan mikro-animasyonlar.

• Erişilebilirlik ve performans: Kontrast, klavye, hit alan, preloader, görünürlüğü yönetme.

• Ölç–iyileştir: Olay etiketleri, A/B denemeleri, veriyle karar.
  Bugün teknolojik tercih değişmiş olabilir; fakat Flash’ta öğrenilen bu tasarım aklı, modern web’de hâlâ oyunun kurucu oyuncusu. Bu akılla tasarladığınız her web sayfası, kullanıcıya yalnız içerik değil, anlaşılır bir yol ve akılda kalan bir his sunar.