Mulailah dengan meluncurkan Adobe Flash dari menu program aplikasi:
Pilih Start> Programs> Adobe CS3 Web Premium> Adobe Flash CS3.
layar Kamu akan terlihat mirip dengan gambar yang ditampilkan di bawah ini.

Jangan khawatir jika kamu merasa sedikit terintimidasi oleh semua jendela dan panel yang muncul. Kita akan fokus pada fungsi yang diperlukan untuk membuat banner logo perusahaan. Apabila kamu ingin mempelajari lebih lanjut tentang Flash, cobalah keluar Memulai dengan opsi Flash ditemukan di bawah “Help” di menu bar atas atau mempertimbangkan untuk mengambil kursus multimedia Flash.
Dan tutorial ini akan membahas beberapa hal yang penulis ketahui :
Membuat Movie Flash Baru
Untuk membuat film Flash baru, pilih File> New. Kotak dialog New Document akan ditampilkan. Pilih “Flash File (ActionScript 3.0)” dan klik OK.Flash sekarang siap untuk kamu membuat dokumen baru.. Tampilan kamu harus serupa dengan yang di bawah ini.

Luangkan waktu sebentar untuk membiasakan diri dengan tampilan itu.
- The “Untitled-1 *” pada Title Bar adalah nama file saat ini. (Jangan khawatir jika file kamu memiliki nomor yang berbeda setelah “Untitled-” dari 1.)
- Perhatikan bahwa ada sejumlah panel dan menu. Kamu akan bekerja dengan beberapa dari bagian tersebut dalam tutorial ini.
- Lihat area pusat dari jendela Flash dan catatan “Timeline”. Ini digunakan untuk mengkonfigurasi animasi frame dengan frame serta lapisan mengkonfigurasi dan menambahkan efek animasi.
- The white rectange is disebut Tahap. Ini adalah area yang sangat penting pada tahap animasi Flash. Dimensi Stage adalah dimensi animasi Flash.
Mengatur Ukuran Stage
Dalam tutorial ini Anda akan menciptakan sebuah banner dengan dimensi 468×60. Untuk mengatur Tahap ke dimensi-dimensi ini, pilih Modify> Document untuk menampilkan kotak dialog Properties Dokumen ditunjukkan di bawah ini.
Mengkonfigurasi Judul, Deskripsi, dan kotak teks Dimensi seperti yang ditunjukkan di atas. Perhatikan bahwa warna latar belakang disetel ke putih tapi bisa diubah dalam kotak dialog. Tinggalkan tingkat Frame dan unit default values. Klik OK.
Jendela Flash harus ditampilkan seperti yang ditunjukkan di bawah ini. Kamu mungkin harus menggunakan scroll bars di Stage area untuk menampilkan banner.

Save the File Simpan File tersebut
Ini adalah ide yang baik untuk menyimpan file ketika menggunakan Flash. Select File > Save. Pilih File> Simpan. Sebagai kotak dialog akan terbuka. Buat folder baru bernama FlashBanner dan simpan file dengan nama “banner.fla”. Fla” (biasanya diucapkan “flah”) digunakan untuk file sumber Flash movie. Judul bar dalam jendela Flash sekarang harus menampilkan “banner.fla”.Lanjutkan dengan halaman berikutnya
untuk menjadi lebih terbiasa dengan panel yang digunakan dalam Flash.
Flash Alat Panel
Sekilas Banner animasi
// Biasanya banner yang kita buat akan ditampilkan di atas. Banner ini berperan sekali saat halaman web dibuka. Jika kamu ingin melihat banner lagi, klik tombol refresh pada jendela browser (atau tekan F5 untuk me-refresh halaman).Banner ini berisi tiga lapisan(layer) : Latar Belakang, Bentuk, dan Teks. Lapisan Latar perubahan warna di latar belakang film. Layer Bentuk mengkonfigurasi cara perubahan bentuk oval atau morphs sebagai animasi akan memutar. Layer Teks mengontrol animasi dari nama perusahaan.
Mengkonfigurasi Layers
Kostumisasi Layer Background

Timeline harus serupa dengan yang ditunjukkan di atas. Jika kamu tanpa sengaja mengklik pada layer atau frame yang berbeda – kamu dapat kembali ke perubahan awal menggunakan CTRL-Z atau Edit> Undo.
frame yang masih dipilih akan mengubah warna persegi panjang menggunakan Selection Tool. Klik dua kali pada persegi panjang. Berikutnya, menggunakan Color Chooser untuk memilih warna # 00CCCC untuk kedua pensil (outline) dan bucket (fill) warna. Persegi panjang pada stage harus menjadi naungan seperti yang ditunjukkan di bawah ini.

Add Animation to the Background Layer
Berikutnya, kita akan menggunakan Flash untuk secara otomatis mengubah warna dari biru pirus pada lapisan latar belakang dengan menggunakan Tween Shape. Flash akan membuat semua frame antara frame 1 dan Frame 50.Klik pada Frame Frame antara 1 dan Frame 50 pada layer background. Panel Properties akan menampilkan menu Tween pilih. Pilih Bentuk seperti ditunjukkan pada gambar di bawah ini.

Timeline sekarang akan menunjukkan panah antara 1 dan Frame Frame 50. Timeline kamu akan tampak seperti gambar dibawah. Jika Anda melihat garis putus-putus, reload versi yang tersimpan dari banner.fla untuk mencoba lagi.

Test Animasi Background
You can “play” the animation with the Timeline. Anda bisa “bermain” animasi dengan Timeline. Scroll the Timeline to the left until Frame 1 is visible. Timeline Gulir ke kiri sampai Frame 1 adalah terlihat. Click on the red rectangle (called the “playhead”) and drag it to the right to see the color of the rectangle change automatically! Klik pada kotak merah (disebut “playhead”) dan tarik ke kanan untuk melihat perubahan warna persegi panjang secara otomatis! Another method for this playback is to select Control > Play from the menu. Metode lain untuk pemutaran ini adalah dengan memilih Control Play> dari menu.Kamu juga bisa menguji animasi luar Timeline dan Stage. Select Control > Test Movie. Pilih Control> Test Movie. Sebuah jendela baru akan terbuka dengan film Flash seperti yang ditunjukkan di bawah ini.

Flash telah menciptakan swf. Jika kita melihat dekat, warna latar belakang animasi akan berubah dari biru muda sampai biru kehijauan. Tidak banyak yang terjadi, tetapi kamu memiliki dua lapisan lain dari animasi untuk mengkonfigurasi!
Simpan file Anda.
Konfigurasi Shape Layer
Sebelum mulai bekerja di layer Shape, klik icon ‘lock’ pada layer background untuk mencegah terjadinya perubahan.Sekarang siap untuk memulai dengan layer Shape. Kamu perlu memberitahu Flash layer apa yang sedang kamu kerjakan. Klik di Frame 1 dalam Timeline pada baris yang sama dengan lapisan Shape untuk memilih layer dan frame. Lihat Gambar di bawah ini.


Timeline Anda harus serupa dengan yang ditunjukkan di atas
Dengan frame ini masih dipilih, Anda akan mengubah warna dan bentuk Oval. Anda akan menggunakan Selection Tools pada panel Tools (lihat gambar di bawah).

Klik pada Slection Tools. Klik oval untuk menampilkan panel Properties. ubah tinggi dan 100,0. the width to 200.0 and the Y value to -10.0. lebar untuk 200,0 dan nilai Y untuk -10,0. Ubah baik garis besar dan mengisi warna # 006666. rectangle. persegi panjang. Gunakan Warna Chooser untuk memilih warna # 00CCCC untuk kedua pensil (outline) dan bucket (fill) warna. Klik Stage untuk melihat efek dari nilai-nilai baru. Sifat dan panel Tahap ditunjukkan di bawah ini.

Latar Belakang Layer memiliki 50 frame dan layer Shape memiliki 25 frame. Srcoll Timeline Frames sehingga terlihat Frame 50. Klik di Frame 50 Layer Bentuk dan tekan tombol F5 untuk menambahkan frame ke timeline. Lihat gambar di bawah ini.

Tambahkan ke Animasi Shape Layer
Berikutnya, Anda akan menggunakan Flash untuk secara otomatis mengubah warna dan bentuk oval pada layer Shape menggunakan Tween Shape. Klik pada Frame Frame antara 1 dan Frame 25 di layer Shape. Panel Properties akan menampilkan menu Tween pilih. Pilih Bentuk seperti ditunjukkan pada gambar di bawah ini.
Timeline sekarang akan menunjukkan panah antara 1 dan Frame Frame 25. Timeline akan tampak seperti gambar dibawah.

Test Background dan Animasi Bentuk
Anda bisa “bermain” animasi dengan Timeline. Gulir Timeline ke kiri sampai Frame 1 adalah terlihat. Klik pada kotak merah (playhead) dan tarik ke kanan untuk melihat baik Bentuk dan animasi Latar Belakang! Metode lain untuk pemutaran ini adalah dengan memilih Control Play> dari menu.Anda juga bisa menguji animasi luar Timeline dan Stage. Pilih Control> Test Movie. Sebuah jendela baru akan terbuka dengan film Flash Anda seperti yang ditunjukkan di bawah ini.

Perhatikan bahwa bagian atas dan bawah oval tidak muncul dalam film Flash swf -. Itu karena bagian ini berada di luar Stage oval. Ini adalah teknik yang umum.
Simpan file Anda.
Mengkonfigurasi Teks Layer
Sebelum mulai bekerja di layer Teks, klik ikon Lock pada Layer Shape untuk mencegah terjadinya perubahan.Anda perlu memberitahu Flash layer apa yang sedang Anda kerjakan. Klik di Frame 1 dalam Timeline pada baris yang sama dengan layer Teks untuk memilih layer dan frame. Lihat Gambar di bawah ini.


Frame yang masih dipilih akan memindahkan lokasi teks. Tarik objek teks ke kiri dengan mouse, atau menggunakan Slection Tools untuk klik pada objek teks dan memodifikasi panel Properties – mengubah nilai X untuk 40,0. Stage Anda harus serupa dengan gambar di bawah ini.

Pada layer lainnya memiliki 50 frame dan layer Teks memiliki hanya 40 frame. Srcoll Timeline Frames sehingga terlihat Frame 50. Klik di Frame 50 Layer Teks dan tekan tombol F5 untuk menambahkan frame ke timeline. Lihat gambar di bawah ini.

Add Animation to the Text Layer
Berikutnya, Anda akan menggunakan Flash untuk secara otomatis memindahkan teks dari sisi kanan panggung (Frame 1) ke lokasi di Panggung di Frame 40. Anda akan mengatur suatu Tween Motion. Klik pada Frame Frame antara 1 dan Frame 40 di lapisan Teks. Panel Properties akan menampilkan menu Tween pilih. Pilih Motion seperti yang ditunjukkan pada gambar di bawah ini.
Timeline sekarang akan menunjukkan panah antara 1 dan Frame Frame 40. Timeline akan tampak seperti gambar dibawah. Lihat Timeline dan memeriksa latar belakang warna frame. Shape tweens ditandai dengan latar belakang warna hijau dan Motion Tween ditunjukkan dengan warna latar belakang biru.

Test Background, Shape, dan Text Animation
Anda bisa “bermain” animasi dengan Timeline. Scroll Timeline ke kiri sampai Frame 1 adalah terlihat. Klik pada kotak merah (playhead) dan tarik ke kanan untuk melihat baik Bentuk dan animasi Latar Belakang bermain! Metode lain untuk pemutaran ini adalah dengan memilih Control Play> dari menu.Anda juga bisa menguji animasi luar Timeline dan Stage. Pilih Control> Test Movie. Sebuah jendela baru akan terbuka dengan film Flash Anda seperti yang ditunjukkan di bawah ini.

Perhatikan bahwa sekarang teks bergerak dari kanan ke kiri. Anda telah selesai merancang animasi Flash. Langkah berikutnya adalah untuk mempublikasikan clip swf. Dan testimoni di halaman web.
Simpan file Anda.
Publikasikan Clip Anda
Pilih File> Publish Setting untuk menampilkan kotak dialog Pengaturan Publish ditunjukkan di bawah ini Anda akan bekerja dengan tab Format, Flash tab, dan tab HTML kotak dialog ini.Flash telah menerbitkan animasi Anda sebagai Flash Movie yang disebut banner.swf, dan telah menciptakan sebuah halaman web file bernama banner.html yang menampilkan banner.swf.
Test the Web Page and Flash Movie
Luncurkan browser dan buka file banner.html. Hasil Anda harus serupa dengan gambar di bawah ini:
Lihat kode sumber halaman web untuk melihat kode HTML secara otomatis dihasilkan oleh Adobe Macromedia Flash
untuk menampilkan film Flash. Anda dapat mengcopy dan menyisipkan kode ini di halaman web Anda sendiri sesuai kebutuhan.
Selamat!
Anda telah membuat banner animasi pertama Anda menggunakan Flash!
//
Tutorial Tambahan: Membuat Banner Animasi Anda diklik
Kebanyakan iklan banner dapat diklik – ketika pengunjung mengklik pada sebuah halaman web baru yang ditampilkan. Anda akan belajar tentang teknik ini. Tutorial ini mengharapkan Anda telah menyelesaikan ” Membuat Banner Animasi “. Dalam tutorial ini banner.fla Anda akan memodifikasi file yang akan “diklik” – ketika pengunjung mengklik pada itu halaman web baru akan terbuka.Add a New Layer Tambah Layer Baru
Peluncuran Flash dan membuka file banner.fla Anda. Anda akan menambahkan lapisan baru diatas layer Teks. Pertama, klik pada label untuk lapisan Teks. Kemudian, klik ikon Add New Layer pada Timeline tersebut. Nama Tombol Layer. Timeline Anda harus serupa dengan gambar di bawah ini.
Pilih Insert> New Symbol untuk membuat objek tombol baru. Buat box dialog New Symbol ditampilkan. Konfigurasikan nama sebagai “btnLink” dan pilih ” Button “. Lihat gambar di bawah ini.

Klik OK dan Timeline dan Stage untuk tombol ditampilkan.
Hal ini berbeda dengan Timeline dan Stage untuk animasi Flash (berlabel Scene 1). Lihat Gambar di bawah ini.

Anda akan membuat sebuah tombol tak terlihat sehingga hanya frane yang menempatkan konten di dalam frame Hit. Klik pada Frame Hit untuk memilihnya.
Gunakan Rectangle Tool untuk menggambar persegi panjang yang mencakup seluruh tahap – dengan nilai-nilai W = 468,0, H = 60,0, X = 0,0, Y = 0,0. warna tidak penting – tombol akan terlihat mirip dengan gambar di bawah ini.

Klik pada “Scene 1″ di btnLink Timeline untuk menampilkan Timeline untuk animasi Flash. Anda mungkin bertanya-tanya mana tombol tersebut. Flash telah menyimpan tombol di Library Anda. Library adalah sebuah panel di sisi kanan dari jendela Flash. Jika tidak ditampilkan, pilih Window> Library from the Menu. Lihat Library pada gambar dibawah.

Mari kita tambahkan tombol untuk animasi Flash. Pilih Frame 1 pada layer Tombol. Tarik tombol btnLink dari Libary to the Stage. tampilan Anda harus serupa dengan figur di bawah ini. Perhatikan bagaimana menampilkan tombol sebagai transparan atas benda lain.

Simpan file Anda.
Lanjutkan dengan tutorial untuk menambahkan suatu perilaku tombol.
Menambahkan Button
Kita perlu mengkonfigurasi tombol untuk pergi ke halaman web baru saat diklik. Flash Behaviors adalah pra-kode script yang mendengarkan acara seperti gerakan mouse dan melakukan tindakan.Klik tombol di Stage untuk memilihnya. Lalu, Pilih Window> Behaviors to open the Behaviors panel (lihat gambar dibawah).

Klik tanda plus pada Behavior panel dan pilih Web> Go to Web Page seperti yang ditunjukkan pada gambar di bawah ini.

Menuju ke URL menampilkan kotak dialog. Konfigurasi ini dengan URL yang akan ditampilkan ketika mengklik Web pengunjung situs pada animasi Flash banner Contoh ini menggunakan buku teks’s homepage – http://www.webdevfoundations.net. Jangan mengubah nilai untuk “Open in”.

Klik OK. Behavior panel sekarang akan menampilkan “On Release” behavior seperti yang ditunjukkan di bawah ini.

Behind the scene (di Panel Action – pilih Window> Actions to view), Flash Actionscript telah dikodekan perintah untuk menunggu mouse untuk diklik dan dirilis di atas area tombol. Ketika ini terjadi, pernyataan ActionScript untuk menampilkan halaman web akan mengeksekusi.
Simpan file Anda.
Test Your Movie Test Movie Anda
Pilih Control> Test Movie untuk menguji animasi. Klik pada film dan harus menampilkan halaman web. Dalam modus ini uji jendela browser terbuka dengan halaman tetapi bila digunakan dalam sebuah halaman web, animasi Flash akan membuka halaman baru pada jendela yang sama (purpose of _”self ” nilai untuk ” Open in ” pilihan Menuju ke URL kotak dialog ..Publikasikan dan Test di Halaman Web
Pilih File> Publish.Simpan file Anda.
Ingat bahwa pengaturan Publish Anda membuat kedua swf film. Flash dan web halaman contoh bernama banner.html. Launch the banner.html web page in a browser. Peluncuran halaman web banner.html pada browser. Klik pada animasi Flash dan halaman web baru (contoh dalam http://webdevfoundations.net) akan ditampilkan.
Tidak ada komentar:
Posting Komentar