Membuat Menu Membuat Button Langkah untuk membuat button menu adalah sebagai berikut: Buatlah sebuah objek berbentuk persegi dengan Rectangle Tool(R)

Transkripsi

1 Tutorial Interaktif Elemen-elemen dasar pada Tutorial Interaktif Macromedia Flash 8 saat ini banyak digunakan untuk pembuatan presentasi, Tutorial Interaktif ataupun Company Profile. Kali ini kita akan mempelajari pengaplikasian system Multimedia dengan menggunakan Macromedia Flash 8 untuk membuat sebuah tutorial interaktif. Sebelum itu kita perlu mengetahui beberapa elemen yang harus ada dalam sebuah tutorial interaktif. Design Layout Membuat sebuah Design Layout untuk Tutorial Interaktif tidaklah mudah dan harus sesuai dengan Tutorial yang akan kita buat. Sebuah Tutorial Interaktif sebaiknya memiliki tampilan yang menarik bagi user. Design yang menarik akan disukai oleh para user dan juga dapat menjadi nilai lebih dari Tutorial yang kita buat. Pemilihan design yang tepat dan sesuai dengan tema sangat diperlukan, misalkan kita membuat sebuah Tutorial untuk anak usia TK maka sebaiknya kita membuat design yang disukai oleh anak-anak TK. Gunakanlah pilihan warna-warna yang cerah dan disukai oleh anak-anak serta gunakanlah gambar-gambar kartun untuk lebih menarik perhatian dan membuat anakanak betah menggunakan Tutorial yang kita buat. Materi Tutorial Pemilihan isi materi dalam sebuah Tutorial Interaktif disini sangatlah penting. Materi yang kita buat harus sesuai dengan apa yang dibutuhkan oleh user, seperti untuk Tutorial Pendidikan harus disesuaikan dengan Kurikulum Pendidikan terkini. Penyampaian materi sebaiknya jangan terlalu rumit agar user dapat dengan mudah memahami isi dari Tutorial. Menu Menu pada sebuah Tutorial Interaktif bisa dikatakan sebagai navigator yang akan menuntun user ke isi dari materi yang ada. Menu sebaiknya jelas dan tidak membingungkan user, sehingga user tidak tersesat dalam Tutorial yang kita buat. Jika dirasa perlu buatlah sebuah menu Help yang berisi informasi mengenai Tutorial dan fungsi dari button-button menu untuk lebih memudahkan user.

2 Animasi dan Pendukung lainnya Animasi adalah nilai lebih dari sebuah Tutorial Interaktif dengan Flash. Denganadanya animasi maka akan mempermudah user untuk memahami isi materi lebih jelas. Karena contoh secara visual dengan animasi akan lebih mudah dimengerti daripada menyampaikan materi dengan teks atau tulisan saja. Terutama jika target user adalah anak-anak usia TK yang belum bisa membaca dan memahami tulisan. Penggunaan animasi akan sangat membantu dalam hal ini. Selain animasi kita juga bisa menambahkan video yang berisi contoh dalam Tutorial Interaktif, video juga merupakan elemen pelengkap yang bisa digunakan untuk menyampaikan materi secara visual. Dan satu lagi pendukung untuk Tutorial Interaktif yaitu sound. Pemilihan sound yang sesuai dan tepat akan menjadikan Tutorial yang kita buat lebih menarik. Membuat design layout Membuat design layout dapat dilakukan dengan menggunakan software pengolah gambar lain seperti Photoshop, CorelDraw dan sebagainya yang kemudian dapat di ekspor ke library Macromedi Flash. Atau dapat juga langsung dibuat di Flash dengan menggunakan Tool-tool yang ada. Di bawah ini ada beberapa model area layout yang dapat digunakan sebagai acuan dasar pembuatan layout sebuah Tutorial Interaktif. Layout 1 Layout 2

3 Layout 3 Layout 4 Selain dari beberapa contoh acuan di atas kita juga dapat mengkreasikan bentuk layout Tutorial Interaktif sesuai dengan kreatifitas kita. Membuat Menu Membuat Button Langkah untuk membuat button menu adalah sebagai berikut: Buatlah sebuah objek berbentuk persegi dengan Rectangle Tool(R) Buat teks dengan Text Tool(T) di atas objek persegi tersebut. Seleksi objek persegi dan teks tersebut kemudian klik kanan > Convert to Symbol. Berikan nama tombol dan pilih type Button, kemudian tekan Ok.

4 Objek Button telah jadi. Untuk mengedit objek tersebut dapat dilakukan dengan klik 2x pada objek button tersebut. Setelah itu akan masuk ke panel Timeline khusus symbol button yang terdiri dari 4 macam frame yaitu Up, Over, Down, Hit. Frame Up adalah frame tampilan awal dari button sebelum diarahkan pointer. Over adalah frame tampilan button saat mouse diarahkan di atas button. Down adalah frame tampilan button setelah di-klik. Dan Hit adalah area button dapat dieksekusi. Klik kanan pada frame Over tersebut lalu pilih Insert Keyframe. Ganti warna pada fill color lalu pilih Paint Bucket Tool lalu klik pada objek persegi. Insert keyframe lagi pada frame Down dan ganti juga fill color dan warna teks. Tambahkan lagi keyframe pada frame Hit tanpa perlu merubah warna. Ukuran persegi akan menjadi area eksekusi dari button. Lakukan Test Movie(Ctrl+Enter) untuk melihat perubahan button sebelum pointer mouse diarahkan, saat pointer mouse di atas button dan saat button di- Klik.

5 Link Button ke Frame Tertentu Setelah button kita buat maka selanjutnya adalah membuat link ke suatu frame. Buatlah 2 buah layer, layer pertama beri nama Tombol dan layer kedua beri nama Isi. Buatlah beberapa buah button pada layer Tombol frame 1, contoh disini menggunakan teks yang di Convert menjadi button. Insert frame pada frame 5 layer Tombol. Buat keyframe pada frame 2, 3, dan 4 pada layer Isi. Buatlah objek dengan Rectangle Tool(R) pada frame tersebut dan beri fill color merah pada objek di frame 2, fill color kuning pada objek di frame 3 dan fill color hijau pada objek di frame 4. Berikan Action Script pada frame 1 layer Tombol dengan script berikut. Berikan Script pada masing-masing button sebagai berikut :

6 Button Merah : Button Kuning : Button Hijau : Lakukan Test Movie(Ctrl+Enter) Membuat Text Scrolling Text Scrolling digunakan untuk teks isi materi tutorial yang panjang. Dengan menggunakan teks scrolling kita dapat meminimalisir area untuk menampilkan teks tersebut. Langkah untuk membuat Text Scrolling adalah sebagai berikut : Buat 4 layer baru pada Timeline. Masing-masing beri nama layer Action, Mask, Teks, Button. Buat objek dengan menggunakan Rectangle Tool(R) pada layer Mask. Buka menu Window > Common Libraries > Button Ambil button pada folder Classic Button > Playback > gel Left, drag button tersebut ke Stage pada layer Button frame 1.

7 Lakukan transformasi pada button. Pilih menu Modify > Transform > Rotate 90 CW sehingga arah button menjadi ke atas. Tambahkan satu lagi button seperti di atas dan lakukan transform Rotate 90 CCW. Sehingga nanti posisi kedua button akan seperti dibawah ini. Berikan Instance name di properties pada button yang atas dengan nama btn1 dan button yang bawah dengan nama btn2 Masukkan teks yang panjang pada layer Teks frame 1 dengan menggunakan Text Tool(T).

8 Insert frame pada frame 20 layer Mask Insert Keyframe pada frame 20 layer Teks Geser objek teks pada layer tersebut ke atas hingga akhir tulisan. Tambahkan Tween Motion diantara frame 1 sampai 20 di layer Teks.

9 Berikan Masking pada Layer Mask dengan klik kanan pada layer lalu pilih Mask. Berikan Action Script pada button bawah sebagai berikut. Insert Keyframe pada frame 20 layer button Hapus Action Script yang ada pada button bawah di frame 20. Kemudian berikan Action Script pada button atas sebagai berikut. Berikan Script Stop pada frame 1 layer Action. Sekarang kita tambahkan Effect Button disable agar pada saat posisi awal button atas tidak dapat di-klik dan pada saat posisi scroll berakhir button bawah tidak dapat di-klik. Insert Keyframe pada frame 2 dan 19 di layer Button.

10 Berikan Script pada masing-masing button di frame 2 dan 19. button atas berikan Script: Untuk Untuk button bawah berikan Script: Tambahkan Script sebagai berikut pada frame 1 layer Action. Insert Keyframe pada frame 20 layer Action dan berikan Script sebagai berikut pada frame tersebut. Lakukan Test Movie (Ctrl+Enter) Membuat Tampilan Fullscreen Biasanya kalu kita membuat sebuah.swf Movie di flash tampilannya saat dijalankan akan sesuai dengan pengaturan ukuran dokumen pada panel properties. Misalkan 800x600 pixels. Untuk bisa menampilkan.swf Movie secara fullscreen ketika dibuka. Kita bisa menambahkan Script pada frame 1. Scriptnya adalah sebagai berikut. Setelah itu lakukan Export Movie. File > Export > Export Movie

11 Kemudian bukalah file.swf hasil dari Export Movie tersebut. Movie akan tampil secara fullscreen. Membuat Tombol Close Tombol Close akan memudahkan kita untuk keluar dari Movie yang sudah di fullscreen. Langkah-langkah membuatnya adalah sebagai berikut. Pada salah satu frame(missal: frame1 layer 1) buatlah sebuah objek dengan menggunakan Oval Tool(O), ukuran lingkaran tidak usah terlalu besar. Gunakan Text Tool(T) untuk membuat objek tanda silang menggunakan huruf X. Break Apart teks tersebut. Klik kanan > Break Apart. Seleksi seluruh objek tersebut kemudian Convert to Symbol dan jadikan button.

12 Insert Keyframe pada frame paling akhir(misal : frame 16) Berikan Script pada Button Close. Berikan Script Stop pada frame 15 agar movie tidak berlanjut ke frame berikutnya. Berikan Script pada frame 16. Export Movie dan jalankan file.swf nya.

13 Import.swf Movie Sebelum meng-import Movie siapkan sebuah file.swf Movie yang akan di Import. Sebagai contoh disini kita menggunakan file.swf dengan nama mobil..swf. Buat file flash baru (Ctrl+N). Convert objek tersebut menjadi Movie Clip. Ubah Registration Pointnya ke pojok kiri atas. Kemudian tekan Ok. Setelah itu berikan Instance Name pada Movie Clip tersebut dengan nama stage. Tambahkan satu buah layer lagi pada Timeline. Berikan Script pada frame 1 di layer 2. mobil..swf adalah nama file yang akan di load. Area adalah Instance name dari movie clip yang akan menjadi tempat.swf Movie ditampilkan. Simpan file, kemudian Export Movie. Pastikan file disimpan dalam satu folder yang sama dengan file.swf Movie yang di load.

14 Import File Video Kita dapat memasukkan file video ke dalam file flash. Format-format video yang dapat diimport antara lain *.mpeg, *.avi, *.flv. Berikut adalah langkah-langkah mengimport video. Buka file flash baru (Ctrl+N). Pilih menu File > Import > Import to Library. Pilih file video yang akan diimport. Setelah itu akan muncul kotak dialog import. Pastikan file video yang diimport sudah sesuai kemudian klik Next. Akan muncul pilihan Deployment video. Pilih Embed video in SWF play in Timeline. Kemudian klik Next.

15 Kemudian akan mucul pilihan Embedding. Pilih symbol type Embeded Video kemudian klik Next. Kemudian muncul tampilan terakhir. Klik Next. Setelah itu drag Embedded video yang ada di Library ke Stage File video sudah berhasil diimport ke dalam file Flash. Selain itu, kita juga dapat menambahkan beberapa navigasi seperti Play, Stop dan Pause untuk video tersebut. Dengan cara: Ambil button pada Common Libraries. Window > Common Libraries > Button.

16 Pilih button pada Classic Button > Playback. Button gel Right untuk Play, Button gel Stop untuk Stop dan Button gel Pause untuk Pause. Atur posisi button di bawah video. Setelah itu pilih frame 1 lalu tambahkan Script stop. Kemudian berikan Script berikut pada tombol Play. Kemudian berikan Script berikut pada tombol Stop.

17 Kemudian berikan Script berikut pada tombol Pause. Lakukan Test Movie(Ctrl+Enter) Audio/Sound Langkah-langkah meng-import file sound adalah sebagai berikut: Pilih menu File > Import > Import to Library Pilih file sound yang akan diimport. Drag file yang sudah diimport di Library ke stage.

18 Sehingga akan tampil garis frekuensi suara di frame 1. Pilih Layer 1 lalu pada panel Property Pilih Loop agar sound diulang terus menerus. Ket: - Sound : Untuk memilih file suara yang sudah diimport ke Library. - Effect : Untuk memberikan efek pada suara. - Repeat : Untuk perulangan suara dengan jumlah perulangan tertentu. - Loop : Untuk perulangan suara terus menerus. Lakukan Test Movie. Menggunakan Suara dari file.swf Menggunakan suara dari file.swf berguna agar ukuran file animasi menjadi lebih ringan. Karena file.swf yang berisi suara dipisahkan dari file Movie utama. Sebelumnya lakukan Import sound seperti langkah sebelumnya di atas dan simpan file.swf dari sound tersebut, misalkan dengan nama sound.swf. Buka file flash baru (Ctrl+N). Ambil button gel Right untuk tombol menjalankan musik dan button gel Right untuk tombol menghentikan musik dari Common Libraries. Berikan Script berikut pada button gel Right.

19 Berikan Script berikut pada button gel Stop. Simpan file dalam satu folder yang sama dengan file.swf sound yg di load. Lakukan Test Movie (Ctrl+Enter). Publish Project Pada Macromedia Flash terdapat fasilitas untuk mem-publish project Movie yang kita buat menjadi ekstensi tertentu seperti *.EXE, *.HTML, *.MOV dsb. Disini kita akan mempublish project Movie kita menjadi *.EXE agar dapat dijalankan tanpa menggunakan flash player. Langkah-langkahnya sebagai berikut. Pilih menu File > Publish Setting(Ctrl+Shift+F12). Kemudian pada window Publish Setting pilih Type Windows Projector(.exe).

20 Setelah itu Klik Publish. Tunggu proses Publish hingga selesai. Membuat File Autorun Nantinya Tutorial Interaktif yang kita buat akan dikemas dalam bentuk CD. Setelah di atas kita membuat file *.exe selanjutnya adalah kita membuat file autorun agar file *.exe yang telah kita buat dapat dibuka secara otomatis ketika CD dimasukkan ke dalam CD-ROM. Buka program Notepad dari All Programs > Accessories Ketikkan kode perintah Autorun. Fileflash.exe adalah contoh nama dari file. Klik menu File > Save As. Simpan dalam folder yang sama dengan file.exe dengan nama AUTORUN.inf

21 Proses selanjutnya adalah melakukan Burning CD Interaktif yang telah kita buat. Isi di dalam CD adalah file.exe dan file Movie pendukung lainnya serta file AUTORUN.inf