Cara Membuat CD Interaktif di Adobe Flash CS3

Cara Membuat CD Interaktif di Adobe Flash CS3

Selamat datang di Blog saya. Kali ini saya akan menjelaskan Cara Mudah Membuat CD Interaktif yang simple, mudah, dan interaktif. Pasti sudah banyak yang mengetahui apa itu CD Interaktif, untuk pengertian dan defenisi silahkan googling. :D.

//untuk memberhantikan animasi
//fungsi next_btn menuju ke frame home
//scrip untuk display ukuran penuh

Baik untuk persiapan membuat CD Interaktif yang paling penting itu adalah Adobe Flash, terserah versi berapa yang di gunakan. Dan untuk tampilan tergantung kreasi sendiri, jika ingin menggunakan gambar yang di dapat di internet hanya memerlukan software browser atau mendesainnya di program pengolah grafis memerlukan program tersebut. Dan untuk simplenya sekarang kita cari beberapa gambar komponen yang di perlukan, beberapa gambar icon untuk tombol, home, back, exit, map, user, world. Dan untuk effect suara dapat di download free di http://www.freesfx.co.uk/ di butuhkan akun untuk bisa download dari sana.

Selanjutnya adalah scene atau halaman CD Interaktifnya. Scene tergantung dari untuk apa di buat, dan kali ini kita membuat CD Interaktif untuk Profil company. Dan contohnya seperti berikut :
Scene 1.
Adalah Start untuk memunculkan pembukaan. Akan kita berikan tombol yang terletak di tengah bawah untuk lanjut ke Scene 2.
Scene 2.
Adalah Home, di sini kita masukan tombol menu, terserah menu yang kamu ingin tampilkan, seperti Profil, Map, Website, Contact, dan tombol exit.
Scene 3.
Terserah kreasi sendiri menentukan berapa banyak scene yang kamu inginkan dan kebutuhan. Dan untuk kali ini pada artikel kita perlukan Scene Tentang, Website, Contact.
http://www.iconarchive.com/

Dan sekarang kita mulai untuk tahap membuat CD Interaktif.

Step 1.
Buka Software Adobe Flash CS3 dan buat file baru menggunakan action scrip3.0

Cara Membuat CD Interaktif di Adobe Flash CS3

Step 2.
Setelah file di buat, pada Layer 1, frame pertama sampai frame ke 5 kita klik kanan dan pilih Insert Keyframe (Atau Keyboard Shortcut F6).

Cara Membuat CD Interaktif di Adobe Flash CS3

Step 3.
Beri nama setiap frame sesuai scene yang kita buat sebelumnya dengan cara seleksi frame satu persatu kemudian pada bagian properti kita ketik Name Label nya. Frame 1 : “start” , Frame 2 : “home”, Frame 3 : “tentang”, Frame 4 : “website”, Frame 5 : “contact”. Pemberian nama pada frame memudahkan kita untuk membuat scrip yang nantinya menuju ke masing – masing frame.

Cara Membuat CD Interaktif di Adobe Flash CS3

Setelah kita beri nama setiap frame maka akan muncul icon bendera di setiap framenya.

Cara Membuat CD Interaktif di Adobe Flash CS3

Step 4.
Import gambar yang di perlukan seperti gambar icon home, website, contact, exit. Dengan klik File > Import. Dan pilih Import to Library untuk mengimport gambar pada Library.

Cara Membuat CD Interaktif di Adobe Flash CS3

Akan muncul windows baru dan seleksi beberapa file.

Cara Membuat CD Interaktif di Adobe Flash CS3

Dan setelah klik open maka gambar akan berada di panel library.

Cara Membuat CD Interaktif di Adobe Flash CS3

Step 5.
Selanjautnya pada Layer 1 Frame pertama, kita taruh gambar logo (Klik + Grag dari library) dan Objek Text Menggunakan Text Tool, yang seperti terlihat pada gambar di bawah.

Cara Membuat CD Interaktif di Adobe Flash CS3
Step 6
kedua objek gambar dan text kita jadikan masing – masing symbol. Pertama objek gambar logo kita jadikan Movie Clip, dengan cara pilih menu Modify dan klik Convert to Symbol (F8).

Cara Membuat CD Interaktif di Adobe Flash CS3

Kemudian akan muncul window baru. Pada kolom Name kita tulis nama objeknya. Dan Type pilih Movie Clip dan Klik OK

Cara Membuat CD Interaktif di Adobe Flash CS3

Selanjutnya akan otomatis objek gambar akan menjadi Symbol Movie Clip. Kemudian kita edit objek logo dengan double klik objek tersebut dan hasilnya terlihat pada gambar.

Cara Membuat CD Interaktif di Adobe Flash CS3

Yang di tunjukan likaran merah menandakan sudah memasuki objek Movie Clip yang di beri nama logo. Dan selanjutnya kita akan memberikan efek animasi pada Movie Clip ini.

Step 7
Sekarang kita masih di dalam Movie Clip Logo. Pada layer 1, Frame pertama kita klik kanan dan pilih Create Montion Tween.
Cara Membuat CD Interaktif di Adobe Flash CS3

Kemudian berikan keyframe di frame ke lima.

Cara Membuat CD Interaktif di Adobe Flash CS3

Selanjutnya klik objek yang berada di frame 1, dan ubah opsi Color pada panel property menjadi Alpha dan kolom di sebelahnya 26 (Terserah sesuai keinginan). Ini berfungsi untuk animasi opening logo ketika cd Interaktif di jalankan.

Cara Membuat CD Interaktif di Adobe Flash CS3

Buat layer baru dengan menggunakan icon yang di tunjukan likaran merah pada gambar di bawah. Membuat layer baru untuk memberikan Scrip. Jika tidak di berikan scrip animasi akan berulang-ulang.
Cara Membuat CD Interaktif di Adobe Flash CS3

Dan berikan keyframe pada frame 5 di layer 2, lalu klik kanan dan pilih Action.

Cara Membuat CD Interaktif di Adobe Flash CS3
Dan masukan scrip 

stop();

Cara Membuat CD Interaktif di Adobe Flash CS3

Selanjutnya kita kembali ke Scene 1 untuk mengedit menunya. Tinggal klik Scene 1 di sebelah Logo (lihat pada gambar).

Cara Membuat CD Interaktif di Adobe Flash CS3

Selanjutnya Time line akan menjadi seperti terlihat pada gambar dibawah.

Cara Membuat CD Interaktif di Adobe Flash CS3

Step 8
Lihat objek pada frame 1 di layer 1. terdapat objek yang sudah menjadi movie clip logo dan di bawahnya terdapat objek text “Next”. Nah.. Sekarang objek text tersebut kita jadikan objek button untuk menuju ke frame selanjutnya.

Cara Membuat CD Interaktif di Adobe Flash CS3

Sama seperti membuat Movie Clip sebelumnya klikobjeknya > modify > Convert to Symbol (F8). Dan letak perbedaannya hanya kita ubah Type nya menjadi Button. Karena kita menggunakan Action Scrip 3.0 kita button harus di beri nama dan kita berikan scrip nya pada frame. Untuk button Next kita beri nama “next_btn”

Cara Membuat CD Interaktif di Adobe Flash CS3


Step 9
selanjutnya kita masukkan Scrip pada Layer 2 frame1. Klik kanan frame 1 > Action

Cara Membuat CD Interaktif di Adobe Flash CS3

Dan ketik scrip seperti di bawah.

stop();
//untuk memanggil fungsi next_btn
next_btn.addEventListener(MouseEvent.MOUSE_UP,menujuKeHome);

function menujuKeHome(event:MouseEvent):void {
gotoAndPlay("home");
}

stage.displayState = StageDisplayState.FULL_SCREEN;

Cara Membuat CD Interaktif di Adobe Flash CS3

Step 10.
Selanjutnya kita akan mengedit halaman Main menu. Klik Frame 2 pada layer 1, kita klik drag objek gambar dari panel library untuk button. Dan jadikan button setiap objek tersebut. Untuk hal memberikan nama terserah, yang penting adalah pemberian button namenya pada panel Property. Untuk jelasnya lihat pada gambar di bawah. Buat dari kreasi sendiri seperti menambahkan text di button dll.
Cara Membuat CD Interaktif di Adobe Flash CS3

Selanjutnya berikan scrip pada frame 2 di layer 2 sesuai pada gambar di bawah.

stop();

tentang_btn.addEventListener(MouseEvent.MOUSE_UP,menujuKeTentang);
website_btn.addEventListener(MouseEvent.MOUSE_UP,menujuKeWebsite);
contact_btn.addEventListener(MouseEvent.MOUSE_UP,menujuKeContact);
exit_btn.addEventListener(MouseEvent.MOUSE_UP,exitMenu);

function menujuKeTentang(event:MouseEvent):void {
gotoAndPlay("tentang");
}

function menujuKeWebsite(event:MouseEvent):void {
gotoAndPlay("website");
}

function menujuKeContact(event:MouseEvent):void {
gotoAndPlay("contact");
}

function exitMenu(event:MouseEvent):void {
fscommand("quit");
}

Cara Membuat CD Interaktif di Adobe Flash CS3

Step 10.
Selanjutnya kita berikan objek button Home setiap halaman. Klik frame 3 di layer 1 untuk memberikan objek di sana. Klik drag gambar home yang sudah di import pada panel library. Kemudian jadikan button dan meberikan nama button tersebut di panel property.

Cara Membuat CD Interaktif di Adobe Flash CS3
Dan tulis scrip seperti terlihat pada gambar.

stop();

home_btn.addEventListener(MouseEvent.MOUSE_UP,keHome1);
function keHome1(event:MouseEvent):void{
gotoAndPlay("home");
}

Cara Membuat CD Interaktif di Adobe Flash CS3

Selanjutnya Copy > Paste objek button home di frame 4 dan frame 5 di layer 1, karena objeknya yang sama untuk button. Dengan cara klik semua objek, kemudian klik kanan pada objek dan pilih Copy. Selanjutnya klik frame selanjutnya ( frame 4 dan frame 5). lalu klik kanan pada stage yang kosong dan pilih Paste in Place.

Cara Membuat CD Interaktif di Adobe Flash CS3

Step 11.
Kembali ke frame 3 untuk halaman Tentang. Kita tulis beberapa penjelasan mengenai perusahaan. Di mana objek tersebut objek text, dan gambar.

Cara Membuat CD Interaktif di Adobe Flash CS3

Step 12.
selanjutnya ke farme 4 layer 1 untuk halaman Website. Contoh kali ini kita akan memeberikan gambar screen shot website dan kita jadikan button, yang ketika di klik akan membuka halaman website perusahaan. Juga pada halaman ini bisa kita beikan penjelasan website tergantung kreasi sendiri. Dan jangan lupa untuk memberikan nama objek button screen shot pada panel property.

Cara Membuat CD Interaktif di Adobe Flash CS3

Dan berikut Scrip yang kita masukkan. Untuk scrip home bedakan nama functionnya misalnya di frame 3 fungsion namenya home1, di frame 4 function namenya home2, jika ada kesamaan nama function di frame akan menimbulkan error :D.

stop();

home_btn.addEventListener(MouseEvent.MOUSE_UP,keHome2);
function keHome2(event:MouseEvent):void{
gotoAndPlay("home");
}

website.addEventListener(MouseEvent.MOUSE_UP,keweb);
function keweb(event:MouseEvent):void{
 navigateToURL(new URLRequest("http://aryacreativedesign.blogspot.com.au/"), "_blank");
}

Cara Membuat CD Interaktif di Adobe Flash CS3

Step 13.
Lalu kita ke frame 5 di layer 1 untuk halaman Contact. Di halaman tersebut kita masukkan objek gambar email, twitter dan facebook, dan masing – masing kita jadikan objek button. Dan berikan nama objek button di panel property.
Cara Membuat CD Interaktif di Adobe Flash CS3

Berikut scrip untuk halaman Contact.
stop();

home_btn.addEventListener(MouseEvent.MOUSE_UP,keHome3);
function keHome3(event:MouseEvent):void{
gotoAndPlay("home");
}
mail.addEventListener(MouseEvent.MOUSE_UP,sendmail);
function sendmail(event:MouseEvent):void{
navigateToURL(new URLRequest("mailto:aryacreativedsg@gmail.com"), "_blank");
 
}

twitter.addEventListener(MouseEvent.MOUSE_UP,opentw);
function opentw(event:MouseEvent):void{
navigateToURL(new URLRequest("https://twitter.com/aryacreativedsg"), "_blank");
 
}

facebook.addEventListener(MouseEvent.MOUSE_UP,openfb);
function openfb(event:MouseEvent):void{
navigateToURL(new URLRequest("https://www.facebook.com/aryacreativedsg"), "_blank");
 
}

Cara Membuat CD Interaktif di Adobe Flash CS3

Step 14.
Kembali ke halaman main menu di frame 2 layer 1. sekarang kita akan memberikan efek button pada setiap button di main menu. Dengan cara double klik objek button contohnya button Tetang. Tampilan timeline akan terlihat seperti gambar di bawah. Terlihat berbeda time line untuk button di nama frame yang di butuhkan hanya 3, yaitu frame 1 “Up” menampilkan objek ketika belum di klik, frame 2 “Over” untuk menampilkan objek ketika kursor berada di objek button, dan belum di klik, frame 3 “Down” untuk menampilkan objek ketika di klik.

Cara Membuat CD Interaktif di Adobe Flash CS3

Di sini kita buat 2 layer. Layer 1 untuk objek, dan layer 2 untuk sound effect. Cara memasukkan sound effect pada objek button, klik frame yang di nama kita inginkan misalnya di frame 3 ketika button sudah di klik, lalu klik drag sound effect yang berada di library ke stage. Maka akan terlihat seperti pada gambar di bawahj jika sound berhasil di masukkan.

Cara Membuat CD Interaktif di Adobe Flash CS3


Step 15.
kita akan memasukan effect suara pada opening. Pertama siapkan file sound bersama file Flash yang sedang kita kerjakan. Kemudian klik kanan frame 1 layer 2 dan pilih Action untuk menambahkan scrip sound effect. Dan berikut scripnya.

var mySound:Sound = new Sound();
mySound.load(new URLRequest("bgsound.mp3"));
mySound.play();

Cara Membuat CD Interaktif di Adobe Flash CS3
  

Step 16.
untuk sentuhan terakhir kita bisa tambahkan Background. Caranya dengan menambahkan layer baru dan letakkan di bawah layer 1. dan jangan lupa untuk mengunci objek backgroung, dapat di lihat pada gambar di bawah.
Cara Membuat CD Interaktif di Adobe Flash CS3

Cara Membuat CD Interaktif di Adobe Flash CS3


Step 17.
Selajutnya Export file flash menjadi EXE, pastikan mouse tidak menyeleksi objek apapun. Kemudian pada panel property pada kolom Publis klik Settings. Dan akan muncul window baru, pada tab formats pilih hanya option Windows Projector (.exe) lalu klik Ok dan klik lagi Publish.

Cara Membuat CD Interaktif di Adobe Flash CS3

Step 18.
Buat file Autorun mengguunakan Notepad dan ketik seperti gambar di bawah. Pastikan nama file Exe dan file icon yang sudah di persiapkan sesuai, agar dapat berjalan lancar ketika di burn ke CD-R.

Cara Membuat CD Interaktif di Adobe Flash CS3
Kemudian simpan filenya dengan nama AUTORUN.INF

Cara Membuat CD Interaktif di Adobe Flash CS3

Finish, buat seluruh file menjadi satu folder dan burn semua file.

Cara Membuat CD Interaktif di Adobe Flash CS3

Sekian artikel Cara mudah membuat CD Interaktif. Semoga bermanfaat bagi semua, terutama yang baru dalam menggunakan Adobe Flash. Terimakasih sudah berkunjung.

Download CD Interaktif resource

0 comments: