Membuat Informasi Posisi Mouse

Pada animasi ini, anda akan membuat sebuah tampilan yang memberikan informasi koordinat dari posisi mursor mouse. langkah-langkah pembuatannya adalah sebagai berikut:

  1. Buatlah sebuah dokumen baru dengan memilih File -> New.
  2. Pada kotak dialog New Document, pilih Flash File (ActionScript 2.0), lalu klik OK.
  3. Import sebuah tampilan foto sebagai background dengan memilih menu File -> Import -> Import to Stage.
  4. Dengan menggunakan Free Transform Tool, atur tampilan foto agar sesuai dengan ukuran stage.
  5. Lakukan penguncian trhaddap layar bacjground.
  6. Buatlah layer baru dengan klik New Layer pada Timeline.
  7. pilih Text Tool pada toolbox.
  8. Pada panel Properties, pilih Dynamic Text.
  9. Dengan menggunakan tool tersebut, buatlah kotak teks pada stage.
  10. Buatlah dua kotak dengan ukuran yang sama dan atur posisinya.
  11. Klik kotak teks tersebut dengan enggunakan text Tool.
  12. pada panel Properties, ketikkan “xmouse_txt”.
  13. Lakukan pengaturan terhadap tampilan teks pada tab Character.
  14. Lakukan pada kotak teks kedua, kemudian ketikkan “xmouse_txt” pada panel Properties.
  15. Atur tampilan teks dengan pengaturan yang sama seperti pada pengaturan teks sebelumnya.
  16. Klik Text Tool di luar stage.
  17. Selanjutnya pilih Static Text pada panel properties.
  18. Dengan menggunakan tool tersebut, buatlah teks seperti pada gambar berikut sebagai keterangan bagian kotak terks.
  19. Sekarang buatlah layar baru dengan New Layer pada Timeline.
  20. Klik frame pertama pada layer tersebut,
  21. Tampilkan panel Actions, kemudian ketikkan ActionScript berikut:

onMouseMove=function(){

xmouse_txt.text=_root._xmouse;

ymouse_txt.text=_root._ymoouse;

updateAfterEvent();

}

22.  Tampilkan hasilnya dengan tekan Ctrl+Enter.

23.  Gerakkan mouse maka akan tampak angka-angka koordinat.

Iklan

Membuat Animasi Bola

  1. Buatlah sebuah dokumen baru dengan memilih File -> New.
  2. Sebelumnya, anda harus dapat membuat tampilan bola dengan menggunakan program Adobe Photoshop atau illustrator.
  3. Import objek bola yang telah anda buat ke dalam stage dengan memilih menu File -> Import -> Import to Stage.
  4. pilihSelection Tool  pada toolbox.
  5. Lakukan seleksi terhadap objek bola tersebut.
  6. Pilih menu Modify -> Convert to Symbol.
  7. Pada kotak dialog Convert to Symbol, isi kotak Name dengan “bola”.
  8. Pada panel properties, ubah kolom Instance name dengan “bola”.
  9. Klik frame pertama pada layer Timeline.
  10. Tekan F9 untuk menampilkan panel Actions.
  11. Pada panel tersebut, ketikkan script berikut:

 

//1.

stage.addeventListener(MouseEvent.MOUSE_MOVE,followBall);

//2.

function followBall(event:MouseEvent):void{

bola.x=mouseX;

bola.y=mouseY;

 

12. tekan Ctrl+Enter untuk melihat animasi.

Membuat Animasi Jam Digital

  • Buatlah sebuah dokumen baru dengan memilih ActionScript 3.0.
  • Atur stage dengan memilih menu Modify -> Document hingga akan tampak kotak dialog Document.
  • Pada kotak dialog Document, atur Dimensions dengan nilai 460 x 150.
  • Pada Background color pilih warna hitam.
  • Isikan Frame rate dengan nilai 32 fps, lalu klik OK.
  • Pilih Text Tool pada toolbox.
  • Pada panel Properties, pilih Dynamic Text.
  • Dengan menggunakan tool tersebut, buatlah tiga kotak teks pada stage.
  • Lakukan seleksi terhadap kotak teks pertama atau yang paling kiri.
  • Pada panel Properties ketikkan “jam_t“.
  • Selanjutnya atur teks pada pengaturan Character dengan jenis font Arial Black dan ukuran teks 50 pt.
  • Atur juga warna yang digunakan dengan pilihan warna kuning.
  • Selanjutnya lakukan seleksi terhadap kotak tengah atau kedua dan ketikkan “menit_t” pada panel Properties.
  • Lakukan seleksi terhadap kotak kanan atau kotak ketiga, dan ketikkan “detik_t” pada panel Properties.
  • Lakukan pengaturan Character pada kedua kotak teks tersebut dengan pengaturan yang sama seperti pengaturan pada kotak pertama.
  • Ketikkan pada masing-masing kotak dengan angka “00“.
  • Anda dapat mengatur ulang tampilan teks dan posisinya dengan menggunakan Free Transform Tool.
  • Selanjutnya dengan menggunakan Text Tool, buatlah kotak teks lagi kemudian ketikkan tanda pemisah untuk tiap-tiap angka pada kotak tersebut “:“.
  • Lakukan seleksi terhadap kotak-kotak teks tersebut dengan menekan tombol Shift.
  • Tampilan tab Filters pada panel Properties.
  • Klik Add Layer pada teb tersebut, kemudian pilih Drop Shadow.
  • Lakukan pengaturan terhadap efek tersebut.
  • Atur warna Drop Shadow dengan warna merah.
  • Buatlah layer baru dengan klik New Layer.
  • Klik frame pertama pada layer baru.
  • tampilkan panel Actions, kemudian ketikkan ActionScript berikut ini:

 

stage.addEventListener(Event.ENTER_FRAME,updateDate);

function updateDate(e:Event):void{

var date=new Date();

if  (date.hours< 10){

jam_t.text=”0″+date.hours;

}

else {

jam_t.text=date.hours;

}

if  (date.minutes_t< 10){

menit_t.text=”0″=date.minutes;

}

else {

menit_t.text=date.minutes;

}

if  (date.seconds< 10){

detik_t.text=”0″+date.seconds;

}

else {

detik_t.text=date.seconds;

}

}

 

  • Tampilkan hasil animasi dengan klik Ctrl+Enter.

Animasi Objek Mengikuti Cursor ke Satu Arah

Sama halnya dengan Membuat Objek Animasi Mengikuti Cursor, Membuat Objek Animasi Mengikuti Cursor ke Satu Arah juga mudah sekali membuatnya. Dengan tutorial ini kamu bisa membuat game kecil-kecilan dengan cara menggerakkan cursor ke kanan dan ke kiri. Tutorial ini menggunakan Macromedia Flash dan script yang digunakan yaitu Action Script 2

1. Pertama buatlah sebuah New Flash Document
2. Lalu buat sebuah kotak atau objek yang akan dijadikan objek yang mengikuti mouse ke kanan dan ke kiri
3. Setelah jadi, seleksi kotak tersebut lalu pilih menu Modify > Convert to Symbol
4. Namanya bak_mc, typenya Movie Clip dan titik registrasinya tepat berada di tengah lalu klik OK
5. Seleksi bak_mc lalu tekan F9 sehingga panel Actions muncul di depan mata
6. Nah, pas disitu masukkan Action Script ini

onClipEvent(enterFrame){
//ketika movie clip masuk ke frame
this._y+=_ymouse
//letak _y sama dengan letak _ymouse
}

7. Setelah itu tekan Ctrl+Enter untuk mengetes animasi
8. Sedesai deh cara Membuat Objek Animasi Mengikuti Cursor ke Satu Arah

Membuat Objek Animasi Mengikuti Cursor

Membuat objek animasi atau gambar mengikuti cursor caranya cukup mudah. Dengan cara ini maka sebuah gambar akan terus berada di letak tempat cursor berada. Di sini saya menggunakan Macromedia Flash.  Caranya seperti ini :

1. Buatlah sebuah gambar untuk dijadikan objek pengikut
2. Setelah jadi, seleksi gambar tersebut
3. Lalu pilih menu Modify > Convert to Symbol atau langsung tekan F8
4. Namanya terserah, typenya Movie Clip dan titik registrasinya tepat berada di tengah
5. Klik OKEY
6. Seleksi movie clip tersebut lalu tekan F9 untuk memunculkan panel Actions tempat memasukkan Action Script
7. Masukkan Action Script ini

onClipEvent(enterFrame){
//ketika movie clip masuk ke frame
this._y+=_ymouse
//letak _y sama dengan letak _ymouse
this._x+=_xmouse
//letak _x sama dengan letak _xmouse
}

8. Cara mengetes animasi pada macromedia cukup pilih menu Control > Test Movie atau tekan Ctrl+Enter

Membuat Animasi Kumbang Mengikuti Mouse

Kali ini saya akan membuat sebuah objek yang bergerak seakan-akan mengikuti mouse. Yang ini beda sama yang mengganti kursor lho. Kalo bingung, langsung aja deh lanjut….. 8)

  • Seperti biasa, kita buat sebuah dokumen baru. :wink:
  • Sekarang yang mengikuti kursor adalah kepik, atau kumbang, gambar yang bagus ya.. :pkumbang

    kumbang

  • Setelah kita gambar kumbang yang bagus, kemudian seleksi kumbang tersebut atau tekan Ctrl + A (Seleksi semua).
  • Kemudian kita klik kanan pada kumbang tersebut dan pilih Convert To Symbol, lalu pilih MovieClip (Setting seperti di gambar ya :wink:).convert to symbol

    convert to symbol

  • Oke, sekarang Kumbang kita jadi sebuah MovieClip. :)
  • Terlebih dahulu kita klik kumbangnya dulu terus kita pergi ke panel properties (caranya tekan Ctrl + F3) dan ubah instance name-nya menjadi kumbang_mc.properties kumbang

    properties kumbang

     

  • Sekarang kita beralih ke Actionscript nih, siap2 ya..  😆
  • Buka Panel Actions dengan menekan F9 pada keyboard, jika yang muncul adalah Panel Actions – MovieClip, berarti kita harus meng-klik Layer 1 frame 1 agar Panelnya menjadi Actions – Frame.actions - frame

    actions – frame

  • Kemudian ketikkan script berikut :
    01 _root.onEnterFrame=function(){
    02 //mencari selisih dari koordinat
    03 var deltaX = _xmouse - kumbang_mc._x;
    04 var deltaY = _ymouse - kumbang_mc._y;
    05 //menggerakkan kumbang ke kursor sebesar 1/10 dari jarak ke kursor
    06 kumbang_mc._x += deltaX / 10;
    07 kumbang_mc._y += deltaY / 10;
    08 //kumbang menghadap ke mouse
    09 kumbang_mc._rotation = -Math.atan2(-deltaX,-deltaY)*180/Math.PI;
    10 }

Tutorial Animasi 2 Dimensi

Tutorial ini adalah lanjutan dari Tutorial ActionScript 2.0 Basic. Dalam membuat aplikasi flash interaktif tentu diperlukan sebuah bahasa pemrograman, Action Script adalah bahasa pemrograman yang ada pada flash. Berikut ini adalah tutorial actionscript dasar yang sering digunakan dalam pembuatan aplikasi sederhana. (sekedar dasarnya saja, untuk pengembangan lebih lanjut ada di individu masing-masing). Flash yang ditunjang oleh ActionScript-nya, dapat kita manfaatkan untuk membuat atau membangun sebuah aplikasi yang kita inginkan. Kita akan mempelajari ActionScript yang sering digunakan untuk membuat sebuah aplikasi atau untuk mengontrol jalannya animasi. ActionScript Dasar yang sering digunakan pada Flash ActionScript bisa disebut juga dengan bahasa pemrograman pada Flash. Dengan ActionScript kita dapat membuat movie yang interactif sehingga penikmat atau pengguna dapat berinteraksi dengan movie tersebut, misalnya untuk mengontrol navigasi, memasukan informasi, menggerakan objek dengan keyboard, mengubah bentuk mouse, membuat menu, membuat game, kuis, poling dan lain-lain. ActionScript dalam Flash dapat dibagi menjadi dua, yaitu : Action Frame –> Action yang diberikan pada frame. Action Objek –> Action yang diberikan pada objek, baik berupa tombol atau movieclip. Berikut adalah ActionScript yang sering digunakan dalam mengontorl animasi ataupun membangun sebuah aplikasi. fscommand(”command”,parameter) Perintah tersebut digunakan untuk keperluan tertentu diluar aplikasi, seperti memperbesar ukuran layar, menghilangkan menu dan keluar dari aplikasi. ”quit” digunakan untuk keluar dari aplikasi ”allowscale” digunakan untuk mengeset apakah movie akan selalu dimunculkan atau ditampilkan dalam ukuran standarnya atau tidak. ”fullscreen” digunakan untuk mengeset apakah movie yang akan ditampilkan secara satu layar penuh atau tidak. ”showmenu” digunakan untuk menampilkan menu atau tidak. Parameternya berisikan statement berikut : true, berarti akan menjalankan statement command. false, berati tidak akan menjalankan statement command. Sebagai contoh : fscommand (”fullscreen”, false); fscommand (“showmenu”, false); Perintah diatas berarti fungsi dari fullscreen adalah false atau fungsi untuk menampilkan layer penuh tidak dijalankan. Dan perintah untuk menampilkan menu juga tidak dijalankan berarti akan tampak aplikasi yang dibuat tidak terdapat menu-menunya. Memberi komentar pada Action Komentar pada Action digunakan untuk mempermudah kita dalam mengecek script. Semua kata yang dijadikan komentar tidak akan dijalankan oleh Flash. Bentuk umum dari komentar dalam Flash adalah berupa : // komentar. Variabel Pada setiap program dalam bahasa pemrograman apapun pada umumnya memiliki variabel. Variabel dalam ActionScript adalah nama untuk sebuah lokasi penyimpanan. Variabel harus dideklarasikan dengan menyebutkan nama dan tipe dari informasi yang akan disimpan. Selain itu, pada saat deklarasi, sebuah variabel dapat diinisiasi dengan diberikan nilai awal. Contoh : time = new Date(); var seconds = time.getSeconds() var minutes = time.getMinutes() var hours = time.getHours() Contoh diatas menerangkan bahwa time akan memanggil tanggal sekarang. var seconds adalah variabel dari detik dan time.getSeconds adalah fungsi untuk memanggil variabel dari seconds (detik) yang akan diproses dan ditampilkan sebagai detik waktu. var minutes adalah variabel dari menit dan time.getMinutes adalah fungsi untuk memanggil variabel dari minutes (menit) yang akan diproses dan ditampilkan sebagai menit waktu. var hours adalah variabel dari jam dan time.getHours adalah fungsi untuk memanggil variabel dari hours (jam) yang akan diproses dan ditampilkan sebagai jam waktu. Penggunaan Kondisi Pada setiap bahasa pemrograman pastilah semuanya mempunyai fungsi untuk menyatakan kondisi. Kondisi dalam ActionScript dapat dinyatakan dengan if atau dengan while. Sebagai contoh : if (hours12) { hours = hours – 12; } Pada contoh Script kondisi diatas meneranhgkan bahwa jika jam lebih kecil dari 12, maka waktu dari am atau pm akan menampilkan AM. dan jika tidak, maka akan menampilkan PM. Kemudian while adalah jika jam lebih besar dari 12 maka jam akan menampilkan jam kurang dari 12. _root _root sering kali digunakan dalam ActionScript Flash. Terdapat tiga bentuk dasar dari root yaitu : _root.action, _root.property/variable, dan _root.movieclip. _root.action Pada bentuk ini di belakang _root. diisi dengan ActionScript lain seperti gotoAndStop(); stop(); atau ActionScript yang lain. Bentuk ini sering digunakan untuk mengaktifkan frame utama. Misalnya pada movieclip dituliskan Action : onClipEvent(Enterframe){ if (menit < 0) { _root.gotoAndPlay(2); } } Apabila perintah tersebut dijalankan, maka ketika variable menit dari suatu movieclip bernilai dibawah 0, frame utama yang aktif akan berpindah ke frame 2 yang ditandai pada Action dengan _root.gotoAndPlay(frame ke berapa);. _root.variable / property Pada bentuk ini di belakang _root. diisi dengan variabel seperti waktu dan sebagainya. Contoh : onClipEvent(Enterframe){ if (_x > 100) { _root.waktu += 10; } } maka ketika koordinat x dari movieclip yang memiliki action tersebut bernilai lebih dari 100, maka variabel waktu akan ditambah 10. _root.movieclip Biasanya bentuk tersebut digabung dengan bentuk 1 dan 2, yaitu menjadi _root.movieclip.action dan _root.movieclip.variable. _root.instance movieclip.variable Bentuk tersebut pada umunya digunakan untuk memanggil variabel yang sudah diset dari movieclip lain. Bentuk umum dari script tersebut adalah : _root.INSTANCE NAME dari movieclip yang akan dipanggil variabelnya. Instance Name dapat dimasukan dengan mengklik movieclip. Buka panel Properties dan ketikan pada kolom Instance Name. onClipEvent( event ){} OnClipEvent adalah suatu script yang digunakan suatu movieclip untuk melaksanakan beberapa perintah lain dalam suatu blok event. Bentuk umum dari onClipEvent adalah : onClipEvent ( event ) { Statement (s) } Parameter Event dapat berisi : load, perintah akan dijalankan ketika pertama kali movieclip di-load oleh timeline. unload, perintah akan dijalankan ketika suatu movieclip di-remove dari timeline. enterFrame, perintah akan dijalankan terus menerus sepanjang frame yang aktif. mouseMove, perintah akan dijalankan ketika mouse digerakan. mouseDown, perintah akan dijalankan ketika mouse ditekan. mouseUp, perintah akan dijalankan ketika mouse dilepas. keyDown, perintah akan dijalankan ketika mendeteksi adanya tombol yang ditekan dengan menggunakan action Key.getCode. keyUp, perintah akan dijalankan ketika mendeteksi adanya tombol yang dilepaskan dengan menggunakan action Key.getCode.