| Tutorial Flash - HTML5 - Javascript - DKV

Latest Blog



23.10.2020

Virtual Lab Flash

Library untuk pengembangan laboratorium virtual dengan Flash/Animate

06.10.2020

Game Among Us

Membuat gerakan karakter seperti pada game Among Us

05.10.2020

Multimedia Interaktif Tata Surya

Membuat Multimedia Pembelajaran Interaktif tentang tata surya

04.10.2020

Animasi Rotasi Bumi 3D

Membuat animasi bumi berotasi dengan grafik 3 Dimensi

01.10.2020

Membuat Kuis Essay

Mengecek jawaban kuis essay pada aplikasi pembelajaran interaktif

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


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