4 BAB II LANDASAN TEORI 2.1 Pengertian Aplikasi Program Aplikasi adalah program siap pakai. Program yang direka untuk melaksanakan suatu fungsi bagi pengguna atau aplikasi lain. Contoh-contoh aplikasi ialah program pemprosesan kata dan Web Browser. Aplikasi akan menggunakan sistem operasi (OS) komputer dan aplikasi yang lainnya yang mendukung. Istilah ini mulai perlahan masuk ke dalam istilah Teknologi Informasi semenjak tahun 1993, yang biasanya juga disingkat dengan app. Secara histories, aplikasi adalah software yang dikembangkan oleh sebuah perusahaan. App adalah software yang dibeli perusahaan dari tempat pembuatannya. Industri PC tampaknya menciptakan istilah ini untuk mereflesikan medan pertempuran persaingan yang baru, yang paralel dengan yang terjadi antar sistem oprasi yang dimunculkan [3]. 2.2 Pengertian Portofolio Portofolio merupakan suatu kumpulan dokumen dalam bentuk gambar, design, symbol dan rancangan yang menjelaskan isi dari suatu masalah atau problem secara rinci atau detail dari proses tersebut dan umumnya dapat dilampirkan baik secara Soft Copy (File) maupun Hard Copy (Cetakan) [5]. 2.3 Struktur Navigasi Struktur navigasi adalah struktur (alur) dari suatu program yang merupakan rancangan hubungan dan rantai kerja dari beberapa area yang berbeda dan dapat membantu mengorganisasikan seluruh elemen pembuatan website dengan memberikan perintah atau pesan. Ada empat macam bentuk dasar dari struktur navigasi yang biasa digunakan dalam proses pembuatan website, yaitu :
5 2.3.1. Linier Struktur navigasi linier yaitu struktur yang mempunyai satu rangkaian cerita yang menampilkan satu demi satu tampilan layar secara berurut menurut urutannya. Tampilan yang dapat ditampilkan pada sruktur jenis ini adalah satu halaman sebelumnya atau satu halaman sesudahnya. Gambar 2.1 Navigasi Linier 2.3.2 Non-Linier Struktur navigasi non-linier merupakan pengembangan dari struktur navigasi linier. Pada struktur ini diperkenankan membuat navigasi bercabang. Percabangan pada struktur nonlinier ini berbeda dengan percabangan pada struktur hirarki, karena pada percabangan nonlinier ini walaupun terdapat percabangan, tetapi tiap-tiap tampilan mempunyai kedudukan yang sama yaitu tidak ada Master Page dan Slave Page. Gambar 2.2 Navigasi Non-Linier
6 2.3.3 Navigasi Hierarchical Struktur navigasi hierarchical adalah suatu struktur yang mengandalkan percabangan untuk menampilkan data berdasarkan kriteria tertentu. Dimana tampilan pada menu pertama akan disebut sebagai Master Page (halaman utama pertama) yang memiliki halaman percabangan yaitu Slave Page (halaman pendukung). Jika salah satu halaman pendukung diaktifkan, maka tampilannya disebut Master Page (halaman utama kedua), dan seterusnya. Pada struktur navigasi ini tidak diperbolehkan adanya tampilan secara linier. Gambar 2.3 Navigasi Hierarchical 2.3.4 Navigasi Composite Struktur navigasi Composite (campuran) disebut juga struktur navigasi bebas yang merupakan gabungan dari ketiga struktur yang ada. Struktur navigasi ini biasa digunakan dalam pembuatan multimedia karena dapat memberikan keinteraksian yang lebih tinggi. Gambar 2.4 Navigasi Composite
7 2.4 Flowchart Bagan alir (flowchart) adalah bagan (chart) yang menunjukkan alir (flow) didalam program atau prosedur sistem secara logika. Bagan alir digunakan terutama untuk alat bantu komunikasi dan untuk dokumentasi. Masih menurut Jogiyanto, bagan alir program (program flowchart) adalah bagian yang menjelaskan secara rinci langkah-langkah dari proses program [4]. Bagan alir program terdiri dari dua macam, yaitu : 1. Bagan Alir Logika Program ( Program Logic Flowchart ) Bagan alir logika digunakan untuk menggambarkan tiap-tiap langkah didalam program komputer secara logika. Bagan alir logika ini dipersiapkan oleh sistem analis. 2. Bagan Alir Program Komputer Terinci ( Detailed Computer Program Flowchart ) Bagan ini digunakan untuk menggambarkan instruksi-instruksi program komputer secara terinci. 2.4.1 Simbol Flowchart 1 TERMINAL Digunakan untuk menggambar awal dan akhir suatu kegiatan. Gambar 2.5 Terminal 2 DECISION Digunakan untuk menggambarkan proses pengujian suatu kondisi yang sama. Gambar 2.6 Decision
3 PROCESS terpenuhi. Digunakan untuk menggambarkan pelaksanaan proses program jika kondisi Gambar 2.7 Process 4 FLOWLINE lainnya. Digunakan untuk menggambarkan hubungan proses dari satu porses ke proses Gambar 2.8 Flowline 5 INPUT/OUTPUT Digunakan untuk menggambarkan proses memasukan data yang berupa pembacaan data sekaligus proses keluaran yang berupa pencetakan data. Gambat 2.9 Input/Output
6 SUBROUTINE Digunakan untuk menggambarkan proses pemanggilan sub program dari main program (rekursivitas). Gambar 2.10 Subroutine 7 CONNECTOR Digunakan sebagai penghubung antara satu proses dengan proses lainnya yang berada pada halaman yang sama. Gambar 2.11 Connector 8 PAGE CONNECTOR Digunakan sebagai penghubung antara satu proses dengan proses lainnya yang berbeda halaman. Gambar 2.12 Page Connector 2.5 Bahasa Pemrograman Flash 8.0 Macromedia Flash 8.0 adalah suatu program yang dipakai luas oleh para professional web karena kemampuannya yang mengagumkan dalam menampilkan multimedia, gabungan antara grafis, animasi, suara, dan interaktifitas bagi pengguna
internet. Program ini berbasis vektor grafis, walaupun juga dapat diisi dengan bitmap yang di import dari program lain. Flash movie juga dapat melakukan hubungan interaktif dengan pemakainya. Namun anda juga dapat membuat nonlinier movie yang dapat berinteraksi dengan aplikasi web yang lain [1]. Biasanya para desainer mempergunakan Flash untuk membuat kontrol navigasi, animasi, logo, hingga movie yang cukup panjang yang disertai dengan suara. Movie dengan animasi sangat berbeda. Animasi adalah proses kejadiannya, atau proses bagaimana menggerakkan suatu objek disebut menganimasi, sedang movie adalah hasilnya. Karena Flash Movie mempunyai sifat kompak dan terbuat dari vektor grafis yang membuatnya ringan, maka Flash Movie mudah untuk didownload pada website [1]. 2.6 Urutan Kerja Pada Flash Untuk membuat sebuah Flash Movie, pertama kita harus memulainya dengan menggambar obyeknya, atau kita juga dapat mengimpor obyek tersebut dari program lain yang siap pakai. Gambar itu kemudian dipakai pada stage yang merupakan bidang layar panggung dari movie itu untuk kemudian dianimasikan. Jika kita ingin membuat agar movie yang dibuat bersifat interaktif, maka kita harus menambahkan aksi (action) apabila mendapat reaksi atau masukkan dari pemakai. Untuk itu dapat digunakan ActionScript. Flash Movie dapat dimainkan dengan beberapa cara, yaitu : a. Pada Internet Browser seperti Internet Explorer atau Netscape Navigator yang diperlengkapi dengan Flash Player. b. Menggunakan Flash ActiveX Control pada Microsoft Office, Microsoft Internet Explorer. c. Dengan program Flash Player stand alone. d. Sebagai stand alone proyektor, Flash Movie dapat dimainkan tanpa Flash Player
2.7 Movie Interaktif Flash dapat dijadikan sarana untuk membuat movie interaktif dimana gerakan atau aksi yang akan dilakukan animasi tergantung pada reaksi, perintah atau masukkan yang diberikan oleh pemakainya. Perintah itu dapat dimasukkan dengan mengetikkan lewat keyboard maupun menggunakan mouse sehingga Flash mampu mengaktifkan perintah pengaktifan program lain untuk menggerakkan obyek, memasukkan informasi maupun menampilkan beberapa operasi. Movie interaktif ini dibuat dengan menggunakan bahasa pemrograman Action Script [2]. 2.8 Image Vector dan Bitmap Sebagaimana kita ketahui, di dalam dunia digital ada dua jenis gambar utama, yaitu image bitmap dan image vektor. Sebelumnya yang dikenal dalam dunia animasi selalu menggunakan image bitmap, sedangkan Macromedia Flash 8.0 menggunakan vector [3]. Keuntungan image vektor jika dibandingkan dengan bitmap : a. Secara umum image vektor mempunyai ukuran file yang kecil, sehingga ringan sewaktu dibuat dalam website misalnya dan cepat untuk diakses atau di-download melalui internet. b. Image vektor mudah diubah-ubah ukurannya (diperbesar / diperkecil) tanpa mengurangi kualitas gambar, sedangkan bitmap range pembesaran sangat kecil. Sehingga jika diperbesar agak drastis maka akan membuat tampilannya jadi kasar dan tidak jelas, sedangkan jika diperkecil maka gambar akan menggumpal. c Dalam menampilkan gambar photo atau tekstur lukisan, pewarnaan image vektor tidak sebagus gambar aslinya. 2.9 Istilah pada Lingkungan Flash Dalam proses pembuatan Flash movie kita akan mengenal bagian-bagian penting berikut ini :
a. Stage, yaitu bidang segi empat dimana movie dimainkan. b. Timeline, dimana obyek gambar diletakkan pada frame diatur tampilannya waktu demi waktu. c. Symbol (simbol) merupakan media asset dari movie yang dapat dipakai ulang. d. Library window, dimana obyek-obyek diorganisasikan. e. Movie Explorer, dimana kita dapat melihat overview suatu movie beserta strukturnya. f. Panel-panel, baik yang menggantung maupun yang diparkir merupakan bagian dari Flash. 2.10 Layar Flash dan Stage Seperti halnya program-program produksi Macromedia lainnya misalnya Freehand, Firework maupun Dreamweaver, pada Macromedia Flash 8.0 kita dapat menjumpai tampilan yang tidak jauh berbeda. Di sini dapat dijumpai susunan Menu Bar, Toolbox yang biasanya berada disebelah kiri layar dan panel-panel yang menggantung di sebelah kanan layar. Layar kerja utama dalam program ini disebut stage atau panggung dimana movie dibuat dan dimainkan. Di atas layar utama terdapat bagian yang tidak kalah pentingnya, yaitu Timeline dimana kita akan meletakkan frame-frame gambar dan mengatur animasi sesuai waktu. Gambar 2.13 Menu Bar dalam Flash 8.0 Tampilan menu bar diatas yang terdiri dari File, Edit, View, Insert, Modify, Text, Control, Windows dan Help.
Gambar 2.14 Layar Flash 8.0 dan stage dalam keadaan masih kosong 2.11 Alat-alat dalam Toolbox Flash memiliki sebagaimana program-program grafis yang lain. Pada standar toolbox terdapat tool-tool utama, dan jika salah satu tombol dipilih maka bagian bawah toolbox akan muncul Tool Modifier. Tool tambahan ini merupakan pengembangan tool utama yang meliputi pemilihan warna outline dan fill, ketebalan dan bentuk grafis dan pengembangan spesifik lain yang berhubungan dengan tool utama yang aktif.
Gambar 2.15 Toolbox pada Flash 8.0 2.12 Library Window Library window adalah suatu tempat dimana kita menyimpan dan mengorganisasikan simbol yang dibuat di Flash maupun file-file yang diimpor dari luar Flash, termasuk di dalamnya file sound, image bitmap dan Quick Time Movie.
Gambar 2.16 Library Window 2.13 Panel dalam Flash Untuk menampilkan dan mengubah elemen-elemen dalam Flash dimana masingmasing elemen secara terperinci diorganisir pada panel-panel ini. Panel ini dapat ditampilkan secara individu (satu per satu) atau kita menampilkan beberapa panel yang paling sering digunakan sebagai suatu set panel yang dapat ditampilkan secara bersamasama. Gambar 2.17 Panel-panel pada Flash 8.0
Untuk menampilkan daftar lengkap panel-panel tersebut yang ada dalam Flash, digunakan menu Windows. Kita dapat menampilkan panel-panel tertentu dari ketiga panel di atas yang akan sering dipakai, menyembunyikan yang tidak diperlukan, membuat group beberapa panel favorit. Kebanyakan panel memiliki menu pop up dengan opsi tambahan. Pop up menu ini ditandai dengan tanda panah yang berada di sebelah kanan atas. Jika kita klik di situ maka akan muncul pop up menunya. Gambar 2.18 Sebuah Panel dengan Pop Up menu. 2.14 Context Menu Yang dimaksud dengan Context menu adalah menu yang muncul jika kita klik tombol mouse kanan ketika kita sedang dalam keadaan tertentu. Context menu itu berisi menu-menu yang berhubungan dengan keadaan saat itu. Sebagai contoh, ketika kita sedang memilih sebuah frame pada Timeline dan kemudian kita klik tombol mouse kanan, maka Context menu yang muncul adalah yang berkaitan dengan keadaan itu seperti yang terlihat pada gambar berikut.
Gambar 2.19 Context menu 2.15 Grid, Guide & Ruler Ketika kita sedang menyiapkan sebuah artwork pada stage, mungkin kita akan memerlukan bantuan untuk men-skala bidang stage tersebut agar peletakan obyek-obyek yang akan dianimasi dapat dilakukan dengan cermat. Flash memiliki tiga bantuan yang terdiri dari Grid, Guide dan Ruler. Grid berupa titik-titik yang membentuk kotak-kotak skala di seluruh bidang gambar. Guide berupa garis (defaultnya berwarna hijau) yang dapat ditarik dari Horizontal dan Vertikal Ruler. Garis ini untuk patokan letak suatu obyek. Ruler adalah penggaris yang akan ditampilkan pada bidang layar bagian atas dan samping kiri. Ruler ini berisi ukuran dengan satuan yang dapat kita pilih dari menu Edit > Preferences. Jika Grid ditampilkan pada suatu movie maka akan ditampilkan sebagai garis di balik artwork pada seluruh scene. Kita dapat snap (merekatkan) obyek ke Grid, dapat mengubah tampilan warna Grid maupun ukuran Grid itu sendiri.
2.16 Setting Awal Sebuah Movie Setiap kali kita membuka Macromedia Flash 8.0 maka akan siap sebuah file baru yang diberi nama default Untitled1.fla. Tentu saja kita dapat membuat nama lain bila ingin menyimpan hasil kerja kita. Apapun nama yang kita berikan, Flash secara otomatis akan membubuhkan ekstensi.fla. File default ini disiapkan dengan tatanan atau setting yang default pula. Kita dapat mengubahnya sesuai kebutuhan, tentu setelah kita memahami apa arti setting yang berlaku itu. Untuk mengetahui setting apa saja yang diberlakukan pada file movie, kita dapat membuka kotak dialog Document Properties. Langkah-langkah melakukan setting properti : 1. Pilih menu File > New sehingga muncul sebuah file movie baru. 2. Klik Modify > Document sehingga muncul kotak dialog Document Properties. Gambar 2.20 Kotak Dialog Document Properties. 3. Pada kotak frame, masukkan nilai yang menggambarkan jumlah frame yang ditampilkan setiap detik. Kebanyakan komputer mempunyai kemampuan men-display suatu animasi, khususnya yang dimainkan pada website adalah antara 8 hingga 12 fps (frame per second). Flash menggunakan 12 fps sebagai defaultnya. Semakin banyak frame setiap detik akan menghasilkan gerakan yang halus, namun demikian bila komputer yang membacanya memiliki kecepatan yang kurang maka gambar tadi tampak terputus-putus. 4. Pada kotak Dimension, masukkan salah satu opsi berikut ini :
a. Untuk mendefinisikan ukuran stage dengan satuan pixel, masukkan nilai pada kotak Width (lebar) da Height (tinggi). Sebagai default Flash memberikan 550 x 400 pixel. Ukuran paling kecil yang dapat diberikan adalah 18 x 18 pixel dan ukuran paling besar adalah 2880 x 2880 pixel. b. Untuk men-set ukuran Stage agar sesuai dengan ukuran isinya, pilih opsi Match Contents. Untuk meminimalisasi ukuran movie, letakkan semua elemen yang ada ke pojok kanan atas layar sebelum menggunakan Match Contents. c. Tombol Printer untuk men-set ukuran Stage agar sesuai kapasitas printer maksimum jika movie buatan kita nantinya akan dicetak melalui printer. 5. Untuk men-set warna latar belakang movie, pilih warna dari panel yang muncul jika kita klik kotak Background. 6. Untuk menentukan satuan ukuran yang akan ditampilkan jika memasang penggaris layar, klik pada kotak Ruler Units. Disini kita mempunyai pilihan inchi, inchi (desimal), point, cm, mm, pixel. Pilihan satuan unit ini akan ditampilkan juga pada panel info. 7. OK. 2.17 Action Script Flash menggunakan bahasa scripting ActionScript untuk menambah interaktifitas sebuah movie. Serupa dengan JavaScript, ActionScript merupakan bahasa pemrograman yang berorientasi obyek. Dalam scripting yang berorientasi obyek, kita mengorganisasikan informasi dengan menyusunnya ke dalam kelompok-kelompok yang disebut dengan kelas-kelas (Class). Kita dapat membuat multi-instance dari sebuah kelas, disebut dengan obyek-obyek dengan menggunakan scripting. Kita dapat menggunakan kelas-kelas ActionScript yang ditentukan sebelumnya dan membuat kelas-kelas kita sendiri. Obyek-obyek dalam ActionScript dapat mengandung data atau dapat secara grafis digambarkan pada stage sebagai Movie Clip.
2.17.1. Panel Action Panel action memungkinkan kita untuk membuat dan mengedit aksi-aksi untuk sebuah obyek atau frame dengan menggunakan dua metode pengeditan yang berbeda. Kita dapat memilih aksi-aksi yang ditulis sebelumnya dari daftar toolbox, drag dan drop aksi-aksi dan menggunakan tombol-tombol untuk menghapus atau menyusun kembali aksi-aksi. Dalam normal mode kita dapat menuliskan aksi-aksi dengan menggunakan bidang-bidang parameter (argumen) yang mendorong kita untuk mengoreksi argumenargumen. Dalam Expert Mode kita dapat menulis atau mengedit aksi-aksi secara langsung dalam sebuah text box, seperti menulis script dalam sebuah teks editor. Gambar 2.21 Panel Action disertai dengan Menu Contexts yang sedang terbuka. 2.18 Aksi aksi pada Frame Untuk membuat sebuah movie melakukan sesuatu ketika mencapai sebuah Keyframe, kita dapat menetapkan sebuah aksi frame pada Keyframe. Misalnya kita membuat loop dalam sebuah movie, kita mungkin menyisipkan sebuah aksi frame pada frame ke 20 yang menyatakan Pergi ke Frame 10 mainkan lagi Frame-frame yang berisi aksi-aksi menampilkan sebuah huruf a kecil dalam Timeline seperti yang diperlihatkan pada gambar berikut.
Gambar 2.22 Suatu tanda pada frame yang dimasukkan Action. 21