PRAKTIKUM MULTIMEDIA MODUL VI CREATING A SIMPLE COMPANY PROFILE AND QUIZ IN FLASH WITH ACTIONSCRIPT
Disusun Oleh : Munengsih Sari Bunga
POLITEKNIK INDRAMAYU 2012
POLITEKNIK INDRAMAYU 2 Munengsih Sari Bunga
MODUL VI CREATING A SIMPLE COMPANY PROFILE AND QUIZ IN FLASH WITH ACTIONSCRIPT
A. TUJUAN Pada modul 6, akan membuat company profile dan quiz sederhana, dengan tujuan agar mahasiswa : •
Dapat mengetahui bagaimana cara membuat company profile dan quiz sederhana.
•
Dapat membuat menu sederhana dalam Flash dengan Actionscript 2.0 dan 3.0.
B. TEORI Pada praktikum ini akan membahas mengenai bagaimana cara membuat company profile dan quiz sederhana secara singkat untuk bisa dikembangkan lebih lanjut agar terlihat lebih kompleks dan menarik lagi. Dan juga akan membuat menu untuk membangun company profile dan quiz sederhana dalam Flash dengan Actionscript 2.0 dan 3.0.
Final Result Hasil akhir dari praktikum ini adalah Flash menu yang dapat memuat teks, gambar atau file SWF, seperti ini:
Gambar 1
POLITEKNIK INDRAMAYU 3 Munengsih Sari Bunga
C. PRAKTEK CREATING A SIMPLE COMPANY PROFILE Step 0 – Memulai 1. Hal pertama adalah membuat file baru Flash File (Action Script 2.0)
2. Kemudian buat stage dengan dimensi 800 x 600 dan FPS = 12 serta beri warna Background dengan warna abu-abu (#999999):
3. Simpan file dalam folder Praktikum MM Modul 6 dengan nama "companyprofile".
Step 1 – Buat Tombol 1. Selanjutnya kita akan membuat empat buah tombol. 2. Klik Rectangle Tool (R), buatlah obyek persegi. Pilih obyek persegi lalu ubah ukuran pada Properties Position And Size = 120 x 40. 3. Klik Paint Bucket Tool, beri warna contohnya seperti gambar berikut:
POLITEKNIK INDRAMAYU 4 Munengsih Sari Bunga 4. Kemudian pilih objek dengan Selection Tool (V) lalu ubah ke symbol button tekan F8,
beri nama ‘home’ lalu pilih Type = Button, tekan OK.
5. Objek masih dalam keadaan terpilih, pilih menu Edit > Edit Symbol. Setelah masuk ke mode edit symbol, Klik Text Tool (T) buat Static Text dengan ukuran 20pt dan warna teks putih, buat teks HOME lalu posisikan ditengah objek persegi.
6. Klik di Frame Over lalu masukan Keyframe (F6). Pilih teks lalu ubah ukuran menjadi 22pt dan ubah warna menjadi kuning.
7. Klik di Frame Down masukan Keyframe dan ubah ukuran teks menjadi 20 dan ubah warna menjadi putih.
POLITEKNIK INDRAMAYU 5 Munengsih Sari Bunga
8. Tekan tombol Ctrl+E untuk kembali ke modus edit document. Pilih tombol home pada Library (jika belum terbuka, pilih menu Window > Library).
9. Klik kanan pada tombol home di Library lalu pilih Duplicate, ubah nama menjadi profile, tekan OK. Maka dalam Library terdapat dua buah tombol.
10. Pilih tombol profile lalu seret masukan kedalam Stage dan posisikan seperti gambar berikut.
11. Pilih tombol profile pada Stage lalu pilih menu Edit > Edit Symbol. Klik di Frame UP lalu ubah teks menjadi PROFILE, ubah juga teks HOME menjadi PROFILE pada Frame Over dan Down.
POLITEKNIK INDRAMAYU 6 Munengsih Sari Bunga
12. Pilih tombol profile pada Library lalu lakukan Duplicate dan beri nama galery. Seret masukan tombol ke dalam Stage dengan posisi dibawah tombol profile.
13. Klik tombol galery lalu masuk ke modus edit symbol. Ubah semua tulisan yang ada pada Frame Up, Over dan Down menjadi GALERY. Setelah selesai, kembali ke modus edit document. 14. Lakukan Duplicate pada tombol dalam Library dan beri nama contact. Seret tombol contact ke dalam Stage dengan posisi di bawah tombol galery.
15. Pilih tombol contact lalu masuk ke modus edit symbol, ubah semua teks pada Frame Up, Over dan Down menjadi CONTACT. Kembali ke modus edit document dan lihat hasilnya.
Step 2 – Buat Konten Menu 1. Kemudian klik Rectangle Tool (R), pada Rectangle Option masukan nilai 15 agar objek mempunyai sudut tumpul. Buat objek persegi tanpa Stroke color dan Fill color warna hitam di Stage. Lalu pilih objek persegi dengan Selection Tool (V), atur ukuran persegi pada Properties Position And Size, atur pengaturan seperti gambar berikut.
POLITEKNIK INDRAMAYU 7 Munengsih Sari Bunga
2. Objek masih dalam keadaan terpilih, tekan F8 untuk merubah ke simbol, beri nama ‘info dan pilih Type = Movie Clip.
3. Dengan objek masih dalam keadaan terpilih, pilih menu Edit > Edit Symbol untuk masuk ke modus edit symbol. 4. Klik di Frame 1, tekan tombol F6 sebanyak tiga kali untuk memasukan Keyframe. Sehingga terdapat empat buah Keyframe pada Timeline.
5. Kemudian klik di Frame 1, lalu dengan Text Tool tuliskan kalimat ‘Selamat Datang di Halaman Home’ dengan jenis font Arial bold (tebal), size=22, warna=abu-abu/putih dan Align Center. Posisikan seperti gambar berikut
6. Klik di Frame 2 lalu dengan pengaturan teks yang sama, tuliskan ‘Selamat Datang di Halaman Profile’. Pada Frame 3 tuliskan ‘Selamat Datang di Halaman Galery’ dan di Frame 4 tuliskan ‘Contact Me’.
POLITEKNIK INDRAMAYU 8 Munengsih Sari Bunga
Step 3 – Frame Kode 1. Klik lagi di Frame 1 lalu buka panel Actions kemudian tuliskan script berikut. stop();
2. Kembali ke modus edit document. 3. Klik atau pilih Movie Clip info lalu pada Properties di bagian Instance Name tuliskan ‘info’.
4. Kemudian pilih tombol HOME lalu buka panel Actions, tuliskan script berikut.
5. Kemudian untuk script pada ketiga tombol lainnya secara berurutan adalah sebagai berikut. 6. Tombol PROFILE :
Tombol GALERY :
Tombol CONTACT :
7. Untuk melihat hasilnya tekan Ctrl+Enter. Klik tombol Profile maka halaman akan menuju ke frame halaman profile, begitu juga jika klik tombol yang lainnya maka akan menuju ke sebuah informasi sesuai dengan tombolnya.
POLITEKNIK INDRAMAYU 9 Munengsih Sari Bunga
CREATING A SIMPLE QUIZ 1.
Pertama, buka Adobe Flash CS4. Lalu File Æ New Æ Flash File (ActionScript 3.0) Æ OK
2.
Buatkan 2 Layer: Content dan Actions
3.
Arahkan cursor ke frame 1 pada layer Content , lalu klik kanan dan pilih insert keyframe.
POLITEKNIK INDRAMAYU 10 Munengsih Sari Bunga
4.
Pada frame dan layer tersebut, buatkan beberapa properti sebagai berikut :
Masing-masing properti yang terdiri dari text dan button itu, atur propertisnya menjadi sebagai berikut:
POLITEKNIK INDRAMAYU 11 Munengsih Sari Bunga
Setelah selesai semua properti dibuat pada frame 1 layer content, maka selanjutnya pindah ke frame 2 pada layer content. Klik kanan dan pilih insert keyframe. 5.
Buatkan properti seperti berikut :
Atur propertisnya sebagai berikut :
POLITEKNIK INDRAMAYU 12 Munengsih Sari Bunga
6.
Pindah ke frame 1 pada layer Actions, arahkan cursor pada frame tersebut lalu klik kanan dan pilih Actions. Tuliskan script berikut :
POLITEKNIK INDRAMAYU 13 Munengsih Sari Bunga
7.
Arahkan cursor ke frame 2 pada layer content, klik kanan dan pilih insert keyframe
8.
Lalu klik kanan kembali dan pilih Actions. Tuliskan script berikut :
9.
Selesai. Simpan dengan nama "Start_Quiz_App". File Æ Save.
10. Tekan CTRL+Enter untuk melihat hasilnya. Maka akan terlihat seperti gambar berikut :
D. LATIHAN Buatlah company profile dan quiz sederhana menggunakan cara yang sama dengan salah satu dari praktek yang telah Anda lakukan, lalu tuliskan langkah-langkahnya. E. TUGAS Buatlah animasi menggunakan cara yang tidak sama dengan salah satu dari praktek yang telah Anda lakukan, lalu tuliskan apa yang ingin anda kerjakan dan langkah-langkahnya.
