Animasi gambar dinamis dengan Flash


Kasus :

Misalnya saya membuat sebuah banner untuk sebuah instansi, dan di banner tersebut ada sebuah photo pimpinannya. Yang jadi masalah adalah dimana pimpinanya tersebut diganti, maka banner tersebut (file *.swf) harus diganti atau di sesuaikan dengan foto pimpinanya yang baru.

Solusi :

Untuk menyelesaikan kasus diatas, solusinya adalah kita membuat sebuah banner yang dapat menampilkan gambar secara dinamis. Artinya gambar yang akan ditampilkan tidak menyatu dengan file SWF, tapi dipisahkan dan tinggal memanggil nama file gambarnya untuk ditampilkan. Sehingga jika pimpinanya diganti, kita tinggal mengganti gambarnya saja dengan nama file yang sama misalnya pimpinan.jpg Dengan catatan file gambar tersebut berada dalam satu folder dengan file SWF nya.

Karena sebuah banner berisi gambar yang bergerak, maka nanti gambar pimpinan yang ada di components loader juga dapat dibuat animasi sehingga gerakanya lebih dinamis.

Untuk lebih jelasnya silahkan ikuti langkah-langkah berikut ini. Saya menggunakan Macromedia Flash Profesional 8 :

  1. Jalankan software Macromedia Flash
  2. Buat file baru (file > new > OK)
  3. Setelah itu buat symbol movie clip. Caranya pilih menu insert > new symbol > Pilih movie clip > OK
  4. Jika sudah, pilih menu Window > centang Components. Maka akan muncul kotak component seperti gambar berikut
  5. Kemudian pilih dan  geser component tersebut ke stage atau halaman untuk menggambar.
  6. Kemudian, klik gambar mx.controls.Loader tadi kemudian lihat properties nya
  7. Kemudian isi instance name nya dengan nama photo
  8. Kemudian tambahkan layer baru.
  9. Setelah “layer 2” muncul. Kemudian klik frame pertama (1) pada “layer 2”
  10. Setelah mengklik frame pertama pada “layer 2” tekanlah F9 di keyboard. Maka akan muncul kotak untuk memasukan action script. Dan masukan script berikut :  photo.contentPath = “pimpinan.jpg”;
  11. Perhatikan script berikut photo.contentPath = “pimpinan.jpg”; photo adalah nama instance name dari component loader. Dan pimpinan.jpg adalah nama file gambar yang saya gunakan untuk menampilkan foto pimpinan di banner web.
  12. Setelah itu kembali ke “scene 1” dengan cara klik icon.
  13. Setelah itu di library terdapat “symbol 1” yang berisi loader tadi. Jika window library belum muncul, tekan Ctrl+L. Setelah muncul, pilih dan geserlah “symbol 1” yang ada di library ke stage.
  14. Setelah itu kita akan membuat “Symbol 1” jadi animasi (movie clip) dengan cara klik kanan pada frame ke 50.
  15. Kemudian “insert key frame”. Kemudian kik kanan di tengah antara frame ke 1 dengan frame ke 50.
  16. Kemudian pilih “Create motion tween”
  17. Untuk effect perpindahan gambarnya, geser object yang ada di frame 50.
  18. Untuk menjalankannya, tekan Ctrl (control) Enter
  19. Selesai.

Output :


Download :

http://www.4shared.com/file/230958167/973b2130/banner.html

Cara Penggunaan :

Jika anda sudah men download, disana ada file-file sebagai berikut :

  • banner.fla untuk proyek pembuatan flash
  • banner.swf untuk file animasi nya.
  • pimpinan.jpg untuk file gambar pimpinan yang sekarang.
  • pimpinan1.jpg untuk file gambar pimpinan yang baru, tinggal anda ubah nama filenya menjadi pimpinan.jpg karena file banner.swf akan selalu membaca nama file pimpinan.jpg walau gambar wajah pimpinanya sudah berbeda karena ada script photo.contentPath = “pimpinan.jpg”; di dalam file banner.swf.

Itulah konsep dari gambar dinamis yang diambil dari file gambar yang ada di luar file SWF nya. semoga dapat dimengerti dan difahami. mohon maaf jika ada kesalahan kata. semoga artikel ini bermanfaat untu anda…aamiin

Depok, 28 Februari 2010

Noname


Advertisements

5 Responses

  1. Mau tanya niy, itu klo fotonya diambil dari database apa tetep kya gitu caranya? thanks b4..

    Like

  2. gambarnya tidak di ambil dari database, tapi langsung ke link ke file aslinya… 🙂

    Like

  3. ooo gitu ya..
    klo aku maunya gambarnya dr database gimana ya?

    Like

  4. Buat lia, maaf yach baru sempat saya blz…hehe

    saya belum pernah bikin sech, tapi tadi saya cari2 artikelnya. mungkin ini cocok untuk kamu coba :

    http://www.flash-db.com/Tutorials/simplegallery/

    http://www.flash-db.com/Tutorials/gallery/

    sedangkan yang dimaksud database itu dalam tutorial ini adalah sebuah file *.TXT

    pasti bisa sech kalo datanya(URL gambarnya) di ambil dari database, tapi saya belum nyoba 😀

    itu aja dulu yang bisa saya share, kurang lebihnya saya mohon maaf 🙂

    Like

  5. mas, punya modul2 action script u/ adobe flash cs 3?

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: