Creating Animation Pertemuan 06-07

1. Matakuliah : L0182 / Web & Animation Design Tahun : 2008 Creating AnimationPertemuan 06-07

2. Learning Outcomes Pada akhir pertemuan ini, diharapkan mahasiswa akan mampu : • Membuat animasi sederhana dengan menggunakan tools pada Adobe Flash CS3

3. Apakah Flash? Flashvs Animated Images dan Java Applets Alir Kerja Flash Secara Umum Drawing Tools Stage Timelines Property Inspector Library Panel Action Panel Color Panel Graphic Objects Symbol Membuat Animasi Motion Tweening Shape Tweening Motion Guide Masking Filter Menggunakan Sound Action Script Sederhana Outline Materi

4. Apakah Flash? • Flash adalah suatu program grafis multimedia yang khusus digunakan di Web • Flash memampukan kita membuat “movie” interaktif di Web • Flash menggunakan grafis vector, yang berarti grafis yang digunakan dapat diubah ukurannya ke ukuran apapun tanpa adanya kehilangan kualitas. • Flash tidak membutuhkan kemampuan programming dan mudah dipelajari

5. Flash vs Animated Images dan Java Applets • Animated images dan Java applets sering digunakan untuk membuah efek dinamis di halaman Web. • Keuntungan penggunaan Flash adalah: • Flash ditampilkan lebih cepat daripada animated images • Flash memungkinkan interaktifitas, yang tidak dimungkinkan oleh animated images • Flash tidak membutuhkan kemampuan programming, dimana diperlukan jika menggunakan java applets

6. Alir Kerja Flash Secara Umum • Untuk membuat suatu aplikasi Flash, biasanya dilakukan langkah-langkah sebagai berikut : • Rencanakan aplikasinya. • Tambahkan elemen media. • Atur elemen. • Tambahkan special effects. • Gunakan ActionScript untuk mengatur behavior. • Tes dan publikasikan aplikasi.

7. Drawing Tools • Drawing tools di Flash membolehkan kita membuat dan mengubah bentuk untuk artwork dalam movie yang akan dibuat.

8. Stage • Stage adalah area seg iempat dimana kita menempatkan konten grafis saat membuat dokumen Flash.

9. Timelines • Timeline mengorganisasi dan mengendalikan konten dari dokumen menurut waktu di layer dan frame. • Seperti film, dokumen Flash membagi panjang waktu dalam frame. • Layers seperti tumpukan pita film, setiap pita film berisi image berbeda yang muncul di Stage. • Komponen utama dari Timeline adalah layers, frames, dan playhead.

10. A. Playhead B. Keyframe kosong C. Timeline header D. Ikon Guide layer E. Frame View pop‑up menu F. Animasi Frame-by-frame Timelines (lanjt..) • G. Tweened Animation • H. Tombol Scroll To Playhead • I. Tombol Onion-skinning • J . Indikator frame aktif(current) • K . Indikator Frame Rate • L . Indikator Elapsed Time

11. Property Inspector • Property inspector menyediakan akses yang mudah ke atribut yang paling sering digunakan untuk obyek yang aktif (current selection). • Tergantung pada obyek yang sedang aktif (currently selected), Property inspector menampilkan informasi dan settings dari document, text, symbol, shape, bitmap, video, group, frame, atau tool yang aktif. • Contoh : Property inspector untuk text tool

12. Library panel adalah tempat dimana symbol yang dibuat di Flash, file, grafis bitmap, file sound dan video clips yang di-import, disimpan dan diorganisasikan. Library panel memungkinkan untuk mengorganisasi library items dalam folders, melihat seberapa sering item digunakan dalam dokumen dan mengurutkan item sesuai type-nya Library Panel

13. Action Panel • Actions panel memungkinkan untuk membuat dan mengedit kode ActionScript untuk suatu obyek atau frame. • Judul Actions panel berubah menjadi Button Actions, Movie Clip Actions, atau Frame Actions, tergantung yang sedang dipilih

14. Color Panel • Color panel memungkinkan kita mengganti warna dari garis luar (stroke) dan isi (fill) dari suatu obyek.

15. Graphic Objects • Di Flash, graphic objects adalah items di Stage. Flash memungkinkan untuk move, copy, delete, transform, stack, align, dan meng-group obyek grafis. • Shape adalah salah satu tipe obyek grafis yang dapat dibuat di Flash. Ketika suatu shape dibuat dan meng-overlap shape lain di layer yang sama, maka shape yang paling atas akan memotong bagian shape yang ter-overlap di bawahnya. • Mengatur Obyek • Menumpuk (Stack) objects • Memposisikan (Align) objects • Group objects • Mengurai (Break apart) groups dan objects

16. Symbol • Suatu symbol adalah suatu graphic, button, atau movie clip yang dibuat di Flash authoring environment. • Setiap symbol memiliki Timeline dan Stage yang unik, dilengkapi dengan layers. • Frames, keyframes, dan layers dapat ditambahkan pada Timeline suatu symbol, seperti pada Timeline utama. • Menggunakan graphic symbols untuk images statis dan membuat animasi yang bisa digunakan ulang (reusable pieces of animation)yang terikat pada Timeline utama. • Gunakan button symbols untuk membuat tombol interaktif yang merespon pada mouse clicks, rollovers, atau aksi mouse lainnya. • Gunakan movie clip symbols untuk membuat reusable pieces of animation. Movie clips memiliki Timeline multiframe sendiri yang tidak bergantung pada Timeline utama

17. Button Symbol • Frame pertama adalah Up state, merepresentasikan ketika pointer belum menyentuh tombol. • Frame kedua adalah Over state, merepresentasikan tampilan tombol saat pointer ada di atas tombol. • Frame ketiga adalah Down state, merepresentasikan tampilan tombol saat diklik. • Frame keempaat adalah Hit state, mendefinisikan respon saat mouse diklik.

18. Membuat Animasi • Keyframe • Perubahan dalam animasi didefinisikan dalam sebuah keyframe. • Ketika membuat animasi frame-by-frame, setiap frame merupakan suatu keyframe. • Tweening • Tweening adalah cara yang efektif untuk membuat gerakan dan perubahan seiring berjalannya waktu. • Dalam animasi yang di-tween (tweened animation), keyframes didefinisikan pada points tertentu pada animasi dan Flash membuat konten dari frames di antara keyframe (frames between). • Flash dapat membuat dua tipe tweened animation : • Motion tweening • Shape tweening

19. Motion Tweening • Dalam motion tweening, properties seperti position, size, dan rotation untuk suatu instance, group, atau text block didefinisikan pada suatu waktu tertentu, dan mengubah properties tersebut pada waktu tertentu lainnya. • Suatu titik hitam pada awal keyframe mengindikasikan motion tweens; suatu panah hitam dengan background biru terang mengindikasikan intermediate dari frames yang di-tween (tweened frames).

20. Shape Tweening • Dalam shape tweening, suatu shape dibuat pada satu waktu tertentu, dan mengubah shape tersebut atau menggambar shape lain pada suatu waktu tertentu lainnya. Flash menginterpolasikan nilai dari shape untuk frames in between, dan membuat animasi. • Suatu titik hitam pada bagian awal keyframe mengindikasikan shape tweens; suatu panah hitam dengan background hijau terang mengindikasikan intermediate dari frames.

21. Motion Guide • Layer Motion guide memungkinkan untuk menggambar jalur (paths) sepanjang area dimana tweened instances, groups, atau text blocks dapat dianimasikan. • Multiple layers dapat dihubungkan pada suatu motion guide layer untuk mendapatkan beberapa obyek mengikuti jalur yang sama. • Gunakan Pen, Pencil, Line, Circle, Rectangle, atau Brush tool untuk menggambar jalur yang diinginkan 

22. Motion Guide (lanjt..)

23. Masking • Gunakan mask layers untuk menampilkan bagian dari gambar atau grafis yang berada pada layer di bawahnya. • Untuk membuat suatu mask, spesifikasikan suatu layer sebagai mask layer, dan gambar atau tempatkan suatu filled shape pada layer tersebut. • Gunakan sembarang filled shape, termasuk groups, text, dan symbols, sebagai suaut mask. • Mask layer menampilkan area dari layer terhubung yang berada dibawah filled shape.

24. Masking (lanjt..)

25. Filter • Filters (graphic effects) memungkinkan untuk menambahkan efek visual menarik pada text, buttons, dan movie clips. • Suatu feature yang unik dari Flash adalah filter yang digunakan dapat dianimasikan menggunakan motion tweens. • Filter : • Drop Shadow • Blur • Glow • Bevel • Gradient Glow • Gradient Bevel • Adjust Color

26. Menggunakan Sound • Tempatkan file sound ke Flash dengan cara meng-import ke library untuk dokumen yang aktif. • Format file sound yang dapat di-import ke Flash : • WAV (hanya Windows) • AIFF (hanya Macintosh) • mp3 (Windows atau Macintosh) • Jika QuickTime 4 atau versi sesudahnya terinstalasi pada komputer, beberapa tambahan format file sound berikut dapat di-import : • AIFF (Windows atau Macintosh) • Sound Designer II (hanya Macintosh) • Sound Only QuickTime Movies (Windows atau Macintosh) • Sun AU (Windows atau Macintosh) • System 7 Sounds (hanya Macintosh) • WAV (Windows atau Macintosh)

27. Meng-Import Suatu Sound • Pilih File > Import > Import To Library. • Dalam Import dialog box, pilih dan buka file sound yang diinginkan. • Setelah layer sound baru dipilih, drag sound tersebut dari Library panel ke Stage. Maka sound telah ditambahkan pada layer yang aktif. • Flash memungkinkan untuk menempatkan multiple sounds pada satu layer yang berisi obyek lain. Tetapi, sangat disarankan untuk menempatkan setiap sound pada layer yang berbeda.

28. Meng-Import Suatu Sound (lanjt..)

29. Action Script Sederhana • ActionScript adalah bahasa scripting yang memungkinkan untuk menambah interaktifitas yang kompleks, kendali playback, dan tampilan data pada aplikasi.