網頁設計

課程大綱


第一週 Google Web Designer (GWD) 簡介,動畫三變化


Google Web Designer 動畫變化類型

1.平移:物件由a點移動至b點,例如人物走路或汽車移動
2.縮放:物件放大及縮小,例如心跳的樣子即是一放一縮
3.旋轉:物件的旋轉情形,例如揮手、拍翅,注意要設定旋轉軸心在關節處

第二週 屬性欄位介紹、群組用途、動畫的疊加


示範新動畫、風車旋轉製作

利用元件屬性欄位進行平移、縮放、與旋轉

附加問題:顏色修改、顯示設定
利用群組進行動畫疊加

1.利用縮放、做出心跳動畫、將其群組化
2.利用旋轉、將心跳動畫加上拍翅、將其群組化
3.利用平移、將拍翅心跳動畫加上四處移動、將其群組化
利用上述結果造出多個拍翅心跳四處飛翔的畫面

時間允許:將拍翅心跳動畫加入點擊後消失之事件

第三週 血條的製作、動畫流程的控制、結局畫面(HE/BE)如何導入


血條製作方式

1.一般血條:縮放動畫
2.時鐘計時:旋轉動畫
3.愛心子彈:平移動畫(愛心:閃躲類遊戲、子彈為射擊類)
4.燃燒引線:雙重平移

事件的發生

1.依時間序發生
2.依動作而發生

事件發生後的行為

1.將物件消失「CSS設定樣式、visibility設定hidden,物件即會消失」
2.跳轉至它處「document.location.href = "http://www.nkust.edu.tw";」(自訂)
3.控制動畫流程「播放、暫停」
4.切換頁面堆疊「gwd.actions.gwdPagedeck.goToPage('pagedeck', 'page1_2', 'none', 1000, 'linear', 'top');」

第四週 聲音播放、事件及時間流程的活用


聲音播放

1.從右方元件中拉出「音訊」元件
2.聲音檔案格式 mp4、ogg、wav、(事實上經實驗後、mp3也可以)
3.匯入媒體時、沒有音訊類可以選取,使用「*.*」照常匯入,可正常使用

電流聲
尖叫聲
音效下載(需登入Google帳號)

物件流程控制小技巧

1.有時、群組內的物件並無法直接控制群組外的物件、此時無法以選取方式增添事件
(例如碰到會損血的物件要去控制血條)
2.此時可在最外層新增一物件(Obj)、設定點擊後會扣血的事件
3.在損血物件群組內可使用「document.getElementById('Obj').click();」即可扣血…
4.亦可使用自訂函數「gwd.actions.timeline.play('ObjName');//繼續動畫」

Google Web Designer 關於canvas變色的問題

Google Web Designer並不支援物件顏色的漸變動畫,(但是DIV區塊的背景色漸變ok)
因此同一個物件的顏色變換、稍嫌困難,底下幾種方法可做為參考…
1.使用較複雜的方法、函式如下附之變換畫布物件顏色方法,物件真正是「同一個」
2.可複製多個相同物件、並依顏色變換順序加以層疊,再依序使其消失、即可類似變顏色效果
3.消失方法a,利用CSS、設定visibility為hidden(真正消失、hidden的東西按不到)
3.消失方法b,設定不透明度由1至0漸變,如此該物件即會消失(視覺消失、還是按得到)…

Google Web Designer的事件增刪問題…

1.事件可加於時間軸上或物件上,時間軸僅需在事件時間軸上按右鍵即可新增,物件上可直接於物件上按右鍵即可新增…
2.刪除事件,時間軸僅需在事件時間軸的標記處右鍵選擇移除即可;物件事件的取消必須在物件選單下方的「活動」挑選欲刪除者刪除
3.事件舉例:「CSS設定樣式、visibility設定hidden,物件即會消失」、「時間軸事件可控制流程」、「自訂事件需用JavaScript,如【document.location.href = "http://www.nkust.edu.tw";】可將頁面導至本校首頁
1. window.location.href 操作本頁面位址
2. parent.location.href 操作父頁面位址
3. top.location.href 操作最上層頁面位址

Google Web Designer 互動小技巧

1.動畫做好後、可將其「群組」,此時會變成新的一個群組元件,可再疊加其他動畫
2.物件上所加的事件(例如按下後會消失),若被「群組」之後,會被保留在群組元件中
Google Web Designer 利用ID改物件內容的方法

document.getElementById('TKT').innerHTML = 'WhatYouWant';
Google Web Designer 自訂程式碼

1. gwd.actions.timeline.play('ObjName');//繼續動畫
2. document.getElementById('ObjName').click();//執行按鍵動作
3. gwd.actions.gwdAudio.replay('ObjName');//重播聲音

變換畫布物件的顏色

//JavaScript 程式碼
var dog = document.getElementById("MyCanvas"); //將MyCanvas畫布指定為dog
var context = dog.getContext('2d'); //將dog畫布的2d繪圖能力交給context
context.fillStyle = "#FF00FF"; //設定context的內填顏色為"#FF00FF"
context.fill(); //將顏色填入context

小提醒:畫布本身只是個容器、沒法畫圖,所以不具備改物件顏色能力(頂多改背景色)

重覆元件事件設定

1.有時某些元件需大量重覆使用,例如電流急急棒的柵欄或射擊遊戲裡的飛機之類的被擊落物
2.上述的元件、有時會被加上動畫後再群組為新元件、然後才被加入事件
3.需注意事件的加入需在元素時加入,若已群組為動畫元件、將事件加在動畫事件會不靈光
4.以「被擊落物-飛機」為例,步驟應是「畫一架飛機A」->「將圖畫飛機A加入事件」->「群組圖畫飛機A成為B物件」->「大量使用B物件並個別設定動畫」
☆若是物件組成較複雜,可先畫一DIV物件,再將物品畫在DIV上,將事件設在DIV上即可


Google Web Designer (GWD) 問題收集


1.聲音物件若放入群組中,存檔後關閉、重新開啟時,聲音物件的顯示會有問題,
看不見也不能移動(可利用「shift+方向鍵」來移動)

2.事件的觸發若是放在群組內的群組內,會有觸發不良的情形,
mouseover、mouseout完全偵測不到;click則需按多次…

3.自己加JavaScript參照檔失敗,原因是js的參照位址似乎要寫絕對位址,例如:
<script type="text/javascript" id="KTjs" src="http://tkt.nkust.edu.tw/Share/HTMLs/STM_APP.js" data-gwd-node="true"></script>

將此行加在「</head>」之前即可…


全域變數(Global Variable):
找到 window.gwd 這一行,在其下面一行新增全域變數宣告或全域程式碼,例如:


window.gwd = window.gwd || {};
var sum = 0; //全域變數 Global Variable




Google Web Designer API指令參考[BR]
GWD使用秘訣
GWD使用說明
Google Web Designer教學影片