LEMBAR KERJA PESERTA DIDIK (LKPD)

Mata Pelajaran

Multimedia / Animasi Interaktif / Desain Komunikasi Visual (DKV)

Kelas / Semester

XI / Genap

Judul Kegiatan

Membuat Aplikasi Portofolio Interaktif Menggunakan Adobe Animate 2022

A. Capaian Pembelajaran (CP)

Pada akhir fase F, peserta didik Program Keahlian Desain Komunikasi Visual mampu menerapkan prinsip desain komunikasi visual, memanfaatkan perangkat lunak desain dan animasi, serta menghasilkan karya visual digital yang komunikatif, kreatif, dan sesuai kebutuhan industri kreatif.

B. Tujuan Pembelajaran (TP)

Setelah mengikuti kegiatan pembelajaran ini, peserta didik kelas XI DKV SMKN 1 Pengasih diharapkan mampu:

1. Menganalisis fungsi portofolio digital sebagai media personal branding di bidang DKV.
2. Menggunakan Adobe Animate 2022 untuk membuat aplikasi portofolio interaktif berbasis HTML5.
3. Menerapkan prinsip tata letak, warna, dan tipografi dalam desain antarmuka.
4. Membuat navigasi interaktif menggunakan scene dan tombol.
5. Menyajikan karya portofolio secara runtut, informatif, dan estetis.
6. Mempublikasikan aplikasi portofolio dalam format digital dengan benar.

B. Alat dan Bahan

1. Komputer/Laptop
2. Perangkat lunak Adobe Animate 2022
3. Mouse dan Keyboard
4. Aset pendukung:
   • Foto diri
   • Ikon atau ilustrasi
   • Teks profil dan deskripsi karya
   • Logo (jika ada)

C. Deskripsi Kegiatan

Pada kegiatan ini, peserta didik akan membuat aplikasi portofolio interaktif sebagai media untuk menampilkan identitas diri, kemampuan, dan hasil karya. Aplikasi dibuat menggunakan Adobe Animate 2022 dengan beberapa halaman (scene) yang saling terhubung melalui tombol navigasi.

D. Langkah Kerja Bertahap

1. Persiapan Dokumen

1. Buka aplikasi Adobe Animate 2022.
2. Pilih Create New → HTML5 Canvas.
3. Atur ukuran stage Full HD (contoh: 1920 × 1080 piksel).
4. Simpan file dengan nama: fla.

2. Membuat Struktur Scene

1. Buka panel Scene (Window → Scene).
2. Buat minimal 4 scene, yaitu:
   • Home / Profil
   • Tentang Saya
   • Karya / Portofolio
   • Kontak

3. Mendesain Tampilan Setiap Scene

1. Gunakan Text Tool untuk menuliskan identitas diri dan deskripsi.
2. Impor gambar melalui menu File → Import → Import to Stage.
3. Atur tata letak, warna, dan tipografi agar konsisten.
4. Pastikan setiap scene memiliki tampilan yang jelas dan mudah dipahami.

4. Membuat Tombol Navigasi

1. Buat objek tombol (persegi, lingkaran, atau ikon).
2. Ubah objek menjadi Button Symbol (Convert to Symbol → Button).
3. Beri nama tombol sesuai fungsinya (Home, Tentang, Karya, Kontak).
4. Tambahkan aksi klik untuk berpindah antar scene.

5. Uji Coba Aplikasi

1. Jalankan aplikasi dengan Control → Test (Ctrl + Enter).
2. Periksa fungsi tombol navigasi.
3. Perbaiki kesalahan tampilan atau fungsi jika masih terdapat error.

6. Publikasi Hasil (HTML5)

1. Pilih menu File → Publish Settings.
2. Pastikan format HTML5 Canvas
3. Klik Publish untuk menghasilkan file HTML.

7. Publikasi Menjadi File APK (Android)

Pada tahap ini, aplikasi portofolio akan dikonversi menjadi file APK agar dapat dijalankan pada perangkat Android.

Langkah Kerja: 1. Pastikan proyek telah berhasil dipublish dalam format HTML5. 2. Siapkan folder hasil publish (berisi file .html, .js, dan folder assets). 3. Gunakan salah satu metode berikut:

Metode A – WebView APK Builder (disarankan untuk pembelajaran) - Buka aplikasi Website to APK Builder atau WebViewGold. - Pilih folder hasil publish HTML5. - Atur nama aplikasi, ikon, dan orientasi layar. - Klik Build APK.

Metode B – Adobe AIR (opsional) - Pilih Create New → AIR for Android. - Impor aset portofolio ke dalam proyek. - Atur Application Settings (nama aplikasi, ikon, versi). - Klik Publish → APK.

4. Setelah file APK terbentuk, lakukan instalasi dan uji coba pada smartphone Android.
5. Pastikan navigasi, tampilan, dan konten berjalan dengan baik.

E. Tugas Peserta Didik

1. Membuat aplikasi portofolio interaktif minimal 4 scene.
2. Menampilkan identitas diri secara lengkap.
3. Menampilkan minimal 3 karya terbaik.
4. Menggunakan tombol navigasi yang berfungsi dengan baik.
5. Mendesain aplikasi dengan tampilan rapi dan konsisten.

F. Hasil yang Dikumpulkan

1. File proyek Adobe Animate (.fla).
2. Folder hasil publish HTML5.
3. File aplikasi Android (.apk).
4. Screenshot tampilan aplikasi di smartphone.

G. Rubrik Penilaian (Skala 1–4)

H. Refleksi Peserta Didik

Jawablah pertanyaan berikut dengan jujur:

1. Hal baru apa yang kamu pelajari dari kegiatan ini?
2. Kesulitan apa yang kamu alami saat membuat aplikasi portofolio?
3. Bagaimana cara kamu mengatasi kesulitan tersebut?