| 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

Efek Flip Book (Mengganti halaman buku)

Konsep Dasar

Efek mengganti halaman / membuka halaman buku per lembar cukup menarik untuk ditambahkan dalam sebuah aplikasi. Efek membalik buku atau dikenal sebagai flip book dapat kita peroleh dengan mudah lewat search engine. Akan tetapi pada umumnya untuk mendapatkan efek yang baik diperlukan pemahaman yang baik terhadap beberapa baris kode, kode XML serta kode untuk mengatur bitmap data - hal inilah yang menyebabkan pemula sulit untuk mengaplikasikan efek flipbook pada interaktif multimedia yang mereka buat.


Pada tutorial ini akan dijelaskan tentang pembuatan efek flipbook sederhana, dengan menggunakan animasi motion tween - halaman diganti secara manual. Tutorial ini cocok digunakan untuk efek flipbook dengan jumlah halaman yang sedikit, dan bagi seseorang yang belum mengenal banyak kode AS3.


Membuat Efek animasi buku

Buatlah sebuah movieclip baru dengan nama Animasi buku. Kemudian buatlah efek animasi buku yang membuka halaman demi halama di dalam movieclip tersebut. Untuk membuat animasi buku anda dapat menggunakan classic / motion tween dengan memanfaatkan 3 buah layer. 1 layer paling bawah adalah halaman yang tertumpuk (halaman lama), 2 layer di atasnya adalah layer untuk animasi halaman selanjutnya.


interactive multi media by wandah_w

Sebagai contoh terdapat animasi pergantian 6 halaman buku. Setelah animasi 1 halaman selesai, lakukan copy-paste frame untuk menghemat waktu kerja, sekaligus untuk mendapatkan efek yang sama ditiap2 halamannya.

Get Adobe Flash player

Setelah animasi buku selesai dibuat, Pada frame 1, 21, 41 dan 61 yang merupakan frame tempat buku secara terbuka penuh, kode yang diketikan adalah :


stop();

interactive multi media by wandah_w

Kembali ke scene 1, kemudian simpan project.


Menambahkan tombol dan nama instansi

Buatlah 2 buah layer baru, ubah nama masing-masing layer menjadi layer kode, tombol, dan buku. Letakkan movieclip animasi buku pada layer buku, kemudian buatlah dua buah tombol untuk mengatur halaman sebelumnya / halaman berikutnya.

Selanjutnya berikan nama instance pada masing-masing objek. Ketikan nama mc_buku untuk movieclip animasi buku, t_next untuk tombol halaman selanjutnya dan t_prev untuk tombol halaman sebelumnya


interactive multi media by wandah_w

Menambahkan Kode

Klik frame 1 layer kode, kemudian ketikan kode berikut :

import flash.events.MouseEvent;
import flash.events.Event;

var waktu_balik:Number = 0; //variable untuk menyimpan waktu membalik hal

//menambahkan listener click 
t_next.addEventListener(MouseEvent.CLICK, klik_tombol);
t_prev.addEventListener(MouseEvent.CLICK, klik_tombol);

//menambahkan listener enterframe, supaya mc_buku bisa kembali ke hal sblmnya
mc_buku.addEventListener(Event.ENTER_FRAME, balik_buku);

//fungsi klik_tombol
function klik_tombol(e:MouseEvent):void{
	var nama_tombol:String = e.currentTarget.name;
	if (nama_tombol == "t_next"){
		waktu_balik = 20;// 20 adalah kelipatan pergantian halaman
	}
	if (nama_tombol == "t_prev"){
		waktu_balik = -20; // 20 adalah kelipatan pergantian halaman
	}	
}

//listener untuk membalik halaman ke hal sebelumnya
function balik_buku(e:Event):void{
	var ob:Object = e.currentTarget;
	if (waktu_balik>0){
		waktu_balik--;
		ob.nextFrame();
		//menyembunyikan tombol ketika proses animasi
		t_next.visible = false;
		t_prev.visible = false;		
	}else if (waktu_balik<0){
		waktu_balik++;
		ob.prevFrame();
		//menyembunyikan tombol ketika proses animasi
		t_next.visible = false;
		t_prev.visible = false;		
	}else{
		//menampilkan tombol kembali
		t_next.visible = true;
		t_prev.visible = true;
	}
}


Flash AS 3 memiliki kode play(); dan nextFrame(); untuk memainkan frame selanjutnya. Akan tetapi Flash tidak bisa memutar balik frame nya secara terus menerus, karena hanya ada kode prevFrame(); dimana digunakan untuk mundur 1 frame. Sehingga kita membutuhkan sebuah perintah agar kode prevFrame(); dijalankan secara terus menerus sampai halaman yang kita inginkan. Dan perintahah tersebut adalah listener yang dijalankan secara berulang (pada baris mc_buku.addEventListener(Event.ENTER_FRAME, balik_buku);). Dengan adanya fungsi balik_buku animasi buku akan dimainkan maju atau mundur tergantung tombol yang di tekan.

Hasil dari tutorial ini adalah sebagai berikut:


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