Category: animasi

Membuat Animasi Foto Profil Bbm dari Video Menggunakan Aplikasi Android

Cara membuat video menjadi animasi untuk foto profil bbm menggunakan aplikasi android. Halo sobat freezone, setelah beberapa lama belum update blog nah kali ini ane dapat bahan untuk membuat artikel baru di blog ini. Saya cuman mau share pengalaman aja untuk membuat animasi yang dijadikan foto profil bbm yang dibuat dari video.

Aplikasi yang saya gunakan adalah Gif Me Five, aplikasi ini bisa anda unduh gratis di playstore smartphone android anda atau download disini. Setelah menginstal aplikasi ini, silahkan dijalankan sehingga tampak seperti gambar dibawah ini:

Pada gambar tampilan aplikasi Gif Me Five diatas, terdapat 3 Menu utama yaitu :

1. Make A Video yaitu menu untuk membuat video baru yang akan dijadikan animasi

2. Pick A Movie yaitu menu yang digunakan untuk membuat animasi dari video yang telah ada digaleri.

3. Open Gallery adalah untuk melihat animasi-animasi yang ada di Galeri smartphone anda.

Anda dapat menggunakan menu pertama atau kedua untuk membuat animasi, namun dalam tutorial ini saya menggunakan menu kedua karena video sudah ada di galeri. Klik menu Pick A Movie dan pilih video yang ingin dijadikan animasi.

Jika video kepanjangan anda dapat memotongnya dengan menggunakan menu cut yang terdapat pada gambar icon palu dan kunci disudut sebelah kanan, untuk memutar video 90 derajat atau 180 derajat dapat menggunakan menu disebelahnya sedangkan menu paling kiri itu digunakan untuk merubah warna video.

Jika video sudah dilakukan pemotongan, selanjutnya klik next yang berbentuk icon tangan disebelah kanan bawah. Sehingga tampak seperti gambar dibawah ini :

Selanjut klik menu setting disebelah kanan atas dan pilihan Quality sama FPSnya diubah kesetingan Low. Kenapa harus diubah kesetingan low, karena jika file hasil animasi diatas 30kb itu tidak akan berfungsi ketika dijadikan foto profil bbm. Begitu juga dengan ukuran skala (scale) ubah kesetingan terkecil hingga video berukuran 30kb atau dibawahnya seperti contoh dibawah ini :

Selanjutnya klik next untuk membuat video tersebut menjadi animasi Gift. Cek ukuran file animasi tersebut dengan cara masuk ke galeri buka folder GifMeFive klik animasi yang telah dibuat, pilih menu – details. Perhatikan file size dari animasi tersebut, jika diatas 30 ulangi langkah diatas dengan merubah scale lebih rendah dari sebelumnya hingga hasil ukuran animasi mencapai 30kb.

Semoga bermanfaat.

July 20, 2021
Membuat Animasi Photo Display BBM Menggunakan Adobe Flash

Membuat animasi display photo profil blackberry messenger. Sebagai pengguna blackberry ane sering dapat teman ane yang biasa ganti photo display bbmnya berbentuk animasi. Apa lagi kalau ada acara hari-hari besar seperti tahun baru dan hari raya umat beragama, hampir semua ganti photo displaynya. Ga mau kalah juga, saya sebagai pengguna adobe flash membuat sebuah animasi sederhana untuk photo profil di bbm heheh mau eksis juga nih :D.

Dalam pembuatan animasi untuk display bbm ukuran panjang dan lebar animasi harus sama dan ukurannya tidak boleh lebih dari 30an kb. Pertama kali buat animasi untuk display gagal karena ukuran panjang dan lebar tidak sama sisi dan ukurannya yang melebihi ketentuan photo animasi bbm.

Oke dari pada panjang lebar, yuk langsung kita praktekan cara membuat animasi display bbm dengan menggunakan adobe flash. Caranya sama dengan cara membuat animasi-animasi yang saya bahas sebelumnya. Buka lembar kerja baru dengan ukuran 300 x 300 px.

Ketikkan tulisan “YANG JOMBLO” pada lembar kerja. Perhatikan kata “Yang Jomblo” pada kata ‘yang’ terdapat 4 karakter huruf dan ‘jomblo’ 6 karakter. Jadi total semua karakter ada 10 ditambah satu karakter pemisah yaitu spasi sehingga totalnya menjadi 11 karakter. Loh kok pada hitung karakter huruf sih, bukannya buat animasi heheh. Ini berfungsi pada saat kita membuat animasi nantinya yang penting step by stepnya di ikuti.

Nah karena tulisan tersebut terdapat 11 karakter, klik kanan pada frame 2 sampai dengan 11 dan insert keyframe. Jangan langsung diblok dari frame 2 sampai frame 11, tapi harus tambahkan keyframe satu-satu yaitu dari frame 2, 3, 4 sampai 11. Kalau ga mau repot-repot klik kanan, cukup dengan menekan F6 pada keyboar untuk menambahkan keyframe.

Sekarang klik pada frame 10 dan hapus huruf O pada kata jomblo. Klik pada frame 9 dan hapus huruf LO, klik pada frame 8 dan hapus huruf BLO. lakukan langkah-langkah tersebut hingga frame 1, sehingga pada frame 1 hanya muncul huruf Y saja. Untuk lihat hasilnya tekan CTRL + Enter.

Baca juga : Cara membuat video menjadi animasi photo profil bbm di Android

Selanjutnya kembali pada frame 11 dan tekan F6 sehingga keyframe baru muncul pada frame 12. Pada frame 12 buat tulisan PING!!! Pada lembar kerja dan ubah warnanya menjadi warna merah. Kemudian miringkan tulisan tersebut dengan menggunakan Free Transform Tool (Q) sehingga seperti contoh dibawah ini :

Selanjutnya tekan F6 untuk insert keyframe hingga frame 15 dan klik pada frame 14 lalu ubah warna tulisang PING menjadi warna biru atau sesuai dengan warna yang sobat suka. Begitu juga pada frame 15.

Atur kecepatan animasi dengan klik pada lembar kerja dan ubah fps yang ada pada panel properties di sebelah kanan lembar kerja. Disini saya ubah nilai fps yang semula 24 menjadi 5. Semakin kecil nilai fps semakin lambat gerakan animasi.

Selamat mencoba

July 6, 2021
Membuat Animasi Gerak dengan Menggunakan Adobe Flash

Membuat animasi bergerak dengan menggunakan adobe flash. Pada kesempatan kali ini saya akan membuat tutorial dasar animasi dengan menggunakan adobe flash. Animasi yang dibuat adalah animasi bergerak. Pengertian dari animasi bergerak yaitu animasi yang menggerakkan objek dari satu posisi ke posisi lainnya.

Oke kita langsung saja membuat animasi gerak sederhana. Jalankan adobe flash dan buat lembar kerja baru klik file – new – ActionScript3 dan klik Ok. Kemudian buat sebuah objek baru, terserah sobat mau buat objek bundar, kotak, oval sesuai dengan selara. Namun disini saya membuat objek bundar dan tempatkan di sudut kiri atas lembar kerja.

Kemudian klik kanan pada frame 20 dan pilih insert keyframe untuk membatasi gerakan animasi objek.

Baca juga : Cara membuat animasi foto profil bbm dari video

Ketika selesai menambahkan keyframe layer 1 akan tampak seperti gambar dibawah ini :

Dari langkah sebelumnya kita sudah membatasi gerak animasi hingga frame 20. Nah langkah terakhir adalah membuat gerakan pada objek pada oval. Setelah insert keyframe, geser objek oval menjauh dari posisi semula. Contoh geser objek oval menuju sudut kanan bawah lembar kerja.

Untuk melihat hasil animasi yang telah kita buat tekan CTRL + Enter

Semoga bermanfaat dan selamat mencoba.

July 6, 2021
Membuat animasi alpha dengan menggunakan adobe flash

Membuat animasi alpha dengan menggunakan adobe flash. Pada tutorial kali ini kita akan membuat sebuah animasi sederhana dengan menggunakan adobe flash. Animasi yang akan kita buat adalah animasi alpha. Animasi alpha merupakan animasi yang mengatur transparansi warna suatu objek. Sehingga dengan menggunakan style alpha ini, kita bisa membuat sebuah objek menghilang ataupun muncul hanya dengan mengatur transparansi warna dari objek tersebut.

Langkah-langkah membuat animasi ini sangat mudah. Kita akan membuat sebuah gambar menjadi animasi dengan effect muncul dengan menggunakan style alpha.

1. Buat lembar kerja baru dan pilih action script 3, masukkan sebuah gambar ataupun foto dari computer anda dengan cara klik file – import – import to stage, atau dapat dengan menekan Ctrl + R

2. Jika gambar sudah ada pada lembar kerja, klik kanan pada frame 1 dan pilih Creat Classic Tween

3. klik kanan pada frame 30 dan pilih insert keyframe untuk membatasi gerak animasi

4. selanjutnya klik kembali pada frame 1 dan klik objek gambar ataupun foto yang telah di import tadi. Perhatikan pada panel Properties yang berada disebelah kanan lembar kerja. Pada Group Colour Effect ubah stylenya menjadi Alpha dan buah nilainya menjadi 0% sehinga objek gambar menjadi tranparan dan tidak Nampak pada lembar kerja

5. sekarang kita akan menampilkan animasi pada frame 30. Klik frame 30 dan klik objek gambar atau foto. Pada panel properties pada group Color Effect ubah stylenya menjadi alpha dan nilainya menjadi 100%. Sehingga objek kembali Nampak pada lembar kerja.

Nah sampai tahap ini kita sudah berhasil membuat animasi dengan style alpha. Untuk melihat hasilnya klik CTRL + ENTER.

Selamat mencoba.

July 5, 2021
Membuat Animasi Masking Menggunakan Adobe Flash

Cara membuat animasi masking menggunakan adobe flash. Kali ini kita akan membuat animasi masking dengan menggunakan adobe flash. Animasi masking adalah animasi yang menampilkan objek yang tertutup dan menyembunyikan objek yang terbuka. untuk lebih jelasnya ikuti tutorialnya dibawah ini

Langkah-langkah membuat animasi masking dengan menggunakan adobe flash :

1. Buat lembar kerja baru dengan menekan CTRL + N dan tentukan ukuran lembar kerja sesuai dengan yang diinginkan. Sebagai contoh disni saya menggunakan ukuran 250px x 250px.

2.Ubah Nama Layer Menjadi Tls Merah dan Buat sebuah tulisan, disini terserah sobat mau tulis kata-kata apa. Kata-kata mutiara, kata-kata galau ataupun kata-kata percintaan 😀

3. Setelah selesai membuat sebuah tulisan pada layer Tls Merah, klik kanan layer tersebut dan pilih duplicat layer, sehingga muncul layer hasil duplicat dari layer Tls Merah. Ubah nama layer hasil duplicat menjadi Tls Hijau dan ganti background tulisan yang awalnya merah menjadi hijau pada layer Tls Hijau.

Jadi disini sudah terdapat dua layer dengan tulisan yang sama tapi berbeda warnah, layer Tls Hijau Tulisan dengan warna hijau dan layer Tls Merah dengan tulisan yang berwarna merah.

Kemudian kita akan memperpanjang frame dari layer Tls Hijau dan Tls Merah dengan cara klik layer Tls Hijau dan klik kanan pada frame 30 dan pilih insert keyframe. Lakukan hal yang sama pada layer Tls Merah, sehingga tampak seperti contoh gambar diatas.

Langkah selanjutnya yaitu membuat sebuah layer baru bernama kotak, klik pada frame 1 dan buat sebuah kotak tepat disamping tulisan dengan menggunakan Rectangle Tools (no 1 pada gambar) sehingga hasilnya seperti pada no 2.

Klik kanan frame 1 layer kotak (no 3) dan pilih Create Classic Tween

Klik kanan frame 30 kemudian pilih insert keyframe untuk membatasi gerak objek sesuai dengan layer yang lain.

Selanjutnya perpanjang objek kotak dengan klik free transform tool (no 5)sampai menutupi dan melewati objek tulisan. Gunakan tombol ALT + Klik agar perpanjangan objek hanya pada satu sisi saja seperti contoh dibawah ini. Ingat pada saat melakukan perubaha objek kotak posisi frame yang aktif berada pada frame 30 (no1)

Langkah terakhir yaitu tinggal menambahkan effek mask pada layer Tls Hijau dengan cara klik kanan pada layer Tls Hijau dan klik MASK.

Untuk melihat hasil animasi masking, gunakan CTRL + Enter

Selamat mencoba

Download file SWF nya DISINI

July 5, 2021
Cara Membuat Animasi Timer menggunakan Adobe Flash

Tutorial cara membuat animasi timer atau animasi pergantian angka dengan menggunakan adobe flash cs6. Kali ini saya akan membahas tentang bagaimana cara membuat animasi timer. Animasi ini berbentuk perubahan angka, dapat berupa pertambahan angka atau pengurangan angka. Contoh animasi ini seperti yang biasa kita lihat pada saat mulai pemutaran sebuah film di bioskop, pada saat memulai sebuah pertandingan balap dan lain sebagainya.

Langkah-langkah membuat animasi timer

Buka adobe flash dan buat lembar kerja baru dengan menggunakan action script 3. Ubah dahulu nama layer menjadi Angka. Pada layer Angka buatlah angka 5 dengan menggunakan Text Tool (T) atau dengan menekan tombol T pada keyboard. Kemudian klik kanan pada frame 5 dan pilih insert keyframe, lakukan hal yang sama pada frame 10, 15 dan 20 hingga Nampak seperti gambar dibawah ini :

klik pada frame 5 dan ubah angka 5 yang ada pada lembar kerja menjadi angka 4

Klik pada frame 10 dan ubah angka 4 menjadi angka 3 pada lembar kerja

Klik pada frame 15 dan ubah angka 3 menjadi angka 2 dan terakhir klik pada frame 20 kemudian ubah angka 2 menjadi angka 1 pada lembar kerja

Untuk menjalankan animasi tekan CTRL + ENTER pada keyboard

Selanjutnya kita akan membuat sebuah objek lingkaran yang berkurang ketika animasi timer tersebut di jalankan. Perhatikan gambar dibawah, pertama-tama buatlah sebuah layer baru dengan mengklik new layer (no 1 pada gambar), ubah nama layer menjadi Lingkaran dan tempatkan dibawah layer Angka dengan cara klik tahan dan geser kebawah (no 2 pada gambar).

Pada layer lingkaran klik frame 1 dan buatlah sebuah objek lingkaran dengan menggunakan Oval Primitive Tool (T) atau tekan tombol T dan tempatkan sejajar dengan angka 5. Kemudian klik menu modify – transform – rotate 90 ccw (CTRL + SHIFT + 7) agar node lingkaran yang sebelumnya berada disamping kanan, pindah kebagian atasi lingkaran.

Selanjutnya Lakukan hal yang sama pada layer Lingkaran yaitu menambahkan keyframe pada frame 5, 10, 15 dan 20 dengan mengikuti panduan yang sama pada layer Angka yang telah dibahas diatas, hingga tampilannya seperti no 2 pada gambar dibawah.

Contoh gambar dibawah :

Langkah selanjutnya masih pada layer lingkaran, klik frame 5 dan klik objek lingkaran sehingga muncul menu oval option pada property yang berada disebelah kanan lembar kerja, ubah nilai dari start angel menjadi 90 sehingga seperti gambar dibawah ini

Dengan mengikuti panduan diatas pada frame pada frame 10 nilai start angel ubah menjadi 180, frame 15 nilai start angel 270 dan pada frame 20 ubah nilai start angel menjadi 359. Untuk menjalankan animasi tekan CTRL + ENTER. Untuk mengubah kecepatan animasi ubah fps lebih rendah dari nilai standart 24

Selamat mencoba

July 5, 2021