| Tutorial Flash - HTML5 - Javascript - DKV

Latest Blog



06.07.2022

MPI Component

Library untuk pengembangan multimedia interaktif dengan Flash/Animate

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


ALL BLOG

Latest Games


;
Free Games

Indonesia Soccer League

Play Indonesian Soccer League on Flash 3D Games

Menambah Suara dan Intro pada Interaktif Multimedia Sederhana

Pendahuluan

Sesuai dengan definisi multimedia, yaitu penggunaan beberapa jenis media, maka suara menjadi elemen penting dalam sebuah aplikasi interaktif. Menambahkan suara ke dalam aplikasi Flash cukup mudah dilakukan dengan menggunakan kode, selain itu juga dapat ditambahkan pengatur suara on dan off. Untuk lebih jelasnya perhatikan langkah-langkah berikut :


Persiapan Aset

Siapkanlah sebuah suara yang bersifat berulang-ulang (looping). File suara harus bertipe WAV atau MP3, selanjutnya perhatikan langkah berikt :

  1. Buka kembali file IMM dan transisi yang telah anda buat pada tutorial sebelumnya, atau download di link ini

  2. Import sebuah file suara yang akan dijadikan sebagai background music untuk aplikasi IMM yang anda buat. Untuk melakukannya klik menu File > Import > Import to Library dan pilih file suara, lalu tekan tombol OK. Perhatikan gambar:
    tutorial membuat interaktif multimedia by wandah_w
  3. Agar suara dapat diakses oleh kode, maka symbol suara memerlukan linkage.Untuk itu buka panel Library dan klik kanan pada symbol suara, lalu tekan pilih menu properties, selanjutnya berikan nama class bgm dan centang opsi Export for ActionScript. Perhatikan gambar:
    tutorial membuat interaktif multimedia by wandah_w
    tutorial membuat interaktif multimedia by wandah_w
  4. Selanjutnya buatlah sebuah movieclip baru untuk mengontrol suara, dengan mengklik menu Insert > New Symbol dan pilih type Movieclip dengan nama sound_control Pastikan anda memasuki mode Advanced dan menyeleksi opsi Export for Actionscript, sehingga movieclip tersebut memiliki linkage.
    Perhatikan gambar :
    tutorial membuat interaktif multimedia by wandah_w
  5. Kemudian, dalam mode edit movieclip sound_control, pada frame 1 buatlah sebuah icon suara on dan pada frame 2 buatlah icon suara off, perhatikan gambar :
    tutorial membuat interaktif multimedia by wandah_w
  6. Keluar dari mode edit / kembali ke Scene utama (Ctrl+E), selanjutnya klik frame 1 layer 1




Menambahkan Intro pada IMM sederhana

Sebuah interaktif multimedia pada umumnya memiliki sebuah animasi/banner/intro yang digunakan sebagai pembuka dari aplikasi. Dalam tutorial ini, intro dibuat secara terpisah (file terpisah) dan akan diload secara external. Intro yang dimaksud berupa animasi tanpa kode apapun. Dalam contoh ini digunakan intro sederhana berupa tulisan "INTRO" yang digerakkan dengan menggunakan motion tween sepanjang 120 frame. Anda dapat membuatnya lebih panjang, menambahkan suara, atau efek lain sesuai kebutuhan anda. File intro tersebut nantinya harus diletakkan satu folder dengan file aplikasi.


Penambahan Kode Actionscript 3.0 untuk Suara dan Intro

Penambahan kode suara pada AS3 menggunakan Class Sound, kode ini relatif mudah untuk dipahami, karena hanya menggunakan beberapa baris kode. Sedangkkan intro akan ditambahkan menggunakan Class Loader. Untuk lebih jelasnya klik frame 1 layer 1, dan tambahkan/edit kode menjadi sebagai berikut :

//----- kode sound -----
var musik_aktif:Boolean = true;
var musik:bgm = new bgm;
musik.play(1, 0);
var tombol_suara:sound_control = new sound_control;
tombol_suara.x = 700;
tombol_suara.y = 40;
tombol_suara.gotoAndStop(1);
tombol_suara.addEventListener(MouseEvent.CLICK, atur_suara);

function atur_suara(e:MouseEvent):void{
	musik_aktif = !musik_aktif;
	if (musik_aktif){
		musik.play(1, 0);
		tombol_suara.gotoAndStop(1);
	}else{
		SoundMixer.stopAll();
		tombol_suara.gotoAndStop(2);
	}
}
//----------------------
//-----intro-----------
function tambah_intro():void{
	var intro:Loader = new Loader();
	var link:URLRequest = new URLRequest("intro.swf");
	intro.load(link);
	var intro_mc:MovieClip = new MovieClip();
	intro_mc.addEventListener(Event.ENTER_FRAME, hapus_intro);
	intro_mc.frame_aktif = 1;
	addChild(intro_mc);
	intro_mc.addChild(intro);
}
function hapus_intro(e:Event):void{
	var ob:Object = e.currentTarget;
	ob.frame_aktif++;
	if (ob.frame_aktif > 120){
		ob.removeEventListener(Event.ENTER_FRAME, hapus_intro);
		removeChild(DisplayObject(ob));
		tambah_halaman("home_mc");
	}
}
//---------------------
var halaman:MovieClip;
var nama_halaman:String;
var nama_halaman_lama:String;

function tambah_halaman(nama:String):void{
	//ambil nama linkage dari library
	nama_halaman_lama = nama;
	var mc_link:Class = getDefinitionByName(nama) as Class;
	//buat movieclip baru sesuai dengan nama linkage
	halaman = new mc_link();	
	//listener mouse click
	halaman.home_btn.addEventListener(MouseEvent.CLICK, atur_tombol);
	halaman.about_btn.addEventListener(MouseEvent.CLICK, atur_tombol);
	halaman.profile_btn.addEventListener(MouseEvent.CLICK, atur_tombol);
	halaman.galery_btn.addEventListener(MouseEvent.CLICK, atur_tombol);
	//tambahkan halaman ke layar
	addChild(halaman);
	//penambahan untuk halaman galery
	if (nama_halaman == "galery_mc"){
		halaman.foto_mc.stop();
		halaman.btn_next.addEventListener(MouseEvent.CLICK, atur_tombol_galery);
		halaman.btn_prev.addEventListener(MouseEvent.CLICK, atur_tombol_galery);
	}
	//tombol suara
	addChild(tombol_suara);
}
function hapus_halaman():void{
	//hapus listener mouse click
	halaman.home_btn.removeEventListener(MouseEvent.CLICK, atur_tombol);
	halaman.about_btn.removeEventListener(MouseEvent.CLICK, atur_tombol);
	halaman.profile_btn.removeEventListener(MouseEvent.CLICK, atur_tombol);
	halaman.galery_btn.removeEventListener(MouseEvent.CLICK, atur_tombol);
	//penambahan untuk halaman galery
	if (nama_halaman_lama == "galery_mc"){
		halaman.btn_next.removeEventListener(MouseEvent.CLICK, atur_tombol_galery);
		halaman.btn_prev.removeEventListener(MouseEvent.CLICK, atur_tombol_galery);
	}
	//hapus halaman dari layar
	removeChild(halaman);
}
function atur_tombol(e:MouseEvent):void{
	var nama_tombol:String = e.currentTarget.name;
	if (nama_tombol == "home_btn") nama_halaman = "home_mc";
	if (nama_tombol == "about_btn") nama_halaman = "about_mc";
	if (nama_tombol == "profile_btn") nama_halaman = "profile_mc";
	if (nama_tombol == "galery_btn") nama_halaman = "galery_mc";
	if (nama_halaman != nama_halaman_lama) transisi();
}
function atur_tombol_galery(e:MouseEvent):void{
	var nama_tombol:String = e.currentTarget.name;
	if (nama_tombol == "btn_next") halaman.foto_mc.nextFrame();
	if (nama_tombol == "btn_prev") halaman.foto_mc.prevFrame();
}

function transisi():void{
	var efek:transisi_mc = new transisi_mc();
	efek.addEventListener(Event.ENTER_FRAME, atur_efek);
	addChild(efek);
}

function atur_efek(e:Event):void{
	var ob:Object = e.currentTarget;
	if (ob.currentFrame == 30) {
		//transisi ketika tepat layar berwarna hitam
		hapus_halaman();
		tambah_halaman(nama_halaman);
		addChild(DisplayObject(ob));
	}
	if (ob.currentFrame == 60){		
		ob.stop();
		ob.removeEventListener(Event.ENTER_FRAME, atur_efek);
		removeChild(DisplayObject(ob));
	}
}

tambah_intro();

Jalankan aplikasi dengan menekan tombol Ctrl+Enter, maka hasil dari tutorial ini adalah sebagai berikut (Intro kemungkinan sudah muncul sebelumnya):


Get Adobe Flash player

File Sumber


download IMM sederhana + sistem Gallery + sistem transisi + sound + intro (Flash CS5)


Share ( Ayo Berbagi )

Leave me a comment

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