Company Profile Flash CS 5 [AS-3]

Tutorial membuat company profile flash CS 5. Kali ini Saya akan memberikan tutorial tentang bagaimana membuat Company Profile sederhana dengan Adobe Flash CS5 menggunakan ActionScript 3.0.

Tutorial Membuat Company Profile

Berikut adalah langkah-langkah untuk membuat company profile dengan adobe Flash cs5.
1. Buka file flash baru, denga pilihan ActionScript 3.0

Pengaturan File Flash

2. Setelah lembar kerja baru Flash terbuka, selanjutnya buatlah objek persegi dengan Rectangle Tool (R), buat persegi pada Stage dengan warna objek hitam dan posisikan seperti gambar berikut.

Posisi objek rectangle pada Stage

3. Pilih objek persegi (rectangle) kemudian ubah ke simbol dengan cara pilih menu Modify > Convert to Symbol… (F8), beri nama info dan pilih type = Movie Clip.

Mengubah ke Symbol Movie Clip

4. Pastikan objek movie clip tadi dalam keadaan terpilih, lalu buka panel Properties, beri nama “info” (tanpa tanda petik) pada Instance name.

Memberikan instance name pada symbol

5. Selanjutnya edit symbol movie clip info tadi dengan cara pilih objek lalu klik kanan dan pilih Edit in Place untuk masuk kedalam modus edit simbol. Setelah masuk ke modus edit simbol, klik di Frame 1 lalu tekan tombol F9 untuk membuka panel Action, lalu ketikan script :
stop();
Tutup panel Action tersebut, klik di frame 2 lalu klik kanan pilih Insert Keyframe, ubah warna objek menjadi hijau.

Objek pada frame 2

Klik di frame 3, klik kanan dan pilih Insert Keyframe, ubah warna objek menjadi warna biru, dan untuk frame 4 ubah warna menjadi merah.
Setelah keempat frame terisi oleh objek persegi dengan warna yang berbeda, kembali ke Scene 1 dengan cara pilih menu Edit > Edit Document untuk kembali ke scene utamanya.
Selanjutnyanya adalah membuat empat buah tombol untuk dapat menavigasikan keempat objek tersebut yang berada pada simbol movie clip info.
Buat objek persegi kecil dengan Rectangle Tool (R) dan beri warna hitam, buat objek pada Stage dan posisikan seperti gambar berikut.

Objek rectangle pada Stage

Pilih objek rectangle kecil, kemudia ubah menjadi simbol. Pilih menu Modify > Convert to Symbol.. (F8) lalu berikan nama “home” dan pilih type Button.

Mengubah ke simbol button

Objek simbol button masih dalam keadaan terpilih, edit simbol tersebut untuk masuk ke modus edit simbol. Lalu klik di Frame UP, dengan Text Tool (T) tuliskan “HOME” dengan warna teks putih dan size = 20. Posisi teks seperti gambar berikut.

Teks pada tombol home

Selanjutnya adalah membuat ketiga tombol yang tersisa yaitu tombol PROFIL, GALERI dan KONTAK. Buatlah ketiga tombol tersebut dengan cara yang sama seperti cara membuat tombol HOME tadi. Kemudian posisikan tombol-tombolnya seperti pada gambar berikut.

Posisi tombol pada stage

Setelah keempat tombol diatas dibuat, selanjutnya adalah memberikan instance name pada keempat tombol tersebut untuk membuat variable pemanggil pada actionScriptnya. Berikut adalah nama-nama instance pada tiap-tiap tombolnya:

instance name home

tombol HOME instance name = home
tombol PROFIL instance name = profil
tombol GALERI instance name = galeri
tombol KONTAK instance name = kontak
Semua instance name telah diberikan, kemudian tambahkan Layer baru dengan cara pilih menu Insert > Timeline > Layer, ubah nama layer menjadi Action. Klik di frame 1, buka panel Action tekan F9 pada keyboard dan tuliskan script berikut:

import flash.events.MouseEvent;
stop();
home.addEventListener(MouseEvent.CLICK, tombolHome);
function tombolHome(event:MouseEvent):void{
info.gotoAndStop(1);
}
profil.addEventListener(MouseEvent.CLICK, tombolProfil);
function tombolProfil(event:MouseEvent):void{
info.gotoAndStop(2);
}
galeri.addEventListener(MouseEvent.CLICK, tombolGaleri);
function tombolGaleri(event:MouseEvent):void{
info.gotoAndStop(3);
}
kontak.addEventListener(MouseEvent.CLICK, tombolKontak);
function tombolKontak(event:MouseEvent):void{
info.gotoAndStop(4);
}

Tekan Ctrl + Enter untuk melihat hasilnya, dan simpanlah hasil pekerjaan Anda. Selamat berkreasi dan Anda juga dapat memodifikasinya dengan menambahkan teks informasi atau gambar pada setiap halaman tersebut.

Sumber :  http://www.gapranimator.com