Pages

Subscribe:

Senin, 10 Desember 2012

Membuat Website Berbasis Flash

Pada postingan saya kali ini, saya akan memberikan materi tentang bagaimana cara membuat sebuah website pribadi berbentuk web flash. Software yang akan kita gunakan adalah Adobe Flash, software ini selain dapat digunakan untuk membuat animasi, presentasi juga dapat digunakan untuk membuat sebuah website. Berikut adalah cara pembuatan website flash sederhana :

Pertama, ketika kita membuka Adobe flash pilih Flash file (action script 2.0)


Kemudian akan muncul tampilan seperti ini :

Atur dimensi document dengan memilih menu Modify, pilih document,  setelah itu akan muncul kotak dialog seperti ini dan atur size 640 x 480 pixel

Ubah background dengan warna hitam

Selanjutnya kita akan membuat tombol, buat sebuah layer baru dan beri nama tombol pada layar tersebut.

Selanjutnya kita akan membuat tombol, klik ractangel tool

Buat design tombol sekreatif anda pada layar kerja, misalnya seperti ini :

Kemudian aktifkan objek tombol tersebut lalu pilih insert, new symbol (F8) dan pilih sebagai movie clip

Setelah itu klik 2x pada objek tombol, maka kita akan dibawa pada frame bar yaitu didalam symbol 1, disini akan kita animasikan tombol tadi agar terlihat menarik.

Untuk membuatnya bergerak kita ubah letak tombol itu dengan digeser pada setiap framenya, untuk mengkopi ke frame selanjutnya gunakan tombol F6, kreasikan tombol anda dan buat semenarik mungkin.
Jika sudah, agar pergerakan animasi tidak berulang, maka pada frame terakhir kita beri script stop, untuk itu kita klik pada frame terakhir lalu tekan tombol f9, maka akan muncul kottak dialog seperti ini :

Pilih stop pada menu timeline control, cukup diklik 2x, setelah itu close kotak dialog tadi.

Masih pada frame terakhir, kali ini kita akan menjadikan gambar tombol pada frame terakhir menjadi sebuah button, klik pada gambar tombol, kemudian tekan tombol F8 dan pilih convert to button :

Setelah diklik OK, kita klik 2x pada objek tombol tersebut, maka seperti pada frame movie clip tadi, kita akan dibawa pada frame symbol2, namun yang membedakan di sini adalah pada frame button haya terdapat 4 frame, yaitu UP, OVER, DOWN dan HIT.

Sedikit penjelasan :
UP : keadaan button sebelum dieksekusi
OVER : Keadaan butto ketika disorot oleh cursur
DOWN : Keadaan button ketika diKlik
HIT : Jangkauan area aktif button

Tekan tombol f6 sebanyak 4 kali sampai semua frame terisi.

Setelah itu klik pada “Symbol 1” untuk kembali ke frame movie clip tombol.
Buat lah beberapa tombol kembali sebanyak yang anda butuhkan dengan mengikuti step by step seperti tadi.

Selanjutnya kita kembali ke frame scene, dan kini kita akan membuat isi dari masing2 tombol, kali ini saya akan mencontohkan isi dari tombol profile.
Buat layer baru dan beri nama layer tersebut dengan isi.

Kita akan memulainya pada frame ke2, untuk itu kita tekan tombol F6
Lalu isikan dengan data-data sesuai dengan keinginan kalian.
  
Buat layer baru dan beri nama Stop, kemudian tekan tombol F9 dan pilih STOP

Masuk ke frame button dan tekan tombol F9 lalu ketikan script seperti ini :

Jika telah selesai maka kita export ke public HTML. Dengan cara klik file, pilih publish setting lalu atur seperti ini :
Klik publish.

File website anda kini telah jadi :D

Selanjutnya kita akan menghosting website kita, caranya adalah. masuk ke website penyedia layanan hosting, salah satunya adalah ID-Hostinger, disini terdapat 2 kategori, yaitu hosting gratis dan hosting berbayar, untuk kali ini saya akan menggunakan hosting yang gratis hehe
Berikut ini adalah langkah-langkah tentang bagaimana cara mendaftar di Idhostinger dan saya sarankan sebaiknya anda menggunakan PC atau UcBrowser
show.php?partnerid=87168&get=mweb&bn=8
1. Silakan anda daftar disini dan kemudian pilih lah menu "Order Sekarang".
show.php?partnerid=87168&get=mweb&bn=9
2. Lengkapilah form pendaftaran serta jangan lupa mencentang pilihan "Saya setuju dengan Ketentuan Penggunaan Layanan" dan kemudian klik menu "Buat Akun".
show.php?partnerid=87168&get=mweb&bn=10
3. Setelah itu silahkan cek email Anda (e-mail yang Anda gunakan saat mendaftar). Idhostinger akan mengirimkan dua (2) email kepada Anda. Email yang pertama tentang peberitahuan bahwa Anda berhasil mendaftar di Idhostinger dan email yang kedua adalah pemberitahuan tentang link aktivasi akun.
show.php?partnerid=87168&get=mweb&bn=7
4.Klik link aktivasi yang ada pada email ke dua untuk mengaktifkan akun Anda. Setelah Anda klik, maka akun Anda akan aktif dan Anda dapat membuat akun di Idhostinger.com


Mengupload File Melalui File Manager
Pilih Kontrol Panel dan buat akun baru  Di halaman isian akun baru, pilih:
  •         Hosting Plan : Gratis,
  •         Di bagian radio buton, pilih : Saya ingin menggunakan domain saya sendiri.
  •         Domain www: isikan dengan nama domain yang telah anda buat di dot.tk (misal: ances-distro.tk)
  •         Password dan isian berikutnya tinggal isi sesuai instruksi, lalu klik tombol submit"
Akses web anda
Klik lagi Kontrol panel dan bakal muncul tombol "beralih"


dan anda bakal masuk ke control panel web sendiri, anda bisa membuat database, membuat email, mengatur domain/subdomain. dll

wokeh hampir kelar sob udah disini mah,, lanjut ke penguploadan file web kita (hasil bikinan kita ataupun CMS)

Untuk melihat Web yang telah saya buat, silahkan klik link ini : 


Referensi : 
Materi Pembelajaran Saat saya sekolah di SMK Cyber Media

4 komentar:

  1. hei kawan, karena kita ini mahasiswa gundar, tolong ya blognya di kasih link UG, seperti
    - www.gunadarma.ac.id
    - www.studentsite.gunadarma.ac.id dan lain lain
    karna link link tersebut mempengaruhui kriteria penilaian mata kuliah soft skill

    Selain itu, Yuk kita ikut lomba 10 kategori lomba khusus bagi mahasiswa Universitas Gunadarma. Edisi
    Desember2012 ini diperuntukan bagi mahasiswa S1 dan D3. Tersedia 100 pemenang, atau 10 pemenang
    untuk setiap kategori. link
    http://studentsite.gunadarma.ac.id/news/news.php?stateid=shownews&idn=755

    oh iya, kalian nggak mau ketinggalan kan untuk update terhadap berita studentsite dan baak , maka dari itu, yuk pasang RSS di Studentsite kalian.. untuk info lebih lanjut bagaimana cara memasang RSS , silahkan kunjungi link ini
    http://hanum.staff.gunadarma.ac.id/Downloads/folder/0.5

    makasi :)

    BalasHapus
  2. Thx gan uda di referensikan blog ane :))

    BalasHapus
    Balasan
    1. yap, makasih juga gan artikelnya udah banyak membantu postingan ini :)

      Hapus
  3. letak frame button dimana ya?

    BalasHapus