Mengganti Crusor Mouse dengan Symbol pada Flash

Membuat sebuah aplikasi dengan Macromedia flash akan menjadi lebih menarik apabila dilengkapi dengan custom crusor yang unik. Untuk mengganti crusor pada aplikasi berbasis Macromedia Flash ternyata sangat mudah sekali, hanya menggunakan beberapa baris action script saja. Berikut ini pembahasan dan contoh applikasinya.

Berikut ini salah satu cara untuk membuatnya :

Siapkan sebuah aplikasi Flash lengkap dengan obyek yang akan dijadikan crusor mouse, selanjutnya convert menjadi symbol. 

Kemudian ubah properties dari symbol yang akan digunakan sebagai crusor, ubah instance namenya. Instance name ini nanti yang akan kita atur posisinya seperti posisi crusor mouse. Beri nama lup pada symbol tadi.

Langkah terakhir adalah memberi action script pada symbol crusor mouse. Script ini terdiri dari 2 bagian, yang pertama adalah mengatur posisi symbol mengikuti posisi crusor mouse dan script yang kedua adalah menghilangkan tampilan crusor mouse yang asli.

Berikut ini scriptnya :

Srcipt Mengatur posisi symbol
onClipEvent (mouseMove) {
    _root.lup._x = _root._xmouse;
    _root.lup._y = _root._ymouse;
    updateAfterEvent();
}

Menghilangkan tampilan crusor mouse asli
onClipEvent (load) {
    Mouse.hide();
}

Setelah semua langkah di atas selesai, test Movie dan lihat hasilnya.

Media Ajar Berhitung untuk Anak dengan Flash

Dengan menggunakan Macromedia Flash kita bisa membuat, merancang atau sekaligus membuat sebuah aplikasi multimedia untuk membantu anak-anak belajar hanya dengan beberapa script flash yang sangat sederhana. Di bawah ini adalah contoh salah satu media pembelajaran untuk membantu anak belajar berhitung, menambah dan mengurangi. Media ini sangat mudah pula di buat dengan papan atau kertas apabila ingin dipraktekkan tidak dengan komputer. Berikut ini adalah contohnya :

Tekan tombol + dan - pada contoh di bawah ini untuk melihat perubahannya

Siapkan sebuah lingkaran mirip dengan Jam, dan buat semenarik mungkin dengan warna-warna yang menarik perhatian anak-anak.Tambahkan angka mulai dari 0 sampai dengan 9 seperti pada gambar di samping

Tambahkan 1 buah Jarum Penunjuk dan 2 tombol (1 tombol untuk menambah dan satu tombol untuk mengurangi). Cara membuat tombol Flash kamu bisa membaca artikelnya di link ini.

Jangan lupa untuk mengatur properties dari Jarum Penunjuk kita dengan memberinya nama jarum, Caranya adalah dengan cara klik Jarum Penunjuk, kemudian klik properties dan atur instance namenya menjadi jarum.

Langkah selanjutnya adalah memberikan perintah kepada tombol + dan tombol - untuk menggerakkan jarum apabila tombol tersebut di klik. Caranya adalah klik tombol tersebut kemudian tekan F9 (atau masuk ke jendela Action Script)

Untuk Tombol + beri script berikut :
on (release) {
    jarum._rotation -= 36; }

 Untuk Tombol - beri script berikut :
on (release) {
    jarum._rotation += 36; }

Selanjutnya test Movie kamu dan klik tombol + maka jarum akan bergerak menambah 1 angka dari 1, 2, 3, 4 dan seterusnya juga sebaliknya ketika tombol - di klik, akan berjalan sebagai fungsi pengurangan.
Media ini bisa digunakan untuk mengajari anak berhitung 1 sampai dengan 9 serta fungsi penambahan dan pengurangan.

Semoga bermanfaat...

Jam Analog dengan Macromedia Flash

Masih tentang ActionScript yang berbasis waktu, script ini bisa kita manfaatkan untuk membuat jam analog. Dengan script sederhana dan software Macromedia Flash kita bisa membuat design background animasi sesuai dengan trend yang sedang hot atau sesuai dengan hobi dan selera kita. Berikut ini contoh jam analog dengan tema Bola :

Untuk contoh-contoh jam analog lainnya bisa dilihat dan didownload di sini,  Sedangkan cara membuatnya adalah sebagai berikut :

Buat background jam dengan tema kesukaan dan selera kita lengkap dengan angka dan 3 buah jarumnya, jarum panjang, jarum pendek dan jarum detik.

Convert masing-masing jarum menjadi symbol (atau tekan F8). Selanjutnya ganti properties instance namenya masing-maisng menjadi JarumPendek untuk jarum pendek, JarumPanjang untuk jarum panjang dan JarumDetik untuk jarum detik.

Langkah selanjutnya adalah menambah layer dan memberinya action sript. seperti gambar disamping.

Berikut ini script yang di gunakan :

_root.onEnterFrame = function() {    myTime = new Date (); JarumPendek._rotation = (myTime.getHours()*30)+(myTime.getMinutes()/2);   JarumPanjang._rotation = (myTime.getMinutes()*6)+(myTime.getSeconds()/10);   JarumDetik._rotation = (myTime.getSeconds()*6);};

Sudah jadi deh Jam Analog kita, tinggal Test Movie atau tekan CTRL dan Enter secara bersamaan.

Kalender Digital dengan Actionscript pada Macromedia Flash

Dengan ActionScript yang sederhana, kita bisa membuat sebuah kalender dengan menggunakan Macromedia Flash. Berikut ini contoh hasilnya :

Cara Pembuatanya adalah sebagai berikut :

Kita buat satu file flash baru lengkap dengan  background dan text yang panjang dan tingginya disesuaikan dengan nama hari, tanggal, tinggi dan panjang background.

Langkah selanjutnya adalah merubah properties dari text kita dari statitc text menjadi dinamic text, jangan lupa untuk merubah variablenya juga menjadi "DispalyTanggal", seperti pada gambar disamping.

Langkah terakhir adalah menambah 1 buah layer lagi untuk layer ActionScript nya. 
untuk Scriptnya bisa di copy paste atau di modifikasi dari script di bawah ini :

function makeDayArray() {    this.length = 7;   this[1]="Minggu", this[2]="Senin";    this[3]="Selasa", this[4]="Rabu";    this[5]="Kamis", this[6]="Jum'at";    this[7] = "Sabtu";    return this();}function makeMonthArray() {    this.length = 12;    this[1]="Jan", this[2]="Feb";   this[3]="Mar", this[4]="Apr";    this[5]="Mei", this[6]="Jun";    this[7]="Jul", this[8]="Agt";    this[9]="Sep", this[10]="Okt";    this[11]="Nov", this[12]="Des";    return this();}_root.onEnterFrame = function() {    myDate = new Date();    waktu = new Date();    dayName = new makeDayArray();    monthName = new makeMonthArray();    day = myDate.getDay()+1;    dates = myDate.getDate();    month = myDate.getMonth()+1;    year = myDate.getFullYear();   newDay = dayName[day];    newMonth = monthName[month];    DisplayTanggal = newDay+", "+dates+"-"+newMonth+"-"+year;};

Setelah selesai memberi scriptnya, tinggal Test Movie atau klik CTRL dan Enter secara bersamman, dan jadi deh kalender digital kita. Selamat Mencoba!!

Stopwatch dengan Macromedia Flash

Setelah di utak-atik, akhirnya jadi juga versi terbaru stopwatchku ini, nah berikut ini hasil dari pembuatan stopwatch dengan Macromedia Flash, memadukan actionscript sederhana dan sebuah animasi grafis yang seadanya.

Berikut ini pembahasan cara membuatnya :

Buat sebuah file flash baru dengan design seperti digital stopwatch, design bisa disesuaikan dengan hobi atau kesuakaan kita. Jangan lupa untuk melengkapi dengan text sebagai display angka dalam stopwatch kita.

Selanjutnya merubah properties dari text kita dari static text menjadi dinamic text dan atur variablenya menjadi "ClockDisplay".

Langkah selanjutnya adalah menambah layer baru dan memberinya ActionScript. nah sebagian scriptnya bisa di copy di bawah ini :

function clockReset() {    delete currentTime;    delete displayTime;    mili = ":00";    secondsDisplay = ":00";    currentTime = new Date();    displayTime = new Date();    startTimeStarted = false;    pauseTime = 0;    clockDisplay = "00:00:00";    zeroHour = 0;}clockReset();function clockStart() {    clockWorkSwitch.gotoAndStop("on");}function clockStop() {    clockWorkSwitch.gotoAndStop("off");}function clockPause() {    pauseTime = newTime;    clockStop();    delete currentTime;    delete displayTime;    currentTime = new Date();    displayTime = new Date();    startTimeStarted = false;}function clockResume() {    clockStart();}function clockWork() {    delete currentTime;    currentTime = new Date();    if (!startTimeStarted) {        startTime = currentTime.getTime();<br>        startTimeStarted = true;    }    newTime = Number(currentTime.getTime()-startTime)+Number(pauseTime);       newTimeSec = newTime/1000;<br>    displayTime.setTime(newTime);    if (!zeroHour) {        displayTime.setHours(0);        zeroHour = 1;    }    var secs = displayTime.getSeconds();    var mins = displayTime.getMinutes();    var hours = Math.floor(newTimeSec/3600);    var milisc = Math.floor((newTimeSec-(secs+(mins*60)+(hours*3600)))*100);    if (secs.toString().length<2) {        secs = "0"+secs;    }    if (mins.toString().length<2) {        mins = "0"+mins;    }    if (hours.toString().length<2) {        hours = "0"+hours;    }    if (newTimeSec<60) {        clockDisplay = "00:00:"+secs;    }    if ((newTimeSec>60) && (newTimeSec<3600)) {        clockDisplay = "00:"+mins+":"+secs;    }    if (newTimeSec>3600) {        clockDisplay = hours+":"+mins+":"+secs;    }    clockDisplay = hours+":"+mins;    secondsDisplay = ":"+secs;    if (milisc.toString.length<2) {        milisc = +"0"+milisc;    }    mili = ":"+milisc;}

Script tersebut di atas adalah sebagian dari script yang kita gunakan. Untuk lebih lengkapnya source bisa di download disini.

Jam Digital Menggunakan Action Script pada Macromedia Flash

Artikel kali ini akan membahas tentang cara membuat sebuah jam sederhana menggunakan ActionScript pada Macromedia Flash MX. Dengan script yang sangat mudah sekali di pahami kita bisa membuat sebuah aplikasi jam digital. Berikut ini adalah contoh hasilnya :

Dan berikut ini adalah pembahasan sederhananya :

Buat sebuah file flash dengan Background dan sebuah text, atur agar panjang dari text bisa di isi dengan 6 Digit angka, lengkap dengan sparatornya.

Ubah propertis dari text menjadi Dinamic text dan pastikan mengganti nama variabelnya dengan nama DisplayJam. Untuk lebih jelasnya bisa dilihat pada gambar di samping.

Tambahkan satu buah layer lagi untuk mengisi ActionScriptnya. Selanjutnya pelajari dan masukkan ActionScript di bawah ini ke jendela ActionSript.

_root.onEnterFrame = function() {waktu = new Date(); Jam = waktu.getHours(); Menit = waktu.getMinutes();Detik = waktu.getSeconds(); if (Jam<10) { Jam = "0"+Jam; } if (Menit<10) { Menit = "0"+Menit; } if (Detik<10) { Detik = "0"+Detik; } DisplayJam =Jam+":"+Menit+":"+Detik;};

Selanjutnya Test Movie atau tekan CTRL dan enter secara bersamaan. Dan jam digital kita sudah jadi.

Aplikasi Action Sripct Berbasis Waktu pada Macromedia Flash Mx

Artikel ini menyajikan tentang penggabungan 3 pembahasan Basic Action Sript menjadi salahsatu aplikasi gabungan yaitu stopwatch, kalender dan jam digital.Berikut ini contoh dari penggabungan aplikasi tersebut.

Aplikasi di atas merupakan penggabungan dari beberapa aplikasi dengan menggunakan Macromedia Flash. Pembahasan mengenai bagaimana membuatnya akan kita bagi menjadi 3 bagian agar lebih jelas yaitu :

1. Jam Digital Menggunakan Action Script pada Macromedia Flash
2. Kalender Digital dengan Action Script pada Macromedia Flash
3. Stopwatch Menggunakan ActionScript pada Macromedia Flash

Membuat Tombol dalam Macromedia Flash Mx

Menggunakan tombol dalam Flash merupakan salah satu basic knowledge yang harus di miliki oleh seorang flash designer. Dengan tombol kta bisa mengatur, dan mendesain animasi-animasi dalam Movie kita, Nah.. artikel ini akakn membahas mengenai cara membuat tombol dengan Macromedia Flash Mx. berikut ini contoh tombol dan penggunaanya yang sederhana untuk mengatur background animasi.

Contoh di atas merupakan contoh sederhana dalam menggunakan tombol dalam animasi Flash. Berikut ini pembahasan mengenai cara pembuatan tombolnya, mengenai pengontrolan warna background bisa di baca pada artikel ini, sedangkan cara membuatnya adalah sbb :

Buatlah sebuah object yang akan dijadikan tombol, lalu convert menjadi symbol (tekan F8) dan jangan lupa untuk memilih Button pada pilihan menu convert (gambar disamping).

Double klik pada symbol tadi untuk melakukan edit, dan akan tampil menu editing tombol seperti gambar disamping. Posisi-posisi dalam menu editing tersebut adalah sbb :

Up adalah posisi tampilan tombol pada saat crusor tidak berada di atas area Hit dari tombol

Over adalah posisi saat Crusor berada di area Hit Tombol 

Down adalah posisi saat mouse di klik di atas Hit area Tombol.

Hit adalah area aktif tombol yang bisa di klik dan tidak ditampilkan di Movie.

Insert Keyframe (tekan F6) pada Timeline Over dan atur properties dari Text dan Background tombol sehingga memberikan efek ketika Crusor berada di area Hit tombol.Dalam contoh ini ukuranya di ubah menjadi 90% dari asli

Insert Keyframe (tekan F6) pada Timeline Down dan atur properties dari Text dan Background tombol sehingga memberikan efek ketika tombol do klik. Dalam contoh ini ukurannya diubah menjadi 80%

Insert Keyframe (tekan F6) pada Timeline Hit dan atur luasan area aktif tombol. Area inilah yang menentukan luasan yang bisa di klik dari tombol.tetapi tidak ditampilkan dalam Movie.

Nah tombol sudah jadi sekarang, tinggal tekan CTRL dan Enter atau test Movie. Untuk lebih jelasnya bisa dilihat pada contoh di bawah ini :

Animasi Masking dengan Macromedia Flash Mx

Masking merupakan sebuah teknik dasar dalam pembuatan animasi dengan Macromedia Flash. Dengan teknik ini kita bisa membuat cara menampilkan object flash sesuai dengan keinginan kita. Berikut ini salah satu contoh hasil membuat animasi dengan teknik masking, sebenarnya masih banyak sekali variasi dari penggunaan animasi ini berikut ini hanyalah salah satu contoh yang familiar dengan efek masking pada macromedia flash.

Dan berikut ini salah satu cara untuk membuat efek masking tersebut di atas.
 

Buatlah sebuah file flash lengkap dengan background dan tulisan yang akan dimanipulasikan tampilannya. Tambahkan dua buah layer seperti pada gambar, layer tulisan berisi dengan tulisan tampilan pada saat animasi dijalankan di flash player.

Letakkan tulisan tersebut tepat di atas tulisan pada background untuk merubah tampilan warna saja dan ubah propertinya menjadi lebih besar untuk memberi efek kaca pembesar. Tambahkan sebuah symbol lingkaran dan letakkan pada layer Mask. Detail bisa dilihat pada gambar.

Tambahkan sebuah layer lengkap dengan object untuk layer tersebut. Pada animasi ini kita menggunakan Object Lup. Bisa dilihat pada gambar di samping.

Pada layer background dan Layer Tulisan berikan Insert Frame (atau klik F5) pada time lime 50, atau atur sesuai dengan kecepatan tampilan yang diinginkan. Untuk efek kilatan pada tulisan biasanya dengan kecepatan lebih cepat dari animasi ini, kecepatan ini di atur dengan Time line. Untuk jelasnya bisa di lihat pada gambar di samping.

Sedangkan pada Layer Mask dan layer Lup, pada time line yang sama dengan 2 layer sebelumnya lakukan Insert Keyframe (atau tekan F6). 

Pada Time Line yang kita beri keyframe, geser posisi lingkaran Mask dan Lup melewati area animasi, seperti pada gambar di samping.

Kemudian beri efek Motion Tween pada layer Lup dan Layer Mask. Artikel tentang Motion Tween bisa di baca dengan klik di sini.

Langkah selanjutnya adalah klik pada Layer Mask, Klik kanan dan kemudian pilih menu Mask. Detail bisa dilihat pada gambar disamping.Ini adalah inti dari pembuatan efek masking pada Macromedia Flash MX.

Animasi dengan Efek Masking sudah jadi dan tinggal kita Test Movie atau dengan klik CRTL dan Enter secara bersamaan.

Animasi dengan Guide Layer

Guide atau pemandu, salah satu kata yang familiar di bidang pariwisata, namun bukan sektor pariwisata yang akan di bahas dalam postingan ini, melainkan guide layer pada Macromedia Flash. Guide layer pada Macromedia Flash digunakan untuk memandu object/symbol agar berjalan seperti apa yang kita inginkan. Nah kita bisa membuat sebuah pemandu perjalanan object / symbol dengan menggunakan guide layer ini. Contohnya adalah animasi dibawah ini :

Berikut ini pembahasan mengenai Movie tersebut :

Langkah pertama adalah buatlah sebuah file flash baru dengan 2 layer dan beri nama layer 1 dengan animasi dan layer 2 dengan jalan. buatlah sebuah object lalu convert menjadi symbol (tekan F8) dan letakkan pada layer animasi. Kemudian buat sebuah object jalan sesuai dengan keinginan dan lettakkan pada layer Jalan. pastikan Layer animasi berada di atas layer Jalan. gambarnya kurang lebih seperti berikut :

Setelah itu pastikan design kamu seperti gambar disamping klik layer animasi dan tekan tombol yang ditunjuk oleh panah pada gambar disamping. ini akan menambahkan guide layer atau yang kita sebut layer pemandu untuk layer animasi.

Setelah menambahkan guide layer, buatlah sebuah garis pemandu yang akan dijadikan panduan berjalannya object. perhatikan gambar disamping.

Pastikan draft animasi seperti gambar disamping, kemudian klik kanan pada time line 60 layer satu dan pilih menu insert frame (atau tekan F5). lakukan hal yang sama untuk layer jalan. tetapi tidak dilakukan pada layer animasi.

Pada layer animasi, klik kanan time line pada angka 60 dan pilih menu insert keyframe (atau tekan F6).

Selanjutnya klik keyframe pada time line 60, dan geser object pada ujung garis pemandu kita.

Untuk membuat object mengikuti garis pemandu, pastikan poros putar object yang berupa lingkaran kecil pada object tepat berada di garis pemandu seperti gambar disamping.

Setelah langkah-langkah di atas selesai, lanjutkan dengan membuat tween pada layer animasi. Jika belum tahu bagaimana membuat Motion Tween, kamu bisa membacanya dengan klik ini, 

 
 
 
 

Selanjutnya Test Movie dan jika langkah-langkah di atas diikuti secara benar, maka object kita akan berjalan mengikuti garis pemandu.
 
 

Upload swf files ke Web

Berikut ini adalah script sederhana yang digunakan untuk upload file swf / flash ke dalam blog atau web diantara berbagai macam cara upload yang lainnya. Salah satu caranya adalah sebagai berikut :

Upload file swf kamu ke internet, bagi yang tidak punya web pribadi bisa menggunakan web gratis yang banyak banget di dunia maya, salah satunya adalah google site, kamu bisa klik disini untuk mendaftar. selanjutnya  buat sebuah account.

Ikuti langkah-langkah pembuatan account sampai dengan selesai dan upload files kamu ke sites kamu sekarang. Jangan lupa masuk ke menu sharing dan contreng kotak anyone in the world may view this site (make a public).

Langkah selanjutnya adalah mengambil Link alamat dari files kita. Klik menu attachment dan klik kanan pada files kita lalu pilih menu Copy Link Location. Link ini nantinya akan digunakan sebagai url pada script upload kita.

Langkah terakhir adalah memasukkan scritp upload ini ke dalam blog / web :

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash /swflash.cab#version=6,0,29,0" height="tinggi" width="lebar"><param value="link file" name="movie"/><param value="high" name="quality"/><embed pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" quality="high" width="lebar" src="link file" height="tinggi" type="application/x-shockwave-flash"></embed></object>

Nah gunakan Script di atas untuk upload file swf ke Blog/web setelah mengganti panjang dan lebar sesuai dengan ukuran object dan mengganti link dengan link file swf.

Animasi Motion dengan Macromedia Flash

Motion Tween pada Macromedia Flash digunakan untuk membuat efek agar object bergerak secara terus-menerus dengan gerakan yang tidak putus-putus. Efek untuk layer ini merupakan pengetahuan dasar yang harus dimiliki oleh seorang pengguna Flash. Contoh hasil aplikasi menggunakan efek ini bisa dilihat pada Movie di bawah ini :

Movie di atas terdiri dari beberapa bagian animasi yang digabungkan, salah satu bagiannya adalah menjalankan mobil. Nah artikel ini akan membahas bagaimana menjalankan mobil menggunakan efek motion tween, salah satu caranya adalah sebagai berikut :

Buatlah sebuah object (contoh dalam artikel ini adalah mobil). Setelah object selesai di buat, convert menjadi symbol dengan cara klik object kita dan tekan F8 atau (dalam Macromedia Flash MX) dari menu Modify dan pilih Convert to symbol.

Setelah object kita convert menjadi symbol, langkah selanjutnya adalah menjalankan mobil. Pilih salah satu angka pada time line layer, semakin kecil maka jalan mobil akan semakin cepat dan sebaliknya. Klik kanan pada angka yang kita pilih kemudian klik kanan dan pilih menu Insert Keyframe atau tekan F6

Klik pada pada keyframe yang baru saja kita buat tadi dan atur posisi mobil melewati area kerja kita. bisa dilihat pada gambardi samping.

Langkah selanjutnya, kembali pada frame 1 (lihat gambar samping) lalu klik kanan dan pilih menu Create Motion Tween

Selanjutnya Test Movie atau dengan menekan tombol CTRL dan Enter secara bersamaan.