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
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); }
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; }
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