Tutorial XML Untuk Aplikasi Dinamis Android - Adobe Air

Setelah kita berhasil membuat swf loader, kali ini akan kita manfaatkan keunggulan dari flash-adobe air lainnya yakni dapat melakukan load database berbasis XML yang sangat simpel dan berguna. Dengan menggunakan database "Tree" yang dimiliki nya maka akan sangat mudah untuk melakukan update isi dari suatu aplikasi dinamis hanya dengan merubah satu file text saja. Untuk belajar dasar-dasar mengenai flash (actionscript3) dan xml dapat membaca tutorial yang sangat menarik disini.

Format file xml dimulai dengan tag  <?xml version="1.0" encoding="UTF-8"?> , selanjutnya disusun berdasarkan tag < nama > </nama> yang dinamakan tiap node dan boleh memiliki children node didalamnya. Perhatikan kode berikut :

<GALLERY>

<IMAGE TITLE="gambar 1">

<FILE>gambar1.jpg</FILE>

<TEKS>ini teks untuk gambar1</TEKS>

</IMAGE>

<IMAGE TITLE="gambar 2">

<FILE>gambar2.jpg</FILE>

<TEKS>ini teks untuk gambar2</TEKS>

</IMAGE>

<IMAGE TITLE="gambar 3">

<FILE>gambar3.jpg</FILE>

<TEKS>ini teks untuk gambar3</TEKS>

</IMAGE>

</GALLERY>

kode diatas merupakan kode XML dari GALLERY yang memiliki node <IMAGE> yang beranak<FILE> dan <TEKS>. Panjang dari node dan anak dari GALLERY dapat disesuaikan sesuai keinginan asal dengan format yang seragam. Node IMAGE disini memiliki 3 anggota, sehingga akan menjadi array yang sangat simple jika dipindahkan ke FLASH dengan contoh test script berikut: 

simpan file xml tadi dengan nama "test.xml"

var myXML:XML;
var myLoader:URLLoader = new URLLoader();

myLoader.load(new URLRequest("test.xml"));
myLoader.addEventListener(Event.COMPLETE, processXML);

function processXML(e:Event):void {
myXML = new XML(e.target.data);
trace(myXML.IMAGE.length());
trace(myXML.IMAGE.*);
trace(myXML.IMAGE[0].TEKS);
trace(myXML.IMAGE.(@TITLE=="gambar 3").FILE);

}

output dari tracing scipt diatas adalah :

3
<FILE>gambar1.jpg</FILE>
<TEKS>ini teks untuk gambar1</TEKS>
<FILE>gambar2.jpg</FILE>
<TEKS>ini teks untuk gambar2</TEKS>
<FILE>gambar3.jpg</FILE>
<TEKS>ini teks untuk gambar3</TEKS>
ini teks untuk gambar1
gambar3.jpg

Dan dari hasil tracing diatas dapat dilihat betapa simplenya database dapat diubah-ubah sesuai keinginan, semisal kita ingin merubah nama gambar ke 3 tinggal merubah saja nama filenya sesuai alamat yang dituju. contoh script berikut jika kita menginginkan menampilkan gambar pada file lokal melalui XML

file gambar1.jpg , gambar2.jpg dan gambar3.jpg harus ada di lokasi yang satu folder dengan aplikasi.

var myXML:XML;
var myLoader:URLLoader = new URLLoader();

myLoader.load(new URLRequest("test.xml"));
myLoader.addEventListener(Event.COMPLETE, processXML);

function processXML(e:Event):void {
myXML = new XML(e.target.data);

var pictURL:String = myXML.IMAGE[1].FILE;
var pictURLReq:URLRequest = new URLRequest(pictURL);
pictLdr.load(pictURLReq);
addChild(pictLdr);

}

output yang keluar adalah gambar2.jpg pada layar 

jika kita memiliki text field dengan nama textnya, maka bisa juga di tambahkan seperti berikut:

var myXML:XML;
var myLoader:URLLoader = new URLLoader();

myLoader.load(new URLRequest("test.xml"));
myLoader.addEventListener(Event.COMPLETE, processXML);

function processXML(e:Event):void {
myXML = new XML(e.target.data);

var pictURL:String = myXML.IMAGE.(@TITLE =="gambar 3").FILE;
var pictURLReq:URLRequest = new URLRequest(pictURL);
pictLdr.load(pictURLReq);
addChild(pictLdr);
textnya.text=myXML.IMAGE.(@TITLE == "gambar 3").TEKS;

}

Maka output yang didapat adalah flash meload gambar3.jpg serta menampilkan isi TEKS yaitu: "ini teks untuk gambar 3". Mudah bukan? Ayo kita lanjut saja ke praktek beneran pada adobe flash cs5.5 . kali ini kita akan membuat loader file xml, dengan gambar yang bersumber di internet dan teks dari file XML yang diupload ke server.

Sesuai pembahasan loader swf sebelumnya, kita akan membuat animasi pre-loader dengan menggunakan tween, sehingga kelihatan halus saat menunggu file xml serta gambar di load ke layar android. Kita membuat animasi loader serta textbox dengan UI component berupa scroll slider.

Langsung saja perhatikan code berikut dan kita akan bahas setelahnya.

var myXML:XML;
var myLoader:URLLoader = new URLLoader();
var urutan:Number=0; //urutan gambar
tulisan.visible=false; //tulisan
uiScroller.visible=false; //text scroller

//xml loader,  contoh filenya ada di server berikut
//ubah sesuai keinginan (lokal juga bisa)

myLoader.load(new URLRequest("http://www.flexievdo.net/test.xml"));

//listener
myLoader.addEventListener(Event.COMPLETE, processXML);

//pengatur gambar
var pictLdr:Loader = new Loader();
pictLdr.contentLoaderInfo.addEventListener(Event.COMPLETE, kecilkan);

//geser-geser secara swap
Multitouch.inputMode = MultitouchInputMode.GESTURE;
stage.addEventListener(TransformGestureEvent.GESTURE_SWIPE, onSwipe);


//function untuk menyeuaikan gambar

function kecilkan(e:Event):void {
pictLdr.x=10;
pictLdr.y=10;
pictLdr.width=300;
pictLdr.height=310;
trace("selesai");
tulisan.visible=true;
uiScroller.visible=true;

//tampilkan setelah gambar selesai di load

nama.text=myXML.IMAGE[urutan].@TITLE;
tulisan.text=myXML.IMAGE[urutan].TEKS;
ke.text="Gambar ke "+ String(urutan + 1) + " dari " + String(myXML.IMAGE.length());
uiScroller.update();

loaded.visible=false;

}


//pemroses xml

function processXML(e:Event):void {
myXML = new XML(e.target.data);


loaded.visible=true;

var pictURL:String = myXML.IMAGE[urutan].FILE;
var pictURLReq:URLRequest = new URLRequest(pictURL);
pictLdr.load(pictURLReq);
addChild(pictLdr);



}


//swipe babe !!

function onSwipe(evt:TransformGestureEvent):void {
 
//swipe akan menentukan urutan gambar
 
 if( evt.offsetX == -1){
 
 urutan++ ;
 if(urutan >= myXML.IMAGE.length()) {
  urutan=0;
 }
 
 }

 else if( evt.offsetX == 1){
 
 urutan-- ;
 if(urutan < 0 )  {
  urutan= (myXML.IMAGE.length() -1);
 }
 
 }

//hayo kita hancurkan kemudian tampilkan lagi

if(evt.offsetX == 1 || evt.offsetX == -1 )
{

tulisan.visible=false;
uiScroller.visible=false;
loaded.visible=true;
nama.text="";
tulisan.text="";
ke.text="";
uiScroller.update();


removeChild(pictLdr);
var pictURL:String = myXML.IMAGE[urutan].FILE;
var pictURLReq:URLRequest = new URLRequest(pictURL);
pictLdr.load(pictURLReq);
addChild(pictLdr);
}

}

Terlihat mudah saja, bahwa tiap file XML memiliki format sesuai contoh awal pada test.xml dan informasi yang akan digunakan berupa @TITLE, FILE, dan TEKS . Kita akan memainkan proses swipe untuk merubah posisi dari IMAGE[urutan] dan kemudian dengan image loader akan diresize sesuai panjang dan lebar dari layar HP Android. Sebagai keunggulan dari xml dimana kita dapat mengambil source gambar dari mana saja seperti contoh berikut, dan file tutorial lengkap dapat diunduh disini.


<GALLERY>
<IMAGE TITLE="BALI ISLAND OF GOD">
<FILE>http://us.123rf.com/400wm/400/400/saiko3p/saiko3p1107/saiko3p110700147/

10085679-beauty-rice-terrace-with-palms-on-bali-island.jpg</FILE>
<TEKS>Bali, the famed Island of the Gods, with its varied landscape of hills 

and mountains, rugged coastlines and sandy beaches, lush rice terraces and 

barren volcanic hillsides all providing a picturesque backdrop to its 

colourful, deeply spiritual and unique culture, stakes a serious claim to be 

paradise on earth. With world-class surfing and diving, a large number of 

cultural, historical and archaeological attractions, and an enormous range of 

accommodations, this is one of the world's most popular island destinations 

and one which consistently wins travel awards. Bali has something to offer a 

very broad market of visitors from young back-packers right through to the 

super-rich.
</TEKS>
</IMAGE>
</GALLERY>



Jangan lupa untuk mempublish aplikasi adobe air - android dengan permission "Internet"


-=UPDATE=-


Contoh aplikasi yang telah dibikin dengan methode xml dan ditambah dengan image caching




SELAMAT MENCOBA

Read More

TUTORIAL Swf loader Untuk membuat Aplikasi Android yang Dinamis

Ketika aplikasi android yang ingin dibuat ditujukan dapat memberikan informasi yang dinamis atau berubah-ubah, maka diperlukan proses pengunduhan konten dari isi aplikasi dari server yang telah ditentukan. Inilah menjadi keunggulan dari paltform adobe air, dimana seperti aplikasi induknya yaitu adobe flash memiliki fasilitas untuk mengunduh (load) file media seperti jpg, gif, video dan yang paling umum adalah melakukan load terhadap file format swf. Pada tutorial kali ini diperhatikan bahwa diperlukan web server via internet atau server http lokal yang dapat diakses melalui HP Android kamu.

(klik pada gambar untuk memperjelas)

Seperti pada tutorial terdahulu maka kita akan memerlukan adobe flash CS5.5 ke atas untuk mendesain applikasi berbasis adobe air ini. Jadi jika masih bingung harap menuju ke tutorial dasar pada topik GPS. Karena kali ini kita akan berhubungan dengan proses loading, maka kita butuhkan suatu animasi loading yang bebas dapat dirancang dan tentunya dengan flash tidak menjadi masalah. Pada contoh ini dibuat gambar gear yang berputar ketika proses loading. Jika menginginkan proses loading membutuhkan penunjukan persentase  loading maka ditambahkan textfield untuk menulisnya seperti contoh dibawah.

Gambar animasi gear berputar dengan proses tween yang sangat sederhana

 Gambar Textfiled persen loading

Gambar dibawah ini menunjukkan proses pembuatan isi dari file swf yang akan di unduh atau di load oleh aplikasi, kali ini akan dibuat dengan nama " isi.swf ". Format file dapat berupa file media apa saja yang mungkin dapat dikenali oleh flash seperti jpg, gif, mov dan sebagainya. Setelah di compile atau disimpan dalam format dan ukuran yang pas, maka file tersebut harus di upload pada webserver internet atau jika dirumah terdapat komputer yang menggunakan wifi, maka dengan jaringan add-hoc via wifi serta server apache , xampp dan lain sebagainya , file ini dapat diupload secara lokal. Pada contoh ini file yang akan di load berupa file swf dengan alamat : http://www.flexievdo.net/isi.swf

Lanjutkan dengan merancang script pada frame dan layer khusus (tanpa ada bentuk geometri lainnya ) dan buatlah script untuk melakukan load file swf tadi seperti contoh berikut:

var request:URLRequest = new URLRequest("http://www.flexievdo.net/isi.swf"); //ubah sesuai file yg akan di load
var loader:Loader = new Loader() 


loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaderComplete);
loader.load(request); 
addChild(loader);




function onLoaderComplete(event:Event):void
{

loadan.visible=false;
trace("complete");

}

Pada contoh diatas terdapat script yang menunggu Event.COMPLETE sehingga animasi loading gear dapat dihilangkan dari tampilan layar saat file telah selesai diunduh. Jika diperlukan penulisan persentase file yang sudah di load, maka tambahkan event seperti contoh berikut yang akan ditulis pada textfield "persen".

loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onload);


function onload(evt:ProgressEvent):void 
{ 
var perc:Number = evt.bytesLoaded / evt.bytesTotal; 
loadan.persen.text = Math.ceil(perc * 100).toString(); 
trace(perc);
} 

Kemudian kalau mengingat bahwa kadang-kadang file swf  atau gambar yang diload terlalu besar atau kekecilan, berdasarkan tutorial gesture sebelumnya maka tambahkan saja script gesture sehingga menjadi lebih menarik. Kali ini kita tambahkan GESTURE_PAN yang merupakan gesture dengan dua jari untuk menggeser layar yang terlihat kegedean ke posisi yang diinginkan. 

Multitouch.inputMode = MultitouchInputMode.GESTURE;
stage.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);
stage.addEventListener(TransformGestureEvent.GESTURE_PAN, onPan);

function onZoom(evt:TransformGestureEvent):void {
 
 
loader.scaleX *= evt.scaleX;
loader.scaleY *= evt.scaleY;
 
}

function onPan(evt:TransformGestureEvent):void
{
loader.x += evt.offsetX;
loader.y += evt.offsetY;
}

Jangan lupa untuk proses publish menggunakan permission INTERNET karena server akan diakses melalui internet.

TAMBAHAN

Error handling jika file tidak bisa diload karena network error , dapat dilihat seperti contoh berikut

jadi kita membuat tombol yang berisi tulisan bahwa loading error, kemudian akan muncul pilihan retry. Untuk itu ketika awal tombol kita tombol.visible=false; , lalu ketika error terjadi akan dihandle oleh error handling seperti contoh script berikut ini

tomret.visible=false; //tomret nama instance tombol retry

//error handler listener
loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, loaderIOErrorHandler);
//listener dari tombol
tomret.addEventListener(MouseEvent.CLICK, clicked1);

function clicked1(event:MouseEvent):void
{
tomret.visible=false;

loader.load(request); 
addChild(loader);
}

//jika IO error maka ini yang dipanggil
function loaderIOErrorHandler(evt:IOErrorEvent):void
{
 
 trace("error broo!");
 tomret.visible=true;

 
}

File tutorial selengkapnya dapat di download disini



SELAMAT MENCOBA

Read More

Bob Noyce - Perintis silicon valley yang terlupakan

Robert "BOB" Noyce - The "PODFATHER"

Anda mungkin lebih mengenal Bill Gates dan Steve Jobs atas kreasinya membuat komputer menjadi milik "pribadi". Atau dalam era saat ini nama Mark Zuckerberg  dan Larry Page menjadi nama umum yang harus dihapalkan oleh anak SD. Pernahkah anda berpikir bahwa orang-orang yang saya sebut ini merupakan pioneer dalam bidang yang cenderung ke pengembangan aplikasi  software saja, dan siapa kah yang mempelopori semuanya dibagian elektronika? Salah satu nama yang akan disepakati semua insinyur elektronika adalah Robert "Bob" Noyce. Dialah fisikawan penemu Integrated Circuits (IC) dan kemudian mengembangkan Intel dengan produk revolusioner "MicroProcessor".

Setelah lulus dari MIT dan bergelar PhD , bob melamar untuk bekerja pada Laboratorium Shockley sebagai peneliti. William Shockley adalah penerima nobel atas penemuannya (bersama John Bardeen dan Walter Brattain) pada bidang Transistor. Saat bob masuk ke lab, dunia sedang digairahkan oleh pengembangan teknologi transistor germanium dan bob menjadi insinyur yang terdepan. Akan tetapi kekecewaan terhadap pola kerja serta keangkuhan dari Shockley membuat bob dan 8 orang temannya keluar dari shocklye lab dan mendirikan FAIRCHILD pada tahun 1957. 

Fairchild Electronics didirikan di sebuah lembah di bagian kalifornia  utara dan merupakan bagian dari Fairchild company yang berpusat di NewYork. Ke 8 anak muda yang dianggap penghianat oleh shockley menerapkan sistem perusahaan non-hirarki, tanpa atasan dan bawahan , semua pegawai sama dan masing-masing dibayar sesuai kemampuan dan prestasi. Lingkungan inilah yang menjadi model yang mempelopori beribu-ribu industri IT di silicon valley pada dekade selanjutnya. Dan hasilnya tidak mengecewakan ketika bob noyce dan rekan-rekannya di fairchild berhasil membuat rangkaian diskrit (komponen tunggal yang disusun pada pcb)  menjadi sebuah miniatur pada wafer silikon dengan fungsi sama namun kecepatan dan konsumsi daya yang tidak ada bandingannya.

kiri: Building Block dari komputer menggunakan komponen diskrit  kanan: Integrated Circuit

Penemuan noyce selanjutnya berhubungan dengan FET transistor, kemudian ketika mencapai puncak karir di  Fairchild, bob bersama Gordon More mendirikan Intel. Project Intel yang terkenal adalah microprocessor, yang pertama kali mereka ciptakan untuk perusahaan kalkulator asal jepang bernama Busicom. Microprocessor yang dimaksud adalah Intel 4004 yang diklaim sebagai microprocessor pertama yang dijual ke publik. Dan seperti kotak pandora yang terbuka maka lahirlah generasi integrated circuit (IC) yang berkembang terus menurut hukum Moore yang menyatakan bahwa jumlah transistor yang dapat dimiliki oleh microprocessor akan berkembang berlipat ganda dalam periode 2 tahun.

Dengan perkembangan microprocessor-lah kemudian komputer pribadi dan perangkat lunak didalamnya menjadi industri yang sangat besar. Banyak perusahaan di silicon valley hidup lalu mati dan hidup kembali dengan semangat yang selalu seperti yang diinginkan bob yaitu bersainglah dengan siapapun. Bob meninggal tahun 1990 dan mungkin akan dilupakan orang dan memang akan selalu berulang seperti ini di silicon valley sampai banyak dari mereka jatuh karena melakukan kesalahan yang sama.

-disari dari BBC documentary The Podfather-

Read More

Electric Dreams - Ayo Flashback Ke Era Teknologi Masa Kini Dirintis

The Electric Dreams Flashback on BBC Documentary

Dunia teknologi elektronika masa kini adalah sebuah perjuangan dari para insinyur elektronika yang terus mengembangkan kreativitas demi sebuah tujuan memudahkan pekerjaan manusia. Penulis yang semenjak kecil menjadi pencinta teknologi elektronika merasa diuntungkan dengan hidup di masa-masa ketika teknologi masa kini masih berbentuk "prototype" akan tetapi pada masa itu sangatlah laku dijual. Lihatlah contohnya kaset tape recorder atau pemutar video betamax, anak-anak jaman sekarang mungkin tidak akan menemukan benda semacam ini lagi. Tetapi tetap saja fungsi dari alat tersebut sesuai dengan tujuan para pembeli yaitu mendengarkan musik atau menonton film hanya saja pada saat yg berbeda dan dengan penemuan-penemuan yang berbeda pula maka bentuk dan format dari perangkatnya menjadi seperti bumi dan langit.

Pada suatu minggu yang cerah, penulis berjalan-jalan ke sebuah pusat jual-beli buku bekas di jalan semarang surabaya yang sekarang dikumpulkan pada suatu kompleks yang bernama "Kampung Ilmu". Dan benar saja didalam kampung ilmu ini nuansa ke-ilmuannya sangat tinggi, penulis merasa ada roh dan energi yang sangat besar ketika melihat tumpukan buku-buku berbagai jenis dan dari masa yang tidak akan kita sangka-sangka.  Dan benar saja saya melihat majalah elektro "elector" dari tahun 70-an sampai 80-an, begitu juga dengan salah satu buku "Engineers Notebook II" yang merupakan kitab berharga bagi para insinyur elektronika. Melayanglah pikiran ke masa tahun-tahun itu dengan bayangan komputer BBC micro atau Commodore yang memiliki RAM hanya 64KB tapi merupakan merek komputer pribadi yang paling laku dalam sejarah.

Teringatlah pada suatu film classic tahun 80-an yang sebenarnya aku tonton di RCTI sekitar tahun 96 yang berjudul "Electric Dreams". Film ini bercerita tentang seorang pria yang hidup sendiri di apartemennya, kemudian ia membeli komputer PC yang bernama "Edgar" yang bisa mengendalikan semua perangkat rumah dengan program yang diinstal didalamnya. Suatu hari si pria ini menghubungkan komputernya ke jaringan komputer kantornya melalui modem akustic (modem memakai suara telepon langsung) dan dengan tidak sengaja menumpahkan minuman ke komputer, dan yang terjadi Edgar menjadi hidup dan mengontrol hidup si pria blaaa...blaaa.... sangat tipikal film tahun 80-an dimana para penulis film selalu bermimpi dengan ide bahwa komputer dapat mengendalikan hidupmu !! Dan benar terjadi kalau tahun 2000-an teknologi telah memperbudak kamu untuk selalu menyentuh papan keyboard dan layar handphone dalam hitungan menit bahkan detik ....kamu tidak bisa lepas dari kekuasaan sang komputer...huuaaahuaaahhaaaa.

Berlanjutlah penelusuran nostalgia saya menuju ke halaman youtube, dengan tujuan mencari video soundtrack film electric dreams yang di compose oleh Gorgio Moroder. Entah mengapa akhirnya nyasar ke video documentary BBC4 - Open university berjudul sama "Electrics Dreams", dan isinya tidak mengecewakan dan sesuai dengan keinginanku flashback ke jaman teknologi elektronika dimula. Dokumentari ini menceritakan sebuah keluarga modern yang bernama Sullivan-Barnes yang memiliki 4 orang anak diminta untuk kembali kemasa tahun 1970-1980-1990. Mereka dikondisikan untuk hidup dengan kondisi saat tahun flashback dengan gadget serta peralatan rumah tangga jaman itu pula. Bahkan dikondisikan juga dengan keadaan politik yang mempengaruhi  teknologi saat itu. Tiap hari akan mewakili 1 tahun dan berbagai kesulitan dan pengalaman menarik dialami oleh keluarga ini. Setiap peralatan didesain oleh para "tech team" yang terdiri dari sosiolog, ahli elektronika dan ahli komputer yang berusaha selalu mendapatkan gadget yang sesuai.

1970

Era 1970 dimulai tahun 1969 dimana keluarga ini pindah ke rumah "baru" mereka yang didekorasi sesuai jamannya, tanpa pemanas, tanpa microwave, tanpa freezer dan televisi Hitam Putih ! dan tahun ini merupakan tahun yang sering mati lampu di inggris karena pemogokan industri, jadi anak-anak mereka berlatih menggunakan "lilin" , bermain bersama, menonton tivi bareng , bermain diluar lebih sering dan tidak dicariin ketika pulang kemaleman ! Karena jika jaman sekarang mungkin kalo tidak pulang akan segera ditelpon mama. Sang ibu merasa nyaman dengan kebersamaan mereka tiap hari, akan tetapi mengeluh menghabiskan banyak waktu hanya untuk memasak dan mengerjakan pekerjaan rumah. Pada akhir era 70-an mereka diharuskan membuat slide untuk dipertunjukkan ke pada para tamu pada makan malam terakhir di era ini.

Transportasi :

Cortina Mark II

Raleigh Chopper
Space hopper

Komunikasi:

Rotary dial telephone

Peralatan Dapur & Rumah Tangga:

Teasmade
Twin tub washer
Freezer
Toaster
Atora brand lard
Bejam

Permainan dan Gadget :

Atari Pong

Hand held calculator

Black and white TV

Colour TV (1976)

LP records

Cassette tapes

KerPlunk

Binatone (8-bit computer)

1980

Tahun 1980 dimulai dengan berubahnya penunjuk tahun pada rumah mereka yang sekarang berbentuk 7 -segmen dan pakaian mereka pun terasa 80-an banget dengan model warna ngejreng dan ketat. Sang ayah mulai diberikan perangkat stereo - turntable - hi-fi dengan pemutar kaset yang kemudian dipertengahan era berubah menjadi pemutar CD. Sang anak laki-laki mulai mempunyai "boys toys" mulai dari game watch alias gimbot sampai komputer pribadi jaman jadul yaitu "BBC MICRO". Pada era ini mulai terjadi konflik antara sang ibu, ayah dan anak ketika TV satu-satunya menjadi rebutan apakah akan dipakai menonton tv atau untuk menonton video VHS atau menjadi layar monitor komputer mereka. Pada akhir era 80-an keluarga ini diberikan perekam video dan merancang video "80-an" untuk diputar pada makan malam terakhir.

Transportasi :

Escort 1.3l
Sinclair C5

Komunikasi:

Ansaphone

Peralatan Dapur & Rumah Tangga:

Microwave oven
Deep fat fryer
Slow cooker

Permainan dan Gadget :

Polaroid instant camera
Component stereo
Compact disc player
VHS camera
VHS recorder
Hand held games
Amstrad CPC
Simon
Betamax
ZX Spectrum
Commodore 64
Sony Walkman
BBC Micro
Remote controller
Synthesizer
Rubiks cube


1990


Tahun 1990 merupakan tahun booming teknologi telekomunikasi, komputer dan game. Terlihat dari banyaknya peralatan yang mereka harus coba mulai dari pager, handphone, fax machine, nintendo, sega, play station dan sebagainya. Wah ga kebayang betapa sibuknya (sendirian tentunya) anggota keluarga sehingga waktu bersama keluarga  menjadi semakin jarang, akan tetapi anak-anak mulai selalu diam dikamarnya karena mempunyai saluran tv satelit yang lebih banyak pilihan serta permainan yang mulai diberikan satu-persatu kedalam kamar mereka masing-masing. Sang ayah mulai bisa mengerjakan pekerjaan kantor dari rumah karena teknologi internet memungkinkan pekerjaan dikirim melalui email. Padda akhir era keluarga ini mempersiapkan pesta menyambut MILENIUM BARU dengan pesta bersama mesin karaoke yang di Indonesia terkenal dengan nama "KAROTEXT".

Transportasi :

Toyota Town Ace

Komunikasi:

Motorola International 3200
Dial-up 56k modem (1997)
Nokia SMS
Pay-as-you-go Mobile phone (1998)
Text messaging (1998)

Peralatan Dapur & Rumah Tangga:

Water filter
AGA cooker
Breadmaker (1998)

Permainan dan Gadget :

Mega Drive (1990)

Windows 3.1 OS (1992)
Oxford Children's Encyclopedia on CD-ROM
Apple QuickTake 100 (1994)
Windows 95 OS
PlayStation (PS1) (1995)
Tamagotchi (1996)
Laptop computer
Palm Pilot
Karaoke machine (1999)

Read More

Tutorial Gesture (kontrol layar dengan jari) pada Adobe Air

Gesture merupakan fasilitas yang disediakan oleh smartphone untuk mempermudah operasi pada layar dengan menggunakan kombinasi sentuhan 2 buah jari. Gesture yang paling terkenal adalah zoom dengan menggunakan 2 jari pada layar yang kemudian jari ini di jauhkan posisinya sesuai besar zoom yang diinginkan. Kali ini juga akan dibahas mengenai gesture rotate/putar serta swipe/geser.

(klik pada gambar dibawah untuk memperjelas)

Tutorial kali ini dimulai dengan mengcopy paste gambar pada library , sebaiknya jika menggunakan gambar dari luar menggunakan format PNG yang memudahkan penampakan transparansi dari gambar. Contoh yang diberikan berupa gambar robot android, yang kemudian movieclipnya diberikan nama instance "robo".

Letakkan gambar robot ditengah layar /stage utama dan kemudian buatlah "layer" untuk menyisipkan actionscript. Untuk gesture zoom dan rotate sangatlah mudah seperti pada contoh script berikut:

Multitouch.inputMode = MultitouchInputMode.GESTURE;
stage.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);
stage.addEventListener(TransformGestureEvent.GESTURE_ROTATE, onRotate);

function onZoom(evt:TransformGestureEvent):void {
 
 
robo.scaleX *= evt.scaleX;
robo.scaleY *= evt.scaleY;
 
}

function onRotate(evt:TransformGestureEvent):void {
robo.rotation += evt.rotation;

}

Terlihat betapa simplenya script yang digunakan untuk membuat efek zoom dan rotate dan langsung bisa diaplikasikan untuk merubah scale atau pembesaran serta rotation dari posisi x dan y pada instance "robo".

Baiklah kita lanjutkan dengan pembahasan yg lebih lanjut yaitu gesture swipe. Gesture swipe biasanya ditemui ketika membaca majalah digital contohnya saat membalik halaman pada tablet/handheld. Nilai yang dihasilkan dari proses swipe ini adalah angka yang tetap, yaitu -1 untuk swipe dari kanan ke kiri atau atas ke bawah, sedangkan sebaliknya akan menghasilkan angka 1.

Untuk itu kita butuh membuat robot android satu lagi dan kita namakan robo2, dan robot android cewek ini akan kita berikan classname sendiri, bukan dengan instance name seperti contoh sebelumnya

Class name yang kita buat adalah robo1 dan robo2 dimana nantinya akan dipanggil ke dalam stage menggunakan script seperti berikut

import flash.display.MovieClip; //class otomatis ditambahkan pada CS5.5

Multitouch.inputMode = MultitouchInputMode.GESTURE;
stage.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);
stage.addEventListener(TransformGestureEvent.GESTURE_ROTATE, onRotate);
stage.addEventListener(TransformGestureEvent.GESTURE_SWIPE, onSwipe);

var t:Timer = new Timer(1); //timer untuk animasi gerak
t.addEventListener(TimerEvent.TIMER, onTimer); 


var robot:MovieClip; //variable untuk movieclip robo
var pilihan:Number = 1;
var step:Number = 1;
//awal tampilan
robot= new robo1;
addChild(robot);
robot.x=160;
robot.y=240;




function onZoom(evt:TransformGestureEvent):void {
 
 
robot.scaleX *= evt.scaleX;
robot.scaleY *= evt.scaleY;
 
}

function onRotate(evt:TransformGestureEvent):void {
robot.rotation += evt.rotation;

}


//perlakuan terhadap hasil swipe ke animasi
 
function onTimer(event:TimerEvent):void{
robot.x -=5;
if(robot.x < (-robot.width/2)     )  {
 removeChild(robot);
    robot=null;
 if(pilihan == 1){
 robot=new robo2;
 pilihan=2;
 step=2;
 }
 else{
 robot=new robo1;
 pilihan=1;
 step=2;
 }
 
 addChild(robot);
 robot.x=350;
 robot.y=240;
}
if(step == 2 && robot.x <= 161){
 t.stop();
 step=1;
}

event.updateAfterEvent();
}
 
 


function onSwipe(evt:TransformGestureEvent):void {

 if(evt.offsetX == -1){
 
 t.start();

 
 }




}

Simple dan sangat powerful !! hanya itu kata yang dapat saya berikan kepada adobe air, dan hasilnya dapat dilihat pada video berikut :






Jangan lupa untuk membaca tutorial sebelumnya jika ingin melihat cara publish ke handheld android kamu. Source code untuk tutorial ini dapat di download disini

SELAMAT MENCOBA

Read More

Tutorial Aplikasi Memanfaatkan Accelerometer Pada Android berbasis Adobe Air

Accelerometer merupakan sensor kemiringan yang umum terdapat pada Hanheld berbasis Android. Sensor ini memiliki fungsi untuk menentukan posisi tilting dari Handheld terhadap koordinat X, Y atau kadangkala memiliki juga koordinat Z utamanya pada HandHeld kelas tinggi.

Adobe Air memiliki kemampuan untuk mendeteksi sensor accelerometer dimana class atau script yang digunakan adalah "Accelerometer", contoh inisialisasi nya seperti berikut:

var theAcc:Accelerometer = new Accelerometer();

Seperti biasa kita akan menggunakan software development adobe flash CS 5.5 dan buatlah project "AIR FOR ANDROID" dan buatlah tampilan dengan gambar geometry yang kali ini sebagai contohnya menggunakan sebuah kotak.

(klik pada gambar untuk memperjelas)

Jangan lupa untuk merubah kotak tadi menjadi movieclip sehingga dapat diberikan nama dan akan diolah selanjutnya. Lanjutkan dengan membuat 1 layer pada timeline dan pada layer ini akan ditempatkan action script.

Lanjutkan dengan menambahkan script seperti ini :

var theAcc:Accelerometer = new Accelerometer();

theAcc.setRequestedUpdateInterval( 50 );
if (Accelerometer.isSupported == true) {
theAcc.addEventListener(AccelerometerEvent.UPDATE, onAccUpdate);
}else {
// do something different for the entire app
}
function onAccUpdate( e:AccelerometerEvent ):void {
 
posisi.text =kotak.x.toString() + " , " + kotak.y.toString() ;
acel.text =e.accelerationX.toString() + " , " + e.accelerationY.toString() ;

kotak.x -= ( e.accelerationX * 50);
kotak.y += ( e.accelerationY * 50);
if ( kotak.x < 0 ) {
kotak.x = 0;
} else if (kotak.x > (stage.stageWidth - 30)  ) {
kotak.x = stage.stageWidth - 30 ;
}
if ( kotak.y < 0 ) {
kotak.y = 0;
} else if (kotak.y > (stage.stageHeight -30) ) {
kotak.y = stage.stageHeight -30 ;
}

}

Pada script diatas terlihat bahwa posisi dari movieclip bernama kotak akan dirubah-rubah sesuai dengan nilai dari kemiringan accelerometer X dan Y. Pada bawah dari aplikasi terdapat tracing yang berguna untuk melihat posisi kotak dan pembacaan dari accelerometer. Source Code (adobe flash CS5.5) dapat didownload disini.

SELAMAT MENCOBA 

Read More

Tutorial Aplikasi Touch Sensor Pada Android berbasis Adobe Air

Salah satu fasilitas yang sangat umum dijumpai pada smartphone berbasis android adalah touch sensor pada layar. Selain Touch ada juga fasilitas yang dinamakan gesture yaitu kombinasi penekanan beberapa jari untuk mendapatkan efek tertentu.  Kali ini kita akan bermain-main dengan fasilitash touch dan drag. Seperti pada pembahasan sebelumnya, adobe air besutan pengembang Adobe memiliki keunggulan pada kemudahan desain yang bisa dibilang 10x lebih mudah jika dibanding dengan SDK asli yang berbasis eclipse-java.

klik pada gambar untuk melihat lebih jelas

Sebelum memulai ada baiknya melihat pembahasan sebelumnya karena beberapa pembahasan yang serupa akan di lewati. Langkah awal yang kita buat adalah sebuah lingkaran atau bentuk geometri lain. Bentuk geometri ini nantinya akan digerak-gerakkan oleh jari-jemari. Pada contoh yang dibuat penulis, bentuk geometry berupa lingkaran dan memiliki animasi lingkaran luar yang mengembang-kempis. Jangan lupa untuk merubah bentuk geometri ini menjadi movieclip agar bisa dipanggil sebagai library class , seperti contoh pada gambar dibawah.

Cara penamaan class adalah dengan melakukan click kanan pada nama library lingkaran tadi kemudian pilih properties, atau bisa juga pada saat merubah kedalam movieclip. Beri nama class sesuai keinginan.

Pada gambar diatas adalah contoh membuat animasi lingkaran kembang-kempis dengan menggunakan tweening. Proses twieen akan secara otomatis membuat animasi sesuai perubahan antara key frame start dan key frame selanjutnya, tanpa harus merubah gambar pada semua frame.

Selanjutnya kita akan menuju ke scripting. Class yang paling penting dalam pemrograman touch sensor adalah :

Multitouch.inputMode=MultitouchInputMode.TOUCH_POINT; 

Selanjutnya experimen pertama adalah dengan menampilkan gambar lingkaran setiap kali layar ditekan. Script nya seperti dibawah ini:

Multitouch.inputMode=MultitouchInputMode.TOUCH_POINT; 

var bola:lingkaran;

stage.addEventListener(TouchEvent.TOUCH_BEGIN, mulai); 



function mulai(evt:TouchEvent):void{


bola=new lingkaran;
addChild(bola);

bola.x=evt.stageX;
bola.y=evt.stageY;

}

Jika ingin mempublish ke HandHeld Android kamu, sebaiknya baca dulu pembahasan sebelumnya disini

Hasil dari script pertama adalah munculnya gambar lingkaran setiap kali layar ditekan. Bagaimana jika kita ingin menghilangkan lingkaran saat jari diangkat dari layar ? ubah scriptnya seperti ini :

Multitouch.inputMode=MultitouchInputMode.TOUCH_POINT; 

var bola:lingkaran;

stage.addEventListener(TouchEvent.TOUCH_BEGIN, mulai); 
stage.addEventListener(TouchEvent.TOUCH_END, selesai);


function mulai(evt:TouchEvent):void{

if(bola == null){

bola=new lingkaran;
addChild(bola);

bola.x=evt.stageX;
bola.y=evt.stageY;
}


}


function selesai(evt:TouchEvent) {
 
 removeChild(bola);
 bola=null;
 
}

Well...kenapa tidak kita gerak-gerakkan saja lingkaran ini ? Hajar saja bos !!

Multitouch.inputMode=MultitouchInputMode.TOUCH_POINT; 

var bola:lingkaran;

stage.addEventListener(TouchEvent.TOUCH_BEGIN, mulai); 
stage.addEventListener(TouchEvent.TOUCH_END, selesai);
stage.addEventListener(TouchEvent.TOUCH_MOVE, gerak); 



function mulai(evt:TouchEvent):void{

if(bola == null){

bola=new lingkaran;
addChild(bola);

bola.x=evt.stageX;
bola.y=evt.stageY;
}


}

function gerak(evt:TouchEvent) {
 
bola.x=evt.stageX;
bola.y=evt.stageY;
 
}

function selesai(evt:TouchEvent) {
 
 removeChild(bola);
 bola=null;
 
}

MUDAH BUKAN ?   untuk file tutorial selengkapnya (adobe flash cs5.5) dapat didownload disini

Read More

Tutorial Bergambar Membuat Aplikasi GPS pada ANDROID berbasis Adobe AIR

(klik pada gambar dibawah untuk memperjelas)

Persiapan software yg dibutuhkan adalah Adobe Flash CS5 keatas yang support adobe air dan aplikasi berbasis android dan ios(iphone). Buatlah  project baru dengan memilih tipe project "Air for Android". Pilih juga lebar layar yang sesuai dengan layar HP android kamu, kali ini kita gunakan layar berukuran 320x480 (karena HP Android saya CROSS A10). Warna latar belakang juga dapat dirubah sesuai selera.

Pada layar aplikasi, buatlah tulisan (textfield) dengan meng-click toolbar text dan buatlah textfield yang terdiri dari tulisan statis dan dynamic text. Tulisan statis untuk tulisan yang tidak berubah sedangkan tulisan dinamis akan berubah dan memiliki nama (instance). Perhatikan gambar contoh dimana kotak "text field" dynamic paling atas diberi nama "lokasi_lat", pemberian nama pada kolom properties di sebelah kanan atas layar. Perhatikan gambar berikut untuk penamaan tiap text field.

Setelah semua instance/nama dari textfield dinamic terisi, maka dilanjutkan dengan membuat layer baru pada timeline dan akan dimasukkan actionscript kedalamnya. Action script ini ditempatkan pada frame paling awal dengan cara mengklik kanan pada keyframe dan kemudian memilih "action script". Kemudian pada kotak action script masukkanlah script seperti berikut :

statuse.text= "mencari sinyal gps !!"; 

if(!Geolocation.isSupported)
{
 statuse.text = "Hp Ga Ada GPS nya !";
}
else
{
    var my_geo:Geolocation = new Geolocation();
    my_geo.addEventListener(GeolocationEvent.UPDATE, onGeoUpdate);
 
 if(my_geo.muted){
 statuse.text = "Gps Mati Jeehh !";
 }

}

function onGeoUpdate(e:GeolocationEvent):void{
 
lokasi_lat.text = e.latitude.toString() ;
lokasi_long.text = e.longitude.toString() ;
lokasi_alt.text = e.altitude.toString() ;
speede.text = e.speed.toString() ;

statuse.text= "gps update sukses!!"; 
}

Adobe air memiliki beberapa fasilitas untuk menampilkan data GPS berupa latitude, longitude,ketinggan dan kecepatan. Sayangnya Adobe Air tidak memiliki fasilitas untuk heading / arah relatif terhadap posisi utara.

Langkah selanjutnya adalah langkah mempublish aplikasi ke HP. Akan tetapi langkah pertama sebelum publish adalah melakukan setting environment dari aplikasi. Diawali dengan menentukan setting umum/general, yang pada umumnya hanya menentukan orientasi layar dan apakah layar full screen atau tidak.

Pada tab Deployment buatlah certificate dari aplikasi sesuai contoh pada gambar. Berikan password yang dapat diingat karena akan diperlukan nantinya. Jangan lupa melakukan save as dan kemudian di simpan dengan nama yg sesuai keinginan. 

Jika certificate berhasil dibuat, maka akan muncul seperti gambar diatas.

Untuk icon mungkin bisa diskip, tapi jika mau applikaisnya memiliki icon tertentu, maka diperlukan pembuatan 3 file icon yg memiliki ukuran 36x36, 48x48 dan 72x72. Format filenya adalah PNG dan adobe flash memiliki fasilitas untuk menyimpan (export image) sebagai PNG. Jadi manfaatkan saja, asal ukuran yang dihasilkan pas sesuai yang di syaratkan.

Jangan lupa untuk setting permission dari aplikasi sesuai kebutuhan dan aplikasi GPS memerlukan akses ke internet (untuk download adobe air kalo belum tersedia di hp) dan permission ke sensor GPS.

Sebelum aplikasi di publish ke HP settinglah HP android ke mode debugging, dan pada PC diinstal driver ADB nya, yang paling umum untuk berbagai HP adalah driver ADB yang bisa didownload disini . Jika Kabel USB dicolokkan maka akan muncul notifikasi "USB DEBUGGING CONNECTED"

Nah...sekarang HP telah terhubung dan driver ADB telah sukses terkoneksi, langkah selanjutnya adalah publishing aplikasi ke HP. Jangan lupa untuk memasukkan password seperti gambar diatas dan kemudian menekan tombol "publish" ....dan SELAMAT...applikasi GPS ANDROID pertama anda telah selesai.

Jika adobe air belum tersedia pada HP maka akan muncul notifikasi untuk mendownload dari google play, selanjutnya jangan lupa menghidupkan GPS dan mencari lokasi yang terbuka sehingga dapat terhubung dengan satelit GPS. 

Source code dari tutorial ini dapat didownload disini.

SELAMAT MENCOBA

Read More

Timer dan Counter Pada Microcontroller AVR

- COUNTER/TIMER , apaan sih ? 

Adalah fasilitas di microcontroller untuk melakukan counter/perhitungan tanpa perlu menambahkan code di looping main program ( auto), sehingga nilai dari counter ( BIASANYA register TCNT) dapat di olah/manfaatkan sewaktu2

- JENIS COUNTER APA AJA ?

Secara umum Counter /Timer terdiri dari:

- Timer Biasa (8 bit & 16 bit)

- Clear Timer on Compare (CTC)

- Overflow Timer

- Output Compare 

- PWM timer ( bahasan tersendiri)

Kita bahas yang paling sering digunakan timer biasa dan timer CTC.

- Counter 8 bit & 16 Bit

Jadi ingat, 8 bit itu maximum nilai yg didapat 0 - 255, sedangkan 16 bit = 0 - 65535 , jadi berbeda di range nilai Counternya.

Semisal kita pakai IC attiny2313 dengan clock default 1MHZ, jadi jika kita dapat ambil matematika sederhana :

resolusi = 1/input clock = 1/1Mhz = 1 micro second

Jika kita inisialisasi counter dengan Full Speed , clock = input frek oscillator (1 Mhz),  dan digunakan 16 bit / counter 1 TCCR1B|=(1<<CS10), maka jika kita ingin menghidupkan suatu led di PortD dalam selang 1 detik,  kita tunggu nilai Counter(TCNT1) = 1000000;

wah....kelebihan ! Ingat..nilai TCNT1 max= 65535, jadi kita perlu membagi counter dengan variabel yg lain, semisal kita pake variable a; Jadi ketika TCTN1 = 10000; Lalu reset TCTN1=0 ; a++; (ditambah), berulang seterusnya sampe nilai a= 100; maka LED di PORTD dihidupkan/toogle. Berikut scriptnya :

Code:

#include <avr/io.h> 

int main (void) 
{ 
   DDRD |= (1 << PD0); // Set LED di portD0 

   TCCR1B |= (1 << CS10); // Set up counter dengan full speed 

int a;  variable

a=0;  //nilai awal dari variable
  
 while (1) 
   { 

   if(TCNT1 == 10000) 
      { a++;
         TCNT1=0;
      }

   if(a == 100)
     { 
     PORTD ^= (1 << PD0); // Toggle the LED 
     a=0;
     }

   } 
}

- PRESCALER 

Jika di pembahasan sebelumnya, kita menggunakan variabel sebagai pembagi counter yg berlebih, AVR memberikan suatu solusi dengan melakukan pembagian clock menjadi faktor 1/8, 1/64, 1/256, dan 1/1024

Dengan Prescaler ada pembagian resolusi  ( timer penambahan counter) yang  akan menjadi berkurang :

1(full speed) = 1 micro second

1/8 = 8 micro second

1/64 = 64 us

1/256= 256 us

1/1024=1024us

Nah...kita sekarang bisa membagi clock sesuai keinginan, dan menyederhanakan perhitungan

Semisal kita ingin mendelay LED 1 detik, dengan clock 1Mhz  maka kita coba dengan  prescale 1/8,  untuk mencari 1 detik nilai TCNT1 = 125000, masih lewat, prescale 1/64 maka nilai TCNT1 = 15625 ...nahh nilainya ga lewat dari batas 16 bit (65535) ....ketemu dehh....jadi kita sederhanakan script sebelumnya menjadi :

Code:

#define F_CPU 1000000UL //clock dari avr
#include <avr/io.h> 




int main (void) 

{ 

   DDRD |= (1 << PD0); // Set LED di portD0 
   TCCR1B |= (1 << CS11); // Set up counter dengan prescale 64
   //Baca datasheet untuk mencari konfigurasi prescaler yg laen



 while (1) 

   { 



   if(TCNT1 == 15624) 
 // nilai max 1 detik, perhitungan mulai 0 maka nilai dikurangi 1 dari 15625

   {
      PORTD ^= (1 << PD0); // Toggle the LED 
     TCNT1=0;
    }



   } 

}

- CLEAR TIME ON COMPARE + INTERUPT

selanjutnya AVR memberikan failitas CTC, yaitu kita menentukan nilai maximum dari TCNT1 dan secara otomatis akan mengclear nilai TCNT1. Nilai max dari TCNT1 diberikan melalui register OCR1A

setiap kali TCNT1 = OCR1A akan terjadi trigger interupt CTC, sehingga dapat dimanfaatkan untuk mentriger suatu output. codenya akan menjadi seperti ini

Code:

#define F_CPU 1000000UL //clock dari avr
#include <avr/io.h> 
#include <avr/interrupt.h>

ISR(TIMER1_COMPA_vect) //vector interupt compare

{ 

     PORTD ^= (1 << PD0); // Toggle the LED 

}

int main (void) 

{ 

   DDRD |= (1 << PD0); // Set LED di portD0 
   
   TCCR1B |= (1 << CS11); // Set up counter dengan prescale 64
   //Baca datasheet untuk mencari konfigurasi prescaler yg laen
   TCCR1B |= (1 << WGM12); // Configure timer 1 for CTC mode       
   TIMSK |= (1 << OCIE1A); // Enable CTC interrupt
   OCR1A = 15624; // nilai atas dari TCNT1, untuk perhitungan 1 detik

sei();   //hidupkan interupt


 while (1) 

   { 

    }

}

...mudah bukan ? atau makin pusing ?

Untuk counter dengan nilai frekuensi clock / XTAL lainnya dapat menggunakan rumus matematika sederhana untuk menetukan OCR1A 


OCR1A = [(Frekuensi AVR / Prescale) / frekuensi yg diinginkan ] - 1

atau

OCR1A = [(Frekuensi AVR / Prescale) * Periode yg di inginkan ] - 1


*) catatan : nilai prescale = 1,8,64,256,1024  bukan 1/prescale , untuk mempermudah saja


SELAMAT MENCOBA

Read More