草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ，將於3秒後自動跳轉
2011年6月9日，Google為了慶祝電吉他之父Les Paul的生日，特地把招牌Google改編成電子吉他，是的，這次的Google Doodle是一把可以互動、可以彈奏的數位電吉他，相信許多人對於這樣的創意表現都為之讚歎，究竟是怎麼做的呢？根據Google官方部落格顯示，這把數位電吉他是使用JavaScript, HTML5 的Canvas , CSS, Flash以及Google以開發過的api套件，可以說是使用了非常新穎的技術，但是由於有用到Flash技術，所以很遺憾的，iPhone、iPad或iPod Touch使用者只能觀看無法彈奏，但是我相信有電腦的網友們今天應該都有玩一下，這樣的互動也不知不覺變成Google獨特的特色了。
如果想玩一下這把電吉他並且彈出一些什麼東西，這裡提供幾個我看到網友分享的樂譜，請開起鍵盤模式照著按，相信你會彈的更愉快：
兩隻老虎
TYUT TYUT UIO UIO OPOIUT OPOIUT UWT UWT瑪莉有隻小綿羊
9878999888999987899988987小蜜蜂
533 422 1234555 533 422 13553 2222234 3333345 533 422 13551滄海一聲笑(笑傲江湖)
POUYT UYTEW WEWETYUOP PPOUYTY隱形的翅膀
358787 6568321 11186532122 358787 6568321 1118653211好了，相信各位玩過之後應該有部份的朋友，對於這樣的技術還是非常有興趣的，雖然個人知道的有限，剛好這幾天我在練HTML5的Canvas，所以就我所知的稍微解說一下，如果有錯誤也歡迎各位指證一下啦！
首先來說說這把電吉他的視覺畫面組成部份，全隻電吉他是採用css sprites技術，就如上圖所示，電吉他的零件解析出來就是這樣，你可以點擊這裡觀看Google的線上圖片部份，而css sprites技術其實就是指把原本零零散散的圖片集合成一張，可以有效減少Http Request次數，簡單來說就是可以更快的開起網頁，經過實驗證明，使用css sprites技術不但有效減少Http Request還可以減少整體圖片檔案大小，對於流量的節約是非常有幫助的，使用時搭配css的background可達最大效益。
說完了吉他的外觀再來說說吉他弦這些線的部份，線的部份就是使用HTML5的Canvas技術，使用HTML5的Canvas需要搭配Javascript才能正確繪製出所需的線段或是圖案，所以整體來說包括線條的粗細、顏色，甚至彈的動態效果應該都是HTML5的Canvas技術的表現，之後如果有時間我會在針對HTML5的Canvas的部份在做深入的介紹。
最後就是整把數位電吉他的精髓，也就是電吉他的聲音部份，這部份次採用flash技術來播放音效，這個flash除了感應撥弦的位置並播放聲音以外，應該是沒有其他功效，也因為沒有其他功效，所以整個flash看起來空空如也，完全想不到這個傢伙會是整把數位電吉他的靈魂所在，真正表現出看不見的靈魂這個精髓。
以上就是今天Google Doodle塗鴉部份的解說，離今天結束還有半小時，各位觀眾趕快走開，記得回來，好好珍惜你跟這把電吉他寶貴的相處時光吧！
補充：Google Doodle - Google 塗鴉博物館
留言
張貼留言