謝昌勳 :: 痞客邦 ::

s810802 發表在痞客邦留言(2) 人氣()

REF:
http://appinventor.mit.edu/explore/ai2/paintpot-part2.html

Jul 09 Mon 2018 17:12
【App Inventor 2 初學者範例 2018 】BA05 照片塗鴉2 PaintPot (Part 2) (BA05_2018)

【App Inventor 2 初學者範例 2018 】BA05 照片塗鴉2 PaintPot (Part 2) (BA05_2018)

畫面編排:

程式設計:

執行畫面:

s810802 發表在痞客邦留言(0) 人氣()

REF:
http://appinventor.mit.edu/explore/ai2/paintpot-part1.html

【App Inventor 2 基礎範例 2018 】

Jul 09 Mon 2018 17:07
【App Inventor 2 初學者範例 2018 】BA04 照片塗鴉1 PaintPot (Part 1) (BA04_2018)

【App Inventor 2 初學者範例 2018 】BA04 照片塗鴉1 PaintPot (Part 1) (BA04_2018)

畫面編排:

程式設計:

執行畫面:

s810802 發表在痞客邦留言(0) 人氣()

收銀台聲音
http://appinventor.mit.edu/explore/sites/all/files/ai2tutorials/magic8ball/Cha_Ching.mp3

Jul 09 Mon 2018 16:54
【App Inventor 2 初學者範例 2018 】BA02 魔術8號球 Magic 8 Ball (BA02_2018)

【App Inventor 2 初學者範例 2018 】BA02 魔術8號球 Magic 8 Ball (BA02_2018)

畫面編排:

本範例的素材:

茶匙敲叮噹響聲音
http://appinventor.mit.edu/explore/sites/all/files/ai2tutorials/magic8ball/Clinking_Teaspoon.mp3

噹噹聲音
http://appinventor.mit.edu/explore/sites/all/files/ai2tutorials/magic8ball/Tada.mp3

魔術8號球圖片
http://appinventor.mit.edu/explore/sites/all/files/Teach/media/image_8_ball.jpg

魔術8號球圖片
http://appinventor.mit.edu/explore/sites/all/files/ai2tutorials/magic8ball/magic8ball.jpg

程式設計:

執行畫面:

ref:http://appinventor.mit.edu/explore/ai2/magic-8-ball.html
【App Inventor 2 基礎範例 2018 】

s810802 發表在痞客邦留言(0) 人氣()

May 31 Thu 2018 23:59
【App Inventor 2 其他範例 2018 】O07 我愛動物 (O07_2018)

【App Inventor 2 其他範例 2018 】O07 我愛動物 (O07_2018)

畫面編排:

1.建立專案：tiger，Screen1 設定：
標題：我愛老虎、背景顏色:橙色、關閉螢幕動畫:垂直滑動、開啟螢幕動畫:水平滑動、螢幕方向:鎖定直式畫面、允許捲動:取消核選。
2.介面設計：
上傳 <tiger1.jpg> [60X60]及 <tiger-2.png>[160X160]。
建立垂直配置1元件：水平對齊:置中、垂直對齊:置中、高度:180像素、寬度:填滿。
建立圖像1元件：高度:160像素、寬度:160像素、圖片:tiger-2.png。
建立垂直配置2元件：水平對齊:置中、垂直對齊:置中、高度:填滿、寬度:填滿。
建立按鈕1元件：重新命名:認識虎仔、字體大小:20、文字:認識新朋友-虎仔、寬度: 200像素、文字對齊:置中。
建立按鈕2元件：重新命名:線上看虎仔、字體大小:20、文字:線上看虎仔、寬度: 200像素、文字對齊:置中。

建立按鈕3元件：重新命名:可愛虎仔相簿、字體大小:20、文字:可愛虎仔相簿、寬度: 200像素、文字對齊:置中。
建立按鈕4元件：重新命名:來去找虎仔、字體大小:20、文字:來去找虎仔、寬度: 200像素、文字對齊:置中。

建立Activity啟動器1元件。

3.建立三個 Screen 頁面：ScreenAbout、ScreenPhoto 及 ScreenSearch。
ScreenAbout 頁面設定：標題：認識虎仔、背景顏色:橙色、關閉螢幕動畫:水平滑動、開啟螢幕動畫:水平滑
動、螢幕方向:鎖定直式畫面、允許捲動:取消核選。
建立水平配置1元件：、高度:60像素、寬度:填滿。
建立圖像1元件：寬度:60像素、圖片:tiger1.jpg。
建立標籤1元件：粗體 :核選、字體大小:20、文字:認識虎仔、文字對齊:置中、寬度:填滿。建立按鈕1元件
：背景顏色:黑色、粗體:核選、高度:50像素、寬度:50像素、形狀:橢圓、文字:首頁、文字顏色:白色。
建立網路瀏覽器1元件。

4.ScreenPhoto 及 ScreenSearch 頁面介面設計與 ScreenAbout 完全相同。

5.ScreenAbout 頁面網路瀏覽器1元件的首頁地址性值：
https://zh.m.wikipedia.org/wiki/%E8%99%8E

ScreenPhoto 頁面網路瀏覽器1元件的首頁地址屬性值：https://www.google.com.tw/search?safe=off&hl=zh-TW&biw=1821&bih=825&site=imghp&tbm=isch&sa=1&ei=1OsrW4rNF5Lu-QbZnYrwCA&q=%E8%80%81%E8%99%8E&oq=%E8%80%81%E8%99%8E&gs_l=img.3..35i39k1j0l9.2624.9487.0.10191.15.8.5.2.3.0.54.327.7.7.0....0...1c.1j4.64.img..1.14.353.0..0i30k1j0i24k1.0.dmNh877PVOQ

ScreenSearch 頁面網路瀏覽器1元件的首頁地址屬性值：https://www.google.com/maps/place/%E8%87%BA%E5%8C%97%E5%B8%82%E7%AB%8B%E5%8B%95%E7%89%A9%E5%9C%92/@24.9988551,121.5788645,17z/data=!3m1!4b1!4m5!3m4!1s0x3442aa604a32818f:0xaafe06fd09b4d766!8m2!3d24.9988551!4d121.5810585

程式設計:

Screen1 的拼塊

7.ScreenAbout、ScreenPhoto 及 ScreenSearch的拼塊都相同：

執行畫面:

s810802 發表在痞客邦留言(0) 人氣()

May 31 Thu 2018 23:56
【App Inventor 2 其他範例 2018 】O06 播放影片 (O06_2018)

【App Inventor 2 其他範例 2018 】O06 播放影片 (O06_2018)

畫面編排:

介面設計：
1.上傳 <1.mp4> 及 <2.mp4>。
2.建立影片播放器元件：高度:240像素、寬度:填滿。
3.建立水平配置元件：寬度:填滿。
4.建立按鈕元件：字體大小:20、粗體:選取、文字:影片一、寬度:填滿。
5.建立按鈕元件：字體大小:20、粗體:選取、文字:影片二、寬度:填滿。
6.建立按鈕元件：重新命名:播放、字體大小:20、粗體:選取、文字:播放、寬度:填滿。

程式設計:

執行畫面:

s810802 發表在痞客邦留言(0) 人氣()

REF: https://book1.17coding.net/chapter2.html

May 31 Thu 2018 23:52
【App Inventor 2 其他範例 2018 】O04 照相機 (O04_2018)

【App Inventor 2 其他範例 2018 】O04 照相機 (O04_2018)

畫面編排:

程式設計:

執行畫面:

s810802 發表在痞客邦留言(0) 人氣()

May 29 Tue 2018 23:39
【App Inventor 2 其他範例 2018 】O05 鋼琴(O05_2018)

【App Inventor 2 其他範例 2018 】O05 鋼琴(O05_2018)

畫面編排:

1.標題：小鋼琴家、螢幕方向:鎖定橫向畫面。
2.介面設計：
上傳 <key1.png> 到 <key3.png>、<Do.mp3> 到 <Si.mp3>。
建立水平配置，水平對齊:置中、寬度:填滿、高度:自動。
建立按鈕元件：圖像: key1.png、文字:無、寬度:50像素、高度:240像素。
再建立六個按鈕元件，名稱為 Button2 到 Button7：圖像屬性依次為 key2.png、key3.png、key1.png、key2.png、key2.png、key3.png，其餘屬性與 Button1 相同。
建立七個 Sound 元件。

程式設計:

執行畫面:

s810802 發表在痞客邦留言(0) 人氣()

May 25 Fri 2018 00:09
【App Inventor 2 其他範例 2018 】O03 打磚塊 (O03_2018)

【App Inventor 2 其他範例 2018 】O03 打磚塊 (O03_2018)

畫面編排:

介面設計：
1.上傳圖檔 <cube.png>。
2.建立標籤元件：粗體、字體大小:20、文字:得分、文字顏色: 藍色。
3.建立畫布元件：背景顏色:淺灰、寬度: 填滿、高度:300。
4.建立圖像精靈元件：圖片:cube.png、X:130、Y:7。
5.建立球形精靈元件：畫筆顏色:紅色、半徑:9、X:160、Y:280。
6.建立按鈕元件：粗體、字體大小:20、文字:開始遊戲。

程式設計:

執行畫面:

s810802 發表在痞客邦留言(0) 人氣()

May 17 Thu 2018 22:43
【App Inventor 2 初學者範例 2018 】BA03 打地鼠 MoleMash (BA03_2018)

【App Inventor 2 初學者範例 2018 】BA03 打地鼠 MoleMash (BA03_2018)

說明：在"打地鼠"遊戲中，一隻地鼠在草原上隨機位置上彈出，玩家在地鼠消失之前擊中得分。本課程練習如何建構地鼠作為使用動畫的簡單遊戲的範例。

畫面編排:

地鼠36X42 png檔

[程式設計：]

介紹：本遊戲，讓地鼠每半秒鐘移動一次。如果被觸摸，分數增加1，產生振動。按重新啟動將分數重置為零。

本範例使用：
圖像精靈
定時器和時鐘組件
程序
選擇0到1之間的隨機數
文本塊
typeblocking
範例中幾個組件：
一個名為“畫布300X300”的畫布。這是地鼠移動的區域。
一個名為“分數”的標籤，顯示得分，即玩家擊中地鼠的次數。
一個按鈕命名為“再玩一次”。
將這些組件從組件面板拖到查看器上並分配它們的名稱。將“畫布300X300”放在頂部，並將它的尺寸設置為300像素寬300像素高。將分數”的文本設置為“得分”。將"再玩一次”的文本設置為“再玩一次”。還要添加一個音效組件並將其命名為“震動”。您將使用震動來使手機在摩爾撞擊時發生振動。

計時器和時鐘組件：
你需要安排地鼠週期性地跳躍，並且你會在計時器組件的幫助下做到這一點。計時器組件提供了處理時間的各種操作，比如告訴你日期是什麼。在這裡，你將使用該組件作為計時器，在常規內部觸發。觸發時間間隔由計時器的計時間隔屬性決定。拖出一個計時器組件; 它將進入不可見的組件區域。將其命名為“地鼠計時器”。將其計時間隔設置為500毫秒以使鼴鼠每半秒移動一次。確保已選中啟用計時。

執行畫面:

]

s810802 發表在痞客邦留言(0) 人氣()

May 15 Tue 2018 00:01
【App Inventor 2 初學者範例 2018 】BA06 照片撥打電話 PicCall (BA06_2018)

【App Inventor 2 初學者範例 2018 】BA06 照片撥打電話 PicCall (BA06_2018)

畫面編排:

程式設計:

執行畫面:

s810802 發表在痞客邦留言(0) 人氣()

【App Inventor 2 其他範例 2018 】

May 09 Wed 2018 23:54
【App Inventor 2 其他範例 2018 】O02 BMI(身體質量指數)計算機 (O02_2018)

【App Inventor 2 其他範例 2018 】O02 BMI(身體質量指數)計算機 (O02_2018)
畫面編排:

程式設計:

BMI身高體重指數（又稱身體質量指數，英文為Body Mass Index，簡稱BMI）是一個計算值，主要用於統計用途。

BMI = 體重(以公斤為單位) / 身高²(以公尺²為單位)

例如：一個70公斤的人，身高是170公分，則BMI為

70(公斤)/1.70²( 公尺²)= 24.22

體重正常範圍為 BMI=18.5～25

BMI<18.5，請輸出“體重過輕”。

18.5≦BMI<25，請輸出“標準體重”。
25≦BMI<30，請輸出“過重”。
BMI≧30，請輸出“肥胖家族”。

執行畫面:

s810802 發表在痞客邦留言(0) 人氣()

May 04 Fri 2018 00:32
【App Inventor 2 其他範例 2018 】O01 地圖簡易版GoogleMap (O01_2018)

【App Inventor 2 其他範例 2018 】O01 地圖簡易版GoogleMap (O01_2018)

畫面編排:

程式設計:

執行畫面:

s810802 發表在痞客邦留言(0) 人氣()

http://appinventor.mit.edu/explore/ai2/hellopurr.html

Apr 14 Sat 2018 00:18
【App Inventor 2 基礎範例 2018 】BA01 您好喵咪 HelloPurr (BA01_2018)

【App Inventor 2 基礎範例 2018 】BA01 您好喵咪 HelloPurr (BA01_2018)

畫面編排:

素材:

圖片:(按右鍵,另存新檔)
http://appinventor.mit.edu/explore/sites/all/files/ai2tutorials/helloPurr/kitty.png
貓叫聲 :(按右鍵,另存新檔)
http://appinventor.mit.edu/explore/sites/all/files/ai2tutorials/helloPurr/meow.mp3

各種聲音音效
http://www.mcjh.kl.edu.tw/usr/wdh/techedu/wavsound/index.html

各種聲音
http://www.mcjh.kl.edu.tw/usr/wdh/techedu/wavsound/index.html
程式設計:

執行畫面:

ref:

s810802 發表在痞客邦留言(0) 人氣()

Apr 08 Sun 2018 17:19
【App Inventor 2 其他範例 2018 】

【App Inventor 2 其他範例 2018 】

O01 地圖簡易版GoogleMap

O02 BMI(身體質量指數)計算機

s810802 發表在痞客邦留言(0) 人氣()

Apr 07 Sat 2018 20:39
【App Inventor 2 初學者範例 2018 】BE01 文字轉語音 TalkToMe Text-to-Speech (BE01_2018)

【App Inventor 2 初學者範例 2018 】BE01 文字轉語音 TalkToMe Text-to-Speech (BE01_2018)

畫面編排:

程式設計:

執行畫面:

參考資料:
http://appinventor.mit.edu/explore/sites/all/files/hourofcode/TalkToMePart1.pdf

【App Inventor 2 初學者範例 2018 】

s810802 發表在痞客邦留言(0) 人氣()

Apr 06 Fri 2018 23:11
【App Inventor 2 進階範例 2018 】

【App Inventor 2 進階範例 2018 】

A01 Colored Dots for App Inventor 2
A02 Pizza Party with Fusion Tables for App Inventor 2
A03 NFC Cup Game for AI2
A04 Android, Where's My Car? for App Inventor 2
A05 Map It: Displaying Locations on a Google Map
A06 Exploring with Location Sensor in AI2
A07 Oh My Spikes
A08 WebView Javascript Processor for App Inventor
A09 Firebase Authentication in App Inventor Using Javascript

http://s810802.pixnet.net/blog/post/56606178

http://appinventor.mit.edu/explore/ai2/tutorials4658.html?page=2

s810802 發表在痞客邦留言(0) 人氣()