Selasa, 03 Juli 2012

Cara Membuat Website Dengan Base Flash Sederhana

Selamat Sore Sobat, kali ini saya akan membahas cara membuat web dengan based flash

Cara pembuatan :

Siapkan sebuah dokumen flash baru menggunakan Flash CS 3, karena kita perlu Flash Player 9 untuk agar dapat fullscreen pada browser.
Atur ukuran dari stage menjadi 640 piksel x 480 piksel.

panel properties
Gambar 4 buah teks agar berguna sebagai link, yaitu : home, project, link, about me.

menu
Tulisan tersebut masih berupa teks, sekarang kita ubah menjadi button, sehingga semua terdapat 4 button. Klik kanan pada masing-masing teks, pilih Convert to Symbol, pilih button dan klik OK.

Convert to Symbol
Setelah itu klik 2 kali pada tombol yang baru saja dibuat, tambahkan area pada frame hit. Gunanya adalah agar ketika mouse memasuki area tersebut, maka tombol akan bisa di-klik.

Masuk ke dalam Button
Setelah sudah, klik 2 kali pada area kosong untuk kembali ke stage. Terapkan teknik tersebut ke masing-masing teks menu.
Beri instance name masing-masing tombol yang telah dibuat seperti gambar ini. Memberikan instance name, cukup klik pada button tersebut dan tekan Ctrl + F3untuk menampilkan panel properties.

Instance Name
Buatlah sebuah kotak berukuran 2400 piksel x 350 piksel pada stage pada posisi x = 20 dan y = 70. Bagi menjadi 4 bagian, sehingga per bagian memiliki panjang 600 piksel.

Kotak (Klik untuk memperbesar)
Seleksi kotak tersebut, dan klik kanan kemudian pilih Convert to Symbol pilih MovieClip. Pastikan titik registrasi berada di kiri.

Convert to Movieclip
Jangan lupa untuk mengganti instance name-nya menjadi kotak_mc.

kotak_mc
Sekarang, masuk ke dalam kotak tersebut, dan kita edit bagian dalamnya , kira2 seperti ini :

Preview
Sekarang buat sebuah tombol untuk fullscreen. Beri nama fullscreen_btnsebagai instance name-nya.

tombol fullscreen
Sekarang lanjut ke script (actionscript 2.0). Buat sebuah layer baru, klik pada frame 1, tekan F9 untuk memunculkan panel Actions – Frame. Ketik syntax berikut :
01 import mx.transitions.Tween;
02 import mx.transitions.easing.*;
03
04 tombol1_btn.onRelease=function(){
05     var myTween:Tween = new Tween(kotak_mc, "_x", Strong.easeOut, kotak_mc._x, 20, 1, true);
06 }
07 tombol2_btn.onRelease=function(){
08     var myTween:Tween = new Tween(kotak_mc, "_x", Strong.easeOut, kotak_mc._x, -580, 1, true);
09 }
10 tombol3_btn.onRelease=function(){
11     var myTween:Tween = new Tween(kotak_mc, "_x", Strong.easeOut, kotak_mc._x, -1180, 1, true);
12 }
13 tombol4_btn.onRelease=function(){
14     var myTween:Tween = new Tween(kotak_mc, "_x", Strong.easeOut, kotak_mc._x, -1780, 1, true);
15 }
16
17 fullscreen_btn.onRelease=function(){
18     //fullscreen di projector
19     //fscommand("fullscreen","true");
20     //fullscreen pada browser
21     Stage.displayState="fullScreen";
22 }
Kemudian buka publish setting pada Menu File -> Publish Settings, pastikan pengaturan seperti pada gambar.

Publish Settings
Kemudian klik Publish agar file Html dan .swf terbentuk.
Untuk demo silakan lihat di sini