Pada tutorial Bagian I dijelaskan mengenai pembuatan animasi Flash dengan menuliskan script pada frame utama (Frame script), ditambah dengan bagaimana membuat dan menambahkan script pada frame kedua, agar script di frame pertama dapat dibaca berulang-ulang oleh program.

Pembuatan animasi Flash dengan mengandalkan timeline utama tidaklah salah. Namun, hal ini akan mengurangi efektivitas pemrograman mengingat animasi yang rumit akan membutuhkan hierarki yang terstruktur dengan baik.

Andaikan dalam animasi bola pantul tersebut akan kita pasang beberapa bola yang bergerak sendiri-sendiri. Dapat dibayangkan bahwa masing-masing bola akan memiliki programnya sendiri. Semakin banyak bola yang kita pasang, maka semakin panjang pula program yang harus kita buat untuk mengendalikannya. Kalaupun programnya bisa dibuat pendek, pasti algoritmanya lebih rumit.

1. Menempatkan Script Di Dalam Movie Clip

Sekarang kita bisa mencoba membuat animasi Flash dengan hanya memanfaatkan satu frame saja. Ya, kita bisa belajar membuat dan menempatkan sebuah movie clip di dalam satu frame timeline Flash.

Dengan mengambil standar document di Flash, kita bisa membuat sebuah dokumen Flash baru yang memiliki ukuran 550 x 400 pixel. Hal yang pertama kita buat adalah latar belakang yang ditempatkan pada satu layer tersendiri. Layer ini bisa kita beri nama layer: background.

Layer background yang telah jadi, bisa langsung kita kunci agar terhindar dari kesalahan pada saat memilih dan mengatur objek di stage.

Selanjutnya, kita bisa menambahkan layer baru yang akan dipergunakan untuk memuat movie clip bola. Layer 2 ini bisa kita beri nama: bola, atau content, atau animasi, atau nama apapun yang dapat mempermudah kita untuk mengingatnya.

Pastikan layer bola tadi dalam keadaan terpilih. Gambarlah sebuah bola dengan ukuran yang cukup besar, yakni 100 pixel x 100 pixel. Gunakan oval tool untuk menggambar lingkaran. Kemudian pada saat membuat lingkaran di stage, tekan tombol Shift sambil menggeser mouse. Hal terakhir dimaksudkan untuk membuat lingkaran yang bundar. Selanjutnya, seleksi gambar bola tersebut dengan Selection Tool, dan ganti ukuran lebar dan tingginya pada panel properties menjadi W: 100.0 dan H: 100.0. Warnai dengan radial fill color agar tampak layaknya sebuah bola.

Tahap berikutnya adalah mengubah bola tersebut menjadi sebuah movie clip. Dalam keadaan objek bola sedang terseleksi, buatlah gambar bola menjadi sebuah symbol dengan memilih pada menu: Modify > Convert To Symbol.

Ketikkan: bola_mc pada kotak name yang tersedia. (Tulisan atau kode _mc pada nama symbol tersebut untuk memudahkan kita membedakan tipe-tipe objek yang tersusun di Library).

Selanjutnya, kita pilih "Movie Clip" pada bagian Behavior di bawah kotak nama symbol tadi. Dengan memilih behavior Movie Clip, berarti kita akan membuat sebuah movie clip yang diberi nama bola_mc.

Klik pada tombol OK.

Nah, movie clip bola_mc sekarang sudah terbuat, yang objeknya berupa gambar bola tadi. Selanjutnya kita bisa memberikan script pada movie clip ini, sebagai berikut:

onClipEvent(enterFrame){
     this._x += _root.gerakX;
     this._y += _root.gerakY;
}

Penjelasannya adalah sebagai berikut:

Movie Clip bola_mc ditempatkan pada timeline utama Flash. Dengan diberi perintah onClipEvent(enterFrame), maka kita sudah menyiapkan sebuah tempat bagi program yang akan diakses secara kontinyu ketika timeline utama mendapati ada movie clip di dalamnya. Flash dengan standar framerate 12 fps (frames per second) akan mengakses perintah yang ditempatkan di antara kurung kurawal buka dan kurung kurawal tutup sebanyak 12 kali per detik.

Perintah: this._x akan memberitahu kepada timeline utama, bahwa "objek ini" dan propertiesnya posisi ordinat x pada stage adalah sama dengan pernyataan di sebelah kanannya, yaitu: this._x + _root.gerakX; atau disingkat: += _root.gerakX; sehingga baris ini akan ditulis: this._x += _root.gerakX;

Pernyataan: _root.gerakX; adalah perintah untuk mengambil sebuah nilai yang disimpan pada variabel bernama gerakX, yang disimpan pada timeline utama Flash.

Sama halnya untuk posisi ordinat y pada objek bola kita tulis: this._y += _root.gerakY; yang berarti bahwa kita menyuruh pada timeline utama Flash: "Hai, timeline utama. Tempatkan objek ini pada ordinat y, yang nilainya diambil dari variabel gerakY yang kamu simpan!".

Pernyataan: this._x kalau ingin lebih singkat bisa dituliskan propertiesnya saja, yakni: _x. Namun, dengan format penulisan: nama._properties lebih mudah untuk dipahami dibandingkan dengan hanya menuliskan propertiesnya saja. Pernyataan: this._x ini akan berlaku di manapun objek ini ditempatkan pada kedalaman struktur yang rumit sekalipun.

Sebagai tambahan, kita dapat mengganti perintah: this dengan nama instance movie clip. Misalnya menjadi: _root.bola._x += _root.gerakX; Namun, hal ini tidaklah praktis karena kodenya menjadi panjang dan mengandung resiko pada penyebutan nama movie clip yang harus sesuai dengan nama instance yang kita berikan, dan struktur hierarkinya pun harus benar.

Selanjutnya, kita bisa menambahkan script untuk memantulkan bola dan memainkan bunyi "ding", seperti yang telah dibahas pada tutorial bagian pertama.

Script pada symbol bola_mc akan terlihat seperti ini:

onClipEvent(enterFrame){
  this._x += _root.gerakX;
  this._y += _root.gerakY;

  if (this._x > 550 - this._width / 2){
     this._x = 550 - (this._x - (550 - this._width));
     _root.gerakX *= -1;
     _root.bunyi.start(0, 1);
  }

  if (this._x < this._width / 2){
     this._x = this._width - this._x;
     _root.gerakX *= -1;
     _root.bunyi.start(0, 1);
  }

  if(this._y > 400 - this._height / 2){
     this._y = 400 - (this._y - (400 - this._height));
     _root.gerakY *= -1;
     _root.bunyi.start(0, 1);
  }

  if (this._y < this._height / 2){
     this._y = this._height - this._y;
     _root.gerakY *= -1;
     _root.bunyi.start(0, 1);
  }
}

Lha, koq scriptnya lain dengan yang ada di Tutorial Bagian I ?

Oke, ini memang butuh penjelasan tersendiri, yang terutama berhubungan dengan perhitungan posisi pantulan bola yang lebih mendetail dibandingkan dengan pada Tutorial Bagian I yang dibuat dengan lebih kasar. Jangan khawatir, karena pada saatnya nanti hal ini akan dijelaskan secara panjang x lebar. Yang jelas pada script ini kita memasukkan properti lebar dan tinggi bola, lebar dan tinggi movie, serta posisi x dan posisi y pada saat bola sedang bergerak.

2. Menambahkan Tombol Start Atau Masukkan Saja Programnya Ke Dalam Movie Clip

Seperti pada tutorial Bagian I, kita bisa membuat tombol start dan mengisinya dengan perintah untuk mengatur arah, gerakX, gerakY, dan menyiapkan suara.

Script pada tombol start akan terlihat seperti ini:

on(release){
     arah = random(360);
     gerakX = kec * Math.sin(arah * Math.PI/180);
     gerakY = -1 * kec * Math.cos(arah * Math.PI/180);
     bunyi = new Sound();
     bunyi.attachSound("ding");
}

Variabel kec bisa disiapkan di stage dengan menggunakan Input Text. Sedangkan variabel bunyi disiapkan untuk mengambil file suara "ding.wav" yang telah diberi linkage "ding". Hal ini sudah dibahas pada tutorial Bagian I.

Untuk sementara, sampai pada tahap ini movie akan terlihat seperti ini:

Nah, bagaimana kalau perintah yang ada di dalam tombol start ini kita tempatkan pada movie clip?

Mudah saja, kita bisa menempatkan isi perintah pada tombol start ke dalam movie clip dengan method: onClipEvent(load). Perintah ini akan dijalankan pada saat movie clip bola_mc di"load" ke dalam timeline utama.

Hal yang harus kita perhatikan sekarang adalah: Pada hierarki mana sebuah variabel ditempatkan. Apakah di timeline utama atau di dalam movie clip?

Jika variabel yang dipanggil oleh movie clip berada di timeline utama, maka kita harus menyebutkan levelnya (_root.). Namun, apabila variabel yang dipanggil berada di dalam movie clip itu sendiri, kita tidak perlu menyertakan atribut level, atau bisa pula diganti dengan "this.".

Script pada movie clip bola_mc akan terlihat seperti ini:

onClipEvent(load){
  arah = random(360);
  gerakX = _root.kec * Math.sin(arah * Math.PI/180);
  gerakY = _root.kec * -1 * Math.cos(arah * Math.PI/180);
  bunyi = new Sound();
  bunyi.attachSound("ding");
  bunyi.setVolume(10);
}

onClipEvent(enterFrame){
  this._x += gerakX;
  this._y += gerakY;

  if(this._x>550-this._width/2){
     this._x = 550-(this._x-(550-this._width));
     gerakX *= -1;
     bunyi.start(0, 1);
  }

  if (this._x<this._width/2){
     this._x = this._width-this._x;
     gerakX *= -1;
     bunyi.start(0, 1);
  }

  if(this._y>400-this._height/2){
     this._y = 400-(this._y-(400-this._height));
     gerakY *= -1;
     bunyi.start(0, 1);
  }

  if (this._y<this._height/2){
     this._y = this._height-this._y;
     gerakY *= -1;
     bunyi.start(0, 1);
  }
}

Dengan mengalokasikan setiap variabel yang menjadi milik movie clip ke dalam movie clip itu sendiri, maka setiap movie clip sekarang akan memiliki variabelnya masing-masing. Sehingga apabila kita ingin menduplikasi movie clip bola_mc sebanyak apa pun, masing-masing akan bergerak sendiri sesuai dengan variabel yang dimilikinya.

Hasilnya akan menjadi seperti ini:

Tombol start tentu harus kita setting ulang, mengingat semua variabel yang dibutuhkan telah di"load" oleh masing-masing movie clip dalam perintah onClipEvent(load), yang menggantikan fungsi tombol start pada Tutorial Bagian I.

Lha, terus bagaimana kalau kita ingin mengatur ulang nilai kecepatannya?

Oke, kita bisa memprogram movie dengan cara me-"reset ulang". Kita perintahkan movie untuk mengosongkan seluruh movie clip yang ada di timeline utama, keluar sejenak, kemudian kembali lagi ke timeline utama dengan membawa nilai-nilai baru. Nah, sekarang kita bisa belajar membuat Scene baru untuk tempat keluar dari timeline utama.

3. Scene Tambahan dan Pergantian Antar Scene

Untuk menambahkan Scene baru, klik pada menu: Insert > Scene. Maka timeline utama sekarang seluruhnya menjadi milik Scene baru, yaitu Scene 2. Selanjutnya kita bisa mengisi Frame 1 pada Scene 2 dengan meng-klik frame 1 pada timeline dan mengetikkan perintah di bawah ini pada action - frame:

gotoAndStop("Scene 1", 1);

Yang artinya kita memberi perintah untuk kembali ke Scene 1 pada frame 1 dan berhenti di sana.

Sekarang kita bisa kembali ke Scene 1 untuk mengatur kembali isinya dengan memilih pada menu: View > Go to > Scene 1.

Timeline akan berganti kembali ke Scene 1.

Nah, sekarang kita bisa mengganti tulisan pada tombol "start" dengan tulisan "reset", kemudian mengisi tombol dengan perintah untuk pindah ke Scene 2:

on(release){
     gotoAndPlay("Scene 2", 1);
}

Karena tombol "start" sudah memiliki behavior sebagai "Button", maka tulisannya dapat diganti dengan klik-ganda pada tombol start, kemudian gunakan Type Tool untuk mengganti tulisannya.

Hasilnya adalah seperti terlihat di bawah ini. Pada movie ini kita bisa mengubah nilai kecepatan dan kemudian menekan tombol "reset" untuk melihat hasil perubahannya.

Nah, dengan memahami cara kerja movie clip, kita dapat menciptakan hal-hal baru yang di luar dugaan, misalnya dengan menduplikasi sekian puluh movie clip di dalam satu scene. Tanpa menambahkan script apapun, masing-masing movie clip tadi akan bergerak sendiri karena "mereka" memiliki variabelnya masing-masing.

Dalam tutorial selanjutnya kita bisa membahas mengenai gerakan bola dan perhitungan pantulannya, perilaku gravitasi dan percepatan, kelembaman, dan lain-lain yang berbau fisika. ■ <Tomy>