| Tutorial Flash - HTML5 - Javascript - DKV

Latest Blog



12.09.2020

Membuat Game Ular Tangga

Membuat game ular tangga dengan Adobe Flash/Animate AS3

10.09.2020

Membuat Pengacak Dadu

Membuat acak dadu untuk game ular tangga/monopoly

13.07.2020

Membuat Game Onet

Membuat game mencari gambar yang sama (onet) dengan JS/HTML5

11.06.2020

Membuat Kuis CBT

Membuat kuis CBT, menyimpan nilai ke server dengan PHP dan XML

11.05.2020

Game RPG dengan HTML Canvas (Javascript)

Pengembangan game RPG dengan teknik tiling menggunakan HTML canvas

19.05.2020

Membuat Fitur Swipe Mobile

Membuat fitur swap / drag konten untuk mobile

12.05.2020

Membuat Grafik Fungsi Kuadrat dengan Flash

Membuat kurva fungsi kuadrat dengan kode actionscript 3 Flash

11.05.2020

Membuat Kordinat Kartesius dengan Flash

Membuat sistem kordinat kartesius dengan code AS3 full

16.03.2020

Game Edukasi RPG

Buku pengembangan game RPG bermuatan edukasi

31.07.2019

Perpustakaan Baru UNNES

Mengintip perpustakaan baru UNNES


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