5 2.2. Internet Internet dapat terbentuk karena sekumpulan besar jaringan komputer memiliki kesepakatan untuk berbicara dalam bahasa yang sama. Aplikasi internet yang pertama kali ditemukan adalah FTP. Selama perkembangannya Internet sudah banyak melahirkan inovasi-inovasi atau produk-produk baru, dulunya dari yang hanya seputar teks (Text Oriented) saja kini telah berkembang amat pesat dengan kemampuan multimedianya. Pada era teknologi saat ini informasi yang cepat dan mudah didapat sangat diperlukan sekali. Pengguna internet juga didukung oleh saluran komunikasi yang sudah memadai, dimana hampir setiap rumah mempunyai saluran komunikasi telepon sampai dengan perusahaan yang sudah menggunakan saluran komunikasi khusus. Hal lain yang timbul di Indonesia saat ini adalah mulai banyaknya Internet Sevices Provider (penyedia layanan internet) yang menyediakan fasilitas internet kepada para pelanggannya. 2.2.1. Kegiatan di Internet Mungkin anda ingat tiga atau empat tahun yang lalu ketika orang mulai membicarakan tentang ide-ide indah berkaitan dengan internet. Ketika itu orang membayangkan bahwa dengan internet kita dapat berbelanja, melakukan aktivitas perbankan, bahkan melakukan kegiatan sehari-hari hanya dengan bermodalkan komputer dan saluran komunikasi. internet menjadi media yang memudahkan segalanya. Banyak dari kita, ketika itu beranggapan bahwa ide-ide indah tersebut hanyalah impian. Sekarang mimpi-mimpi itu menjadi kenyataan, ada beragam hal yang dapat kita lakukan di internet, dan jika didaftar, daftar tersebut setiap harinya bertambah. Berikut ini ada beberapa layanan yang tersedia di internet, yaitu File Transfer Protocol (FTP), e-mail, Bulletin Board Services (Network News), Bulletin Board Services (Gopher), anvance browsing (WWW, Mosaic), automated titel search (Archie, Veronica), komunikasi audio dan video sampai teleconferencing.
6 E-mail adalah fasilitas untuk mengirim teks, suara, video, dan grafis melalui internet, untuk itu diperlukannya alamat e-mail. Remote Login (Telnet) sebenarnya merupakan perluasan dari fasilitas login yang dipakai pada komputer time sharing lama. Gopher adalah software untuk menemukan informasi pada internet. WWW dan Mosaic juga seperti Gopher tetapi tidak hanya berupa teks saja melainkan grafik, suara, dan video dapat ditampilkan. Archie dan Veronika adalah fasilitas pencarian di internet. 2.3. Macromedia Flash MX Macromedia menciptakan sebuah program kecil web graphic, yaitu FutureSplash, dari perusahaan FutureWave. Sejak dulu FutureSplash membuat program-program kecil dengan berdasarkan gambar vektor dan animasi yang ditujukan untuk pembuatan web. Macromedia mencoba mengubah wajah perancangan web yang selama ini didominasi oleh HTML maupun JavaScript. Dengan berdasarkan itu, Macromedia membuat program yang diberi nama Flash, yang sekarang sudah sampai pada Flash MX. Macromedia Flash MX menjadi program yang begitu populer, dimana Microsoft menyertakan program ini sebagai plug-in (pelengkap) ke dalam sistem operasinya (Internet Explorer 5.5). 2.3.1. Manfaat Menggunakan Macromedia Flash MX Macromedia Flash MX dirancang untuk membuat animasi pada halaman web atau presentasi yang sederhana. Manfaat kita menggunakan Macromedia Flash MX. adalah sebagai berikut: 1. Dari segi pemrograman: Fitur pemrograman yang tidak terlalu rumit, memungkinkan seorang programer pemula sekalipun dapat membuat situs web yang sederhana. 2 Kapasitas file yang dihasilkan begitu kecil, sehingga memungkinkan pembuatan animasi dan presentasi menjadi lebih ringkas.
7 3 Pembuatan executeable file, dimana apabila file dijalankan tidak diperlukan lagi keterlibatan penuh program pembangunnya yang dalam hal ini Macromedia Flash MX. 2.3.2. Perbedaan Macromedia Flash MX dengan Flash versi sebelumnya Macromedia Flash MX adalah versi terbaru dari Macromedia Flash sebelumnya (5.0). Flash MX perubahan dari segi UI (User Interface) sampai ActionScript. User Interface merupakan fasilitas baru yang terdapat dalam Flash MX yaitu perubahaan yang terjadi antara lain adanya floating panel yang diletakkan semuanya disebelah kanan panel sebelah kanan tersebut dapat dibuka atau ditutup. Hal ini dapat membuat kita lebih mudah untuk mencari sesuatu, sedangkan action panel dan properties panel ada disebelah bawah. 2.3.3. Fasilitas-Fasilitas yang Disediakan oleh Macromedia Flash MX Fasilitas ekspor dan impor grafik (grafik dan suara) dari dan ke Macromedia Flash MX. adalah sebagai berikut : 1. Fasilitas Impor File Free-Hand dan FireWorks PNG; Flash MX memungkinkan untuk mengimpor file-file Frehand dan FireWorks PNG secara langsung sebagai grafik yang dapat diedit, dengan layer tersendiri, teks maupun elemen lainnya. 2. Fasilitas ekspor dan impor grafik dan suara dari dan ke Macromedia Flash MX. 3. Fasilitas library (pustaka) yang dapat digunakan oleh pemakai, seperti suara, grafis statis, maupun grafik dinamis. 4. Untuk pemrograman tingkat lanjut, file animasi yang dihasilkan oleh Macromedia Flash MX dapat digunakan sebagai sub bagian Macromedia Director 8.0 (perangkat perancangan presentasi tingkat lanjut, produk dari Macromedia juga).
8 5. Fasilitas plug-in (pelengkap) yang disediakan oleh browser, seperti Internet Explorer 5.0 maupun Netscape Navigator yang juga didukung oleh player dari Macromedia. 6. Fasilitas mixing (pencampuran) antara animasi dan suara. 2.3.4. Penggunaan Macromedia Flash MX pada Umumnya Walaupun Macromedia Flash MX belum dikenal luas oleh pengguna internet pada umumnya maupun perancang halaman web pada umumnya, Macromedia sebagai pembuatnya telah melakukan inovasi di dalam cara pembuatan halaman web yang dinamis, yang pada akhirnya membutuhkan pemrograman yang begitu kompleks apabila dilakukan di luar itu. Sehingga penggunaan Macromedia Flash MX secara umum adalah sebagai berikut: a. Pembuatan animasi atau halaman web yang dinamis, dan b. Pembuatan presentasi yang praktis. 2.3.5. Prasyarat Menggunakan Macromedia Flash MX Untuk dapat menjalankan program aplikasi Macromedia Flash MX lebih lanjut, ada beberapa prasyarat yang harus dipenuhi untuk menjalankan program aplikasi ini seperti : 1. Prasyarat perangkat keras (hardware) Perangkat keras minimum yang diperlukan sebagai berikut : 1. Personal Computer dengan CPU P233 atau lebih. 2. Memory sebesar 64 MB. 3. Windows 98/2000/XP dan NT 4.0 dengan SP 5. 4. Sound Card + speaker (untuk memainkan suara). 5. Monitor SVGA dengan resolusi 800 x 600 (disarankan). 6. Mouse. 7. CD ROM untuk instalasi software Macromedia Flash MX 8. Harddisk dengan ruang kosong sebesar kurang lebih 80 MB.
9 2. Prasyarat perangkat lunak (software) 1. Perangkat lunak Macromedia Flash MX 2. Microsoft Windows 9x. 3. Browser Internet Explorer 4.0 atau Nestcape Navigator 4.0 (disarankan). 3. Prasyarat perangkat akal (brainware) Sedangkan perangkat akal yang diperlukan adalah kemampuan seseorang untuk dapat menggunakan kreativitasnya ke dalam Macromedia Flash MX. 2.4. Pengenalan Lingkungan Macromedia Flash MX Apabila program Macromedia Flash MX telah di aktifkan maka jendela utama akan muncul. Jendela utama ini terdiri dari komponen-komponen seperti pada gambar 2.1. T O O L B O X STAGE TIMELINE P A N E L Gambar 2.1. Jendela Utama Macromedia Flash MX 2.4.1. Menu Bar Menu Bar berisi perintah-perintah umum yang digunakan untuk mengoperasikan Macromedia Flash MX. Untuk mengakases Menu Bar ini, pemakai
10 dapat mengklik langsung pada item Menu Bar yang bersangkutan. Misalnya untuk mengaktifkan menu File, pemakai dapat mengklik pada bagian kata File. Selain itu pemakai dapat pula mengaktifkan menu ini dengan cara menekan tombol Alt pada keyboard ditambah dengan huruf yang digaris bawahi pada menu ini. Misalnya untuk mengaktifkan menu File, pemakai dapat menekan tombol Alt ditambah huruf F. Gambar 2.2. Menu Bar 2.4.2. Stage Stage adalah tempat pembuatan isi satu frame didalam movie (Gambar 2.4), misalnya saja menggambar artwork yang diimpor pada satu frame. Gambar 2.3. Stage 2.4.3 Toolbox Flash menyediakan tool tool untuk menggambar (drawing), mewarnai (painting), memilih (select) dan memodifikasi artwork, serta untuk mengubah tampilan stage. Tool tool tersebut ditempatkan pada Toolbox dan dibagi menjadi 4 seksi. Lihat Gambar 2.4, yaitu :
11 1. Seksi tool yang berisi tool drawing, painting dan section. 2. Seksi tampilan yang berisi tool zooming dan panning. 3. Seksi warna yang berisi media untuk memodifikasi warna stroke dan fiil. 4. Seksi opsi yang menampilkan media untuk memodifikasi tool yang digunakan, yang berkaitan dengan tool painting atau operasi pengeditan. Arrow Tool Line Tool Pen Tool Oval Tool Pencil Tool Free transform tool Ink Bootle Tool Dropper Tool Hand Tool Black and white Subselect Tool Lasso Tool Text Tool Rectangle Tool Brush Tool Fill transform tool Paint Bucket Tool Eraser Tool Zoom Tool Stroke Color Fill Color Swap colors Snap to object Gambar 2.4. Toolbox 2.4.4. Timeline Timeline digunakan sebagai pengatur waktu dan pembentukan frame-frame animasi. Timeline terdiri atas tiga bagian utama, yaitu scene, layer, dan frame. Timeline merupakan komponen yang bertugas membuat pergerakan dari tiap-tiap item animasi, menggandakan animasi, membuat lapisan (layering) animasi maupun pengaturan waktu animasi.
12 Jika animasi diumpamakan sebuah buku yang dibuka lembar per lembar, maka timeline adalah buku tersebut, scene adalah bab-bab dalam suatu buku, layer adalah halaman buku, dan frame adalah kecepatan tangan anda dalam membuka lembaran-lembaran buku tersebut. Komponen ini bersama dengan toolbox dan stage berperan penting dalam pembuatan animasi yang dibuat. Gambar 2.5. Timeline 2.5. Komponen-Komponen Lainnya Selain komponen-komponen yang sudah disebutkan diatas, terdapat pula komponen-komponen bantu lainnya. Pada dasarnya komponen-komponen ini akan terlihat berupa jendela (window) apabila pemakai sudah mengaktifkannya. Komponen-komponen yang dimaksud adalah : 2.5.1. Panel Panel digunakan untuk menentukan atribut-atribut yang akan digunakan oleh tool-tool dalam toolbox untuk membuat atau mengubah objek pada stage. Secara default akan ditampilkan lima panel Flash yang paling umum ditampilkan di layar. Untuk memilih panel secara default yaitu, dari menu bar pilih window > panel sets > default layout. Agar layar tempat bekerja tidak terlalu ramai setelah panel default aktif, panel-panel yang tidak dibutuhkan dapat di non aktifkan atau ditutup. Lihat gambar 2.6 contoh dari panel-panel Flash MX.
13 Color Mixer Mixer Components Gambar 2.6. Panel-panel dalam Flash MX Color Switches 2.5.2. Movie Explorer Movie Explorer adalah fitur baru yang ada pada Macromedia Flash MX. Fitur ini digunakan sebagai jendela pengatur animasi. Pemakai dapat melakukan kustomisasi seperti mengubah nama elemen animasi atau menambahkan fitur pemrograman pada elemen animasi melalui Movie Explorer. Pada keadaan standar Macromedia Flash MX tidak menampilkan fitur ini. Pemakai dapat mengaktifkannya melalui menu Window > Movie Explorer seperti pada gambar 2.7. Gambar 2.7. Movie Explorer
14 2.6. Pengertian Frame Dan Frame Rate Per Second (fps) Frame adalah suatu bagian kecil dari animasi yang menampung gambar objek atau image yang dibuat yang dapat disunting atau diedit tiap gambarnya. Dapat juga diilustrasikan sebagai potongan-potongan klise film dalam kamera. Sedangkan frame rate per second atau lebih dikenal dengan fps adalah kecepatan frame film atau animasi perdetiknya. Fps menentukan kecepatan sebuah film atau animasi bergerak, bila nilai fps-nya kecil maka animasi akan terlihat seperti bergerak pelan atau tersendat-sendat, dan sebaliknya jika bila nilai fsp-nya terlalu besar, maka detail animasi akan terlihat kabur. Kecepatan frame sebesar 12 fps biasanya memberikan hasil terbaik dalam web, quick time dan file film avi umumnya memiliki kecepatan frame sebesar 12 fps, sedangkan standar kecepatan film sebesar 14 fps. 2.7. Pengertian simbol dan Instance Flash memiliki kelebihan yaitu dapat memakai objek-objek yang digunakan berulang-ulang(reusable) sehingga dapat memperkecil ukuran file Flash yang dihasilkan. Penggunaan objek yang sama ini juga akan memudahkan editing pada movie. Objek induk dinamakan Simbol dan kloning dari objek itu disebut Instance. Simbol dan instance memiliki karakteristik yang unik : 1. Dari sebuah simbol dapat dibuat bermacam-macam instance yang berbeda, misalnya dalam hal ukuran, rotasi, atau transparansi. 2. Tiap Instance memiliki sifat bawaan dari simbol sehingga bila simbol diubah, semua instance akan terpengaruh. Misalnya simbol diubah menjadi biru, maka semua Instance berwarna biru. 2.8. Sintaks Dasar Pemrograman ActionScript Sebelum melakukan penerapan pemrograman ActionScript, maka ada beberapa sintaks atau kosakata pemrograman dasar yang perlu diketahui, antara lain:
15 1. Go To Merupakan pernyataan percabangan bahasa pemrograman umum. Penerapan kosakata ini sering dilakukan pada Frame pada Baris Waktu (Time Line). Kosakata Go To pada prakteknya sering dirangkai bersama pernyataan Play atau Stop. Apabila Macromedia Flash MX menemukan kosakata ini pada Frame atau Item animasi, maka kendali program akan melompat ke nomor Frame yang ada pada instruksi. Bentuk penulisan : Go To {and} {Stop/Play} target {and} {Stop/Play} Merupakan pernyataan pilihan, bisa dipilih salah satu. 2. Target dapat berupa : 1. Number : yaitu nomor frame yang dituju Contoh : gotoandstop (17): program akan melompat ke Frame 17 dan akan dihentikan. gotoandplay (1): program akan melompat ke Frame 1 dan akan dijalankan. 2. Label : Apabila Keyframe atau Frame telah diberi nama melalui Frame Properties, maka target dapat dilakukan pada Label dari suatu Frame/Keyframe. Contoh : Go to (mulai): program akan melompat ke Frame yang bernama mulai. 3. Expression : Apabila program menemukan sebuah ekspresi maka program akan memproses ekspresi tersebut dan hasil akhir dari pemrosesan adalah tujuan dari Go To. 4. Next Frame : Apabila program menemukan pernyataan ini, maka tujuan akan diarahkan ke Frame selanjutnya, dari Frame yang aktif.
16 5. Previouse Frame : Apabila program menemukan pernyataan ini, maka tujuan akan diarahkan ke Frame sebelumnya, dari Frame yang aktif. a. Scene : Apabila menemukan pernyataan ini, maka kendali akan diarahkan ke scene yang dituju. b. Play : Bentuk penulisan : play() ; Kosakata ini adalah pernyataan umum, dimana animasi ini akan dijalankan apabila menemukan instruksi ini. c. Stop : Bentuk penulisan : Stop() ; Kosakata ini adalah pernyataan umum, dimana animasi ini akan dihentikan apabila menemukan instruksi ini. d. loadmovie : Bentuk penulisan : loadmovie (url[,location/target, variabel]); Digunakan untuk menampilkan movie tambahan tanpa harus menutup Flash Player. 2.9. Pendeklarasian Variabel Variabel harus dideklarasikan sebelum dipakai pada tubuh program, cara pendeklarasiannya, yaitu : Set variabel: Nama_variabel= nama_operand Dimana nama_variabel dan nama_operand merupakan tipe data angka atau string.
17 1. Operator Seperti pada bahasa pemrograman lainnya, operator digunakan untuk menjembatani suatu operasi atau proses. Operator yang ada pada Macromedia Flash MX, meliputi: Tabel 2.1 Operator Numeric (angka) Operator Keterangan + Operasi penambahan - Operasi pengurangan * Operasi perkalian / Operasi pembagian = Pernyataan persamaan!= Pernyataan pertidaksamaan < Lebih kecil dari > Lebih besar dari <= Lebih kecil dari atau sama dengan >= Lebih besar dari atau sama dengan ( ) Pengelompokkan operasi, contoh: (x+y)-2 Tabel 2.2 Operator String (non angka) Operator Keterangan Menunjukkan bahwa variabel yang diapit bertipe string = = Sama dengan!= Tidak sama dengan < Lebih kecil dari > Lebih besar dari <= Lebih kecil dari atau sama dengan >= Lebih besar dari atau sama dengan && Operator penggabungan, contoh: "pro & file, menghasilkan profile Tabel 2.3 Operator Logika Operator Keterangan && Membandingkan 2 atau lebih kondisi terhadap sebuah kondisi. Membandingkan 1 atau 2 atau lebih kondisi terhadap sebuah kondisi.! Merupakan kebalikan dari kondisi terhadap suatu kondisi 2.10. Hal-hal baru pada Macromedia Flash MX
18 Macromedia sebagai pembuat Flash MX menambahkan memperbaharui dan menambahkan hal-hal baru yang mampu menyempurnakan versi sebelumnya dengan fitur yang lebih diantaranya adalah : 1. Pada saat menggunakan drawing tools banyak perbaikan yang telah disempurnakan, diantaranya yaitu pada panel Mixer, panel Fill dan Stroke. 2. Fasilitas yang baru pada saat penyeleksian objek pada meja kerja flash. 3. Adanya Grid, Guides, dan Rules yang bisa dipindah-pindahkan untuk mempermudah penentuan lokasi pada meja kerja. 4. Tersedianya fasilitas Pen Tools yang berguna untuk membuat path-path yang lebih mendetail. 5. Dalam Flash MX muncul fitur baru, yaitu dimana kita bisa berbagi library (pustaka) dengan file flash lainnya, baik berupa gambar, suara, animasi, maupun tombol. 6. Adanya ActionScript yang lebih baik yang dapat memudahkan kita membuat sebuah animasi yang kompleks. 2.11. Perancangan Tampilan Sebelum menyatukan semua elemen-elemen yang digunakan dalam multimedia diharuskan mendefinisikan obyek-obyek dan merancang tampilan layar agar semua yang berada dalam suatu tampilan tidak menimbulkan kerancuan informasi. Setiap tampilan harus dapat memberikan informasi yang bulat dan utuh, sehingga dapat tercapai tujuan pembuatan web. 2.11.1. Penjejakan (Navigasi) Penjejakan termasuk struktur terpenting dalam pembuatan suatu web dan gambarnya harus sudah ada pada tahap perancangan. Peta penjejakan merupakan rancangan hubungan dan rantai kerja dari beberapa area yang berbeda dan dapat membantu mengorganisaiskan seluruh elemen web dengan pemberian perintah dan pesan. Peta penjejakan juga memberikan kemudahan dalam menganalisa
19 keinteraktifan seluruh obyek dalam web dan bagaimana pengaruh keinteraktifannya terhadap pengguna. Peta penjejakan memiliki ciri khas yang dapat membedakannya menurut kebutuhan obyek, kemudahan pemakaian, keinterktifannya dan kemudahan membuatnya yang berpengaruh terhadap waktu pembuatan suatu web. Ada empat macam bentuk dasar dari peta penjejakan yang biasa digunakan dalam proses pembuatan website, yaitu : 1. Linear Linear merupakan struktur yang hanya mempunyai satu rangkaian cerita yang berurut. Struktur ini menampilkan satu demi satu tampilan layar secara berurut menurut urutannya dan tidak diperbolehkan adanya percabangan. Tampilan yang dapat ditampilkan adalah satu halaman sebelumnya atau satu halaman sesudahnya. Gambar 2.8. Navigasi linear 2. 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 linear.
20 Gambar 2.9. Navigasi Hirarki 3. Non-Linear Pada struktur non linear diperkenankan membuat penjejakan bercabang. Percabangan ini berbeda dengan percabangan pada struktur hirarki. Pada percabangan non linear walaupun terdapat percabangan tetapi tiap-tiap tampilan mempunyai kedudukan yang sama tidak ada pada master page dan slave page.
21 Gambar 2.10. Navigasi Non-Linear 4. Campuran (Composite) Struktur penjejakan campuran merupakan gabungan dari ketiga struktur sebelumnya. Struktur penjejakan ini banyak digunakan dalam pembuatan website sebab dapat memberikan keinteraksian yang lebih tinggi. Gambar 2.11. Navigasi Campuran 2.11.2. Disain antarmuka Antarmuka adalah bagian dari program yang berhubungan langsung dengan pemakai, yaitu segala sesuatu yang muncul pada layar monitor. Disain antarmuka bertujuan agar program yang akan dibuat terlihat bentuk awalnya, sehingga akan memudahkan dalam menentukan letak dari masing-masing objek dan elemen yang dimasukkan dalam proses penggabungan elemen. Storyboard digunakan untuk membuat disain antarmuka. Storyboard merupakan sketsa disain yang lebih mendetail dari setiap gambar, teks animasi dan
22 komponen lainnya. Contoh dari storyboard yang sangat detail adalah storyboard yang menggambarkan semua yang tampak pada layar monitor, yaitu meliputi teks, gambar belakang, gambar depan, letak dan bentuk tombol serta posisi animasi video.