| flash game tutorial and flare3d games

Latest Blog



07.04.2018

Membuat Game Tebak Gambar

Tutorial membuat game tebak gambar dengan Flash

03.07.2017

Memahami konstain

Memahami penggunaan konstrain dalam membuat sistem gerak

28.01.2017

E-Book Media Pembelajaran

E Book Gratis Membuat Media Pembelajaran Interaktif

15.12.2016

Membuat mouse trail

Membuat animasi ikan mengikuti kursor mouse

23.04.2016

Animasi Karakter Game RPG Flash

Membuat animasi karakter dalam game RPG Flash

23.04.2016

Aplikasi Peta Game RPG Flash

Mengaplikasikan Map Editor untuk peta game RPG Flash

23.04.2016

Membuat Peta Game RPG Flash

Membuat peta untuk game RPG Flash

23.04.2016

Mengerakkan Karakter Game RPG

Menambahkan karakter dalam game RPG Flash

23.04.2016

Membuat Game RPG

Membuat game RPG Flash actionscript 3 dengan teknik tiling

31.12.2015

Indonesia Soccer League

Sekilas tentang pengembangan game sepakbola dengan Flash


ALL BLOG

Latest Games


;
Free Games

Indonesia Soccer League

Play Indonesian Soccer League on Flash 3D Games

Dasar Navigasi (Mengatur tombol interaktif multimedia)

Konsep Dasar

Tombol adalah salah satu elemen penting dalam sebuah media interaktif. Tombol berfungsi untuk mengatur sistem navigasi dari aplikasi yang kita buat. Pembuatan kode untuk tombol pada aplikasi Adobe Flash actionscript 3.0 (AS 3) berbeda dengan actionscript versi 1 atau 2 (AS 2). Apabila pada AS 1/2 kode bisa dituliskan langsung pada tombol terkait seperti contoh berikut :



on(release){
	gotoAndStop(1);
}
				

Kode tersebut di atas tidak bisa dipakai lagi pada AS 3. AS 3 boleh jadi "tidak se-fleksible" AS 1/2 dalam urusan penulisan script/kode, akan tetapi justru AS 3 lah yang memiliki standart penulisan kode yang benar. AS 3 pada akhirnya dijadikan standart oleh Adobe untuk aplikasi Flash dan Adobe Air. Dan perlu diketahui bahwa AS 1/2 sudah ditinggalkan sejak tahun 2007, jadi bagi anda yang masih "terjebak" dengan kemudahan AS 1/2 segeralah berhijrah sebelum terlambat.

Berbeda dengan AS1/2, untuk mengatur objek dalam AS 3 digunakan kode addEventListener. Terkait dengan istilah Object Oriented Programming (Pengkodean berbasis objek), untuk mempelajari AS 3 dengan cara mudah ada 3 langkah penting yang hampir sebagian besar digunakan dalam pemrograman aplikasi menggunakan AS 3, yaitu:


  1. Membuat objek (movie clip, button, video, sound dsb)
  2. Memberikan nama pada objek tersebut (Linkage dan instance name)
  3. Menuliskan kode

Penjelasan masing-masing langkah diatas akan dibahas secara lebih mendetail pada bagian selanjutnya.

Mengatur Navigasi Halaman dengan AS 3

Fitur utama dari sebuah interaktif multi-media adalah sistem navigasi. Navigasi disini bisa diartikan secara sederhana sebagai sistem yang mengatur perpindahan antar halaman. Perhatikan contoh berikut untuk membuat sistem navigasi sederhana (dengan 2 buah halaman) :




Langkah 1 : Membuat objek


Objek-objek yang kita perlukan untuk tutorial ini adalah tombol dan 2 buah gambar yang berbeda untuk masing-masing halaman. Untuk membuatnya buka aplikasi Adobe Flash CS 3 ke-atas (saat tutorial ini ditulis versi terbaru adalah Adobe Flash CS 6, akan tetapi saya menggunakan Adobe CS 5). Kemudian ikuti langkah-langkah berikut :

  1. Buatlah sebuah file baru dengan memilih menu File > New . Pada dialog New Document pilih opsi ActionScript 3.0

    interactive multi media by wandah_w
  2. Pada panel Properties yang secara default terletak di sebelah kanan, atur ukuran aplikasi ini menjadi 800 x 600 pixel dan 30 FPS (FPS adalah jumlah frame per detik, yang digunakan untuk menentukan kecepatan dari animasi atau kode pada aplikasi. Secara standart FPS yang optimal adalah 30 FPS, sesuai dengan kecepatan mata manusia dalam menangkap gambar per detik)

    interactive multi media by wandah_w
  3. Untuk membuat tombol, buatlah sebuah bentuk kotak dengan menggunakan rectangle tool (pada panel Tools di sebelah kiri), atur warna Stroke (garis tepi) dan Fill (warna isi). Selain itu anda juga dapat membuat bentuk kotak dengan sudut bulat dengan mengatur opsi Rectangle Corner Radius (pada panel Properties di sebelah kanan). Klik dan drag di Stage (layar) sampai mendapatkan ukuran yang anda kehendaki.

    interactive multi media by wandah_w
  4. Untuk menambahkan text pada tombol, gunakan Text Tool. Klik Text Tool kemudian perhatikan panel Properties. Pada panel tersebut pilihlah opsi Classic Text, Static Text, dan lakukan pengaturan jenis huruf. Setelah itu anda dapat menuliskan teks "Tombol 1" di atas kotak yang sudah dibuat pada langkah 3.

    interactive multi media by wandah_w
  5. Untuk menjadikan kotak dan teks tersebut sebagai tombol, seleksi kotak dan text tersebut, kemudian pilih menu Modify > Convert to Symbol. Pada dialog Convert to Symbol ketikan "Tombol 1" pada kolom name dan pilih type Button, lalu klik tombol OK

    interactive multi media by wandah_w
  6. Dengan cara yang sama buatlah "Tombol 2" dan letakkan di samping tombol 1
  7. Karena kita memiliki 2 halaman, maka kita membutuhkan setidaknya 2 frame, untuk itu klik kanan frame 2 layer 1, kemudian pilih menu insert frame

    interactive multi media by wandah_w
  8. Buatlah 2 buah layer baru, dengan cara menekan tombol New Layer, kemudian ubah namanya (dengan double klik nama layer), menjadi layer Kode, Tombol, dan Konten. Atur posisinya dimana layer Kode berada paling atas, Layer tombol tempat "Tombol 1" dan "Tombol 2" berada di tengah, dan layer "Konten" berada di bawah.

    interactive multi media by wandah_w
  9. Untuk menambahkan konten, klik frame 1 layer konten, kemudian pilih menu File > Import > Import to Stage, kemudian pilihlah file gambar pertama. Klik OK dan gambar tadi akan tampak pada Stage, atur ukuran dan posisinya menggunakan Panel Properties

    interactive multi media by wandah_w
  10. Untuk menambahkan konten halaman 2, klik kanan frame 2 layer konten, kemudian pilih menu Insert Blank KeyFrame, kemudian import gambar ke 2 dengan cara yang sama dengan langkah sebelumnya. Atur ukuran dan posisinya menggunakan Panel Properties

    interactive multi media by wandah_w
  11. Langkah tahapan membuat objek selesai sampai disini. Simpan file dengan menekan tombol Ctrl+S

Langkah 2 : Memberikan nama pada objek


Setelah objek dibuat, tahapan selanjutnya adalah menambahkan nama pada masing-masing objek yang akan diakses oleh script. Dalam kasus ini yang akan diberikan kode adalah "Tombol 1" dan "Tombol 2". Ikuti langkah-langkah berikut untuk menambahkan nama pada objek tombol :


  1. Klik tombol 1, kemudian pada panel properties ketikan "tombol_1" pada kolom instance name.

    interactive multi media by wandah_w
  2. Dengan cara yang sama, klik tombol 2, kemudian pada panel properties ketikan "tombol_2" pada kolom instance name.

Langkah 3 : Menambahkan kode


Setelah pemberian nama, tahapan selanjutnya adalah menambahkan kode. Perlu diketahui bahwa kode AS 3 tidak lagi dapat diketikan pada objek movieclip maupun button. AS 3 hanya bisa diketikan di frame dan di file actionscript. Untuk menambahkan kode lakukan langkah berikut :

  1. Klik frame 1 layer kode, kemudian buka panel action.(Tekan F9 apabila panel belum aktif. Kemudian matikan tombol Script assist untuk mempermudah proses penulisan kode.

    interactive multi media by wandah_w
  2. Selanjutnya ketikan kode berikut :
import flash.events.MouseEvent;

stop(); //menghentikan frame agar tidak berulang terus menerus
//menambahkan listener click 
tombol_1.addEventListener(MouseEvent.CLICK, klik_tombol);
tombol_2.addEventListener(MouseEvent.CLICK, klik_tombol);

//fungsi klik_tombol
function klik_tombol(e:MouseEvent):void{
	var nama_tombol:String = e.currentTarget.name;
	if (nama_tombol == "tombol_1"){
		gotoAndStop(1); // ke frame 1 jika tombol_1 ditekan
	}
	if (nama_tombol == "tombol_2"){
		gotoAndStop(2); // ke frame 2 jika tombol_1 ditekan
	}
}
				

  1. Simpan file, kemudian jalankan dengan menekan tombol Ctrl+Enter. Jika proses yang anda lakukan benar, dan penulisan kode benar, akan anda dapatkan aplikasi dimana anda bisa berpindah dari halaman 1 ke halaman 2 dengan menekan tombol.


Get Adobe Flash player

File Sumber


download



Share ( Ayo Berbagi )

Leave me a comment

untuk pertanyaan lebih baik di email langsung ke wandah [at] wandah [dot] com agar cepat direspon