Kamis, 13 Januari 2011

Kegunaan Macromedia flash dan Macromedia Dream Weaver

MACROMEDIA FLASH

Kegunaan Macromedia lash

·Animasi : aplikasi yang menggunakan animasi tersebut misalnya banner,kartu ucapan online,kartun,iklan,dan sebagainya.Flash menyediakan berbagai elemen animasi yang cukup lengkap.

·Games : beberapa games yang terutama berbentuk 2 dimensi banyak yang dibangun dengan aplikasi ini.games menggabungkan kemampuan animasi pada flash dengan bahasa scripting yang dimilikinya yang dikenal dengan ActionScript.

·User Interface : aplikasi user interface yang biasa dibangun menggunakan Flash adalah aplikasi-aplikasi berbasis web.interface tersebut biasanya dilengkapi dengan kotak-kotak navigasi sederhana sampai pada antarmuka yang lain yang lebih kompleks.

·Aplikaasi FMA ( Flexible Messaging Area ) : merupakan area pada web page yang dirancanguntuk menampilkan pesan tertentu yang bisa berubah setiap waktu.sebagai contoh FMA pada website restaurant,yang mungkin akan menampilkan menu special harian yang akan beruba-ubah.

·RIA ( Reach Internet Aplication : merupakan aplikasi internet yang membutuhkan tingkat manipulasi dan transfer data yang tinggi.sebagai contoh ,catalog belanja,test online,kalender,inventory online,system informasi akademik,dan lain-lain.

Di bawah ini merupakan window dari Flash MX
layout flash
Di bawah ini merupakan keterangan dari kegunaan masing-masing komponen Flash MX secara detail:

- Timeline, digunakan untuk mengatur dan mengontrol isi keseluruhan movie Anda.

- Stage, merupakan tempat dimana Anda bekerja dalam membuat sebuah animasi.

- Tools Box, berisi alat-alat yang digunakan untuk menggambar objek pada stage.

- Color Window, merupakan window yang digunakan untuk mengatur warna pada objek yang Anda buat.

- Actions – Frame, merupakan window yang digunakan untuk menuliskan Action Script untuk Flash MX.
Biasanya Action Script digunakan untuk mengendalikan objek yang Anda buat sesuai dengan keinginan Anda.

- Properties, merupakan window yang digunakan untuk mengatur property dari objek yang Anda buat.

- Components, digunakan untuk menambahkan objek untuk web application yang nantinya di publish ke internet.

MACROMEDIA DREAM WEAVER

Dreamweaver adalah software aplikasi desain web visual yang biasa dikenal dengan istilah WYSIWYG—What You See Is What You Get—intinya Anda tidak harus berurusan dengan tag-tag HTML untuk membuat sebuah situs. Macromedia belum lama ini telah mengeluarkan rilis terbaru dari Dreamweaver yaitu Dreamweaver MX, dengan penambahan beberapa fasilitas baru di dalamnya. Dreamweaver tidak hanya dapat digunakan oleh para desainer web, namun juga dapat digunakan oleh programer untuk membangun halaman internaktif karena Dreamweaver MX mendukung pula PHP, ColdFusion, ASP.NET dan lain-lain. Menurut survey yang dilakukan oleh Pantone.com, www.pantone.com/products/products.asp?idArticle=209&idArea=1, pengguna Dreamweaver adalah 59% dari seluruh koresponden yang disurvey dan memang digunakan tidak hanya oleh desainer, tapi juga programer.

Dalam seri tutorial ini kita akan mengenal penggunaan Dreamweaver sebagai editor HTML visual. Untuk bagian pertama, kita akan mengenal lingkungan kerja dalam Dreamweaver MX dan membuat halaman web sederhana.

Mengenal Lingkungan Kerja Dreamweaver MX


Lihat Gambar 1. Dreamweaver MX menawarkan dua layout view untuk dijadikan sebagai tampilan kerja saat Anda membuat halaman web. Setelah instalasi, Dreamweaver MX akan memberikan opsi: Macromedia Dreamweaver MX Workspace atau Macromedia Dreamweaver 4 Workspace. Anda dapat mengubah-ubah tampilan ini lewat menu preferences, Modify > Preferences > Change Workspace. Pilihan ini tentu saja terserah Anda, pada tutorial ini saya akan menggunakan Dreamweaver MX Workspace.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinNe4uaTx-KjqDrOb9m48uhJnuemDa7avfMvTo-CuPAm9U5Wj6MP2twImEP_C8mphUGbfIpoicYUy0nqxIEYqO4okKYUDXPBiDa7FkE4dMjxOw-Cf7sO90-_nOdfD6poZtLrvx-99lYFti/s320/Untitled-1+copy.jpg
Fig 1. Lingkungan kerja Dreamweaver MX

Berikut ini penjelasan untuk elemen-elemen workspace seperti telah tertera pada gambar. Document Window adalah tempat di mana Anda dapat membuat halaman web secara visual, kode, atau keduanya. Insert panel adalah tempat Anda dapat memasukan image, Flash movie, table, atau elemen lain. Insert panel ini serupa dengan menu Insert pada menu bar. Untuk memunculkan panel ini, klik Windows > Insert atau tekan Ctrl-F2. Property Inspector berguna untuk melakukan pengeditan pada suatu elemen di Document Window. Document Toolbar berguna untuk mengubah tampilan dari disign/visual view, code view, atau keduanya sekaligus. Selain itu juga untuk memberi titel pada dokumen, melihat tampilan di browser. Panels Group merupakan kumpulan dari panel-panel Dreamweaver MX.

Pada bagian ini kita akan membuat halaman web sederhana dengan pemformatan dasar pada teks, link, anchor, dan Page Properties.
Bekerja dengan Teks
Pada dasarnya Dreamweaver tidak jauh berbeda dengan program pengolah kata dalam memformat teks. Namun terdapat sedikit perbedaan karena Dreamweaver menggunakan HTML. Untuk memformat teks dapat kita lakukan dengan menggunakan Property Inspector. Lihat Gambar 2

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhodWLgUccHkvPbaM_IKCF52BEqw_zcWyE11opuFe-66RiuadhhdjRxGyOXrsJYOgPXHpZrX1Wizrv9x22C3HUBF2YVlbRKNtNr5cj-41UdJLA-wdqkR6auvFd09i5xct_UXmPfj8KxNzqS/s320/Untitled-2+copy.jpg
Fig 2. Property Inspector

Heading

Heading (Gambar 3) digunakan untuk membuat judul dari dokumen atau sub-subjudul berbagai level. Misalnya Anda menggunakan Heading 1 untuk judul, Heading 2 untuk subjudul tingkat pertama, dan sebagainya. Anda juga dapat menggunakan insert panel, pada Insert Panel, klik Tab Text.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBCqWt67PUOD9S4VcQ8flvOI7TFfjQXMaRJDqzpFvYIEpWf3itgmN9SHSUCVaa6J2VW6Z4YKdyZRTx1qi-3jfG_ClCm1gHz4vpJqOJnSQVUFLmU9kHI9TfU052-yA9qLIEpt_tFzjZnztn/s320/Untitled-3+copy.jpg
Fig 3. Heading

Paragraf dan Line Break


Bila kita menekan Enter pada pengolah kata, maka akan menghasilkan paragraf baru. Demikian pula pada Dreamweaver. Namun paragraf dalam HTML (&lg:

&tg:) secara default menghasilkan jarak lebih besar daripada jarak antarbaris. Jika kita ingin antarbaris tidak ada jarak, maka kita membutuhkan
di HTML. Untuk berpindah baris dan bukan paragraf kita menggunakan Shift-Enter, atau Insert > Line Breaks. Lihat Gambar 4.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwwHYDuV5L3hep5cvOW2_z6TwHvPdT1MHm6X0fpSmYZg2RJtNkkU7Bgd-NoYMR2It-KpxrCPPsDh8jKk6Q0uHEW_DkCiKeAJy5fYx9mRz0OCY833R0LTdNbIjSV4xaRhWwwSypFKTdc_Ar/s320/Untitled-4+copy.jpg
Fig 4. Paragraf dan Line Breaks

Memformat Teks Dengan Property Inspector


Seperti yang sudah kita bahas sebelumnya, Propery Inspector berguna untuk melakukan pengeditan pada sebuah elemen HTML. Kita akan menggunakan Property Inspector ini untuk memformat teks, ukuran, warna, dan perataan paragraf. Untuk memunculkan Property Inspector yaitu dengan Window > Properties atau dengan menekan Ctrl-F3.
Anda dapat memilih jenis font sesuai dengan selera Anda, namun terdapat 5 jenis font yang yang umum digunakan untuk halaman web, karena hampir semua komputer memiliki jenis huruf ini: Arial, Times New Roman, Courier New, Georgia, dan Verdana. Untuk mengubah teks yang telah Anda ketik yaitu dengan memilih teks yang ingin diubah, kemudian pilih jenis font yang ingin Anda gunakan. Dalam pilihan font dari drop down Property Inspector terdapat beberapa jenis huruf lain yang dipisahkan dengan koma. Pertama-tama browser akan membaca font pertama untuk ditampilkan di browser, bila font pertama tidak terinstal di komputer maka akan dilanjutkan dengan font kedua, kemudian ketiga, dan seterusnya. Font default adalah Times New Roman. Lihat Gambar 5.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWIuw-PEog5OjIgZyJsOmuzYCC1uePv_hn5fe43wrm_PZvOshbMbqxhSLbCw63teHzJDxQNDQKZ8PeCRD0AXcGX1jZORn3tZ-lBN5qXGABXLfokt1zAOv26Bp8n8AaZgG05iLOVc9sRKpw/s320/Untitled-5+copy.jpg

Membuat Link, Anchor, dan Target

Untuk membuat link antarhalaman, selain diperlukan halaman link sumber—Source Link—juga diperlukan link tujuan—Destination Link. File contoh halaman Web sederhana di atas saya simpan dengan nama file index.htm. Halaman ini yang akan menjadi link sumber kita. Mari kita buat halaman baru untuk dilink:
Buatlah halaman baru untuk link tujuan, File > New, pada kotak dialog pilih Kategori Dynamic Page, dan Basic Page HTML. Lihat Gambar 6. Setelah selesai membuat file baru, kemudian simpanlah file tersebut dengan nama file tentangsaya.htm. Pada contoh, saya memasukkan horizontal Rule, Insert > Horizontal Rule untuk memisahkan konten dari halaman tersebut. Kemudian simpan di folder yang sama dengan index.htm.

Tidak ada komentar:

Posting Komentar