Cara Membuat Banner Teks Animasi Berlogo dengan Easy GIF Animator

Pada halaman ini saya akan menjelaskan bagaimana cara membuat banner teks berlogo seperti gambar banner disamping.

1.     Sebelum membuka Easy GIF Animator, persiapkan file gambar pada netbook/computer anda dengan ukuran sama dengan ukuran banner yang akan anda buat.

Gambar JPG/PNG untuk background Banner

Untuk membuat gambar dan mengatur tata letak logo seperti contoh gambar diatas, anda bisa menggunakan applikasi Coreldraw atau applikasi lain yang biasa anda gunakan untuk mengedit foto.

2.     Setelah gambar selesai anda buat, selanjutnya buka Easy GIF Animator.

Selanjutnya klik Create animated banner.

3.     Pada halaman berikutnya, klik Specify custom size.

Aturlah ukuran lebar dan tinggi media sesuai dengan ukuran file gambar yang telah anda persiapkan pada netbook/computer anda sebelumnya. (Langkah no.1)

4.     Pada bagian Banner background, klik Picture or Texture kemudian klik Browse

Pilih gambar yang telah anda persiapkan, kemudian klik Open

5.     Pada halaman seperti gambar dibawah, Tulislah Teks 1, Teks 2, Teks 3. Selanjutnya atur ukuran fonts, warna, dan tata letak teks.

Penggunaan spasi pada bagian ini sangat penting agar tulisan yang anda buat tidak menimpa gambar logo.

6.     Setelah semua pengaturan selesai, selanjutnya klik Finish.

Pada halaman selanjutnya, klik menu File —> Save. Kemudian simpan file banner anda dengan type Image GIF(*.gif)

Selesai.

 

Cara Membuat Jam Analog Animasi Dengan Macromedia Flash

Pada posting terdahulu, saya sudah menerbitkan artikel dengan judul Cara Membuat Jam Digital dan Memasangnya  Pada Sidebar- Blog,  dan pembahasan tutorial pada artikel tersebut saya menyarankan anda untuk menggunakan salah satu situs layanan online dalam membuat jam. Hasilnya, jam animasi flash yang kita dapat masih terdapat tulisan nama website penyedia layanan online tersebut.

Kalau jam animasi tersebut kita pasang pada sidebar blog, tulisan tersebut pastinya akan ikut kelihatan, dan untuk menyembunyikannya kita harus mengutak-atik kode html agar tidak ikut kelihatan pada sidebar blog kita, sungguh menjengkelkan sekali

Setelah berkali-kali saya nanya kepada mbah google tentang cara membuat jam animasi flash, jawabannya sangat beraneka ragam, akhirnya rasa penasaran saya terjawab sudah, anda bisa lihat hasilnya pada jam flash diatas.

Pada artikel saya kali ini, saya akan mencoba memodif sedikit tutorial-tutorial terdahulu, agar teman-teman bloggers yang kebetulan masih belum tahu cara membuatnya, dapat ikut berkreasi

”Biarlah anjing menggonggong yang penting khafilah tetap berlalu”
Biarkan para bloggers senior mencibir dengan tutorial ini, yang penting artikel ini juga dapat bermanfaat untuk teman-teman sesama junior

Untuk bisa membuat jam animasi flash tersebut, modal utama kita tentunya kita harus menginstall sebuah software berbasis flash pada netbook/computer kita. Dan disini saya menyarankan anda untuk menggunakan Macromedia Flash Propessional 8. Ukuran software ini, tidak lebih besar dari software Coreldraw  hanya sekitar 107MB.

Adapun langkah-langkah dalam membuat jam animasi flash adalah sebagai berikut :

1.     Buka applikasi Macromedia anda, kemudian klik Flash Document pada bagian Create New.

Gambar.1

2.     Setelah muncul halaman baru, selanjutnya tekan Ctrl+F3 pada keyboard netbook/computer anda, sehingga muncul halaman seperti gambar dibawah.

Gambar.2

Pada halaman Document Properties seperti gambar no.2 diatas, silahkan isi form yang terdapat disana, dan ganti ukuran default media dengan ukuran jam yang ingin anda buat (contoh : 200 x 200 px), selanjutnya klik OK.

Tekan Ctrl+F3 lagi untuk kembali kehalaman semula.

Pada bagian ini, anda juga bisa menggunakan ukuran gambar/foto yang terdapat pada netbook/computer anda. Jadi, sebelum membuka Macromedia Flash, silahkan edit  terlebih dahulu file gambar/foto yang tersimpan pada netbook/computer anda, contohnya seperti file gambar logo WP yang saya buat dibawah. Anda juga bisa menggunakan foto anda sendiri sebagai background jam animasi flash.

3.     Setelah gambar/foto anda sudah siap, langkah berikutnya adalah, klik menu File–>Import–>Import to Stage

Gambar.3

4.     Setelah gambar/foto yang anda import ke stage sudah muncul, selanjutnya klik menu Text Tool atau tombol T pada keyboard anda.

Gambar.4

Selanjutnya buatlah teks area pada gambar/foto dan tulis angka 1 sampai 12 secara terpisah. (Perhatikan gambar no.4 diatas)

5.     Langkah selanjutnya, klik Ctrl+F3 pada keyboard untuk mengatur ukuran dan warna angka pada Text Properties.

Gambar.5

Setelah selesai, klik Ctrl+F3 untuk menyembunyikan halaman text properties.

Selanjutnya, geser angka 1 sampai 12 tersebut seperti pada posisi angka jam pada umumnya, sehingga tampak seperti pada gambar no.6 dibawah.(Klik Selection Tool untuk menggeser)

6.     Langkah berikutnya, klik Line Tool pada menu, atau tombol N pada keyboard anda, kemudian buatlah 3 buah garis untuk penunjuk arah jam (jam, menit, detik) seperti pada gambar dibawah.

Gambar.6

Langkah berikutnya, klik Selection Tool atau tekan tombol V pada keyboard anda. Selanjutnya, klik garis pendek (jam) yang telah anda buat, kemudian tekan F8 pada keyboard anda.

Gambar.7

Pada halaman yang muncul seperti gambar diatas, pada kolom Name, ganti teks yang ada dengan jam_mc, pilih Movie klip untuk Type, dan pastikan titik Registration berada pada baris tengah bawah. Selanjutnya klik OK.

7.     Langkah berikutnya, tekan Ctrl+F3 untuk menampilkan halaman property.

Gambar.8

Pada gambar diatas, klik kolom <Instace Name> dan ganti dengan jam_mc.

8.     Selanjutnya klik garis ke-2 (menit) kemudian tekan F8, ganti Name  dengan menit_mc. Selanjutnya tekan Ctrl+F3 pada keyboard, ganti <Instance Name> dengan menit_mc.

9.     Langkah berikutnya, klik garis ke-3 (detik) kemudian tekan F8, ganti Name dengan detik_mc. Selanjutnya tekan Ctrl+F3, ganti <Instance Name> dengan detik_mc.

10.     Langkah selanjutnya, geser ke-3 garis tersebut satu persatu, dan letakkan pada gambar/media (ditumpuk) dengan posisi garis pendek (jam) terletak paling bawah, kemudian garis menit, dan yang terakhir garis panjang (detik).

Gambar.9

11.     Selanjutnya klik dibawah angka 1 pada halaman frame, kemudian tekan F9.

Pada halaman Action yang muncul, copy kode dibawah kemudian paste pada halaman tersebut.

//perintah yang dijalankan ketika frame dimainkan

onEnterFrame = function () {

                //membuat variable waktu sebagai date object

                waktu = new Date();

                //membuat variable jam dengan nilai sama dengan jam pada komputer

                jam = waktu.getHours();

                //membuat variable menit dengan nilai sama dengan menit pada komputer

                menit = waktu.getMinutes();

                //membuat variable detik dengan nilai sama dengan detik pada komputer

                detik = waktu.getSeconds();

                //digunakan jika komputer menggunakan sistem 12 jam

                //jika nilai variable jam lebih dari 12 maka akan dikurangi 12

                if (jam>12) {

                                jam -= 12;

                }

                //movie clip jam_mc akan berotasi sesuai nilai variable jam dikali 30 yang ditambah nilai variable menit di bagi 2

                jam_mc._rotation = jam*30+(menit/2);

                //movie clip jam_mc akan berotasi sesuai nilai variable menit dikali 6

                menit_mc._rotation = menit*6;

                //movie clip detik_mc akan berotasi sesuai nilai variable detik dikali 6

                detik_mc._rotation = detik*6;

};

Gambar.10

Selanjutnya tekan Ctrl+ENTER untuk melihat hasilnya.

12.     Simpan jam animasi anda dengan mengklik File–>Export–>Export Movie.

Pada halaman berikutnya, pilih type Flash Movie(*.swf) kemudian klik Save, dan pada halaman terakhir klik OK.

SELESAI

 

Cara Membuat Gambar Animasi Cincin Berputar atau Gambar Loading

 

Judul diatas salah kali ya?? Hehehe.. Habis saya bingung banget, hampir setengah jam saya berpikir untuk membuat judul yang tepat untuk artikel yang ini. Dibilang cincin nggak juga, dibilang gambar loading juga bukan. Sempat juga sih pingin ngasih judul Cara Membuat Gambar Lingkaran Terputus-putus Berputar, tapi kayaknya ribet banget Bisa jadi mbah dugel jadi ikutan bingung ngedeteksinya

Saya harapkan teman-teman nggak jadi ikutin pusing mikirin judulnya, yang penting tutorialnya mudah dipahami. Kita langsung saja ya…

1.     Buka aplikasi Macromedia Flash anda, pada halaman Created New klik Flash Document.

2.     Setelah halaman utama muncul, selanjutnya tekan Ctrl+F3 pada keyboard anda.

Pada halaman Properties klik kolom Size default media, dan pada halaman Document Properties isilah form yang tersedia dengan ukuran gambar yang akan anda buat. (Contoh 200×200 px) selanjutnya klik OK. Tekan Ctrl+F3 untuk kembali kehalaman utama.

Untuk gambar panduan, silahkan Klik Kanan–>Open in New Tab Disini

3.     Langkah selanjutnya, klik Oval Tool (O) kemudian buatlah sebuah lingkaran diatas media.

Untuk menghasilkan lingkaran sempurna caranya klik tahan tombol SHIFT sambil menggeser muse.

Gambar.1

4.     Selanjutnya klik Rectangle Tool (R) kemudian buatlah 4 buah kotak panjang diluar media seperti gambar dibawah.

Gambar.2

Gantilah warna keempat garis kotak panjang tersebut dengan mengklik Fill Tool. Ganti dengan warna putih.

5.     Selanjutnya pindahkan keempat garis kotak panjang tersebut keatas lingkaran yang telah dibuat sebelumnya seperti pada gambar dibawah.

Gambar.3

Untuk merubah arah/posisi garis tersebut, klik Free Transform Tool (Q)

6.     Langkah berikutnya, tekan tombol A kemudian tombol V pada keyboard, kemudian klik pada bagian tengah garis kotak, selanjutnya tekan tombol DELETE pada keyboard sehingga bentuk bulatan berubah seperti gambar no.4 dibawah.

7.     Selanjutnya klik Oval Tool (O) kemudian buatlah sebuah lingkaran diluar media, seperti pada gambar dibawah.

Gambar.4

8.     Selanjutnya, seleksi lingkaran yang baru dibuat dengan mengklik tombol V pada keyboard, kemudian pindahkan lingkaran tersebut keatas media.

Gambar.5

Selanjutnya klik tombol A kemudian tombol V pada keyboard, selanjutnya klik pada lingkaran yang baru dipindah kemudian tekan tombol DELETE pada keyboard.

9.     Langkah berikutnya, klik pada salah satu kotak lingkaran kemudian klik Fill Tool untuk mengganti warna kotak lingkaran.

Gambar.6

Lakukan hal yang sama pada setiap kotak lingkaran, ganti warna sesuai dengan keinginan anda.

10.     Setelah langkah diatas selesai anda lakukan, selanjutnya klik dibawah angka frame 30 kemudian tekan F6 pada keyboard anda.

Gambar.7

Selanjutnya klik kanan dibawah angka frame 15 kemudian pilih Create Motion Tween.

11.     Langkah selanjutnya, tekan Ctrl+F3. Pada halaman Properties pilih CW pada Rotate.

Gambar.8

Klik Ctrl+ENTER untuk melihat hasilnya.

12.     Untuk menyimpan gambar animasi tersebut, silahkan klik File–>Export–>Export Movie

Simpan dengan type Animated GIF(*.gif) atau Flash Movie(*.swf).

SELESAI

Cara Membuat Gambar Animasi dengan Berbagai Macam Gerak

Setelah sebelumnya kita mencoba membuat gambar kipas angin atau baling-baling animasi dan gambar animasi lingkaran berputar  yang menyerupai gambar loading, maka kali ini saya akan mencoba menjelaskan cara membuat gambar animasi dengan pergerakan gambar menuju kedalam dan keluar media seperti pada contoh gambar animasi diatas.

Apakah anda tertarik untuk mencoba membuat sendiri gambar animasi seperti diatas??

Silahkan ikuti langkah-langkah dibawah :

1.     Persiapkan sebuah gambar pada netbook/computer anda yang akan dijadikan gambar animasi. Dalam hal ini, anda bisa memakai gambar dengan pola lingkaran seperti pada gambar yang saya pakai, atau gambar persegi empat (terserah anda).

Gbr.1

2.     Crop/potong gambar tersebut menjadi 4 bagian seperti pada gambar dibawah.

Gbr.2

Untuk meng-crop/memotong gambar tersebut, anda bisa memanfaatkan Microsoft Office Picture Manager, software bawaan netbook/computer anda. Atau anda juga bisa menggunakan software lain yang biasa anda gunakan untuk mengedit photo.

3.     Setelah langkah no.2 selesai anda lakukan, selanjutnya buka aplikasi Macromedia Flash anda. Pada halaman yang muncul, klik Flash Document pada bagian Create New.

Gbr.3

4.     Setelah muncul halaman baru, selanjutnya tekan Ctrl+F3 pada keyboard netbook/computer anda, sehingga muncul halaman seperti gambar dibawah. Selanjutnya klik kolom ukuran default.

Gbr.4

Pada halaman Document Properties seperti gambar no.4 diatas, ganti ukuran default sesuai dengan ukuran gambar yang telah anda persiapkan pada langkah no.1 diatas.(contoh 130×130 px). Selanjutnya klik OK.

Tekan Ctrl+F3 lagi untuk kembali kehalaman semula.

5.     Tambahkan 3 Layer baru dengan mengklik tanda yang terletak disudut kiri bawah halaman Layer, sehingga jumlah Layer menjadi 4.

Gbr.5

6.     Selanjutnya, klik kanan pada Layer 1 dan pada Layer Properties ganti nama Layer 1 menjadi potongan 1.

Gbr.6

Lakukan hal yang sama terhadap 3 Layer lainnya.

7.     Setelah langkah no.6 diatas selesai anda lakukan, selanjutnya klik pada Layer potongan 1, kemudian masukkan gambar potongan 1 yang telah anda persiapkan pada langkah no.2 diatas. Caranya klik Menu File–>Import–>Import to Stage.. atau tekan Ctrl+R pada keyboard anda. Geser/letakkan gambar tersebut seperti pada gambar dibawah.

Gbr.7

Selanjutnya, klik pada Layer potongan 2, kemudian masukkan gambar potongan 2.

Lakukan langkah seperti diatas terhadap Layer potongan 3 dan 4 dengan letak gambar masing-masing potongan seperti pada gambar dibawah.

Gbr.8

8.     Langkah berikutnya, klik dibawah angka Frame 20  pada Layer potongan 1 kemudian tekan F6 pada keyboard anda. Selanjutnya klik kanan dibawah angka frame 10 kemudian pilih Create Motion Tween.

Klik dibawah angka Frame 20 lagi, kemudian geser gambar potongan 1 keatas media. (Untuk penggeseran sempurna, tekan tombol arah panan à sambil menekan tombol huruf V pada keyboard)

Gbr.9

9.     Lakukan hal yang sama seperti langkah diatas terhadap ke-3 Layer lainnya yaitu Layer potongan 2 pada angka Frame 40

Layer potongan 3 pada angka Frame 60

Layer potongan 4 pada angka Frame 80

Sehingga hasilnya akan tampak seperti gambar dibawah.

Gbr.10

10.     Langkah selanjutnya, klik dibawah angka frame 1 pada Layer potongan 2, kemudian tarik/geser garis tersebut dan letakkan sejajar dengan angka frame 20 Layer potongan 1.

Gbr.11

Lakukan hal yang sama terhadap Layer potongan 3 dan 4. (Perhatikan gambar 12 dibawah).

Gbr.12

11.     Selanjutnya klik dibawah angka frame 85 pada Layer potongan 4, kemudian tekan F6 pada keyboard.

Lakukan hal yang sama terhadap Layer potongan 3, 2, dan 1.

Tekan Ctrl+ENTER untuk melihat hasilnya. Untuk membuat Gambar Animasi bergerak yang lainnya, silahkan gunakan imajinasi anda dengan memperhatikan animasi-animasi pada blog atau pada situs animasi yang telah anda kunjungi.

12.     Untuk menyimpan gambar animasi tersebut, silahkan klik File–>Export–>Export Movie

Simpan dengan type Animated GIF(*.gif) atau Flash Movie(*.swf).

SELAMAT BERIMAJINASI.

 

Games Mini Soccer

Tombol Untuk Bermain Mini Soccer :

1. Maju : Tombol Arah Atas
2. Kanan : Tombol Arah Kanan
3. Mundur : Tombol Arah Bawah
4. Kiri : Tombol Arah Kiri
5. Tendang : Tombol Huruf F
6. Oper : Tombol Huruf Z