App Inventor學習記錄 26,利用網路瀏覽器顯示 GIF圖片

我們知道 APP INVENTOR目前不支援 GIF圖片的上傳,那我們真的有需求使用 GIF檔的話,有兩種方式可以解決,第 1種是利用外掛,第 2種是就是利用網路瀏覽器的功能來顯示 GIF圖檔

記錄一下:
App Inventor學習記錄 26,利用網路瀏覽器顯示 GIF圖片


程式執行的時候是這樣子,畫面中間是圖片,可以按按鈕來切換不同的圖片。


畫面編排的部份。重點要在網路瀏覽器這一個元件。


全部的程式碼是這樣子的。


第 1部份的程式碼說明:

建立 2個清單:
”GIF清單”這個清單中這放了 4個 GIF的網址。
”GIF名稱”這個清單中,放了這 4個 GIF檔的說明。

這裡補充一下,我是把 GIF的圖檔上傳到 BLOGGER上面,再從那裡複製連結果來的


第 2部份的程式碼說明:

再設定一個變數叫 “項次“,它的預設值是 0。
當 Screen1.初始化的時候:
把 “網路瀏覽器1.首頁地址”,設定為空白,讓它不顯示。
把 “global 項目”的值,設定為 1。


第 3部份的程式碼說明:

當下一張按鈕被點擊之後:
加入一個流程判斷,如果 global項次的值等於 4的話
把 ”網路瀏覽器.首頁地址”,設定為 “global gif清單”中第 “global 項次”項。
把 “標籤 1.文字”,設定為 “global gif名稱”中第 “global 項次”項。
把 “global 項次”設定為 1。

不然的話,指 “global 項次”不等於 4的時候。
把 ”網路瀏覽器.首頁地址”,設定為 “global gif清單”中第 “global 項次”項。
把 “標籤 1.文字”,設定為 “global gif名稱”中第 “global 項次”項。
把 “global 項次”設定為 “global項次” + 1。


第 4段程式碼說明:

當上一張按鈕被點擊之後:
加入一個流程判斷,如果 global項次的值等於 1的話
把 ”網路瀏覽器.首頁地址”,設定為 “global gif清單”中第 “global 項次”項。
把 “標籤 1.文字”,設定為 “global gif名稱”中第 “global 項次”項。
把 “global 項次”設定為 4。

不然的話,指 “global 項次”不等於 1的時候。
把 ”網路瀏覽器.首頁地址”,設定為 “global gif清單”中第 “global 項次”項。
把 “標籤 1.文字”,設定為 “global gif名稱”中第 “global 項次”項。
把 “global 項次”設定為 “global項次” – 1。


用網路瀏覽器來放 gif檔的話,會有幾個問題沒有辦法解決:
1.瀏覽器的背景太明顯
2.gif的大小很難跟網路瀏覽器配的上
3.沒有網路的話,就看不到圖檔

這些是把網路瀏覽器元件拿來放 gif檔的問題。除了這個方法之外,也有一個外掛是可以拿來放 GIF檔。這個部份下次再給大家做介紹。

這次的 aia檔的下載連結如下:
點我下載 NO_26_Show_gif_1.aia

之前介紹過的一些 appinventor的使用記錄,都整理在下面這個頁面上了。
APP INVENTOR學習記錄及資源整理頁面

發表迴響