Page 1

BAB 1

GAMBARAN AWAL

Pada bab pertama ini akan diberikan gambaran langkah-langkah awal cara menggunakan Flash 8 untuk membuat web. Jika Anda baru pertama kali menggunakan Flash mungkin agak bingung cara menggunakan program ini untuk aplikasi web, karena Flash menghasilkan file SWF, bukan HTML. Sekarang kita akan memulai dengan melihat langkah-langkah proses pembuatan web dengan Flash 8. Langkah-langkah pada bab ini hanya memberikan gambaran untuk mengetahui proses pembuatan dokumen baru sampai mempublikasikan file FLA menjadi SWF dan HTML. Sedangkan untuk mengetahui detilnya, Anda harus membuka bab selanjutnya. Pada bab ini Anda akan mempelajari: 1. Langkah awal dengan membuat dokumen baru. 2. Membuat objek gambar. 3. Membuat symbol. 4. Menganimasikan symbol. 5. Mempublikasikan file.

1.1 Membuat Dokumen Baru Langkah pertama tentu saja membuat dokumen baru dengan cara berikut: 1. Pilih menu File > New.

1


2. Pada kotak dialog New Document, secara default Flash Document dalam keadaan terseleksi. 3. Klik OK. Catatan: •

Pada Property inspector, tombol Size menampilkan ukuran dokumen yang default-nya adalah 550 x 400 pixels.

4. Warna Background default-nya adalah putih, tetapi Anda dapat mengubahnya dengan menekan kotak warna di sebelah tulisan Background, lalu pilih warna yang Anda inginkan. Sekarang klik pada kotak warna di depan tulisan Background, dan ubah warna background menjadi kuning.

Gambar 1.1. Informasi dokumen pada Property inspector.

1.2 Menggambar Objek Setelah membuat dokumen, sekarang kita akan menambahkan objek gambar pada dokumen. Kita akan membuat sebuah menu bar yang nanti akan kita isi dengan sebuah tombol. 1. Pada area Layer name, klik ganda Layer 1, dan ubah namanya menjadi layer Bar.

Gambar 1.2. Mengubah nama layer.

2


2. Seleksilah Rectangle Tool pada Tool panel.

Gambar 1.3. Rectangle tool pada Tool panel.

3. Pilih opsi No Color dari Stroke Color Picker.

Gambar 1.4. Pilih opsi No Color option pada Stroke Color Picker.

4. Pilih warna yang Anda inginkan untuk kotak Fill Color. Pilih saja warna biru karena akan jelas terlihat pada background kuning.

Gambar 1.5. Klik pada kotak Fill color untuk memilih warna.

3


5. Sekarang arahkan mouse ke arah stage, lalu buat gambar empat persegi dengan menarik sampai mendapatkan gambar seperti berikut ini.

Gambar 1.6. Membuat bentuk empat persegi untuk bar.

1.3 Membuat Objek Tombol Setelah memiliki bar, sekarang kita akan menambahkan tombol pada bar tersebut. 1. Buat layer baru di atas layer Bar, lalu ubah namanya menjadi layer Tombol.

Gambar 1.7. Mengubah nama layer.

2. Pilih opsi No Color dari Stroke Color Picker. Lihat Gambar 1.8. 3. Pilih warna yang Anda inginkan untuk kotak Fill Color. Pilih saja warna Merah. 4. Sekarang seleksilah tombol Oval Tool pada Tool panel. Lihat Gambar 1.9.

4


Gambar 1.8. Pilih opsi No Color pada Stroke Color Picker.

Gambar 1.9. Oval tool pada Tool panel.

5. Pastikan layer Tombol dalam keadaan terseleksi, arahkan mouse ke arah stage, tarik untuk membuat bentuk elips. 6. Posisikan gambar elip pada bar.

Gambar 1.10. Mengatur posisi gambar elips.

5


1.4 Membuat Symbol Anda dapat menggunakan gambar untuk digunakan secara berulang-ulang dengan mengonversinya menjadi Symbol. Symbol adalah asset yang dapat dipakai secara berulang pada dokumen Flash tanpa perlu membuat ulang. Ini akan menghemat waktu Anda dan yang terpenting, dengan penggunaan satu symbol pada beberapa penggunaan akan menghemat ukuran file. 1. Klik Selection tool pada Tools panel.

Gambar 1.11. Selection tool pada Tools panel.

2. Klik gambar elips pada stage untuk menyeleksinya. 3. Pastikan gambar elips dalam keadaan terseleksi, tekan menu Modify > Convert to Symbol. 4. Pada kotak dialog Convert to Symbol, ketikkan Tombolku pada kotak Name text box, dan behavior-nya pilih Button.

Gambar 1.12. Pengaturan pada kotak dialog Convert to Symbol.

6


5. Klik OK. Garis berwarna biru mengelilingi gambar elips akan terlihat. Sekarang Anda telah memiliki sebuah symbol dengan behavior Button (tombol.)

Gambar 1.13. Tombol berubah menjadi symbol di tandai oleh garis biru mengelilingi gambar elips.

6. Symbol yang Anda buat akan terlihat pada panel Library (tekan menu Windows > Library untuk membukanya.)

Gambar 1.14. Symbol terlihat pada panel Library.

1.5 Menganimasikan Tombol Sekarang kita akan menganimasikan tombol agar terlihat lebih menarik dan interaktif.

7


1. Klik ganda gambar elips pada stage. Langkah ini akan membuka ruang editing untuk tombol.

Gambar 1.15. Ruang editing untuk tombol.

2. Arahkan mouse Anda ke event Over pada area layer, klik kanan lalu pilih Insert Keyframe.

Gambar 1.16. Frame Over setelah penambahan Keyframe.

3. Sekarang klik pada Keyframe Over yang telah Anda buat. Arahkan mouse ke gambar elips pada stage, klik kanan, lalu pilih Convert to Symbol. 4. Pada kotak dialog Convert to Symbol, ketikkan Tombol_animasi pada kotak Name text box dan behavior-nya pilih Movie.

Gambar 1.17. Pengaturan pada kotak dialog Convert to Symbol.

8


5. Sekarang klik ganda pada gambar elips untuk beralih ke ruang editing movie tombol. 6. Arahkan mouse ke frame 5, klik kanan, lalu pilih Insert Frame.

Gambar 1.18. Frame 5 setelah penambahan frame.

7. Arahkan mouse ke sepanjang frame 1 sampai frame 5, klik kanan, lalu pilih Create Motion Tween. 8. Sekarang arahkan mouse ke frame 5, klik kanan, lalu pilih Insert Keyframe. 9. Sekarang klik pada frame 1 untuk menyeleksinya. 10. Klik gambar elips pada stage. 11. Pada Property Inspector, untuk Color Type, pilihlah Alpha dan persentasenya jadikan 50%.

Gambar 1.19. Mengubah warna objek pada Property Inspector.

12. Klik tombol Scene1 untuk kembali ke ruang edit utama.

Gambar 1.20. Klik tombol Scene untuk kembali ke ruang utama.

9


13. Tekan Enter dan Shift untuk melihat tampilan tombol Anda. Pada jendela preview, arahkan mouse ke atas tombol elips dan lihat animasinya. Catatan: •

Sekarang Anda telah memiliki sebuah bar dan sebuah tombol. Kedua elemen tersebut adalah elemen dasar bagi sebuah halaman web. Tombol tersebut belum memiliki fungsi interaktif, kita akan membahasnya pada bab-bab selanjutnya.

Langkah selanjutnya adalah langkah terakhir yaitu mempublikasikan file Anda agar dapat terlihat pada browser.

1.6 Mempublikasikan File Setelah selesai dengan semua pekerjaan pada dokumen, langkah terakhir yang harus Anda lakukan adalah mempublikasikan file Anda agar dapat terbuka pada browser. Ketika Anda mempublikasikan file FLA, Flash akan mengompres file FLA menjadi file dengan format SWF. Format SWF inilah yang nantinya akan ditempatkan pada halaman web. Perintah Publish secara otomatis juga menghasilkan file HTML dengan tag yang sesuai dengan file SWF Anda. 1. Tekan menu File > Save, lalu simpan file pada tempat yang Anda inginkan. 2. Tekan menu File > Publish Settings. 3. Pada kotak dialog Publish Settings, klik tab Formats dan pastikan hanya opsi Flash dan HTML saja yang terseleksi. Lihat Gambar 1.21. 4. Pada kotak dialog Publish Settings, klik pada tab HTML dan pastikan pilihan Flash Only terseleksi pada pop-up menu Template. Lihat Gambar 1.22. Catatan:

•

10

Kedua opsi tersebut akan membuat Flash hanya mempublikasikan file SWF dan file HTML yang digunakan untuk menampilkan file SWF pada browser.


Gambar 1.21. Opsi Flash dan HTML terseleksi.

Catatan:

•

Template inilah yang menghasilkan file HTML yang berisi hanya file SWF ketika di tampilkan pada jendela browser.

Gambar 1.22. Pilih opsi Flash Only pada pop-up menu Template.

11


5. Klik OK untuk menyimpan settingan atau klik Publish untuk menyimpan settingan dan mempublikasikan file Anda. Catatan: •

Dengan perintah Publish, Flash akan menghasilkan file SWF dan HTML tempat di mana file SWF tertanam dan di tampilkan pada browser.

Kedua file ini akan tersimpan pada tempat yang sama dengan di mana file FLA berada.

Untuk melihat tampilan web Anda pada browser, tekan menu File > Publish Preview > Default (HTML) untuk melihat tampilan hasil kerja Anda.

Langkah-langkah di atas hanya langkah besarnya saja sebagai gambaran awal tentang langkah-langkah yang harus Anda lakukan ketika menggunakan Flash untuk keperluan pembuatan web. Detilnya akan Anda pelajari pada bab selanjutnya.

12

001-012  

1.1 Membuat Dokumen Baru Langkah pertama tentu saja membuat dokumen baru dengan cara berikut: 1. Pilih menu File > New. 1

Read more
Read more
Similar to
Popular now
Just for you