Membuat Animasi Ombak

Tutorial kali ini adalah Tutorial Membuat ombak di flash, disini saya menggunakan Macromedia Flash 8. Kalo kita berbicara tentang debur ombak penulis jadi ingat Pantai Indonesia yang Indah nih.

1. Buka program flash 8
Ubah ukuran stage menjadi 768 x 576 pixels.
Ganti warna bacground menjadi warna hitam


2. Ganti warna fill color menjadi #336699 dan warna stroke dijadikan none

3. Klik rectangle tool   untuk membuat airnya dengan mendragnya ke stage seperti gambar dibawah ini.



4. Klik kanan di frame 15 lalu  klik insert keyframe, Ubah gambar airnya dengan cara tarik ke atas menggunakan selection tool yang sebelah kiri
Gambarnya :



7. Klik di frame 1  lalu pilih tween shape

gambarnya


Di frame 35 klik kanan insert keyframe, Ubah gambarnya seperti ini>>



8. Klik Di frame 15 pilih tween shape


9. Lalu copy frame 1
caranya : klik kanan pada frame 1 dan pilih Copy Frames
kemudian Pastekan di frame 60


10. Klik Di frame 35 pilih tween shape
Seperti gambar dibawah ini:

Selamat mencoba...(@_@)

Jika semua sudah selesai tinggal kita menekan ctrl + enter  dan nikmati hasilnya

animasi ombak

Read More

Tutorial HTML: Mengenal Lists

Terdapat tiga tipe list yang dapat digunakan, yaitu : 

Unordered Lists: <UL> Untuk membuat daftar item dengan tanda bullet. List entries didefinisikan dengan tag <LI>.

Contoh :

<UL>
<LI> Item nomer 1
<LI> Item nomer 2
<LI> Item nomer 3
</UL>

Hasil dari kode di atas adalah:

• Item nomer 1
  
• Item nomer 2
  
• Item nomer 3
  

Dengan atribut TYPE Anda dapat mendefinisikan bentuk disc, circle atau square bullet point.

Contoh :

<UL COMPACT TYPE=square> �

Ordered Lists: <OL> Juga digunakan untuk membuat daftar item, dengan tiap item dapat menggunakan angka arab atau romawi. List entries juga didefinisikan dengan <LI> tag.

Contoh :

<OL TYPE=I>
<LI> Item nomer 1
<LI> Item nomer 2
<LI> Item nomer 3
</OL>

Hasil dari kode di atas adalah :

1. Item nomer 1
   
2. Item nomerr 2
   
3. Item nomerr 3
   

Untuk TYPE Anda dapat juga menggunakan :

1- Default numbers, 1, 2, 3, etc.
A- Huruf besar. A, B, C, etc.
a- Huruf kecil. a, b, c, etc.
I- Romawi huruf besar. I, II, III, etc.
i- Romawi huruf kecil , i, ii, iii, etc.

Definition Lists: <DL>

Contoh :

<DL>
<DT> Item pertama.
<DD> Penjelasan tentang item pertama.
<DT> Item kedua.
<DD> Penjelasan tentang item kedua
</DL>

Hasil dari kode di atas adalah :

Item pertama.

Penjelasan tentang item pertama.

Item kedua.

Penjelasan tentang item kedua

Read More

Tutorial HTML: Tabel

Tabel sangat penting artinya dalam desain web. Karena dengan menggunakan tag table Anda dapat membuat halaman web “terbagi” pada beberapa kolom atau baris. Contohnya seperti pada halaman web yang sedang Anda baca ini.

Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table : <TABLE>, <TR>, dan <TD>. Yang perlu diingat adalah bahwa tab <TR> dan <TD> harus terletak di antara tag <TABLE> dan </TABLE>

<TABLE>
Terdiri dari atribut :

• align – perataan : rata kiri (left), tengah (center) atau kanan (right).
• bgcolor – warna latar belakang (background) dari tabel.
• border – ukuran lebar border tabel (dalam pixel).
• cellpadding – jarak antara isi cell dengan batas cell (dalam pixel).
• cellspacing – jarak antar cell (dalam pixel).
• width – ukuran tabel dalam pixel atau percent.

Contoh :
<TABLE align=”center” bgcolor=”#0000FF” border=”2″ cellpadding=”5″ cellspacing=”2″ width=”90%”>

<TR>
Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari atribut:

• align – perataan : rata kiri (left), tengah (center) atau kanan (right).
• bgcolor – warna latar belakang dari baris.
• valign – perataan vertikal : top, middle atau bottom.

Contoh :
<TR align=”right” bgcolor=”#0000FF” valign=top>

<TD>
Tag ini digunakan untuk membuat kolom baru pada tabel.

• align – perataan
• background – image yang digunakan sebagai latar belakang dari kolom.
• bgcolor – warna latar belakang
• colspan – lihat gambar contoh
• height – ukuran tinggi cell dalam pixels.
• nowrap – membuat supaya isi dari kolom tetap berada pada satu baris.
• rowspan – lihat gambar contoh
• valign – perataan vertikal :top, middle atau bottom.
• width – ukuran kolom dalam pixel atau percen.

Contoh :
<TD align=”right” background=”back.gif” bgcolor=”#0000FF” colspan=”3″ height=”200″ nowrap rowspan=”2″ valign=”bottom” width=”300″>

<table width=”100″ border=”1″ cellspacing=”2″ cellpadding=”2″> <tr> <td bgcolor=”#0000FF”> &nbsp;</td> <td bgcolor=”#FFFF66″>&nbsp;</td> <td rowspan=”2″ bgcolor=”#FF3366″>&nbsp;</td> </tr> <tr> <td colspan=”2″ bgcolor=”#33CC66″>&nbsp;</td> </tr> <tr> <td colspan=”3″ bgcolor=”#FFCC99″>&nbsp;</td> </tr> </table>

<table width=”100″ border=”0″ cellspacing=”0″ cellpadding=”0″> <tr> <td bgcolor=”#0000FF”>&nbsp; </td> <td bgcolor=”#FFFF66″>&nbsp;</td> <td rowspan=”2″ bgcolor=”#FF3366″>&nbsp;</td> </tr> <tr> <td colspan=”2″ bgcolor=”#33CC66″>&nbsp;</td> </tr> <tr> <td colspan=”3″ bgcolor=”#FFCC99″>&nbsp;</td> </tr> </table>

Read More

Animasi Menendang bola

Pada kesempatan kali ini saya coba mengambar animasi orang yang sedang menendang bola. Dalam proses pembuatannya pun tidaklah terlalu sulit. Berikut cara pembuatannya :

pertama buat pemain dan gawang

buat layer baru(layer 2), lalu buat lingkaran(bola) pada frame 1

setelah itu klik kanan pilih insert keyframe pada frame 5 di layer 1, seleksi salah satu kaki pemain dengaan menggunkan arrow tool,ubah posisi kaki dengan menggunakan free transform tool.

pada frame 5 layer 2, insert keyframe lalu pada frame 20 layer 2 kita insert keyframe dan pindahkan posisi bola ke frame 20

Insert frame pada layer 1 frame 20, lalu pada layer 2 pilih sembarang frame misal frame 15 klik kanan pilih create motion tween, hingga muncul tanda panah ke aarah kanan seperti gambar dibawah ini

pada layer 2 frame 11, bola kita rubah posisinya ke atas agar nampak melambung ketika ditendang. dan pada frame 21 layer 2 kita insert keyframe dan buat tulisan goal!!, pada kolom layer tukar posisi layer 1 dengan layer 2

hasil akhir dapat anda lihat disini

Read More

Membuat Jam Digital Menggunakan Flash 8

Tutorial Flash lagi nih,,, kali ini saya akan mencoba membuat Jam Digital menggunakan Flash 8. Caranya tidaklah sulit, cukup menambahkan beberapa script pada layer. Untuk lebih jelasnya, mari kita praktekan.

Buat dokumen baru dan masukan 3 buah layer. Kemudian rename ketiga layer tersebut hingga menjadi seperti ini :

Ubah dokumen properti seperti gambar ini (ini hanya optional saja, kawan bisa ubah sesuka kawan), setelah itu OK.

Lalu pilih frame 1 pada layer Background, kemudian buat backgrond (disini saya menggunakan rectangle Tool untuk membuat backgrondnya) sesuaikan ukurannya.

Tekan F6 pada frame 2 layer Background.

Selanjutnya pada frame 1 layer Jam masukan text dengan Text Tool (kosongkan saja, tidak perlu ditulis sesuatu) sesuaikan dengan ukuran background. Hingga tampak seperti ini

Untuk memasukkan  nama ke Dynamic text, klik pada dynamic text pada daerah kerja,kemudian pilih property inspector . Klik pada area kerja dan letakkan sesuai keinginan, area Dynamic text tersebut akan memunculkan jam digital. Untuk nama dari Dynamic text field instance adalah  "jam_text"

Klik frame 2 layer Jam tekan F6.

Klik frame 1 layer action lalu tekan F9, hingga muncul kolom seperti ini

Copy script dibawah ini kemudian paste-kan ke kolom tersebut.
time=new Date(); // time object
var seconds = time.getSeconds()
var minutes = time.getMinutes()
var hours = time.getHours()
if (hours<12) {
ampm = "AM";
}
else{
ampm = "PM";
}
while(hours >12){
hours = hours - 12;
}
if(hours<10)
{
hours = "0" + hours;
}
if(minutes<10)
{
minutes = "0" + minutes;
}
if(seconds<10)
{
seconds = "0" + seconds;
}
Jam_text.text = hours + " : " + minutes + " : " + seconds +" "+ ampm;

Klik frame 2 layer action, tekan F6 dan tekan F9 (untuk memunculkan action panel) masukan script ini :

gotoAndPlay(1);

dan,,, Jam Digital kita-pun selesai dibuat, untuk melihat jam kita bkerja tekan Ctrl + Enter

Read More

Belajar Layer Masking di Photoshop

Dulu waktu pertama kali kenalan dengan Photoshop, hobiku memotong foto dan menempelkannya dengan foto-foto yang lain untuk dijadikan satu. Lumayan capek juga karena harus memotong dengan Polygonal Lasso Tool di pinggiran fotonya lalu ditempelkan di foto yang lain. Ternyata ada satu cara mudah untuk melakukannya dengan jauh lebih cepat, yaitu memanfaatkan fitur Masking Layer.

Persiapkan dua atau lebih foto dengan pencahayaan yang sama. Sebaiknya latar belakang/backgroundnya juga sama agar lebih mudah melakukan masking. Dalam contoh ini, aku  mempergunakan 3 foto yang memiliki pencahayaan serta background yang sama:

Buka ketiga foto itu semua di Photoshop. Kita tentukan foto di sebelah kiri masternya, sehingga nanti dua foto lainnya akan kita tempatkan di situ.
Berikutnya, kita klik foto kedua sehingga layer yang aktif ada di foto kedua. Pilih dan tekan layer background pada foto kedua dan seret/drag ke foto pertama:

Sehingga di foto pertama akan ada dua layer, yaitu Layer 1 dan Background:

Terlihat di foto sebelah kiri, foto kedua telah menutupi foto aslinya. Dengan posisi Layer 1 aktif, tekan tombol Add Layer Mask di bagian bawah window layer:

Bila sudah, maka akan ada kotak putih di baris Layer 1 seperti ini:

Kotak putih itu menandakan Layer 1 telah siap dalam modus ‘masking‘.
Berikutnya, tekan Brush Tool (B), pilih brush yang memiliki ukuran cukup besar dengan menggeser slider brush ke kanan dan pilih yang memiliki pinggiran yang halus. Tekan tombol D pada keyboard untuk mengeset warna foreground dan background ke modus warna default/hitam dan putih. Bila foreground berwarna hitam, brush akan menghapus foto dan sebaliknya warna putih akan menampilkan foto. Kita dapat dengan mudah membalikkan warna foreground dan background ini dengan menekan icon switch color atau menekan tombol X pada keyboard.

Bila semua telah siap, silakan memulai menggosok-gosokkan brush di layer 1 hingga muncul foto pertama tadi. Lakukan dengan perlahan agar tidak menabrak foto kedua:

Bila background foto di belakang ternyata tidak lurus/rata dengan background foto di depannya (lihat lingkaran di foto di atas), kita bisa tunda sejenak brushingnya dan tekan tombol move tool/menekan tombol V pada keyboard lalu menggeser perlahan-lahan dengan menggunakan tombol panah kiri atau kanan di keyboard hingga background foto pertama menyatu dengan foto kedua:

Terlihat di foto di atas, background pun telah menyatu dengan sempurna. Kita bisa lanjutkan brushing lagi dengan menggunakan brush tool kembali hingga semua obyek foto yang hendak kita tampilkan telah terlihat semua.
Ada kalanya, brushing memerlukan penyapuan yang teliti. Dalam foto di bawah ini terlihat kaki di foto pertama berdempetan dengan kaki di  foto kedua sehingga terjadi penumpukan:

Kita bisa memperbaikinya dengan menggunakan brush/kuas yang lebih kecil ukurannya dan menyapu kuas di masing-masing layer dengan teliti. Jangan takut bila terhapus karena sesungguhnya yang hilang adalah maskingnya saja. Kita bisa menampilkannya kembali dengan menekan tombol switch color tadi dan dicoba menyapu kembali perlahan-lahan hingga hasilnya cukup sempurna:

Permasalahan di atas tentu tidak akan terjadi bila obyek foto yang hendak kita gabungkan tidak bertumpukan seperti foto di atas. Untuk permulaan, mungkin bisa dicoba dari foto yang terpisah jauh obyeknya/tidak berdekatan.
Demikian trik untuk membuat montase foto dengan mempergunakan layer masking. Kita bisa menambahkan foto berikutnya dengan urutan proses yang sama seperti di atas:

Lakukan dengan sabar dan perlahan-lahan, insyaAllah hasilnya cukup mengesankan. Hasil akhir proyek ini adalah seperti foto di bawah ini:

Read More

Apakah Keyframe itu ?

keyframe beserta frame

Keyframe merupakan suatu tempat yang digunakan untuk menaruh objek. Keyframe boleh kosong. Keyframe bisa disebut juga kepala frame karena memiliki titik, dan bila keyframe dihapus, maka frame juga ikut menghilang.

Jika kita ingin menggunakan animasi frame by frame, maka kita butuh memasukkan keyframe di setiap angka timeline.

Read More