pengenalan action script

Author: pinkwin

Post on 09-Oct-2015

19 views

Category:

Documents


0 download

Embed Size (px)

DESCRIPTION

mempelajari action script flash

TRANSCRIPT

  • Introduction

    Belajar flash terasa tidak lengkap jika tidak belajar action script. Ini e-book pertama yang saya

    buat, e-book ini free alias gratis dikhusus kan untuk anda yang baru mengenal action script. Saya

    mencoba menyuguhkan suatu e-book yang lengkap dengan tampilan gambar dan penjelasan terhadap

    script yang anda ketik, ini dimaksudkan supaya anda mengerti apa fungsi dari script-script tersebut.

    Tidak seperti buku atau e-book kebanyakan yang hanya mengajarkan anda mendesign setelah itu

    muncul kata-kata ketik script dibawah ini tapi setelah itu ia tidak menjelaskan mengapa kita harus

    menulis script ini dan apa fungsinya.

    Pengenalan Action Script 2.0 adalah e-book kedua yang saya ketik dan hanya dikerjakan selama

    3 hari. Saya tahu pasti akan banyak kekurangan di dalamnya. Saya sangat mengharapkan kritikan atau

    saran anda agar pada penulisan e-book selanjutnya saya bisa meminimalis kekurangan saya. Untuk kri-

    tikan anda boleh kirim e-mail atau sms pada kontak yang ada di website saya. Anda di perbolehkan un-

    tuk mencetak, mendistribusi-kan atau menjual kembali dengan harga terserah Anda dan simpan 100%

    keuntungannya! Atau Anda diperbolehkan untuk meng-upload ke website anda untuk meningkatkan

    traffic dengan memberikan eBook ini secara cuma-cuma. Atau terserah Anda. Anda harus ingat bahwa

    Anda dilarang mereproduksi atau memodifikasi eBook ini dengan jenis atau bentuk apapun!!! Hanya

    itu. Terima Kasih Semoga e-book ini bisa bermanfaat sebagaimana yang harapkan.

    Novri Oov Auliansyah

  • Tahap 1

    Pengenalan Action Script 2.0

    Untuk mengetik Action script anda harus menempatkan pada panel action, jika tidak terlihat

    panel action di lembar kerja Flash Document klik Window > Action atau tekan F9 maka di lembar

    kerja anda akan terlihat seperti Gambar 1.0.

    Gambar 1.0

    Lembar kerja untuk mengetik Action Script

    Ketika anda mengetik script anda akan menemukan warna yang berbeda-beda pada panel action

    seperti yang terlihat pada gambar 1.1.

    Gambar 1.1

    Warna warni pada Action script 2.0

  • Ini bertujuan supaya anda mudah membedakan arti script yang anda ketik dan memudahkan

    anda jika terjadi kesalahan pada script yang anda ketik. Untuk lebih jelasnya mengenai warna-warni di

    panel action coba anda klik Edit > Reperence atau tekan ctrl+U, pada panel category pilih Action

    script. Sekarang anda bisa melihat arti bahkan merubah warna-warna tersebut.

    Tahap 2

    TraceSekarang langsung saja kita masuk pada sebuah kasus. Untuk perkenalan, kasus pertama yang

    akan kita pelajari adalah mengmbuat pesan di layar output. Syntak pertama yang akan kita gunakan

    adalah trace. Trace digunakan untuk menampilkan pesan pada jendela output pada flash. Untuk lebih

    jelasnya mari kita mencobanya :

    syntak : trace (pesan)

    Contoh : trace (mencoba trace)

    Gambar 1.2

    pesan trace dalam Jendela output

    lalu tekan Ctrl+Enter untuk mengetes movie clip atau klik contol > Test movie.

    Jika jendela Output tidak terlihat tekan F2. Trace juga mendukung untuk di jalankan berkali-kali,

    sekarang untuk mencobanya kita akan mengunakan angka sebagai media sekalian mencoba

    menggunakan operator berhitung.

  • Contoh script:

    n = 4;

    trace(n+1);

    //hasil di outputnya : 5

    trace(n*3);

    //hasil di outputnya : 12

    trace(n-1);

    //hasil di outputnya : 3

    trace(n/2);

    //hasil di outputnya : 2

    trace(n%3);

    //hasil di outputnya : 1

    Sekarang Tes movie anda!!.

    Hasil yang terlihat pada layar output hanya angka-angka hasil operator dalam trace saja.

    Sedangkan semua kalimat yang di depannya diberi tanda // tidak akan berpengaruh pada layar output.

    Kenapa ? karena setiap kalimat yang didepannya diberi tanda // melambangkan sebuah komentar

    sehingga ketika di eksekusi kalimat-kalimat tersebut tidak akan berpengaruh.

    Operator Kererangan Fungsi+ Jumlah Menjumlah nilai- Pengurangan Mengurangkan nilai* Kali Mengalikan nilai/ Bagi Membagi nilai

    % Modulo Menampilkan sisa

    pembagian nilai

  • Tahap 3

    Struktur Kondisi

    Pada tahap ini kita akan mempelajari lagi trace tetapi dengan tingkat yang sedikit lebih sulit.

    Kali ini kita menambahkan Struktur kondisi pada fungsi trace.

    Struktur kondisi adalah sebuah fungsi dimana perintah hanya akan dijalankan atau dieksekusi

    jika kondisi yang kita berikan terpenuhi. Pada tahap ini saya akan mempraktekan struktur kondisi if dan

    else, saya harap anda akan benar-benar mengerti fungsi dari kedua syntak tersebut karena kita akan

    bertemu kedua syntak ini pada tahap-tahap berikutnya.

    IF

    Jika anda sudah pernah belajar bahasa pemrograman sebelumnya anda pasti sudah tidak asing

    dengan kata ini. Sesuai dengan artinya if adalah Jika, jadi apabila kondisi yang terdapat dalam if

    terpenuhi perintah akan dijalankan.

    Penjelasan dari if sebagai berikut:

    if (kondisi) {

    perintah }

    contoh: n = 3;

    if (n

  • ELSE

    Else adalah syntak untuk perintah dimana kondisi if tidak terpenuhi.

    Contohnya :

    n = 2

    if (n + 5= =8) {

    trace(n tambah 5 adalah 8)

    }

    else {

    trace(n tambah 5 bukan 8)

    }

    Hasil di output adalah n tambah 5 bukan 8, ini terjadi karena syarat kondisi pertama tidak

    terpenuhi sehingga dilanjutkan pada syarat kondisi selanjutnya. Kenapa n + 5 = = 8 ??. Tanda = =

    berarti sama dengan, sedangkan = berarti nilai yang diberikan. Misalkan n=3, berarti nilai n adalah 3.

    TAHAP 4

    Pengulangan

    FOR

    For merupakan salah satu perintah untuk melakukan eksekusi pengulangan. Eksekusi

    pengulangan pada for akan terus berjalan sampai syarat terpenuhi, sehingga jika anda melakukan

    kesalahan pada penulisan script, pengulangan tersebut akan terus berjalan.

    Script : for (kondisi awal; kondisi berhenti; penjumlahan/pengurangan) {

    perintah;}

    contoh : for (a=0; a

  • WHILE

    Intruksi while hampir mirip seperti intruksi for.

    Syntaknya :

    Kondisi awal

    While ( kondisi syarat ) {

    Perintah

    }

    Contoh : a = 2;

    while (a

  • TAHAP 5

    Fungsi

    Fungsi merupakan perintah yang terdiri dari kumpulan statement, yang digunakan dengan cara

    melakukan pemanggilan terhadap nama dari fungsi tersebut. Bentuk subprogram ini sering di gunakan

    karena akan memudahkan pekerjaan pemograman. Dalam melakukan delegrasi fungsi, nama harus di

    mulai dengan huruf dan tidak boleh ada spasi. Nama fungsi case sensitive ( memperhatikan huruf besar

    dan kecil ).

    Untuk memanggil suatu fungsi, anda cukup memanggil nama fungsi tersebut.

    Contoh: function coba ( )

    {trace (memanggil fungsi coba)

    }

    Coba ( )

    TAHAP 6

    Array

    Array merupakan kumpulan data berurut yang bisa di ubah atau dimodif. Dalam Action Script 2.0 ada

    bermacam-macam jenis Array dan saya akan mencoba menjelaskan satu per satu :

    mulanya kita buat dulu data array contohnya:

    Data yang kita akan masukan adalah : Ina,Ini,Inu,Ino

    scriptnya adalah

    Arrayku = new Array (Ina,Ini,Inu,Ino)

    trace (Arrayku)

    tes movie (tekan Ctrl + Enter)

    Array akan tampil di output

  • Concat

    Sekarang kita akan menambahkan data di belakang arrray yang baru kita buat dengan

    menggunakan concat. Misalkan kita mau menambahkan kata Ana di Array yang barusan kita buat.

    Ubah script trace (Arrayku) jadi trace (Arrayku.concat(ana))

    Arrayku = new Array (Ina,Ini,Inu,Ino)

    trace (Arrayku.concat(ana))

    tes movie clip lihat hasilnya, jangan lupa sebelum menekan Ctrl + Enter teriak Simsalabim...

    Join

    Join juga berfungsi untuk menambah data. Tapi data yang dihasilkan berada di belakang data

    dalam Array.

    Contoh : Arrayku = new Array (Ina,Ini,Inu,Ino)

    trace (Arrayku.join(+))

    Maka hasil di output jadi

    Ina+Ini+Inu+Ino

    Length

    Digunakan untuk menghitung jumlah data dalam array.

    Script : Arrayku = new Array (Ina,Ini,Inu,Ino)

    trace (Arrayku.Length)

    output akan menghasilkan 4

    Pop

    Mengambil data paling terakhir di array atau menghapus data array yang paling belakang.

    sintaknya:Arrayku = new Array (Ina,Ini,Inu,Ino)

    trace (Arrayku.pop( ) )

    output akan menghasilkan : ino

    coba sekarang anda ubah scriptnya :

    Arrayku = new Array (Ina,Ini,Inu,Ino)

    Arrayku.pop()

    trace (Arrayku)

    output akan menghasilkan : Ina,Ini,Inu

  • Push

    Kebalikan dari pop, Push menambahkan satu data di belakang array

    Script: Arrayku = new Array (Ina,Ini,Inu,Ino)

    Arrayku.push(Ine)

    trace (Arrayku)

    Shift

    Shift bisa digunakan untuk mengambil awal data dari array

    Script : Arrayku = new Array (Ina,Ini,Inu,Ino)

    trace (Arrayku.shift())

    Atau menghapus satu data di depan array.

    Script :Arrayku = new Array (Ina,Ini,Inu,Ino)

    Arrayku.shift()

    Trace(Arrayku)

    Reverse

    Digunakan untuk membalik data di dalam array

    Arrayku = new Array (Ina,Ini,Inu,Ino)

    trace (Arrayku.reverse())

    Output : Ino,Inu,Ini,Ina

    Unshift

    Kebalikan dari Shift, unshift digunakan untuk menambahkan data di depan array

    Script : Arrayku = new Array (Ina,Ini,Inu,Ino)

    Arrayku.unshift(Ine)

    trace (Arrayku)

    output : Ine,Ina,Inu,Ino

  • TAHAP 7

    Property

    Setelah kita berputar-putar menggunakan trace sebagai output, pada tahap ini kita akan

    menggunakan objek sebagai media dan tampilan output yang kita jalankan sudah berbentuk animasi

    yang bisa di buat menjadi tampilan html.

    Jika kita sudah bermain pada objek otomatis kita akan bertemu dengan istilah property. Istilah

    property berarti kepemilikan, Sebuah obyek dalam flash yang berupa movieclip, button, sound

    memiliki property seperti panjang, warna, kordinat dan lain-lain. Di bawah ini saya akan menjelaskan

    beberapa property.

    _x = merupakan sumbu x ( horizontal )

    _y = merupakan sumbu y ( vertikal )

    _xscale = ukuran horizontal

    _yscale = ukuran vertical

    _rotation = posisi kemiringan

    _alpha = Transparasi

    Gambar 7.1

    Kordinat pada flash

    _x atau posisi sumbu horizontal semakin besar nilainya maka objek akan semakin ke kanan

    Sedangkan jika nilai _x semakin kecil atau semakin besar ( min ) nya maka objek akan lebih ke kiri.

    Supaya lebih jelas saya akan mendemokan sebuah contoh menggerakan objek ke kiri dan ke kanan.

    Mulanya anda buat sebuah objek, misalnya lingkaran dengan menggunakan oval tool. Tekan

    Shift pada keyboard saat membuat lingkaran agar lingkaran jadi proporsional, lalu klik kanan objek

    lingkaran yang baru kita buat, klik convert to symbol. Lalu rubah menjadi movie clip pada panel

    convert to symbol. Setelah dirubah menjadi movie clip masuk ke panel action.

  • Gambar 7.2

    Merubah objek menjadi Movie clip

    pastikan anda berada pada movie clip. Lalu ketik script di bawah ini.

    onClipEvent (enterFrame) {

    _x = _x+3;

    }

    Tekan Ctrl+Enter untuk tes movie.

    Gambar 7.3

    Perhatikan Ruang tempat anda mengetik script

    Penjelasan --> OnclipEvent adalah sebuah script untuk movie clip, enterFrame nama eventnya ketika

    movie clip dijalankan. _x property horizontal +3 nilai pergerakan objek, semakin besar nilai pengger-

    aknya semakin cepat objek bergerak .

    Sekarang kita akan mencoba menggerakan objek ke kiri. Buat lagi sebuah objek pada layar ker-

    ja flash anda. Ubah objek yang baru anda buat menjadi movie clip, ulangi tahap-tahap diatas. Lalu

    ketik script diatas pada panel action objek baru, tapi rubah + menjadi ( _x=_x-3). Sekarang tes

    movie.

  • Lalu bagaimana caranya menghentikan gerakan movie clip kita supaya tidak terus berjalan ke

    kanan atau kiri lalu pergi dan menghilang begitu saja.

    onClipEvent (enterFrame) {

    if ( _x

  • Untuk property _rotation dan _alpha silahkan anda berkreasi sendiri, karena saya rasa anda telah

    mengerti semua arti dari syntak diatas anda tinggal merubah nama property yang akan dirubah atau di-

    manipulasi. Jika anda telah mencoba property _rotation dan _alpha saya sarankan sekarang anda mebu-

    at movie clip lebih dari satu dengan fungsi property yang berbeda. Misalkan 3 buah lingkaran dengan

    warna yang berbeda-beda. 1 lingkaran bergerak ke kiri lalu lingkaran kedua bergerak ke bawah

    7.1 mengerakan movie clip menggunakan keyboard

    Pada bagian kali ini kita akan membuat sebuah movie clip yang gerakannya di control oleh tan-

    da panah di keyboard. Buatlah sebuah objek lalu ubah objek tersebut menjadi movie clip, misalnya kita

    mau membuat objek lingkaran. Klik objek oval pada tool atau tekan O pada keyboard, lalu rubah objek

    lingkaran yang baru kita buat menjadi movie clip dengan cara klik kanan objek tersebut lalu klik Con-

    vert to symbol atau klik objek lalu klik edit > convert to symbol atau pake cara paling gampang klik

    objek lalu tekan F8. Pada panel convert to symbol, klik type : movie clip lalu OK.

    Buka panel Action ketik script dibawah ini pada panel Action (pastikan anda berada di posisi Movie

    Clip)

    onClipEvent (enterFrame) {

    if (Key.isDown(Key.RIGHT)){

    _x = _x+5

    }

    }

    Test movie,

    Penjelasan --> seperti yang telah di jelaskan pada bagian sebelumnya onclipEvent adalah sebuah script

    untuk movie clip, dan enterFrame nama eventnya ketika movie clip dijalankan.

    if(key.isDown(Key.RIGHT)) adalah kondisi, kira-kira begini artinya: Jika key di tekan, key yang kanan

    { _x = _x+5 } ini perintahnya. Jadi kalo' kondisi key kanan di tekan, komputer akan menjalankan per-

    intah _x di tambah 5. Untuk merubah gerak movie clip ke kiri rubah saja + nya jadi maka gerakanya

    akan berubah ke kiri. Untuk lebih jelasnya ketik script gerak ke kiri di bawah scrip gerak ke kanan.

  • onClipEvent (enterFrame) {

    if (Key.isDown(Key.RIGHT)){

    _x = _x+5

    }

    { if (Key.isDown(Key.LEFT)){

    _x = _x-5

    }

    }

    test movie clip tekan tanda panah kiri lalu tanda panah kanan di keyboard anda...

    Sekarang tugas anda adalah membuat movie clip yang bisa bergerak ke atas dan kebawah di

    kontrol oleh keyboard.

    TAHAP 8

    This

    Kali ini kita akan membahas this. This adalah sebuah fungsi dimana kita akan meggunakannya

    ketika syntak yang kita tulis di panel action berada di luar movie clip tersebut. Supaya anda bisa lebih

    jelas tentang this sekarang kita akan mencoba menggerakan 3 objek movie clip tapi menulis scriptnya

    di dalam 1 tempat, tidak seperti penulisan syntak sebelumnya dimana kita menulis syntak tiap movie

    clip berada pada ruangan movie clip tersebut di panel action. Untuk melakukan hal tersebut kita akan

    menggunakan satu kata baru di dalam script yaitu this.

    Buat 3 buah objek lingkaran dengan oval tool dengan warna yang berbeda-beda. Ubah satu per

    satu objek objek terebut menjadi movie clip, lalu pada panel properties beri nama sesuai warnanya, beri

    _mc dibelakang nama movie clip agar ketika di panel action akan lebih memudahkan anda dalam

    penulisan script.

  • Misalnya kita buat 3 buah lingkaran dengan nama orange_mc, biru_mc, hijau_mc.

    Gambar 8.1

    merubah nama objek pada properties

    buka panel action lalu ketik script dibawah ini:

    orange_mc.onEnterFrame = function( ) {

    this._x = this._x+5;

    };

    Sekarang tes movie clip, lihat objek orange_mc. Ia bergerak sendiri dan yang lain tetap dalam

    keadaan diam. Ini karena ketika kita mengetik script kita hanya memanggil orange_mc tidak dengan

    yang lain. Sekarang tugas anda adalah membuat semua movie clip bergerak tapi dengan kecepatan

    berbeda-beda (anda sudah mengerti kan gimana caranya ??). Kalau masih bingung juga boleh intip

    script di bawah

    Misalnya movie clip orange nilainya 5, lalu movie clip hijau nilainya 3, movie clip nilainya 7:

    orange_mc.onEnterFrame = function( ) {

    this._x = this._x+5;

    };

    biru_mc.onEnterFrame = function( ) {

    this._x = this._x+3;

    };

    hijau_mc.onEnterFrame = function( ) {

    this._x = this._x+7;

    };

  • Sekarang saya harap anda sudah mengerti fungsi this. This ditulis ketika anda bukan berada didalam

    movie clip pada panel action. Anda hanya tinggal mengetik nama movie

    clip.onEnterFrame=function( ) { this.( property)=this.( property.perintah); }.

    TAHAP 9

    _root_root hampir mirip seperti _this, memang sulit menjelaskannya tapi mudah-mudah penjelasan saya bisa

    membuat anda sedikit mengerti. _root kita gunakan untuk mendefinisikan atau memanggil suatu movie

    clip karena target movie clipnya sulit untuk dijangkau dan terlalu repot jika menulis script pada tiap-

    tiap panel action movie clip. Biar makin jelas kita langsung pratekkan saja

    buat sebuah flash document baru, buat sebuah lingkaran rubah lingkaran tadi jadi movie clip ubah

    nama movieclip di panel properties jadi satu_mc. Klik frame 1 di timeline Lalu ketik script dibawah

    pada pada panel action

    _root.onEnterFrame = function() {

    satu_mc._x = satu_mc._x+4;

    };

    Tes movie.Movie clip satu_mc bergerak walaupun kita tidak menulis script di panel action pada frame 1 bukan satu_mc. Bisa di bilang root adalah layar kerja pada flash document yang kita buat. Supaya

    anda lebih jelas lagi sekarang klik 2 kali movie clip satu_mc (lingkaran yang anda buat). Buat lagi

    lingkaran baru dengan ukuran lebih kecil dan warna yang berbeda, ketika membuat lingkaran baru

    jangan di dalam gambar lingkaran yang anda telah buat karena akan menghapus lingkaran yang telah

    ana buat. Sekarang rubah lingkaran baru tersebut jadi movie clip, pada panel properties rubah namanya

    jadi dua_mc, letakan lingkaran baru anda /dua_mc di tengah satu_mc. Sekarang kita kembali lagi ke

    scene 1 (lihat panel di atas timeline)

    gambar 9.1

    dua_mc berada ditengah satu_mc

  • pada panel action hapus script yang tadi anda ketik rubah jadi

    _root.onEnterFrame = function() {

    satu_mc.dua_mc._y = satu_mc.dua_mc._y+4;

    };

    tes movie. Sekarang satu_mc dalam keadaan diam tapi dua_mc yang bergerak. Bagaimana sudah

    mengerti kan fungsi _root ?. Kita anggap saja root adalah lembar kerja flash satu_mc.dua_mc._y

    dalam satu_mc ada dua_mc dan dua_mc memiliki property _y. Jadi pertama kita panggil dulu satu_mc

    lalu dua_mc setelah itu baru property yang ingin kita gunakan.

    Daftar Pusaka:

    Zeembry, 123 Tip & Trik Action Script Flash MX 2004, Elex Media Komputindo

    Michael Williams ActionScript Coding Standards.

    www. Macromedia.com