PEMBUATAN ANIMASI CAMPUS PROFILE...

50
PEMBUATAN ANIMASI CAMPUS PROFILE MENGGUNAKAN ADOBE FLASH CS5 BERBASIS MULTIMEDIA INTERAKTIF PADA STMIK U’BUDIYAH INDONESIA SKRIPSI Diajukan untuk melengkapi tugas dan memenuhi syarat-syarat guna memperoleh gelar Sarjana Komputer STMIK U’Budiyah Indonesia Diajukan Oleh : ARIEF MUNANDAR YAD 10111088 PROGRAM STUDI TEKNIK INFORMATIKA SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER STMIK U’BUDIYAH INDONESIA BANDA ACEH 2014

Transcript of PEMBUATAN ANIMASI CAMPUS PROFILE...

Page 1: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

PEMBUATAN ANIMASI CAMPUS PROFILE MENGGUNAKAN

ADOBE FLASH CS5 BERBASIS MULTIMEDIA INTERAKTIF

PADA STMIK U’BUDIYAH INDONESIA

SKRIPSI

Diajukan untuk melengkapi tugas dan memenuhi syarat-syarat

guna memperoleh gelar Sarjana Komputer

STMIK U’Budiyah Indonesia

Diajukan Oleh :

ARIEF MUNANDAR YAD

10111088

PROGRAM STUDI TEKNIK INFORMATIKA

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

STMIK U’BUDIYAH INDONESIA

BANDA ACEH

2014

Page 2: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif
Page 3: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif
Page 4: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif
Page 5: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

iv

KATA PENGANTAR

Puji syukur Alhamdulillah penulis panjatkan kehadirat Allah SWT, yang

telah melimpahkan rahmat dan hidayah-Nya sehingga penulis dapat menyelesaikan

skripsi yang berjudul “Pembuatan Animasi Campus Profile Menggunakan Adobe

Flash CS5 Berbasis Multimedia Interaktif Pada STMIK U’Budiyah Indonesia”.

Tidak lupa pula shalawat beriring salam penulis persembahkan kepada Nabi Besar

Muhammad SAW, yang dengan gigihnya membimbing manusia menuju alam yang

penuh ilmu pengetahuan.

Penyusunan skripsi ini bertujuan untuk melengkapi salah satu syarat dalam

rangka memperoleh gelar Sarjana Komputer pada pendidikan program sarjana

Teknik Informatika STMIK U’Budiyah Indonesia. Selesainya penulisan skripsi ini

berkat ketekunan hati dan motivasi dari diri sendiri, keluarga, teman, serta bimbingan

dari dosen pembimbing.

Dalam kesempatan ini sudah selayaknya penulis mengucapkan terima kasih

yang sebesar-besarnya kepada :

1. Bapak Agus Ariyanto, S.E., M.Si, selaku ketua STMIK U’Budiyah Indonesia.

2. Ibu Fathiah, S.T., M.Eng, selaku ketua Program Studi Teknik Informatika

STMIK U’Budiyah Indonesia dan juga sebagai dosen pembimbing yang telah

bersedia meluangkan waktu, tenaga dan pikiran sehingga berkat bimbingan dan

masukan-masukan yang diberikan, penulis dapat menyelesaikan skripsi ini.

3. Bapak Mardian, ST selaku staf pada STMIK U’Budiyah Indonesia di bidang

Laboratorium Komputer yang telah memberikan data serta motivasi kepada

penulis.

4. Seluruh Dosen dan Staf STMIK U’Budiyah Indonesia yang telah banyak

membimbing dan mendidik penulis selama menjalani masa-masa studi.

5. Teristimewa ayahanda dan ibunda tercinta, terima kasih atas kasih sayang,

perhatian, bantuan moral dan material serta semangat yang diberikan hingga

akhirnya penulis dapat menyelesaikan Skripsi ini. Juga kepada keluarga besar

serta saudara-saudara tersayang, terima kasih atas semangat dan bantuan yang

telah diberikan.

Page 6: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

v

6. Terima kasih juga penulis ucapkan kepada STMIK U’Budiyah Indonesia yang

telah memberikan dukungan sarana dan informasi kepada penulis saat

melakukan penelitian.

7. Para sahabat tercinta dan rekan-rekan mahasiswa/i pada prodi jenjang S1 Teknik

Informatika serta semua pihak yang telah membantu penulis dalam

menyelesaikan penulisan skripsi ini.

Segala usaha telah dilakukan untuk menyempurnakan skripsi ini. Namun,

penulis menyadari bahwa dalam keseluruhan skripsi ini masih banyak kekurangan

dan sangat jauh dari taraf kesempurnaan. Oleh karena itu penulis mengajak para

pembaca untuk memberikan saran dan kritikan yang bersifat membangun demi

mencapai kesempurnaan dalam penulisan skripsi ini, besar harapan penulis semoga

skripsi ini dapat memberikan manfaat kepada para pembaca sekalian.

Banda Aceh, 20 Februari 2014

Penulis

Page 7: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

vii

ABSTRAK

STMIK U’Budiyah Indonesia merupakan salah satu institusi perguruan tinggi yang

ada di Provinsi Aceh, kini telah meningkatkan jumlah dan mutu sarana dan prasarana

pendidikan yang sesuai dengan kebutuhan perkembangan ilmu pengetahuan dan

teknologi. Media informasi yang digunakan dalam mempublikasikan dan

menginformasikan perkembangan kampus STMIK U’Budiyah Indonesia, dewasa ini

hanya menggunakan media brosur, video dan media website. Penggunaan media

tersebut belum sepenuhnya tuntas diinformasikan, seperti informasi tentang fasilitas

sarana dan prasarana kampus, untuk itu penulis membuat sebuah animasi campus

profile yang berbasis multimedia interaktif sebagai media tambahan dan pendukung

dalam mempublikasikan dan menginformasikan profil kampus STMIK U’Budiyah

Indonesia kepada seluruh lapisan masyarakat. Pembuatan animasi ini menggunakan

software Adobe Flash CS5 dan software pendukung lainnya, yaitu Adobe Photoshop

CS5, Wondershare Video Editor, dan Mozilla Firefox. Tampilan rancangan animasi

campus profile terdiri dari slide introduction, slide interface, tombol go to frame,

tombol next dan previous frame, tombol navigasi dan slide ending. Format file yang

dihasilkan dari proses pembuatan animasi ini adalah format file exe dan format file

HTML. Jenis konten yang ditampilkan dalam animasi ini yaitu video, gambar, suara,

dan teks yang menerangkan informasi dari profil kampus STMIK U’Budiyah

Indonesia.

Kata kunci : Animasi Campus Profile, Adobe Flash CS5, Multimedia Interaktif

Page 8: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

viii

ABSTRACT

STMIK U’Budiyah Indonesia is one of the existing higher education institutions in

the province of Aceh, has now increased the number and quality of educational

facilities in accordance with the needs of the development of science and technology.

Media information used in publishing and informing the development of STMIK

U’Budiyah Indonesian campus nowadays only used brochures, video and media

websites. The use of the media has not been fully completed informed, such as

information about campus facilities and infrastructure facilities, to the authors make

an animation campus based interactive multimedia profile as additional media and

supporters to publicize and inform the campus profile STMIK U’Budiyah Indonesia

to the whole society. Making animation using Adobe Flash CS5 software and other

supporting software, namely Adobe Photoshop CS5, Wondershare Video Editor, and

Mozilla Firefox. Display animation campus profile design consists of the slide

introduction, slide interface, buttons go to the frame, the frame next and previous

buttons, navigation buttons and slide ending. Format files generated from the process

of making this animation is exe file format and HTML file formats. The type of

content that is shown in this animation video, picture, sound, and text that describe

the profile information of the campus STMIK U’Budiyah Indonesia.

Keywords : Animation Campus Profile, Adobe Flash CS5, Interactive Multimedia

Page 9: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

ix

DAFTAR ISI

Halaman

HALAMAN JUDUL

LEMBARAN PENGESAHAN .......................................................................... i

LEMBARAN PERSETUJUAN ........................................................................ ii

LEMBARAN PERNYATAAN ......................................................................... iii

KATA PENGANTAR ........................................................................................ v

ABSTRAK .......................................................................................................... vii

DAFTAR ISI ....................................................................................................... ix

DAFTAR GAMBAR .......................................................................................... xi

DAFTAR TABEL .............................................................................................. xii

DAFTAR ISTILAH ........................................................................................... xiii

DAFTAR LAMPIRAN ...................................................................................... xiv

BAB I PENDAHULUAN ................................................................................... 1

1.1 Latar Belakang ................................................................................ 1

1.2 Rumusan Masalah ........................................................................... 3

1.3 Batasan Masalah ............................................................................. 3

1.4 Tujuan Penelitian ............................................................................ 3

1.5 Manfaat Penelitian .......................................................................... 4

1.6 Sistematika Penulisan .................................................................... 4

BAB II TINJAUAN PUSTAKA ........................................................................ 6

2.1 Konsep Dasar Animasi .................................................................... 6

2.2.1 Pengenalan Animasi ............................................................. 6

2.2.2 Jenis - Jenis Animasi ............................................................ 7

2.2.3 Teknik Pembuatan Animasi ................................................. 8

2.2.4 Symbol Movie Clip ............................................................... 9

2.2.5 Symbol Button ...................................................................... 9

2.2.6 ActionsScript ........................................................................ 9

2.2.7 Storyboard ............................................................................ 10

2.2.8 Timeline ................................................................................ 10

2.2 Pengertian Animasi Campus Profile .............................................. 10

2.3 Perangkat Lunak (Software) ........................................................... 11

2.3.1 Adobe Flash CS5 .................................................................. 11

2.3.2 Adobe Photoshop CS5 ......................................................... 12

Page 10: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

x

2.3.3 Wondershare Video Editor .................................................. 12

2.4 Pengertian Multimedia Interaktif ..................................................... 12

2.5 Komponen Multimedia Interaktif .................................................... 13

BAB III METODOLOGI PENELITIAN ........................................................ 15

3.1 Alat dan Bahan Penelitian ................................................................ 15

3.2 Metode Pengumpulan Data ............................................................. 15

3.3 Tempat dan Waktu Penelitian ......................................................... 16

3.4 Jadwal Penelitian ............................................................................. 17

BAB IV HASIL DAN PEMBAHASAN ........................................................... 18

4.1 Rancangan Animasi Campus Profile .............................................. 18

4.1.1 Tampilan Rancangan Slide Introduction .............................. 18

4.1.2 Tampilan Rancangan Slide Interface ................................... 19

4.1.3 Tampilan Rancangan Tombol Go to Frame ........................ 21

4.1.4 Tampilan Rancangan Tombol Next dan Previous Frame .... 22

4.1.5 Tampilan Rancangan Tombol Navigasi Suara ..................... 22

4.1.6 Tampilan Rancangan Slide Ending ...................................... 23

4.2 Tampilan Hasil Rancangan Animasi Campus Profile .................... 24

4.2.1 Tampilan Slide Introduction ................................................ 25

4.2.2 Tampilan Slide Interface ...................................................... 26

4.2.3 Tampilan Tombol Go to Frame ........................................... 27

4.2.4 Tampilan Tombol Next dan Previous Frame ....................... 28

4.2.5 Tampilan Tombol Navigasi Suara ....................................... 28

4.2.6 Tampilan Slide Ending ......................................................... 29

4.3 Storyboard Animasi Campus Profile ............................................... 30

4.4 Timeline Animasi Campus Profile .................................................. 32

4.5 Jenis Format File Animasi Campus Profile .................................... 33

4.5.1 Format File Exe .................................................................... 33

4.5.2 Format File HTML .............................................................. 34

BAB V PENUTUP ............................................................................................... 35

5.1 Kesimpulan ..................................................................................... 35

5.2 Saran ............................................................................................... 35

DATAR PUSTAKA ........................................................................................... 36

LAMPIRAN

Page 11: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

xi

DAFTAR GAMBAR

Halaman [

Gambar 4.1 Tampilan Rancangan Slide Introduction .......................................... 18

Gambar 4.2 Tampilan Rancangan Slide Interface ............................................... 19

Gambar 4.3 Tampilan Rancangan Tombol Go to Frame .................................... 21

Gambar 4.4 Rancangan Tombol Next dan Previous Frame ................................ 22

Gambar 4.5 Tampilan Rancangan Tombol Navigasi Suara ................................. 23

Gambar 4.6 Tampilan Rancangan Slide Ending .................................................. 24

Gambar 4.7 Tampilan Logo STMIK Pada Slide Introduction ............................. 25

Gambar 4.8 Tampilan STMIK U’Budiyah Pada Slide Introduction .................... 25

Gambar 4.9 Tampilan Slide Interface .................................................................. 26

Gambar 4.10 Tampilan Tombol Go to Frame ..................................................... 27

Gambar 4.11 Tampilan Tombol Next dan Previous Frame ................................. 28

Gambar 4.12 Tampilan Tombol Navigasi Suara .................................................. 28

Gambar 4.13 Tampilan Slide Ending ................................................................... 29

Gambar 4.14 Timeline Animasi Campus Profile ................................................. 32

Gambar 4.15 Format File Exe ............................................................................... 33

Gambar 4.16 Format File HTML ........................................................................ 34

Page 12: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

xii

DAFTAR TEBEL

Halaman

Tabel 3.1 Jadwal Penelitian .................................................................................. 17

Tabel 4.1 Storyboard Animasi Campus Profile ................................................... 31

Page 13: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

xiii

DAFTAR ISTILAH

Stage adalah lembar kerja yang digunakan untuk menyusun objek atau gerakan

animasi.

Timeline adalah sebuah panel yang menampilkan Layer dan Frame.

Layer adalah sebuah nama tempat yang digunakan untuk menampung satu gerakan

objek, sehingga jika ingin membuat gerakan lebih dari satu objek sebaiknya

diletakkan pada layer yang berbeda.

Frame adalah bagian dari layer yang digunakan untuk mengatur pembuatan animasi.

Keyframe adalah suatu tanda berbentuk lingkaran kecil yang digunakan untuk

membatasi suatu gerakan animasi.

Action Script adalah suatu perintah yang diletakkan pada suatu keyframe atau objek

sehingga frame atau objek tersebut akan menjadi interaktif.

Movie Clip adalah suatu animasi yang dapat digabungkan dengan animasi atau objek

yang lain.

Masking adalah perintah yang digunakan untuk menghilangkan isi dari suatu layer

dan isi layer tersebut akan tampak saat animasi dijalankan.

Page 14: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

xiv

DAFTAR LAMPIRAN

Lampiran Halaman

1. Surat Izin Pengambilan Data Awal .................................................................... 37

2. Surat Keterangan Selesai Penelitian .................................................................. 38

3. Lembar Konsultasi Bimbingan .......................................................................... 39

4. Bukti Bebas Akademik Seminar ....................................................................... 40

5. Bukti Bebas Akademik Sidang Skripsi .............................................................. 41

6. Hasil Wawancara Saat Penelitian ...................................................................... 42

7. Hasil Observasi Saat Penelitian .......................................................................... 43

8. Biodata Penulis .................................................................................................. 47

Page 15: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

1

BAB I

PENDAHULUAN

1.1 Latar Belakang

STMIK U’Budiyah Indonesia merupakan salah satu institusi perguruan tinggi

yang ada di Provinsi Aceh, terdiri dari berbagai program studi yang tunduk di bawah

civitas akademikanya, diantaranya adalah program studi Teknik Informatika (S-1),

Sistem Informasi (S-1), Manajemen Informatika (D-III) dan Komputerisasi

Akuntansi (D-III). Sekolah Tinggi Manajemen Informatika dan Komputer (STMIK)

U’Budiyah Indonesia, Banda Aceh adalah institusi pendidikan resmi yang telah

mendapat izin dari Menteri Pendidikan Nasional Republik Indonesia berdasarkan

SK. No.25/D/O/2007.

Seiring dengan berkembangnya kampus STMIK U’Budiyah Indonesia

sebagai salah satu perguruan tinggi yang menghasilkan sumber daya manusia di

bidang Informatika dan Komputer, kini telah meningkatkan jumlah dan mutu sarana

dan prasarana pendidikan yang sesuai dengan kebutuhan perkembangan ilmu

pengetahuan dan teknologi. Berbagai fasilitas sarana dan prasarana yang mendukung

untuk terlaksananya proses pembelajaran yang baik, terpadu, terarah dan berkualitas

kini terus dilakukan dalam menunjang kebutuhan perkembangan dan kemajuan di

bidang ilmu pengetahuan dan teknologi, khususnya di bidang Informatika dan

Komputer.

Perkembangan kemajuan yang telah dilakukan oleh kampus STMIK

U’Budiyah Indonesia dapat menjadi informasi yang berguna bagi seluruh lapisan

masyarakat, khususnya masyarakat Aceh dalam memilih perguruan tinggi yang ada

di Provinsi Aceh. Media informasi yang disajikan dalam mempromosikan dan

menginformasikan perkembangan kampus STMIK U’Budiyah Indonesia, dewasa ini

hanya menggunakan media brosur, video dan media website. Penggunaan media

informasi tersebut dalam mempromosikan dan menginformasikan perkembangan

kampus STMIK U’Budiyah Indonesia, khususnya mengenai fasilitas sarana dan

prasarana kampus belum sepenuhnya tuntas diinformasikan, seperti informasi

tentang perkembangan fasilitas dan sarana lingkungan kampus, bangunan gedung

serta prasarana yang ada di kampus STMIK U’Budiyah Indonesia.

Page 16: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

2

Sebagai media tambahan dan pendukung dalam mempublikasikan dan

menginformasikan perkembangan kampus STMIK U’Budiyah Indonesia kepada

seluruh lapisan masyarakat, maka diperlukannya media animasi campus profile

sebagai layanan dalam mempublikasikan informasi kepada seluruh lapisan

masyarakat mengenai perkembangan fasilitas sarana dan prasarana kampus. Proses

pembuatan animasi campus profile ini dilakukan dengan menggunakan Adobe Flash

CS5, yaitu sebuah progam perangkat lunak komputer yang didesain khusus oleh

Adobe dan program aplikasi standar authoring tool professional yang digunakan

dalam membuat animasi dan bitmap yang sangat menarik untuk berbagai keperluan

serta mendukung dalam pembuatan animasi campus profile yang berbasis

multimedia interaktif.

Animasi campus profile yang berbasis multimedia interaktif merupakan

sebuah media penyampaian informasi secara visual dengan animasi yang menarik

sehingga menambah daya tarik bagi seluruh masyarakat untuk mempelajari tentang

pengenalan dari profil kampus STMIK U’Budiyah Indonesia. Pembuatan animasi

campus profile ini dapat menjadi sebuah solusi untuk mengenalkan kepada dunia

luar mengenai gambaran umum profil kampus STMIK U’Budiyah Indonesia,

khususnya tentang pelayanan dan fasilitas sarana dan prasarana pendidikan yang

diberikan.

Dengan memanfaatkan teknologi media animasi komputer, yaitu animasi

campus profile yang berbasis multimedia interaktif, diharapkan dapat menjadi media

informasi unggulan dan dapat memudahkan masyarakat dalam memperoleh berbagai

informasi perkembangan fasilitas sarana dan prasarana yang paling urgensi yang

ada di lingkungan kampus STMIK U’Budiyah Indonesia, sehingga dengan demikian

dapat meningkatkan daya saing dan memberikan arti penting dalam proses

penyaluran informasi tentang gambaran umum profil kampus STMIK U’budiyah

Indonesia.

Berdasarkan latar belakang yang telah diuraikan di atas, maka penulis

mengangkat judul dalam skripsi ini yaitu “Pembuatan Animasi Campus Profile

Menggunakan Adobe Flash CS5 Berbasis Multimedia Interaktif Pada STMIK

U’Budiyah Indonesia”.

Page 17: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

3

1.2 Rumusan Masalah

Berdasarkan latar belakang permasalahan yang telah diuraikan diatas, maka

yang menjadi rumusan masalah dalam penelitian ini adalah sebagai berikut :

1. Bagaimana proses pembuatan animasi Campus Profile dengan menggunakan

Adobe Flash CS5 yang berbasis multimedia interaktif pada STMIK U’Budiyah

Indonesia.

2. Bagaimana proses dalam mengintegrasi animasi Campus Profile yang telah di

buat ke web induk STMIK U’Budiyah Indonesia.

1.3 Batasan Masalah

Agar penelitian dalam tugas akhir ini lebih terarah dan memudahkan dalam

pembahasan, maka penulis membatasi masalah hanya pada :

1. Pembuatan animasi Campus Profile menggunakan Adobe Flash CS5.

2. Format file animasi Campus Profile yang akan di buat dalam mempublikasikan

profil STMIK U’Budiyah Indonesia berjenis file exe dan HTML.

1.4 Tujuan Penelitian

Adapun tujuan dari penelitian ini adalah sebagai berikut :

1. Membuat suatu tampilan animasi interaktif yang bertemakan tentang Campus

Profile atau profil kampus STMIK U’Budiyah Indonesia yang dapat digunakan

sebagai media promosi kepada seluruh lapisan masyarakat, khususnya

masyarakat di Provinsi Aceh.

2. Mempublikasikan dan menginformasikan tentang gambaran umum profil

kampus STMIK U’Budiyah Indonesia, khususnya dalam perkembangan

kemajuan fasilitas dan sarana kampus, bangunan gedung serta prasarana yang

ada di lingkungan STMIK U’Budiyah Indonesia.

3. Memudahkan masyarakat dalam mengetahui dan memperoleh informasi tentang

perkembangan dan peningkatan mutu media pembelajaran yang baik, terpadu,

terarah dan berkualitas dalam menunjang kebutuhan perkembangan dan

kemajuan di bidang ilmu pengetahuan dan teknologi, khususnya di bidang

Informatika dan Komputer.

Page 18: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

4

1.5 Manfaat Penelitian

Adapun manfaat dari penelitian ini adalah sebagai berikut :

1. Dapat menjadi media informasi unggulan dalam mempublikasikan informasi

tentang perkembangan dan kemajuan fasilitas sarana dan prasarana yang paling

urgensi yang ada dilingkungan kampus STMIK U’Budiyah Indonesia kepada

seluruh lapisan masyarakat, khususnya masyarakat di Provinsi Aceh.

2. Dapat meningkatkan daya saing dan memberikan arti penting dalam proses

penyaluran informasi kepada masyarakat tentang gambaran umum profil STMIK

U’budiyah Indonesia.

3. Menambah daya tarik pembaca terhadap informasi dari gambaran umum tentang

profil kampus STMIK U’budiyah Indonesia yang di kemas dalam bentuk media

animasi Campus Profile yang berbasis multimedia interaktif dengan berbagai

format file, yaitu : exe dan HTML.

1.6 Sistematika Penulisan

Dalam penyusunan tugas akhir ini terdiri dari beberapa bab, masing-masing

bab berisi uraian singkat yang menjelaskan proses dalam pembuatan animasi

Campus Profile. Hal ini bertujuan agar pembahasan lebih sistematis dan spesifik

sesuai dengan topik permasalahan. Sistematika penulisan dalam penyusunan tugas

akhir ini terdiri dari 5 bab yaitu :

BAB I PENDAHULUAN

Pada bab ini menjelaskan tentang latar belakang penelitian, rumusan

masalah, batasan masalah, tujuan penelitian, manfaat penelitian dan

sistematika penulisan.

BAB II TINJAUAN PUSTAKA

Pada bab ini menjelaskan secara singkat mengenai landasan teori dasar

yang berkaitan dalam proses pembuatan tampilan animasi Campus Profile

dengan menggunakan Adobe Flash CS5 yang berbasis multimedia

interaktif.

Page 19: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

5

BAB III METODOLOGI PENELITIAN

Pada bab ini menjelaskan tentang lokasi penelitian, metodologi yang

dipakai dalam penelitian pembuatan animasi Campus Profile yaitu alat

penelitian, bahan penelitian dan jadwal penelitian.

BAB IV HASIL DAN PEMBAHASAN

Pada bab ini berisi tentang pembahasan mengenai proses pembuatan

animasi Campus Profile yang dibuat dengan menggunakan Adobe Flash

CS5 yang berbasis multimedia interaktif.

BAB V PENUTUP

Pada bab ini penulis mengungkapkan kesimpulan yang di ambil dari hasil

pembuatan animasi Campus Profile yang berbasis multimedia interaktif

dan saran dari penulis untuk pengembangan selanjutnya.

Page 20: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

6

BAB II

TINJAUAN PUSTAKA

2.1 Konsep Dasar Animasi

2.2.1 Pengenalan Animasi

Animasi berasal dari bahasa yunani “anima” yang berati hidup, makna

harafiah dari animasi adalah memberikan kehidupan atau sifat mahluk hidup pada

benda mati. Kata “animasi” juga merupakan penyesuaian dari kata “animation”,

yang berasal dari kata dasar “animate” yang dalam kamus umum inggris-indonesia

berarti menghidupkan (Wojowasito, 1997). Animasi merupakan suatu seni untuk

membuat dan menggerakkan sebuah obyek agar terlihat dan tampak lebih dinamis,

baik berbentuk dua dimensi maupun tiga dimensi. Animasi adalah rangkaian

sejumlah gambar yang ditampilkan secara bergantian dan berurutan. Setiap gambar

yang bergerak dikenal dengan frame, satu frame terdiri dari satu gambar. Jika

susunan gambar tersebut ditampilkan secara bergantian dengan waktu tertentu maka

akan terlihat bergerak, satuan yang dipakai adalah frame per second (fps).

Secara umum, animasi merupakan suatu kegiatan menghidupkan atau

menggerakkan benda mati. Sebuah benda mati diberikan dorongan kekuatan,

semangat, dan emosi untuk menjadi hidup dan bergerak atau hanya berkesan hidup.

Animasi adalah sebuah proses merekam dan memainkan kembali serangkaian

gambar statis untuk mendapatkan sebuah ilusi pergerakan.” Berdasarkan arti harfiah,

Animasi adalah menghidupkan, yaitu usaha untuk menggerakkan sesuatu yang tidak

bisa bergerak sendiri (Ibiz Fernandez, 2002).

Pada perkembanganya animasi berarti suatu sequence atau rangkaian

gambar yang di ekspos pada tenggang waktu tertentu yang menunjukkan perubahan

pada posisi dari subjek yang ditunjukkan dengan rangkaian gambar bergerak,

sehingga memberikan sebuah ilusi pergerakan. Di era modern animasi semakin

berkembang, animasi sebenarnya tidak akan terwujud tanpa didasari pemahaman

mengenai prinsip fundamental kerja mata manusia atau dikenal dengan nama the

persistance of vision. Seperti yang ditunjukan pada karya seorang Paul Roget

penemu Thaumatrope. Sebuah alat berbentuk kepingan yang dikaitkan dengan tali

pegas diantara kedua sisinya. Kepingan itu memiliki dua gambar pada sisinya, satu

Page 21: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

7

sisi bergambar burung dan satu sisi lainnya bergambar sangkar burung. Ketika

kepingan berputar maka burung seolah masuk kedalam sangkarnya. Proses ini

ditangkap oleh mata manusia dalam satu waktu, sehingga beranggapan bahwa

gambar tersebut bergerak.

Animasi memiliki berbagai kelebihan, diantaranya adalah dapat menampilkan

produk atau pesan informasi dengan desain yang bervariasi dan interaktif, sehingga

dengan kelebihan tersebut animasi sangat digemari oleh para Animator dunia.

Animasi yang sering dibuat dan digunakan dalam berbagai kebutuhan, diantaranya

adalah animasi kartun, animasi interaktif, animasi game, animasi company profile,

presentasi, animasi video clip, animasi web dan animasi-animasi lainnya. Pembuatan

animasi yang sangat banyak dimanfaatkan dalam berbagai penunjang aktivitas

pekerjaan dan kebutuhan diantaranya adalah animasi untuk media periklanan, media

hiburan, media pendidikan, dan lain sebagainya.

Dalam dunia periklanan, animasi sangat dibutuhkan dan digunakan dalam

mempromosikan dan mempublikasikan suatu pesan informasi penting kepada

seluruh masyarakat. Informasi yang disajikan dapat berupa animasi company profile

atau campus profile yang bertujuan untuk memberikan pemahaman tentang

gambaran umum profil suatu perusahaan, instansi dan perguruan tinggi. Informasi-

informasi yang disajikan dalam bentuk animasi dapat memudahkan masyarakat

dalam memahami dan mengetahui perkembangan suatu perguruan tinggi, sehingga

dapat meningkatkan daya jual dan daya saing yang tinggi terhadap perkembangan

dan kemajuan teknologi informasi.

2.2.2 Jenis - Jenis Animasi

Dalam keadaan standar animasi terbagi menjadi tiga bagian yaitu animasi

gerak, animasi skala dan animasi putar. Animasi gerak adalah animasi yang

menggerakkan objek dari satu posisi ke posisi lainnya. Animasi skala adalah animasi

yang menunjukkan perubahan ukuran atau skala sebuah objek. Animasi putar atau

rotasi adalah animasi dimana sebuah objek mempunyai gerakan berputar pada titik

poros yang ditentukan. Ketiga animasi dasar tersebut bisa berdiri sendiri atau

digabungkan sehingga menjadi animasi yang menarik dan indah. Selain ketiga

animasi tersebut juga ada animasi Alpha dan animasi Masking sebagai perintah

Page 22: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

8

dalam menggerakkan objek animasi. Animasi Alpha adalah animasi yang mengatur

transparansi warna objek, dari nampak menjadi tidak nampak atau sebaliknya.

Sedangkan animasi Masking adalah animasi yang menampilkan bidang yang tertutup

dan menyembunyikan bidang yang terbuka (Devisi Penelitian dan Pengembangan

MADCOMS, 2012).

2.2.3 Teknik Pembuatan Animasi

Ada tiga teknik dasar dalam pembuatan animasi yaitu animasi Frame by

Frame, animasi Tween dan animasi Bone. Berikut pengertian masing-masing teknik

dasar dalam pembuatan animasi.

1. Animasi Frame by Frame

Animasi frame by frame adalah animasi yang berubah berdasarkan frame per

frame, mulai dari perubahan gerak, bentuk, posisi atau warna objek. Semakin

banyak frame yang digunakan untuk menampung setiap detil gerakan objek,

maka akan semakin halus animasi yang dihasilkan.

2. Animasi Tween

Animasi tween merupakan animasi yang efektif untuk membuat suatu gerakan

dengan ukuran file yang lebih kecil. Dalam animasi tween terdapat tiga jenis

animasi yang dapat digunakan dalam membuat animasi yaitu : Motion Tween,

Shape Tween, dan Classic Tween. Animasi Motion Tween biasanya digunakan

untuk membuat animasi objek bergerak, berputar dan perubahan skala objek dua

dimensi dan tiga dimensi. Motion Tween dapat diterapkan pada objek instance

atau simbol, grup dan teks. Animasi Shape Tween merupakan animasi perubahan

bentuk objek, misalnya dari bentuk oval berubah menjadi bentuk kotak, bentuk

kotak berubah menjadi bintang dan lain-lain. Classic Tween sama dengan

Motion Tween tetapi hanya untuk gerakan dua dimensi.

3. Animasi Bone

Animasi bone merupakan animasi dengan mengadopsi dari struktur persendian

tulang. Perintah Bone Tool digunakan untuk membuat animasi dengan gerakan

yang mengacu pada titik persendian. Semakin banyak persendian yang dibuat

menggunakan Bone Tool, maka gerakan animasi akan semakin halus dan

menarik.

Page 23: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

9

2.2.4 Symbol Movie Clip

Symbol movie clip adalah sebuah simbol yang berisi objek gambar, teks, sound,

tombol dan Movie clip yang tersimpan dengan nama tertentu di dalam panel library.

Sebuah simbol movie clip dapat digunakan berkali-kali dan tidak akan memperbesar

ukuran file, karena simbol hanya disimpan sekali walaupun digunakan berulang kali.

2.2.5 Symbol Button

Symbol button adalah sebuah tombol yang dapat digunakan untuk membuat

animasi interaktif. Dengan menambahkan perintah action script pada tombol, maka

sebuah tombol akan berfungsi sebagai navigasi antara animasi dan user. Dalam

sebuah tombol terdapat empat perintah yaitu sebagai berikut.

1. Up, berguna untuk mengatur tampilan tombol saat tidak disentuh oleh pointer

mouse.

2. Over, berguna untuk mengatur tampilan saat pointer mouse berada diatas tombol

3. Down, berguna untuk mengatur tampilan saat tombol di-klik dengan mouse.

4. Hit, berguna untuk mengatur area klik pada tombol.

2.2.6 ActionScript

ActionScript adalah suatu perintah yang terdapat dalam program Adobe Flash.

Perintah ActionScript biasanya digunakan untuk membuat animasi yang komplek dan

interaktif dengan penggunanya. Berikut adalah beberapa perintah penggunaan

ActionScript.

1. Perintah GotoAndStop dan GotoAndPlay

Perintah GotoAndStop dapat digunakan untuk menuju ke sebuah keyframe dan

animasi tersebut langsung berhenti, sedangkan GotoAndPlay adalah perintah

yang digunakan untuk menuju ke sebuah keyframe dan animasi tersebut

memainkan dan melanjutkan kembali gerakan animasinya.

2. Perintah NextFrame dan PrevFrame

Perintah NextFrame dapat digunakan untuk menuju ke frame berikutnya,

sedangkan PrevFrame adalah perintah yang digunakan untuk menuju ke frame

sebelumnya.

Page 24: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

10

2.2.7 Storyboard

Storyboard secara sederhana dapat diartikan sebagai uraian yang berisi

penjelasan visual dan audio dari masing-masing alur dalam skenario yang dirinci

untuk setiap frame/slide. Pada umumnya storyboard berupa tabel (baris-kolom),

setiap kolom di dalamnya mewakili satu tampilan di layar monitor. Storyboard

merupakan bagian dari program yang berhubungan langsung dengan pengguna yaitu

segala sesuatu yang tampil dilayar monitor. Storyboard bertujuan agar perancang

dapat dengan mudah menentukan letak elemen-elemen yang akan menyusun sebuah

rancangan program animasi yang kemudian akan di sketsa dalam sebuah storyboard.

Storyboard adalah rancangan awal dari suatu program animasi tersebut berjalan.

2.2.8 Timeline

Timeline merupakan bagian dari program Adobe Flash yang berfungsi sebagai

pengatur urutan tampilan yang berdasarkan layer dan frame. Timeline dapat

digunakan untuk menentukan durasi animasi, jumlah layer, frame, menempatkan

action script dan beberapa keperluan animasi lainnya. Semua bentuk animasi yang

dibuat akan diatur dan ditempatkan pada layer dalam timeline. Timeline dapat

mengatur dan menggabungkan animasi berbagai teks atau gambar. Timeline berisi

layer dan frame yang berfungsi untuk mengontrol objek yang akan dianimasikan.

2.2 Pengertian Animasi Campus Profile

Campus profile merupakan penjelasan mengenai informasi dan latar belakang

dari suatu universitas atau perguruan tinggi untuk diketahui oleh masyarakat luas.

Sebuah perguruan tinggi yang maju dan berkembang selalu di dukung dengan

mengikuti perkembangan teknologi yang semakin canggih. Setiap universitas dalam

suatu perguruan tinggi yang ingin maju dan dapat terus bersaing dalam era

globalisasi harus mengikuti perkembangan teknologi dan memanfaatkan semua

teknologi dengan sebaik-baiknya. Salah satunya adalah pembuatan profil kampus

(campus profile) yang berbasiskan animasi multimedia interaktif.

Animasi campus profile merupakan rangkaian seluruh informasi dan

gambaran umum mengenai profil kampus yang disajikan dalam bentuk media

Page 25: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

11

animasi. Animasi campus profile mendukung dan memberikan kemudahan dalam

menyampaikan pesan serta informasi kepada masyarakat luas mengenai latar

belakang, visi dan misi, dasar hukum, tujuan pendirian, kedudukan, tugas, fungsi dan

struktur organisasi serta sarana dan prasarana yang tersedia di lingkungan kampus

tersebut. Profil kampus (campus profile) yang disajikan dalam bentuk media animasi

komputer berbasis multimedia interaktif yang didesain dengan tampilan yang

menarik dan sistematis dapat meningkatkan daya tarik pembaca dalam

mempublikasikan dan mempromosikan serta menginformasikan perkembangan dan

kemajuan kampus kepada seluruh lapisan masyarakat.

2.3 Perangkat Lunak (Software)

2.3.1 Adobe Flash CS5

Adobe Flash CS5 adalah salah satu perangkat lunak komputer yang

merupakan produk unggulan Adobe Systems. Adobe Flash CS5 merupakan aplikasi

yang digunakan untuk melakukan desain dan membangun perangkat presentasi,

publikasi, atau aplikasi lainnya yang membutuhkan ketersediaan sarana interaksi

dengan penggunanya. Proyek yang dibangun dengan Flash terdiri atas teks, gambar,

animasi, sound, video serta efek-efek khusus lainnya. Adobe Flash CS5 sering

digunakan untuk membuat gambar vektor yang didesain khusus untuk pembuatan

animasi. Berkas yang dihasilkan dari hasil pembuatan animasi dengan menggunakan

Adobe Flash CS5 mempunyai file extension .swf dan dapat diputar di penjelajah web

yang telah dipasangi Adobe Flash Player.

Adobe Flash CS5 merupakan aplikasi interaktif dengan berbagai kelebihan.

Adobe Flash CS5 di desain dengan kemampuan untuk membuat animasi dua dimensi

berbasis vektor yang canggih dan paling populer, sehingga flash banyak digunakan

oleh para Animator dunia untuk membuat suatu tampilan animasi interaktif.

Beberapa faktor yang mendukung kepopuleran Flash sebagai suatu aplikasi untuk

keperluan desain dan pembuatan animasi antara lain adalah memiliki format grafis

berbasis vektor, kapasitas file hasil yang kecil, memiliki kemampuan tinggi dalam

mengatur interaktivitas program, memiliki kelengkapan fasilitas dalam melakukan

desain dan lain sebagainya.

Page 26: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

12

2.3.2 Adobe Photoshop CS5

Adobe Photoshop CS5 adalah salah satu perangkat lunak komputer yang

merupakan produk unggulan Adobe Systems yang dikhususkan untuk pengeditan foto

atau gambar dan pembuatan efek. Hingga saat ini Photoshop masih merupakan

software pengolah foto digital yang paling populer. Kelengkapan fasilitas dan

kemampuannya yang luar biasa dalam mengolah dan memanipulasi objek foto,

menjadikan software ini banyak dipakai oleh para digital artist, karena terbukti

keberadaannya dapat membantu dan memudahkan pemakai dalam menyelesaikan

berbagai jenis pekerjaan olah digital (digital imaging) (Devisi Penelitian dan

Pengembangan MADCOMS, 2010).

2.3.3 Wondershare Video Editor

Wondershare video editor merupakan software pengolah video yang sangat

populer dan sudah diakui kecanggihannya. Kelengkapan fasilitas dan kemampuannya

yang luar biasa dalam mengolah dan mengkomposisikan video menjadikan software

ini banyak dipakai oleh para editor, designer, dan animator karena keberadaannya

dapat membantu dan memudahkan pemakai dalam mengedit video.

2.4 Pengertian Multimedia Interaktif

Multimedia terdiri dari 2 (dua) kata, yaitu multi dan media. Multi memiliki

arti banyak atau lebih dari satu, sedangkan media berarti tempat, sarana atau alat

yang digunakan untuk menyimpan informasi. Multimedia dapat diartikan sebagai

penggunaan beberapa media yang berbeda untuk menggabungkan dan

menyampaikan informasi dalam bentuk teks, grafik, audio, video dan animasi.

Multimedia secara umum merupakan kombinasi tiga elemen yaitu suara, gambar dan

teks. Multimedia adalah kombinasi dari paling sedikit dua media input atau output

dari data, media ini dapat berupa audio (suara, musik), animasi, video, teks, grafik

dan gambar (Turban dkk, 2002).

Definisi yang dikemukakan oleh Hofstetter (2001) Multimedia adalah

pemanfaatan komputer untuk membuat dan menggabungkan teks, grafik, audio,

gambar bergerak (video dan animasi) dengan menggabungkan link dan tool yang

memungkinkan pemakai melakukan navigasi berinteraksi, berkreasi dan

Page 27: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

13

berkomunikasi. Multimedia dapat diasumsikan sebagai wadah atau penyatuan

beberapa media yang kemudian didefinisikan sebagai elemen-elemen pembentukan

multimedia. Elemen-elemen tersebut berupa teks, gambar, suara, animasi, dan video

(McCormick, 1996). Multimedia merupakan suatu konsep dan teknologi baru bidang

teknologi informasi, dimana informasi dalam bentuk teks, gambar, suara, animasi,

dan video disatukan dalam komputer untuk disimpan, diproses, dan disajikan baik

secara linear maupun interaktif (Sutopo, 2003).

Multimedia dapat dikategorikan menjadi 2 macam, yaitu multimedia linier

dan multimedia interaktif. Multimedia linier adalah suatu multimedia yang tidak

dilengkapi dengan alat pengontrol apapun yang dapat dioperasikan oleh pengguna.

Multimedia ini berjalan sekuensial (berurutan atau lurus), contohnya adalah Televisi

dan film. Sedangkan multimedia interaktif adalah suatu multimedia yang dilengkapi

dengan alat pengontrol (atau alat bantu berupa komputer, mouse, keyboard dan lain-

lain) yang dapat dioperasikan oleh pengguna, sehingga pengguna dapat memilih apa

yang diinginkan untuk proses selanjutnya. Contohnya seperti aplikasi game.

Multimedia interaktif menggabungkan semua media yang terdiri dari teks, gambar,

audio, video dan animasi ke dalam tampilan yang lebih menarik dan sistematis

(Suyanto, 2003).

2.5 Komponen Multimedia Interaktif

Komponen multimedia interaktif terdiri dari teks, gambar, suara, animasi,

dan video. Berikut pengertian masing-masing komponen tersebut.

1. Teks

Bentuk data multimedia yang paling mudah disimpan dan dikendalikan adalah

teks. Teks berfungsi sebagai narasi yang menjelaskan tentang isi aplikasi. Teks

juga merupakan dasar dari pengolahan kata dan informasi yang berbasis

multimedia.

2. Gambar

Gambar dapat meringkas dan menyajikan data kompleks dengan cara yang baru

dan lebih berguna, sehingga gambar atau grafik merupakan bagian yang penting

dalam multimedia. Pada umumnya sebuah format gambar dapat dipresentasikan

ke dalam dua tipe yaitu bitmap dan vektor.

Page 28: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

14

3. Suara

Suara merupakan unsur yang sangat penting dalam sebuah informasi. Suara

adalah satu-satunya media yang unik dibandingkan dengan media yang lain yang

menjadi komponen multimedia. Komponen suara memberikan informasi dan

memanjakan pengguna dengan menggunakan indera pendengaran. Dalam

multimedia suara diubah dalam bentuk digital.

4. Animasi

Animasi merupakan kumpulan gambar yang ditampilkan secara bergantian

sehingga akan terlihat bergerak. Animasi dibuat khusus untuk mendukung

konsep ilustrasi yang mengharuskan adegan gambar yang bergerak. Proses

animasi adalah menampilkan gambar demi gambar dalam satuan waktu.

5. Video

Video yang dimaksud adalah video yang menampilkan gambar hidup yang biasa

terlihat ditelevisi. Gambar hidup yang direkam dalam bentuk video dapat

ditambahkan kedalam suatu aplikasi multimedia sehingga dapat menampilkan

suatu informasi yang lebih aktual dan menarik.

Page 29: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

15

BAB III

METODOLOGI PENELITIAN

3.1 Alat dan Bahan Penelitian

Dalam mengamati dan meneliti tentang pembuatan animasi campus profile

yang berbasis multimedia interaktif pada STMIK U’Budiyah Indonesia, maka

dibutuhkan perangkat keras (hardware) dan perangkat lunak (software) sebagai

sarana dalam pembuatan animasi tersebut. Untuk kebutuhan perangkat keras

(hardware) dan perangkat lunak (software) yang digunakan dalam meneliti dan

mengamati tentang pembuatan animasi campus profile yang berbasis multimedia

interaktif adalah sebagai berikut :

1. Perangkat Keras (Hardware)

a. Laptop Axioo Intel Core i7

b. Memory 4 GB DDR3

c. Harddisk 750 GB

d. Camera Digital Sony Cyber-shot

e. Printer Canon PIXMA

2. Perangkat Lunak (Software)

a. Microsoft Windows 7

b. Adobe Flash CS5

c. Adobe Photoshop CS5

d. Wondershare Video Editor

e. Mozilla Firefox

f. Canon PIXMA Utilities

3.2 Metode Pengumpulan Data

Untuk melengkapi data-data perancangan dan pembuatan animasi campus

profile dengan menggunakan Adobe Flash CS5 yang berbasis multimedia interaktif

pada STMIK U’Budiyah Indonesia, maka metode pengumpulan data yang dilakukan

adalah melalui penelitian lapangan dan penelitian kepustakaan, dapat dijelaskan

sebagai berikut :

Page 30: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

16

1. Penelitian Lapangan (Field Research)

Merupakan teknik pengumpulan data dengan mengamati secara langsung sumber

atau objek yang akan diteliti, yaitu dengan mengadakan peninjauan secara

langsung ke STMIK U’Budiyah Indonesia. Hasil dari penelitian lapangan

merupakan data primer. Penelitian ini dapat menggunakan metode pengumpulan

data berupa :

a. Wawancara

Metode wawancara ini dilakukan untuk mendapatkan data-data dan informasi

yang dibutuhkan dalam pembuatan animasi campus profile yang berbasis

multimedia interaktif dengan cara tanya jawab langsung dengan nara sumber,

yaitu staf pada STMIK U’Budiyah Indonesia di bidang Laboratorium

Komputer. Hasil dari wawancara ini dapat dilihat di daftar lampiran.

b. Observasi

Suatu pengamatan yang dilakukan untuk mengumpulkan data dan informasi

dengan cara meninjau dan mendatangi langsung objek yang akan diteliti serta

melakukan pengambilan gambar terhadap semua objek data yang dibutuhkan

sebagai fakta pendukung dalam proses pembuatan animasi campus profile yang

berbasis multimedia interaktif.

2. Penelitian Kepustakaan (Library Research)

Merupakan teknik pengumpulan data yang diperoleh dengan mengadakan

penelitian kepustakaan, yaitu dengan cara membaca, mempelajari literatur-

literatur, dan buku referensi-referensi yang tersedia yang berhubungan dengan

masalah yang diteliti. Hasil dari penelitian kepustakaan merupakan data sekunder.

3.3 Tempat dan Waktu Penelitian

Lokasi penelitian pembuatan animasi campus profile yang berbasis

multimedia interaktif pada STMIK U’Budiyah Indonesia beralamat di Jalan Alue

Naga Desa Tibang Kecamatan Syiah Kuala Banda Aceh. Penelitian dan pembuatan

animasi ini dilaksanakan selama satu bulan, terhitung sejak awal Januari sampai

dengan akhir Januari 2014.

Page 31: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

17

3.4 Jadwal Penelitian

Adapun jadwal penelitian dalam proses pembuatan animasi campus profile

dengan menggunakan Adobe Flash CS5 yang berbasis multimedia interaktif pada

STMIK U’Budiyah Indonesia adalah sebagai berikut :

N

O Kegiatan

2013 2014

Oktober November Desember Januari Februari

1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4

1 Studi

Literatur

2 Analisa Data

3 Pengumpulan

Data

4 Perancangan

Animasi

5 Pembuatan

Animasi

6 Penulisan

Laporan

Tabel 3.1 Jadwal Penelitian

Page 32: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

18

BAB IV

HASIL DAN PEMBAHASAN

4.1 Rancangan Animasi Campus Profile

4.1.1 Tampilan Rancangan Slide Introduction

Tampilan rancangan slide introduction merupakan tahapan rancangan awal

dari proses pembuatan animasi yang dilakukan. Tampilan slide introduction adalah

tampilan pergerakan animasi pembuka dari seluruh proses pergerakan animasi yang

ditampilkan. Dalam rancangan ini menunjukkan karakter dasar dari proses

pembuatan animasi. Berikut adalah tampilan rancangan animasi tersebut.

Gambar 4.1 Tampilan Rancangan Slide Introduction

Pada gambar 4.1 tampilan rancangan slide introduction merupakan slide

pembuka sebelum masuk ke menu utama yaitu slide interface. Slide introduction ini

terdiri dari 9 layers yang mempunyai tugas yang berbeda. Proses pembuatan animasi

campus profile ini menggunakan Adobe Flash CS5 dan didalamnya terdapat

pemakaian frame rate sebesar 24 FPS (frame per second) dan panjang timeline

sebesar 450 frame dan layer sebanyak 25 layers. Ukuran stage layar animasi campus

profile ini adalah 800 x 600 pixels membuat tampilan animasi terlihat memanjang.

Proses pembuatan animasi campus profile dalam rancangan slide introduction

dilakukan dengan menggunakan perintah animasi yaitu create classic tween dan

kemudian didesain hingga menghasilkan gerakan animasi skala, animasi gerak,

Page 33: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

19

animasi alpha, animasi blur, dan animasi masking. Pada slide ini terdapat satu

tombol yang digunakan yaitu tombol skip intro. Tombol skip intro bertujuan agar

user dapat melewatkan tampilan intro yang sedang berjalan dan langsung menuju ke

tampilan slide interface yaitu tampilan antarmuka atau tampilan utama dari seluruh

rangkaian animasi yang ditampilkan.

4.1.2 Tampilan Rancangan Slide Interface

Tampilan rancangan slide interface merupakan tampilan rancangan

antarmuka yang berisi berbagai konten informasi penting dalam bentuk pergerakan

animasi yang ditampilkan. Konten informasi yang tampilkan adalah tentang profil

kampus STMIK U’Budiyah Indonesia, khususnya tentang latar belakang, visi dan

misi, tujuan pendirian serta sarana dan prasarana yang tersedia di lingkungan kampus

STMIK U’Budiyah Indonesia. Konten animasi dalam slide interface tersebut berupa

video, gambar, suara, teks dan dengan pergerakan animasi yang berbasiskan

multimedia interaktif. Dalam rancangan slide interface ini menunjukkan informasi-

informasi penting yang dimunculkan dari proses pergerakan animasi. Berikut adalah

tampilan rancangan animasi tersebut.

Gambar 4.2 Tampilan Rancangan Slide Interface

Pada gambar 4.2 tampilan rancangan slide interface merupakan tampilan

menu utama yang berisikan berbagai konten informasi tentang profil kampus STMIK

U’Budiyah Indonesia. Dalam rancangan slide interface terdapat empat komponen

penting. Berikut adalah penjelasan dari komponen-komponen tersebut.

Page 34: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

20

1. Header

Header adalah bagian atas dari rancangan tampilan animasi. Pada bagian header

berisi lambang/logo, tulisan serta motto STMIK U’Budiyah Indonesia. Proses

pembuatan tampilan rancangan header ini menggunakan perintah convert to

symbol dan kemudian memilih fitur movie clip. Dalam perintah movie clip ini

objek yang berada didalam header tersebut didesain dan dianimasikan menjadi

animasi masking, yaitu animasi yang menampilkan bidang yang tertutup dan

menyembunyikan bidang yang terbuka.

2. Stage

Stage adalah bagian yang didesain untuk memunculkan seluruh rangkaian

konten informasi dalam bentuk pergerakan animasi. Konten informasi yang

ditampilkan berupa video, gambar, suara, dan teks. Jenis animasi yang

ditampilkan adalah animasi masking yang didesain dengan menggunakan

perintah convert to symbol dan kemudian memilih fitur movie clip, sehingga

animasi yang dihasilkan terlihat menarik dan indah.

3. Button

Button adalah sebuah tombol yang dapat digunakan untuk mengontrol dan

mengendalikan serta mengakses informasi yang tersedia di dalam tampilan menu

animasi campus profile. Proses pembuatan tombol button ini menggunakan

perintah convert to symbol dan kemudian memilih fitur button. Tombol button

tersebut dapat memudahkan pengguna dalam membuka dan menutup program

animasi yang ditampilkan.

4. Footer

Footer adalah bagian bawah dari rancangan animasi. Pada bagian footer ini

berisi informasi tentang alamat situs resmi website STMIK U’Budiyah Indonesia

dan nama designer program animasi campus profile. Proses pembuatan tampilan

rancangan footer tersebut menggunakan perintah animasi yaitu create classic

tween dan kemudian didesain hingga menghasilkan gerakan animasi alpha, yaitu

animasi yang mengatur transparansi warna objek, dari nampak menjadi tidak

nampak atau sebaliknya.

Page 35: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

21

4.1.3 Tampilan Rancangan Tombol Go to Frame

Tampilan rancangan tombol go to frame merupakan tampilan tombol menu

yang dirancang dan didesain khusus untuk memudahkan user dalam mengakses fitur-

fitur dan konten yang tersedia pada tampilan animasi campus profile yang berbasis

multimedia interaktif. Tombol go to frame adalah bagian dari slide interface yang

didesain menggunakan perintah actionscript agar tombol tersebut berjalan sesuai

dengan yang diperintahkan. Perintah actionscript yang dipakai pada tombol go to

frame adalah “gotoAndStop” dan “gotoAndPlay”. Perintah actionscript

“gotoAndStop” digunakan untuk menuju ke sebuah keyframe dan animasi tersebut

langsung berhenti, sedangkan perintah actionscript “gotoAndPlay” digunakan untuk

menuju ke sebuah keyframe dan animasi tersebut memainkan dan melanjutkan

kembali gerakan animasinya. Berikut adalah tampilan rancangan animasi tersebut.

Gambar 4.3 Tampilan Rancangan Tombol Go to Frame

Pada gambar 4.3 tampilan rancangan tombol go to frame menggunakan

perintah convert to symbol dan kemudian memilih type button. Dalam type button

tersebut terdapat empat perintah khusus untuk mengatur tampilan tombol yaitu up,

over, down dan hit. Perintah-perintah pada tampilan tombol ini dapat dianimasikan

pergerakannya ketika pointer mouse mendekati area tombol button. Dengan

menggunakan perintah tersebut akan menghasilkan efek hidup pada tombol button

animasi dan tampilan animasi akan terlihat interaktif dan menarik saat animasi

dijalankan.

Page 36: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

22

4.1.4 Tampilan Rancangan Tombol Next dan Previous Frame

Tampilan rancangan tombol next dan previous frame merupakan tampilan

yang didesain khusus untuk tombol navigasi pada tampilan pergerakan animasi.

Tombol next dan previous frame adalah bagian dari slide interface yang didesain

menggunakan perintah actionscript. Penggunan tombol tersebut digunakan untuk

mengetahui konten-konten informasi lainnya yang terdapat di dalam program

animasi campus profile. Ketika tombol next dan previous frame ditekan maka akan

menampilkan tampilan animasi yang berbeda dari tampilan animasi sebelumnya.

Berikut adalah tampilan rancangan animasi tersebut.

Gambar 4.4 Rancangan Tombol Next dan Previous Frame

Tampilan rancangan tombol yang ditunjukkan pada gambar 4.4 tersebut

menggunakan perintah actionscript agar tombol tersebut berjalan sesuai dengan yang

diperintakan. Perintah actionscript yang dipakai adalah “nextFrame dan prevFrame”.

Perintah nextFrame digunakan untuk menuju ke frame berikutnya, sedangkan

prevFrame digunakan untuk menuju ke frame sebelumnya.

4.1.5 Tampilan Rancangan Tombol Navigasi Suara

Tampilan rancangan tombol navigasi suara merupakan tampilan yang

didesain khusus untuk mengontrol dan mengatur suara yang terdengar di dalam

tampilan animasi. Tombol navigasi suara adalah bagian dari slide interface yang

didalamnya terdapat tombol mute, tombol pause, dan tombol play. Tombol mute

Page 37: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

23

digunakan untuk mematikan dan menghidupkan suara, tombol pause digunakan

untuk menjedakan suara, sedangkan tombol play digunakan untuk memainkan dan

melanjutkan suara. Tombol pause dan tombol play pada animasi ini didesain dalam

satu tombol yang sama namun memiliki dua perintah yang berbeda, yaitu perintah

untuk menjedakan suara (pause) dan perintah untuk memainkan dan melanjutkan

suara (play). Berikut adalah tampilan rancangan animasi menggunakan tombol

navigasi suara tersebut.

Gambar 4.5 Tampilan Rancangan Tombol Navigasi Suara

Tampilan rancangan tombol navigasi suara yang ditunjukkan pada gambar

4.5 tersebut berada di bagian kanan bawah tepatnya di area footer. Di dalam

komponen tombol navigasi suara tersebut sudah diinputkan music sebagai nada

pengiring saat animasi di jalankan. Dengan demikian animasi akan lebih terlihat

interaktif dan menarik saat user mengakses program animasi dan melihat seluruh

konten-konten yang ditampilkan sambil mendengarkan music.

4.1.6 Tampilan Rancangan Slide Ending

Tampilan rancangan slide ending merupakan tahapan rancangan akhir dari

seluruh proses pembuatan animasi yang telah dilakukan. Tampilan slide ending

adalah tampilan pergerakan animasi penutup dari seluruh proses pergerakan animasi

yang telah ditampilkan. Dalam rancangan slide ending ini menunjukkan tampilan

terakhir dari seluruh rangkaian pergerakan animasi dengan tampilan konten-konten

dan informasi yang menarik. Berikut adalah tampilan rancangan animasi tersebut.

Page 38: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

24

Gambar 4.6 Tampilan Rancangan Slide Ending

Pada gambar 4.6 tampilan rancangan slide ending merupakan slide penutup

setelah keluar dari menu utama yaitu slide interface. Pada slide ending ini terdapat

tulisan “terima kasih” yang didesain dengan menggunakan perintah create classic

tween dan dianimasikan hingga menghasilkan pergerakan animasi alpha, yaitu

animasi yang mengatur transparansi warna objek, dari nampak menjadi tidak nampak

atau sebaliknya.

4.2 Tampilan Hasil Rancangan Animasi Campus Profile

Setelah melakukan beberapa rancangan pada setiap slide animasi campus

profile STMIK U’Budiyah Indonesia, maka diperoleh hasil tampilan yaitu dengan

melakukan test movie menggunakan Adobe Flash CS5 yang bertujuan untuk melihat

hasil keseluruhan rancangan yang telah dilakukan. Rancangan animasi tersebut

merupakan tampilan hasil akhir dari seluruh proses pembuatan animasi yang

dilakukan sehingga animasi tersebut dapat dibuat dalam dua format file, yaitu format

file exe dan format file HTML. Format file exe dapat digunakan untuk

mempresentasikan animasi tanpa bantuan program lain, sedangkan format file

HTML dapat digunakan untuk mempresentasikan animasi dalam bentuk media

website. Adapun tampilan hasil rancangan animasi campus profile pada setiap slide

adalah sebagai berikut.

Page 39: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

25

4.2.1 Tampilan Slide Introduction

Gambar 4.7 Tampilan Logo STMIK Pada Slide Introduction

Gambar 4.8 Tampilan STMIK U’Budiyah Pada Slide Introduction

Tampilan slide introduction pada gambar 4.7 menunjukkan pergerakan

animasi skala dan animasi alpha yang ditampilkan pada objek logo STMIK

U’Budiyah Indonesia dan disertai music sebagai nada pengiring saat animasi

dijalankan. Objek logo tersebut bergerak dari ukuran kecil berubah menjadi ukuran

besar dengan transparansi warna objek, dari tidak nampak menjadi nampak.

Kemudian objek logo tersebut dilewati oleh efek cahaya berwarna putih, setelah itu

objek logo bergerak ke sebelah kiri dengan ukuran yang sedikit mengecil. Pada

gambar 4.8 menunjukkan pergerakan animasi blur yang ditampilkan pada objek

Page 40: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

26

tulisan “STMIK U’Budiyah Indonesia” dan kemudian di lanjutkan dengan

pergerakan animasi alpha yang ditampilkan oleh objek teks slogan STMIK

U’Budiyah Indonesia. Setelah semua objek muncul di dalam stage, kemudian efek

cahaya berwarna putih muncul dan melewati objek logo dan tulisan “STMIK

U’Budiyah Indonesia”. Beberapa saat kemudian tampilan pada slide introduction

menghilang dengan sedikit pergerakan animasi alpha dan langsung masuk pada slide

menu utama yaitu slide interface.

4.2.2 Tampilan Slide Interface

Gambar 4.9 Tampilan Slide Interface

Pada gambar 4.9 tampilan slide interface menunjukkan tampilan utama dari

pergerakan animasi yaitu dengan hadirnya video campus profile STMIK U’Budiyah

Indonesia yang menggambarkan bangunan gedung serta sarana dan prasarana yang

ada di lingkungan kampus STMIK U’Budiyah Indonesia. Dalam tampilan slide

interface ini terdiri dari tampilan header, stage, button dan footer. Pada tampilan

header terdapat logo dan tulisan “STMIK U’Budiyah Indonesia” yang didesain

dengan pergerakan animasi masking, yaitu munculnya efek cahaya berwarna putih

yang melewati objek pada bagian header tersebut. Kemudian pada tampilan stage

menunjukkan tempat dimana semua konten dalam animasi dimunculkan dengan

pergerakan animasi masking, yaitu pergerakan animasi yang muncul dari atas ke

bawah. Pada tampilan button terlihat perubahan warna dan ukuran, ketika pointer

mouse mendekati button maka tampilan warna button berubah menjadi warna hijau

Page 41: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

27

dan ketika button di klik, maka ukuran button sedikit mengecil dan kemudian

berubah ke ukuran semula. Pada tampilan footer terdapat alamat situs resmi website

STMIK U’Budiyah Indonesia dan nama designer program animasi campus profile

STMIK U’Budiyah Indonesia. Semua objek yang terdapat di dalam slide interface

ini akan bergerak dengan perubahan transparansi warna objek yang didesain dengan

menggunakan perintah animasi alpha, yaitu ketika tampilan slide interface ditutup,

maka tampilan berikutnaya menuju ke tampilan slide ending yaitu slide penutup.

4.2.3 Tampilan Tombol Go to Frame

Gambar 4.10 Tampilan Tombol Go to Frame

Pada gambar 4.10 tampilan tombol go to frame pada animasi campus profile

STMIK U’Budiyah Indonesia didesain dengan tujuan untuk memudahkan pengguna

dalam mengakses konten-konten berikutnya. Terdapat beberapa tombol go to frame

atau tombol menu pada animasi ini yaitu tombol pengenalan, visi dan misi, program

studi, tujuan pendirian, dosen, kerjasama, gedung kampus, pustaka, laboratorium,

intro, video dan tombol close. Semua tombol tersebut didesain dengan menggunakan

perintah actionscript yang sedemikian rupa sehingga saat tombol tersebut ditekan

maka akan menampilkan konten informasi pada tampilan animasi campus profile.

Pergerakan animasi yang dihasilkan dari setiap tombol go to frame tersebut adalah

animasi skala, yaitu perubahan ukuran tombol ketika pointer mouse mendekati area

tombol go to frame pada animasi campus profile tesebut.

Page 42: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

28

4.2.4 Tampilan Tombol Next dan Previous Frame

Gambar 4.11 Tampilan Tombol Next dan Previous Frame

Pada gambar 4.11 tampilan tombol next dan previous frame pada animasi

campus profile STMIK U’Budiyah Indonesia menunjukkan tombol navigasi dalam

memudahkan pengguna ketika melihat konten berikutnya dan konten sebelumnya.

Pergerakan animasi pada tampilan tombol next dan previous frame tersebut adalah

dengan perubahan warna objek dari warna hijau berubah menjadi warna putih ketika

pointer mouse mendekati area tombol tersebut.

4.2.5 Tampilan Tombol Navigasi Suara

Gambar 4.12 Tampilan Tombol Navigasi Suara

Page 43: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

29

Pada gambar 4.12 tampilan tombol navigasi suara pada animasi campus

profile STMIK U’Budiyah Indonesia menunjukkan tombol untuk mengontrol dan

mengatur suara yang terdengar di dalam tampilan animasi. Dalam tombol navigasi

suara tersebut pengguna dapat mematikan dan menghidupkan suara dengan menekan

tombol mute, menjedakan suara dengan menekan tombol pause, memainkan dan

melanjutkan suara dengan menekan tombol play pada tampilan animasi yang

sedang berjalan. Tombol navigasi suara terletak di bagian kanan bawah tepatnya di

area footer. Khusus untuk tampilan konten video, tombol navigasi suara berada di

dekat tampilan video. Hal ini bertujuan agar tampilan video menjadi lebih menarik.

4.2.6 Tampilan Slide Ending

Gambar 4.13 Tampilan Slide Ending

Tampilan slide ending pada gambar 4.13 menunjukkan tampilan slide

penutup dengan pergerakan animasi skala dan animasi alpha yang ditampilkan pada

objek tulisan “terima kasih”. Objek tulisan tersebut bergerak dari ukuran kecil

berubah menjadi ukuran besar dengan transparansi warna objek, dari tidak nampak

menjadi nampak. Setelah objek tersebut tampil di dalam stage, kemudian objek

tersebut menghilang dengan pergerakan objek dari ukuran besar berubah menjadi

ukuran kecil dan dengan transparansi warna objek, dari nampak menjadi tidak

nampak. Setelah tampilan objek tersebut menghilang, maka tampilan program

animasi campus profile berakhir dengan menutup program secara otomatis.

Page 44: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

30

4.3 Storyboard Animasi Campus Profile

Pembuatan animasi campus profile membutuhkan storyboard sebagai sketsa

gambar yang disusun berurutan sesuai dengan ide cerita yang telah dirancang.

Storyboard adalah rancangan awal dari suatu program animasi yang berisi penjelasan

visual dan audio dari masing-masing alur dalam skenario yang dirinci untuk setiap

frame/slide. Pada umumnya storyboard berupa tabel (baris-kolom), setiap kolom di

dalamnya mewakili satu tampilan di layar monitor. Tujuan penggunaan storyboard

adalah untuk menjelaskan jalan cerita dari pergerakan animasi yang ditampilkan.

Adapun storyboard dalam proses pembuatan animasi campus profile dengan

menggunakan Adobe Flash CS5 yang berbasis multimedia interaktif pada STMIK

U’Budiyah Indonesia adalah sebagai berikut.

NO

FRAME

ISI

KETERANGAN

1

Frame Pembuka

Slide Introduction

Berisi :

Gambar Logo

Tulisan STMIK

Tulisan Motto

Tombol Skip

Intro

Gambar akan tampil

secara bertahap, tulisan

STMIK tampil dengan

pergerakan animasi

blur, tulisan motto

tampil dengan

pergerakan animasi

alpha, tombol skip intro

berguna untuk menuju

ke slide interface.

2

Frame Utama

Slide Interface

Berisi :

Header

Stage

Button

Footer

Header menunjukkan

tampilan judul animasi,

stage adalah tempat

munculnya konten

animasi, button berguna

untuk memilih konten

animasi, dan footer

menunjukkan alamat

website dan nama

designer animasi.

Page 45: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

31

3

Tombol Menu Animasi

Tombol Go to

Frame

Berisi:

Konten

Animasi

Tombol Menu

Tombol

Navigasi Suara

Konten animasi tampil

dengan pergerakan

animasi masking,

tombol menu tampil

dengan perubahan

bentuk ukuran dan

warna objek ketika

pointer mouse

mendekati area tombol.

4

Tombol Navigasi Gambar

Tombol Next dan

Previous Frame

Berisi :

Konten

Animasi

Tombol Menu

Tombol Next

Tombol

Previous

Tombol next dan

previous tampil dengan

perubahan warna objek

ketika pointer mouse

mendekati area tombol.

Tombol tersebut

berguna untuk melihat

konten informasi

lainnya dalam program

animasi campus profile.

5

Tombol Navigasi Suara

Berisi :

Konten

Animasi

Tombol Menu

Tombol

Navigasi Suara

Tombol navigasi suara

tampil dengan dua

bentuk tombol, yaitu

tombol mute, dan

tombol pause/play.

6

Frame Penutup

Slide Ending

Berisi :

Tulisan Terima

Kasih

Tulisan “terima kasih”

tampil dengan

pergerakan animasi

skala dan alpha.

Tampilan tersebut

menunjukkan tampilan

penutup dari program

animasi yang telah

ditampilkan.

Tabel 4.1 Storyboard Animasi Campus Profile

Page 46: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

32

4.4 Timeline Animasi Campus Profile

Timeline merupakan bagian dari program Adobe Flash yang berfungsi sebagai

pengatur urutan tampilan yang berdasarkan layer dan frame. Timeline dapat

digunakan untuk menentukan durasi animasi, jumlah layer, frame, menempatkan

actionscript dan beberapa keperluan animasi lainnya. Komponen-komponen penting

dalam proses pembuatan animasi campus profile diatur dan ditempatkan pada layer

dalam timeline. Timeline dapat mengatur dan menggabungkan animasi berbagai teks

atau gambar. Timeline berisi layer dan frame yang berfungsi untuk mengontrol objek

yang akan dianimasikan. Berikut adalah timeline animasi campus profile.

Gambar 4.14 Timeline Animasi Campus Profile

Pada gambar 4.14 menunjukkan pemakaian layer dan frame yang digunakan

untuk mengontrol objek dalam timeline animasi campus profile. Proses pembuatan

animasi campus profile menggunakan Adobe Flash CS5 dan didalamnya terdapat

pemakaian frame rate sebesar 24 FPS (frame per second). Jumlah frame yang

digunakan dalam timeline adalah sebesar 450 frame dengan menggunakan perintah

animasi yang berbeda dan 25 layer dalam 2 folder utama dengan objek yang berbeda.

Ukuran stage layar animasi campus profile adalah 800 x 600 pixels. Perintah yang

digunakan dalam membuat pergerakan animasi campus profile adalah create classic

tween, movie clip, button, dan actionscript. Jenis animasi yang dihasilkan adalah

animasi gerak, animasi skala, animasi blur, animasi alpha, dan animasi masking.

Page 47: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

33

4.5 Jenis Format File Animasi Campus Profile

Dalam proses pembuatan animasi campus profile, terdapat dua jenis format

file yang digunakan dalam mempublikasikan animasi yang telah dibuat, yaitu format

file exe dan format file HTML. Mempublikasikan animasi berarti mengkonversi

animasi yang telah selesai dibuat menjadi file tunggal yang siap ditampilkan atau

dipresentasikan. Perintah publish yang terdapat di dalam Adobe Flash CS5 akan

mempublikasikan animasi kedalam format file exe dan format file HTML. Berikut

adalah format file animasi campus profile tersebut.

4.5.1 Format File Exe

Format file exe merupakan jenis file komputer yang diakhiri dengan ekstensi

“.exe” atau dikenal sebagai file eksekusi (executable file). Ketika file exe di klik,

maka secara otomatis komputer akan mengeksekusi file exe tersebut. File exe

digunakan untuk menginstal dan menjalankan program yang bersifat rutinitas. File

exe hanyalah salah satu dari beberapa jenis format file yang diakui oleh berbagai

macam sistem operasi komputer. Berikut adalah format file exe animasi campus

profile tersebut.

Gambar 4.15 Format File Exe

Pada gambar 4.15 menunjukkan format file exe animasi campus profile yang

dipublikasikan dengan menggunakan Adobe Flash CS5. Format file exe dapat

digunakan untuk mempresentasikan animasi tanpa bantuan program lain. Format file

Page 48: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

34

exe dapat disebarluaskan kepada seluruh lapisan masyarakat dengan menggunakan

perangakat komputer, seperti CD (Compact Disk), flashdisk, dan lain sebagainya.

Format file exe yang telah selesai dibuat dapat digunakan untuk menginformasikan

tentang profil kampus STMIK U’Budiyah Indonesia, khususnya dalam

perkembangan kemajuan fasilitas dan sarana kampus, bangunan gedung serta

prasarana yang ada di lingkungan STMIK U’Budiyah Indonesia.

4.5.2 Format File HTML

Format file HTML (HyperText Markup Language) merupakan sekumpulan

text atau file ASCII yang berisi intruksi atau perintah program untuk web browser

dalam menampilkan tampilan grafis sebuah halaman website. Untuk menjalankan

sebuah flash movie dalam browser memerlukan sebuah dokumen HTML yang aktif

pada movie. Dokumen ini dihasilkan otomatis dengan perintah publish yang terdapat

di dalam Adobe Flash. Berikut adalah format file HTML animasi campus profile.

Gambar 4.16 Format File HTML

Pada gambar 4.16 menunjukkan format file HTML animasi campus profile

yang dipublikasikan dengan menggunakan Adobe Flash CS5. Format file HTML

dapat digunakan untuk mempresentasikan animasi dalam bentuk media website.

Format file HTML animasi Campus Profile dapat diintegrasikan dengan mengupload

file tersebut ke web induk STMIK U’Budiyah Indonesia, sehingga dengan demikian

dapat memudahkan masyarakat dalam mengetahui profil kampus secara online.

Page 49: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

35

BAB V

PENUTUP

Berdasarkan uraian dan pembahasan yang telah dijelaskan pada bab-bab

sebelumnya yang diperoleh dari hasil pembuatan animasi Campus Profile dengan

menggunakan Adobe Flash CS5 yang berbasis multimedia interaktif, maka dapat

dibuat kesimpulan dan saran adalah sebagai berikut :

5.1 Kesimpulan

1. Pembuatan animasi campus profile dilakukan dengan menggunakan perangkat

lunak komputer yaitu Adobe Flash CS5 sehingga menghasilkan tampilan konten

animasi berupa video, gambar, suara, dan teks dalam kesatuan pergerakan

animasi yang berbasis multimedia interaktif.

2. Tampilan animasi campus profile yang berbasis multimedia interaktif dapat

digunakan sebagai media dalam mempublikasikan dan menginformasikan profil

kampus STMIK U’Budiyah Indonesia kepada seluruh lapisan masyarakat,

khususnya mengenai fasilitas sarana dan prasarana kampus yang ada di

lingkungan STMIK U’Budiyah Indonesia.

3. Animasi campus profile dapat diintegrasikan ke dalam media website, yaitu

dengan cara mengupload file animasi campus profile dengan format file HTML

ke web induk STMIK U’Budiyah Indonesia, sehingga dengan demikian dapat

memudahkan masyarakat dalam mengetahui dan memperoleh informasi secara

online tentang profil kampus STMIK U’Budiyah Indonesia.

5.2 Saran

1. Dalam proses pembuatan animasi campus profile yang berbasis multimedia

interaktif terdapat beberapa kekurangan yang disebabkan oleh keterbatasan ilmu

yang dimiliki Designer, maka dengan demikian animasi ini dapat dikembangkan

oleh para Designer lainnya di masa yang akan datang.

2. Dalam mengembangkan animasi campus profile yang berbasis multimedia

interaktif, diharapkan dapat memperbaharui tampilan dan fitur-fitur animasi

yang lebih menarik dan lebih baik dari yang sudah dirancang.

Page 50: PEMBUATAN ANIMASI CAMPUS PROFILE …simtakp.uui.ac.id/dockti/ARIEF_MUNANDAR_YAD-skripsi_arief_munan… · skripsi ini dapat memberikan ... profile yang berbasis multimedia interaktif

36

DAFTAR PUSTAKA

Devisi Penelitian dan Pengembangan MADCOMS - MADIUN, 2010, Kupas Tuntas

Adobe Photoshop CS5. Yogyakarta : ANDI

Devisi Penelitian dan Pengembangan MADCOMS - MADIUN, 2012, Kupas Tuntas

Adobe Flash Professional CS5,5. Yogyakarta : ANDI

Hofstetter, Fred T. 2001. Multimedia Literacy. Third Edition. McGraw-Hill

International Edition, New York.

Ibiz Fernandez, McGraw. 2002. Macromedia Flash Animaton & Cartooning : A

Creative Guide. Hill/Osborn, California

McCormick, E. J., Sanders, M. S. 1996. Human Factors in Engineering and Design.

McGraw-Hill, Inc.

Sutopo, Ariesto Hadi, 2003. Multimedia Interaktif dengan Flash. Yogyakarta : Graha

Ilmu

Suyanto, M, 2003. Multimedia Alat Untuk Meningkatkan Keunggulan Bersaing.

Yogyakarta : Andi Offest

Turban, Mclean, Wetherbe, 2002. Information Technology For Management, 3th

Edition, John Wiley & Sons Inc.

Wojowasito, Prof. Drs. S. 1997. Kamus Lengkap Inggris-Indonesia Indonesia-

Inggris, Bandung : Hasta