KOMPONEN MULTIMEDIA yoppysazaki@gmail.com

Multimedia Building Blocks Komponen aplikasi multimedia terdiri dari : Graphics Text Video Sound Animasi

Graphics Komponen grafis merupakan unsur yang mendominasi sebuah presentasi multimedia → “a picture is worth a thousand words” Kegunaan grafis dalam aplikasi multimedia : Sebagai ilustrasi untuk menjelaskan kosep-konsep Chart → untuk ilustrasi dan meringkas data-data numerik Warna, bakground dan icon untuk menyediakan keseragaman dan keberlanjutan dalam aplikasi Integrasi dari text, photo, dan grafik untuk mengekspresikan konsep, informasi atau suasana hati Menunjukkan image dan budaya perusahaan Simulasi dari lingkungan yang ada Menjelaskan proses Menjelaskan struktur organisasi Ilustrasi dari lokasi

Jenis-jenis graphics : Backgrounds Photos Grafik 3-dimensi Charts (graphs) Flow chart Organizational charts Buttons

Alur manipulasi graphics dalam pengembangan aplikasi multimedia

Backgrounds Merupakan tema dari aplikasi yang dibuat Juga menunjukkan kompleksitas produksi khususnya dalam penggunaan grafik 3-dimensi . Pemilihan disain background bergantung pada : Tema aplikasi Kapasitas resolusi warna proyektor atau monito yang digunakan untuk menampilkan aplikasi Kapasitas media penyimpan yang digunakan dalam distribusi Jumlah text yang akan ditempatkan di depan background, contoh : Jika banyak text yang harus ditampilkan → background harus sederhana agar text dapat terbaca dengan jelas Jika aplikasi akan ditampilkan di internet, maka semakin banyak graphics akan memperlambat waktu download

Parameter dalam pemilihan gambar digital Bit / color resolution Device / output resolution Screen resolution Image resolution

Bit / color resolution Merupakan ukuran jumlah bit yang disimpan per pixel yang menunjukkan jumlah warna yang dapat ditampilkan dalam waktu bersamaan di layar Ukuran yang ada : 1 bit (1 color, 1 black) 2 bit (4 colors) 4 bit (16 colors) 8 bit (256 colors) 16 bit (65.536 colors) → hi-color 24 bit (16.7 million colors) → true color

Device /output resolution Menunjukkan jumlah dots per inch (dpi) yang dapat dihasilkan oleh piranti keluaran seperti monitor, LCD panel, atau video proyektor Contoh : 300-dpi (dots per inch) printer is one that is capable of printing 300 distinct dots in a line 1 inch long. This means it can print 90,000 dots per square inch. Resolusi monitor biasanya 72 dpi

Screen Resolution Menunjukkan jumlah dpi dalam halftone yang digunakan oleh layar untuk menampilkan gambar abu-abu atau separasi warna Resolusi layar diukur dalam satuan lines per inch (lpi)

Image resolution Menunjukkan jumlah informasi yang tersimpan untuk sebuah warna; diukur dalam satuan pixels per inc (ppi) Semakin tinggi resolusi gambar → semakin besar ukuran file → semakin lama di-load → semakin lama di-print Contoh ukuran : 640 x 480, 800 x 600, 1024 x 768

Format file Pada umumnya format file ditentukan oleh pengembang software. Misalnya Apple macintosh menggunakan format PICT sebagai format standar Pengelompokan format gambar : Bitmaps Adalah gambar yang disimpan sebagai sekumpulan pixel yang bersesuaian dengan grid dari titik-titik pada layar monitor

Vector image Adalah gambar yang terimpan sebagai persamaan matematik (disebut algoritma) yang menunjukkan kurva, garis, dan bentuk-bentuk lain Mudah untuk diperbesar / diperkecil tanpa menurunkan kualita gambar; ukuran file lebih kecil dibandingkan dengan bitmaps

Text Pada awal sejarah peradaban, manusia telah menggunakan gambar-gambar dan tulisan untuk menceritakan tentang pengalaman, pengetahuan, dan perasaan mereka Teks merupakan alat komunikasi yang utama, jauh sebelum Gutenberg menemukan mesin cetak Dengan perkembangan teknologi Multimedia, teks dapat dikombinasikan dengan media lain dengan cara yang lebih powerful dan bermakna untuk menyajikan informasi dan mengekspresikan perasaan

Teks dapat dirancang dengan menggunakan : Word Processor (WP) Teks dibuat menggunakan WP kemudian di import dari Multimedia Authoring Program seperti Macromedia Director atau Macromedia Authorware dalam format Rich Text Format (RTF) Authoring Software (AS) Teks dibuat menggunakan fasilitas text editor yang terdapat dalam program seperti Macromedia Director

Hal-hal yang harus diperhatikan dalam menggunakan teks dalam aplikasi multimedia : Pahami kegunaan aplikasi yang dibuat Jumlah teks yang digunakan Jenis / type font yang dipakai Ukuran dan warna font

Bedakan penggunaan teks untuk : Individual user Untuk aplikasi multimedia yang digunakan oleh seorang pemakai dengan menggunakan komputer → gunakan extensive text dengan ukuran yang lebih kecil dibandingkan untuk group presentation Group presentations Gunakan teks seminimal mungkin; karena yang berbicara adalah presenter / penyaji. Teks hanya sebagai panduan saja Batasi penggunaan teks hanya pada bullet text atau paragraf pendek Ukuran font minimal 24 points

Format Text Format teks dapat dibagi menjadi 2 bentuk : Bullet text Berisi teks pendek; diawal dengan simbol-simbol tertentu Digunakan untuk menjelaskan konsep atau menjelaskan suatu maksud Contoh simbol yang digunakan : 􀁹, 􀂃, 1, a, dll Paragraf text Merupakan sekumpulan teks; biasanya terdiri lebih dari 1 kalimat Ada 4 bentuk format paragraf, yaitu : left-aligned, right-aligned, centered, justified

Font type Bitmap fonts Tersimpan sebagai karakter tunggal, yang terdiri dari kumpulan titik-titik yang nampak di layar ketika diperlukan Apabila ukuran font tidak terinstall di komputer maka font akan disesuaikan ukurannya secara matematis sehingga hasilnya kurang bagus Outline fonts (truetype fonts dan multiple master) Terdiri dari outlines yang terisi suatu warna / objek yang terbentuk setiap kali digunakan Selalu kelihatan halus dan bentuknya rata berapapun ukurannya

Video Suara dan video memegang peranan yang sangat penting dalam presentasi multimedia Sound merupakan dimensi aural yang menentukan mood dan tercapainya tujuan presentasi Video telah diperkenalkan kurang lebih 50 tahun yang lalu. Namun hubungan antara video (televisi) dan komputer merupakan hal yang relatif masih baru; sedangkan digital video merupakan teknologi yang lebih baru lagi. Orang akan lebih tertarik dengan aplikasi / presentasi yang menampilkan tayang dalam bentuk video

Format Video Video dibedakan dalam dua format, yaitu : Analog : NTSC dan PAL Digital : MOV, MPG, AVI, ASF, dll Proses mengubah dari analog ke format digital disebut dengan Capturing atau sampling. Proses capturing memerlukan alat yang berupa video capture board atau frame grabber yang dipasang dalam komputer, yang berfungsi untuk merubah sinyal analog menjadi sinyal digital. Semakin lama durasi video analog → semakin besar RAM dan harddisk yang dibutuhkan untuk menyimpannya dalam format digital. Sebagai ilustrasi : 1 frame digital video dengan kualitas 24 bits membutuhkan sekitar 1 Mb. 10 detik digital video – full screen – full motion memerlukan 300 Mb

Video digital mengalami kompresi antara 1/50 hingga 1/200 dari ukuran aslinya

Animasi A simulation of movement created by displaying a series of pictures, or frames. Cartoons on television is one example of animation. What is Animation? 50 years ago Walt Disney created animated objects such as Mickey Mouse. Today the process used to create animated objects has had to change. In fact, it continues to change.

Definition The word “animation” is a form of “animate,” which means to bring to life. Animation is the use of computer to create movement on the screen

There are four kinds of animation Frame Animation Makes object by displaying a series of predrawn pictures, called frames, in which the objects appear in different locations on the screen In a movie, a series of frames moves through the film projector at about 24 fps. Why 24 fps ? because that is the threshold beneath which you would notice flicker or jerkiness on the screen Vector Animation Vector is a line that has a beginning, a direction, an a length. Vector animation makes objects move by varying these three parameters for the line segments that define the object Software : macromedia flash

Computational Animation You move objects across the screen simply by varying their x (horizontal position) and y (vertical position) coordinates. Morphing Morphing means to transition one shape into another by displaying a series of frames that creates a smooth movement as the first shape transform itself into the other shape Software: Avid’s Elastic Reality, Black Belt’s WinImages, Gryphon Software’s Morph, Human Software’s Squizz, MorphWizard, Unlead’s MorphStudio

Models Cel models early animators drew on transparent celluloid sheets or cels, different sheets contained different parts of the scene, which was assembled by overlaying the sheets in animation, cels are digital images with a transparency channel scenes are rendered by drawing the cels back to front, with movement being added by changing the position of cels from one frame to the next a cel model is therefore a set of images, their back to front order, and their relative position and orientation in each frame

Scene-based models Event-based models simply a sequence of graphics models, each representing a complete scene highly redundant and do not support continuity of activities Event-based models expresses the difference between successive scenes as events that transform one scene to the next still discrete rather than continuous, but permits the management of scenes by input devices (i.e. mouse, tablet, etc.) rather than each scene having to be entered manually

Articulated objects & hierarchical models Key frames in essence, the animator models the beginning and end frames of a sequence and lets the computer calculate the others by interpolation Articulated objects & hierarchical models attempt to overcome the problems of key frames by developing articulated objects, jointed assemblies where the configuration and movement of sub-parts are constrained ensures proper relative positioning and constraint maintenance during interpolation (will not allow solid objects to pass through other solid objects)

Scripting and procedural models current state-of-the-art animation modelling systems have tools allowing the animator to specify key frames, preview sequences in real time and control the interpolation of model parameters an additional feature in many such systems are scripting languages scripting languages offer the animator the opportunity to express sequences in concise form, particularly useful for repetitive and structured motion and also provide high-level operations intended specifically for animation

Physically-based models & empirical models this approach is used to produce sequences depicting evolving physical systems a mathematical model of the system is derived from physical principles or empirical data and the model is then solved, numerically or through simulation, at a sequence of time points, each one resulting in a single frame for the sequence

Animation Operation Graphics operations Motion and parameter control since animation models are graphics models extended in time, all the graphics operations we have already covered are applicable here Motion and parameter control since the essential difference between graphics and animation operations is the addition of the temporal dimension, graphics objects become animations through the assignment of complex trajectories or behaviours over time commercial 3D animation systems provide modelling tools and animation tools, the modelling tools produce 3D graphic models and the animation tools add temporal transformations to these objects

Principles of Animation Animation is possible because of a biological phenomenon known as persistence of vision And The psychological phenomenon called phi . An object seen by the human eye remains chemically mapped on the eye’s retina for a brief time after viewing. Combined with the human mind’s need to conceptually complete a perceived action. This makes it possible for a series of images that are changed very slightly and very rapidly, one after the other, seem like continuous motion .

Keyframing is the technique used for pose-to-pose animation Keyframe animation Keyframing is the technique used for pose-to-pose animation Head animator draws key poses—just enough to indicate what the motion is supposed to be Assistants do “in-betweening” and draws the rest of the frames In computer animation substitute “user” and “animation software” Interpolation is the principal operation Forward Inverse Software: Fractal Design’s Poser Sample : robotics

Animation Principles Timing Ease in/Out Moving in arcs Anticipation Follow through Staging Weight

Animation Techniques Computers have taken a great deal of handwork out of the animation and rendering process. And commercial films such as Jurassic Park, Beauty and the Beast, Toy Story, and Shrek have utilized the power of the computers

Motion Capture A method for creating complex motion quickly: measure it from the real world

Types :

2-D Animation 1. Cel animation Made famous by Disney 24 frames per second therefore a minute may require as many as 1,440 separate frames. Cel animation: is based on changes that occur from one frame to the next. Cel stands for celluloid which is a clear sheet with images drawn on them. The celluloid images are place on a background that is usually stationary. The background remain fixed as the images changes.

Path animation Moves an object along a predetermined path on the screen The path can be a straight line or have a number of curves. Starts with keyframes (the first and last frame of an action). The series of frames in between the keyframes are drawn in a process called tweening. Tweening requires calculating the number of frames between keyframes and the path the action takes, and then actually takes, and then sketches a series of progressively different outlines.

3-D Animation 3-D Animation involves three steps: modeling, animation, and rendering Modeling – the process of creating objects and scenes Animation – the process of defining the object’s motion Rendering – the final step in creating 3-D animation. 2 basic forms:

Software (File Format) Director (.dir & .dcr) Animator (Pro .fli) Studio Max (.max) SuperCard and Director (.pics) Windows Audio Video Interleaved (.avi) Macintosh .qt & (.mov) Motion Video (.mpeg) CompuServe (.gif) Flash (.swf) Shockwave (.dcr)