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

  • Download Fix It Portable Fix It adalah tools dari Microsoft yang berguna untuk membantu anda untuk memecahkan permasalahan pada komputer. Fix it akan melakukan scanning pada system anda dan a ...
  • Download 3D Interior Wallpaper, Atur Icon Desktop PC 3 Dimensi Biasanya, gambar wallpaper yang kita pasang di desktop PC / laptop atau juga di ponsel, hanya diperuntukkan sebagai hiasan latar belakang tampilan layar komputer/po ...
  • Domain Gratis .in /1 year  1. Buka Link initrus Klik Create my free website now 2. Nanti pas pengisian ID Document pilih Permanent Account Number (PAN) isi PAN Number dengan kode ber ...
  • Mini Lyrics 7.5.21 Full Version Mini Lyrics 7.5.21 full version adalah software yang berfungsi untuk menampilkan lirik lagu yang sedang diputar, dengan catatan lagu yang kita putar memiliki fil ...
  • Situs Tempat Download Film GRATISBagi kamu yang suka nonton film mungkin akan kebingunan untuk mencari tempat download film gratis yang lengkap dan cepat tentunya. Kebanyakan untuk situs download film i ...

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 :)