Animasi tweening dengan action script

Animasi yang dibuat dalam flash bias dilakukan dengan berbagai cara, bisa dengan motion tween, motion shape, teknik masking maupun dengan menggunakan script. Dalam pembahasan ini saya akan mencoba memaparkan bagaimana animasi tweening pada flash berjalan dengan menggunakan action script berikut kelebihan jika kita menggunakan tweening dengan menggunakan action script :

1. Kapasitas file swf tidak akan terlalu besar
2. Menghemat jumlah frame
3. Alur animasi mudah untuk di atur karena bias di masukan dalam satu frame baris action script
4. Fleksibel digunakan, bias diatur sebagaimana kita menggunakan motion tween dengan cara manual.

Marilah kita mencoba animasi tweening dengan menggunakan action script dengan mengikuti beberapa langkah mudah di bawah ini :

1. Bukalah program Flash anda (dalam pembahasan ini saya menggunakan Adobe Flas CS3).
2. Buatlah file baru dengan menggunakan action script 2

   

3. Gunakan dimensi default saja yaitu dengan ukuran 550 x 400 pixel
4. Buatlah sebuah rectangle/kotak dengan ukuran 200×100, warna bebas, atau mau sama dengan yang di bawah ini juga gak apa-apa (J)

   

5. Convert objek gambar tadi ke dalam movie clip dengan terlebih dahulu menyeleksi objek lalu tekan F8, lalu pilih Movie Clip, perhatikan pemilihan registration seperti gambar di bawah ini, gunakan registration yang di tengah, hal ini nanti berakibat pada animasi yang bias teraplikasikan. Kalau masalah nama sih bebas saja mau apa juga, yang paling penting dalam animasi tweening dengan action script ini adalah pada bagian instance name

   

6. Nah sekarang masukan nama instance name-nya, instance name ini berfungsi untuk pendeklarasian baik itu efek maupun jenis tween yang digunakan dalam animasina nanti

   

7. Kemudian klik lah pada frame pertama pada layer 1 dan tekan tombol F9 untuk mengisikan action scriptnya, lalu isikan script seperti di bawah ini

   

    import mx.transitions.Tween;
   
   import mx.transitions.easing.*;
   
   kotak_mc.onRollOver=function(){
   
   new mx.transitions.Tween(kotak_mc, "_xscale", Elastic.easeOut, 100, 150, 2, true);
   
   new mx.transitions.Tween(kotak_mc, "_yscale", Elastic.easeOut, 100, 150, 2, true);
   
   }
   
   kotak_mc.onRollOut=function(){
   
   new mx.transitions.Tween(kotak_mc, "_xscale", Elastic.easeOut, 150, 100, 2, true);
   
   new mx.transitions.Tween(kotak_mc, "_yscale", Elastic.easeOut, 150, 100, 2, true);
   
   }

   Penjelasan scriptnya kira kira seperti ini

   import mx.transition.Tween;
   
   import mx.transitions.easing.*;

   Scrip di atas menandakan bahwa tweening dengan action script telah di aktifkan, jadi ketika anda akan melakukan tweening dengan action script, script di atas harus tercantum juga.

   kotak_mc.RollOver" dan "kotak_mc.RollOut"

   Script diatas akan memberikan efek ketika objek di sorot dengan mouse dan ketika objek tidak di sorot oleh mouse.

   "new mx.transition.Tween(kotak_mc,"_xscale", Elastic.easeOut, 150, 100, 2, true);"

   “new mx.transition.Tween” = memasukan tweening ke dalam objek

   “(kotak_mc,”_xscale”, Elastic.easeOut, 150, 100, 2, true);”= (objek, property, fungsi/efek tween, begin, finish, durasi dalam detik:Boolean)

   Pada bagian “begin” dan “finish” = karena yang digunakan fungsi scale (transform/memperbesar dan memperkecil objek) maka hitungannya dalam persen, 100 = ukuran yg sebenarnya, 150 = 50 persen lebih besar dari ukuran aslinya.

   Pada bagian “durasi dalam detik”= tweening akan berjalan dalam detik yang sudah di tentukan angkanya, misalnya saya mengisikan angka 2, jadi animasi yang terjadi selama 2 detik dan diikuti dengan “true” artinya fungsi animasi memakai durasi di aktifkan, kalau tidak mau, ganti saja “true” dengan “false”.

   Selanjutnya untuk mengaplikasikan dengan menggunakan objek lainnya, ikuti langkah berikut ini

   1. Buatlah objek lingkaran di sebelah atas, bawah, kiri, dan kanan objek yang telah kita buat tadi.

      

   2. Convert semua objek lingkaran yang di buat ke dalam symbol Movie Clip, dan beri nama masing masing objek dengan “atas_mc, bawah_mc, kiri_mc, kanan_mc” pada instance name-nya.
   3. Gantilah script yang tadi dibuat menjadi seperti ini

      

      import mx.transitions.Tween;
      
      import mx.transitions.easing.*;
      
      kotak_mc.onRelease=function(){
      
      //objek atas_mc//
      
      new mx.transitions.Tween(atas_mc, "_xscale", Elastic.easeOut, 100, 150, 2, true);
      
      new mx.transitions.Tween(atas_mc, "_yscale", Elastic.easeOut, 100, 150, 2, true);
      
      //objek bawah_mc//
      
      new mx.transitions.Tween(bawah_mc, "_xscale", Back.easeOut, 100, 150, 2, true);
      
      new mx.transitions.Tween(bawah_mc, "_yscale", Back.easeOut, 100, 150, 2, true);
      
      //objek kiri_mc//
      
      new mx.transitions.Tween(kiri_mc, "_xscale", Bounce.easeOut, 100, 150, 2, true);
      
      new mx.transitions.Tween(kiri_mc, "_yscale", Bounce.easeOut, 100, 150, 2, true);
      
      new mx.transitions.Tween(kiri_mc, "_x", Bounce.easeOut, 136.8, 0, 2, true);
      
      //objek kanan_mc//
      
      new mx.transitions.Tween(kanan_mc, "_y", Regular.easeOut, 183.8, 0, 2, true);
      
      }

      Glossary :

   Method	Deskripsi
   easeIn	Menyediakan easing effect pada awal transisi.
   easeOut	Menyediakan easing effect pada akhir transisi.
   easeInOut	Menyediakan easing effect pada awal dan akhir transisi.
   None	Mengindikasikan bahwa tidak ada easing yang dapat digunakan / kalkulasi

8. Easing Class	Deskripsi
   Back	Animasi meluas sekali di luar jangkauan transisi pada satu atau kedua ujungnya untuk memberikan pengaruh ditarik kembali dari luar jangkauan.
   Bounce	Menambahkan efek memantul dalam rentang transisi pada satu atau kedua ujungnya. Jumlah bounce berkaitan dengan durasi – jangka waktu yang lebih lama menghasilkan bouncing.
   Elastic	Menambahkan efek elastis yang jatuh di luar rentang transisi pada satu atau kedua ujungnya. Jumlah elastisitas tidak dipengaruhi oleh durasi.
   Regular	Menambahkan gerakan lambat pada satu atau kedua ujungnya. Fitur ini memungkinkan Anda menambahkan efek mempercepat, memperlambat efek, atau keduanya.
   Strong	Menambahkan gerakan lambat pada satu atau kedua ujungnya. Efek ini mirip dengan kelas Reguler pelonggaran, tapi lebih jelas.
   None	Menambahkan sebuah gerakan yang sama dari awal sampai akhir tanpa efek, memperlambat, atau mempercepat. transisi ini juga disebut transisi linier.

Property	arti	value
_x dan _y	Koordinat dari tabel	Koordinat
_xscale dan _yscale	Transform objek	persen
_xalpha dan _yalpha	Transparansi objek	persen

Easing Class	Deskripsi
Back	Animasi meluas sekali di luar jangkauan transisi pada satu atau kedua ujungnya untuk memberikan pengaruh ditarik kembali dari luar jangkauan.
Bounce	Menambahkan efek memantul dalam rentang transisi pada satu atau kedua ujungnya. Jumlah bounce berkaitan dengan durasi – jangka waktu yang lebih lama menghasilkan bouncing.
Elastic	Menambahkan efek elastis yang jatuh di luar rentang transisi pada satu atau kedua ujungnya. Jumlah elastisitas tidak dipengaruhi oleh durasi.
Regular	Menambahkan gerakan lambat pada satu atau kedua ujungnya. Fitur ini memungkinkan Anda menambahkan efek mempercepat, memperlambat efek, atau keduanya.
Strong	Menambahkan gerakan lambat pada satu atau kedua ujungnya. Efek ini mirip dengan kelas Reguler pelonggaran, tapi lebih jelas.
None	Menambahkan sebuah gerakan yang sama dari awal sampai akhir tanpa efek, memperlambat, atau mempercepat. transisi ini juga disebut transisi linier.

pustaka

Pustaka : klik

download source code : klik