Trik Hover Menggunakan CSS

Hallo… sahabat, bagaimana kabarnya hari ini? Pasti baik dong? Kalo ada yang kurang baik atau lagi tidak sehat, semoga cepat cehat ya.. aamiin :) Baiklah, untuk tulisan kali ini saya akan memberikan tutorial tentang trik hover menggunakan CSS3. Materi ini sangat sederhana dan mudah, jadi langsung saja simak langkah-langkahnya sebagai berikut: 1. Siapkan dahulu sebuah gambar, yang akan kita gunakan untuk disimpan di dalam HTML. Contohnya saya menggunakan gambar seperti di bawah ini: 

2. Kemudian, tulislah kode HTML dan simpan dengan nama trik.html

3. Lalu, berikan kode CSS dan simpan dengan nama trik.css

Nah… coba Sahabat jalankan file trik.html nya di browser kesayangan Sahabat. Sangat mudah bukan? :) Ok, sampai jumpa lagi pada tulisan saya berikutnya. Jangan bosan-bosan ya. :)

Read More

Apa itu Tweens Animation Frame?

Hallo.. sahabat, semoga sahabat semua dalam keadaan sehat semua ya… aamiin… Untuk tulisan saya kali ini adalah penjelasan mengenai Tweens Animation Frame. Pada tulisan sebelumnya saya telah berjanji akan menjelaskannya secara rinci, agar teman-teman semua mengerti dan tidak kebingungan lagi, apa lagi sampe galau gara-gara Tweens Animation Frame :D. Kalo bahasa intelektualnya nih, Tweens Animation Frame adalah fitur untuk membuat frame di antara dua frame kunci. Bagaimana? Mengerti kan? Pasti bingung… :p Baiklah, akan saya jelaskan dengan bahasa yang lebih manusiawi. Saya contohkan gambarannya seperti ini, coba anda perhatikan gambar dibawah ini. 

Kita bisa analisis gambar di atas sebagai berikut: Saya ibaratkan KUNCI 1 sebagai posisi awal sebuah bola basket berada, yaitu di sebelah kanan. KUNCI 2 adalah posisi saat bola basket berpindah tempat ke sebelah kiri. Nah jarak perpindahan antara KUNCI 1 dan KUNCI 2 ini lah yang disebut Tweens Animation Frame. Semakin banyak kita menambahkan frame pada dialog tween, maka semakin lambat pergerakan bola saat berpindah tempat, begitu pula sebaliknya. Seperti halnya saat anda berjalan dan berlari, Ketika Anda berjalan berarti anda sedang memberikan Tweens Animation Frame dengan penambahan frame yang banyak. Sedangkan saat anda berlari, anda memberikan Tweens Animation Frame dengan penambahan frame yang sedikit. Mudah dipahami bukan? Semoga tutorial ini bisa bermanfaat untuk teman-teman semua, sampai jumpa :).

Read More

ANIMASI BOLA BASKET DENGAN PHOTOSHOP CS6

Hallo sahabat, saya akan mencoba membuat tutorial animasi yang sangat sederhana menggunakan Photoshop CS6. Mungkin diantara teman-teman sudah banyak yang tau, tapi saya mau tetap lanjut membuat tutorial sederhana ini.. hihihi Yukk kita mulai saja ya, nanti ngobrolnya dilanjut di tulisan saya yang berikutnya :D Nah.. yang harus Anda siapkan dalam membuat tutorial ini adalah dua buah gambar, yang berfungsi sebagai background dan objek animasinya. Pada tutorial ini, saya menggunakan gambar bola basket sebagai objek yang akan diberikan anmasi. 

Jika sudah siap, silahkan perhatikan langkah-langkahnya sebagai berikut : 1. Buka kedua buah gambar yang telah disediakan di photoshop 2. Drag objek bola ke dalam lembar kerja yang akan dijadikan sebuah background 

3. Buka menu window ->Timeline

4. Maka akan muncul dialog timeline dibagian bawah lembar kerja seperti dibawah ini.

5. Bagaimana? Sudah pusing belum? :D Biar engga tambah pusing, kita lanjut lagi yaaa… :p Tahapan berikutnya adalah meletakkan objek bola basket pada posisi awal.

6. Kemudian pilih Duplicated Selected Frame

7. Atur peletakkan posisi kedua objek bola basket

Saya menggunakan rules untuk menjadi patokan peletakan objek bola basket. 8. Lalu block kedua frame dan pilih Tweens Animation Frame, atur jumlah frame yang akan ditambahkan.

Hasilnya akan seperti ini

9. Duplicat kembali frame terakhir dengan Duplicated Selected Frame pada frame yang ke 22, kemudian atur posisi bola basket. Block frame 22 dan frame 23, lalu berikan Tweens Animation Frame dengan menambahkan 20 frame lagi pada kotak dialog tween. 

10. Lakukan hal yang sama seperti tahap no 9 dengan meletakkan posisi bola basket seperti dibawah ini

Dan lakukan lagi tahap no 9 dengan posisi akhir bola basket di letakkan di bawah background seperti ini.
 

11. Tahap akhir adalah dengan menjalankan animasi. Silahkan pilih tambol play dan lihat hasilnya.

12. Untuk menyimpannya, silahkan pilih menu FILE -> SAVE FOR WEB, pastikan Anda menyimpannya dalam bentuk .gif Yeyy… bagaimana? Mudah bukan? Semoga tutorial ini bisa bermanfaat buat teman-teman, silahkan modifikasi lagi posisi peletakkan bola dan pengaturan frame tweennya. :) Untuk penjelasan mengenai Tweens Animation Frame, akan saya jelaskan lebih rinci pada tulisan saya selanjutnya. Sampai jumpa di tulisan saya berikutnya.

 

Read More

HijUp Tutorial Competition

Hallo teman-teman, bantu vote aku ya... dengan like video hijabaku.. terimakasih :)

Read More

Scarf Tutorial Vol 15

Read More