BAB 1: PENDAHULUAN PENGERTIAN ANIMASI Animasi yang akan digunakan dalam Macromedia Flash MX adalah animasi 2 dimensi. Konsep animasi adalah menampilkan perubahan dari suatu obyek, sehingga obyek tersebut terlihat bergerak. Tampilan animasi ini merupakan kumpulan dari frame-frame di mana tiap-tiap frame berisi obyek yang memiliki perbedaan tampilan, sehingga bila frame-frame itu digabungkan menjadi suatu satu kesatuan maka akan terlihat pergerakan dari obyek tersebut. Pageflip Anda juga dapat membuat animasi sederhana dengan menggunakan pinggiran dari tiap halaman buku, dimana di tiap halamannya diberi sebuah obyek dengan pbentuk yang berbeda di masing-masing halamannya. Ketika anda membuka lembaran-lembaran halaman itu secara cepat maka akan terbentuk animasi dari kumpulan obyek yang baru anda buat. Begitulah kurang lebih konsep animasi ini, logika yang sama diterapkan untuk menerangkan ruang kerja pada Macromedia Flash. Animasi Pageflip RUANG LINGKUP MACROMEDIA FLASH 8 Buka Macromedia Flash 8, tampilan awal dan keterangan tiap bagian dijelaskan sebagai berikut: Tools Panels berisi tools untuk menseleksi, mengedit, menggambar dan umum muncul pada aplikasi-aplikasi grafis. Layers adalah bagian yang berisi frame-frame, tempat untuk meletakkan obyek-obyek. Layer ini dapat ditambahkan sehingga dalam suatu animasi terdiri dari banyak layer. Hal ini untuk mempermudah pengaturan dan editing dari obyek di dalam frame. Timeline adalah kumpulan frame-frame tepat meletakkan perubahan obyek. Menunjukkan juga durasi atau rentang waktu suatu animasi. Animasi 2D Klasik Disney Stage digunakan untuk meletakkan obyek. Penggunaannya bergantian antara timeline dan stage, terutam untuk editing dan seleksi obyek. Panel Group adalah kumpulan dari panel-panel untuk mengatur format dari animasi. Untuk mempermudah pekerjaan anda dapat menutup (klik kanan) pada panel tersebut sehingga stage menjadi lebih luas. Bila diperlukan anda dapat memanggilnya di dalam menu Window. Properties digunakan untuk melihat dan mengubah obyek yang diseleksi pada halaman web. Tiap obyek memiliki properti yang berbeda.contohnya properti image akan berbeda dengan properti dari teks. Action Panels digunakan untuk memberikan unsur interaktifitas dengan user. Animasi 3D Pixar
BAB 1: PENDAHULUAN Mendefinisikan movie properties Movie properties merupakan bagian dalam flash yang digunakan untuk mengatur tampilan ukuran movie dan background. Tekan tombol ukuran Size sehingga menampilkan menu pop-up untuk properti ukuran layar. Tuliskan ukuran pixel untuk Width dan Height-nya. Sedangkan untuk Background Color dapat kita pilih warna yang sesuai. Buka file yang ada di dalam folder modul Bab 01/01.fla.
BAB 1: PENDAHULUAN Menggambar bentuk Flash mendukung penggunaan tools pengolah vektor, seperti halnya software Freehand, Illustrator dan Corel Draw. Gunakan tool pada tool panels di samping kiri. Kita akan menggambar bentuk sederhana seperti lingkaran dan kotak. Perhatikan untuk warna dan properties dari fill dan stroke setiap bentuk. Fill adalah warna di dalam bentuk, sedang stroke warna untuk garis pinggir bentuk itu. Contoh ada di folder Bab 01/01b.fla. dan 01c.fla.Bila bentuk itu ingin kita ubah skalanya dan bentuknya, gunakan tool Free Transform. Kita dapat menggunakan pilihan distort dan envelope untuk efek bentuk yang berbeda. Contoh ada di dalam folder Bab 01/01d.fla. Bentuk yang dibuat dengan menggunakan Tool pada Flash ini dinamakan Shape Membuat bentuk bergradasi 1. Buat obyek lingkaran tanpa stroke. 2. Pilih di bagian Fill Color untuk pilihan warna gradasi. 3. Buka menu Window > Color Mixer. Di sini terdapat pilihan jenis Gradasi Radial dua buah slider untuk warna terang dan gelap, masing-masing di sebalah kanan dan kiri. 4. Pilih slider warna sebelah kiri dulu, kemudian kita ubah warnanya dengan double click slider tersebut, lakukan hal yang sama untuk slider kanan. 5. Untuk mengubah bentuk gradasi dapat dipakai tool Gradient Transform Tools. Atau dengan menggunakan Paint Bucket Tools, lakukan dengan cara men-drag dari satu sisi ke sisi lainya. Contoh ada di dalam folder Bab 01/01e.fla dan 01f.fla. Properti dari Gradasi Menggunakan Guideline Guide line adalah sarana untuk mempermudah pengaturan posisi dari animasi. Untuk memunculkan menu ini anda dapat memilih pilihan Ruler dari menu View. Akan tampak ukuran penggaris yang membatasi stage anda. Sekarang drag dari panel ukuran horisantal ke arah bawah sehingga akan tampak sebuah garis hijau horisontal. Begitu pula untuk bagian vertikal, lakukan hal yang sama. Garis bantu ini tidak akan ditampilkan di dalam movie flash, garis ini hanya untuk keperluan editing saja. Contoh ada di folder Bab 01/01g.fla Gradient Transform Tools Mengatur jenis font Untuk menuliskan teks pada flash gunakan Text Tool. Kemudian lihat di bagian properties. Atur jenis font, size, color. Di sini kita menggunakan jenis yang Static Text. Sedang untuk Dynamic Text dan Input Text digunakan penggunaan yang lain. Contoh ada di dalam folder Bab
BAB 1: PENDAHULUAN 01/01h.fla. Membuat efek tulisan 1. Buat sebuah tulisan pada stage. Atur jenis font, size dan color yang disukai. 2. Seleksi seluruh tulisan, buka menu Modify >Break Apart (tulisan akan terbagi dalam kelompok huruf-huruf). Lakukan Break Apart sekali lagi untuk mengubah bentuk teks menjadi shape. 3. Gunakan tolol Free Transform, Distort atau Envelope untuk memberikan efek teks yang disukai. Contoh ada di folder Bab 01/01i. fla dan 01j.fla. Properti pada Transform Tools Ketika sebuah shape (bentuk) dikenakan perubahan transform, maka akan terdapat 4 perubahan seperti yang ada di samping ini. Yaitu Rotate and Skew, Scale, Distort, dan Envelope. Gunakan salah satu bentuk transform ini untuk memberikan perubahan pada bentuk. Properti Transform Tools
BAB 2: FRAME & LAYER Pengertian Frame Setiap kali kita membuat sebuah bentuk, atau meletakkan obyek dalam stage, pada timeline terdapat titik hitam yang dinamakan keyframe. Dalam sebuah animasi terdapat durasi untuk jalannya animasi tersebut. Penentuan panjangnya durasi animasi ini dijelaskan dengan panjangnya frame. Dalam timeline ini kita dapat memberi panjang frame sebanyak 5 frame, 10 frame, 100, 1000 atau sebanyak frame yang kita inginkan. Keyframe Menseleksi Frame Membuat frame 1. Buat obyek lingkaran tanpa stroke. 2. Otomatis terdapat Keyframe di dalam Timeline 3. Untuk menambahkan panjangnya frame, pilih frame yang kita inginkan, misalnya frame 20. Klik kanan pilih Insert Frame 4. Contoh ada di dalam folder Bab 02/02a.fla dan 02b.fla. Menghapus frame 1. Seleksi frame yang akan dihapus. Cara pertama, pilih frame 20 kemudian sambil menekan Shift pilih frame 10. Otomatis dari frame 10 sampai frame 20 terpilih. Cara kedua klik/pilih frame 10 (jangan dilepas) kemudian drag sampai frame ke 20. 2. Kemudian klik kanan seleksi frame tersebut dan pilih Remove Frame Posisi layer Pengertian Layer Untuk mempermudah pengaturan obyek dalam flash diperlukan manajemen layer. Pengertian layer ini sama dengan pengertian layer pada Photoshop, Illustrator, Freehand dsb. Dimana layer yang berada di paling bawah, letaknya pada stage pada bagian terbelakang, sedangkan layer paling atas, obyeknya berada pada bagian depan. Ikon pada Layer Ikon Pensil : layer yang sedang aktif atau yang sedang dipilih. Ikon Mata : bila dipilih ada tanda silang, berarti invisible Ikon Gembok : dikunci/tidak bisa diedit. Ikon Kotak : outline dari bentuk/obyek yang ada pada stage Obyek yang terdepan terletak di layer teratas Semuanya ini bermanfaat untuk mempermudah dalam mengedit salah satu obyek dalam sebuah layer. Contoh ada di dalam folder Bab 02/02c. fla
BAB 2: FRAME & LAYER Menambah Layer 1. Buat obyek lingkaran tanpa stroke. 2. Pilih icon sebelah kiri di bawah Layer untuk menambah layer Menambah layer Delete layer Memodifikasi Layer 1. Untuk memberi nama Layer, seleksi layer yang akan diganti, double klik dan beri nama yang diinginkan. 2. Untuk mengubah posisi layer, dilakukan dengan cara memilih dan mendrag layer yang bersangkutan ke posisi yang diinginkan. 3. Untuk menghapus layer, dilakukan dengan cara memilih kemudian klik kanan Delete Layer, atau klik pada icon tempat sampah di kanan bawahnya. Mengimpor obyek Selain membuat shape (bentuk) yang ada di flash, kita juga memerlukan unsur-unsur visual lainnya untuk multimedia, seperti gambar, suara video. Obyek obyek ini nantinya terdapat di dalam Library yang merupakan asset dari file flash yang kita buat. Cara mengimpor obyek ini ada dua cara. Cara pertama, pilih menu File > Import > Import to Stage dan cara kedua File > Import > Import to Library. Kedua cara ini sama-sama memasukkan obyek ke dalam Library, hanya cara yang pertama memasukkan langsung pada stage. Memasukkan Gambar 1. Buat file baru. File > Import to Library untuk mengambil obyek untuk dimasukkan langsung ke dalam library. 2. Pilih file di folder Bab 02/pingu.jpg. Kemudian Pilih Window > Library untuk melihat obyek yang baru diimpor. Drag obyek itu ke stage. Format lain yang didukung oleh flash di antaranya: bmp,gif, gif animated, png, format freehand, illustrator. 3. Contoh ada dalam folder Bab 02/02d.fla. Library Memasukkan Suara 1. Buat file baru. File > Import to Library untuk mengambil obyek untuk dimasukkan langsung ke dalam library. 2. Pilih file di folder Bab 02/baby.wav. Kemudian Pilih Window > Library untuk melihat obyek yang baru diimpor. Drag obyek itu ke stage. Format lain yang didukung di antaranya : mp3, aif 3. Contoh ada dalam folder Bab 02/02e.fla. Memasukkan Movie 1. Buat file baru. File > Import to Library untuk mengambil obyek untuk dimasukkan langsung ke dalam library. 2. Pilih file di folder Bab 02/sample2.mov. Muncul pilihan untuk video setting. Klik Next. Kemudian pilih Embed Video in SWF and play in timeline. Klik Next. Pada pilihan Embedding biarkan secara default, Next. Pada pilihan Encoding, pilih Flash 8 (Medium Quality), Next, Finish. Format video lain yang didukung di antaranya : mov, avi, mpeg, dv, wmv 3. Contoh ada dalam folder Bab 02/02f.fla.
BAB 3 : ANIMASI FRAME BY FRAME Pengertian Keyframe & Animasi Seperti yang telah dijelaskan di Bab sebelumnya, setiap kali kita membuat sebuah bentuk, atau meletakkan obyek dalam stage, pada timeline terdapat titik hitam yang dinamakan keyframe. Dalam sebuah frame bisa terdapat beberepa keyframe yang nantinya tiap keyframe itu dijadikan penanda untuk perubahan dalam animasi. Posisi yang berbeda pada tiap frame Posisi frame pada timeline Posisi & bentuk yang berbeda Keseluruhan frame berisi keyframe Membuat keyframe 1. Buat obyek star tanpa stroke. 2. Otomatis terdapat Keyframe di dalam Timeline 3. Untuk menambahkan panjangnya frame, pilih frame yang kita inginkan, misalnya frame 20. Klik kanan pilih Insert Frame 4. Untuk menambahkan keyframe pilih misalnya frame 10, kemudian Klik kanan pilih Insert Keyframe 5. Lakukan hal yang sama untuk frame ke 20 6. Contoh ada di dalam folder Bab 03/03a.fla Menghapus keyframe 1. Seleksi keyframe yang akan dihapus. Contoh disini pilih frame 10 2. Kemudian klik kanan seleksi frame tersebut dan pilih Clear Keyframe Membuat animasi frame by frame 1 1. Lakukan hal yang sama dengan langkah 03a.fla 2. Pilih frame 10, obyek star pada frame tersebut pindahkan ke bagian lain dari stage 3. Pilih frame 20, obyek star pada frame tersebut pindahkan ke bagian lain dari stage 4. Tambahkan frame pada frame 30, Klik kanan pilih Insert Frame 5. Lakukan test Movie dengan cara menu Control > Play atau Control > Test Movie 6. Lakukan perubahan bentuk dan warna 7. Contoh ada di dalam folder Bab 03/03b.fla, 03c.fla, 03d.fla Membuat animasi frame by frame 2 1. Buat obyek star tanpa stroke. 2. Tambahkan frame sejumlah 5 frame 3. Pilih keseluruhan frame, Klik kanan > Convert to Keyframe 4. Lakukan perubahan warna, bentuk, dan posisi pada tiap frame 5. Contoh ada di dalam folder Bab 03/03e.fla.
BAB 3 : ANIMASI FRAME BY FRAME Animasi teks frame by frame Membuat animasi teks frame by frame 1. Buat bilangan menggunakan teks misalnya 1234. 2. Tambahkan frame sejumlah 5 frame 3. Pilih keseluruhan frame, Klik kanan > Convert to Keyframe 4. Pilih frame 2 ubah angka 1234 menjadi 5678. 5. Pilih frame 3 ubah angka 1234 menjadi 9347. 6. Pilih frame 4 ubah angka 1234 menjadi 3189. 7. Pilih frame 5 ubah angka 1234 menjadi 4351. 5. Contoh ada di dalam folder Bab 03/03f.fla. Membuat animasi teks frame by frame 1. Pilih Import > To Library cari dalam folder foto Pada Bab03, seleksi ke 6 gambar yang ada di sana. 2. Buka Library, Drag gambar pertama dan letakkan ke dalam stage 3. Tambahkan frame sejumlah 6 frame 4. Pilih keseluruhan frame, Klik kanan > Convert to Keyframe 5. Pilih frame 2, buka Properti pilih pilihan Swap, gantikan dengan gambar yang berbeda. 6. Pilih frame 3, lakukan seperti langkah 5 7. Lakukan hal yang sama untuk frame-frame yang lainnya 5. Contoh ada di dalam folder Bab 03/03g.fla. Animasi teks frame by frame Membuat animasi frame by frame karakter 1. Buka file Bab 03/03hfinal.fla, Test Movie untuk melihat hasilnya. 2. Buka file Bab 03/03hstart.fla. Terdapat 13 layer dengan masing-masing layer berisi komponen wajah karakter ini. 3. Buat panjang durasi frame menjadi 30 frame untuk semua layer 4. Adakan perubahan pada layer alis, mulut dan hidung. Berikan keyframe pada frame 10, 11,12. Lakukan perubahan letak dengan menurunkan bagian alis, mulut, dan hidung. 5. Lakukan juga penambahan keyframe pada frame 20, 21, 22 dan lakukan perubahan letak dari obyek-obyek tersebut. 6. Gunakan Onion Skin untuk melihat perubahan pada frame sebelum dan setelahnya. 7. Kombinasikan sendiri untuk layer-layer yang lain dengan keyframe yang berbeda untuk membuat animasi yang berbeda. Animasi karakter frame by frame
BAB 3 : ANIMASI FRAME BY FRAME frame 40 frame 39 Membuat animasi tandatangan 1. Buka file Bab 03/03ifinal.fla, Test Movie untuk melihat hasilnya. 2. Buka file Bab 03/03istart.fla. Teks ini sudah diubah menjadi shape dengan menggunakan fasilitas Break Apart. Jadi bila kita ingin memulai dari bentuk teks yang lain, lakukan 2 kali break apart untuk menjadikannya shape. 3. Pilih frame 40, klik kanan Insert Keyframe 4. Pilih keyframe ke 40 itu lagi, klik kanan Copy Frame 5. Pilih frame 39, klik kanan Paste Frame. Pada Frame 39 itu gunakan Eraser Tool untuk menghapus sedikit bagian dari akhir teks. 6. Pilih lagi frame 39, klik kanan Copy Frame, dan pilih frame 38, klik kanan Paste Frame, hapus lagi bagian dari teks. 7. Lakukan hal yang sama untuk frame frame yang lain. frame 38
BAB 4 : ANIMASI SHAPE TWEENING Pengertian Animasi Tweening Istilah tweening berasal dari kata Between atau di antara. Animasi tweening merupakan animasi perubahan di antara dua buah keyframe. Jadi kita memerlukan 2 buah keyframe dimana di antara 2 keyframe tersebut terdapat ruang frame. Keyframe awal terdapat obyek yang berada pada kondisi tertentu (letak, skala, warna) yang akan dianimasikan, dan keyframe akhir terdapat obyek yang berada pada kondisi akhirnya. Kedua keyframe tersebut diberikan tweening sehingga terlihat proses perubahan dari frame awal ke frame akhir. Tweening pada Flash ada 2 jenis yaitu Shape Tweening dan Motion Tweening. Shape Tweening adalah animasi tweening yang terjadi pada obyek yang berupa shape Shape Tween Membuat animasi shape tweening 1. Buat sebuah obyek berbentuk shape tanpa stroke pada stage. 2. Pilih frame 10, klik kanan Insert Keyframe. Sudah terbentuk 2 buah keyframe. 3. Untuk memberikan tweening, seleksi frame di antara 2 buah keyframe tersebut. Kemudian pada Properties pilih Tween Shape. 4. Pada timeline terdapat garis warna hijau yang menandakan shape tweening telah terbentuk 5. Lakukan test Movie dengan cara menu Control > Play atau Control > Test Movie 6. Contoh ada di dalam folder Bab 04/04a.fla Perubahan letak dan warna Membuat animasi shape tweening 2 1. Buat sebuah obyek star tanpa stroke pada stage. 2. Pilih frame 20, klik kanan Insert Keyframe. Sudah terbentuk 2 buah keyframe, pindahkan obyek, perbesar skalanya, ubah warnanya 3. Pilih frame 40, klik kanan Insert Keyframe, pindahkan obyek, perbesar skalanya, ubah warnanya 4. Pilih frame 1, klik kanan Copy Frame, pilih frame 60, Paste Frame 5. Buat tweening antra frame 1 dan 20, frame 20 dan 40, frame 40 dan 60 6. Lakukan Test Movie.Contoh ada di dalam folder Bab 04/04b.fla
BAB 4 : ANIMASI SHAPE TWEENING Membuat tweening dengan akselerasi (easing) 1. Buat sebuah obyek lingkaran tanpa stroke pada stage. 2. Pilih frame 20, klik kanan Insert Keyframe. Sudah terbentuk 2 buah keyframe, pindahkan obyek ke bagian bawah. 3. Pilih frame 1, klik kanan Copy Frame, pilih frame 40, Paste Frame 4. Buat tweening antra frame 1 dan 20, frame 20 dan 40 5. Pilih frame 1, buka Properties ubah ease -100, pilih frame 20 ubah ease 100 6. Lakukan Test Movie.Contoh ada di dalam folder Bab 04/04c.fla akselerasi dengan easing Morphing (perubahan bentuk) 1. Buat sebuah obyek lingkaran tanpa stroke pada stage. 2. Pilih frame 20, klik kanan Insert Keyframe. Sudah terbentuk 2 buah keyframe. 3. Pada frame 20 buat sebuah bintang (tanpa stroke) disebelah kanan dari lingkaran yang ada. Kemudian seleksi lingkaran yang ada di frame 20 itu kemudian hapus dari stage Delete. 4. Buat tweening antra frame 1 dan 20 5. Akan terlihat transisi dari lingkaran ke bintang 6. Lakukan Test Movie.Contoh ada di dalam folder Bab 04/04d.fla Twening dengan Shape Hints 1. Buat sebuah obyek kotak pada stage. 2. Pilih frame 20, klik kanan Insert Keyframe. Sudah terbentuk 2 buah keyframe. 3. Pada frame 20 buat sebuah belah ketupat dengan cara membuat kotak kemudian gunakan transform untuk memutar arahnya. Beri warna yang berbeda. Kemudian seleksi kotak yang ada di frame 20 itu kemudian hapus dari stage Delete. 4. Buat tweening antara frame 1 dan 20 5. Akan terlihat transisi, namun masih berupa perubahan yang sederhana. 6. Pilih kembali frame pertama, kemudian pilih menu Modify > Shape > Add Shape Hint (Ctrl + Shift + H). Akan nampak lingkaran merah dengan huruf a. Dan pada frame 20 juga terdapat hal yang sama. 7. Pada frame 1 pindahkan letak lingkaran kecil merah itu ke bagian sisi sebelah kiri dari kotak. Pilih frame 20, pindahkan lingkaran kecil itu ke sisi sebelah kiri. Bila melakukannya secara tepat, lingkaran merah kecil itu akan berubah warna menjadi hijau. 8. Kembali ke frame 1, tambahkan shape hints dengan cara yang sama dengan langkah 6. Dan pindahkan lingkaran b di atas lingkaran yang pertama, di sudut kotaknya. Kemudian pindah ke frame 20, pindahkan letak lingkaran b ke sisi belah ketupat sebelah kiri atas.
BAB 4 : ANIMASI SHAPE TWEENING 9. Lakukan langkah 8 untuk shape hints yang ke tiga seterusnya sehingga letak dari huruf shape hints memutar searah jarum jam. Dan berakhir pada shape hints h. 10. Lakukan Test Movie.Contoh ada di dalam folder Bab 04/04e.fla Shape Hints pada teks 1. Buat sebuah huruf T dengan jenis font Times New Roman, Bold, Size 300. Kemudian pilih huruf T tersebut, pilih menu Modify > Break Apart untuk mengubah dari teks menjadi shape 2. Pilih menu View > Rulers untuk menampilkan ukuran pada sisi dari stage. Klik pada bagian penggaris ini dan drag ke arah stage untuk membuat semacam guide line. Letakkan guide line ini di sisi bawah dan sisi kiri dari batang teks huruf T itu. 3. Pilih frame 20 buat sebuah teks hutuf I. Beri warna yang berbeda. Lakukan Break Apart sama sepert huruf T tadi. Kemudian seleksi huruf T yang ada di frame 20 itu kemudian hapus dari stage Delete. Sehingga yang tersisa di farem 20 ini hanya huruf I saja, pindahkan shape huruf I ini ke bagian guide line yang ditempati sebelumnya oleh huruf T. 4. Buat tweening antara frame 1 dan 20 5. Akan terlihat transisi, namun masih berupa perubahan tidak terlihat menarik 6. Lakukan hal yang sama dengan latihan sebelumnya, letakkan shape hints memutar searah jarum jam. Lakukan pada frame awal huruf T dan frame akhir huruf I