Belajar Bareng

Create Custom Preloader

by aura_anar on Jun.02, 2009, under Tutorial Flash

Ni sekarang bagaimana cara untuk membuat simple preloader dari Flash untuk di masukkan di Flex. Pertama-tama buka Flash Document anda kemudian buat semacam preloader. Saya buat simple dan hasilnya seperti di bawah ini:

Caranya pertama-tama yaitu buat simple preloader seperti di gambar bawah ini:

sho1

Kemudian di text untuk menunjukkan presentasenya buat dynamicText dan ubah instance namenya menjadi percent.

Jika sudah kemudian klik kanan di movie clipnya lalu pilih properties. Lalu ubah seperti di bawah ini:

sho2

Jika sudah maka buka Flex Project anda. Kemudian buat file class di dalam project anda. Kemudian tuliskan script di bawah ini:

package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.filters.DropShadowFilter;

import mx.events.FlexEvent;
import mx.preloaders.DownloadProgressBar;

public class Pre extends DownloadProgressBar
{
private var cp:customPreloader;

public function Pre()
{
cp = new customPreloader();
cp.filters = [new DropShadowFilter(4, 45, 0, 0.5)];
addEventListener(Event.ADDED_TO_STAGE, onAdded);
addChild(cp)
}

public override function set preloader(preloader:Sprite):void
{
preloader.addEventListener(ProgressEvent.PROGRESS, onProgress);
preloader.addEventListener(FlexEvent.INIT_COMPLETE, initComplete);
}

private function onProgress(e:ProgressEvent):void
{
cp.percent.text = Math.ceil(e.bytesLoaded/e.bytesTotal*100).toString() + “%”;
cp.gotoAndStop(Math.ceil(e.bytesLoaded/e.bytesTotal*100));
}

private function initComplete(e:Event):void
{
dispatchEvent(new Event(Event.COMPLETE));
}

private function onAdded(e:Event):void
{
cp.stop();
cp.x = stage.stageWidth*0.5 – 130;
cp.y = stage.stageHeight*0.5 – 50;
}

}
}

Jika sudah maka kembali ke file application anda, lalu panggil seperti di bawah ini:

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” width=”100%” height=”100%” preloader=”Pre
backgroundGradientAlphas=”[1.0, 1.0]” backgroundGradientColors=”[#FFFFFF, #FFFFFF]“>

Saya menamakan file classnya tadi Pre. Jika sudah coba anda jalankan, Hasilnya seperti di bawah ini:

Semoga berhasil

:,

3 Comments for this entry

Leave a Reply

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Visit our friends!

A few highly recommended friends...