Top Banner
3/31/2012 1 ANIMASI Multimedia Jurusan Teknik Informatika STT – PLN [email protected] 1 Riki Ruli S - http://blogriki.wordpress.com Animation adalah illusion of motion” yang dibuat dari image statis yang ditampilkan secara berurutan. Teknik setiap frame dibuat secara terpisah. Frame bisa di hasilkan dari komputer, fotografiatau dari gambar lukisan. Ketika frame-frame tersebut digabungkan, maka terdapat ilusi perubahan gambar, sesuai dengan teori yang disebut dengan persistanceof vision” 2 Riki Ruli S - http://blogriki.wordpress.com
18

Multimedia · • Flash lebihdarisekedarprogram animasi. Flash mendukung scripting language, yang disebut Action Script, sehingga dimungkingkanuntukmembuatanimasiyang interaktifdan

May 16, 2019

Download

Documents

vutuong
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Multimedia · • Flash lebihdarisekedarprogram animasi. Flash mendukung scripting language, yang disebut Action Script, sehingga dimungkingkanuntukmembuatanimasiyang interaktifdan

3/31/2012

1

ANIMASI

MultimediaJurusan Teknik Informatika

STT – [email protected]

1Riki Ruli S - http://blogriki.wordpress.com

• Animation adalah “illusion of motion” yang dibuat

dari image statis yang ditampilkan secara berurutan.

• Teknik setiap frame dibuat secara terpisah. Frame

bisa di hasilkan dari komputer, fotografi atau dari

gambar lukisan. Ketika frame-frame tersebut

digabungkan, maka terdapat ilusi perubahan gambar,

sesuai dengan teori yang disebut dengan

“persistance of vision”

2Riki Ruli S - http://blogriki.wordpress.com

Page 2: Multimedia · • Flash lebihdarisekedarprogram animasi. Flash mendukung scripting language, yang disebut Action Script, sehingga dimungkingkanuntukmembuatanimasiyang interaktifdan

3/31/2012

2

� Persistence of vision adalah fenomena dimana suatu

objek pada retina mata tertangkap beberapa saat

setelah tampak.

� Ini adalah merupakan runtunan citra dalam jumlah

banyak, Jika diperlihatkan secara beruntun memberikansuatu kesan ilusi perpindahan/perubahan.

3Riki Ruli S - http://blogriki.wordpress.com

• Film

• Video Clip

• Advertising

• Presentation

• Web Content

• Game

4Riki Ruli S - http://blogriki.wordpress.com

Page 3: Multimedia · • Flash lebihdarisekedarprogram animasi. Flash mendukung scripting language, yang disebut Action Script, sehingga dimungkingkanuntukmembuatanimasiyang interaktifdan

3/31/2012

3

• Animasi Sel (seluloid)

• Animasi Frame

• Animasi Sprite

• Animasi Lintasan

• Animasi Spline

• Animasi Vektor

• Animasi Karakter

• Animasi Komputasional

• Morphing

5Riki Ruli S - http://blogriki.wordpress.com

Konsep Jenis Animasi memberikan

efek “hidup” (visual efek) pada

gambar atau obyek

Konsep Jenis Animasi memberikan

efek “hidup” (visual efek) pada

gambar atau obyek

• Kata cell berasal dari kata “celluloid” yang merupakan materi yang digunakan untuk membuat film gambar bergerak pada tahun-tahunawal animasi.

• Sekarang material film dibuat dari asetat (acetate)

• Biasanya digambar dengan menggunakan tangan (hand-drawn animation)

• Merupakan lembaran-lembaran yang membentuk animasi tunggal. Masing-masing sel merupakan bagian yang terpisah, misalnya antaraobyek dengan latar belakangnya, sehingga dapat saling bergerakmandiri.

• Animasi Cel disebut juga Animasi Tradisional

• Misalnya seorang animator akan membuat animasi orang berjalan, maka langkah pertama dia akan menggambar latar belakang, kemudiankarakter yang akan berjalan di lembar berikutnya, kemudian membuatlembaran yang berisi karakter ketika kaki diangkat, dan akhirnyakarakter ketika kaki dilangkahkan.

6Riki Ruli S - http://blogriki.wordpress.com

Page 4: Multimedia · • Flash lebihdarisekedarprogram animasi. Flash mendukung scripting language, yang disebut Action Script, sehingga dimungkingkanuntukmembuatanimasiyang interaktifdan

3/31/2012

4

• Menyiapkan ide/storyboard (script)– Script/ide disiapkan berupa gambar yang berupa sketsa dan tulisan

yang diserahkan ke director animasi.

• Voice Recording– Mempersiapkan segala musik, soundtrack, sound efek, dan suara

karakter animasi yang dibuat.

• Animatics (story reel)– Biasanya dibuat setelah soundtrack selesai dibuat, sebelum seluruh

animasi selesai dikerjakan. Berisi gambar-gambar kejadian danstoryboard yang sesuai dengan adegan-adegan gambar.

• Design and Timing– Setelah animatics selesai disetujui, maka animatics akan dikerjakan

dibagian design department. Biasanya melibatkan character designers, background stylist, art director, color stylist, dan timing director.

7Riki Ruli S - http://blogriki.wordpress.com

• Layout– Layout meliputi: sudut penataan kamera, lighting, dan shading.

• Animation– Animasi digambar dengan pensil berwarna dibanyak kertas. Perlu

diperhatikan juga detail gerakan, penyesuaian waktu, dan penyesuaiangerakan mimik muka dan mulut.

• Background– Background digambar dengan menggunakan water color, oil paint, dan

crayon.

• Traditional ink-and-paint and camera– Setelah semua selesai digambar maka akan dilakukan transfer gambar

diatas bahan yang disebut cel dan akan difoto dan diputar dikamera.

• Digital ink and paint– Saat ini sudah digunakan scanner dan komputer.

8Riki Ruli S - http://blogriki.wordpress.com

Page 5: Multimedia · • Flash lebihdarisekedarprogram animasi. Flash mendukung scripting language, yang disebut Action Script, sehingga dimungkingkanuntukmembuatanimasiyang interaktifdan

3/31/2012

5

9Riki Ruli S - http://blogriki.wordpress.com

• Animasi frame adalah bentuk animasi paling

sederhana.

• Contohnya ketika kita membuat gambar-gambar

yang berbeda-beda gerakannya pada sebuah

tepian buku kemudian kita buka buku tersebut

dengan menggunakan jempol secara cepat maka

gambar akan kelihatan bergerak.

• Dalam sebuah film, serangkaian frame bergerak

dengan kecepatan minimal 24 frame per detik.

10Riki Ruli S - http://blogriki.wordpress.com

Page 6: Multimedia · • Flash lebihdarisekedarprogram animasi. Flash mendukung scripting language, yang disebut Action Script, sehingga dimungkingkanuntukmembuatanimasiyang interaktifdan

3/31/2012

6

• Pada animasi sprite, gambar digerakkan denganlatar belakang yang diam.

• Sprite adalah bagian dari animasi yang bergeraksecara mandiri, seperti misalnya: burung terbang, planet yang berotasi, bola memantul, ataupunlogo yang berputar.

• Dalam animasi sprite yang dapat kita edit adalahanimasi dari layar yang mengandung sprite, kitatidak dapat mengedit bagian dalam yang ditampilkan oleh layar untuk masing-masingframe seperti pada animasi frame.

11Riki Ruli S - http://blogriki.wordpress.com

• P

12Riki Ruli S - http://blogriki.wordpress.com

Page 7: Multimedia · • Flash lebihdarisekedarprogram animasi. Flash mendukung scripting language, yang disebut Action Script, sehingga dimungkingkanuntukmembuatanimasiyang interaktifdan

3/31/2012

7

• Animasi path adalah animasi dari obyek yang bergerak sepanjang garis kurva yang ditentukan sebagai lintasan.

• Misalnya dalam pembuatan animasi keretaapi, persawat terbang, burung dan lain-lain yang membutuhkan lintasan gerak tertentu.

• Pada kebanyakan animasi path dilakukan jugaefek looping yang membuat gerakan path terjadi secara terus menerus.

13Riki Ruli S - http://blogriki.wordpress.com

14Riki Ruli S - http://blogriki.wordpress.com

Page 8: Multimedia · • Flash lebihdarisekedarprogram animasi. Flash mendukung scripting language, yang disebut Action Script, sehingga dimungkingkanuntukmembuatanimasiyang interaktifdan

3/31/2012

8

• Spline adalah representasi matematis dari

kurva. Sehingga gerakan obyek tidak hanya

mengikuti garis lurus melainkan berbentuk

kurva.

15Riki Ruli S - http://blogriki.wordpress.com

• Vektor adalah garis yang memiliki ujung-pangkal, arah, dan

panjang.

• Animasi vektor mirip dengan animasi sprite, tetapi animasi

sprite menggunakan bitmap sedangkan animasi vektor

menggunakan rumus matematika untuk menggambarkan

sprite-nya..

16Riki Ruli S - http://blogriki.wordpress.com

Page 9: Multimedia · • Flash lebihdarisekedarprogram animasi. Flash mendukung scripting language, yang disebut Action Script, sehingga dimungkingkanuntukmembuatanimasiyang interaktifdan

3/31/2012

9

• Biasanya terdapat di film kartun, semua bagian selalubergerak bersamaan.

• Software yang biasa digunakan adalah Maya Unlimited. Contoh: Film ToyStory dan MonsterInc.

• Visual efek dapat dibuat dengan cara:

– Motion dynamics, efek yang disebabkan perubahanposisi terhadap waktu.

– Update dynamics, efek yang disebabkan perubahanpada suatu obyek (bentuk, warna, struktur, dantekstur)

– Perubahan cahaya, posisi, orientasi dan fokus kamera.

17Riki Ruli S - http://blogriki.wordpress.com

18Riki Ruli S - http://blogriki.wordpress.com

Page 10: Multimedia · • Flash lebihdarisekedarprogram animasi. Flash mendukung scripting language, yang disebut Action Script, sehingga dimungkingkanuntukmembuatanimasiyang interaktifdan

3/31/2012

10

Multimedia

Perubahan (transisi) bentuk objek satu

ke objek yang lainnya

Adalah teknik pengolahan animasi

menggunakan komputer dengan tool

untuk membuat visual effect.

1.Input process

2.Composition Stage

3.In-between Process

4.PengubahanWarna

20Riki Ruli S - http://blogriki.wordpress.com

Page 11: Multimedia · • Flash lebihdarisekedarprogram animasi. Flash mendukung scripting language, yang disebut Action Script, sehingga dimungkingkanuntukmembuatanimasiyang interaktifdan

3/31/2012

11

• In-between Process: Pergerakan dari satu posisi keposisi lain

membutuhkan komposisi frame dengan posisi intermediate antar key

frame. Proses tersebut dilakukan dengan menggunakan interpolasi.

• Kelemahan interpolasi adalah kurang realistis. Sehingga dapat pula

dilakukan dengan menggunakan spline (menggunakanvektor).

• Pengubahan warna

Untuk mengubah warna animasi digunakan CLUT (Color Look Up Table)

pada frame buffer. Animasi pengubahan warna dilakukan dengan cara

memanipulasi LUT (misalnya dengan mengganti warna secara berurutan)

daripada mengganti keseluruhan gambar dengan gambar yang baru yang

pasti akan memakan bandwidth lebih besar.

21Riki Ru li S - http://blogriki.wordpress.com

• Linier-list Notations– Semua event dalam animasi ditulis dengan sebuah awal dan akhir nomor

frame dan sebuah aksi yang akan dilakukan pada suatu koordinat tertentu.

– 42, 53, B, ROTATE “PALM”,1,30 Artinya: antara frame 42,53, rotate obyek yang bernama PALM pada koordinat X = 1 dengan sudut 30 derajat denganmenggunakan tabel informasi dari tabel B. Contoh: program Scefo(SCEneFOrmat).

• General Purpose Language – Dilakukan dengan menempelkan animasi pada bahasa pemrograman biasa.

Nilai dari variabel pada bahasa pemrograman tersebut dijadikan sebagaiparameter untuk prosedur, untuk membuat animasi. Contoh: ASAS adalahbahasa yang dibuat dengan menggunakan LISP

• Graphical Language– Graphical Language adalah bahasa visual yang mampu memvisualisasikan aksi

dari perintah-perintah untuk membangun animasi. Contoh: GENESYS, DIAL, dan S-Dynamics System.

22Riki Ruli S - http://blogriki.wordpress.com

Page 12: Multimedia · • Flash lebihdarisekedarprogram animasi. Flash mendukung scripting language, yang disebut Action Script, sehingga dimungkingkanuntukmembuatanimasiyang interaktifdan

3/31/2012

12

• Symbolic Representation

– Obyek animasi (misal bola), direpresentasikanbersamaan dengan perintah operasinya (bola digelindingkan), kemudian disisi penerima baruditampilkan. Ukuran file lebih kecil, tetapi waktuuntuk mendisplaykan lebih lama karena harus adascan-convertingte lebih dahulu disisi penerima.

• Pixmap Representation

– Pixmap ditransmisikan semua dan ditampilkan disisipenerima. Waktu transmisi lebih lama, namun waktumendisplay lebih cepat

23Riki Ruli S - http://blogriki.wordpress.com

• Full Explicit Control

Animator mengatur seluruh kontrol animasi dengansegala perintah-perintah yang akan dilakukan dalamanimasi, bahkan untuk data-data seperti interpolasidanrotasi dilakukan secara eksplisit atau berdasarkaninputan dari mouse, keyboard, atau joystick.

• Procedural Control

Berdasarkan komunikasi antar obyek untukmendapatkan property nya. Control yang terjadi adalahcontrol antara satu obyek dengan obyek yang lain. Misalnya: suatu obyek bola tidak boleh melewati obyekdinding.

24Riki Ruli S - http://blogriki.wordpress.com

Page 13: Multimedia · • Flash lebihdarisekedarprogram animasi. Flash mendukung scripting language, yang disebut Action Script, sehingga dimungkingkanuntukmembuatanimasiyang interaktifdan

3/31/2012

13

• Constraint-based System

Pengontrolan terjadi karena pengaruh obyek lain, dimana obyek tersebut berinteraksi.

• Tracking Live Action Pengontrolan terjadiberdasarkan kenyataan yang ada sesuai dengandunia nyata.

• Kinematics and Dynamics

Kinematik berdasarkan posisi dan kecepatan daripoint.

25Riki Ruli S - http://blogriki.wordpress.com

• Animasi dapat ditambahkan kedalam halaman web dalambentuk animasi GIF atau video embedded.

• Format yang paling populer untuk animasi web adalahSHOCK WAVE FLASH (SWF), biasanya di-generate menggunakan Macromedia Flash, yang berupa animasivektor.

• Animasi SWF memerlukan bandwidth yang lebih rendahdibandingkan video dan format bitmap.

• Flash lebih dari sekedar program animasi. Flash mendukungscripting language, yang disebut Action Script, sehinggadimungkingkan untuk membuat animasi yang interaktif danmembuat aplikasi web dengan user-interface berupa Flash

26Riki Ruli S - http://blogriki.wordpress.com

Page 14: Multimedia · • Flash lebihdarisekedarprogram animasi. Flash mendukung scripting language, yang disebut Action Script, sehingga dimungkingkanuntukmembuatanimasiyang interaktifdan

3/31/2012

14

• Animasi Flash diorganisasikan dengan timeline (representasi grafik yang terdiri dari kumpulan frame).

• Stage adalah sub-window dimana frame dibuat denganmenggambarkan objek. Objek dapat dibuat denganmenggunakan drawing-tool, import dari aplikasi lain (BMP, JPG, PNG, fasilitas auto-trace), animasi text (outline font).

• Layer dapat dipergunakan untuk mengorganisasikanelemen frame (layer background, layer tanaman, layer awan, layer…)

• Flash interface berisi vector drawing tool, host of palletes(colourmixing, alignment, applying transformations, setting typographicsoptions, ….)

27Riki Ruli S - http://blogriki.wordpress.com

• Objek dapat disimpan pada library dalam bentukkhusus, yang dinamakan symbol, sehingga dapatdipergunakan ulang. Beberapa instance symbol dapat ditempatkan pada stage. Symbol dapatditransformasi (ukuran, orientasi).

• Tweening: animasi/pergerakanobjek

• Motion tweening: Gerakan gambar ditentukanterlebih dahulu dengan membuat motion path.

• Shape tweening: Dikenal dengan namamorphing. Perubahan bentuk suatu objekmenjadi bentuk baru

28Riki Ruli S - http://blogriki.wordpress.com

Page 15: Multimedia · • Flash lebihdarisekedarprogram animasi. Flash mendukung scripting language, yang disebut Action Script, sehingga dimungkingkanuntukmembuatanimasiyang interaktifdan

3/31/2012

15

Tiga macam symbol didalam Flash :

• Graphic symbol.

Objek vektor atau bitmap yang bisa digunakan. Dipergunakan untuk motion tweening.

• Button symbol.

Dipergunakan untuk membuat bagian interaktif(tombol).

• Movie clip symbol.

Animasi yang dapat ditambahkan ke dalam movieutama

29Riki Ruli S - http://blogriki.wordpress.com

• Animasi 3D mudah untuk dideskripsikan, namunlebih sulit untuk dikerjakan. Properties 3D model didefinisikan dengan angka-angka. Denganmerubah angka bisa merubah posisi objek, rotasi, karakteristik permukaan, danbahkan bentuk.

• Dapat membuat objek terlihat berpindah, ataubergerak pada kamera.

• Membutuhkan visualisasi 3-D dan kemampuananimasi serta membutuhkan sujumlah besarproses.

30Riki Ruli S - http://blogriki.wordpress.com

Page 16: Multimedia · • Flash lebihdarisekedarprogram animasi. Flash mendukung scripting language, yang disebut Action Script, sehingga dimungkingkanuntukmembuatanimasiyang interaktifdan

3/31/2012

16

� Kelebihan/keuntungan

� Sangat menarik dan sangat mencuri

perhatian

� Memperlihatkan sesuatu yang tidak dapat

dilakukan pada kenyataan secara proses fisik.

� Memperlihatkan visualisasi dari konsep-

konsep imajinasi, objek-objek dan

keterkaitanya.

31Riki Ruli S - http://blogriki.wordpress.com

� Kelemahan/kekurangan

� Membutuhkan memori dan media

penyimpanan pada komputer yang besar

� Membutuhkan peralatan-peralatan khusus

untuk membuat lebih berkualitas

� Tidak dapat melukiskan kenyataan aktual

seperti video atau photografi

32Riki Ruli S - http://blogriki.wordpress.com

Page 17: Multimedia · • Flash lebihdarisekedarprogram animasi. Flash mendukung scripting language, yang disebut Action Script, sehingga dimungkingkanuntukmembuatanimasiyang interaktifdan

3/31/2012

17

33Riki Ruli S - http://blogriki.wordpress.com

34Riki Ruli S - http://blogriki.wordpress.com

Page 18: Multimedia · • Flash lebihdarisekedarprogram animasi. Flash mendukung scripting language, yang disebut Action Script, sehingga dimungkingkanuntukmembuatanimasiyang interaktifdan

3/31/2012

18

• Membuat file Animasi :(pilih salah satu)

1. Bahan Presentasi (min 3 slide)

2. Banner, logo, Desain Web

3. Personal Film (min 5 menit)

4. Company Profile Institusi

5. Game

• Bebas menggunakanTools yang ada.

• Pada tampilan pertama masukkan nama anda, Nim serta logo Institusi Kampus

• Jelaskan secara tertulis Aplikasi dalam pembuatan animasi. (Ide dasar, tahap pembuatan dan Software/tools yang digunakan)

• Kumpulkan File melalui Via E-mail atau CD/DVD

Deadline Pengumpulan Pada Saat UTS. 35Riki Ruli S - http://blogriki.wordpress.com