FleaWinder’ı inşa etmenin hikayeleri ve notları — klavyen ve farenle güçlenen minik bir animasyonlu sirk.
Sirki küçük ekranlara taşımak
FleaWinder, görev çubuğu üzerinde geniş, ince bir şerit için tasarlandı — rahatça yatay formatta. Telefonlar dikey. Sirki küçük ekranlarda çalıştırmak, onu canlı kılan şeyi kaybetmeden düzeni yeniden düşünmek anlamına geliyordu.
The embeddable widget flips to a tall canvas on mobile, stacking the acts vertically instead of spreading them across a ribbon. Anyone dropping FleaWinder into their own site gets a layout that adapts automatically. Four theme presets (dark, light, warm, cool) and a scale parameter let it blend with whatever surrounds it.
Daha büyük zorluk okunabilirlikti. Telefon ekranında masaüstü ölçeğinde çizilmiş pireler sadece noktacıklar. Pire bedenlerini büyüten bir yakınlaştırma adımı ekledik, böylece kostümleri, ifadeleri ve aksesuarları gerçekten görülebilir oldu — Pip'in saç bandı, Rex'in kaskı, Blaze'in minik tacı. Her zaman orada olan kişilik detayları bir kol mesafesinde okunabilir hale geldi.
Mobil yenilemenin geri kalanı daha az gösterişli ama bir o kadar önemliydi: dokunma dostu dokunma hedefleri, daha iyi yazı tipi ölçeklemesi, pazarlama sitesi genelinde duyarlı boşluklar. Devrimci bir şey yok — sadece sirkin nerede bulunursa bulunsun doğru görünmesini sağlamak.
Kostümler, mevsimler ve bir sirk müdürü
Bu hafta tamamen görsel derinlikle ilgiliydi. Kolonideki her pire artık benzersiz bir kostüm giyiyor — Nova'nın ip üzerinde bir şemsiyesi var, Rex topun içinde kask takıyor, Blaze ateş üfleme gösterisi için taç alıyor. Küçük detaylar, ama her sanatçıya bir bakışta fark edebileceğin bir kimlik veriyorlar.
Sahne, takvimle birlikte değişiyor. Mevsimsel parçacık sistemi kışın kar, ilkbaharda kiraz çiçeği, yazın ateş böceği ve sonbaharda süzülen yaprak yağdırıyor. Gerçek saatine bağlı ince bir gündüz/gece tonu da var — şerit altın saatte ısınıyor ve karanlık çöktükten sonra kararıyor, gece gökyüzünde daha parlak yıldızlarla.
En büyük ekleme sirk müdürü — gösteriler arasında dolaşarak şovu denetleyen, silindir şapkalı özel bir pire. Sahne almıyor; denetliyor. Devriye yolunu doğru ayarlamak, yürüyüşlerini bir gösteri geçişinin tam bittiği anda varması için zamanlamak demekti; bu da tüm sirke daha önce sahip olmadığı bir koreografi hissi veriyor.
Kaputun altında tam bir tema sistemi artık tüm bunları yönetiyor. Sekiz renk paleti ve aya göre doğru olanı seçen otomatik mevsimsel mod. Her gösterideki ve arayüz öğesindeki her renk aktif temadan alınıyor, bu yüzden geçiş yapıştırılmış değil pürüzsüz hissettiriyor.
v1.1.0: İki Yeni Gösteri
Versiyon 1.1.0, kadroya Jonglaj Gösterisi ve Ateş Üfleyici’yi ekleyerek toplam yedi canlı sirk gösterisine ulaşıyor. Her ikisi de gösterinin geri kalanını yönlendiren aynı enerji sistemiyle çalışır — tuş vuruatların, fare hareketlerin ve tıklamaların.
Jonglör, gerçek parabolik yaylarda birden fazla topu takip eder. Sayı enerjiyle orantılıdır: boştayken iki veya üç, tam güçte altıya kadar, kalabalık coştuğunda sırt arkasından yakalamalarla. Zamanlamanın doğru olması için her topun fazının ayrıştırılması gerekti, böylece birbirine yapışmaları önlendi.
Ateş Üfleyici, mevcut parçacık sistemini kullanıyor ancak yeni bir ısı titreşim efektiyle. Alev uzunluğu enerjiyle büyür ve tıklamalar bonus patlamalar üretir. En zor kısım renk karışımıydı — tabanındaki koyu kırmızıdan ucundaki parlak sarıya bantlı görünmeden akıcı geçiş yapmak.
Her iki gösteri de mevcut rotasyon sistemine dahil oluyor, böylece orijinal beşle birlikte giriş çıkış yaptıklarını göreceksin. Bir favoriyi sabitlemek istersen, Ayarlar paneli artık her gösteriyi tek tek açıp kapatmana izin veriyor.
Tarihçe Sayfasının Arkasındaki Tarih
FleaWinder’ın tarihçe sayfası, Robert Hooke’un 1665’teki mikroskop çizimlerinden bugün hala çalışan Oktoberfest göstericilerine kadar dört yüzyılı aşkın gerçek pire sirkini belgeliyor. Bunu yazmak; Viktorya dönemi afişlerini, dijitalleştirilmiş gazete kupürlerini ve entomolojik eğlence üzerine şaşırtıcı sayıda akademik makale okumayı gerektirdi.
En zor kısım neyi dışarıda bırakacaktı. Tek başına Louis Bertolotto bir kitap doldurabilirdi (ve doldurdu da — aslında birkaç tane). Uzlaşma, ana noktaları vurgulayan bir zaman çizelgesi ve daha derine inmek isteyenler için genişletilebilir bölümler oldu.
Sayfa, anlattığı broşür ve afişleri yansıtmak için büyük baş harfler, süs ayırıcılar ve serif yazı tipi kullanıyor. Okuyucunun bunalmasını önlemek için her bölüm varsayılan olarak küliyor, ama ilk paragraf seni içine çekmek için büyük baş harfle her zaman görünür.
Tüm metin İngilizce, İspanyolca ve Almanca olarak mevcut. Çeviri süreci bazı ilginç yerel tarihleri ortaya çıkardı — örneğin Almanca Flohzirkus geleneklerinin Oktoberfest’teki kendine özgü soyları, Londra ve New York sahnelerinden farklı.
FleaWinder’ı Neden Yaptım
Bilgisayarı canlı hissettiren bir şey istiyordum — dikkat dağıtıcı değil, varlığına tepki veren sessiz bir yoldati gibi. Çoğu ekran koruyucu sen gittinğinde aktifleşir; FleaWinder sen geldiğinde aktifleşir.
Fikir basitti: işletim sisteminin görmezden geldiği tüm boşta girdiyi — yazışının ritmi, farenin hızı, tıklamalarının temposu — al ve animasyonlu sirk pireleri grubuna besle. Ne kadar çok çalışırsan, gösteri o kadar canlanır.
Görev çubuğunun üstünde şeffaf bir kaplama olarak yapmak doğru kısıtlama oldu. Her zaman görünür ama asla yolda değil. Onunla doğrudan etkileşmezsin; sadece çalışırsın, o tepki verir. Teknik zorluk, odak çalmaması için gerçekten tıklama geçiren bir yapı oluşturmaktı.
FleaWinder, Viktorya dönemi pire sirkine bir aşk mektubu — saatilerin gerçek pireleri minyatür arabaları çekmek ve iplerde yürütmek için koşum altına aldığı, yüzyılları kaplayan gerçek bir sanat formu. Tarihçe sayfası bu hikayeyi tamamıyla anlatıyor.
