Tampilkan postingan dengan label animasi. Tampilkan semua postingan

Membuat animasi Shape Tween dengan Adobe Flash

Selamat Siang Guys, Kali ini Ane mau share tentang cara membuat animasi shape tween pada adobe flash sebelumnya kita sudah membuat animasi text masking. Animasi Shape Tween adalah animasi berubah bentuk misalnya dari kotak jadi bulat, atau dari tulisan menjadi bentuk partikel kecil-kecil. contohnya seperti di bawah

kemudian buatlah text yang akan dijadikan animasi berubah bentuk

selanjutnya text tersebut dipisahkan dengan cara tekan tombol ctrl + B

kemudian agar text nya bisa berubah bentuk harus di convert menjadi break-apart, klik kanan -> pilih break-apart

kemudian insert keyframe

pada frame terakhir hapus text tadi diganti dengan bentuk yang diinginkan

kemudian pada bagian tengah timeline klik kanan -> pilih shape tween

jadi seperti berikut, kemudian jalankan dengan ctrl+enter


ok, terimakasih telah mengikuti tutorial ini, jika artikel ini bermanfaat silakan di share, jika ada yang kurang jelas silakan ditanyakan di kolom komentar

Membuat Animasi Teks Masking dengan Adobe Flash

Selamat Malam, Kali ini Saya mau sharing pengalaman Saya membuat animasi masking, Waktu itu saya mengikuti LSP Desain Multimedia dan Saya mendapatkan soal membuat animasi masking dan animasi Shape tween, tutorial ini cocok bagi pemula yang baru belajar adobe flash ataupun bagi anda yang sedang ujian seperti Saya.

Tampilan Animasi Teks Masking


Langkah pertama buka Adobe Flash, kemudian pilih new -> actionscript 2.0 >> untuk ukuranya width 550 x height 400 pixel dan framerate 24 fps


jika anda baru menginstall adobe flash dan pertama kali membukanya atur agar tampilanya seperti berikut, caranya klik pada menubar windows -> workspace -> classic

Kemudian Buat Teks yang ingin di animasikan


Selanjutnya duplikat layer dan ganti warna text di layer yang di duplikat, lalu insert keyframe bebas, disini saya insert keyframe pada frame ke 60



kemudian buat lagi layer baru, pindahkan layer baru ke tengah diantara layer1 dan layer duplikat, kemudian di layer baru itu buat objek kotak atau lingkaran dan beri warna


kemudian gerakan dengan cara insert keyframe di frame ke 60 kemudian di frame ke 60 pada layer object lingkaran di saya pada layer2 pindahkan objek lingkaran ke ujung kanan atau ujung text, seperti pada gambar di bawah


kemudian klik kanan antara frame ke satu sampai 60 lalu pilih create classic tween

lalu pada layer paling atas klik kanan pilih mask

Hasil akhirnya seperti di bawah, untuk merubah background pilih warna di stage ada di bagian properties sebelah kanan


Untuk menjalankanya tekan tombol ctrl + enter, untuk publish ke swf pilih file -> publish, untuk merubah ke format gif pilih export -> export movie -> pilih format Animated Gif



Terimakasih telah mengikuti tutorial ini, jika ada yang ingin ditanyakan silakan tulis pada kolom komentar dibawah, jika artikel ini bermanfaat silakan share ke teman anda

membuat animasi pure css


jika anda ingin menambahkan efek animasi di website anda bisa menggunakan framework animate css.
animate css ini sangat banyak efek yang bisa anda pilih. file nya pun relativ kecil hanya sekitar 20kb saja. untuk melihat daftar animasi
yang bisa digunakan di animate css anda bisa membuka link animatecss.io. dan animate css ini pure css semua animasinya dibuat hanya
menggunakan css saja tapi animasinya keren- keren dan sangat banyak

cara pemakainaya juga sangat simple tinggal tambahkan class "animated nama-efek" pada tag html yang mau anda animasikan. anda bisa
memasanganya pada div, pada heading, pada paragraf dsb. contoh <div class="animated animated-slide-top"></div>