Mari belajar Membuat Media Interaktif dengan Flash

Apakah Media Interaktif itu??

Interaktif berarti adanya hubungan timbal balik atau aksi reaksi. Pada media interatif harus terjadi hubungan aksi reaksi antara media dengan penggunanya. Misalnya si pengguna hanya ingin melihat menu Produk, maka ia dapat men-klik langsung pada tombol Produk, tanpa harus melihat menu yang lain terlebih dahulu. Begitu juga jika ia ingin melihat menu lain, dia tidak harus melihat menu yang tidak ingin dia lihat.

Siap untuk mulai??? Pertama kita bahas dulu mengenai struktur media interaktif.

BAGIAN- BAGIAN PADA MEDIA INTERAKTIF DENGAN FLASH

Media Interaktif terdiri dari 3 bagian utama, yakni :

1. Bagian Pembuka / Introduction (INTRO)

2. Bagian Menu Utama (MAIN)

3. Bagian Penutup (ENDING)

Ketiga Bagian tersebut saling terhubung dengan satu file yang disebut sebagai MASTER.

Master hanya terdiri atas 3 keyframe yang berisi action script sebagai perintah untuk memanggil file-file utama, yakni :

1. Keyframe 1, berisi perintah memanggil file intro

2. Keyframe 2, berisi perintah memanggil file main menu sekaligus menu pertama yang ingin ditampilkan pada main menu.

3. Keyframe 3, berisi perintah untuk memanggil file ending

Lalu bagaimana dengan menu-menu yang lain??

Master hanya menghubungkan intro, main dan ending. Sedangkan menu-menu isi lannya dipanggil dari Main menu.

Hubungan antara Intro, main, ending dengan Master dapat digambarkan sebagai berikut :

Perhatikanlah bahwa yang berfungsi memanggil menu-menu isi adalah main menu. Pemanggilan dilakukan dengan tombol-tombol yang dibuat pada main menu.

Penjelasan hubungan antara file-file tersebut adalah sebagai berikut :

Ketiga file utama intro, main dan ending tidak dapat saling berhubungan langsung, akan tetapi harus melalui file master. Hubungan tersebut dapat dijabarkan dalam 5 langkah berikut :

1. Master memanggil file Intro

2. Intro menyediakan tombol untuk kembali pada Master

3. Master memanggil file Main

4. Main menyediakan 2 tombol untuk kembali pada master, yakni menuju frame ke 1 file master untuk memanggil Intro kembali atau menuju frame 3 file master untuk memanggil file ending. Main juga menyediakan tombol-tombol untuk memanggil menu-menu isi, misalnya : Home, Profile, Facilities dan Contact, dsb

5. Master memanggil file ending

Apakah isi dari file Intro???

Intro hanya berisi animasi pembuka yang dapat menarik orang untuk melihat lebih lanjut media yang kita buat.. Animasi yang dibuat tergantung pada kreatifitas si pembuat. Tidak ada bentuk baku.. So, be creative..

Apakah isi dari file Main Menu??

Main menu hanya berisi tombol-tombol (button) yang akan me-link atau memanggil menu-menu yang akan ditampilkan, seperti Home, Contact, Profile, Tutorial 1, Tutorial 2, dsb

Apakah isi dari file Ending??

Ending berisi salam penutup, misalnya ucapan terimakasih, atau penegasan atas apa yang telah disampaikan pada menu utama.

JENIS-JENIS MEDIA INTERAKTIF

Media interaktif menggunakan Flash dapat diaplikasikan menjadi beberapa bentuk media, diantaranya :

A. Company Profile.

Apakah Company Profile itu??

Company Profile, secara bahasa terbagi menjadi dua kata yakni Company (Perusahaan) dan Profile (Profil). Sehingga secara bahasa Company Profile berarti Profil Perusahaan. Secara istilah company profile merupakan suatu media presentasi, yang menjelaskan segala hal mengenai suatu perusahaan / instansi tertentu. Hal yang dijelaskan dapat berupa apasaja, misalnya : latar belakang berdirinya instansi tersebut, visi misi, iklan produk, alamat serta nomor telepon instansi, dan sebagainya. Company Profile juga dapat digunakan sebagai media iklan atau promosi untuk memperkenalkan suatu produk tertentu.

B. Media Tutorial.

Media tutorial biasanya melibatkan video tutorial atau animasi yang menjelaskan materi yang ingin disampaikan. Pembuatan video harus terlebih dahulu dilakukan dengan software lain, misalnya Camtasia Studio atau Snag it. Jika ingin dipanggil dan ditampilkan melalui flash, maka video diubah dalam format flv, kemudian di import ke dalam flash.

LANGKAH-LANGKAH MEMBUAT MEDIA INTERAKTIF

STEP I. MEMBUAT INTRO,MAIN, ENDING DAN MASTER

1. Siapkan template-template atau gambar untuk membuat main menu, serta menu-menu yang ingin ditampilkan pada Photoshop. Simpan background dengan cara Save for Web, dengan tipe file jpg. Sedangkan bagian-bagian tertentu yang diberi effek, simpan dalam format PNG 24

2. Langkah selanjutnya, kita akan membuat Main menu. Buka program Adobe Flash cs4, lalu pilihlah Flash Script 2.0. Simpanlah file tersebut dengan nama Main. Ubahlah ukuran dokumen hingga sesuai dengan ukuran gambar template yang telah Anda buat pada photoshop. Dengan cara klik Modify à Dokumen à ganti ukuran Dimension

3. Masih Pada Main, Buatlah tombol – tombol yang akan berfungsi untuk memanggil setiap menu yang akan ditampilkan. Buatlah garis bantu untuk menentukan posisi tombol-tombol menu dengan menggunakan ruler. Cara menampilkan Ruler : klik View à Ceklist pada Ruler. Untuk membuat garis bantu : Klik pada ruler à tahan mouse lalu tariklah hingga posisi yang Anda inginkan.

4. Untuk background, jika Anda menginginkan gambar background yang berbeda untuk setiap tamppilan menu, maka biarkan background kosong pada main menu. Background akan tampil dari setiap menu yang ditampilkan. Akan tetapi jika Anda ingin setiap menu memiliki tampilan yang sama, maka letakkan background pada Main Menu, sedangkan pada menu-menu isi tidak boleh diberikan background.

5. Pada Main menu, Buatlah juga tombol Intro dan Exit

6. Pada button INTRO beri script :

on (release){

_level0.gotoAndPlay (1);

}

Sedangkan pada button EXIT beri script :

on (release){

_level0.nextFrame ();

}

Simpanlah file tersebut dengan nama Main. Kemudian lakukan test movie (Ctrl Enter) untuk membuat file Main.swf

7. Langkah selanjutnya kita membuat fie Intro. Buatlah dokumen baru pada flash, pilihlah Flash Script 2.0. Simpanlah file tersebut dengan nama Intro. Ubahlah ukuran dokumen hingga sesuai dengan ukuran dokumen yang telah Anda buat pada file Main.

8. Buatlah file Intro berupa animasi yang menarik. Kemudianlah buatlah sebuah tombol SKIP pada layer tersendiri di file intro, kemudian beri action script pada tombol tersebut :

on (release){

_level0.nextFrame (); } artinya : menuju Master frame 2

}

Simpanlah file tersebut dengan nama Intro pada folder yang sama dengan tempat menyimpan file Main. Kemudian lakukan test movie (Ctrl Enter) untuk membuat file Intro.swf

Setelah Intro dan Main, maka selanjutnya buatlah file Ending dengan animasi yang menarik. lalu pilihlah Flash Script 2.0. Simpanlah file tersebut dengan nama Ending. Ubahlah ukuran dokumen hingga sesuai dengan ukuran Main dan Intro. Simpanlah file tersebut dengan nama Ending pada folder yang sama dengan tempat menyimpan file Main dan Intro. Kemudian lakukan test movie (Ctrl Enter) untuk membuat file Ending.swf

9. Setelah ketiga file utama siap (yakni Intro, Main dan Ending), selanjutnya kita akan menghubungkan ketiga ini menggunakan file master. Buatlah dokumen baru dengan Flash Script 2.0. Save As file tersebut dengan nama Master pada folder yang sama dengan Intro, Main dan Ending.

10. Ubahlah ukuran dokumen master sehingga sama dengan ukuran Intro, Main menu dan Ending, dengan cara klik Modify à Dokumen

11. Buatlah keyframe di frame 1, frame 2 dan frame 3 pada file Master.

12. Berilah script pada file Master dengan cara Klik pada Keyframe à klik kanan à pilih Action (untuk membuka panel Action). Buatlah Script sebagai berikut :

Keyframe 1 : Memanggil file Intro

stop();

loadMovieNum(“Intro.swf”,1);

Artinya : _{stop = berhenti pada keyframe ini, kemudian panggil file Intro.swf di level 1}

Keyframe 2 : Memanggil file Main dan menu isi yang pertama, misal Home

UnloadMovieNum(1);

loadMovieNum(“Main.swf”,9);

loadMovieNum(“Home.swf”,1);

Artinya : _{Tutuplah movie yang berjalan di level1kemudian Panggil file Main.swf di level 9}

_{secara bersamaan panggil file Home.swf di level 1}

_{File Main dan Home dipanggil secara bersamaan, agar kedua file tersebut muncul secara bersamaan untuk saling mengisi.}

Keyframe 3 : Memanggil file Main Ending

UnloadMovieNum(9);

loadMovieNum(“Ending.swf”,1);

Artinya : _{Tutuplah movie yang berjalan di level 9 kemudian panggil file Ending.swf di level 1}

Setelah selesai Save kembali file tersebut dengan nama Master pada folder yang sama dengan Intro, Main dan Ending. Lakukan test movie untuk melihat hasilnya.

STEP 2. MEMBUAT CONTENT (MENU-MENU ISI)

Menu – menu isi sangat tergantung dengan media interaktif apa yang ingin Anda buat.

Company Profile biasanya terdiri dari beberapa pilihan menu berikut :

- Profil menjelaskan misalnya tentang visi misi, latar belakang, motto lembaga, dsb

- Bisnis (dibidang apa perusahaan itu bergerak)

- Produk (untuk lembaga komersial)

- Contact ( Alamat, email, atau no telp lembaga)

- Fasilitas

- Client

Sedangkan Media Tutorial, menu-menunya disesuaikan dengan pilihan materi – materi yang akan disampaikan.

1. Buatlah Menu-menu yang akan ditampilkan.. Perhitungkan posisi gambar dan text agar tidak terganggu tampilan button-button pada main menu. Gunakan lah garis bantu (ruler) untuk mengatur posisi text.

2. Jika Anda menginginkan gambar background yang berbeda untuk setiap tamppilan menu, maka berikanlah background pada setiap menu yang Anda buat. Akan tetapi jika Anda ingin setiap menu memiliki tampilan yang sama, maka menu-menu isi tidak boleh diberikan background, karena background telah diletakkan pada Main.

3. Buatlah setiap menu pada satu file flash tersendiri, kemudian simpan dalam folder yang sama dengan file Main, Intro, Ending dan Master.

4. Lakukan test movie pada setiap file menu, untuk membuat file swf.

STEP 3. MENGHUBUNGKAN MENU-MENU ISI DENGAN MAIN MENU.

Selanjutnya kita akan menghubungkan menu-menu isi agar dapat dipanggil dari file Main.

1. Bukalah file Main yang telah dibuat. Sebagai contoh, menu-menu isi yang akan ditampilkan adalah : Home, Profile, Business dan Contact.

2. Langkah selanjutnya, kita akan memberi script pada setiap button menu. Nama file yang dipanggil pada script harus sama dengan nama file-file menu yang telah Anda buat.

3. Klik pada button Home kemudian berilah script dibawah ini :

on (release) {

loadMovieNum(“Home.swf”, 1);

}

Catatan : Sesuaikan nama file yang dipanggil dengan nama file menu yang telah Anda buat.

4. Lalu klik pada button Profile, kemudian berilah script sebagai berikut :

on (release){

loadMovieNum (“Profile.swf”, 1);

}

Catatan : Sesuaikan nama file yang dipanggil dengan nama file menu yang telah Anda buat.

5. Selanjutnya klik pada button Business, berilah script ini :

on (release){

loadMovieNum(“Business.swf”, 1);

}

Catatan : Sesuaikan nama file yang dipanggil dengan nama file menu yang telah Anda buat.

6. Klik pada button Contact, lalu berilah script berikut ini :

on (release){

loadMovieNum(“Business.swf”, 1);

}

Catatan : Sesuaikan nama file yang dipanggil dengan nama file menu yang telah Anda buat.

STEP 4. PERIKSA KESALAHAN

Jika media interaktif yang Anda buat belum berhasil, maka periksa kembali hal-hal berikut :

1. Periksa button yang Anda buat, apakah ada button yang bertumpuk (di dalam button ada button lagi)

2. Periksa script yang Anda buat apakah sudah benar besar kecil huruf serta tanda bacanya.

3. Periksa apakah nama file yang Anda tulis pada script sudah sama dengan nama file menu yang Anda buat.

4. Periksa apakah seluruh file sudah disimpan dalam satu folder yang sama.

SELAMAT MENCOBA :) :) :)

DO YOUR BEST, NEVER GIVE UP & KEEP PRAY