Membuat Web Full Animasi Cantik.......

MEMBANGUN SITUS CANTIK FULL ANIMASI

Untuk membuat situs sederhana tapi menarik n’ full animasi caranya gampang kux…. Neh salah satunya….

Lihat Swf

1. Mengatur ukuran dan background situs
Pertama kita akan mengatur / mengubah ukuran dan warna latar belakang situsnya. Caranya…
- klik menu Modify > Document sehingga kotak dialognya akan tampil. Isikan dimensions dan pilih warna hitam pada background color, serta gunakan 30 fps untuk frame rat.

2. Membuat Logo Situs
a. Bentuk Logo Situs
- Klik menu Insert > New Symbol, lalu pilih movie clip pada behavior. Seperti gambar dibawah ini :

- Gambar bentuk kotak yang dimiringkan 900. Gunakan Rectagle Tool dengan mengatur optionnya. Pada bagian Number Of Sides, gunakan nilai 4, lalu gambar bentuk kotak miring 900 dengan Stroke berwana putih dan fill tanpa warna.

- Imporlah sebuah gambar logo (File > Import > Import to library). Latihan ini menggunakan gambar logo windows. Lalu letakkan diatas kotak.

- Klik kanan pada frame 50, lalu pilih insert frame. Kemudian buatlah layer baru (Layer 2). Pada Layer 2, gambarlah lingkaran dengan warna gradasi linier dengan ukuran yang menutupi objek sebelumnya, yaitu kotak stroke putih dan logo gambar.
- Gambar lagi sebuah lingkaran berwarna putih dengan ukuran lebih kecil dari lingkaran gradasi dan letakkan ditengah lingkaran sebelumnya.

- Klik diluar lingkaran putih sehingga lingkaran merah tidak dalam keadaan terpilih, lalu pilih / klik lagi pada lingkaran putih dan tekan tombol Delete di keyboard sehingga terjadi pengirisan pada lingkaran gradasi yang sekarang berbentuk seperti cincin mengelilingi logo.

b. Animasi Logo Situs
Setelah model dan bentuk logo sudah terbentuk, sekarang kita akan menganimasikan cincin yang akan berputar mengeliling logo gambar.
- Klik / pilih lingkaran gradasi yang sudah menjadi cincin, lalu ubah menjadi symbol graphic.
- Klik frame 50 di layer 2, lalui masukkan keyframe (F6) pada frame tersebut.
- Klik frame 1 di Layer 2 untuk kembali ke frame 1, lalu ubah Propertiesnya sehingga Tween bernilai Motion dan Rotate bernilai CW dan 1 times. Seperti gambar berikut.

- Sekarang frame pada timeline terlihat seperti pada gambar dibawah ini.

- Klik menu Edit > Edit Document untuk kembali ke movie utama (Scene 1)
- Pada movie utama, klik menu Window > Library untuk menampilkan Library Panel. Di sana sudah terdapat simbol animasi logo situs yang kita buat di movie clip (symbol 1), Pilih/Klik pada symbol 1, lalu drag ke tengah layar. Seperti gambar berikut :

3. Animasi Intro
Animasi intro digunakan untuk animasi pembuka sebelum masuk ke situs. Pembuatan animasi pada masing-masing objek akan dibagi menjadi beberapa yaitu :
a. Animasi Logo di Movie Utama
Pertama kita akan menganimasikan logo yang akan dibuat pada sebelumnya.
- Pada movie utama, klik frame 30 di layer 1, lalu masukkan Keyframe pada frame tersebut.
- Klik frame 1 di Layer 1 untuk kembali ke frame 1, lalu pilih Motion pada bagian Tween dan 100 pada Ease dalam Properties :
- Masih di frame 1 lakukan pengecilan ukuran pada logo situs seperti pada gambar dibawah.

- Untuk membatasi frame yang digunakan untuk keseluruhan animasi pada situs yang akan kita buat nantinya, klik kanan pada frame 360 di Layer 1 lalu pilih Insert Frame.

b. Animasi Bar Logo
- Buat layer baru (layer 2) diatas layer 1. Pada layer 2, klik frame 30, lalu masukkan blank keyframe pada frame tersebut.
- Masih dilayer 2 pada frame 30, gambarlah objek bar logo dengan fill berwarna biru tua dan stroke berwarna putih, lalu letakkan objek diatas logo situs. Lihat gambar :

- Klik / pilih pada objek bar logo, lalu ubah menjadi simbol Graphic.
- Klik frame 50 dilayer 2 masukkan Keyframe (F6)
- Klik frame 30 di Layer 2 untuk kembali ke frame 30. Pada Properties frame 30, pilih Motion pada bagian Tween dan -100 pada Ease.
- Masih diframe 30, lakukan pengecilan ukuran pada objek bar logo. Seperti gambar

- Pada timeline panel, ubah posisi layer 2 menjadi dibawah layer 1 dengan cara men-drag ke bawah layer 1. Jadi objek bar berada dibawah logo situs. Seperti gambar berikut :

c. Animasi Bar Navigasi
- Buat layer baru (layer 3) diatas layer 1. Pada layer 3 klik frame 50, masukkan blank keyframe.
- Masih di layer 3, pada frame 30 gambar objek bar navigasi dengan fill dan stroke sesuai keinginan anda. Lalu letakkan objek tersebut diatas logo situs.

- Klik / Pilih pada objek bar navigasi, lalu ubah menjadi simbol Graphic.
- Klik frame 50 pada layer 3, pada properties frame 50, pilih motion pada bagian tween dan 100 pada ease.
- Pada frame 50, Lakukan pengecilan ukuran pada objek bar navigasi seperti pada gambar.

- Pada timeline panel, ubah posisi layer 3 menjadi dibawah layer 2 (layer 3 berada dibawah layer 2). Hal ini mengakibatkan objek bar navigasi berada dibawah logo situs dan bar logo.

d. Animasi Panel Background
- Buat layer baru (Layer 4). Klik frame 70 lalu masukkan blank keyframe.
- Pada frame 70, gambarkan objek panel background, fill dan stroke sesuai keinginan anda. Ukuran menutupi semua objek sebelumnya.
- Klik / pilih pada objek panel background lalu ubah menjadi simbol Graphic.
- Klik frame 90 di layer 4, lalu masukkan keyframe. Kembali ke frame 70, pilih motion pada bagian tween dan -100 pada Ease.
- Di Frame 70 lakukan pengecilan ukuran pada objek panel background. Dan ubah posisi layer 4 dibawah layer 3 (paling bawah sendiri) seperti gambar :

e. Animasi Background Utama
Background utama adalah background yang akan memenuhi seluruh layar dari situs.
- Buat layer baru (layer 5) diatas layer 1. Klik pada frame 90, lalu masukkan blank keyframe.
- Importlah gambar background. Pada latihan ini menggunakan gambar bluehills.jpg. Caranya File > Import > Import to Library, kemudian drag gambar ke tengah layer (layer 5 – sesuaikan ukuran sesuai layar utama)
- Klik / pilih pada background utama, lalu ubah menjadi simbol Graphic.
- Klik frame 110 di layer 5, masukkan keyframe.
- Klik frame 90 di layer 5, pada properties frame 90 pilih motion : tween.
- Ubah posisi layer 5 dibawah layer 4 (paling bawah) dengan cara di-drag.

4. Tombol Navigasi
Tombol yang digunakan untuk menjelajahi semua halaman situs.
- Buat layer baru (layer 6) diatas layer 1. Pada layer 6, klik frame 160, lalu masukkan blank keyframe.
- Di Frame 160 gambarlah objek lingkaran gradasi lalu tambahkan teks “Home”

- Pilih kedua objek tersebut (objek lingkaran gradasi dan teks “Home”) lalu ubah menjadi simbol Button.
- Ubah posisi layer 6 dibawah layer 2.
- Untuk membuat tombol navigasi yang lain, (Profil, Produk, Layanan, Kontak Kami) buatlah layer baru kemudian lakukan 4 langkah-langkah diatas. Setiap tombol navigasi dibuat layer baru. Perhatikan gambar berikut :

5. Animasi Transisi ke halaman yang diinginkan
Animasi transisi adalah animasi yang dibuat untuk efek pergantian sehingga pada saat kita memilih atau meng-klik tombol “Home” maka akan berpindah ke halaman home. Begitu juga pdaa saat kita meng-klik tombol “Profil” akan berpindah kehalaman profil.
a. Halaman Web
- Buatlah layer baru (beri nama halaman) kemudian pada frame 206 Insert Blank Keyframe, dan tambahkan Action “ Stop(); ”
- Pada frame 207 insert blank keyframe kemudian gambarlah sebuah rectangle / kotak sesuai ukuran yang anda inginkan > convert to symbol (jadikan movie clip home).

- Pada gambar diatas edit movie clip (klik kanan pada gambar > edit). Nah akan terlihat pada gambar berikut :

- Pada frame 15 Insert Blank Keyframe (masih pada layer 1 didalam edit movie clip home) perbesar gambar kemudian tuliskan sesuatu sesuai keinginan anda. Tambahkan Shape Tween pada frame 1.
- Buat layer baru untuk layer script, tambahkan Action pada frame 15 (terakhir).

stop();

- Kembali ke scene 1

- Untuk membuat isi halaman pada profil, pada layer halaman dalam scene 1, insert blank keyframe frame 208, lakukan langkah seperti langkah A diatas.
- Untuk membuat isi halaman pada produk, pada layer halaman dalam scene 1, insert blank keyframe frame 209, lakukan langkah seperti langkah A diatas.
- Untuk membuat isi halaman pada layanan, pada layer halaman dalam scene 1, insert blank keyframe frame 210, lakukan langkah seperti langkah A diatas.
- Untuk membuat isi halaman pada kontak kami, pada layer halaman dalam scene 1, insert blank keyframe frame 211, lakukan langkah seperti langkah A diatas.

b. Kembali ke layer button, klik button Home diarea kerja, lalu tekan F9-Action, masukkan script seperti berikut.

- Script diatas maksudnya, ketika mouse dilepas (habis di klik) frame akan berhenti di frame 207 (pada frame 207 terdapat movie clip Home / isi halaman home).

c. Untuk button Profil, Produk, Layanan dan Kontak kami lakukan hal ynag sama.

6. Animasi Header
Untuk merupakan judul dari web tersebut. Untuk membuat berikut langkah-langkahnya :
- Tambahkan layer baru (beri nama header). Pada frame 150 tuliskan judul web dengan menggunakan text tool sesuai keinginan anda. insert blank keyframe pada frame 195.
- Tambahkan layer baru diatas layer header, kemudian klik pada frame 150 dan insert Blank Keyframe, gambarkan sebuah lingkaran > convert symbol ke movie clip. Klik pada frame 194 insert blank keyframe. Kemudian kembali pada frame 150 buatlah motion pada bagian tween.
- Dan klik kanan pada timeline layer diatas layer header kemudian pilih Mask.

 Selamat Mencoba 