Cara Membuat Website Flash Sederhana

39 Comments

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 (28 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 28 ratings

This is author biographical info, that can be used to tell more about you, your iterests, background and experience. You can change it on Admin > Users > Your Profile > Biographical Info page."

 

More from our blog

See all posts
39 Comments
    • Handy Permana
    • April 26, 2013
    Reply

    cara membagi menjadi 4 bagiannya gimana ?

    VA:F [1.9.8_1114]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.8_1114]
    Rating: 0 (from 0 votes)
      • admin
      • April 28, 2013
      Reply

      itu bukan dibagi gan, tapi di-copy sehingga jumlahnya ada 4 halaman. :)

      VN:F [1.9.8_1114]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.8_1114]
      Rating: 0 (from 0 votes)
    • ichiru
    • December 21, 2012
    Reply

    kalo di web responsive,apa bs resposive flashnya??
    klo biar bs responsive gmn gan? :sorry

    VA:F [1.9.8_1114]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.8_1114]
    Rating: 0 (from 0 votes)
      • admin
      • January 13, 2013
      Reply

      Blm pernah coba gan. biasanya sih auto scale gan.

      VN:F [1.9.8_1114]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.8_1114]
      Rating: 0 (from 0 votes)
  1. Reply

    Mw tx, bgmn klw mw buat sub menu nya??
    Terus.. bgmn cara upload ke joomla?? bls yach
    thx sebelumnya, good article.

    VA:F [1.9.8_1114]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.8_1114]
    Rating: 0 (from 0 votes)
      • admin
      • December 7, 2012
      Reply

      kalo sub menu ribet gan, scriptnya banyak. :bingung

      VN:F [1.9.8_1114]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.8_1114]
      Rating: 0 (from 0 votes)
    • Eboy
    • October 3, 2012
    Reply

    iwawwwwww sakitt ikh

    VA:F [1.9.8_1114]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.8_1114]
    Rating: 0 (from 0 votes)
    • andreas
    • August 15, 2012
    Reply

    kenapaya saya error pada saat di run(ctrl+enter)

    setelah di cek error di script “mx.transition”

    setelah saya coba tulis “mx.”lalu muncul beberapa pilihan tapi tidak ada pilihan transition.

    tolong dong kira kira apa problemnya ?

    VA:F [1.9.8_1114]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.8_1114]
    Rating: 0 (from 0 votes)
      • admin
      • August 15, 2012
      Reply

      flash versi berapa ?

      VN:F [1.9.8_1114]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.8_1114]
      Rating: 0 (from 0 votes)
  2. Reply

    saya tidak mengerti untuk memotong kotak menjadi beberapa bagian ?

    “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.”

    bagaimana cara membagi menjadi 4 bagian tersebut ?

    thanks before !

    VA:F [1.9.8_1114]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.8_1114]
    Rating: 0 (from 0 votes)
      • admin
      • August 10, 2012
      Reply

      memotongnya menggunakan line tool :)

      VN:F [1.9.8_1114]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.8_1114]
      Rating: 0 (from 0 votes)
  3. Reply

    saya tidak mengerti untuk memotong kotak menjadi beberapa bagian ?

    “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.”

    bagaimana cara membagi menjadi 4 bagian tersebut ?

    thanks beforte !

    VA:F [1.9.8_1114]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.8_1114]
    Rating: 0 (from 0 votes)
  4. Reply

    permisi para master ane mau tanya.
    untuk membagi kotakl menjadi 4 bagian bagaimana caranya ya?

    thanks before…

    VA:F [1.9.8_1114]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.8_1114]
    Rating: 0 (from 0 votes)
  5. Pingback: Cara Membuat Website Dengan Base Flash Sederhana « software-bagus.com

    • Deniar
    • March 11, 2012
    Reply

    saya gak bisa yang memBagi kotak halaman menjadi 4 bagian, sehingga per bagian memiliki panjang 600 piksel.

    VA:F [1.9.8_1114]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.8_1114]
    Rating: +1 (from 1 vote)
    • kevvstevv
    • March 9, 2012
    Reply

    Gan,
    ane g bsa mlu neh
    mhon bntuan’a :)
    email ke kevvstevv@yahoo.com aj
    tq

    VA:F [1.9.8_1114]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.8_1114]
    Rating: 0 (from 0 votes)
      • admin
      • March 9, 2012
      Reply

      di atas sudah ada sourcenya gan.

      VN:F [1.9.8_1114]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.8_1114]
      Rating: 0 (from 0 votes)
    • nina
    • March 2, 2012
    Reply

    admin, kalo pake flash 8 bisa ga? soalnya ko eror melulu yah?

    VA:F [1.9.8_1114]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.8_1114]
    Rating: 0 (from 0 votes)
      • Eboy
      • October 3, 2012
      Reply

      bisa ko apalagi pake hati ak :)

      VA:F [1.9.8_1114]
      Rating: 0.0/5 (0 votes cast)
      VA:F [1.9.8_1114]
      Rating: 0 (from 0 votes)
      • admin
      • March 2, 2012
      Reply

      bisa kok :)

      VN:F [1.9.8_1114]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.8_1114]
      Rating: 0 (from 0 votes)
    • Atta
    • February 9, 2012
    Reply

    mau nanya..kl website yg berbasis flash gini,bisa di koneksikan ke database gak??

    trs kl bisa caranya gmna yah?

    pertanyaan terakhir,untuk website yg menggunakan flash,pada saat proses update website caranya seperti apa..

    mohon di jawab yah
    thx

    VA:F [1.9.8_1114]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.8_1114]
    Rating: 0 (from 0 votes)
  6. Reply

    mas,cara ngatur koordinatnya gimana???
    yang bagian :
    tombol1 = 50
    tombol2 = 580
    tombol3 = 1180
    tombol4 = 1780
    mohon bantuannya…

    VA:F [1.9.8_1114]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.8_1114]
    Rating: 0 (from 0 votes)
      • admin
      • January 21, 2012
      Reply

      mohon dicoba2 aja :D

      VN:F [1.9.8_1114]
      Rating: 5.0/5 (1 vote cast)
      VN:F [1.9.8_1114]
      Rating: 0 (from 0 votes)
    • Reply

      saya mau nanya lagi…
      kalau untuk menentukan koordinat y gimana ya???
      soalnya saya mau arahkan kebawah gituu

      VA:F [1.9.8_1114]
      Rating: 0.0/5 (0 votes cast)
      VA:F [1.9.8_1114]
      Rating: 0 (from 0 votes)
        • admin
        • January 21, 2012
        Reply

        seperti ini gan :
        var myTween:Tween = new Tween(kotak_mc, “_x”, Strong.easeOut, kotak_mc._x, -580, 1, true);
        var myTween2:Tween = new Tween(kotak_mc, “_y”, Strong.easeOut, kotak_mc._y, 100, 1, true);

        VN:F [1.9.8_1114]
        Rating: 0.0/5 (0 votes cast)
        VN:F [1.9.8_1114]
        Rating: 0 (from 0 votes)
    • kikok
    • January 8, 2012
    Reply

    kalau flashnya dihubungin sama database bs gak ya.. terus dipasang di site??
    mohon penjelasannya …

    VA:F [1.9.8_1114]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.8_1114]
    Rating: 0 (from 0 votes)
      • admin
      • January 21, 2012
      Reply

      bisa donk, cuman harus melalui PHP dulu, jadi sebenarnya PHP yang menghubungkan antara flash dengan databasenya. :)
      namun, jika menggunakan database berupa plain text seperti xml, tinggal me-load saja.

      VN:F [1.9.8_1114]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.8_1114]
      Rating: 0 (from 0 votes)
    • lala
    • December 22, 2011
    Reply

    gan ane yg langsung jadi nya gak… ane oba gak bisa.. mentok di frame hit

    VA:F [1.9.8_1114]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.8_1114]
    Rating: 0 (from 0 votes)
      • admin
      • December 28, 2011
      Reply

      dibandingkan sama ini dulu gan :)
      download source code

      VN:F [1.9.8_1114]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.8_1114]
      Rating: 0 (from 0 votes)
  7. Reply

    kalou cara biar jadi kayak gene gmn??
    http://www.alirsyadpwt.com/
    tolong pencerahannya

    VA:F [1.9.8_1114]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.8_1114]
    Rating: 0 (from 0 votes)
    • hendra
    • February 10, 2011
    Reply

    keren keren, cape gue cari ne website, trims bro :D :mrgreen:

    VA:F [1.9.8_1114]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.8_1114]
    Rating: 0 (from 0 votes)
      • admin
      • February 12, 2011
      Reply

      sama2 bro :shakehand

      VN:F [1.9.8_1114]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.8_1114]
      Rating: 0 (from 0 votes)
    • aRRow
    • January 19, 2011
    Reply

    Om,, gmn cara masukkin html nya di Blogspot?? :?:
    And gimana cara upload *.swf nya??? :?:

    VA:F [1.9.8_1114]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.8_1114]
    Rating: -1 (from 1 vote)
      • admin
      • January 29, 2011
      Reply

      kalo memasukkan swf bisa dilihat di sini.

      Sedang upload .swf-nya seperti biasa kalo mau upload gambar atau file ke server.

      VN:F [1.9.8_1114]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.8_1114]
      Rating: 0 (from 0 votes)
      • aRRow
      • January 19, 2011
      Reply

      Balas ke emailQ ya Om!!! :D

      VA:F [1.9.8_1114]
      Rating: 0.0/5 (0 votes cast)
      VA:F [1.9.8_1114]
      Rating: 0 (from 0 votes)
  8. Reply

    ooh.. gunanya klo buat buka yg html nya yah…
    hehe…
    soalnya pusing liat script yg *.js nya….
    efek nya buat apa ya ??

    VA:F [1.9.8_1114]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.8_1114]
    Rating: +1 (from 1 vote)
    • Reply

      sebenarnya itu dipake buat mendeteksi apakah browsernya sudah diinstall flash player ato belum, ato bisa juga kalo versi flash player nya lebih rendah dari yang dibutuhin, misal swf-nya versi 10, terus browsernya masih pake versi 8.

      VN:F [1.9.8_1114]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.8_1114]
      Rating: 0 (from 0 votes)
  9. Reply

    om..om.. mau tanya… klo file AC_RunActiveContent.js gunanya apa ya ??
    koq mo di hapus atau ngga, masih jalan aja file swf nya….
    thx…

    VA:F [1.9.8_1114]
    Rating: 5.0/5 (1 vote cast)
    VA:F [1.9.8_1114]
    Rating: +1 (from 1 vote)
 

Leave a Comment

[+] kaskus emoticons nartzco