Kamis, 26 November 2009

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 

Kamis, 05 November 2009

Animasi Teks Loncat pada Adobe Flash CS 3

Animasi Teks Loncat

Buat dokumen baru dan buatlah teks dalam frame 1 pada layer 1, dan klik kanan dan pilih Break Apart dan hasilnya :


Klik frame 1 dari layer 1 kemudian klik menu Modify-Timeline-Distribute to Layer, dan hasilnya adalah :


Klik posisi frame 5 dan 10 pada layer huruf 1, kemudian tekan tombol F6 (insert keyframe) dan hasilnya:


Klik frame 5 di layer huruf 1, kemudian pindahkan huruf tersebut ke atas dari posisi awalnya, hasilnya akan seperti gambar berikut:


Blok frame 1 sampai frame 10 dari layer huruf 1kemudian pada panel properties bagian tween pilih motion dan hasilnya adalah :



Tekan tombol F6 pada posisi frame 5,10 dan 15 pada layer huruh ke 2 dan hasilnya adalah:



Klik frame 10 pada layer huruf ke 2 dan pindahkan teks menuju bagian atas seperti anda melakukan pada huruf pertama, dan hasilnya adalah :


Blok frame 5 sampai frame 15 di layer huruf ke 2 kemudian pada Panel Properties bagian Tween pilih Motion dan hasilnya adalah:


Lakukan hal yang sama pada huruf-huruf berikutnya dengan memperkirakan jarak antar frame.

Animasi Teks Expand pada Adobe Flash CS 3

Animasi Teks Expand

Buat dokumen baru dan buatlah teks dalam frame 1 pada layer 1, select teks dengan selection tool dan klik menu Insert –timeline effect-Expand, maka akan muncul jendela pengaturan expand dan klik Ok. Adapun untuk mencoba anda harus klik tombol Update Preview.




Anda bisa melakukan juga animasi yang lain dengan menu timeline effect .

Animasi Teks Blur pada Adobe Flash CS 3

 Animasi Teks Blur


Buat file baru dan buatlah teks, pilih teks dan dari menu Insert –timeline effect-Blur, maka akan ada panel blur seperti :




dan klik tombol Ok dan hasilnya adalah teks dengan animasi blur. Jika ingin animasi rata kiri dan kanan maka aligment pada saat membuat text adalah center.

Animasi Teks Berputar dengan adobe flash CS 3

Animasi Teks Berputar

Buat file baru dan buatlah teks di layar kerja dengan menggunakan teks tool dan select text dan klik kanan dan pilih Break Apart dan hasilnya seperti :


Klik frame 1 dari layer 1 kemudian klik menu-modify-timeline-distribute to layer dan hasilnya adalah :


Klik pada posisi frame 5 dari layer huruf 1 kemudian tekan tombol F6 (klik kanan – insert keyframe) dan hasilnya adalah :


Blok posisi frame 5 dari layer huruf 1 (klik 2 kali pada salah satu frame antara 1 sampai 5) dan pada panel properties atur bagian tween: motion dan rotate CW dan hasilnya adalah :



Klik kanan pada frame 3 di layer huruf ke 2 dan pilih insert keyframe, lakukan juga pada posisi frame 8 di layer yang sama, dan hasilnya adalah :


Blok antara frame 3 dan frame 8 pada layer huruf ke 2 dan ubah nilai pada panel properties bagian tween: motion dan rotate CW dan hasilnya adalah :


Lakukan hal yang sama pada huruf berikutnya pada frame huruf berikutya tapi perkirakan framenya agar animasi putar bisa saling bergantian. Jika berhasil maka huruf akan berputar pada masing-masing huruf.

Memasukan Suara dlm Adobe Flash CS 3

Memasukan Suara

Jenis suara yang dapat dimasukan missal MAV,MP3.

Setelah membuat file baru, klk pada layer 1 kemudian ubah namanya dengan nama music, masukan suara dengan klik pada menu File-import-import to library. Sebagai latihan masukan lagu jenis mp3. Setelah itu pastikan file sudah ada pada panel library (untuk menampilkan panel library tekan ctrl+L). drag lagu yang tertera dalam panel kemudian pindahkan ke dalam stage, dan coba dengan menekan tombol ctrl+enter.

Animasi Guide dengan Adobe Flash CS 3

ANIMASI GUIDE
Buatlah sebuah file baru, double klik pada layer 1 dan ubah namanya dengan nama bola


klik layer bola kemudian klik menu insert-timeline-motion guide, maka akan muncul folder guide diatas layer bola



Klik pada posisi frame 1 dari layer bola kemudian buat objek bola dan warnai sesuka hati, setelah itu klik pada frame 20 dari layer bola dan tekan tombol F6 (insert keyframe), maka hasilnya seperti berikut


Klik kanan antara posisi frame 1 sampai frame 20 pada layer bola, dan pilih create motion tween, maka akan berubah seperti :


Klik pada posisi frame 1 dari layer guide, kemudian buat garis lintasan di stage untuk bola menggunakan pencil tool ( ) , anda bebas menggambar lintasan



Klik pada posisi frame 20 dari layer guide, kemudian tekan tombol F5 (insert frame), maka hasilnya :



Geser bola yang ada pada layer bola pada frame 1 ke arah awal posisi garis dan klik pada frame 20 pada layer bola dan pindahkan bola pada ujung garis


Rabu, 04 November 2009

Menggambar Objek pada Adobe Flash CS 3


MENGGAMBAR OBJEK

Menggambar garis lurus

1. Buatlah file baru dan klik line tool ( \ ) pada toolbox, atur beberapa property yang ada pada bagian bawah layar kerja seperti gambar berikut:




2. Setelah merubah property sekarang anda mulai bisa membuat garis pada layar frame yang aka nada buat gambar garis dengan cara klik dan drag, lepaskan drag saat selesai menggambar. Disini adan bebas membuat garis lurus dengan berbagai posisi.


Menggambar Garis Lengkung

1. Untuk membuat garis lengkung lakukan langkah yang sama dengan membuat garis lurus kemudian klik selection tool, kemudian arahkan pointer ke arah garis yang akan di lengkungkan sehingga pointer berubah bentuk seperempat lingkaran.

2. Selanjutnya drag ke arah yang anda inginkan.


Menggambar Bidang Geometri

Untuk membuat bidang-bidang geometri , semua terrangkum dalam sebuah icon kotak (rectagle pada tool), jika anda klik akan Nampak beberapa icon yang melambangkan geometri yang akan kita buat seperti, lingkaran, elips, segi empat dan persegi, untuk menggambarnya sama dengan metode membuat garis yaitu dengan klik icon bidang yang akan dibuat dan lakukan klik dan drag ke layar kerja.




Menggambar bentuk kapsul

Klik rectangle tool dan ubah nilai sudut  yang ada pada jendela property (contohnya yang ada pada gambar adalah -44), semakin besar maka akan semakin besar sudut yang akan dibuat begitu juga sebaliknya



Menggambar dengan Pen Tool

Untuk menggambar dengan pen tool berbeda dengan membuat objek yang lain, setelah klik symbol pen tool maka kita hanya perlu melakukan klik pada titik-titik yang akan kita gambar bukan dengan cara drag seperti mumbuat bidang geometri, jika titik-titik tersebut bertemu dan menjadi sebuah objek maka anda bisa mewarnai isi dari gabungan titik-titik tersebut dengan klik icon dibawah ini.