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.

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

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.

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.

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.

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 :D

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

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

Membuat animasi berputar dengan menggunakan adobe flash

Cara membuat animasi berputar menggunakan adobe flash cs6. Kali ini kita akan sama-sama belajar tentang bagaimana cara membuat animasi berputar pada adobe flash player. Animasi berputar adalah animasi dimana objek berputar pada titik poros yang telah ditentukan. Pada tutorial ini animasi yang saya buat sangatlah sederhana dan mungkin hanya sebagai panduan kita untuk belajar membuat animasi.

Untuk membuat animasi berputar pada adobe flash, ikuti langkah-langkah berikut :

- Buka lembar kerja baru pada adobe flash dengan pilihan action script 3

- Buat sebuah objek, sebagai contoh disini saya membuat tulisan freezon

- Klik kanan pada frame 1 dan pilih create motion twen maka secara otomatis frame akan terisi hingga frame 24

Klik kanan pada frame 25 dan pilih insert key -> rotation

Pada panel properties atur beberapa parameter rotation atur nilai ease anda bisa memasukkan angka 100 atau -100 untuk mengatur kecepatan objek lebih pelan diawal atau diakhir gerakan.

Pada pilihan rotation atur rotationnya 2 time(s)  untuk menentukan jumlah putaran  dan isi 20 derajat untuk kemiringan derajat putaran.

Setelah mengikuti semua langkah-langkah diatas, kita dapat melihat hasilnya dengan menjalankan animasi tersebut, tekan CTRL + Enter untuk menjalankan animasi.

Untuk mencari animasi berputar yang anda inginkan, anda bisa merubah nilai-nilai yang ada pada panel properties. Jika merasa kecepatan putaran terlalu cepat, maka coba ubah nilai pada fps lebih rendah dari nilai standar. 

Klik pada lembar kerja kemudian ubah nilai fps di panel properties. Nilai standarnya adalah 24 ubah menjadi 10, tekan CTRL + Enter untuk melihat hasilnya.

untuk menyimpan hasil animasi dalam bentuk gif dan dapat berjalan di browser, klik file - publish settings pada pilihan other format pilih gif image dan pilihan playback ganti menjadi animated dan klik publish. save animasi dengan klik file - export - export movie dan simpan dalam bentuk format gif

selamat mencoba :)