Jumat, 23 Maret 2012

MEMBUAT ANIMASI PADA FLASH

Animasi dengan Flash
Animasi adalah proses penciptaan efek gerak atau efek perubahan bentuk yang terjadi
selama beberapa waktu. Animasi bisa berupa gerak sebuah objek dari tempat yang satu
ke tempat yang lain, perubahaan warna, atau perubahan bentuk (yang dinamakan
“morphing”)
Animasi Flash dapat dilakukan dengan dua cara yaitu :
1. Frame by frame
2. Tweening
Frame by frame Animation (Animasi Frame Per Frame)
Bentuk dasar dari animasi adalah animasi frame per frame. Animasi frame per frame
menuntut banyak gambar yang harus dibuat. Efek animasi diciptakan dengan mengganti
gambar yang satu dengan gambar yang lain selama beberapa waktu. Contoh animasi
frame per frame dapat dilihat pada Help | Samples | Flower. Semua gambar yang
bergerak dihasilkan dari gambar yang berbeda-beda tiap framenya. Karena animasi frame
per frame harus memiliki gambar yang unik tiap framenya maka animasi frame per frame
sangat ideal untuk membuat animasi yang kompleks yang terdiri dari banyak perubahaan
seperti ekspresi wajah. Kelemahan dari animasi frame per frame adalah membutuhkan
banyak waktu untuk membuat setiap gambar dan menghasilkan file yang besar
ukurannya.
Di dalam Flash, sebuah frame yang memiliki gambar yang unik dinamakan keyframe.
Animasi frame per frame membutuhkan gambar yang unik setiap framenya, hal ini
menyebabkan setiap framenya adalah keyframe.
Menambahkan keyframe
Untuk menambah keyframe pada timeline, sorot frame dan kemudian lakukan satu dari
beberapa cara berikut ini :
• Klik kanan dan pilih Insert Keyframe.
• Pilih Insert | Keyframe dari menu.
• Tekan F6 pada keyboard.
Membuat animasi frame per frame
Di bawah ini akan ditunjukkan proses pembuatan animasi frame per frame :
1. Sorot frame dimana Anda akan memulai animasi frame per frame.
2. Jikalau belum berupa sebuah keyframe, buatlah menjadi keyframe dengan cara
memilih menu Insert | Keyframe (F6).
3. Gambarlah atau impor gambar pertama Anda dari urutan gambar pada keyframe ini.
4. Kemudian klik frame selanjutnya dan buatlah menjadi keyframe yang lain. Rubahlah
isi dari keyframe ini dengan gambar berikutnya.5. Lakukan penambahan keyframe dan perubahan isinya sampai Anda memperoleh
animasi yang utuh. Pada akhirnya teslah animasi Anda dengan kembali ke frame
pertama dan kemudian pilih menu Control | Play .
Tweening
Tween animation sangat mengurangi waktu karena Anda tidak perlu membuat animasi
secara frame per frame. Sebaliknya Anda hanya membuat frame awal dan frame akhir
saja. Dua alasan utama mengapa tween animation sangat baik yaitu karena mengurangi
pekerjaan mengambar dan meminimalkan ukuran file karena isi dari setiap frame tidak
perlu disimpan.
Ada 2 jenis tween animation yaitu Shape tween dan Motion tween, dimana masingmasing
memiliki karakter yang unik.
Shape Tweening (Animasi Perubahan Bentuk)
Shape tweening berguna untuk mengubah bentuk. Flash hanya dapat mengubah bentuk,
jadi jangan mencoba untuk melakukan Shape tween untuk group, symbol, atau teks. Hal
ini tidak akan berhasil. Anda dapat melakukan Shape Tween pada beberapa bentuk di
dalam sebuah layer, tetapi lebih baik untuk menempatkannya pada layer yang berbeda.
Hal ini akan memudahkan jika kita ingin melakukan perubahan. Shape tweening juga
memperbolehkan Anda untuk mengubah warna.
Membuat Sebuah Shape Tween
Langkah-langkah membuat shape tween adalah :
1. Sorot frame di mana Anda ingin membuat animasi. Jika belum berupa sebuah
keyframe maka rubahlah menjadi keyframe.
2. Buatlah gambar pada stage. Ingatlah shape tween hanya bekerja pada bentuk – bukan
pada group, simbol atau teks yang dapat diedit. Untuk 3 elemen tersebut maka Anda
perlu mengubahnya menjadi bentuk dasar dengan melakukan perintah Modify |
Break Apart.
3. Buatlah sebuah keyframe kedua, dan buatlah gambar akhir pada stage.
4. Bukalah kotak dialog Frame Properties dengan mengklik ganda pada frame mana
pun yang berada di antara dua keyframe. Anda dapat juga menyorot sebuah frame di
antaranya dan kemudian memilih menu Modify | Frame.
5. Pilih tab Tweening dan pilih Shape pada field Tweening. Anda akan melihat
beberapa pilihan untuk merubah shape tween seperti yang terlihat pada gambar di
bawah ini.

6. Sorot salah satu Blend Type. Pilihan Distributive akan menciptakan animasi transasi
bentuk yang halus, sedangkan pilihan Angular akan menciptakan transisi bentuk
dengan sudut dan garis-garis lurus. Jika gambar akhir Anda berisi bentuk yang
mempunyai sudut dan garis, pilih Angular, selain itu pilih Distributive.
7. Jika perlu rubahlah Easing slider. Easing menentukan bagaimana animasi Anda dari
awal sampai akhir. Ini berguna jika Anda ingin menciptakan efek mempercepat atau
memperlambat. Jika Anda ingin anmiasi Anda mulai dengan lambat dan kemudian
cepat, geser slider ke arah in. Untuk animasi yang permulaannya cepat, dan
kemudian melambat, geser slider ke arah out. Jika Anda ingin kecepatan animasi
konstan maka biarkan slider berada di tengah. Anda dapat juga mengetik besar dari
Easing yaitu dari –100 sampai 100.
8. Tekan tombol OK. Teslah animasi dengan memilih menu Control | Play (Enter).
Shape hints
Shape hints memberikan kontrol untuk shape tween yang kompleks. Anda bisa mengatur
setiap titik awal dari animasi perubahan bentuk lalu titik akhir dari animasi perubahan
bentuk tersebut. Dengan memberi beberapa shape hints maka kita bisa mengontrol
animasi perubahan bentuk sesuai dengan yang kita inginkan karena dalam animasi
perubahan bentuk yang kompleks seringkali apa yang kita inginkan tidak bisa dilakukan
oleh program Flash secara otomatis kecuali melalui shape hints.
Menggunakan Shape Hints Pada Sebuah Shape Tween
Anda dapat dengan mudah menggunakan shape hints pada shape tween dengan cara
sebagai berikut :
1. Buatlah shape tween dengan menggunakan langkah-langkah Membuat Shape
Tween di atas.
2. Sorot frame awal dari shape tween. Pilih Modify | Transform | Add Shape Hint,
atau tekan Ctrl + H untuk menambah sebuah shape hint. Shape hint muncul dengan
lingkaran merah dengan sebuah huruf di dalamnya (huruf itu mulai dari a sampai z).
3. Pindahkan shape hint ke tempat yang Anda inginkan.
4. Sekarang sorot frame terakhir. Anda akan melihat lingkaran hijau kecil dengan huruf
yang sama seperti pada shape hint awal. Pindahkan shape hint ke tempat di mana
Anda ingin shape hint pertama bergerak menujunya.5. Jalankan movie Anda (Control | Play) untuk melihat bagaimana shape hint
mempengaruhi tweening.
6. Tambahkan shape hint hingga Anda puas dengan hasilnya. Ingatlah untuk
mencocokkan shape hint yang ada pada frame awal dan frame akhir – a harus ke a, b
ke b dan seterusnya.
Jika setelah Anda menambahkan shape hint kemudian Anda tidak menginginkan shape
hint tersebut, Anda dapat membuang semua shape hint dengan memilih menu Modify |
Transform | Remove All Hints. Anda dapat juga mengklik kanan pada salah satu shape
hint untuk membuka menu pop-up shape hint. Menu ini memungkinkan Anda untuk
menambahkan sebuah hint (Add Hint), membuang sebuah hint (Remove Hint), atau
Remove All Hint.
TIPS
Untuk animasi perubahan bentuk yang kompleks, jangan segan-segan untuk
menggunakan shape hint sebanyak-banyaknya. Semakin banyak shape hint maka animasi
Anda akan semakin baik sesuai dengan keinginan Anda.
Motion Tweening (Animasi gerak)
Motion tween tidak hanya berguna untuk menggerakkan groups, simbol, atau teks yang
dapat diedit dari satu tempat ke tempat lain. Motion tween menolong Anda untuk
merubah ukuran, memutar, merubah warna dan transparansi simbol. Motion tween hanya
bisa digunakan pada satu objek pada satu layer. Jadi jika ingin mengerakkan banyak
objek maka membutuhkan banyak layer.
Membuat Motion Tween
Langkah-langkah membuat sebuah motion tween adalah :
1. Sorot frame di mana Anda ingin membuat animasi. Jika belum berupa sebuah
keyframe maka rubahlah menjadi keyframe.
2. Gambar atau imporlah gambar yang Anda ingin lakukan animasi. Anda hanya dapat
melakukan animasi pada group, simbol, dan teks yang dapat diedit.
• Jika Anda menggunakan sebuah gambar, grouplah gambar tersebut atau ubah
menjadi sebuah simbol.
• Jika Anda mempunyai gambar berupa simbol di library, Anda cukup mendrag
gambar dari library ke stage.
• Jika Anda menggunakan teks yang dapat diedit, Anda tidak perlu melakukan apa
pun karena sudah berupa objek.
3. Sorot frame dimana animasi akan berakhir. Rubah frame ini menjadi sebuah
keyframe dengan memilih menu Insert | Keyframe.
4. Pindahkanlah gambar dalam stage ke tempat yang ingin dituju. Ingatlah Anda tidak
hanya dapat menggerakkan gambar, Anda juga bisa melakukan putaran, merubah
ukuran, dan merubah efek warna.
5. Klik kanan pada sebuah frame di antara kedua keyframe dan pilih Create Motion
Tween. Teslah animasi Anda.6. Jika Anda ingin mengubah properties motion tween, klik ganda pada salah satu frame
yang berada di antara kedua keyframe untuk membuka kotak dialog Frame
Properties. Pilih tab Tweening. Anda dapat melakukan perubahan properties, seperti
pada gambar di bawah ini :

• Tween scaling – Jika Anda ingin mengubah ukuran.
• Rotate – Jika Anda ingin memutar objek. Pilih jenis putaran pada menu dropdown
dan kemudian angka rotasi pada kotak times. Jika Anda mengetik 0 pada
kotak times, atau memilih None pada menu drop-down, tidak ada putaran yang
dilakukan.
• Orient to path direction – Ketika objek mengikuti sebuah alur, pilihan ini
menyebabkan objek berada di tengah alur.
• Easing. Easin – menentukan bagaimana animasi Anda dari awal sampai akhir.
Ini berguna jika Anda ingin menciptakan efek mempercepat atau memperlambat.
Jika Anda ingin anmiasi Anda mulai dengan lambat dan kemudian cepat, geser
slider ke arah in. Untuk animasi yang permulaannya cepat, dan kemudian
melambat, geser slider ke arah out. Jika Anda ingin kecepatan animasi konstan
maka biarkan slider berada di tengah. Anda dapat juga mengetik besar dari
Easing yaitu dari –100 sampai 100.

Kamis, 22 Maret 2012

Cara Saat Menambahkan Gambar, Flash, Tabel dsb dalam Mendesain Web

Cara Saat Menambahkan Gambar, Flash, Tabel dsb dalam Mendesain Web


1.    TABEL
BEKERJA DENGAN TABEL
Tabel digunakan untuk memformat data dalam posisi-posisi kolom dan baris.
Perpotongan antara baris dan kolom dinamakan sel, dan kita dapat
memasukkan data di dalam sel tersebut.
Memasukkan tabel
Untuk memasukkan tabel ke dalam halaman homepage, pertama-tama
letakkan kursor ke tempat yang diinginkan. Kemudian, pilihlah satu diantara 3
cara berikut ini :
1.    Klik menu Insert – Table


2.    Klik tombol “Insert table” pada Object Panel, kategori Common
.

3.    Tekan shortcut key : Ctrl+Alt+T
Kemudian akan muncul kotak dialog Insert Table seperti ini :

Masukkan spesifikasi tabel yang diinginkan pada kotak dialog tersebut.
1. Isikan jumlah baris pada “Rows” dan jumlah kolom pada “Columns”.
2. Berikutnya, tentukan lebar tabel terhadap halaman. Pada contoh gambar
di atas, tabel yang akan dimasukkan berlebar 75 persen (“Width : 75
Percent”). Artinya, lebar tabel nantinya adalah 75 persen dari lebar
halaman. Jika menginginkan lebar tabel dalam satuan pixel (fixed size),
isikan jumlah pixel pada Width, kemudian gantilah kotak dropdown yang
bertuliskan Percent menjadi Pixel. Lebar tiap kolom nantinya dibagi sama
rata dari lebar tabel dan bisa di ubah-ubah sesuai keinginan.
3. Berikutnya, masukkan lebar border tabel yang diinginkan dalam satuan
pixel. Jika dikosongi maka dianggap 0 (nol) dan tabel tidak diberi border.
4. Jika diinginkan, masukkan Cell Padding dan Cell Spacing. Cell Spacing
artinya jarak antar sel dalam tabel, sedangkan Cell Padding artinya jarak
dari border sel sampai dengan isi sel. Setelah selesai, klik tombol OK. Jika
ingin membatalkan, tekan Cancel.
Setelah menekan tombol OK, maka tabel akan dimasukkan dalam halaman
Anda. Bentuknya kira-kira seperti ini (bisa berbeda-beda tergantung dari
spesifikasi yang Anda masukkan tadi) :

Saat ini, tabel dikatakan dalam keadaan terpilih (selected), yang ditandai
dengan adanya garis hitam tebal di sekeliling tabel, dan 3 buah kotak hitam
kecil yang disediakan untuk resizing. Seperti yang Anda lihat pada window
Object Properties, terdapat beberapa properti tabel yang disebutkan, antara
lain Rows (jumlah baris), Cols (jumlah kolom), W (lebar, width), H (tinggi,
height), CellPad (cell padding), CellSpace (cell spacing), Align, Border, Bg
Color (background color), Brdr Color (border color), Bg image (Bg image).
Anda dapat bereksperimen dengan mengubah-ubah properti-properti
tersebut. Caranya, isikan nilai (value) baru, kemudian tekan Enter.


2.    FLASH
Tutorial membuat FLASH animasi tulisan dengan program Swishmax
1.    Buka program Swish Max
2.    Klik menu Modify lalu pilih Movie Properties
  Kemudian ubah pixel (width & height) sesuai keinginan anda. Karena disini saya akan memasang animasi flash pada widget blog saya yang lebarnya 265 pixel, maka saya sesuaikan pada animasi flash yang akan saya buat, width 265 dan heightnya saya set jadi 75 pixel. Background color #310397 juga disesuaikan dengan warna background pada widget diblog saya, lanjut.
3.    Lalu buat tulisan menggunakan text tool, disini saya tulis “Selamat Datang Di” dan “Mustguzz Blog” Lebih jelasnya lihat gambar dibawah
 
Keterangan gambar:
1.    Pada garis kotak warna merah, anda bisa merubah properties font (tulisan), ukuran, warna, spasi, nama fontnya dsb.
2.    Pada garis kotak warna ungu, itu adalah panel menu “Timeline”, scene dan layer si objek animasi.
3.    Pada garis kotak warna hijau, itu adalah panel menu tool yang merupakan alat kerja anda.
4.    Selanjutnya kita akan mulai membuat efek animasi pada text tersebut. Klik menu “Add Effect” yang ada disebelah panel menu “Timeline” (pojok kiri atas). Pilih Looping continuously, pilih pilihan efek yg sobat suka .


Pada garis kotak warna merah, adalah properties dari si efek yang sobat pilih (klik ctrl+enter untuk melihat preview animasi). Perhatikan juga panjang/ lama waktu timeline si efek (kotak warna ungu), klik dan tarik garis efek kekanan menurut urutan panjang timelinenya untuk menentukan lamanya animasi.
5.    Lakukan hal yang sama pada text/ tulisan lainnya untuk membuat efek animasi.
6.    Setelah selesai dengan projek sobat, klik file lalu pilih save untuk menyimpan projeknya.
7.    Klik file lalu pilih export SWF, untuk menjadikan file flashnya (.swf).
Oya, tekan ctrl + enter untuk preview hasil projek Flash sobat, bagaimana hasilnya? jika hasilnya dirasa belum memuaskan atau sesuai dengan keinginan sobat, sobat bisa mengedit dan mencoba efek efek animasi lainnya pada swishmax. Sobat juga bisa meng’costumnya lagi atau menambahkan banyaknya layer dan scene agar animasi flash sobat lebih keren lagi. Selamat berkreatifitas dan bereksplorisasi ria Membuat Flash Animasi Teks / Tulisan.







3.    GAMBAR ATAU IMAGE
OBJECT PANEL
Pada Object panel terdapat button-button untuk membuat dan memasukkan object
seperti tabel, layer dan images. Untuk menampilkan dan menyembunyikan Objects panel,
pilih menu Window > Objects.
Memasukkan sebuah Object :
Klik icon button pada Object panel, tergantung pada object yang dipilih. Setelah diklik
salah satu button maka akan tampil Dialog Box yang harus diisi untuk memasukkan
object tersebut. Object panel terdiri dari 7 kategori : Character, Common, Form,
Frames, Head, Invisibles dan Special.
Semua kategori tersebut menampilkan button untuk merubah tampilan : Standart dan
Layout. Untuk saat ini kita hanya akan membicarakan kategori Common atau kategori
yang umum dan biasa dipakai dan kategori Character.
 Memasukkan Image atau gambar
Ada 2 cara untuk memasukkan image pada Dreamweaver , dengan menggunakan main
menu dan dengan menggunakan Object panel.
1. Klik kursor pada tempat dimana ingin dimasukkan image. (coba diklik tempat
paling atas pada dokumen)
2. Pilih menu Insert > Image
3. Tampak dialog box untuk memilih file image pilih image yang akan ditampilkan.
4. Klik select, maka image tersebut akan masuk pada dokumen.
Jika menggunakan cara dengan penggunaan Object panel
Klik button insert image pada Object panel, maka akan tampak tampilan dialog
box yang sama, lakukan seperti langkah sebelumnya.
Membuat rollover image
Rollover image adalah suatu image yang akan berubah ketika pointer dari mouse diarahkan
pada image tersebut.
Rolover image terdiri dari 2 gambar atau image: image pertama akan tampak pada saat
pertama kali loading browser, dan image kedua akan tampak ketika pointer diarahkan pada
image tersebut. Pastikan kedua image tersebut mempunyai ukuran yang sama, bila tidak
sama maka tampilan site tampak tidak teratur.
1. Klik button image rollover pada object panel
2. Maka akan keluar dialog box yang harus diisi nama rollover image tersebut,
memilih image pertama dan memilih rollover image atau image kedua , alamat url
atau link yang dituju bila image tersebut diklik.
 3. Klik option Preload image rollover, untuk memastikan image rollover tersebut
jalan bila dibrowse.
4. Klik OK untuk menutup dialog box tersebut bila sudah selesai.
 Memasukkan Flash Button
Pada Macromedia Dreamweaver dapat langsung memasukkan Flash Button
yang sangat dinamis dan animasi dalam berbagai macam bentuk.
• Klik menu flash button pada Object panel.
Maka akan keluar sebuah dialog box, yang harus diisi, dengan memilih bentuk-bentuk
button, menulis teks dan jenis hingga ukuran teks yang akan ditampilkan pada button
tersebut, memasukkan alamat halaman lain (link).