Cara Membuat Website Flash Sederhana

Baik, saya sekarang akan membuat sebuah website yang full dengan konten flash, sehingga hanya sedikit komponen HTML-nya.

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

    panel properties

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

    menu

    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

    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

    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

    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)

    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

    Convert to Movieclip

  • Jangan lupa untuk mengganti instance name-nya menjadi kotak_mc.

    kotak_mc

    kotak_mc

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

    Preview

    Preview

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

    tombol fullscreen

    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 :
    import mx.transitions.Tween;
    import mx.transitions.easing.*;
    
    tombol1_btn.onRelease=function(){
    	var myTween:Tween = new Tween(kotak_mc, "_x", Strong.easeOut, kotak_mc._x, 20, 1, true);
    }
    tombol2_btn.onRelease=function(){
    	var myTween:Tween = new Tween(kotak_mc, "_x", Strong.easeOut, kotak_mc._x, -580, 1, true);
    }
    tombol3_btn.onRelease=function(){
    	var myTween:Tween = new Tween(kotak_mc, "_x", Strong.easeOut, kotak_mc._x, -1180, 1, true);
    }
    tombol4_btn.onRelease=function(){
    	var myTween:Tween = new Tween(kotak_mc, "_x", Strong.easeOut, kotak_mc._x, -1780, 1, true);
    }
    
    fullscreen_btn.onRelease=function(){
    	//fullscreen di projector
    	//fscommand("fullscreen","true");
    	//fullscreen pada browser
    	Stage.displayState="fullScreen";
    }
  • Kemudian buka publish setting pada Menu File -> Publish Settings, pastikan pengaturan seperti pada gambar.

    Publish Settings

    Publish Settings

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

VN:F [1.9.8_1114]
Rating: 8.9/10 (25 votes cast)
VN:F [1.9.8_1114]
Rating: +11 (from 11 votes)
Cara Membuat Website Flash Sederhana, 8.9 out of 10 based on 25 ratings

Related posts:

  1. Cara Memasukkan Flash di Blog/Website
  2. Membuat Layar Tampak Full Screen di Flash
  3. Membuat Presentasi Sederhana di Flash
  4. Cara Masking di Flash
  5. Menampilkan Flash secara Fullscreen pada Browser