Membuat Aplikasi Pemutar Video Tingkat Pemula

Main Menu

Aliansi

Trippert Labs

PRECISION CONNEXION

labkom UBL

Joomla Templates

Tutorial Flex

Source Code

Membuat Aplikasi Pemutar Video Tingkat Pemula

Written by Ahmad Fathi Hadi

Sunday, 18 May 2008 14:47

Membuat Aplikasi Pemutar Video Tingkat Pemula

Kali ini kita akan mencoba membuat aplikasi pemutar video yang cukup simple dan mudah. Tujuan kali ini adalah untuk menambah skil programming. Baiklah mari kita mulai membuatnya.

Kali ini kita akan menggunakan sedikit komponen, namun ada satu buah komponen utama yang sangat amat teramat penting dalam menunjang apa yang kita buat, yaitu VideoDisplay.

bikin seperti yang dibawah ini mudah loh !

Membuat Aplikasi Pemutar Video Tingkat Pemula

Pertama kita membuat design seperti berikut :

Membuat Aplikasi Pemutar Video Tingkat Pemula

Akan terbentuk kode sebagai berikut :

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >

<mx:Panel x="10" y="10" width="250" height="248" layout="absolute" title="Video Player">

<mx:ControlBar horizontalAlign="center">

</mx:ControlBar>

</mx:Panel>

</mx:Application>

Kedua, masukkan komponen Image kedalam ControlBar sebanyak 3 buah serta masukkan komponen VideoDisplay kedalam Panel, akan terlihat seperti berikut :

Membuat Aplikasi Pemutar Video Tingkat Pemula

Akan terbentuk kode sebagai berikut

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >

<mx:Panel x="10" y="10" width="250" height="248" layout="absolute" title="Video Player">

<mx:ControlBar horizontalAlign="center">

<mx:Image/>

</mx:ControlBar>

</mx:Panel>

<mx:VideoDisplay x="535" y="128"/>

</mx:Application>

Maksud penulis untuk menaruh komponen image adalah karena kita telah menyediakan gambar yang cocok untuk mewakili kerja tombol-tombol yang akan dipakai, dalam kasus kali ini adalah Play, Pause, dan Stop.

Gambar telah saya sediakan dan bisa didownload sekaligus projek yang sudah jadi di sini

Sekarang kita bisa menyeragamkan kode agar aplikasi bisa berjalan dengan baik. Namun disini kita kan menemukan sebuah tag baru yaitu <mx:Glow>. Tag tersebut dibuat dengan maksud agar ketika user mengarahkan moude pada tombol, maka tombol tersebut akan mengeluarkan sebuah Efek yaitu Glow.

Berikut source kode lengkapnya

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#0078FF, #FFFFFF]">

<mx:Glow id="glow"/>

<mx:Panel x="10" y="10" width="250" height="248" layout="absolute" title="Video Player" backgroundColor="#FFFFFF" borderColor="#FFFFFF" alpha="1.0" cornerRadius="7">

<mx:VideoDisplay x="0" y="0" width="100%" height="100%" source="images/phone.flv" autoPlay="false" id="layar"/>

<mx:ControlBar horizontalAlign="center">

<mx:Image source="images/play.png" click="layar.play();" rollOverEffect="{glow}" />

<mx:Image source="images/pause.png" click="layar.pause();" rollOverEffect="{glow}"/>

<mx:Image source="images/stop.png" click="layar.stop();" rollOverEffect="{glow}"/>

</mx:ControlBar>

</mx:Panel>

</mx:Application>

Sehingga hasil akhirnya akan seperti berikut :

Bagaimana ?

Mudah bukan !

Diharapkan setelah para pembaca mendapatkan basic ini, maka para pembaca bisa membuat sesuatu seperti YouTube !

(^_^)

Saya yakin pasti bisa.

< Prev

Last Updated ( Friday, 30 May 2008 00:50 )

Main Menu

Related Link

Aliansi

Membuat Aplikasi Pemutar Video Tingkat Pemula