Membuat Multimedia Interaktif Oleh: Dody Priyatmono, S. Sn A. Tahapan membuat media interaktif Multimedia interaktif berasal dari 2 kata, yaitu: Interkatif dan Multimedia. Interaktif adalah: Tindakan interaksi antara dua atau lebih objek atau orang Multimedia adalah: kumpulan beberapa media yang menjadi 1 media komunikasi public Sehingga yang di maksud dengan multimedia interaktif adalah: Media yang terdiri beberapa elemen (gambar, teks, suara, video, foto) dan mampu berinterkasi dengan penggunanya. Software yang umum di gunakan untuk membuat multimedia interaktif adalah Macromedia Flash dan Macromedia Director (sekarang macromedia berganti menjadi Adobe). Dalam tutorial kali ini saya akan menggunakan software Adobe Flash CS3 sebagai alat untuk membuat multimedia interaktif. Hal yang perlu di persiapkan sebelum bita membuat media interaktif adalah: 1. Membuat site map/mapping Site map adalah sebuah upaya pemetaan isi dari media. Contoh site map: 1 | Page Dody Priyatmono, S. Sn INTRO MENU UTAMA BIODATA GALERI FOTO ARTIKEL FOTO MASA FOTO BERSAMA TEMAN KESEHATA N TIPS UJIAN KELUAR/ EXIT
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Membuat Multimedia InteraktifOleh: Dody Priyatmono, S. Sn
A. Tahapan membuat media interaktif
Multimedia interaktif berasal dari 2 kata, yaitu: Interkatif dan Multimedia.Interaktif adalah: Tindakan interaksi antara dua atau lebih objek atau orangMultimedia adalah: kumpulan beberapa media yang menjadi 1 media komunikasi public
Sehingga yang di maksud dengan multimedia interaktif adalah: Media yang terdiri beberapa elemen (gambar, teks, suara, video, foto) dan mampu berinterkasi dengan penggunanya.
Software yang umum di gunakan untuk membuat multimedia interaktif adalah Macromedia Flash dan Macromedia Director (sekarang macromedia berganti menjadi Adobe).Dalam tutorial kali ini saya akan menggunakan software Adobe Flash CS3 sebagai alat untuk membuat multimedia interaktif.
Hal yang perlu di persiapkan sebelum bita membuat media interaktif adalah:1. Membuat site map/mapping
Site map adalah sebuah upaya pemetaan isi dari media. Contoh site map:
2. Membuat layoutLayout adalah penataan ruang. Sehingga kita harus merencanakan penataan teks, gambar dan
elemen lainnya kedalam halaman flash nantinya.Contoh layout salah satu halaman:
1 | P a g eDody Priyatmono, S. Sn
INTRO MENU UTAMA
BIODATA
GALERI FOTO
ARTIKEL
FOTO MASA KECIL
FOTO BERSAMA
TEMAN
KESEHATAN
TIPS UJIAN NASIONALKELUAR/
EXIT
Contoh layout salah satu halaman
3. Mengaplikasikan layout kedalam flashSetelah semua layout di rancang, sekarang kita pindahkan desain tadi kedalam software Adobe
Flash.
4. Memberikan Action Script/perintahAction Script adalah istilah bahasa pemrograman yang ada didalam flash. Funsinya bervariasi.
Yang nanti akan kita gunakan pada dasarnya adalah action script untuk berpindah halaman, atau istilahnya “Go To”, serta ada beberapa action sederhana seperti “Stop”, “FS Command Full screen dan Quit” untuk.
5. Mempublish file menjadi file EXEDibagian akhir ini kita akan merubah format file. Yang semula masih berupa project (file flash),
agar bisa di buka di semua PC maka kita perlu merubahnya menjadi format EXE. Sehingga file flash kita tidak akan mengalami kendala saat di jalankan di komputer manapun.
2 | P a g eDody Priyatmono, S. Sn
B. Mengenal fungsi tools (alat) di dalam Flash
Berikut adalah gambar tampilan Software Macromedia Flash MX beserta istilah istilahnya. Didalam handout ini saya akan selalu menggunakan nama-nama tersebut untuk mengistilahkan setiap tool. Untuk itu nama tersebut wajib di hapalkan.
Tidaklah jauh berbeda dengan Macromedia Flash MX, Software terbaru Flash yaitu Adobe Flash CS 3 memiliki tampilan yang mirip.
3 | P a g eDody Priyatmono, S. Sn
Sekarang kita akan mengenal lebih dekat ke alat-alat yang ada di jendela tool
Selection tool. Berfungsi untuk memilih/mengaktifkan objek
Sub Selection tool. Berfungsi untuk mengaktifkan node edit objek vector
Free Transform tool. Untuk merubah ukuran /skala, rotasi dan perpindahan posisi objekLasso tool. Berfungsi untuk memilih area tertentu yang akan di seleksi
Pen tool. Berfungsi untuk membuat objek/gambar dengan metode bolpoint
Text tool. Berfungsi untuk membuat karakter teks/hurufLine tool. Berfungsi untuk membuat garis lurus
Rectangle, oval, polystar. Adalah objek berbentuk kotak, bundar dan prisma
Pencil tool. Berfungsi untuk membentuk objek dengan bentuk bebas
Brush Tool. Fungsinya hamper sama dengan pencil. Namun bruh memiliki bentuk dan ketebalan yang lebih bervariasiInk Bottle tool. Berfungsi untuk memeberikan warna pada garis pinggir(outline)
Paint Bucket tool. Berfungsi untuk memberi warna pada bagian dalam (fill) objek
Eye Dropper tool. Berfungsi untuk mengambil contoh warna dari objek lain
Ereaser tool. Berfungsi untuk menghapus objek
Hand tool. Berfungsi untuk menggeser stage/lembar kerja
Zoom tool. Berfungsi untuk melakukan zoom/ mendekat dan menjauh dari objek
Outline color. Keterangan warna outline yang sedang aktif
4 | P a g eDody Priyatmono, S. Sn
Fill Color. Keterangan warna dalam yang sedang aktif
Keterangan warna. Disini kita bisa mengembalikan warna menjadi hitam-putih, atau membalik warna (outline menjadi fill)
Propertis dari tool
5 | P a g eDody Priyatmono, S. Sn
Layer merupakan lapisan-lapisan seperti layaknya lembaran kertas yang tembus pandang. Posisi layer menjadi satu dengan timeline, yaitu di bagian atas menu flash. Semakin tinggi posisi layer maka akan membuat objek yang ada didalamnya semakin terlihat
Begini cara kerja layer:
6 | P a g eDody Priyatmono, S. Sn
C. Merancang halaman
Tahap awal ini kita akan membuat halaman untuk menu utama. Ikuti langkah-langkah berikut ini:
Untuk mengganti ukuran halaman anda bisa memilih SIZE dan mengganti ukuran halaman menjadi 800 x 600 pixel
Warna latar belakang juga bisaa anda ganti dengan meng-klik Background lalu pilih warna sesuai keingin anda.
4. Sesuai dengan layout yang sudah anda buat, maka mulailah menata objek rectangle yang dibuat dari flash.
Perubahan warna juga bisa di lakukan dengan mengganti fill color pada saat anda mengaktifkan rectangle tool
Untuk membuat teks anda bisa menggunakan TEXT TOOL . Parameter teks bisa anda lihat di Properties
7 | P a g eDody Priyatmono, S. Sn
Berikut adalah contoh layout yang sudah dibuat dengan menggunakan rectangle dan text tool.
5. Selanjutnya kita akan masukkan gambar/foto kedalam halaman. Caranya: klik FILE > IMPORT > IMPORT TO STAGE
6. Lalu cari file gambar yang anda inginkan dan klik OPEN
8 | P a g eDody Priyatmono, S. Sn
7. Letakkan gambar sesuai dengan keinginan anda. Gunakan Transform tool untuk merubah ukuran dan melakukan rotasi
8. Untuk menambahkan jumlah halaman di dalam flash sama dengan menambah jumlah SCENE. Caranya: Klik Insert > Scene
9. Setelah anda tambahkan satu SCENE maka akan muncul tanda/teks SCENE 2 pada bagian bawah layer
9 | P a g eDody Priyatmono, S. Sn
10. Buatlah desain untuk halaman selanjutnya
11. Lanjutkan dengan menambah halaman yang lain12. Untuk melihat/memperbaiki halaman sebelumnya anda bisa menggunkan tombol SCENE yang
ada di sebelah kanan
13. Selanjutnya kita akan membuat tombol
D. Membuat tombol
14. Kembali ke SCENE 1 atau halaman menu utama15. Tambahkan layer baru dengan meng-klik NEW LAYER
16. Kunci layer 1, agar pada saat kita mengolah layer 2 objek yang ada di layer 1 tidak terganggu. Caranya: klik tanda titik di bawah icon KUNCI GEMBOK yang ada di jendela layer
10 | P a g eDody Priyatmono, S. Sn
17. Selanjutnya aktifkan layer 2 dengan meng-klik teks layer 2
18. Buatlah sebuah kotak untuk dirubah menjadi tombol. Caranya: Aktifkan Rectangle Tool , Pada jendela COLOR kurangi nilai ALPHA menjadi 30% (alpha memberikan efek transparan), warna bisa anda cari yang sesuai
19. Posisikan Rectangle/kotak tersebut pada teks (menimpa teks)
20. Aktifkan SELECTION TOOL untuk mengaktifkan kotak tersebut. Pilih objek kotak
21. Klik MODIFY > CONVERT TO SYMBOL
22. Pilih BUTTON, beri nama objek, lalu klik OK
11 | P a g eDody Priyatmono, S. Sn
23. Sekarang objek kotak tadi sudah menjadi tombol. Untuk membuktikannya nyalakan ENABLE SIMPLE BUTTTONS yang ada di CONTROL
24. Lalu arahkan pointer mouse ke tombol, maka mouse akan berubah menjadi icon tangan
25. Matikan lagi ENABLE SIMPE BUTTONS pada CONTROL menu26. Sekarang kita akan melakukan modifikasi untuk tombol agar terlihat lebih menarik. Caranya:
aktifkan Tombol, lalu klik kanan dan pilih EDIT IN PLACE, atau bisa juga anda doble klik
27. Sekarang anda bisa melihat tanda/icon tombol dibawah layer, ini sebagai bukti bahwa anda sedang berada didalam edit tombol
28. Pada TIMELINE anda juga bisa melihat tampilan yang berbeda dengan sebelumnya. Yaitu terdapat kolom UP-OVER-DOWN-HIT (Keterangan tentang ini akan saya sampaikan pada kolom tersendiri)
UP : Berarti tampilan saat pointer mouse berada di luar tombol
12 | P a g eDody Priyatmono, S. Sn
OVER : Berarti tampilan saat pointer mouse berada di atas tombol
DOWN : Berarti tampilan saat pointer mouse menekan tombol
HIT : Merupakan area tekan tombol
29. Klik kolom putih dibawah OVER (lihat gambar dibawah) > lalu klik kanan > pilih INSERT KEYFRAME
30. Gunakan Selection Tool , aktifkan objek kotak
31. Ganti warna objek dengan warna yang lain, jangan lupa, kurangi nilai ALPHA (menjadi 30%) yang ada pada Jendela COLOR
13 | P a g eDody Priyatmono, S. Sn
32. Aktifkan lagi kolom dibawah teks DOWN, lalu klik kanan dan pilih INSERT KEYFRAME
33. Aktifkan lagi objek kotak dengan SELECTION TOOL 34. Kita akan memperkecil ukuran objek kotak dengan menggunakan tool TRANSFORM. Buka
jendela transform di menu WINDOW > TRANSFORM35. Nyalakan CONSTRAIN dan Isikan nilai 90%
36. Maka ukuran objek sudah berubah menjadi 90%37. Untuk sementara kita tidak perlu menambahkan keyframe untuk HIT karena objek kotak sudah
cukup mudah untuk di KLIK. Biasanya kita menambahkan HIT untuk objek tombol yang berbentuk teks
38. Klik Scene 1 untuk kembali ke tampilan awal
39. Untuk melihat hasilnya anda bisa nyalakan kembali ENABLE SIMPLE BUTTON yang ada di CONTROL menu
14 | P a g eDody Priyatmono, S. Sn
40. Ini adalah hasilnya
41. Selanjutnya kita akan copy tombol tadi untuk dijadikan beberapa tambol42. Caranya: gunakan keybord CTRL (untuk meng-copy) dan SHIFT, lalu Klik dan Drag objek
43. Lakukan juga untuk SCENE 2
E. Memberikan Perintah (Action Script)
Setelah semua tombol ditempatkan pada tempatnya, sekarang kita akan memberikan perintah agar tombol dapat berfungsi. Fungsi tombol disini adalah mengantarkan pengguna untuk pergi ke halaman yang lain. Baiklah mari kita ikuti langkah-langkah berikut ini.
1. Pastikan kita berada di Scene 1
2. Aktifkan salah satu keyframe (bisa keyframe layer 1 atau layer 2)
3. Klik kanan dan pilih ACTIONS4. Pada jendela Action buka GLOBAL FUNCTION > TIMELINE CONTROL >
15 | P a g eDody Priyatmono, S. Sn
5. Dobel klik perintah STOP sehingga akan berpindah ke kolom di sebelah kanan6. Tutup jendela Action7. Sebagai tanda Keyframe sudah diberi perintah untuk stop anda bisa melihat tanda “a” pada
keyframe
8. Lakukan juga pada salah satu keyframe yang ada di SCENE 2 dan scene lain9. Sekarang kita akan memberikan perintah pada tombol10. Aktifkan salah satu tombol yang ada di SCENE 1, dan klik kanan > ACTIONS
11. Sama dengan perintah sebelumnya, kali ini kita akan memberikan perintah GO TO yang ada di TIMELINE CONTROL
12. Namun sebelumnya kita akan buka SCRIPT ASSIST yang ada di jendela Actions sehingga muncul jendela tambahan ke bawah
13. Pindahkan Go To ke jendela sebelah kanan
16 | P a g eDody Priyatmono, S. Sn
14. Aktifkan gotoAndPlay(1);
15. Di jendela action atas akan muncul panduan yang bisa kita gunakan untuk mengarahkan tombol. Untuk itu pada kolom SCENE inikan scene yang akan di tuju. Misalnya scene 2 untuk mengarahkan ke menu “tentang saya”
16. Berikan juga perintah go to untuk tombol yang lain
F. Memasukan suara untuk tombol
1. Import file suara yang berdurasi pendek. Caranya: klik File > Import > Import to Library2. Biasanya windows sudah menyipkan file suara di C:\WINDOWS\Media. Untuk itu silahkan
memilih salah satu file suara yang anda rasa cocok untuk dimasukkan kedalam tombol3. Aktifkan salah satu tombol4. Klik kanan > pilh EDIT IN PLACE
17 | P a g eDody Priyatmono, S. Sn
5. Aktifkan Keyframe OVER
6. Buka jendela Properties
7. Pada kolom SOUND pilih file suara yang sudah anda import sebelumnya
8. Klik kembali icon SCENE 1 untuk kembali ke awal
9. Untuk mencoba hasilnya anda bisa me;akukan test movie yang ada di control > test movie
G. Action FS Command
Action FS Command disini berfungsi untuk menampilkan movie flash dalam ukuran full screen dan untuk menutup movie (exit)
1. Aktifkan salah satu keyframe yang ada di SCENE 1 dan frame 1
2. Klik kanan dan pilih > ACTIONS3. Pilih action FS COMMAND yang ada di BROWSER/NETWORK
4. Dobel klik FSCOMMAND sehingga akan berpindah ke kolom sebelah kanan5. Pada kolom Commands for standalone player kita pilih FULLSCREEN
18 | P a g eDody Priyatmono, S. Sn
6. Berikutnya kita akan membuat tombol yang akan difungsikan sebagai tombol EXIT7. Buatlah tombol sederhana8. Aktifkan tombol tersebut9. Klik kanan > dan pilih Actions10. Lakukan perintah yang sama dengan sction sebelumnya, yaitu FSCOMMAND11. Namun pada Commands for standalone player kita pilih QUIT
H. Publish movie
1. Di tahap akhir ini kita akan melakukan publishing atau merubah file project menjadi file EXE2. Klik FILE > PUBLISH SETTINGS3. Pada kolom TYPE anda nyalakan WINDOWS PROJECTOR (EXE)
4. Klik PUBLISH > OK5. Selanjutnya anda bisa buka hasil movie flash tersebut melalui windows explorer6. Selamat mencoba, dan jangan mudah putus asa
Bila anda mengalami kesulitan bisa bertanya kepada yang lebih tahu, atau email saya di [email protected]