BERBASIS MULTIMEDIA
SKRIPSI
Disusun oleh :
DUDY HERIYANTO
NPM. 0834010190
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNOLOGI INDUSTRI
UNIVERSITAS PEMBANGUNAN NASIONAL "VETERAN"
JAWA TIMUR
Syukur Alhamdulillaahi rabbil ‘alamin terucap ke hadirat Allah SWT atas segala limpahan Kekuatan-Nya sehingga dengan segala keterbatasan waktu, tenaga, pikiran dan keberuntungan yang dimiliki penyusun, akhirnya penyusun dapat menyelesaikan Skripsi yang berjudul “Profil Interaktif Surfsoft Indonesia Professioanl Development Centre Berbasis Multimedia” tepat waktu.
Skripsi dengan beban 4 SKS ini disusun guna diajukan sebagai salah satu syarat untuk menyelesaikan program Strata Satu (S1) pada jurusan Teknik Informatika, Fakultas Teknologi Industri, UPN ”VETERAN” Jawa Timur.
Melalui Skripsi ini penyusun merasa mendapatkan kesempatan emas untuk memperdalam ilmu pengetahuan yang diperoleh selama di bangku perkuliahan, terutama berkenaan tentang penerapan teknologi perangkat bergerak. Namun, penyusun menyadari bahwa Skripsi ini masih jauh dari sempurna. Oleh karena itu penyusun sangat mengharapkan saran dan kritik dari para pembaca untuk pengembangan aplikasi lebih lanjut.
Surabaya, 6 Februari 2012
Ucapan terima kasih ini saya persembahkan sebagai perwujudan rasa syukur atas terselesaikannya Laporan Skripsi. Ucapan terima kasih ini saya tujukan kepada : 1. Allah SWT., karena berkat Rahmat dan berkahNya kami dapat menyusun dan
menyelesaikan Laporan Skripsi ini hingga selesai.
2. Bapak Prof. Dr. Ir. Teguh Soedarto, MP selaku Rektor Universitas Pembangunan Nasional “Veteran” Jawa Timur.
3. Bapak Sutiyono, MT selaku Dekan Fakultas Teknologi Industri UPN “Veteran” Jawa Timur.
4. Ibu Dr. Ir. Ni Ketut Sari, MT. selaku Ketua Jurusan Teknik Informatika UPN “Veteran” Jawa Timur yang telah dengan sabar membimbing dengan segala kerendahan hati dan selalu memberikan kemudahan dan kesempatan bagi saya untuk berkreasi.
5. Bapak Firza Prima Aditiawan, S.Kom., Selaku PIA Tugas Akhir Teknik Informatika UPN “Veteran” Jawa Timur.
6. I Gede Susrama Mas Diyasa, ST. M.T. selaku dosen pembimbing utama pada Proyek Skripsi ini di UPN “Veteran” Jawa Timur yang telah banyak memberikan petunjuk, masukan, bimbingan, dorongan serta kritik yang bermanfaat sejak awal hingga terselesainya Skripsi ini.
8. Keluarga tercinta, terutama Bapak Ibuku tersayang, terima kasih atas semua doa, dukungan serta harapan-harapanya pada saat penulis menyelesaikan Skripsi dan laporan ini. Yang penulis minta hanya doa restunya, sehingga penulis bisa membuat sesuatu yang lebih baik dari laporan ini.
9. Kakakku Wenny Setyorini, Eko Nuryatno, Atik Widyanti dan Dodi Rahmat M. yang memberi dukungan meskipun berada di Jakarta, Terima kasih atas dukungan dan do’anya. Semoga Keluarga di Jakarta diberikan rejeki dan keselamatan selalu.
10.Terimakasih buat teman seperjuangan sekaligus partner yang baik, Herman Kuriniawan dan Anjas Purnomo, yang telah berjuang bersama sampai akhir tampa kenal waktu. Serta teman-temanku Eva Yulia, Andre Istifarianto, Min Umami, Eka Adi Saputra, Haqiqi Agus D.F, Arrosyida “eca” dan Exsha di Malang yang telah memberi semangat.
Halaman
2.1.1 Profil Lembaga Pendidikan SPDC ... 6
2.1.2 Visi dan Misi SPDC ... 7
2.1.3 Struktur Organisasi SPDC Surabaya ... 9
2.2.Komputer sebagai Alat Bantu Pembelajaran ... 10
2.2.1. Keistimewaan Pemakaian Komputer Dalam Proses Pembelajaran. 11 2.2.2. Bentuk Penerapan Aplikasi CAI ... 12
2.4.Adobe Flash ... 16
2.10 Interaksi Manusia dan Komputer ... 44
BAB III ANALISA DAN PERANCANGAN SISTEM ... 48
4.1.1 Perangkat Keras (Hardware) yang digunakan ... 60
4.1.2 Perangkat Lunak (Software) yang digunakan ... 60
4.2 Implementasi Desain Antarmuka ... 61
4.2.1 Home ... 62
4.2.2 Visi Misi ... 64
4.2.3 Program ... 65
4.2.4 Mitra ... 67
4.2.5 Gallery ... 67
4.2.6 Contact ... 69
BAB V UJI COBA SISTEM DAN ANALISA SISTEM ... 70
5.1. Skenario Uji Coba ... 70
5.2. Pelaksanaan Uji Coba ... 70
5.2.1 Uji Coba Menampilkan program ... 71
5.2.2 Uji Coba Menampilkan Gallery ... 76
BAB VI PENUTUP ... 79
6.1. Kesimpulan ... 79
6.2. Saran ... 79
Gambar 2.1. Struktur Organisasi SPDC Surabaya ... 9
Gambar 2.2. Area Kerja Adobe Flash ... 18
Gambar 2.3. Toolbox Flash ... 20
Gambar 2.4. Struktur Navigasi Linier ... 29
Gambar 2.5. Struktur Navigasi Non-Linier ... 30
Gambar 2.6. Struktur Navigasi Hirarki ... 31
Gambar 5.3. Detail School of Informatics Programming ... 72
Gambar 5.5. Detail School of Multimedia & Graphic Design ... 74
Gambar 5.6. Detail School of Broadcasting (TV & Radio) ... 75
Gambar 5.7. Menu Gallery ... 76
Gambar 5.8. Detail Gallery ... 77
DAFTAR TABEL
DOSEN PEMBIMBING II : M. SYAHRUL MUNIR, S.Kom. PENYUSUN : DUDY HERIYANTO
ABSTRAK
Pada sektor pendidikan, kehadiran teknologi informasi menjadi titik terpenting yang harus dikembangkan. Karena pada saat ini, kebutuhan informasi dan penggunaan komputer sangat canggih serta terus menerus berkembang sesuai dengan kemajuan teknologi informasi. Surfsoft Indonesia Profesional Development Centre (SPDC) adalah Lembaga Profesional Development Centre (Pusat Pengembangan Profesional) yang bergerak pada bidang pendidikan Teknologi Informasi, Bahasa, Bisnis dan Manajemen. Dimana dunia pendidikan saat ini sangat penting bagi manusia untuk mencapai cita-citanya.
Didalam permasalahan yang ada pada SPDC. Pihak lembaga ingin mempublikasikan SPDC kepada masyarakat luas tentang visi-misi, keunggulan dan program yang ditawarkan dalam lembaga SPDC. Penulis mengambil sebuah gambaran dari sebuah aplikasi website profil Lembaga. Dimana dalam aplikasi website tersebut, memberikan informasi tentang profil Lembaga. Sehingga sistem ini akan membantu mengembangkan informasi yang dipublikasi untuk masyarakat luas tentang Lembaga Pendidikan SPDC dan juga membantu memberikan kemudahan kepada user (pihak lembaga dan pengunjung) untuk dapat meng-akses situs lembaga dan mengetahui segala informasi yang ada pada SPDC.
Sehubungan dengan adanya tugas akhir ini penulis mencoba memberikan pandangan dan solusi dengan mencoba membuat multimedia yang dinamis yang mana penulis membuat profil tersebut dengan menggunakan teknologi flash yang terintegarasi dengan AS3(Action Script 3).
Profil Lembaga pendidikan SPDC memberikan informasi mengenai profil SPDC, Latar belakang SPDC, visi-misi, program yang ditawarkan, biaya, fasilitas, struktur keorganisasian, dan galeri. Sehingga dengan adanya profil ini pengunjung dapat memperoleh informasi apabila berminat masuk lembaga pendidikan SPDC ini.
1.1 Latar Belakang
Dalam dunia marketing (pemasaran) ada yang kita kenal dengan istilah
marketing mix (bauran pemasaran) yaitu seperangkat alat pemasaran taktis produk, harga, tempat dan promosi yang berada dalam kendali manajer pemasaran
perusahaan dan perusahaan memadukannya untuk mendapatkan respon yang
diinginkan oleh target pasar. Marketing mix ini terdiri dari 4P, antara lain :
Product (Produk), Price (Harga), Place (Tempat) dan Promotion (Promosi). Untuk mencapai tujuan perusahaan ke empat elemen ini harus ada dan saling
berkesinambungan.
Promosi merupakan salah satu ujung tombak pengenalan suatu produk
maupun perusahaan kepada umum. Promosi dapat mencitrakan dan memposisikan
suatu produk atau perusahaan di mata khalayak umum (positioning) dengan tujuan
akhir mendapatkan konsumen dan keuntungan tentunya, maka jangan heran biaya
promosi bisa cukup besar pada saat pengenalan (promosi) suatu produk
perusahaan.
Di Era Teknologi informasi saat ini Multimedia Interaktif merupakan salah
satu sarana promosi yang sedang berkembang dan banyak dipakai oleh
perusahaan-perusahaan besar, karena melihat dari efektivitas dan efisien hasil
yang diperoleh dari sarana promosi ini.
Untuk itu penulis mencoba membuat aplikasi multimedia interaksi tentang
pendukung Adobe Flash CS, agar mempermudah dalam memberikan informasi
lembaga kepada masyarakat luas dan para pelajar khususnya.
1.2 Rumusan Masalah
Berdasarkan latar belakang di atas maka dapat dirumuskan masalah, yaitu :
Bagaimana merancang dan membuat aplikasi web berbasis multimedia yang bisa
membantu pengelola, pengunjung atau calon pendaftar baru untuk memperoleh
info tentang lembaga SPDC (Surfsoft Indonesia Profesional Development Centre)
Surabaya.
1.3 Batasan Masalah
Karena luasnya topik perancangan animasi dalam membuat aplikasi ini,
maka dalam penyusunan dan penulisan proposal tugas akhir ini diberikan batasan
terhadap masalah yang di bahas. Secara garis besar diantaranya adalah :
1. Perancangan Graphical User Interface (GUI) untuk user di lakukan dengan menggunakan Adobe Flash CS5 yang akan diterapkan pada
komputer.
2. Menggunakan Animasi yang disediakan pada Adobe Flash CS 5
3. Aplikasi ini dibuat untuk media promosi lembaga SPDC(Surfsoft Indonesia Professional Development Centre) Surabaya, yang meliputi profil SPDC, visi dan misi, program pelatihan, galeri kegiatan, dan
1.4 Tujuan Penelitian
Tujuan dari pembuatan tugas akhir ini adalah :
1. Mempermudah pengelola dalam menyampaikan program – program
yang ada pada Lembaga..
2. Mempermudah pengunjung atau calon pendaftar kursus yang baru
dalam mendapatkan informasi dari lembaga tersebut.
3. Mengaplikasikan media agar memudahkan masyarakat atau siswa pada
khususnya untuk memperoleh informasi lembaga dengan tampilan
yang menarik.
1.5 Manfaat Penelitian
Adapun manfaat dari pembuatan tugas akhir ini adalah :
1. Memberikan visualisasi berupa gambar, foto maupun video dari suatu
produk
2. Khalayak umum mendapatkan penjelasan lebih rinci dibandingkan
dengan penggunaan media poster, brosur maupun pamflet
1.6 Sistematika Penulisan
Secara garis besar penyusunan tugas akhir diatur dan disusun dalam enam
bab, dan tiap bab menjelaskan isi dari laporan tersebut. Adapun sistematika
penulisan laporan tugas akhir ini sebagai berikut :
BAB I PENDAHULUAN
Bab ini menjelaskan permasalahan dan solusi yang di dapat yang di
batasan masalah, tujuan penelitian, manfaat penelitian, dan
sistematika penulisan pembuatan tugas akhir ini.
BAB II TINJAUAN PUSTAKA
Pada bab ini menjelaskan tentang teori-teori pemecahan masalah
yang berhubungan dan digunakan untuk mendukung dalam
pembuatan tugas akhir ini serta konsep – konsep dari adobe flash.
BAB III ANALISA DAN PERANCANGAN SISTEM
Bab ini menjelaskan tentang tata cara metode perancangan sistem
yang digunakan untuk mengolah sumber data yang dibutuhkan
sistem antara lain: Flowchart
BAB IV IMPLEMENTASI SISTEM
Pada bab ini menjelaskan implementasi dari program yang telah
dibuat meliputi lingkungan implementasi, implementasi proses dan
implementasi antarmuka.
BAB V UJI COBA DAN EVALUASI
Pada bab ini menjelaskan tentang pelaksanaan uji coba dan
evaluasi dari pelaksanaan uji coba dari program yang dibuat. Uji
coba dapat dilakukan pada akhir dari tahap-tahap analisa sistem,
desain sistem dan tahap penerapan sistem atau implementasi.
kesalahn-kesalahan dari program yang mungkin terjadi sehingga dapat
diperbaiki.
BAB VI PENUTUP
Bab ini berisi kesimpulan dan saran dari penulis untuk
pengembangan sistem.
DAFTAR PUSTAKA
Pada bagian ini akan dipaparkan tentang sumber-sumber literature
TINJAUAN PUSTAKA
2.1 Sejarah Singkat SPDC
Dalam lingkup ini akan dijelaskan tentang profil SPDC (Surfsoft Indonesia Professional Development Centre), Visi dan Misi dan Struktur Keorganisasian Lembaga pendidikan SPDC.
2.1.1 Profil Lembaga Pendidikan SPDC
Surfsoft Indonesia Profesional Development Centre (SPDC) adalah Lembaga Profesional Development Centre (Pusat Pengembangan Profesional) yang bergerak pada bidang pendidikan Teknologi Informasi, Bahasa, Bisnis dan
Manajemen. yang terletak di Surabaya, tepatnya di Pandugo 10A Surabaya. SPDC
didirikan pada 25 Agustus 2010.
Sebagai Lembaga Pendidikan yang berada dalam naungan Direktorat
Pembinaan Kursus dan Kelembagaan-Direktorat Jenderal Pendidikan Luar
Sekolah-Departemen Pendidikan Nasional, SPDC harus selalu berkembang dan
inovatif mengikuti perkembangan masyarakat dan era teknologi dengan tidak
mengenyampingkan faktor efisiensi, efektivitas dan relevansi.
Banyaknya masyarakat produktif yang putus sekolah tidak dapat
melanjutkan ke pendidikan yang lebih tinggi merupakan salah satu hal minimnya
bidang yang sebetulnya merupakan bidang-bidang yang dapat menciptakan
lapangan-lapangan kerja dan dapat memberikan penghasilan.
Kedepannya, dengan perbaikan sistem-sistem yang ada, SPDC dapat
semakin memperbaiki dan melengkapi kebutuhan masyarakat pada pemanfaatan
teknologi informasi global yang semakin berkembang pesat.
2.1.2 Visi Dan Misi SPDC
Visi :
1. Mengembangkan teknologi informasi dalam rangka meningkatkan
pendidikan dan kesejahteraan masyarakat.
2. Menjadi perusahaan IT yang berkualitas dan dikenal dalam skala
nasional.
3. Menjadi Lembaga Pendidikan disiplin, bermutu, kreatif dan inovatif
dengan lulusan yang mampu bersaing global dan mandiri.
Misi :
1. Mengembangkan produk industria IT yang kompetitif.
2. Mengedepankan profesionalisme dan teamwork dalam menghasilkan layanan yang berkualitas.
3. Memberikan layanan yang terbaik pada klien.
4. Mengembangkan kerjasama dan kemitraan usaha yang saling
menguntungkan.
5. Mengembangkan inovasi teknologi terbaik dan terkini dalam setiap
produk.
7. Menyelenggarakan program pendidikan yang profesional dan
kompetitif serta link terhadap dunia kerja.
Tujuan :
Visi dan misi yang dikembangkan bertujuan sebagai berikut:
1. Mendapatkan keuntungan dan kemitraan usaha yang sinergi dan
berkelanjutan.
2. Menyediakan program pendidikan yang bermutu sesuai dengan
kebutuhan dunia usaha dan industri.
3. Menyelenggarakan standar mutu pendidikan yang selaras antara
disiplin keilmuan dengan tantangan perkembangan dunia usaha dan
industri serta pengabdian pada masyarakat.
4. Mencetak lulusan yang bermutu, beretika dan bermoral untuk dapat
menunjang dan mengembangkan dunia usaha serta industri
dengan memiliki kompetensi inti antara lain:
a. Memiliki keterampilan yang dibutuhkan di dunia kerja.
b.Memiliki etos kerja yang tinggi.
c. Mampu memanfaatkan teknologi informasi.
d.Memiliki kemampuan berbahasa Komunikasi dan Kerja (Inggris,
2.1.3 Struktur Organisasi SPDC Surabaya
2.2 Komputer Sebagai Alat Bantu Pembelajaran
Kemajuan media komputer memberikan beberapa kelebihan untuk
kegiatan produksi audio visual. Pada tahun – tahun belakangan komputer mendapat perhatian besar karena kemampuannya yang dapat digunakan dalam
bidang kegiatan pembelajaran. Ditambah dengan teknologi jaringan dan internet,
komputer seakan menjadi primadona dalam kegiatan pembelajaran.
Pembelajaran yang dibantu komputer dikenal dengan nama CAI yaitu
Computer Assited Instruction. Prinsip pembelajaran ini menggunakan komputer sebagai alat bantu menyampaikan pelajaran yang user secara interaktif. Perubahan metode pembelajaran dan pengajaran telah menyebabkan alat yang digunakan
menjadi meluas, misalnya : video, audio, slide dan film.
CAI (Computer assited Instruction) yaitu penggunaan komputer secara langsung dengan user untuk menyampaikan pelajaran, memberikan latihan dan
mengetes kemajuan belajar user. CAI (Computer assited Instruction) juga bermacam – macam bentuknya bergantung kecakapan pendesain pengembang
pembelajarannya, bisa berbentuk permainan (games), mengajarkan konsep – konsep abstrak yang kemudian dikonkritkan dalam bentuk visual dan audio yang dianimasikan.
Jadi CAI (Computer assited Instruction) adalah penggunaan komputer sebagai alat bantu dalam dunia pendidikan dan pengajaran. CAI (Computer
assited Instruction) membantu siswa memahami suatu materi dan dapat mengulang materi tersebut berulang kali sampai siswa benar – benar menguasai
a. Untuk Tujuan Kognitif
Komputer dapat mengajarkan konsep – konsep aturan, prinsip,
langkah – langkah, proses dan kalkulasi yang kompleks. Komputer
juga dapat menjelaskan konsep tersebut dengan sederhana dengan
penggabungan visual dan audio yang di animasikan.
b. Untuk Tujuan Psikomotor
Dengan bentuk pembelajaran yang dikemas dalam bentuk games dan
simulasi sangat bagus digunakan untuk menciptakan kondisi dunia
kerja. Beberapa contoh program antara lain : simulasi pendaratan
pesawat, simulasi perang dalam medan yang paling berat dan
sebagainya.
c. Untuk Tujuan Afektif
Bila program didesain secara tepat dengan memberikan potongan klip
suara atau video yang isinya menggugah perasaan, pembelajaran sikap/afektif pun dapat dilakukan menggunakan metode komputer.
2.2.1 Keistimewaan Pemakaian Komputer Dalam Proses Pembelajaran
a. Komputer bisa mengajar secara individual (individualisasi dalam
proses pembelajaran) kecepatan bisa sesuaikan dengan kemampuan
siswa, metode/strategi belajar yang lebih tepat, penyesuaian isi materi
dan tingkat kesukaran.
b. Bisa digunakan kapan saja (tidak terbatas waktu) dan bisa digunakan
c. Hilangkan rasa malu takut
2.2.2 Bentuk Penerapan Aplikasi CAI (Computer Assisted Instruction) dalam Pembelajaran
a. Drill & Practice
1. Tujuan
Setelah menjalankan program Drill & Practice ini siswa akan lebih terampil, cepat dan tepat dalam melakukan suatu keterampilan.
Misalnya keterampilan mengetik, atau menjawab soal hitungan.
2. Isi
Disini siswa dianggap sudah mengetahui teori yang mendasari
keterampilan itu mengetahui cara/prosedur mengerjakannya. Jadi
Drill & Practice tidak ada bagian penjelasan, yang ada hanya sejumlah soal/pertanyaan dan feedback. Soal/pertanyaan –
pertanyaan tersebut diberikan dalam suatu urutan (sequence) tertentu.
Umumnya control yang dimiliki siswa sangat terbatas. Siswa
hanya dapat memilih tingkat kesulitan materi, sedangkan alur dari
penyajian isi di kontrol oleh sistem.
b. Tutorial
1. Tujuan
Membuat siswa memahami suatu konsep/materi yang baku.
2. Isi
Kemudian diikuti dengan sejumlah pertanyaan, atau latihan soal
untuk memeriksa pemahaman siswa terhadap materi tersebut.
Siswa berinteraksi dengan komputer seperti siswa berinteraksi
dengan guru (one to one session). Bila materi yang akan diberikan cukup banyak, maka penyajiannya akan diberikan secara bertahap,
mulai dari materi dasar ke tingkat yang lebih tinggi dan seterusnya.
Selain itu ada pula sejumlah pertanyaan yang pemunculannya
dibuat random.
3. Games Edutainment
Materi atau konteks dari permainan merupakan hal yang ingin
diajarkan, sekaligus juga berperan sebagai motivator. Pendekatan
motivasi dibedakan antara lain :
a. Motivasi Intrinsik : tidak ada reward seperti point.
Menimbulkan Motivasi Intrinsik harus ada tiga hal :
1. Challenge : goal dari permainan harus jelas.
2. Fantasy : adanya situasi permainan yang merangsang
munculnya imaginasi user.
3. Curiosity : ada unsur yang baru bagi user tetapi yang tidak menyebabkan permainan menjadi sukar.
b. Motivasi Ekstrinsik : ada reward dari luar, misalnya point. 4. Mindtools
Mindtools alat bantu belajar yang menyediakan sejumlah fasilitas atau fungsi yang dapat dipakai untuk digunakan siswa dalam
Lingkungan pembelajaran yang disajikan pada siswa bukan
berpatokan pada struktur materi yang sudah dirancang alurnya oleh
programmer, akan tetapi justru hanya memberikan sejumlah
fasilitas atau alat untuk digunakan siswa dalam mengambil dan
merancang alur belajarnya sendiri. Berangkat dari asumsi dasar
bahwa siswa itu mempunyai perbedaan dalam daya tangkap,
lingkup pengetahuan yang sudah dimiliki (prior knowledge), keterampilan belajar, minat, maupun motivasi belajar.
Keterampilan berfikir adalah keterampilan yang harus dengan
sengaja dipelajari, bukan bersifat bawaan lahir. Keterampilan
belajar inilah yang menjadikannya self-regulated.
5. Simulation
a. Tujuan
Proses simulasi biasanya digunakan untuk mengajarkan proses
atau konsep yang tidak secara mudah dapat dilihat, seperti
bagaimana bekerjanya proses ekonomi atau bagaimana
hubungan antara supply & demand terhadap harga dan seterusnya.
b. Isi
Suatu konsep atau keadaan yang akan di eksplorasi proses
perubahan atau terjadinya. Siswa akan diberikan sejumlah
variabel (beserta parameternya) yang dapat dimainkan/manipulasi untuk menimbulkan keadaan tertentu.
percobaannya siswa akan mengerti prinsip dari terjadinya
proses tersebut.
c. Keuntungan
Berlangsungnya proses dapat diatur kecepatannya, dapat
dipercepat atau diperlambat. Variabel – variabel yang berpengaruh terhadap proses perubahan dapat secara langsung
dimainkan, atau dimanipulasi siswa sehingga dapat melihat
langsung bagaimana pengaruh setiap variabel itu. Umumnya
siswa akan lebih termotivasi menjalankan simulasi disbanding
Drill & Practice atau tutorial, karena siswa punya kontrol terhadap variabel yang dipilihnya rasa ingin tahunya terpenuhi.
2.3 Multimedia
Multimedia adalah penggunaan komputer untuk menyajikan dan
menggabungkan teks, suara, gambar, animasi dan video dengan alat bantu (tool) dan koneksi (link) sehingga pengguna dapat melakukan navigasi, berinteraksi,
berkarya dan berkomunikasi. Multimedia sering digunakan dalam dunia hiburan.
Selain dari dunia hiburan, Multimedia juga diadopsi oleh dunia game.
Multimedia dimanfaatkan juga dalam dunia pendidikan dan bisnis. Di dunia
pendidikan, multimedia digunakan sebagai media pengajaran, baik dalam kelas
maupun secara sendiri-sendiri. Di dunia bisnis, multimedia digunakan sebagai
media profil perusahaan, profil produk, bahkan sebagai media kios informasi dan
Pada awalnya multimedia hanya mencakup media yang menjadi konsumsi
indra penglihatan (gambar diam, teks, gambar gerak video, dan gambar gerak rekaan/animasi), dan konsumsi indra pendengaran (suara). Dalam
perkembangannya multimedia mencakup juga kinetik (gerak) dan bau yang
merupakan konsupsi indra penciuman. Multimedia mulai memasukkan unsur
kinetik sejak diaplikasikan pada pertunjukan film 3 dimensi yang digabungkan
dengan gerakan pada kursi tempat duduk penonton. Kinetik dan film 3 dimensi
membangkitkan sense realistis.
Bau mulai menjadi bagian dari multimedia sejak ditemukan teknologi
reproduksi bau melalui telekomunikasi. Dengan perangkat input pendeteksi bau,
seorang operator dapat mengirimkan hasil digitizing bau tersebut melalui internet.
Komputer penerima harus menyediakan perangkat output berupa mesin reproduksi bau. Mesin reproduksi bau ini mencampurkan berbagai jenis bahan bau
yang setelah dicampur menghasilkan output berupa bau yang mirip dengan data
yang dikirim dari internet.
2.4 Adobe Flash
Adobe Flash merupakan sebuah program yang didesain khusus oleh Adobe
dan program aplikasi standar authoring tool professional yang digunakan untuk
membuat animasi dan bitmap yang sangat menarik untuk keperluan pembangunan situs web yang interaktif dan dinamis. Flash didesain dengan kemampuan untuk
membuat animasi logo, movie, game, pembuatan navigasi pada situs web, tombol
animasi, banner, menu interaktif, interaktif form isian, e-card, screen saver dan pembuatan aplikasi-aplikasi web lainnya. Dalam Flash, terdapat teknik-teknik
membuat animasi, fasilitas action script, filter, custom easing dan dapat memasukkan video lengkap dengan fasilitas playback FLV. Keunggulan yang dimiliki oleh Flash ini adalah ia mampu diberikan sedikit code pemograman baik
yang berjalan sendiri untuk mengatur animasi yang ada didalamnya atau
digunakan untuk berkomunikasi dengan program lain seperti HTML, PHP, dan
Database dengan pendekatan XML, dapat dikolaborasikan dengan web, karena mempunyai keunggulan antara lain kecil dalam ukuran file output-nya.
Multimedia adalah kombinasi dari sebuah teks, foto, seni grafis, suara,
animasi dan elemen – elemen video yang dimanipulasi secara digital. Meskipun definisi multimedia sangat sederhana, cara untuk menjalankannya sangat
kompleks. Multimedia secara khusus dibedakan menjadi dua bagian, yaitu :
multimedia linier, adalah multimedia yang tidak melibatkan user secara langsung dalam proses berjalannya. Seperti contohnya menonton film atau televisi. User
hanya perlu duduk dan diam dan menonton. Sedangkan multimedia non-linier
adalah multimedia yang melibatkan user secara langsung, dimana user diberikan control navigasi agar dapat menjelajah ke dalam isi dari multimedia tersebut
sesuai dengan keinginan.
Adobe Flash Professional CS5 adalah sebuah perangkat lunak standar
desain ekspresif seperti mesin multibahasa teks baru dan lebih realistis invers
kinematika efek dengan fitur hemat waktu pembangunan seperti potongan kode
extensible dan ActionScript ditingkatkan authoring pilihan.
2.4.1 Area Kerja Adobe Flash CS5
Area kerja di Flash terdiri dari lima komponen, yaitu Menu, Toolbox,
Timeline, Stage dan Panel. Lima komponen tersebut yang akan digunakan untuk membangun aplikasi ini. Berikut adalah tampilan awal Adobe Flash lengkap dengan Menu, Toolbox, Timeline, Stage dan Panel beserta penjelasan fungsi -
fungsinya.
1. Menu
Berisi kontrol untuk menyimpan berbagai fungsi seperti membuat,
membuka dan menyimpan file, copy, paste dan lain – lain.
2. Toolbox
Merupakan perangkat utama untuk menggambar dalam flash toolbox
terbagi dalam 4 bagian, yaitu : tool, view, colour, dan option.Tool selain
terdiri atas perangkat untuk menggambar dan untuk menuliskan teks juga
terdapat perangkat untuk memilih objek yang nantinya akan dimodifikasi.
View menyediakan perangkat hand yang digunakan untuk memindahkan
stage dan perangkat zoom yang digunakan untuk memperbesar dan memperkecil gambar. Colour menyediakan perangkat untuk mewarnai dan mengubah bentuk garis, mewarnai isi objek dan teks, bagian akhir dari
toolbox yaitu optional untuk tool yang sedang aktif. Jika toolbox tidak terlihat dilayar, maka anda bisa menampilkannya dengan menggunakan
Gambar 2.3 Toolbox Flash
Keterangan pada Gambar 2.3 :
a. Selection Tool (V) untuk menyeleksi objek
b. Subselection Tool (A) untuk menyeleksi bagian dalam objek untuk proses editing.
c. Free Transform Tool (Q) untuk mengubah bentuk objek secara bebas
d. 3D Rotation Tool (W) untuk melakukan rotasi 3D pada objek berdasarkan sumbu X, Y dan Z
e. Lasso Tool (L) untuk menyeleksi objek dengan pola seleksi bebas f. Pen Tool (P) untuk menggambar objek
g. Text Tool (T) untuk mengetik teks dan paragraph
j. Pencil Tool (Y) untuk menggambar dengan bentuk goresan pensil
k. Brush Tool (B) untuk menggambar dengan bentul polesan kuas
l. Deco Tool (U) untuk menggambar corak dekorasi dengan menggunakan
simbol grafik
m.Bone Tool (X) untuk membuat animasi pertulangan dengan menambahkan titik sendi objek
n. Paint Bucket Tool (K) untuk memberi warna bidang objek
o. Eyedropper Tool (I) untuk mengambil sampel warna dari sebuah objek
p. Erasser Tool (E) untuk menghapus bidang objek
q. Hand Tool (H) untuk menggeser area lembar kerja atau stage
r. Zoom Tool (M, Z) untuk memperbesar atau memperkecil tampilan
lembar kerja atau stage
s. Stroke Color untuk menentukan warna garis t. Fill Color untuk menentukan warna bidang objek
u. Black and White untuk mengubah warna garis dan bidang menjadi hitam dan putih
v. Swap Color untuk membalik warna antara warna garis dan warna bidang objek
w.Object Drawing mengaktifkan atau mematikan fungsi Object Drawing
3. Timeline
Timeline atau garis waktu merupakan komponen yang digunakan untuk mengatur atau mengontrol jalannya animasi. Timeline terdiri dari beberapa
dalam stage agar dapat diolah dengan objek lain. Setiap layer terdiri dari
frame - frame yang digunakan untuk mengatur kecepatan animasi. Semakin panjang frame dalam layer, maka semakin lama animasi akan
berjalan.
4. Stage
Stage adalah area kerja dimana anda membuat semua elemen movie flash.
Jika diinginkan anda bisa mengubah ukuran dan warna latar belakang
stage. dan satu file .fla hanya mempunyai latar belakang yang sama. Sehingga, ketika ada 1 stage yang berubah, maka stage dari scene yang lain ikut berubah. Maka dari itu pemilihan background harus sesuai
dengan tema dan konsep pembelajaran. Sehingga background secara paten akan digunakan dari semua scene.
5. Panel
1. Berisi kontrol fungsi yang dipakai dalam flash secara default flash
akan menampilkan empat panel yaitu : info, mixer, character dan
instance.
2. Panel info berisi keterangan mengenai objek yang sedang aktif, salah
satunya keterangan mengenai koordinat objek.
3. Panels Character berisi pengaturan properti dan atribut text.
4. Panels Mixer digunakan untuk pengaturan warna.
5. Panels Instance berisi keterangan apakah objek yang aktif itu berupa
2.4.2 Animasi Dalam Flash
Animasi dibuat dengan membentuk serangkaian frame yang berisi grafik didalam timeline. Keyframe adalah frame dimana terdapat perubahan yang
spesifik didalam animasi. Sebuah movieflash dapat dibagi dalam berbagai scene,
dan biasanya satu scene menampilkan 1 adegan. Tujuan pembagian movie ke dalam scene adalah untuk memudahkan dalam mengorganisasikan movie. Ada
beberapa cara dalam pembuatan suatu animasi dalam flash yaitu : a. Animasi Keyframe to Keyframe
Biasanya cara ini digunakan untuk membuat animasi yang membutuhkan
penggambaran frame to frame, contoh nya adalah seperti pada film kartun. Adapun kerugian menggunakan cara ini adalah ukuran file akan menjadi
sangat besar, karena setiap frame membutuhkan satu penggambaran yang
jelas dan berbeda lagi dengan penggambaran frame berikutnya. b. Animasi Motion Tween
Cara ini digunakan khusus untuk menganimasikan instance, sehingga apabila objek yang akan diberi motion tween bukan instance maka flash
akan membuat simbol objek tersebut di library dengan nama tween 1,
tween 2 dan seterusnya. Dengan menggunakan cara ini ukuran file pada
movie akan lebih kecil bila dibandingkan dengan menggunakan keyframe to keyframe, karena pada dasarnya cara ini hanya membutuhkan satu penggambaran pasa satu frame saja dan untuk frame – frame berikutnya
Biasanya cara ini digunakan untuk pembuatan animasi dengan teknik
morphing. Dengan menggunakan cara ini ukuran file yang terbentuk tidak berbeda jauh dengan menggunakan cara motion tween. Karena cara ini
hanyalah membutuhkan penggambaran pada frame awal dan frame akhir saja, dimana penggambaran dari frame awal berbeda dengan frame akhir.
Tapi hasil sweep tween kadang – kadang tidak sesuai dengan yang
diharapkan, oleh karena itu dibutuhkan adanya shape hints. Dengan bantuan shape hints, dapat ditetapkan titik – titik tertentu pada awal
keyframe yang akan berada di posisi tertentu pada akhir keyframe. Apabila
shape hints telah ditempatkan dengan benar, maka shape hints pada
keyframe awal akan berubah bentuk. d. Animasi Motion Guide
Cara animasi berulang ini biasa digunakan sebagai background atau untuk pembuatan menu yang terus berputar, orang berjalan dan rotasi planet.
Prinsip utama dari cara ini adalah membuat frame awal dan frame akhir dimana objek yang ada di dalam frame awal dan objek yang ada di dalam
frame akhir mempunyai bentuk yang sama atau hampir sama.
2.4.3 Action Script
Action Script adalah bahasa script yang digunakan pada Flash Action Script memiliki beberapa fungsi yang dapat membantu dalam merancang situs
a. Membuat Sistem Navigasi Situs.
Hal ini berkaitan dengan bagaimana ActionScript dapat mengantar user menjelajahi situs. Tidak hanya menjadi “film iklan” belaka.
b. Menambah Interaktif Dengan User
Dengan ActionScript user dapat berinteraksi dengan setiap elemen didalam movieflash, baik itu tombol, movieclip maupun teks.
c. Membuat Situs Dinamis
ActionScript dapat digabungkan dengan berbagai bahasa lain
seperti JavaScript, ASP, PHP, CGI, MySQL atau XML. Untuk membuat berbagai aplikasi yang sulit atau tidak dapat dibuat hanya dengan
actionscript saja. Misalnya untuk membuat suatu sistem database
sehingga situs flash anda dapat di update secara rutin dan otomatis.
d. Mempertahankan User Untuk Kembali Mengunjungi Situs
ActionScript dapat membuat situs flash yang menarik dan interaktif, yang akan menambah kualitas user experience saat menjelajah situs. Misalnya dengan adanya game dalam situs tersebut.,
secara tidak langsung hal ini dapat mempertahankan user untuk kembali mengunjungi situs tersebut.
Actionscript dibuat dalam action panel, adapun kelebihan dari action panel
adalah dapat mengotomatisasi sebagian dari proses penulisan script. Misalnya menghasilkan curly braces dan semicolon secara otomatis. Didalam flash nama
action panel muncul sebagai frame action panel bila script diaplikasikan ke frame
atau object action panel bila script diaplikasikan ke object.
a. Normal Mode ditujukan bagi mereka yang belum terbiasa dengan bahasa
pemrograman.
b. Expert Mode ditujukan bagi mereka yang sudah terbiasa dengan bahasa
pemrograman.
Adobe ActionScript 3.0 adalah versi terbaru dari ActionScript yang dikeluarkan Adobe. Adobe ActionScript 3.0 lebih simpel, global, dan lebih
berbasis objek. Tidak seperti saat ActionScript 2 dan sebelumnya saat ActionScript
hanya merupakan bahasa pemrograman yang digunakan oleh Flash, Adobe
ActionScript 3.0 sekarang merupakan bahasa pemrograman global bagi seluruh produk Adobe. Adobe ActionScript 3 mulai tersedia di Adobe Flash versi CS3 ke atas. Berikut adalah beberapa perbedaan mendasar ActionScript 2 dan Adobe
ActionScript 3.0:
a. Pemberian aksi pada button:
ActionScript 2:
Aksi disimpan di button dan sintaksnya adalah:
on(release) {
play();
}
ActionScript 3:
Aksi disimpan di frame dan dibuat fungsi terlebih dahulu. Sintaksnya adalah:
{
play();
}
namainstancetombol.addEventListener(MouseEvent.CLICK, main);
b. Validasi:
Pada ActionScript 3 baris kode program harus lebih tervalidasi. Contoh pada pemanggilan fscommand fullscreen:
ActionScript 2:
Pada ActionScript 2 tidak terlalu bermasalah jika baris kode program tidak
terlalu tervalidasi.
Benar: fscommand(“fullscreen”,true);
Benar: fscommand(“fullscreen”,”true”);
ActionScript 3:
Pada ActionScript 3 harus lebih tervalidasi, jika tidak maka kompiler error
Salah: fscommand(“fullscreen”,true);
Benar: fscommand(“fullscreen”,”true”);
c. Menggerakkan playhead dalam movie:
ActionScript 2:
ActionScript 3:
Pada actionscript 3 penempatan nama scene dan nomor frame dibalik:
this.gotoAndPlay(“5”,”Scene 2”);
d. Koordinat objek:
Pada ActionScript 2 kita terbiasa dengan properti _x atau _y untuk mengatur koordinat objek, pada ActionScript 3 properti-properti tersebut diganti menjadi hanya x atau hanya y dan di Adobe Flash CS4 karena
mendukung 3D juga terdapat properti z:
ActionScript 2:
Code Snippets adalah kumpulan dari script yang dapat disisipkan dalam
melakukan desain. Terkadang dalam menterjemahkan logika kedalam script
bukanlah suatu hal yang membutuhkan waktu yang cepat dalam penyelesaiannya.
Panel Code Snippets memungkinkan non-programmer untuk menerapkan
2.5 Struktur Navigasi
Struktur navigasi adalah alur sebuah program. Menentukan struktur
navigasi merupakan hal yang sebaiknya dilakukan sebelum membuat sebuah
aplikasi multimedia. Struktur navigasi digunakan untuk membantu para web
desainer dalam merancang suatu website, yang ada didalamnya menggambarkan
cara akses dan urutannya dari masing – masing tampilan dala suatu web. Struktur navigasi ditinjau dari cara pengaksesannya dibagi menjadi empat, yaitu :
a. Struktur Navigasi Linier
Gambar 2.4 Struktur Navigasi Linier
Pada struktur navigasi ini masing – masing kotak hanya
mempunyai satu penghubung (linier) dan pengaksesannya harus urut, yaitu misalnya jika ingin mengakses kotak 3 maka terlebih dahulu harus
melewati kotak 1 dan 2, atau dengan kata lain struktur linier merupakan struktur yang hanya mempunyai rangkaian cerita yang berurut. Struktur
ini menampilkan satu demi satu tampilan layar secara berurut sesuai
urutannya dan tidak diperbolehkan adanya percabangan. Tampilan yang
dapat ditampilkan adalah satu halaman sebelumnya atau satu halaman
sesudahnya. Struktur navigasi linier ini sering digunakan untuk slide
presentasi yang menampilkan halaman per halaman. Sehingga, user
tidak bisa melewati halaman seperti navigasi non-linier.
b. Struktur Navigasi Non-Linier
Gambar 2.5 Struktur Navigasi Non-Linier
Pada struktur navigasi ini masing – masing kotak mempunyai
lebih dari satu penghubung (Non - linier) dan pengaksesannya tidak
harus urut, diperkenankan membuat pejejakan bercabang. Percabangan
ini berbeda dengan percabangan pada struktur hierarki. Pada
percabangan non – linier walaupun terdapat percabangan tetapi tiap –
tiap tampilan mempunyai kedudukan yang sama tidak ada pada master page dan slave page, contohnya jika ingin mengakses ke kotak 4 tidak
harus melewati kotak 2 dan 3, tetapi langsung ke kotak 4. 1
3
4 2
c. Struktur Navigasi Hirarki
Gambar 2.6 Struktur Navigasi Hirarki
Struktur hirarki merupakan suatu struktur yang mengandalkan
percabangan untuk menampilkan data berdasarkan kriteria tertentu.
Tampilan pada menu pertama akan disebut sebagai master page,
halaman utama ke satu. Halaman utama ini akan mempunyai halaman
percabangan yang dikatakan slave page, halaman pendukung. Jika salah satu halaman pendukung diaktifkan, maka tampilan tersebut akan
bernama master page, Halaman utama kedua. Pada struktur penjejakan ini tidak diperkenankan adanya tampilan secara linier. Pada struktur navigasi ini pengaksesan dilakukan secara terurut baik itu dari atas
maupun dari bawah, misalnya jika ingin mengakses kotak 4 maka harus
melewati kotak 2 dan sebaliknya. 1
4 3
d. Struktur Navigasi Campuran
Struktur navigasi campuran merupakan gabungan dari ketiga
struktur sebelumnya. Struktur navigasi ini banyak digunakan dalam
pembuatan multimedia sebab dapat memberikan keinteraksian yang
lebih tinggi
2.6 Adobe Photoshop
Adobe Photoshop, atau biasa disebut Photoshop, adalah perangkat lunak
editor citra buatan Adobe Systems yang dikhususkan untuk pengeditan foto/gambar dan pembuatan efek. Perangkat lunak ini banyak digunakan oleh
fotografer digital dan perusahaan iklan sehingga dianggap sebagai pemimpin
pasar (market leader) untuk perangkat lunak pengolah gambar/foto, dan, bersama
Adobe Acrobat, dianggap sebagai produk terbaik yang pernah diproduksi oleh
Adobe Systems. Versi kedelapan aplikasi ini disebut dengan nama Photoshop CS
(Creative Suite), versi sembilan disebut Adobe Photoshop CS2, versi sepuluh disebut Adobe Photoshop CS3 , versi kesebelas adalah Adobe Photoshop CS4 dan
versi yang terakhir (keduabelas) adalah Adobe Photoshop CS5.
Tool dalam Adobe Photoshop adalah alat yang dapat membantu pengguna
dalam mengedit. Adobe Photoshop CS3 memilikit 59 tool yang dapat dipakai oleh pengguna. Tool - tool tersebut terdiri dari berbagai macam tool dengan kegunaan yang spesifik. Beberapa tool - tool yang ada di Photoshop antara lain :
1. History Brush Tool
3. Path Selection Tool
4. Direct Selection tool
5. Pen Tool
6. Shape Tool
7. Brush Tool
8. Audio Annotation Tool
9. Eyedropper Tool
10.Measure Tool
11.Text Tool
12.Hand Tool
Keterangan pada Gambar 2.7 :
a. Menu Bar, berisi perintah utama untuk membuka file, save, mengubah ukuran gambar, filter dan lain-lain. Juga ditampilkan keyboard
shortcuts seperti: New (Ctrl+N), Open (Ctrlp+O), dan lain-lain
b. Option, berisi pilihan dari tool yang Anda pilih. Misalnya dipilih kuas/brush, maka ukuran/diameter juga opacity brush ada di sini.
c. Gambar, menampilkan besar kanvas atau gambar yang sedang dibuka,
diedit atau dibuat.
d. Pallete Well, cara cepat untuk mengakses palet brushes, tool resets dan
Layer Comps. Juga dapat digunakan untuk meletakkan palet yang sering digunakan.
e. Toolbox, berisi tool-tool untuk menyeleksi dan memodifikasi gambar. f. Palette, berisi jendela-jendela kecil yang di dalamnya terdapat perintah
dan pilihan untuk dokumen/gambar yang sedang dikerjakan. Anda
dapat meletakkan palet yang sering digunakan sekaligus menutup palet
lain yang tidak digunakan. Panggil palet melalui menu utama window.
Photoshop juga memiliki hubungan erat dengan beberapa perangkat lunak penyunting media, animasi, dan authoring buatan Adobe lainnya. File format asli
Photoshop, .PSD, dapat diekspor ke dan dari Adobe ImageReady. Adobe Illustrator, Adobe Premiere Pro, After Effects dan Adobe Encore DVD untuk membuat DVD profesional, menyediakan penyuntingan gambar non-linear dan
untuk membuat menu dan tombol (button) DVD. Photoshop dapat menerima
penggunaan beberapa model warna:
1. RGB color model
2. Lab color model
3. CMYK color model
4. Grayscale 5. Bitmap 6. Duotone
Kelebihan Adobe Photoshop:
1. Membuat tulisan dengan effect tertentu. Photoshop dapat mengubah bentuk tulisan menjadi lebih kreatif dan inovatif dengan tool effect yang
ada didalamnya. Photoshop memiliki kemampuan untuk membaca dan menulis gambar berformat raster dan vektor seperti .png, .gif, .jpeg, dan
lain-lain. Photoshop juga memiliki beberapa format file khas: PSD
(Photoshop Document) format yang menyimpan gambar dalam bentuk
layer, termasuk teks, mask, opacity, blend mode, channel warna,
channel alpha, clipping paths, dan setting duotone. Kepopuleran
photoshop membuat format file ini digunakan secara luas, sehingga memaksa programer program penyunting gambar lainnya
menambahkan kemampuan untuk membaca format PSD dalam
perangkat lunak mereka. PSB' adalah versi terbaru dari PSD yang
didesain untuk file yang berukuran lebih dari 2 Gb. PDD adalah versi
lain dari PSD yang hanya dapat mendukung fitur perangkat lunak
2. Membuat tekstur dan material yang beragam. Dengan langkah-langkah
tertentu, seorang Desainer dapat membuat gambar misalnya daun, logam, air, dan bermacam gambar lainnya.
3. Mengedit foto dan gambar yang sudah ada. Ada desain grafis vector and vexel. Adobe menyediakan filter "reduce grain" (mengurangi grain) yang dapat membantu mengoptimalkan foto yang diambil pada
kondisi kekurangan cahaya.
4. Memproses materi Web. Photoshop juga digunakan untuk keperluan
web, misalnya: kompresi file gambar agar ukurannya lebih kecil, memotong gambar kecil-kecil (slice), dan membuat web photo gallery.
Dengan Adobe Image Ready, gambar yang sudah ada bisa dibuat untuk
keperluan web, misalnya menjadi rollover dan animasi GIF.
2.7 Adobe Illustrator
Adobe Illustrator adalah perangkat lunak desain grafis yang dapat digunakan untuk membentuk objek secara tiga dimensi dengan hasil yang
diperoleh menjadi bagus. Adobe Ilustrator versi terbaru adalah Adobe Illustrator
CS5 merupakan penyempurnaan dari versi sebelumnya. Fasilitas yang ada pada
versi sebelumnya sudah sedemikian bagus untuk membuat berbagai macam objek,
dapat dibayangkan fasilitas pada versi barunya.
Fitur-fitur Adobe Illustrator CS 5:
1) Tools drawing yang sangat banyak.
3) Menciptakan gambar perspektif
4) Transparansi gradient
5) Tipografi tingkat lanjutan
6) Support windows xp/ windows 7 32 bit dan 64 bit
Adapun keunggulan illustrator dan Progam Desain vektor sejenis adalah
1. Tidak kehilangan resolusi
2. Garis yang jelas terlihat pada tiap ukuran
3. Mampu Mencetak dengan resolusi tinggi
4. Ukuran file kecil
5. dan baik untuk gambar ilustrasi
Area Kerja Adobe Illustrator :
Keterangan Gambar 2.8 :
1. Menu Bar
Fasilitas yang dapat di gunakan sepetri file, edit, objek, type, select,
filter, dll yang mana akan mempermudah pekerjaan jika ingin menambahkan efek, save pekerjaan, print, dan lain-lain.
2. Property Bar
Menunjukan kedetailan yang dihasilkan pada toolbox maksudnya
adalah jika mengklik salah satu toolbox maka dapat mengatur opsi dari
toolbox pada area property bar.
3. Toolbox
Perangkat yang membantu dalam pengerjaan di area kerja untuk
membuat desain dan ilustrasi.
4. Status Bar
Menampilakan nama tool yang sedang digunakan data, hari, dan tanggal (date and time) saat sedang mengerjakan artwork, jenis warna
dari dokumen yang sedang di kerjakan serta fasilitas Help dari adobe illustrator
5. Artboard Area
Area kerja untuk menghasilkan desain yang merupakan bagian utama
menggambar tetapi jika ingin hasil kerja di print/cetak harus berada di
dalam area ini.
6. Palletes
Fungsinya sama seperti toolbox yang gunanya untuk memberi warna dan beberapa pekerjaan lain yang dapat mempermudah hasil desainnya
nanti ,untuk menampilkan opsinya yang lain dapat di centang di
window lalu centanglah beberapa yang di perlukan seperti color, swatches, gradient, stroke, tranparancy. Untuk membesarkannya klik
pada bagian panah.
2.8 Adobe Dreamweaver
Adobe Dreamweaver merupakan program penyunting halaman web
keluaran Adobe Systems yang dulu dikenal sebagai Macromedia Dreamweaver
keluaran Macromedia. Program ini banyak digunakan oleh pengembang web
karena fitur-fiturnya yang menarik dan kemudahan penggunaannya. Versi
terakhir Macromedia Dreamweaver sebelum Macromedia dibeli oleh Adobe
Systems yaitu versi 8. Versi terakhir Dreamweaver keluaran Adobe Systems adalah
Adobe Creative Suite 5 (sering disingkat Adobe CS5).
2.8.1 XML
XML (Extensible Markup Language) adalah bahasa markup untuk
keperluan umum yang disarankan oleh W3C untuk membuat dokumen markup
kelanjutan dari HTML (HyperText Markup Language) yang merupakan bahasa
standar untuk melacak Internet.
XML didesain untuk mempu menyimpan data secara ringkas dan mudah
diatur. Kata kunci utama XML adalah data (jamak dari datum) yang jika diolah
bisa memberikan informasi. XML menyediakan suatu cara terstandarisasi namun
bisa dimodifikasi untuk menggambarkan isi dari dokumen. Dengan sendirinya,
XML dapat digunakan untuk menggambarkan sembarang view database, tetapi dengan suatu cara yang standar.
Keunggulan XML bisa diringkas sebagai berikut :
1. Pintar (Intelligence). XML dapat menangani berbagai tingkat (level) kompleksitas.
2. Dapat beradaptasi. Dapat mengadaptasi untuk membuat bahasa sendiri.
Seperti Microsoft membuat bahasa MSXML atau Macromedia
mengembangkan MXML.
3. Mudah pemeliharaannya.
4. XML lebih sederhana.
Mudah dipindah-pindahkan (Portability). XML mempunyai kemudahan perpindahan (portabilitas) yang lebih bagus.
2.9 Microsoft Visio
Microsoft Visio (atau sering disebut Visio) adalah sebuah program aplikasi
(flowchart), brainstorm, dan skema jaringan yang dirilis oleh Microsoft
Corporation. Aplikasi ini menggunakan grafik vektor untuk membuat diagram-diagramnya.
Visio aslinya bukanlah buatan Microsoft Corporation, melainkan buatan
Visio Corporation, yang diakusisisi oleh Microsoft pada tahun 2000. Versi yang telah menggunakan nama Microsoft Visio adalah Visio 2002, Visio 2003, Visio
2007 dan Visio 2010 yang merupakan versi terbaru. Visio 2010 Standard dan
Professional menawarkan antarmuka pengguna yang sama, tapi seri Professional
menawarkan lebih banyak pilihan template untuk pembuatan diagram yang lebih lanjut dan juga penataan letak (layout). Selain itu, edisi Professional juga memudahkan pengguna untuk mengoneksikan diagram-diagram buatan mereka
terhadap beberapa sumber data dan juga menampilkan informasi secara visual
dengan menggunakan grafik.
2.9.1 Sistem Diagram Alir ( Flowchart System )
Sistem flowchart merupakan alat bantu yang banyak digunakan untuk
menggambarkan sistem secara phisik dengan simbol-simbol bagan alir yang
menunjukkan secara tepat arti phisiknya seperti simbol : terminal, hard disk, laporan dan lain-lainnya.
Adapun simbol-simbol standar yang digunakan untuk membuat bagan alir
adalah sebagai berikut :
Simbol ini digunakan untuk menggambarkan semua
jenis dokument input dan output baik untuk proses
manual, mekanik maupun komputer.
Simbol Kegiatan Manual
Simbol ini digunakan untuk menggambarkan kegiatan
manual.
Simbol Operasi Luar
Simbol ini menunjukkan operasi yang dilakukan
diluar komputer
Simbol Arsip Sementara
Simbol ini digunakan untuk menggambarkan tempat
penyimpanan dokumen yang dokumennya akan
diambil kembali dari arsip tersebut dimasa yang akan
datang untuk keperluan pengolahan lebih lanjut
terhadap dokumen tersebut urutan pengarsipan
dokumen digunakan simbol berikut :
A : menurut Abjad
N : menurut Nomor Urut
Simbol Penghubung
Penghubung pada halaman yang sama. Dalam
menggambarkan bagan alir dokumen dibuat mengalir
dari atas ke bawah dan dari kiri kekanan. Karena
keterbatasan ruang halaman kertas untuk
menggambarkan maka diperlukan simbol penghubung
yang memungkinkan aliran dokumen berhenti disuatu
lokasi pada halaman tertentu dan kembali berjalan
dilokasi lain pada halaman yang sama.
Simbol Penghubung
Penghubung pada halaman yang berbeda. Dalam
menggambarkan bagan alir dokumen dibuat mengalir
dari atas ke bawah dan dari kiri kekanan. Karena
keterbatasan ruang halaman kertas untuk
menggambarkan maka diperlukan simbol penghubung
yang memungkinkan aliran dokumen berhenti disuatu
lokasi pada halaman tertentu dan kembali berjalan
dilokasi lain pada halaman yang berbeda.
Simbol Terminal
Simbol ini digunakan untuk menggambarkan awal
Simbol Keputusan
Simbol ini menggambarkan keputusan yang harus
dibuat dalam proses pengolahan data.
2.10 Interaksi Manusia dan Komputer
Menurut Rizky (2006:4) Human Computer Interaction (HCI) atau
Interaksi Manusia dan Komputer (IMK) adalah sebuah disiplin ilmu yang
mempelajari desain, evaluasi, implementasi dari sistem komputer interaktif untuk
dipakai oleh manusia, beserta studi tentang faktor-faktor utama dalam lingkungan
interaksinya. Di dalam proses implementasinya IMK dipengaruhi berbagai macam
faktor. Menurut Rizky (2006:5) faktor-faktor tersebut antara lain:
1. Organisasi
Yang dimaksud sebagai organisasi dalam lingkup ini adalah tempat
kerja bagi para pengguna, yang nantinya akan membawa efek terhadap
tugas serta tanggung jawab yang harus diemban oleh pengguna. Selain
itu, kebijakan dari organisasi tersebut juga sangat mempengaruhi
implementasi dari IMK.
2. Lingkungan
Lingkungan sekitar pengguna dapat menjadi sebuah faktor yang
mempengaruhi dari subyektifitas penilaian sebuah desain. Sebuah
aplikasi yang didesain dalam sebuah lingkungan yang bising atau ramai,
akan sangat berbeda dengan sebuah aplikasi yang memang ditujukan
3. Kesehatan
Faktor yang satu ini seringkali terlupakan oleh para programmer saat
melakukan perancangan antar muka dalam kaitannya dengan IMK.
Faktor kesehatan yang dimaksud bisa berupa kombinasi warna dalam
desain antar muka bagi pengguna dengan intensitas yang sangat tinggi
yang dapat mengakibatkan sakit kepala saat bekerja, atau juga
kombinasi tombol shortcut pada keyboard yang dapat mengakibatkan kelelahan pada tangan saat bekerja dengan frekuensi yang sangat akut.
4. Pengguna
Faktor pengguna merupakan salah satu faktor yang sangat kompleks,
karena selain dari tingkat pendidikan dan pemahaman masing-masing
pengguna yang dipastikan berbeda, faktor ini juga dipicu oleh
kenyamanan yang dipastikan subyektif dalam penilaiannya, juga faktor
pengalaman dan trauma khusus bagi para pengguna yang sebelumnya
telah memakai sebuah aplikasi dengan desain antar muka tertentu.
5. Kenyamanan
Faktor kenyamanan merupakan faktor dependan dari berbagai faktor
lain, seperti faktor lingkungan dan faktor pengguna. Faktor ini sangat
relatif ukurannya dibanding faktor yang lain.
6. Antar muka
Sebuah antar muka dalam konteks IMK bukanlah satu-satunya faktor
7. Kendala
Dalam proses desain dan implementasi sebuah aplikasi yang dianggap
ideal, tiap tim ataupun individu yang terlibat di dalamnya pasti terlibat
dengan berbagai macam kendala yang akan menghambat proses
interaksi di dalamnya. Kendala yang dibahas dalam IMK lebih banyak
mengacu kepada kendala teknis, seperti waktu pengerjaan, biaya yang
harus dikeluarkan, lingkungan yang ditempati oleh pengguna serta
peralatan atau komputer yang digunakan dalam melakukan interaksi.
8. Produktifitas
Desain antar muka dapat menjadi salah satu pemicu produktifitas, tetapi
bukan menjadi satu-satunya faktor yang harus diperhitungkan. Karena
dengan desain antar muka yang dianggap nyaman oleh pengguna,
diharapkan pengguna tidak lagi dikacaukan dengan pemikiran terhadap
desain antar muka aplikasi dan dapat lebih berkonsentrasi terhadap hal
lain yang lebih dapat memacu produktifitasnya.
IMK terdiri dari komponen-komponen sebagai berikut:
1. Interaksi
Yang dimaksud interaksi dalam konteks IMK adalah komunikasi
apapun yang terjadi antara manusia dan komputer. Jenis-jenis
komunikasi antara lain: command entry, menus and navigation, forms and spreadsheets, question and answer dialogue, natural language
Dalam hal ini unsur manusia adalah pengguna yang dapat berupa
seseorang ataupun sekelompok pengguna yang bekerja dalam sebuah
tim atau organisasi dan saling berkaitan dalam mengerjakan tugas
tertentu. Manusia dalam konteks IMK merupakan faktor utama yang
perlu diperhatikan dalam konteks psikologi yang disebut sebagai
cognitive psychology. Hal ini dikarenakan bahwa tiap manusia atau pengguna berada dalam strata yang berbeda, terutama dari segi
pemahaman, level pendidikan, tradisi serta sensor indra yang dimiliki
masing-masing kelompok pengguna. (Rizky, 2006:13-14).
3. Komputer
Dalam konteks IMK, komputer bisa diartikan sebagai perangkat keras
ataupun perangkat lunak dari berbagai macam jenis yang nantinya akan
berinteraksi dengan unsur manusia. Sehingga komputer akan dipandang
sebagai sebuah alat yang akan berinteraksi terhadap manusia sebagai
3.1 Analisa Sistem
Perancangan profil untuk SPDC Surabaya pada penelitian ini dirancang
untuk menyediakan sarana media promosi dan informasi tentang segala
pembelajaran maupun pelatihan yang ada pada SPDC Surabaya. Informasi yang
disajikan dalam profil ini tidak hanya berkisar mengenai pemberitahuan program -
program, tetapi juga meliputi galeri foto dari kegiatan SPDC Surabaya.
Dengan menggunakan browser (Internet Explorer, Opera, Mozilla), aplikasi profil ini bisa diakses dan ditampilkan yang tentunya penampilannya
dengan format yang telah ditentukan, sehingga memudahan pihak Lembaga
Surfsoft Indonesia Professional Development Centre.
3.2 Kebutuhan Sistem
Sub-bab ini akan menjelaskan mengenai proses desain dari profile
interakif dan dinamis yang akan dibuat. Proses desain sistem aplikasi dalam
sub-bab ini dimana didalamnya terdapat minimal kebutuhan perangkat keras dan
perangkat lunak, flowchart dan deskripsi aplikasi kebutuhan perangkat keras.
Dalam merancang suatu aplikasi maka kita perlu menentukan jenis – jenis
atau spesifikasi perangkat keras dan perangkat lunak yang akan kita gunakan. Hal
3.2.1 Perangkat Keras
Minimal perangkat keras yang digunakan untuk membuat profil Surfsoft Indonesia Professional Development Centre adalah sebagai berikut :
a. Processor Intel Dual Core
b. RAM 2 - 4Gb DDR2
c. Monitor
d. Video Card
e. Sound Card
3.2.2 Perangkat Lunak
Minimal perangkat lunak yang digunakan untuk membuat profil Surfsoft
Indonesia Professional Development Centre adalah sebagai berikut : a. Adobe Flash CS
Adobe Flash adalah perangkat lunak yang digunakan untuk membuat suatu animasi atau media interaktif.
b. Adobe Photoshop CS
Adode Photoshop adalah sebuah perangkat lunak yang berfungsi untuk mengubah atau memanipulasi sebuah gambar maupun foto.
c. Adobe Illustrator CS
Adobe Illustrator adalah perangkat lunak yang berfungsi untuk editing suatu gambar atau objek yang berupa vektor.
d. Adobe Dreamweaver CS
3.3 Alur Aplikasi
Dalam perancangan sistem diperlukan alur aplikasi yang sistematis dan
terarah sehingga dapat terencana dengan baik. Terdapat beberapa materi yang
harus dikuasai. Setelah pengguna menguasai semua materi, diakhir program
terdapat evaluasi dari semua materi. Tahap – tahap yang akan dibahas dari awal
sampai akhir adalah sebagai berikut.:
a. Intro yang berisikan gambaran animasi awal, sebagai pembuka profil.
b. Menu Utama yang terdiri dari :
1. Home Indonesia Professional Development Centre yang dibagi lagi menjadi
empat bagian pilihan program :
1. Program School of Informatics Programming
2. Program School of Network & Security System
3. Program School of Multimedia & Graphic Design
4. Program School of Broadcasting (TV & Radio)
e. Menu Gallery yang berisi, Gallery yang berisikan dengan kegiatan dan
foto – foto yang ada.
f. Menu Contact yang berisi, alamat dari Lembaga.
Alur aplikasi diatas dapat digambarkan ke dalam diagram Flowchart
seperti pada gambar :
Gambar 3.1 Flowchart profil
Pada Gambar 3.1 dijelaskan alur diagram dari seluruh proses atau tahapan
yang dijalankan, dimana pada alur tersebut memiliki satu bagian intro dan
terdapat banyak pilihan menu pada bagian menu utamanya. Oleh Karena itu
Untuk lebih memperjelas alur diatas, maka akan diperjelas pada sub-bab berikut -
3.3.1 Menu Home
Pada menu ini terdapat tampilan Home dari Lembaga Surfsoft Indonesia
Professional Development Centre.
Gambar 3.2Flowchart Menu Home
Dijelaskan bahwa pada Gambar 3.2 alur dari Menu Home dapat menampilkan isi dari menu tersebut.
3.3.2 Menu Visi Misi
Pada menu ini terdapat tampilan Visi Misi dari Lembaga Surfsoft
Gambar 3.3Flowchart Menu Visi Misi
Dijelaskan bahwa pada Gambar 3.3 alur dari Menu Visi Misi dapat
menampilkan isi dari menu tersebut.
3.3.3 Menu Program
Menu Program yang berisi, Program – program yang ada di Surfsoft
Indonesia Professional Development Centre yang dibagi lagi menjadi empat bagian pilihan program :
1. Program School of Informatics Programming
2. Program School of Network & Security System
3. Program School of Multimedia & Graphic Design
4. Program School of Broadcasting (TV & Radio)
Dari setiap menu program terdapat tampilan dari setiap menu program yang
Gambar 3.4Flowchart Menu Program
Melalui Gambar 3.4 dapat dipahami bahwa pada menu program terdapat
pilihan lain didalamnya dimana setiap pilihan memiliki tampilan yang berbeda,
3.3.4 Menu Mitra
Pada menu ini terdapat tampilan Mitra dari Lembaga Surfsoft Indonesia Professional Development Centre.
Gambar 3.5Flowchart Menu Mitra
Dijelaskan bahwa pada Gambar 3.5 alur dari Menu Mitra dapat
menampilkan isi dari menu tersebut
3.3.5 Menu Gallery
Menu Gallery yang berisi, Gallery yang berisikan dengan kegiatan dan foto – foto yang ada dan sudah pernah dijalankan oleh Lembaga Surfsoft
Indonesia Professional Development Centre. Pada menu ini terdapat tiga gallery
kegiatan yang dapat dilihat, yaitu :
1. Kegiatan SPDC disekolah.
3. Kegiatan SPDC bersama DISPERINDAG
Gambar 3.6Flowchart Menu Gallery
Pada Gambar 3.6 dapat dilihat bahwa pada menu program terdapat pilihan
tiga kegiatan didalamnya dimana setiap kegiatan memiliki keterangan yang
berbeda.
3.3.6 Menu Contact
Menu Contact merupakan menu terakhir pada profile ini, pada menu ini
Gambar 3.7Flowchart Menu Contact
Dijelaskan bahwa pada Gambar 3.7 alur dari Menu Contact dapat menampilkan isi dari menu tersebut.
3.4 Perancangan Antar Muka
Tampilan perangkat lunak untuk profil SPDC (Surfsoft Indonesia Professional Development Centre), sebagai berikut :
1. Perangkat Lunak menampilkan seluruh program – program unggulan
Surfsoft Indonesia Professional Development Centre untuk melakukan persentasi dalam hal promosi yang dilakukan oleh pihak Surfsoft
Indonesia Professional Development Centre.
2. Perangkat Lunak menampilkan profil dari Surfsoft Indonesia
informasi dari Lembaga Surfsoft Indonesia Professional Development
Centre.
Untuk tampilan menu awal dapat dilihat pada gambar dibawah ini.
Home Visi Misi Program Mitra Gallery Contact
Isi Tampilan Menu
Credit
Gambar 3.8 Menu Utama
Selain menu utama terdapat juga objek lain seperti button dan sound untuk
memperindah animasi aplikasi ini. Berikut akan dijelaskan fungsi button dan
sound.
3.4.1 Button
