做動畫學物理‧課堂活動06

控制元件的屬性

任務

1. 大按鈕控制整個笑臉左右移動
2. 小按鈕控制眼睛旋轉
3. 用滑鼠可以拖曳整張圖

[先下載半成品]

看看半成品裡有什麼

要用到的圖片，
已經用 Flash CC 畫好了，
輸出成 myFlash.js 等你用。

更多 Flash CC 繪圖↓

Flash CC 繪圖教學影片

建立 createjs 環境，並取用 myFlash.js

html


<!--建立 createJS 環境-->
<script src="createjs/easeljs.min.js"></script>
<!--把畫好的 Flash 讀近來-->
<script src="flash/myFlash.js"></script>
<!--主程式-->
<script src="myScript.js"></script>

myScript.js(注意！不是myFlash.js)


//createJS 用
var canvas, stage, myFlash;
//body onload 時，執行 initialize
function init(){
  //新建一個 myFlash.js 中的 lib.myFlash，並加到 stage
  canvas = document.getElementById("canvas");//取得 canvas
  myFlash = new lib.myFlash();//new 一個 myFlash
  stage = new createjs.Stage(canvas);//建立一個 createjs 的 stage
  stage.addChild(myFlash);//在 satge 上加入 myFlash
}

加入 tick 動畫


.....
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", myTick);
.....

function myTick(){
  ..............
}

加入按鈕動作監聽


myFlash.btnRight.name='btnRight';
myFlash.btnRight.addEventListener("click",clickBtn);
...
function clickBtn(e){
  //先判斷按下哪一個按鈕
  if(e.target.name=="btnRight"){//大右
    ...
  }else if...
}

常用屬性

.x	x座標
.y	y座標
.scaleX	x縮放
.scaleY	y縮放
.rotation	旋轉(角度)

任務來了

1. 大按鈕控制整個笑臉左右移動

2. 小按鈕控制眼睛旋轉

更多題目↓

利用 tick，讓笑臉不停旋轉

進階

滑鼠在右邊向右轉，滑鼠在左邊向左轉

離越遠轉越快

更多題目↓

用滑鼠"點、拖、放"，拖曳整張圖位置

提示

1. 加入變數 isDraging

2. 滑鼠按下 true，放開 false

3. 每次 tick 時，true 就跟滑鼠，false 就沒事

4. 想一想，如何避免「瞬間移動」

補充：繞原點旋轉

\[x = v\ t\]

\[\theta = \omega\ t\]

\[x = r\ cos(\omega\ t)\]

\[y = r\ sin(\omega\ t)\]

補充：輪在地上滾

\[\omega = \frac{\Delta \theta}{\Delta t} = \frac{2\pi}{T}\]

\[v = \frac{\Delta v}{\Delta t} = \frac{2\pi R}{T} = R\ \omega\]

\[\omega =\frac{v}{R}\]

滑鼠

1.偵測滑鼠位置

2.偵測滑鼠動作

滑鼠位置


var mx = stage.mouseX;
var my = stage.mouseY;

滑鼠動作


myFlash.ball01.addEventListener("mousedown" , myMouseDownFunction);
myFlash.ball01.addEventListener("pressup" , myMouseUpFunction);
myFlash.ball01.addEventListener("click" , myMouseClickFunction);

或者


myFlash.ball01.on("mousedown" , myMouseDownFunction);
myFlash.ball01.on("pressup" , myMouseUpFunction);
myFlash.ball01.on("click" , myMouseClickFunction);