Google son zamanlarda ilginç doodle’lar yaparak ulaştıkları noktayı gözler önüne seriyor. Genellikle CSS3, HTML5 gibi öncü teknolojilerin uygulamalarını sunan Google, bugünkü Les Paul Doodle’ı ile de HTML5 ve Canvas teknolojileriyle ilgili güzel bir çalışma sunmuş oldu.
İsterseniz lafı fazla uzatmadan nasıl bir doodle’dan bahsediyorduk hemen izleyelim:
İlk başta basit bir flash animasyonuymuş gibi görünse de dikkatlice baktığımızda sadece mp3 dosyalarının çalışması amacıyla küçük bir swf dosyası olduğunu görüyoruz . Bu videoda gördüğünüz her bir öğe sprite adı verilen bir tek dosyada bulunuyor. Doodle çalıştığında ihtiyaç duyduğu bölümleri sprite dosyasından kopyalayıp ekrana yerleştiriyor.
Kopyalama ve yerleştirme işlemi javascript kütüphanesi ile yapılırken, çizim işlemi ise HTML 5’in yeniliklerinden canvas öğesi içinde yapılıyor. Yine Javascript marifetiyle öğelerin yani bu doodle’a göre tellere tıkladığımızda bir javascript event handler’ı çalışıyor ve titreşmiş tel animasyonunu oynatıyor. Aynı zamanda Flash’ın javascript callback özelliği sayesinde oraya ilgili notanın çalınması emri gönderiliyor.
Bu konudaki ekstra bilgileri Google Blog’undan alabilirsiniz:
http://googleblog.blogspot.com/2011/06/doodle-for-instrumental-inventor.html