目前分類:未分類文章 (20)

瀏覽方式: 標題列表 簡短摘要

【App Inventor 2 初學者 範例 2018 】BA07 您好小蜜蜂 Hello Codi! (BA07_2018)

畫面編排:

BA07-01.jpg

本例題素材:
蜜蜂圖片
http://appinventor.mit.edu/explore/sites/all/files/ai2tutorials/helloCodi/codi.jpg

蜜蜂聲音
http://appinventor.mit.edu/explore/sites/all/files/ai2tutorials/helloCodi/Bee-Sound.mp3

程式設計:

BA07-02.jpg
執行畫面:

BA07-03.jpg

ref:
http://appinventor.mit.edu/explore/ai2/hello-codi.html


【App Inventor 2 基礎 範例 2018 】

文章標籤

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

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

畫面編排:

BA05-01.jpg
程式設計:

BA05-02.jpg

BA05-03.jpg
執行畫面:

BA05-04.jpg

BA05-05.jpg

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


【App Inventor 2 基礎 範例 2018 】

文章標籤

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

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

畫面編排:

BA04-01.jpg
程式設計:

BA04-02.jpg

BA04-03.jpg
執行畫面:

BA04-04.jpg

BA04-05.jpg

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


【App Inventor 2 基礎 範例 2018 】
 

文章標籤

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

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

畫面編排:

BA02-01.jpg

本範例的素材:

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

茶匙敲叮噹響聲音
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.jp
g

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

程式設計:

BA02-02.jpg
執行畫面:

BA020-03.jpg

BA020-04.jpg

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

文章標籤

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

【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元件。

o07-1.jpg

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

o07-2.jpg

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

o07-3.jpg

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

o07-4.jpg


程式設計:

Screen1 的拼塊

 

o07.jpg

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

o07-6.jpg


執行畫面:

o07-A.jpg

o07-B.jpg

o07-c.jpg

o07-d.jpg

o07-e.jpg

【App Inventor 2 教學 範例 2018 】

文章標籤

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

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

畫面編排:

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

o06-01.jpg
程式設計:

o06-02.jpg
執行畫面:

o06-03.jpg

o06-04.jpg

o06-05.jpg

【App Inventor 2 教學 範例 2018 】

文章標籤

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

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

畫面編排:

O04-01.jpg
程式設計:

O04-02.jpg

O04-03.jpg
執行畫面:

O04-04.jpg

O04-05.jpg

HW12-05.jpg

 

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

【App Inventor 2 教學 範例 2018 】

 

文章標籤

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

【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 元件。

O05-01.jpg

程式設計:

O05-02.jpg
執行畫面:

O05-03.jpg

【App Inventor 2 教學 範例 2018 】

文章標籤

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

【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、文字:開始遊戲。

o03-01.jpg

程式設計:

o03-02.jpg

ssss.jpg


執行畫面:

o03-04.jpg

 

o03-05.jpg

 

o03-06.jpg

 


【App Inventor 2 教學 範例 2018 】

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

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

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

畫面編排:

BA03-01.jpg

地鼠36X42 png檔


[程式設計 :]

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

本範例使用:
圖像精靈
定時器和時鐘組件
程序
選擇0到1之間的隨機數
文本塊
typeblocking

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

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

BA03-02.jpg
BA03-03.jpg

執行畫面:

BA03-04.jpg

BA03-05.jpg]

BA03-06.jpg

 

【App Inventor 2 基礎 範例 2018 】
 

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

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

畫面編排:

BA06-01.jpg
程式設計:

BA06-02.jpg
執行畫面:

BA06-03.jpg

 

【App Inventor 2 基礎 範例 2018 】
 

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

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

O02-01.jpg

程式設計:

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

BMI = 體重(以公斤為單位) / 身高2(以公尺2為單位)
例如:一個70公斤的人,身高是170公分,則BMI為
70(公斤)/1.702 ( 公尺)= 24.22
體重正常範圍為  BMI=18.5~25 
BMI<18.5,請輸出“體重過輕”。
18.5≦BMI<25,請輸出“標準體重”。
25
BMI<30,請輸出“過重”。 
 BMI≧30,請輸出“肥胖家族”。
BMI.jpg

O02-02.jpg

O02-03.jpg
執行畫面:

O02-03.jpg

O02-04.jpg


【App Inventor 2 其他 範例 2018 】

文章標籤

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

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

畫面編排:

HW08-01.jpg
程式設計:

O01-02.jpg
執行畫面:
HW08-03.jpg

O01-04.jpg

【App Inventor 2 教學 範例 2018 】

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

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

畫面編排:

BA01-02.jpg

素材:

圖片:(按右鍵,另存新檔)
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

程式設計:

HW01-03.jpg
執行畫面:

BA01-04.jpg

ref:

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

【App Inventor 2 基礎 範例 2018 】

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

【App Inventor 2 其他 範例 2018 】

O01 地圖簡易版GoogleMap

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

O03 打磚塊

O04 照相機

O05 鋼琴

O06 播放影片

O07 我愛動物

 

【App Inventor 2 教學 範例 2018 】

 

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

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

畫面編排:

 

BE01-03.jpg

 

程式設計:

 

BE01-02.jpg

執行畫面:

 

 

OUT1.jpg

 

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

 

【App Inventor 2 初學者 範例 2018 】

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

【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

【App Inventor 2 教學 範例 2018 】

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

【App Inventor 2 中階 範例 2018 】

I01 Get the Gold for App Inventor 2
I02 Paint Pot Extended with Camera (AI2)
I03 Mole Mash 2 with Sprite Layering for App Inventor 2
I04 VideoWall for App Inventor 2
I05 StockQuotes for App Inventor 2
I06 Mini Golf: Fling, TouchUp, TouchDown Gestures for App Inventor 2
I07 Space Invaders
I08 No Text While Driving for AI2
I09 QuizMe for App Inventor 2
I10 Sharing Component: send files and text with the app of your choice
I11 Photo Booth App
I12 LEGO ® EV3 Tilt-to-Drive Tutorial
I13 Lego EV3 Pet Robot
I14 LEGO EV3 Color Search

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

http://appinventor.mit.edu/explore/ai2/tutorials.html#

【App Inventor 2 教學 範例 2018 】

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

【App Inventor 2 基礎 範例 2018 】

BA01 您好喵咪 HelloPurr
BA02 魔術8號球 Magic 8 Ball
BA03 打地鼠 MoleMash 
BA04 照片塗鴉1 PaintPot (Part 1) 
BA05 照片塗鴉2 PaintPot (Part 2) 
BA06 照片撥打電話 PicCall
BA07 您好小蜜蜂 Hello Codi!

http://appinventor.mit.edu/explore/ai2/tutorials.html#

【App Inventor 2 教學 範例 2018 】

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

【App Inventor 2 初學者 範例 2018 】

BE01 文字轉語音 TalkToMe Text-to-Speech 
BE02 擴充文字轉語音(搖晃) Extended TalkToMe : Shake!
BE03 彈跳球 BallBounce Game
BE04 數位塗鴉畫圖 DigitalDoodle Drawing

【App Inventor 2 教學 範例 2018 】

 

 

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

您尚未登入,將以訪客身份留言。亦可以上方服務帳號登入留言

請輸入暱稱 ( 最多顯示 6 個中文字元 )

請輸入標題 ( 最多顯示 9 個中文字元 )

請輸入內容 ( 最多 140 個中文字元 )

請輸入左方認證碼:

看不懂,換張圖

請輸入驗證碼