Share tutorial menarik dan tips unik seputar blogger.

Friday 13 April 2012

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

Share on Facebook
Share on Twitter
Share on Google+

Related : Membuat Website Flash Sederhana

0 comments:

Post a Comment

Tidak boleh spam
tidak boleh ceplas ceplos

berkomentarlah dengan baik, karena kriteria orang bisa di nilai dari apayang dia komentari :)