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
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. iv
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
v
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
vii
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
viii
DAFTAR ISI Halaman HALAMAN JUDUL LEMBARAN PENGESAHAN .......................................................................... LEMBARAN PERSETUJUAN ........................................................................ LEMBARAN PERNYATAAN ......................................................................... KATA PENGANTAR ........................................................................................ ABSTRAK .......................................................................................................... DAFTAR ISI ....................................................................................................... DAFTAR GAMBAR .......................................................................................... DAFTAR TABEL .............................................................................................. DAFTAR ISTILAH ........................................................................................... DAFTAR LAMPIRAN ......................................................................................
i ii iii v vii ix xi xii xiii xiv
BAB I PENDAHULUAN ................................................................................... 1 1.1 1.2 1.3 1.4 1.5 1.6
Latar Belakang ................................................................................ Rumusan Masalah ........................................................................... Batasan Masalah ............................................................................. Tujuan Penelitian ............................................................................ Manfaat Penelitian .......................................................................... Sistematika Penulisan ....................................................................
1 3 3 3 4 4
BAB II TINJAUAN PUSTAKA ........................................................................ 6 2.1
2.2 2.3
Konsep Dasar Animasi .................................................................... 2.2.1 Pengenalan Animasi ............................................................. 2.2.2 Jenis - Jenis Animasi ............................................................ 2.2.3 Teknik Pembuatan Animasi ................................................. 2.2.4 Symbol Movie Clip ............................................................... 2.2.5 Symbol Button ...................................................................... 2.2.6 ActionsScript ........................................................................ 2.2.7 Storyboard ............................................................................ 2.2.8 Timeline ................................................................................ Pengertian Animasi Campus Profile ..............................................
6 6 7 8 9 9 9 10 10 10
Perangkat Lunak (Software) ........................................................... 11 2.3.1 Adobe Flash CS5 .................................................................. 11 2.3.2 Adobe Photoshop CS5 ......................................................... 12 ix
2.4 2.5
2.3.3 Wondershare Video Editor .................................................. 12 Pengertian Multimedia Interaktif ..................................................... 12 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
4.2
4.3 4.4 4.5
Rancangan Animasi Campus Profile .............................................. 4.1.1 Tampilan Rancangan Slide Introduction .............................. 4.1.2 Tampilan Rancangan Slide Interface ................................... 4.1.3 Tampilan Rancangan Tombol Go to Frame ........................ 4.1.4 Tampilan Rancangan Tombol Next dan Previous Frame .... 4.1.5 Tampilan Rancangan Tombol Navigasi Suara ..................... 4.1.6 Tampilan Rancangan Slide Ending ...................................... Tampilan Hasil Rancangan Animasi Campus Profile .................... 4.2.1 Tampilan Slide Introduction ................................................ 4.2.2 Tampilan Slide Interface ...................................................... 4.2.3 Tampilan Tombol Go to Frame ........................................... 4.2.4 Tampilan Tombol Next dan Previous Frame ....................... 4.2.5 Tampilan Tombol Navigasi Suara ....................................... 4.2.6 Tampilan Slide Ending ......................................................... Storyboard Animasi Campus Profile ............................................... Timeline Animasi Campus Profile .................................................. Jenis Format File Animasi Campus Profile .................................... 4.5.1 Format File Exe .................................................................... 4.5.2 Format File HTML ..............................................................
18 18 19 21 22 22 23 24 25 26 27 28 28 29 30 32 33 33 34
BAB V PENUTUP ............................................................................................... 35 5.1 5.2
Kesimpulan ..................................................................................... 35 Saran ............................................................................................... 35
DATAR PUSTAKA ........................................................................................... 36 LAMPIRAN x
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
xi
DAFTAR TEBEL
Halaman Tabel 3.1 Jadwal Penelitian .................................................................................. 17 Tabel 4.1 Storyboard Animasi Campus Profile ................................................... 31
xii
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.
xiii
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
xiv
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.
1
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”.
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.
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.
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.
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
6
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. Informasiinformasi 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
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.
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.
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
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.
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
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 lainlain) 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.
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.
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 :
15
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 literaturliteratur, 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.
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 1 2 3 4 5 6
2013 Kegiatan
Oktober
2014
November
Desember
1 2 3 4 1 2 3 4
1 2 3 4
Studi Literatur Analisa Data Pengumpulan Data Perancangan Animasi Pembuatan Animasi Penulisan Laporan Tabel 3.1 Jadwal Penelitian
Januari
Februari
1 2 3 4 1 2 3 4
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,
18
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 informasiinformasi 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.
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.
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 fiturfitur 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.
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
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.
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.
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
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
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.
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
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.
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
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.
Berisi : Gambar Logo Tulisan STMIK Tulisan Motto Tombol Skip Intro
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.
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
Tulisan “terima kasih” tampil dengan pergerakan animasi skala dan alpha. Tampilan tersebut menunjukkan tampilan penutup dari program animasi yang telah ditampilkan.
Berisi : Tulisan Terima Kasih
Tabel 4.1 Storyboard Animasi Campus Profile
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.
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
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.
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. 35
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 IndonesiaInggris, Bandung : Hasta
36
