Kamis, 04 November 2010

Pre-loader

1. Buat sebuah kotak, hilangkan garis pinggirnya dan buat warnanya menjadi gradient pada toolbox "color mixer" dengan cara memilih model linier

2. ubah kotak tersebut menjadi simbol dan beri nama "bar" dengan tipe simbol "graphic"

3. buat movie-clip baru dengan cara menekan ctrl+F8, beri nama "preloader"

4. Buat gambar zig-zag pada frame 1 dan masukkan hingga frame ke 90

5. Buat layer dibawah gambar tersebut dan masukkan simbol "bar" pada bidang kerja

6. Modifikasi ukuran gambar zig-zag dengan bar sehingga sama tingginya

7. Atur gambar bar dan zig-zag seperti dibawah ini

8. Masukkan keyframe pada frame 35 dan pindahkan gambar bar menjadi posisi seperti dibawah ini

9. Buat motion tween antara frame 1 hingga frame 34.

10. Masukkan keyframe pada frame ke 40, dan rubah gambar bar sehingga arahnya berlawanan dengan cara klik Modify > Transform > Flip Horizontal

11. Masukkan keyframe pada frame ke 85, dan buat motion tween antara frame 40 hingga 85

12. Buat "mask" pada layer yang paling atas

Bagian Scene

1. Masuk bagian scene1

2. Buat bidang kerja supaya memiliki 3 layer

3. Masukkan "preloader" pada bidang area kerja dan masukkan frame baru pada urutan frame ke-2

4. Ketikkan kata "Loading..." pada layer 2

5. Masukkan "Action script" pada layer3 di frame 1, seperti dibawah ini

ifFrameLoaded ("end") {
gotoAndPlay ("start");
}

6. Masukkan keyframe baru dan isikan "action script" berikut ini pada frame ke 2

gotoAndPlay (1);

7. Test Movie,




Animasi Warna

Animasi warna sering digunakan untuk efek cahaya. Misalnya tulisan yang muncul dengan tiba-tiba. Oleh karena itu kali ini kita gunakan tulisan sebagai contohnya. Buatlah tulisan seperti di bawah ini, kemudian ubah menjadi symbol graphic.

Masukkan keyframe dalam frame 20 dan frame 40. 'Insert Motion Tween' di antara kedua frame tersebut. Klik frame 20, kemudian klik dua kali pada objek yang bersangkutan. Window 'Instance Properties' akan muncul. Klik tab 'Color Effect'. Kemudian pilih 'Tint' dari menu dropdown. Pilih warna merah, dan set 'Tint Amount' sampai maksimal. Klik 'OK'.

Klik pada frame 40, kemudian klik dua kali pada objek yang bersangkutan. Pada tab 'Color Effect', pilih 'Alpha' dari menu dropdown, dan set pada 0%. Alpha ini berguna untuk efek transparansi.

Hasilnya seperti ini. Tulisan dari hitam berubah perlahan menjadi merah (efek 'Tint' warna merah 100%), lalu menghilang (efek 'Alpha' 0%).


TWEENING - informasi umum mengenai animasi

Tweening, sangat mempermudah kerja kita untuk melakukan animasi, karena flash dapat meprediksi (dengan parameter yang kita masukan) bagaimana isi dari frame di antara kedua keyframe yang kita tentukan. Secara garis besar terdapat dua jenis, yakni motion, dan shape. Timeline

Gambar di sebelah kanan, merupakan hasil dari animasi tweening di atas. Sesuai dengan urutan dari atas ke bawah, jadi yang paling bawah adalah motion tween, dan yang paling atas adalah shape tween.

Shape Tween , dengan toolbar yang telah disediakan kita dapat membuat sebuah box dengan warna apapun, dan kita letakkan pada keyframe 1, kemudian pada timeline 8 kita insert keyframe (F6), lalu kita buat sebuah lingkaran dengan posisi di tengah movie. Kemudian, kita double klik antara keyframe 1 dan 8, maka akan muncul dialog menu, kita pilih tweening.
Kemudian pilih shape, maka jadilah animasi anda yang pertama, sebuah box yang perlahan berubah menjadi lingkaran berwarna biru, animasi berikutnya pada frame 8 hingga 15, sama. Anda insert keyframe pada timeline 15, buat bentukan segitiga, isi dengan warna merah kemudian klik kanan diantara frame bar, pilih frame properties dan pilih shape.

Shape Tween, atau tweening apapun sebenarnya sama dengan rangkaian keyframe seperti terlihat pada animasi baris kedua. Perhatikan frame bar, dari frame 1 hingga 15 terdapat jajaran keyframe yang setiap keyframenya menentukan bagaimana posisi obyek pada saat itu. Cara ini hanya efektif bila antara keyframe satu dengan yang lainnya berisi obyek yang tidak berhubungan, namun bila kita ingin menciptakan efek sekuensial, maka gunakan tween, lebih cepat dan ukuran file lebih kecil.

Semua animasi dan gambar pada tutorial ini saya gunakan format gif, untuk memungkinkan anda semua melihat efek yang ditimbulkan tanpa perlu melakukan download plug in. Oleh karena itu ukuran file terutama animasi sedikit membengkak dan anda menunggu lebih lama. Tapi saya berusaha untuk mengurangi ukuran file hingga toleransi antara waktu load dan kualitas tercipta. Mohon maaf atas hal tersebut.
Motion Tween ease out, untuk proses motion tween, perhatikan animasi baris ketiga dan keempat. Pembuatannya sama dengan shape tween, namun obyeknya telah kita rubah menjadi simbol (pilih obyek, tekan F8). Pada keyframe 1 posisi obyek di sebelah kiri dan key frame 15 saya geser ke kanan. Lalu diantara frame bar, kita double klik, pilih frame properties, pilih tweening, lalu pilih motion. Untuk animasi ini kita atur bahwa obyek easing out, perhatikan, pertama-tama dia melaju cepat (lebih cepat dari animasi bawahnya bukan ?), kemudian menjelang akhir obyek melambat dan berhenti di waktu yang sama dengan animasi baris empat. Lalu kita bisa tentukan obyek berotasi atau tidak, pada animasi ini, kita set rotation clockwise, lalu isi 1 pada times.
Motion Tween , animasi baris empat adalah motion tween biasa, dengan tanpa easing in atau out, dan tanpa rotasi. Perhatikan bahwa obyek bergerak konstan dari kiri ke kanan. Bila obyek pada keyframe 15 membesar ukurannya kita dapat menerapkan tween scaling (check pada tween scaling) sehingga dengan motion tween kita dapat melakukan sekuens perubahan posisi, skala dan ukuran, serta warna. Shape tween relatif lebih kecil efeknya pada ukuran file dan penggunaan CPU, sehingga lebih sering digunakan. Efek yang dapat anda timbulkan sangat beraneka ragam oleh karenanya kuasai proses tweening ini dengan baik.

Rabu, 03 November 2010

Tentang 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.