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.

Artikel Terkait :

1.     Cara Membuat Gambar Animasi Cincin Berputar atau Gambar Loading

2.     Cara Membuat Gambar Animasi Berputar atau Baling Baling Animasi

3.     Cara Membuat Jam Analog Animasi Dengan Macromedia Flash

4.     Cara Membuat Jam Animasi Digital Flash dan Kalender

5.     Cara Membuat Teks Animasi Dengan Macromedia Flash 8

6.     Cara Membuat Teks Berjalan Dengan Macromedia Flash

7.     Cara Membuat Gambar Berkedip atau Efek Blink Dengan Macromedia Flash

8.     Cara Membuat Banner Teks Animasi Dengan Easy GIF Animator

9.     Cara Membuat Banner Teks Animasi Berlogo Dengan Easy GIF Animator

10.  Cara Membuat Tombol Button Animasi Dengan Easy GIF Animator

Gambar Animasi Cincin Berputar

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

Artikel Terkait :

1.     Cara Membuat Gambar Animasi Berputar atau Baling Baling Animasi

2.     Cara Membuat Jam Analog Animasi Dengan Macromedia Flash

3.     Cara Membuat Jam Animasi Digital Flash dan Kalender

4.     Cara Membuat Teks Animasi Dengan Macromedia Flash 8

5.     Cara Membuat Teks Berjalan Dengan Macromedia Flash

6.     Cara Membuat Gambar Berkedip atau Efek Blink Dengan Macromedia Flash

7.     Cara Membuat Banner Teks Animasi Dengan Easy GIF Animator

8.     Cara Membuat Banner Teks Animasi Berlogo Dengan Easy GIF Animator

9.     Cara Membuat Tombol Button Animasi Dengan Easy GIF Animator

Gambar Animasi Berputar

Membahas masalah gambar animasi adalah suatu hal yang sangat menarik, karena seiring dengan perkembangan teknologi yang semakin maju, sehingga dengan semakin banyaknya software pendukung yang bermunculan, secara langsung akan berpengaruh dengan keanekaragaman bentuk gambar animasi yang akan dihasilkan.

Masih pada Macromedia Flash Professional 8, kali ini saya akan berbagi tutorial dasar animasi ringan yaitu mengenai cara membuat gambar animasi berputar yang menyerupai baling-baling atau kipas angin, dengan arah dan kecepatan putaran yang bisa kita atur/tentukan sendiri.

Apakah anda berminat mencobanya?? Silahkan ikuti langkah-langkah dibawah.

1.     Buka aplikasi 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 (contoh 200×200 px). Selanjutnya klik OK.

Tekan Ctrl+F3 lagi untuk kembali kehalaman semula.

3.     Selanjutnya klik Rectangle Tool (R)kemudian pilih PolyStar Tool.

Gambar.3

Klik Ctrl+F3 pada keyboard kemudian klik Option… pada halaman properties hingga muncul halaman Tool Settings seperti dibawah.

Gambar.4

Ganti ukuran default Number of sides dengan angka 3

Tekan Ctrl+F3 lagi untuk kembali kehalaman semula.

4.     Buatlah 2 buah segitiga seperti gambar dibawah.

Gambar.5

5.     Selanjutnya klik Oval Tool (O) kemudian buatlah 1 buah lingkaran kecil seperti gambar no.5 diatas.

4.     Langkah selanjutnya, aturlah posisi ketiga gambar tersebut hingga menjadi seperti gambar dibawah.

Gambar.6

Selanjutnya klik dibawah angka frame 30 kemudian klik F6 pada keyboard anda.

7.     Langkah berikutnya, klik dibawah angka frame 15 kemudian klik kanan, selanjutnya pilih Created Motion Tween

Gambar.7

8.      Selanjutnya klik Ctrl+F3 pada keyboard hingga muncul halaman seperti gambar dibawah.

Gambar.8

Pada bagian Rotate pilih CW dengan 5 times.

9.     Tekan Ctrl+ENTER untuk melihat hasilnya.

• Untuk menghasilkan putaran yang bagus, silahkan edit pada angka frame(langkah no.6) dan angka frame rate (Langkah no.3). Contoh : Letakkan/geser Keyframe dibawah angka 70 dengan frame rate 50).

CW adalah putaran kekanan yang searah dengan jarum jam, dan CCW adalah putaran kekiri.

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

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

SELESAI

Artikel Terkait :

1.     Cara Membuat Jam Analog Animasi Dengan Macromedia Flash

2.     Cara Membuat Jam Animasi Digital Flash dan Kalender

3.     Cara Membuat Teks Animasi Dengan Macromedia Flash 8

4.     Cara Membuat Teks Berjalan Dengan Macromedia Flash

5.     Cara Membuat Gambar Berkedip atau Efek Blink Dengan Macromedia Flash

6.     Cara Membuat Banner Teks Animasi Dengan Easy GIF Animator

7.     Cara Membuat Banner Teks Animasi Berlogo Dengan Easy GIF Animator

8.     Cara Membuat Tombol Button Animasi Dengan Easy GIF Animator

Gambar berkedip

Hallo sobat bloggers, apa kabar? Mudah-mudahan sehat selalu dan niat ngeblognya tetap semangat

Untuk memenuhi permintaan salah satu teman blogger yang telah meluangkan waktunya untuk mampir dan membaca beberapa artikel tips disini, maka kali ini saya akan membagikan satu tips lagi sesuai dengan judul diatas.

Istilah ”efek blink/berkedip” mungkin sudah tidak asing lagi bagi kita, karena selain untuk mempercantik halaman blog, efek blink/berkedip ini juga berfungsi sebagai bentuk iklan untuk menarik perhatian pengunjung blog agar mengklik obyek yang kita inginkan.

Pada artikel terdahulu saya telah memposting Cara membuat efek blink/berkedip pada teks sekaligus mengganti warna teks tersebut. Yang mana, obyek yang kita kasih efek blink hanya berupa tulisan atau teks biasa saja.

Penerapan teks dengan efek blink/berkedip pada halaman blog, mungkin kita masih bisa menggunakan kode html, namun untuk obyek gambar, tentunya kita harus membuat animasi tersebut terlebih dahulu dengan menggunakan sebuah software.

Apabila dikomputer/netbook anda sudah terinstall Macromedia Flash, silahkan ikuti langkah-langkah dibawah.

1.     Persiapkan sebuah gambar pada netbook/computer anda yang akan anda jadikan gambar berkedip, edit ukuran lebar dan tinggi gambar tersebut sesuai kebutuhan anda. (Contoh 60×60 px).

2.     Buka aplikasi Macromedia anda, kemudian klik Flash Document pada bagian Create New.

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

Pada halaman Document Properties seperti gambar no.2 diatas, silahkan isi form yang terdapat disana, dan ganti ukuran default media dengan ukuran gambar yang telah anda persiapkan (langkah no.1). Selanjutnya klik OK.

Tekan Ctrl+F3 lagi untuk kembali kehalaman semula.

4.     Langkah berikutnya, tekan F5 sebanyak 4 kali, kemudian F6 sebanyak 4 kali, hingga layar frame tampak seperti pada gambar dibawah.

5.     Selanjutnya, masukkan gambar yang telah anda persiapkan ke stage dengan cara, klik File–>Import–>Import to Stage…

6.     Selanjutnya lakukan langkah seperti no.4 diatas hingga layar frame akan tampak seperti gambar dibawah.

7.     Langkah berikutnya, klik pada gambar kemudian tekan Delete, selanjutnya tekan F5 sebanyak 4 kali, kemudian F6 sebanyak 1 kali.

8.     Tekan Ctrl+ENTER untuk melihat hasilnya.

9.     Simpanlah file gambar tersebut dengan cara klik File–>Export–>Export Movie

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

***Untuk gerak lambat atau cepat kedipan gambar, silahkan ditambah/dikurangi jumlah klik F5 dan F6.

SELESAI

Artikel terkait :

1.     Cara Membuat Jam Analog Animasi Dengan Macromedia Flash

2.     Cara Membuat Jam Animasi Digital Flash dan Kalender

3.     Cara Membuat Teks Animasi Dengan Macromedia Flash 8

4.     Cara Membuat Teks Berjalan Dengan Macromedia Flash

5.     Cara Membuat Banner Teks Animasi Dengan Easy GIF Animator

6.     Cara Membuat Banner Teks Animasi Berlogo Dengan Easy GIF Animator

7.     Cara Membuat Tombol Button Animasi Dengan Easy GIF Animator

Niat saya dalam ikutan ngeblog ini hanya mau belajar dan belajar, dan setelah saya bisa sedikit memahami dengan apa yang saya pelajari, saya langsung membagikannya kepada teman-teman.

Namun, setelah memposting beberapa artikel di awal tahun 2012 ini, baru kali ini saya mendapatkan pingback istimewa yaitu the seven shadow award dari artikel sahabat, atau lebih tepatnya bloging support award.

Awalnya saya agak penasaran juga, namun setelah saya cek langsung ke TKP dan membaca isi artikelnya, secara spontan terbersit suatu perasaan senang dan bahagia. Terang saja, karena ternyata masih ada yang mau menghargai seorang blogger kampungan yang tinggal DIBALIK KESUNYIAN SEKOTONG.

Tidak banyak orang yang tau keberadaan salah satu kecamatan di Lombok Barat ini, namun setelah merebaknya kegiatan pertambangan rakyat didaerah ini, nama sekotong kian populer ditelinga para pelaku pebisnis emas, dan ada juga yang datang untuk sekedar tau serta ingin melihat secara langsung asal muasal emas dan cara pengolahannya.

Sebenarnya sangat bertolak belakang dengan rencana program pemda setempat, yang mana daerah ini ingin lebih dikenal dengan pesona tempat wisatanya. Namun keinginan tersebut agak terhempas dengan kilauan emas yang terkandung dalam perut perbukitan yang ada disana. 

Dalam artikel khusus ini, saya sampaikan matur tampi asih (terima kasih) yang sedalam-dalamnya kepada saudara IRFAN HANDI atas persembahan The Seven Shadow Award’nya kepada saya. Beliau adalah blogger Lombok pertama  yang saya kenal didunia maya, dan dari beliau saya mendapat inspirasi untuk membuat link sahabat pada sidebar blog saya ini.

Ucapan Tengkiu juga saya sampaikan buat Bang RED (anunaki). Begitu dapat ping 7 Shadow award dari beliau saya langsung ke TKP, daaann alaamaaakkk….. mata saya langsung terasa sejuk setelah membaca dan melihat isi artikelnya (Solar Gard’nya cihuyy abiezz bang Red hahahahaha). Blog beliau yang satu ini sangat bagus dan kreatif, saya banyak melakukan pengamatan disana, sehingga saya bisa berkreasi pada blog saya seperti sekarang ini.

Tidak lupa juga buat mas bRo ABED SARAGIH, terimaksih banyak atas saran dan info free downloadnya, karena beliaulah saya bisa membagikan tips membuat banner animasi dengan Easy GIF Animator, namun untuk IDMnya saya nyerah sob hehehe

Sesuai dengan permintaan si empunya award , The 7 Shadow Award ini harus saya persembahkan kepada 7 sahabat blogger yang saya anggap pantas.

Sebenarnya sangat susah buat saya untuk menentukannya, karena dari sekian blog teman yang saya kunjungi, semuanya sangat bermanfaat buat saya, baik dari segi pengembangan blog maupun untuk perenungan akhlak.

Jadi sebagai bentuk rasa terima kasih sekaligus support kepada teman-teman, maka dengan ini saya persembahkan The Seven Shadow Award ini kepada anda, yang nantinya anda persembahkan juga untuk 7 teman yang anda anggap pantas untuk menerimanya.

• ABED SARAGIH

• ASTITI RAHAYU (Jangan pernah berkata menyerah sebelum berhasil)

• YANDIRA CNB

• YISHA

• MARCHEI RIENDRA

• onesetia82

• STRAWBERRY JAM

Buat semua follower lombokdihati, tertaut award yang paling indah dalam ucapan terima kasih saya kepada anda, karena telah berkenan untuk menerima pemberitahuan artikel sederhana dari lombokdihati.

Terima kasih juga buat teman-teman yang telah berkenan berkunjung kesini walaupun hanya sekedar memperlihatkan jempol indahnya

Dan untuk para copaser-copaser illegal, tidak akan pernah ada award untukmu hahahaha peaceee…!!!

Salam Nge-Blog

Contoh Jam Digital 1

Contoh Jam Digital 2

Selain tutorial menggunakan software macromedia flash diatas, pada posting terdahulu saya juga telah membuat artikel tutorial Cara Membuat Jam Digital, dan Cara Membuat Jam 3 Dimensi Flip Clock serta cara pemasangannya pada sidebar blog. Pada tips tersebut, saya menyarankan anda untuk menggunakan situs layanan online, sehingga kita tidak perlu memikirkan kode-kode scrift yang kita tahu sangat membingungkan.

Namun pada file jam yang kita dapat, masih terdapat nama situs tempat kita membuat jam online tersebut, dan pada pemasangan disidebar blog, kita harus mengutak-atik kode pemasangannya agar tulisan tersebut tidak kelihatan.

Dan pada artiklel kali ini, saya akan membagikan tips cara membuat jam dengan menggunakan software yang terdapat pada netbook/computer kita, sehingga hasil yang kita dapat merupakan murni dari hasil kreasi kita sendiri. Disini akan saya jelaskan secara lebih rinci, agar teman-teman yang masih baru menggunakan applikasi ini, tidak merasa kebingungan.

Kita langsung saja…

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

Gambar.1

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

Gambar.2

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

Tekan Ctrl+F3 lagi untuk kembali kehalaman semula.

Jalankan(geser) scroll halaman untuk menampilkan media yang telah diedit.

3.     Selanjutnya klik ikon Insert Layer yang terletak dipojok kiri bawah halaman layer, tambahkan 2 layer baru.

Gambar.4

4.     Klik kanan pada layer ke-3(paling atas), kemudian pilih properties.

Gambar.5

Pada halaman Layer Properties yang muncul seperti gambar diatas, ganti Nama layer menjadi action selanjutnya klik OK.

Lakukan hal yang sama pada layer ke-2, ganti nama layer menjadi tanggal, dan layer ke-1 menjadi jam.

5.     Selanjutnya klik Text Tool atau tombol T pada keyboard anda.

Gambar.6

Buatlah teks area pada media yang telah anda siapkan, kemudian tulis 00:00:00 am (pastikan panjang tulisan tidak melebihi media) selanjutnya tekan Ctrl+F3, maka akan muncul halaman property seperti pada gambar dibawah.

Gambar.7

Pada kolom dibawah Dynamic text, ganti <Instance Name> menjadi clock_txt.

Pada halaman tersebut anda juga bisa mengatur jenis font,warna, serta besar kecilnya font.

6.     Selanjutnya klik layer tanggal, buat area teks dibawah teks yang sudah ada, kemudian tulis Minggu, 31 Desember 2012

Gambar.8

Selanjutnya tekan Ctrl+F3, pada kolom Variable ditulis myDate. (Aturlah jenis font, warna, dan ukuran fonts agar tidak melebihi halaman media).

Gambar.9

7.     Langkah berikutnya, klik dibawah Frame 1 pada layer jam, kemudian tekan F9 pada keyboard anda, selanjutnya Copy kode dibawah dan Paste pada halaman Action yang muncul.

time=new Date(); // time object

var seconds = time.getSeconds()

var minutes = time.getMinutes()

var hours = time.getHours()

if (hours<12) {

ampm = “am”;

}

else{

ampm = “pm”;

}

while(hours >24){

hours = hours – 12;

}

if(hours<10)

{

hours = “0″ + hours;

}

if(minutes<10)

{

minutes = “0″ + minutes;

}// author: Nyoman CNd

// www.lombokdihati.wordpress.com

if(seconds<10)

{

seconds = “0″ + seconds;

}

clock_txt.text = hours + “:” + minutes + “:” + seconds +” “+ ampm;

Gambar.10

8.     Selanjutnya klik dibawah Frame 1 pada layer tanggal kemudian tekan F9.

Copy kode dibawah dan Paste pada halaman Action.

myDate = new Date();

weekday = new Array(“Minggu,”, “Senin,”, “Selasa,”, “Rabu,”, “Kamis,”, “Jumat,”, “Sabtu,”);

month = new Array(“JaNuaRi”, “FebRuaRi”, “MaRet”, “ApRil”, “Mei”, “JuNi”, “JuLi”, “AgusTus”, “SepTeMbEr”, “OkToBer”, “NoVemBer”, “DeSeMbEr”);

// author: Nyoman CNd

// www.lombokdihati.wordpress.com

myDate = (weekday[myDate.getDay()]+” “+myDate.getDate()+” “+month[myDate.getMonth()]+” “+myDate.getFullYear());

9.     Pada Layer action, klik kanan dibawah Frame 2, kemudian pilih Insert KeyFrame,

Gambar.11

Selanjutnya tekan F9 pada keyboard anda, dan langkah yang terakhir Copy kode dibawah dan Paste pada halaman Action

gotoAndPlay(1);

Tekan Ctrl+ENTER untuk melihat hasilnya.

1.     Selanjutnya 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

Untuk mengganti warna background atau memasukkan gambar/foto untuk background jam, silahkan anda baca pada artikel terkait dibawah

Artikel terkait :

1.     Cara Membuat Jam Analog Animasi Dengan Macromedia Flash

2.     Cara Membuat Teks Animasi Dengan Macromedia Flash 8

3.     Cara Membuat Teks Berjalan Dengan Macromedia Flash

4.     Cara Membuat Banner Teks Animasi Dengan Easy GIF Animator

5.     Cara Membuat Banner Teks Animasi Berlogo Dengan Easy GIF Animator

6.     Cara Membuat Tombol Button Animasi Dengan Easy GIF Animator

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

Baca Juga :

1.     Cara Membuat Teks Animasi Dengan Macromedia Flash 8

2.     Cara Membuat Teks Berjalan Dengan Macromedia Flash

3.     Cara Membuat Banner Teks Animasi Dengan Easy GIF Animator

4.     Cara Membuat Banner Teks Animasi Berlogo Dengan Easy GIF Animator

5.     Cara Membuat Tombol Button Animasi Dengan Easy GIF Animator

Macromedia Flash

Seperti pada umumnya, setiap software animasi pastinya terdapat kelebihan dan kekurangan masing-masing, serta mempunyai tingkat kerumitan yang berbeda dalam penggunaannya.

Teks Animasi GIF Transparan

Teks animasi GIF Background

Pada artikel tips yang serupa sebelumnya, kita telah mencoba menggunakan applikasi Easy GIF Animator, yang mana pada applikasi tersebut mempunyai beberapa macam bentuk pilihan teks animasi dengan hasil banner yang cukup bagus dan memuaskan. Namun, pada applikasi tersebut kita tidak bisa mengatur cepat dan lambatnya pergerakan teks sesuai dengan keinginan kita seperti pada contoh banner diatas.

Artikel tips kali ini, saya ingin menawarkan kepada anda untuk mencoba menggunakan applikasi Macromedia Flash Professional 8. Walaupun termasuk versi lama dari macromedia flash, namun pada software ini, kita juga bisa membuat bermacam-macam bentuk animasi, baik dengan ekstensi GIF maupun SWF.

Buat teman-teman bloggers yang suka mengutak-atik animasi, tidak ada salahnya untuk mencoba. Silahkan cari softwarenya di mbah google, yang ukuran filenya cuma 107 MB.

Adapun langkah-langkah untuk membuat teks animasi pada Macromedia Flash adalah sebagai berikut :

1.     Buka applikasi Macromedia Flash pada netbook/computer anda, kemudian klik Create New Flash Document.

Gambar.1

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

Gambar.2

Buat teman-teman bloggers yang baru pertama kali menggunakan applikasi ini, saya sarankan untuk tidak sembarang menekan/mengklik menu, karena akan semakin membuat anda bingung.

Pada halaman Document Property seperti gambar no.2 diatas, silahkan isi form yang terdapat disana, dan ganti ukuran default media dengan ukuran banner yang akan anda buat, selanjutnya klik OK.

Tekan Ctrl+F3 lagi untuk kembali kehalaman semula.

3.     Apabila anda mengganti ukuran default document terlalu kecil, maka kemungkinan besar media yang anda buat menjadi tersembunyi. Geser scroll yang ada pada bagian bawah halaman dan disebelah kanan halaman, untuk menampilkan media tersebut.

Gambar.3

Selanjutnya klik Menu Text Tool yang terdapat disebelah kiri halaman Layer, atau tekan tombol T pada keyboard anda.

4.     Buatlah area teks pada media, dan tulis teks yang anda inginkan.

Gambar.4

5.     Setelah anda selesai menulis teks, tekan tombol Ctrl+F3 pada keyboard anda hingga muncul halaman seperti gambar dibawah.

Gambar.5

Pada halaman Teks Properties diatas, pilihlah jenis dan ukuran fonts yang akan anda tampilkan pada banner teks anda. Setelah selesai, tekan tombol Ctrl+F3 untuk kembali kehalaman semula.

Selanjutnya delete/hapus teks yang telah anda buat dengan menekan tombol Back space pada keyboard anda, tanpa merubah area teks yang ada.

6.     Setelah semua teks terhapus pada area teks, kemudian tekan F5 dan F6 secara berurutan.

Selanjutnya klik pada area teks yang kosong pada media, kemudian tulis 1 huruf awal yang telah anda hapus tadi, selanjutnya tekan F5 dan F6 secara urut.

Klik lagi pada area teks, kemudian tulis huruf kedua selanjutnya tekan F5 dan F6 secara berurut.

Gambar.6

7.     Untuk huruf ke-3 dan selanjutnya, lakukan langkah-langkah seperti langkah no.6 diatas.

Gambar.7

8.     Setelah semua huruf anda tulis seperti pada gambar diatas, kemudian lihatlah banner teks anda dengan menekan Ctrl+ENTER pada keyboard.

iyessss….!!! Anda telah berhasil selamat yaa…

9.      Untuk menyimpan file banner teks yang telah anda buat tersebut, klik menu File –> Export –> Export Movie

Gambar.8

10.     Tentukan Tempat dan Nama penyimpanan file tersebut pada netbook/computer anda, pilih type Animated GIF(*.gif). Selanjutnya klik Save.

Gambar.9

11.     Pada halaman yang muncul berikutnya, anda bisa mengatur ukuran file banner anda, selanjutnya klik OK.

Gambar.10

Apabila anda ingin membuat banner teks dengan background berwarna, sebelum melakukan langkah no.9 diatas, tekan tombol V kemudian Ctrl+F3 pada keyboard untuk mengganti warna pada Background Properties.

Selanjutnya pada gambar no.10 diatas, hilangkan tanda centang pada kolom Transparent. Kemudian klik  OK.

• Keterangan :

·    V, Ctrl+F3 = Document/Media Properties

·    T, Ctrl+F3 = Teks Properties

·    F5 = Insert Frame

·    F6 = Insert Keyframe

Selesai

Untuk Tutorial membuat teks animasi berjalan seperti pada contoh diatas silahkan klik disini.

Artikel terkait :

1.     Cara Membuat Teks Berjalan Dengan Macromedia Flash

2.     Cara Membuat Banner Teks Animasi Dengan Easy GIF Animator

3.     Cara Membuat Banner Teks Animasi Berlogo Dengan Easy GIF Animator

4.     Cara Membuat Tombol Button Animasi Dengan Easy GIF Animator

Macromedia Flash

Pada tutorial sebelumnya kita membahas Teks Animasi Berjalan dengan model mengetik cepat, kali ini kita akan membahas cara membuat teks animasi berjalan dengan pergerakan seluruh bagian teks dari sisi kanan media, berjalan ke sisi media sebelah kiri, seperti pada contoh animasi teks dibawah.

Agar artikelnya tidak berkepanjangan, kita langsung saja yaa….

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

Gambar.1

2.     Selanjutnya tekan tombol Ctrl+F3 pada keyboard anda.

Gambar.2

Pada halaman Properties diatas, klik tombol Default size untuk mengganti ukuran default media dengan ukuran banner teks yang akan anda buat. Setelah selesai, kemudian klik OK.

Selanjutnya klik Ctrl+F3 untuk menyembunyikan halaman properties dan kembali ke halaman media.

Geser/drag scroll disebelah kanan dan bawah halaman media untuk mengatur letak media baru anda.

3.     Langkah selanjutnya adalah, klik menu Text Tool yang terletak disebelah kiri halaman Layer, atau tekan tombol huruf T pada keyboard anda.

Gambar.3

Buatlah area teks disebelah kanan luar media anda, selanjutnya tulis teks yang akan anda jadikan banner. (Perhatikan gambar diatas)

4.     Pada halaman Frame, klik kanan tanda yang terletak dibawah angka 1 kemudian pilih Create Motion Tween.

Gambar.4

5.     Langkah berikutnya, klik dibawah angka 50, kemudian klik kanan pada tempat tersebut, pilih Insert Keyframe.

Gambar.5

6.     Selanjutnya geser/drag teks yang anda buat menuju kesebelah kiri media dengan menekan tombol V+Tanda Panah kekiri (<--)

Gambar.6

Apabila teks yang anda buat terlalu panjang, perkecil ukuran gambar dengan mengklik tanda yang terletak disebelah kanan atas halaman Frame.

Gambar.7

Setelah seluruh bagian teks sudah terletak pada posisi disebelah kiri media, selanjutnya tekan Ctrl+ENTER untuk melihat hasilnya.

7.     Untuk menyimpan file banner yang telah anda buat, klik menu File –>Export –>Export Movie

Gambar.8

8.     Selanjutnya simpan file anda dalam format Animated GIF(*.gif), kemudian klik Save.

Gambar.9

9.     Pada gambar berikutnya, sesuaikan ukuran lebar dan tinggi banner anda kemudian klik OK.

Gambar.10

10.     Apabila anda ingin membuat banner teks dengan background warna, sebelum melakukan langkah nomor 7, tekan Ctrl+F3 kemudian klik menu Selection Tool untuk menampilkan halaman Document Properties

Gambar.11

Selanjutnya atur warna background sesuai dengan keinginan anda.

Pada gambar no.10 diatas, hilangkan tanda centang pada kolom Transparent. Kemudian klik  OK.

11.     Bila anda ingin banner teks anda bisa berjalan lebih mulus dari banner yang telah dibuat diatas, maka sebelum melakukan langkah no.7, klik dibawah angka 50 pada halaman frame, kemudian klik tahan+geser kebawah angka frame yang lebih tinggi. Pada banner diatas, saya menggesernya sampai ke angka frame 7000.

Yang harus diperhatikan bila anda melakukan hal ini adalah simpanlah file banner anda dengan format Flash Movie(*.swf). (Pada langkah no.8)

Bila anda menyimpan dengan format GIF, kemungkinan ukuran file banner anda akan terlalu besar. Menyimpan dengan format flash, kita dapat mengurangi ukuran file s/d 80%.

Mudah-mudahan dengan membaca tutorial ini, anda bisa berkreasi lebih jauh dengan menggunakan Macromedia Flash.

Selamat Berkarya.

Easy GIF Animator

Hallo sahabat bloggers, apa kabar? Setelah beberapa waktu sempat vaccum dalam memposting artikel baru, kali ini saya akan mencoba berbagi Tips seputar pembuatan animasi banner untuk dipasang pada blog, agar tampilan blog kelihatan menjadi semakin cantik dan menarik (Cewek kali yeee hehe..)

Selain itu, saya juga ingin menepati janji sama sahabat-sahabat bloggers, karena pada sticky post halaman beranda, saya sudah menulis untuk belajar bersama membuat banner animasi.

Teks Animasi GIF dengan Logo

Tombol Button Animasi

Banner Teks Animasi

Lewat posting pertama di Tahun 2012 ini, saya juga ingin mengucapkan selamat Tahun Baru, semoga di Tahun ini, segalanya akan menjadi lebih baik.

Apakah anda berminat untuk membuat sendiri banner teks animasi atau tombol animasi seperti gambar diatas?? Let’s do it bRo….

Penjelasan mengenai banner animasi maupun fungsinya mungkin tidak saya tulis disini, karena saya yakin teman-teman bloggers semua sudah mengetahuinya.

Baiklah, kita langsung saja ya….

Untuk membuat banner animasi yang berekstensi Gif maupun Flash seperti diatas, tentunya akan memerlukan sebuah software khusus dengan tingkat kerumitan tersendiri, dan pada artikel Tips ini, saya merekomendasikan kepada anda untuk menggunakan software Easy GIF Animator. Karena pada applikasi ini, pembuatan banner teks animasi terasa begitu mudah dengan hasil yang tidak kalah bagusnya dengan hasil applikasi lainnya.

Kalau di netbook/computer anda belum terinstall applikasi tersebut, silahkan minta dulu sama mbah google, anda cukup mengetik Download Easy GIF Animator pada kolom search. Ukurannya tidak terlalu besar, hanya 3,63 Mb.

Setelah software tersebut anda install, selanjutnya silahkan langsung dibuka.

Gambar no.1

1.     Pada halaman yang muncul seperti gambar no.1 diatas, selanjutnya klik Create Animated Banner, maka akan muncul halaman seperti gambar dibawah.

Gambar no.2

2.     Pada halaman yang muncul seperti gambar no.2 diatas, klik specify custom size agar anda bisa menentukan sendiri ukuran banner teks yang akan anda buat, saya ambil contoh width 180 pixel height 50 pixel. Selanjutnya klik Next >

Gambar no.3

3.     Pada halaman yang muncul seperti gambar no.3 diatas klik Gradient color, kemudian atur warna banner sesuai keinginan anda, setelah selesai, klik Next >

Gambar no.4

4.     Pada halaman seperti gambar no.4 diatas, mulailah menulis teks yang ingin anda tampilkan pada banner anda. Pada kolom-kolom menu yang terdapat dibawahnya, anda bisa memilih jenis fonts, ukuran, warna, dan tata letak teks pada banner anda.

Pada kolom How to show?, How long to show?, How to hide?, anda bisa mengatur jenis kemunculan teks, lama diamnya teks, dan jenis menghilangnya teks.

Sebaiknya dicoba satu persatu, agar anda bisa menentukan pengaturan yang lebih bagus. Untuk melihat hasilnya, anda bisa perhatikan pada kolom dibawahnya.

5.     Masih pada gambar no.4 diatas, klik Teks 2, selanjutnya tulislah teks yang akan muncul kedua pada banner anda, kemudian lakukan pengaturan seperti pada langkah nomor 4 diatas. Lakukan hal yang sama pada Teks 3.

Setelah semuanya selesai anda atur, selanjutnya klik tombol Finish.

Gambar no.5

6.     Pada halaman berikutnya seperti gambar no.5 diatas, simpanlah file teks banner anda dengan mengklik menu File –> Save (no.1), dan pada halaman berikutnya (no.2) tentukan folder tempat penyimpanan anda pada netbook/computer, tulis nama file, dan pilih type GIF Image (*.gif).

Selanjutnya anda tinggal meng-upload file teks banner anda tersebut ke blog WordPress anda dengan menuju ke Dasbor –> Media –> Tambahkan baru

Hasil survey menyatakan, bahwa dengan memakai Link Taut file banner/gambar pada Blog kita sendiri, maka kita akan terhindar dari pelanggaran Hak Cipta, dan tentunya akan ikut meramaikan kreatifitas anak Bangsa, Merdeka…..!!!!

Untuk cara membuat Banner Teks Animasi Dengan Logo ataupun Tombol Button Animasi seperti tampilan pada gambar banner diatas, saya mohon maaf kalau tidak menulisnya disini dengan alasan agar artikelnya tidak terlalu panjang.

Kalau anda berminat, silahkan klik gambar banner dibawah untuk tutorial selengkapnya.

Teks Animasi GIF dengan Logo

Tombol Button Animasi

Selamat Berkreasi