Animation Session 04 & 05 Subject: L0182 / Web & Animation Design Year: 2009

Bina Nusantara Learning Outcomes Di akhir sesi ini, mahasiswa akan mampu untuk : Menggunakan animasi pada web Membuat animasi sederhana menggunakan Adobe Flash CS3

Bina Nusantara Course Outlines Definisi Animasi 2D Animasi 3D Morphing dan Warping Apa itu Flash? Workflow Flash secara umum Drawing Tools Stage Timelines Property Inspector Library Panel Action Panel Color Panel Membuat Animasi Motion Tweening Shape Tweening Motion Guide Menggunakan suara

Bina Nusantara Definisi Animasi adalah suatu rangkaian frame yang ketika dijalankan secara urut dengan kecepatan yang tepat, menampilkan gerakan yang halus seperti pada film atau video.Animasi

Bina Nusantara Animasi 2D Animasi 2D adalah pembuatan gambar bergerak pada lingkungan 2 dimensi. Hal ini dilakukan dengan merangkai gambar secara berkelanjutan, atau “frame”, yang mensimulasikan gerakan dimana setiap image memperlihatkan gambar berikutnya secara bertahap. Dua jenis animasi 2D : –Cel animation (Animasi Sel) : berbasiskan pada perubahan yang terjadi dari satu frame ke frame berikutnyaCel animation –Path animation (Animasi Jalur) : menggerakkan obyek sepanjang jalur yang sudah ditentukan pada layarPath animation

Bina Nusantara Cel Animation & Path Animation Cel Animation Path Animation

Bina Nusantara Animasi 3D Animasi 3D adalah menganimasikan obyek yang ditampilkan pada ruangan 3 dimensi. Obyek dapat dirotasikan dan digerakkan seperti pada obyek sebenarnya.Animasi 3D Proses pembuatan 3D computer graphics dapat dilakukan dalam 3 tahapan dasar : –Modeling : proses memformulakan bentuk dari obyek –Animation : mendefinisikan gerakkan obyek –Rendering : proses menbuat image dari suatu model dengan menggunakan program komputer.

Bina Nusantara Modeling dan Rendering

Bina Nusantara Efek Spesial Animasi Morphing : mentransformasikan suatu image. Digunakan pada banyak animasi dan film untuk mengubah image pertama ke image ke dua.Morphing Warping : Proses manipulasi image secara digital sehingga bentuk-bentuk yang ditampilkan pada image diubah secara signifikan.Warping

Bina Nusantara Morphing

Bina Nusantara Warping

Bina Nusantara Keuntungan dan Kerugian Menggunakan Animasi Animasi menangkap (capture) imajinasi dengan lebih baik daripada tools yang lain, menggambarkan aksi dan relasi spasial yang tidak terlihat pada realitas atau mungkin tidak ada sama sekali Keuntungan –Menarik dan menahan perhatian –Memperlihatkan aksi tak terlihat (invisible actions) atau proses fisik –Menambah daya ingat –Memampukan visualisasi konsep, object dan relasi yang dibayangkan Kerugian –Membutuhkan tambahan memory dan ruang (space) penyimpanan –Membutuhkan peralatan khusus untuk presentasi yang berkualitas –Animasi 2 dimensi tidak dapat memperlihatkan efek “nyata” seperti pada video atau foto.

Bina Nusantara What is Flash? Flash is a multimedia graphics program specially for use on the Web Flash enables you to create interactive "movies" on the Web Flash uses vector graphics, which means that the graphics can be scaled to any size without losing clarity/quality Flash does not require programming skills and is easy to learn

Bina Nusantara General Flash Workflow To build a Flash application, you typically perform the following basic steps : –Plan the application. –Add media elements. –Arrange the elements. –Apply special effects. –Use ActionScript to control behavior. –Test and publish your application.

Bina Nusantara Drawing Tools The drawing tools in Flash let you create and modify shapes for the artwork in your movies.

Bina Nusantara Stage The Stage is the rectangular area where you place graphic content when creating Flash documents.

Bina Nusantara Timelines The Timeline organizes and controls a document’s content over time in layers and frames. Like films, Flash documents divide lengths of time into frames. Layers are like multiple film strips stacked on top of one another, each containing a different image that appears on the Stage. The major components of the Timeline are layers, frames, and the playhead.

Bina Nusantara Timelines (cont..) A. Playhead B. Empty keyframe C. Timeline header D. Guide layer icon E. Frame View pop ‑ up menu F. Frame-by-frame animation G. Tweened animation H. Scroll To Playhead button I. Onion-skinning buttons J.Current Frame indicator K Frame Rate indicator L Elapsed Time indicator

Bina Nusantara Property Inspector The Property inspector provides easy access to the most commonly used attributes of the current selection. Depending on what is currently selected, the Property inspector displays information and settings for the current document, text, symbol, shape, bitmap, video, group, frame, or tool. Example : the property inspector for the text tool

Bina Nusantara Library Panel The Library panel is where you store and organize symbols created in Flash, as well as imported files, including bitmap graphics, sound files, and video clips. The Library panel lets you organize library items in folders, see how often an item is used in a document, and sort items by type.

Bina Nusantara Action Panel The Actions panel lets you create and edit ActionScript code for an object or frame. The Actions panel title changes to Button Actions, Movie Clip Actions, or Frame Actions, depending on what is selected.

Bina Nusantara Color Panel The Color panel lets you change the color of strokes and fills.

Bina Nusantara Graphic Objects In Flash, graphic objects are items on the Stage. Flash lets you move, copy, delete, transform, stack, align, and group graphic objects. Shape are one type of graphic object you can create in Flash. When you draw shapes that overlap each other in the same layer, the topmost shape cuts away the part of the shape underneath it that it overlaps. Arranging Objects –Stack objects –Align objects –Group objects –Break apart groups and objects

Bina Nusantara Creating Animation Keyframe –Changes in the animation are defined in a keyframe. –When you create frame-by-frame animation, every frame is a keyframe. Tweening –Tweening is an effective way to create movement and changes over time. –In tweened animation, you define keyframes at significant points in the animation and Flash creates the contents of frames between. –Flash can create two types of tweened animation : Motion tweening Shape tweening

Bina Nusantara Motion Tweening In motion tweening, you define properties such as position, size, and rotation for an instance, group, or text block at one specific time, and change those properties at another specific time. A black dot at the beginning keyframe indicates motion tweens; a black arrow with a light blue background indicates intermediate tweened frames.

Bina Nusantara Shape Tweening In shape tweening, you draw a shape at one specific time, and change that shape or draw another shape at another specific time. Flash interpolates the values or shapes for the frames in between, creating the animation. A black dot at the beginning keyframe indicates shape tweens; a black arrow with a light green background indicates intermediate frames.

Bina Nusantara Motion Guide Motion guide layers let you draw paths along which tweened instances, groups, or text blocks can be animated. You can link multiple layers to a motion guide layer to have multiple objects follow the same path. Use the Pen, Pencil, Line, Circle, Rectangle, or Brush tool to draw the desired path. 

Bina Nusantara Motion Guide (cont..)

Bina Nusantara Using Sound You place sound files into Flash by importing them into the library for the current document. You can import the following sound file formats into Flash : –WAV (Windows only) –AIFF (Macintosh only) –mp3 (Windows or Macintosh) If you have QuickTime 4 or later installed on your system, you can import these additional sound file formats : –AIFF (Windows or Macintosh) –Sound Designer II (Macintosh only) –Sound Only QuickTime Movies (Windows or Macintosh) –Sun AU (Windows or Macintosh) –System 7 Sounds (Macintosh only) –WAV (Windows or Macintosh)

Bina Nusantara Import a Sound Select File > Import > Import To Library. In the Import dialog box, locate and open the desired sound file. With the new sound layer selected, drag the sound from the Library panel onto the Stage. The sound is added to the current layer. You can place multiple sounds on one layer or on layers containing other objects. However, it is recommended that each sound be placed on a separate layer.

Bina Nusantara Import a Sound (cont..)