Selasa, 27 September 2011

Animasi Shape Tween

Sedangkan tipe Shape Tweening dapat diterapkan pada object shape (menggambar dengan menggunakan tool Rectangle, Ellipse atau Pencil). Dengan tipe ini object hanya perlu dibuat pada satu frame, kemudian mengubah propertinya (bentuk, ukuran atau warna) pada frame lain. Maka secara otomatis, flash akan menginterpolasi (menyisipkan atau melakukan pengubahan secara berurutan) nilai-nilai shape pada frame-frame diantara frame pertama dan frame terakhir. Sehingga nampak seperti animasi perubahan bentuk. Berikut ini adalah langkah-langkah membuat animasi dengan tipe Shape Tweening :
  1. Buatlah sembarang object/gambar.
  2. Klik pada frame 30, lalu klik menu Insert – Timeline – Blank Keyframe.
  3. Tetap di frame 30, buat tulisan dengan Text Tool.
  4. Pilih tulisan, lalu klik menu Modify – Break Apart (Command + B) sebanyak dua kali.
  5. Klik pada frame 1, pada bagian Properties di bagian Tween pilih Shape.
  6. Jalankan animasi.

Animasi Frame by Frame

Flash merupakan software yang banyak dimanfaatkan untuk membuat profile company, presentasi serta media interaktif. Dengan kemampuan dinamis yang handal, flash sangat digemari oleh kalangan software house maupun para presenter.
Perkembangan SDM di Indonesia, flash sudah mulai menjamur di kalangan pendidikan tanpa terkecuali para guru juga mempelajari flash sebagai media presentasi bahan ajar serta media presentasi interaktif.

Secara umum flash memiliki 2 animasi yaitu animasi tween dan animasi frame by frame. Pada kesempatan ini akan dipelajari animasi frame by frame sebagai presentasi bahan ajar bagi para guru. Untuk lebih jelas penguasaan animasi tersebut, lakukan langkah-langkah sebagai berikut :

1. Aktifkan program flash 8
2. Pilihlah create new flash document
3. Secara default (standar) pada timeline memiliki layer 1 dan terletak pada frame 1 (ada bulatan berlubang di frame 1). Jika bulatan berlubang artinya frame kosong/tidak berisi obyek dan jika bulatan berwarna hitam maka frame terisi oleh obyek baik teks/gambar).
4. Simpanlah file tersebut dengan nama : latihan_1.
5. Lakukan double klik pada layer 1 (berfungsi untuk mengubah nama layer). Tulislah layer 1 menjadi teks (berfungsi untuk mengisi frame teks).
6. Arahkan kursor pada frame 1 dan lakukan klik kanan serta pilihlah Insert Keyframe (berfungsi untuk membuat obyek teks pada frame).
7. Menggunakan Text Tool (lambang huruf A) untuk membuat tulisan pada stage.
8. Lakukan insert keyframe pada frame selanjutnya dan gunakan text tool untuk menulis.
a. Frame 1 : Ketiklah ”Animasi Frame by Frame pada Flash 8 (Warna merah, font Verdana, ukuran 40), oleh Adi Wibawa (Warna Biru, font Arial, ukuran 30)”.
b. Frame 2 : Ketiklah ”Standar Kompetensi (Warna Biru, font Arial, ukuran 40), pembuatan presentasi menggunakan flash 8 (Warna Biru, font Arial, ukuran 30)”.
c. Frame 3 : Ketiklah ”Kompetensi Dasar (Warna Hitam, font Arial, ukuran 40), tips membuat presentasi bahan ajar menggunakan flash 8 (Warna Hitam, font Arial, ukuran 30)”.
d. Frame 4 : Ketiklah ”Materi 1 (Warna Biru, font Arial, ukuran 40)”.
e. Frame 5 : Ketiklah ”Materi 2 (Warna Merah, font Arial, ukuran 40)”.
f. Frame 6 : Ketiklah ”Materi 3 (Warna Hitam, font Arial, ukuran 40)”.
g. Frame 7 : Ketiklah ”Materi 4 (Warna Hijau, font Arial, ukuran 40)”.
h. Frame 8 : Ketiklah ”Materi 5 (Warna Merah, font Arial, ukuran 40)”.
i. Frame 9 : Ketiklah ”TERIMA KASIH (Warna Biru, font Arial, ukuran 40)”.
9. Untuk melihat hasil sementara lakukan klik control pilihlah test movie (atau gunakan tombol kombinasi Ctrl + Enter). Hasilnya akan bergerak terus menerus. Klik tanda x (close) untuk menghentikan pengaruh test movie.
10. Klik insert pilihlah timeline dan kliklah layer. Sehingga di timeline bertambah layer 2. Ubahlah layer 2 menjadi action dengan cara double klik pada layer 2 (lihat langkah 4).
11. Arahkan kursor pada frame 1 dan pilihlah action pada properties atau klik window pilih action (F9).
12. Pada action.
Ketiklah :
stop( );
Action ini berfungsi untuk menghentikan setiap frame agar tidak bergerak terus menerus ke masing-maisng frame.
13. Tambahkan layer baru (layer 3). Ubahlah layer 3 menjadi tombol_N. (lihat langkah 9 untuk menambah layer dan mengubahnya).
14. Letakkan kursor di frame 1 pada layer tombol_N (membuat tombol next/lanjut). Manfaatkan tombol pada flash dengan cara : klik window pilih Common Libraries dan klik Buttons. Hasilnya akan ada library buttons.
15. Menggunakan scroll vertikal pada library buttons, carilah classic button. Lakukan double klik folder pada classic button dan carilah playback, kemudian pilih gel right. Pada library buttons akan muncul tombol panah ke kanan berwarna hitam dan background hijau.
16. Lakukan pemindahan (drag) gel right ke stage bagian bawah dengan cara klik gel right tahan kemudian pindahkan ke stage dan lepaskan mouse.
17. Klik action pada layer tombol_N ( Ingat !! action dibuat pada frame yang berisi tombol)
Ketiklah :
on (release) {
nextFrame();
}
Action ini berfungsi untuk berpindah frame 1 ke frame selanjutnya.
18. Arahkan kursor pada frame 9 layer tombol_N. Klik kanan, pilihlah Insert Blank Keyframe. Tujuannya untuk menghilangkan tombol_N (lanjut) pada frame 9 sebab pada frame 9 adalah frame terakhir yang tidak memiliki kelanjutannya.
19. Tambahkan layer baru (layer 4). Ubahlah layer 4 menjadi tombol_P. (lihat langkah 9 untuk menambah layer dan mengubahnya).
20. Letakkan kursor di frame 2 pada layer tombol_P (membuat tombol back/Kembali). Mengapa kursor berada di frame 2 ? Karena pada frame 1 tidak memiliki frame sebelumnya. Manfaatkan tombol pada flash dengan cara : klik window pilih Common Libraries dan klik Buttons. Hasilnya akan ada library buttons.
21. Menggunakan scroll vertikal pada library buttons, carilah classic button. Lakukan double klik folder pada classic button dan carilah playback, kemudian pilih gel left. Pada library buttons akan muncul tombol panah ke kiri berwarna hitam dan background hijau.
22. Lakukan pemindahan (drag) gel left ke stage bagian bawah dengan cara klik gel left tahan kemudian pindahkan ke stage dan lepaskan mouse.
23. Klik action pada layer tombol_P (
Ketiklah :
on (release) {
prevFrame();
}
Action ini berfungsi untuk berpindah frame n ke frame sebelumnya.
24. Untuk melihat hasil sementara lakukan klik control pilihlah test movie (atau gunakan tombol kombinasi Ctrl + Enter). Klik tanda x (close) untuk menghentikan pengaruh test movie.
25. Jika hasilnya sudah bagus sesuai dengan harapan kita maka lakukan klik gembok/kunci dengan tujuan pada layer tidak mengalami perubahan. Jika ingin mengubah pada layer maka lakukan klik kembali pada gembok. Hasil flash ini masih mentah karena berektens fla (Flash document)
26. Jika hasilnya ingin di ubah dalam Flash movie, lakukan : klik file > publish. Hasilnya menjadi file berketensi swf (Flash movie). File ini dapat di jalankan jika di komputer anda memiliki software flash player.
27. Jika hasilnya ingin bergerak mandiri tanpa flash player, lakukan : klik file > publish settings > berilah tanda centang pada windows projector (*.exe) > klik publish, kemudian klik ok. Silahkan hasilnya di cek dan di coba.
SEMOGA PENGALAMAN INI DAPAT BERMANFAAT.

Animasi Motion Tween


Animasi motion tween digunakan apabila kita ingin membuat gerakan animasi yang teratur. Animasi ini sangat mengurangi waktu karena kita tidak perlu membuat animasi secara frame per frame. Sebaliknya Anda hanya membuat frame awal dan frame akhir saja. Dua alasan utama mengapa Animasi motion tween sangat baik yaitu karena mengurangi pekerjaan mengambar dan meminimalkan ukuran file karena isi dari setiap frame tidak perlu disimpan.
Membuat animasi motion tween

1. Buka file baru atau Ctrl+N.
2. Kemudian kita pilih Oval tool (O) pada toolbox dan kita mulai membuat objek lingkaran pada stage dengan mengklik dan drag, jangan lupa warna fiil objek balok harus berbeda dari warna background stage.13
3. Kemudian klik kanan di frame ke-1, pilih Create motion tween.23
4. Pada frame ke-10 klik kanan kita pilih Insert Keyframe, kemudian kita geser lingkaran ke kanan sehingga tampak seperti pada gambar.
33
5. Kemudian pada frame ke-20 klik kanan kita pilih Insert Keyframe, kemudian kita geser lingkaran ke bawah sehingga tampak seperti pada gambar.43
6. Kemudian pada frame ke-30 klik kanan kita pilih Insert Keyframe, kemudian kita geser lingkaran ke kiri sehingga tampak seperti pada gambar.
53
7. Kemudian tekan Enter untuk melihat hasilnya.

Selasa, 13 September 2011

-Macromedia Flash-

Software untuk membuat animasi yang biasanya digunakan untuk berbagai keperluan di Internet. Misalnya, untuk membuat situs, banner iklan, logo yang beranimasi, serta animasi pelengkap lainnya. Flash dikembangkan dari suatu aplikasi yang bernama SmartSketch. SmartSketch sendiri merupakan aplikasi untuk menggambar yang diluncurkan pada 1994 oleh FutureWave, bukan oleh Macromedia. Aplikasi ini cukup sukses di tengah pasar aplikasi menggambar yang dikuasai oleh Illustrator dan Freehand. Pada musim panas 1995, SmartSketch memperoleh masukan dari penggunanya agar SmartSketch dapat digunakan untuk membuat animasi.

FutureWave sangat tertarik untuk membuat suatu aplikasi untuk membuat animasi. Namun FutureWave agak pesimis mengenai pemasarannya, karena pada saat itu animasi hanya didistribusikan dengan VHS atau CD-ROM. Kemudian World Wide Web mulai mengembangkan sayapnya, dimana grafik dan animasi menjadi vital. FutureWave melihat kesempatan ini untuk memasarkan aplikasi yang mampu menghasilkan animasi dua dimensi. Kemudian SmartSketc dimodifikasi sehingga mampu menghasilkan animasi dengan menggunakan pemrograman Java sebagai player-nya. Namanya juga sedikit dimodifikasi menjadi SmartSketch Animator. Namun, nama SmartSketch Animator dirasakan kurang menjual, sehingga nama tersebut diubah menjadi CelAnimator. Tetapi kemudian, karena kuatir dicap sebagai aplikasi pembuat kartun, CelAnimator diubah menjadi FutureSplash Animator. Walaupun dengan ide yang cukup revolusioner, FutureSplash sulit populer. Oleh karena itu FutureWave mendekati Adobe. Namun karena demo FutureSplash yang kurang memuaskan dengan lambatnya animasi, Adobe menolak memproduksi FutureSplash. Baru pada November 1996, Macromedia mendekati FutureWave untuk bekerja sama. FutureWave menyetujui tawaran Macromedia. Kemudian FutureSplash Animator diubah namanya menjadi Macromedia Flash 1.0.