CARA MEMBUAT TAMPILAN GAMBAR ANIMASI .GIF TANPA FILE HTML DENGAN THUNKABLE

Berita Anda on

Tuesday, July 31, 2018

Berita Anda, Halo Pengunjung blog dimanapun anda berada semoga kalian tetap dalam keadaan sehat, saat ini anda sedang membaca Artikel dengan judul CARA MEMBUAT TAMPILAN GAMBAR ANIMASI .GIF TANPA FILE HTML DENGAN THUNKABLE, semoga bermanfaat dan selamat membaca

File .GIF adalah suatu file yang bertipe gambar atau grafik yang bergerak dengan dalam satuan waktu frame tertentu.

.GIF ini biasanya digunakan untuk pembuka awal sebelum masuki aplikasi, promosi iklan dari suatu produk agar pelanggan tertarik untuk membeli, mempercantikan tampilan desain, dan lainnya.

Disini, saya akan memberikan tutorial untuk membuat gambar animasi .gif tanpa menggunakan file html sebagai perantara untuk menampilkan gambar bergerak tersebut di layar smartphone. Untuk menampilkan gambar bergerak ini menggunakan komponen Web Viewer.

Berikut ini caranya :

1. Aktifkan web browser di komputer atau laptop anda

2. Ketikkan thunkable.com pada address bar. Tunggu sampai halaman utama muncul.

3. Setelah itu, anda diminta login untuk memasuki akses project Thunkable. Klik Sign In. Ini melakukan login melalui Gmail Oauth dengan mengisi akun gmail anda. Tunggu beberapa saat sampai redirect ke homepage.

4. Setelah tampilan halaman utama (homepage) itu, anda akan membuat project baru dengan klik Create New App. Kemudian isikan nama project anda, tapi tidak boleh menggunakan spasi sebagai pemisah kata, sebagai pengganti, menggunakan (_) sebagai pemisah. Misalkan nama project anda itu "Gifimage". Kemudian klik OK. Tunggu beberapa waktu sampai tampilan kerja itu muncul.

Tampilan Pembuatan Project

5. Setelah tampilan kerja muncul, disinilah anda akan merancang tampilan screen, peletakan posisi komponen, atau mengubah tampilan screen.

Tampilan Kerja Utama di Thunkable

6. Anda melakukan penambahan file gambar .gif ke dalam bagian Media dari media penyimpanan di komputer atau laptop. Silahkan klik Upload File, tunggu sampai tampilan pop-up muncul.

7. Pada tampilan pop-up Upload File, silahkan klik OK.

Tampilan Pop-up Upload File

8. Saatnya, anda akan memilih file gambar .gif yang anda inginkan. Usahakan kualitas gambar .gif bagus dan tidak kabur. Setelah file .gif dipilih yang bernama octocat-spinner-128.gif, maka klik Open.

Tampilan Pop-up pada Pemilihan File

Tunggu beberapa saat sampai ada penambahan file tadi di bagian Media. Lihat hasil pada gambar berikut ini.

Tampilan Setelah Ada Penambahan File

9. Silahkan klik bagian User Interface di Pallete, klik tahan dan drag komponen Web Viewer ke tampilan Screen.

Tampilan Klik dan Drag pada Web Viewer

Lihat hasil gambar di bawah ini. Anda tidak usah mengotak-atik Web_Viewer pada bagian Properties. Biarkan saja.

Tampilan Hasil setelah Ditambahkan Web Viewer

10. Setelah itu, anda melakukan perubahan nama variabel pada Web Viewer dari nama variabel semulanya, Web_Viewer1 menjadi nama variabel baru, imggif pada komponen Web Viewer. Silahkan klik Web_Viewer1 di bagian Components, klik Rename. Tunggu sampai tampilan pop-up muncul.

11. Pada tampilan pop-up Rename Component, anda akan mengubah nama variabel lama menjadi baru. Silahkan isikan nama variabel baru pada kolom New name: tanpa menggunakan spasi. Kemudian, klik OK. Tunggu beberapa saat sampai ada perubahan nama variabel pada komponen Web Viewer.

Tampilan Pop-up Rename Component

12. Sekarang, anda akan memasuki bagian Blocks yang dimana akan membuat program melalui programming block, seperti menyusun puzzle. Apabila susunan puzzle itu benar, maka tidak ada muncul error. Silahkan klik Blocks. Tunggu sampai berubah tampilan kerja.

13.Kita melakukan inisialisasi Screen1 agar event dan action pada Screen1 menjadi aktif. Silahkan klik bagian Screen1, klik tahan dan drag puzzle when Screen1.initialize() ke bagian lembaran blocks kosong. Lihat caranya pada gambar di bawah ini.

Tampilan Pada Ketika Klik dan Drag Screen1.Initialize()

Tampilan Setelah Dipindahkan ke Layar Blocks Screen1.Initialize()

14. Disitu, anda bisa mengisi bagian dalam pada Screen1.initialize(). Sekarang anda akan mengisi bagian dalam tersebut dengan Web Viewer sebagai tempa tampilan gambar animasi .gif. Klik bagian imggif, klik tahan dan drag puzzle call imggif.GoToUrl.Url() ke bagian dalam when Screen1.initialize(). Lihat caranya pada gambar di bawah ini.

Tampilan Pada Ketika Klik dan Drag imggif.GoToUrl.url()

Tampilan Setelah Dipindahkan ke Layar Blocks pada imggif

15. Disitu, anda bisa mengisi bagian kosong pada call imggif.GoToUrl.url(). Sekarang, anda akan mengisi bagian kosong tersebut dengan tipe data teks String untuk menampilkan gambar animasi .gif di smartphone Android anda. Klik bagian Text yang kotak warna merah, klik tahan dan drag puzzle teks kosong. Lihat caranya pada gambar di bawah ini.

Tampilan Pada Ketika Klik dan Drag Text Kosong

Tampilan Setelah Dipindahkan ke Layar Blocks pada Teks Kosong

Disitu, anda bisa mengisi teks yang masih kosong. Jadi, anda bisa isikan teks kosong tersebut selama masih support untuk Web Viewer.

16. Silahkan isikan teks kosong tersebut dengan ketikkan "file:///android_asset/ octocat-spinner-128.gif" ke dalam puzzle teks kosong tadi. Lihat caranya pada gambar di bawah ini.

Tampilan Ketika Mengisi Teks untuk Web Viewer

Inilah tampilan hasil keseluruhan dalam membuat dan merancang program block.

Tampilan Hasil Perancangan Susunan Block secara Keseluruhan

Setelah itu, project akan disimpan otomatis selama koneksi internet aktif. Inilah hasil melakukan programming block secara keseluruhan. Apabila ada yang salah atau error, silahkan diperbaiki bagian yang salah atau error tadi.

17. Anda melakukan building dari project ke aplikasi Android .apk, kemudian akan mengunduh atau men-download secara otomatis ke dalam media penyimpanan komputer atau laptop. Silahkan klik Export, klik App (save .apk to my computer).

18. Setelah melakukan unduhan, maka anda bisa memasang hasil aplikasi .apk yang anda buat tadi baik di emulator ataupun smartphone.

Tampilan Hasil Pemasangan Aplikasi .apk

Baca juga :

Pengertian dari Thunkable. Tools yang cocok untuk bagi yang awam pemrograman dalam menciptakan Aplikasi Android dengan mudah.

Sekian dari posting ini... Terima kasih... 

Labels: App Inventor, Tutorial

Thanks for reading CARA MEMBUAT TAMPILAN GAMBAR ANIMASI .GIF TANPA FILE HTML DENGAN THUNKABLE. Please share...!