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

One response to “Animasi tweening dengan action script

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s