Creating Animated Apps (I) 靜宜大學資管系 楊子青

Presentation on theme: "Creating Animated Apps (I) 靜宜大學資管系 楊子青"— Presentation transcript:

1 Creating Animated Apps (I) 靜宜大學資管系 楊子青 2013.4.22.

2 多人使用動畫元件 常導致雲端主機當機 解決方法 網站分流 先用單機陽春版(此版本比MIT舊)，後續再上傳至MIT繼續編輯
實驗網站： 自行架設Server (需搜尋相關檔案及安裝說明) 先用單機陽春版(此版本比MIT舊)，後續再上傳至MIT繼續編輯 先下載以下檔案，並解壓縮 (157MB) 執行 \Personal\AppInventor\startAI.cmd 開啟瀏覽器，輸入

3 單機陽春版：先執行startAI.cmd 等候一下

4 單機陽春版 ：開啟瀏覽器， 輸入網址，可用test或自己的email

5 打Mole不打Ladybug (I): Canvas與Image Sprite

6 1. Canvas Component A two-dimensional touch-sensitive rectangular panel on which drawing can be done and sprites can be moved. Any location on the Canvas can be specified as a pair of (X, Y) values, where X is the number of pixels away from the left edge of the Canvas Y is the number of pixels away from the top edge of the Canvas There are events to tell when and where a Canvas has been touched or a Sprite has been dragged.

7 The Canvas coordinate system

8 Adding a Canvas Component to App
You can drag a Canvas component into your app from the Basic palette. specify the Canvas’s Width and Height. Often span the width of the device screen: “Fill parent” Height: 300

9 2. Image sprite component
is an animated object that is contained by a canvas can react to touches and drags, interact with other sprites (image sprites and other balls) and the edge of the canvas, and move according to its properties.

10 介面設計

11 用程式設定Image sprite位置

12 判斷在Canvas 是否有打中Image sprite

13 打中Mole與Ladybug都是Hit 如何區分？

14 如何拖曳Mole？

15 練習 請加入一個變數Score，初值0 打中Mole則Score加一分； 打中ladybug則Score減兩分； 沒打中減一分

16 參考解答

17 打Mole不打Ladybug (II): Mole隨機移動、碰撞

18 1. 讓Mole隨機移動至Canvas內

19 Random location (MoveMole procedure)

20 Timer event One way to specify animation in App Inventor is to change an object in response to a timer event. Most commonly, you’ll move sprites to different locations on the canvas at set time intervals.

21 Clock元件及TimerInterval

22 Calling MoveMole every second
1. 初始位置設定 2. Clock1’s TimerInterval property at its default value of 1,000 (milliseconds), or 1 second.

23 2. 碰撞(Collided With) Shooting games, sports, and other animated apps often rely on activity occurring when two or more objects collide.

24 如果ladybug被Mole碰撞，則扣一分