App Inventor: Menampilkan Gambar Animasi GIF

Published Wednesday, 17 June, 2015 · Updated Saturday, 16 December, 2017

Melanjutkan tutorial App Inventor, stuff kali kita akan belajar menampilkan gambar animasi berekstensi .gif pada screen. Khusus untuk gambar animasi berektensi .gif, prostate kita harus menampilkannya menggunakan komponen WebViewer agar animasi bisa berjalan seperti yang diinginkan.

Setidaknya ada 2 langkah untuk menyisipkan dan menjalankan file gif pada screen:

Membuat file html yang berisi script HTML untuk menampilkan gambar (gif)
Menambahkan komponen webviewer (berisi file html tersebut) pada screen

Sekarang mari kita buat file html terlebih dahulu, search ikuti langkah berikut:

1. Bukalah Notepad/Notepad ++ dan ketikkan script html berikut:

2. Simpanlah dokumen di atas dengan format file .html, misalnya animasi-loading.html

3. Unggahlah file tersebut ke App Inventor dengan memilih tombol Upload File pada bagian Media

Lakukan langkah 3 untuk mengunggah file .gif yang akan ditampilkan pada screen.

Selanjutnya adalah menambahkan Komponen WebViewer untuk menampilkan file HTML yang telah dibuat.

1. Bukalah sebuah project baru dengan memilih tombol New Project dan berilah nama sesuai dengan yang diinginkan, atau anda bisa memodifikasi project SplashScreen anda sebelumnya, seperti pada tampilan berikut:

2. Tambahkan komponen webviewer pada screen dengan memilih dan menariknya (drag) ke screen.

3. Bukalah block editor dan klik komponen Webviewer > pilih Call WebViewer1.GoToUrl

4. Selanjutnya pilih Block Text, a Text String dan ketikkan URL dari dokumen html yang telah dibuat. Tambahkan path file “file:///mnt/sdcard/AppInventor/assets/nama-file-html”.