課程大綱

第一週 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');」

第四週 頁面堆疊、事件及時間流程的活用與聲音播放元件

頁面堆疊(Pagedeck)【網頁HTML/HTML withPages】

1.建立新檔案、選擇【網頁 HTML】
2.利用頁面堆疊製造四場景以切換狀態，a:首頁;b:遊戲頁;c:壞結局;d:好結局
3.分別設計上述四場景、並利用頁面堆疊動作實驗切換場景

事件及時間流程的活用Ⅰ

1.尋找一飛龍動圖做為素材
2.為飛龍設計三種動畫，平時、閃避及死亡，三段動畫可接續在一起
3.將設計完成之飛龍動畫、建立群組
4.進入飛龍動畫群組中、為三種動畫的起始時間設置標籤如Normal, Run, Dead
5.在Run/Dead的時間點之前、設置時間事件、該事件為設定動畫返回Normal/Run
(這兩事件、主要在確保動畫自身的狀態、無事件發生則保持原有狀態播放)
6.對飛龍設置事件、若MouseEnter則設置動畫時間線從Run開始播放
(這事件是在設定當飛龍遭觸碰時、會開啟閃躲的動畫以進行閃躲)
6.1使用右上方圖示之【程式碼檢視】，找到類似:
==
gwd.auto*Mouseenter = function(event) {
==
的語句，其下方原句應為:
==
gwd.actions.timeline.gotoAndPlay(*, 'Run');
==
將其改為下句:
==
if(event.target.name!='run') {gwd.actions.timeline.gotoAndPlay(*,'Run');event.target.name='run';}
==
【*】內容依物件或群組名稱而有所不同、故以【*】表示…
(此動作是在確保飛龍進入閃躲動畫即永遠保持閃躲狀態…
我們偷用name屬性來存放狀態、確認只進入run的動畫一次…
此段可以對非資訊類同學會稍難理解、同學可盡力試試)
7.對飛龍設置事件、若飛龍遭Click時、則設置動畫時間線從Dead開始播放
(此事件是在設定當飛龍遭點擊時、會開啟死亡的動畫)
8.在飛龍死亡動畫的時間結束點、設置事件改變飛龍的CSS，設置 visibility:hidden
(此事件確保飛龍死亡後、不會因為又被點擊而再死一次，:p)

事件及時間流程的活用Ⅱ

1.設置一個愛心血條(HP)及一個計數器(Score)
2.設置事件：觸碰飛龍進行扣血/離開飛龍則不再扣血
2.a 開始扣血： gwd.actions.timeline.play('HP');
2.b 停止扣血： gwd.actions.timeline.pause('HP');
3.點擊殺死飛龍則計數器加1
4.若飛龍殺盡前、血條歸零則導向壞結局(頁面id為page1_2)，時間事件設置在血條(HP)
4.a 壞結局： gwd.actions.gwdPagedeck.goToPage('pagedeck', 'page1_2', 'none', 1000, 'linear', 'top');
5.若飛龍殺盡、則導向好結局(頁面id為page1_3)，點擊事件設置在飛龍組件
參考程式：
==
var a = parseInt(document.getElementById('Score').innerHTML) + 1;
if (a > 2) { //畫面上僅安排三隻飛龍、此條件代表飛龍全數擊殺
gwd.actions.gwdPagedeck.goToPage('pagedeck', 'page1_3', 'none', 1000, 'linear', 'top');
} else { //飛龍未全數擊殺、分數顯示應更動為a(已+1後之分數)
document.getElementById('Score').innerHTML = a.toString();
}
==
小挑戰：如何製作補血包？(碰觸則血條補滿、補血包消失)

聲音播放

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教學影片

小技巧

．愛心類、子彈類消耗的血條製作

1.製作一個長條形圖案，裡面充滿數顆愛心/子彈
2.在該element的CSS Style加上兩個設定
　Ⅰ. object-fit:cover;(讓它可以切除超出長寬設定的部份)
　Ⅱ. object-position:0% center; (讓它切除時以最左邊為基點)
　註：0%是從最右端向左消失；100%是從最左端被吸入消失
3.設置動畫畫面時，僅需兩個畫面，一是原物件、二是將物件長度設為0
4.這兩個屬性似乎只有chrome等少數瀏覽器支援、需多加測試

．分數計數器

1.製作一個DIV元素、假設名稱為【Score】
2.利用【程式碼檢視】方式、給DIV設置初始值為「0」
3.設定計數器事件，(例如怪物被擊中)，動作則選擇【自訂】
　Ⅰ. 【新增自訂動作】，名稱隨意、例如「gwd.count」(gwd為固定前綴、可無視)
　Ⅱ.

var a = parseInt(document.getElementById('Score').innerHTML) + 1;
document.getElementById('Score').innerHTML = a.toString();

3.使用這個方式的優點是分數可不斷向上計數，若使用動畫式計數、則需預先設計n張動畫
4.但是此法缺點是無法利用動畫時間觸發事件、可利用程式判斷但可能較不適合非資訊類學生

var a = parseInt(document.getElementById('Score').innerHTML) + 1;
if (a > 3) {
document.getElementById('Score').innerHTML = "我不玩了！";
event.target.style.visibility = "hidden";
} else {
document.getElementById('Score').innerHTML = a.toString();
}

物件【D】隨游標移動

1.在document.body上設置mousemove事件
2.事件動作選擇自訂，程式碼如附：
==

var x = event.clientX;//事件發生時的x座標
var y = event.clientY;//事件發生時的y座標
var z = document.getElementById("D");//指定z為物件【D】
var w = parseInt(z.getBoundingClientRect().width) / 2;//依物寬修正
var h = parseInt(z.getBoundingClientRect().height) / 2;//依物高修正

t = parseInt(z.style.left) - x + w; //判定要不要轉頭
if (t < 0) {
z.style.transform = "rotateY(0deg)";
} else {
z.style.transform = "rotateY(180deg)";
}

z.style.left = (x - w) + "px";
z.style.top = (y - h) + "px";

==
3.視情形、自行修改相關程式碼

CSS 設定加javascript語法

1.在CSS中的設定、是可以加入JavaScript函數的呼叫，以設定width而言，例子如下：

width:' + event.target.getBoundingClientRect().width / 2 + 'px
height:' + event.target.getBoundingClientRect().height / 2 + 'px

2.注意那個單引號【'】及加號【+】，處理字串的脫出及結合

偵測按鍵事件

1.在時間軸起始處加入時間事件，事件行為選自訂：

document.body.addEventListener("keypress", gwd.key);
//增加一個事件【keypress】的聽取
//發生keypress事件時、執行【gwd.key】函數

2.隨便增加個自訂事件(不會發生也沒關係、重點後面的行為)、事件行為自訂為gwd.key

alert(event.which || event.keyCode);
//會將接受到的按鍵以警告視窗印出
//【||】 => 這是【或】的邏輯運算，指印出前者或後者、視瀏覽器不同

3.修改gwd.key的函數，使其符合自定義的按鍵行為

影片播放n秒後暫停

<script>
function TKT(){
var vid = document.querySelectorAll("Video");
//選擇網頁上所有Video的物件、若有id、則可用document.getElementByID

vid[0].ontimeupdate = function() {myFunction()};
//選擇第一個物件、隨時注意播放時間的改變

function myFunction() {

if (vid[0].currentTime>10) {
//播放時間>10，則暫停影片、或做其它動作
//alert(vid[0].currentTime);
vid[0].pause();
}
}
}
</script>

在console裡、檢視目前所有的variables (利用JavaScript)

for(var b in window) {
if(window.hasOwnProperty(b)) console.log(b);
}