PROFIL SURFSOFT INDONESIA PROFESSIONAL DEVELOPMENT CENTRE BERBASIS MULTIMEDIA.
BERBASIS MULTIMEDIA
SKRIPSI
Disusun oleh :
DUDY HERIYANTO
NPM. 0834010190
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNOLOGI INDUSTRI
UNIVERSITAS PEMBANGUNAN NASIONAL "VETERAN"
JAWA TIMUR
2012
(2)
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
(3)
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.
7. Bapak M. Syahrul Munir, S.Kom selaku dosen pembimbing Pendamping (Pembimbing II) yang telah memberikan banyak ide, petunjuk, masukan, bimbingan, dorongan serta bantuan yang sangat berarti dan bermanfaat bagi tugas akhir ini.
(4)
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.
11.Kawan-kawan yang telah membantu dalam penyelesaian Laporan Skripsi ini. Yang telah memberikan dorongan dan doa, yang tak bisa penulis sebutkan satu persatu. Terima Kasih yang tak terhingga untuk kalian semua. Semoga Allah SWT yang membalas semua kebaikan dan bantuan tersebut.
(5)
Halaman LEMBAR PENGESAHAN
ABSTRAK ... i
KATA PENGANTAR ... ii
UCAPAN TERIMA KASIH ... iii
DAFTAR ISI ... v
DAFTAR GAMBAR ... viii
DAFTAR TABEL ... x
BAB I PENDAHULUAN ... 1
1.1. Latar Belakang ... 1
1.2. Perumusan Masalah ... 2
1.3. Batasan Masalah... 2
1.4. Tujuan Penelitian ……….. ... 3
1.5. Manfaat Penelitian ... 3
1.6. Sistematika Penulisan ... 3
BAB II TINJAUAN PUSTAKA ... 6
2.1 Sejarah Singkat SPDC ... 6
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
(6)
2.4.Adobe Flash ... 16
2.4.1 Area Kerja Adobe Flash CS5 ... 18
2.4.2 Animasi Dalam Flash ... 23
2.4.3 Action Script ... 24
2.4.4 Code Snippets ... 28
2.5.Struktur Navigasi ... 29
2.6.Adobe Photoshop ... 32
2.7.Adobe Ilustrator ... 36
2.8.Adobe Dreamweaver ... 39
2.8.1 XML ... 39
2.9Microsoft Visio ... 40
2.9.1 Sistem Diagram Alir ... 41
2.10 Interaksi Manusia dan Komputer ... 44
BAB III ANALISA DAN PERANCANGAN SISTEM ... 48
3.1 Analisa Sistem ... 48
3.2 Kebutuhan Sistem ... 48
3.2.1 Perangkat Keras ... 49
3.2.2 Perankat Lunak... 49
3.3 Alur Aplikasi ... 50
3.3.1Menu Home ... 52
3.3.2Menu Visi Misi ... 52
3.3.3Menu Program ... 53
3.3.4Menu Mitra ... 55
3.3.5Menu Gallery ... 55
3.3.6Menu Contact ... 56
3.4 Perancangan Antar Muka ... 57
3.4.1 Button ... 58
3.4.2 Sound ... 59
BAB IV IMPLEMENTASI ... 60
(7)
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
(8)
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 2.7. Area Kerja Photoshop ... 33
Gambar 2.8. Area Kerja Adobe Illustrator ... 37
Gambar 3.1. Flowchart Profil Interaktif ... 51
Gambar 3.2. Flowchart Menu Home ... 52
Gambar 3.3. Flowchart Menu Visi Misi ... 53
Gambar 3.4. Flowchart Menu Program ... 54
Gambar 3.5. Flowchart Menu Mitra ... 55
Gambar 3.6. Flowchart Menu Gallery ... 56
Gambar 3.7. Flowchart Menu Contact ... 57
Gambar 3.8. Menu Utama ... 58
Gambar 4.1. Halaman Home Profil Interaktif SPDC ... 63
Gambar 4.2. Halaman Visi Misi SPDC ... 64
Gambar 4.3. Halaman Program SPDC ... 65
Gambar 4.4. Halaman Program setelah di-scroll ... 66
Gambar 4.5. Detail Program Pilihan ... 66
Gambar 4.6. Halaman Mitra ... 67
Gambar 4.7. Halaman Gallery ... 68
Gambar 4.8. Detail Gallery ... 68
Gambar 4.9. Halaman Contact ... 69
Gambar 5.1. Halaman Program ... 71
Gambar 5.2. Submenu SPDC Program ... 72
Gambar 5.3. Detail School of Informatics Programming ... 72
(9)
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
(10)
DAFTAR TABEL
(11)
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.
(12)
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 lembaga Surfsoft Indonesia Profesional Development Centre dengan program
(13)
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 kerja sama kemitraan SPDC.
(14)
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 jelaskan pada sub bab yaitu latar belakang, perumusan masalah,
(15)
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. Sasaran dari ujicoba program adalah untuk menemukan
(16)
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 yang digunakan dalam pembuatan laporan tugas akhir ini.
(17)
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 Sumber Daya Manusia yang berkualitas dan mempunyai kompetensi di berbagai
(18)
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.
(19)
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, Jepang)
(20)
2.1.3 Struktur Organisasi SPDC Surabaya
(21)
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 materi itu. Penggunaan Komputer Dalam Kegiatan Pembelajaran
(22)
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 dimana saja (tidak terbatas ruang).
(23)
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
(24)
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 memfungsikan cara berpikirnya sehingga dapat optimal.
(25)
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. Asumsi dasar dari proses belajar disini adalah melalui
(26)
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 pelatihan dalam sistem e-learning.
(27)
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 2 dimensi yang handal dan ringan sehingga flash banyak digunakan untuk membangun dan memberikan efek animasi pada website, CD Interaktif dan yang lainnya. Selain itu aplikasi ini juga dapat digunakan untuk
(28)
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 industri untuk authoring interaktif dan pengiriman pengalaman mendalam yang hadir secara konsisten di komputer pribadi, perangkat mobile, dan layar hampir semua ukuran dan resolusi. Adobe Flash Profesional CS5 menggabungkan fitur
(29)
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.
(30)
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 menu windows tools.
(31)
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
h. Line Tool (N) untuk menggambar objek garis lurus i. Rectangle Tool (R) untuk menggambar objek kotak
(32)
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
(33)
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
(34)
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 hanyalah merupakan duplikat dari frame yang pertama.
(35)
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 atau movie flash, yaitu sebagai berikut :
(36)
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.
(37)
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:
(38)
{
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:
(39)
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:
namainstance._x=150;
namainstance._y=250;
ActionScript 3:
namainstance.x=150;
namainstance.y=250;
namainstance.z=10;
2.4.4 Code Snippets
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 kode perintah ActionScript 3.0 tanpa perlu menguasai ActionScript 3.0.
(40)
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
(41)
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
(42)
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
(43)
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
(44)
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
(45)
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 layanan special effect seperti background, tekstur, dan lain-lain untuk keperluan televisi, film, dan situs web. Sebagai contoh, Photoshop CS dapat digunakan
(46)
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
(47)
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.
(48)
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 :
(49)
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 dari sebuah proyek. Bagian diluar juga dapat digunakan untuk
(50)
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
(51)
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 komputer yang sering digunakan untuk membuat diagram, diagram alir
(52)
(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 :
(53)
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 T : menurut Tanggal
(54)
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 dan akhir suatu sistem.
(55)
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 untuk pengguna yang berada dalam lingkungan yang lebih tenang.
(56)
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 utama tetapi menjadi faktor yang terpenting.
(57)
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 dialogue, WIMP dan direct manipulation. (Rizky, 2006:8).
(58)
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 pengguna. (Rizky, 2006:20).
(59)
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 ini merupakan persiapan awal yang harus dilakukan.
(60)
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
Adobe Dreamweaver adalah perangkat lunak yang berfungsi untuk mengedit tampilan pada XML
(61)
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
2. Visi Misi 3. Program 4. Mitra 5. Gallery
6. Contact
c. 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)
d. Menu Mitra yang berisi, Mitra yang berkerjasama dengan Surfsoft Indonesia Professional Development Centre
(62)
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 - berikut ini :
(63)
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 Indonesia Professional Development Centre.
(64)
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 dipilih, dalam tampilan tersebut terdapat detail – detail dari setiap program.
(65)
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, dikarenakan isi pada program – program berbeda dengan satu dan lainnya.
(66)
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.
(67)
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 terdapat tampilan Contact dari Lembaga Surfsoft Indonesia Professional Development Centre.
(68)
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 Professional Development Centre dimana masyarakat dapat melihat
(69)
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
Button adalah sebuah tombol yang mempunyai fungsi – fungsi tertentu. Bisa sebagai link navigator, tombol play dan stop untuk animasi dan sound. Dan juga bisa digunakan sebagai tombol dimana actionscript berperan untuk animasi
(70)
yang berhubungan dengan profil Surfsoft Indonesia Professional Development Centre.
Tabel 3.1 Button yang digunakan
Tombol Contents yang digunakan untuk memberi link pada konten tertentu.
Tombol Scroll yang digunakan untuk men-scroll konten yang penulisannya melebihi ukuran dari batas konten.
Tombol kembali yang digunakan untuk kembali ke menu sebelumnya.
Tombol Home yang digunakan untuk masuk pada menu utama, diletakkan pada saat intro.
3.4.2 Sound
Sound disini digunakan untuk intro dan backsound menu utama. Penggunaan sound disini bertujuan agar tidak bosan dalam melihat paduan animasi pada profile.
(71)
BAB IV IMPLEMENTASI
Pada bab ini akan dibahas mengenai implementasi dari rancangan aplikasi yang telah dibuat pada bab sebelumnya. Bagian implementasi aplikasi ini meliputi: implementasi data, implementasi proses, dan implementasi antarmuka.
4.1 Spesifikasi Sistem
Peralatan yang digunakan untuk semua proses dari keseluruhan transaksi yang ada termasuk pembuatan laporan adalah menggunakan perangkat keras dan perangkat lunak. Pada proses pengujian ini dibutuhkan beberapa peralatan-peralatan baik berupa perangkat keras dan perangkat lunak.
4.1.1 Perangkat Keras (Hardware) yang Digunakan
1. Processor Intel Core i5
2. RAM 4Gb DDR3
3. Monitor SVGA resolusi 1366x768
4. Video Card Intel HD Mobility. 5. Sound Card.
4.1.2 Perangkat Lunak (Software) yang Digunakan
1. Sistem Operasi Microsoft Windows 7 Home Premium
Sistem Operasi yang digunakan untuk membuka aplikasi pendukung lainnya.
(72)
2. Adobe Flash CS 5
Adobe Flash adalah perangkat lunak yang digunakan untuk membuat suatu animasi atau media interaktif.
3. Adobe Photoshop CS 5
Adode Photoshop adalah sebuah perangkat lunak yang berfungsi untuk mengubah atau memanipulasi sebuah gambar maupun foto.
4. Adobe Illustrator CS 5
Adobe Illustrator adalah perangkat lunak yang berfungsi untuk editing suatu gambar atau objek yang berupa vektor.
5. Adobe Dreamweaver CS 5
Adobe Dreamweaver adalah perangkat lunak yang berfungsi untuk mengedit tampilan pada XML
4.2 Implementasi Desain Antarmuka
Pada implementasi desain antarmuka terdapat banyak sekali halaman-halaman profil dimana desain tersebut terbagi dari menu atas, kemudian isi menu dan credit. Dimana isi dari menu atas yaitu :
1. Home
Halaman Home adalah halaman yang menampilkan tampilan profil dari Surfsoft Indonesia Professional Development Centre.
2. Visi Misi
Halaman Visi Misi adalah halaman yang menampilkan Visi dan Misi dari Surfsoft Indonesia Professional Development Centre.
(73)
3. Program
Halaman Program berisikan program – program kursus yang diselenggarakan oleh Surfsoft Indonesia Professional Development Centre, dimana terdapat empat program pembelajaran yaitu :
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)
4. Mitra
Halaman Mitra berisikan dari mitra kerja dari Surfsoft Indonesia Professional Development Centre dalam berbagai bidang pendidikan. 5. Gallery
Halaman Gallery berisikan dokumentasi kegiatan – kegiatan dari
Surfsoft Indonesia Professional Development Centre. 6. Contact
Halaman Contact berisikan alamat dari Surfsoft Indonesia Professional Development Centre.
4.2.1 Home
Halaman ini akan tampil pada saat akses halaman depan atau halaman menudari SPDC (Surfsoft Professional Development Centre).
(74)
Gambar 4.1 Halaman Home Profil SPDC (Surfsoft Professional Development Centre)
Pada halaman home ini pengunjung dapat melihat profil Lembaga dan beberapa program yang ditawarkan oleh lembaga tersebut. Sebagai contoh, ada beberapa program yang bisa di lihat pada menu ini yaitu Program Profesi, Program Sertifikasi, dan Program Pelatihan. Selain program yang di tawarkan oleh lembaga, informasi penting yang menjadi acuan dari pembuatan animasi profil ini adalah mengenai profil dari SPDC (Surfsoft Professional Development Centre) Surabaya sendiri dimana di harapkan nantinya pengunjung atau calon pendaftar baru yang akan bergabung di Lembaga ini tidak merasa kurang akan informasi mengenai lembaga ini sehingga tidak perlu khawatir jika bergabung untuk mengikuti program – program yang telah disediakan oleh SPDC Surabaya.
(75)
4.2.2 Visi Misi
Halaman ini menampilkan Visi dan Misi dari SPDC (Surfsoft Professional Development Centre).
Gambar 4.2 Halaman Visi Misi SPDC (Surfsoft Professional Development Centre)
Pada halaman Visi Misi ini pengunjung dapat melihat informasi tentang Visi dan Misi dari Lembaga SPDC (Surfsoft Professional Development Centre). Untuk apa lembaga ini dibangun dan bagaimana tujuan yang sebenarnya dari lembaga ini, hal ini menjadi penting mengingat pada cita – cita yang telah di wujudkan menjadi suatu Lembaga agar dapat bermanfaat bagi masyarakat.
(76)
4.2.3 Program
Halaman ini menampilkan field untuk pengunjung agar bisa melihat program studi atau kursus yang terdapat pada SPDC (Surfsoft Professional Development Centre).
Gambar 4.3 Halaman Program SPDC
Didalam isi dari konten halaman ini terdapat button scroll dimana digunakan pada sisi konten sebelah kanan untuk melihat list tampilan program – program kursus yang ada pada Surfsoft Indonesia Professional Development Centre.
(77)
Gambar 4.4 Halaman Program seteleh di-scroll
Pada halaman Program ini pelanggan dapat melihat program – program kursus yang ada pada SPDC apabila pengunjung ingin melihat lebih lengkap informasi yang tersedia pada salah satu program, maka dapat dilihat pada detail.
(78)
4.2.4 Mitra
Mitra merupakan halaman konten yang berisikan kerjasama Surfsoft Indonesia Professional Development Centre dengan Lembaga lain diluar, dimana kerjasama yang di lakukan tersebut mencakup sertifikasi dan berbagai pelatihan yang ada.
Gambar 4.6 Halaman Mitra
4.2.5 Gallery
Halaman ini adalah halaman dimana terdapat foto – foto ataupun dokumentasi hasil dari kegiatan – kegiatan yang pernah dilaksanakan oleh Surfsoft Indonesia Professional Development Centre (SPDC), yang salah satunya adalah kegiatan pelatihan 3D Movie Animasi yang bekerja sama dengan KEMENDIKBUD
(79)
Gambar 4.7 HalamanGallery
Pada halaman Gallery ini pengunjung dapat melihat dokumentasi kegiatan maupun kursus yang ada pada SPDC. Apabila pengunjung ingin melihat lebih banyak informasi pada salah satu kegiatan, maka dapat dilihat pada detail.
Gambar 4.8 Detail Gallery
(80)
Halaman ini menampilkan informasi contact yang ada pada SPDC (Surfsoft Indonesia Professional Development Centre).
Gambar 4.9 Halaman Contact
Halaman ini menyediakan informasi contact person. Dimana pada contact person pengunjung dapat melihat alamat dan juga telepon dari Surfsoft Indonesia Professional Development Centre.
(81)
BAB V
UJICOBA DAN ANALISA SISTEM
Bab ini akan membahas mengenai uji coba terhadap sistem aplikasi profil di SPDC (Surfsoft Indonesia Professional Development Centre) yang telah dibuat dan selanjutnya akan dibuat evaluasi dari hasil uji coba tersebut. Uji coba dilaksanakan untuk mengetahui apakah sistem aplikasi dapat berjalan dengan baik sesuai perancangan yang dibuat. Evaluasi dilakukan untuk menentukan tingkat keberhasilan dari sistem yang dibuat.
5.1 Skenario Uji Coba
Untuk memastikan bahwa sistem ini berjalan dengan lancar, penulis akan menyusun skenario yang akan dicoba, antara lain:
1. Untuk mendapatkan informasi tentang pelatihan SPDC (Surfsoft Indonesia Profesional Development Centre) bisa dari profil ini yang berbasis multimedia.
2. Uji coba pelatihan SPDC (Surfsoft Indonesia Profesional Development Centre) dikonfirmasi kemudian ditampilkan kepada pelanggan tersebut.
5.2 Pelaksanaan Uji Coba
Pada sub- sub ini akan dijelaskan mengenai pelaksanaan skenario uji coba yang telah disusun pada sub- bab sebelumnya. Pada uji coba kali ini akan dicoba untuk menampilkan pelatihan-pelatihan. Sehingga dapat diketahui deskripsi pelatihan pada tiap jenis pelatihan tersebut.
(82)
5.2.1 Uji Coba Menampilkan Program
Saat pelanggan ingin melihat program, maka pelanggan akan melihat beberapa program yang ada pada Lembaga SPDC tersebut.
Gambar 5.1 Halaman Program
Setelah itu menampilkan program apa saja dalam halaman program. Terdapat empat program kursus:
1. Program School of Informatics Programming
2. Program School of Network & Security System
(83)
4. Program School of Broadcasting (TV & Radio)
Gambar 5.2 Submenu SPDC Program
Jika pelanggan klik detail, maka akan menampilkan program tersebut:
(84)
Peserta akan mempelajari cara menganalisa, merancang, membangun hingga menghasilkan suatu Program Aplikasi Komputer yang terintegrasi dengan database, yang banyak digunakan di dunia bisnis, dilengkapi dengan pembuatan report (dalam bentuk table, grafik, angka-angka).
Gambar 5.4 Detail Schoolof Network & Security System
Peserta akan belajar mulai dari pengenalan sistem komputer menguasai konsep dan teknologi mulai dari merakit komputer, membuat dan mengatur suatu jaringan komputer wan, lan, man baik yang berbasis Windows maupun Linux, instalasi software, serta menyelesaikan kasus dan permasalahan yang terjadi pada jaringan komputer.
(1)
animasi dan proses penggabungan video animasi berikut suara menjadi rangkaian animasi.
Gambar 5.6 Detail School of Broadcasting (TV & Radio)
Dalam detail School of Broadcasting (TV & Radio) menciptakan calon tenaga kerja yang benar-benar profesional dan mampu mengerja kan pekerjaan dibidang tv broadcast, radio broadcast, presenter, reporter, kameramen, tv editor, creative and advertising, production house yang saat sekarang dibutuhkan di dalam dunia usaha baik industri/usaha tersebut.
(2)
76
5.2.2 Uji Coba Menampilkan Gallery
Menu utama menampilkan galeri digunakan untuk mempublikasikan kegiatan-kegiatan apa saja yang ada dalam Lembaga SPDC (Surfsoft Indonesia Professional Development Centre).
Gambar 5.7 Menu Gallery
Terdapat beberapa artikel pada menu gallery, dimana artikel tersebut terdapat detail galeri yang menampilkan keseluruhan isi artikel/galeri pada profil ini. Berikut detail galeri :
(3)
Gambar 5.8 Detail Gallery
Pada detail galeri ini kita dapat memilih salah satu dari foto yang ada pada detail galeri tersebut. Berikut uji cobanya :
(4)
78
Gambar 5.9 Foto Gallery
(5)
6.1 Kesimpulan
Dari hasil observasi dan data-data yang telah diuraikan, dapat ditarik kesimpulan mengenai beberapa hal dalam penulisan laporan tugas akhir ini yaitu:
1. Sistem ini dapat membantu pihak lembaga dalam mempublikasikan untuk umum demi memperkenalkan Lembaga Pendidikan SPDC ke masyarakat luas.
2. Sistem ini juga dapat membantu user/pengunjung (masyarakat) untuk dapat mengakses berita tentang kegiatan dan mengetahui segala informasi yang ada pada Lembaga SPDC.
3. Profil ini dapat mempermudah pengunjung untuk mendapat informasi dari pihak lembaga SPDC.
6.2 Saran
Pada pembuatan profil interkatif ini terdapat saran – saran yang terkait untuk pengembangan aplikasi lebih lanjut. Saran – saran tersebut antara lain :
1. Untuk pengembangan lebih lanjut profil interaktif ini bisa dikembangkan lagi dari segi pengaturan data. Dengan memberi sebuah fasilitas admin untuk mengelola seluruh data yang ada pada Lembaga Pendidikan Surfsoft Indonesia Professional Development Centre (SPDC)
(6)
80
DAFTAR PUSTAKA
Agung, Leo., 2011, Pasti Bisa!! Belajar Sendiri Adobe Flash Pro CS 5, Penerbit ANDI, Yogyakarta.
Rizky, S., 2006, Interaksi Manusia dan Komputer, Sekolah Tinggi Manajemen Informatika & Teknik Komputer, Surabaya.
Sutopo, Ariesto Hadi, 2007, Pemrograman Flash dengan PHP dan MySql, Yogyakarta, Indonesia.
http://nayzuko.com/home/25/39-menguasai-loadvars.html http://nayzuko.com/home/25/10-flash-xml-chart.html
http://www.flepstudio.org/forum/flash-english/3100-auto-full-screen.html