Cara Membuat Teks Berjalan Dengan Macromedia Flash

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. Sumber : http://lombokdihati.wordpress.com/2012/01/10/cara-membuat-teks-berjalan-dengan-macromedia-flash/

Read more...

Cara Membuat Jam Animasi Digital Flash dan Kalender

Pada artikel terdahulu, kita sudah belajar mengenai Cara Membuat Jam Analog dengan menggunakan Macromedia Flash 8.Kurang lengkap rasanya kalau kita tidak mempelajari cara membuat jam animasi digital sekaligus kalendernya.

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

// http://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

// http://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

Sumber : http://lombokdihati.wordpress.com/2012/01/11/cara-membuat-jam-animasi-digital-flash-dan-kalender/

Read more...

Cara Membuat Gambar Animasi Berputar atau Baling Baling Animasi

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. 

Sumber :http://lombokdihati.wordpress.com/2012/02/07/cara-membuat-gambar-animasi-berputar-atau-baling-baling-animasi/

Read more...

Cara Membuat Animasi Bola Melambung pada Macromedia Flash 8

Cara Membuat Animasi Bola Melambung pada Macromedia Flash 8

Ada banyak sekali animasi yang bisa kita buat di Macromedia Flash 8 seperti kartun, game, presentasi, tulisan bergerak, dll. Yang akan kami bahas kali ini adalah bagaimana cara untuk membuat bola bergerak melambung pada Macromedia Flash 8. Kebanyakan bagi orang yang belum tau, untuk menggerakkan bola melambung akan dibuat secara frame by frame atau di geser sedikit demi sedikit. Mungkin bagi yang baru bisa menggunakan Macromedia Flash 8 belum mengerti apa yang kami tulis tersebut. Jadi kami memberi cara mudah untuk membuat bola bergerak melambung.

Ikuti langkah-langkah berikut:

1.      Yang pasti buka dulu software Macromedia Flash 8.

2.      Pada barisan Create New pilih Flash Document.

3.      Setelah terbuka kita mulai membuat gambar bola. Tetapi sebelum membuat gambar bola pilih dulu warna bola yang ingin anda buat dengan cara klik pada Fill color => pilih warna.

4.      Gambar bola dengan menggunakan Oval Tool (O) pada baris Tool seperti pada gambar.

5.      Ganti nama layer bola menjadi Bola dengan cara double klik pada Layer 1.

6.      Setelah selesai membuat bola kita membuat lintasan bolanya dengan cara membuat layer yang baru terlebih dahulu dengan cara klik Insert Layer seperti gambar dibawah ini.

7.      Ganti nama Layer 2 menjadi Jalur.

8.      Klik kanan pada layer Jalur => pilih guide, maka layer akan berubah seperti gambar dibawah ini.

9.      Gabungkan layer Bola dengan layer Jalur dengan cara menggeser layer Bola ke layer Jalur, maka layer Jalur akan berubah lagi seperti pada gambar.

10.  Sekarang kita mulai membuat gambar jalurnya dengan klik sekali pada layer Jalur, lalu pilih Line Tool (N) pada baris Tool => buatlah garis lurus seperti pada gambar.

11.  Lengkungkan garis dengan menggunakan Selection Tool (V) => dekatkan Selection Tool dengan garis sampai ada garis kecil yang melengkung di dekat Selection Tool => klik sambil digeser ke atas /drag sampai garisnya melengkung seperti pada gambar.

12.  Sekarang kita tinggal membuat bolanya bergerak.

13.  Kita buat framenya terlebih dahulu dengan cara klik kanan pada frame 20 layer Jalur  => pilih Insert Frame seperti pada gambar.

14.  Klik frame 1 layer Bola => pilih Free Transform Tool (Q) pada baris Tool => geser gambar bola hingga titik tengahnya berada tepat di garis seperti pada gambar.

15.  Klik kanan frame 20 layer Bola => pilih Insert Keyframe => pilih Free Transform Tool (Q) => geser gambar bola hingga titik tengahnya berada di ujung garis.

16.  Klik kanan pada frame layer Bola => pilih Create Motion Tween, maka akan muncul gambar panah pada frame tersebut seperti pada gambar.

17.  Tekan Ctrl+Enter untuk melihat hasilnya.

18.  Agar animasi yang kalian buat menjadi sebuah video pilih menu File => Export => Export Movie... atau tekan Ctrl+Alt+Shift+S.

19.  Beri nama sesuai keinginan => Save => tekan OK saat muncul gambar seperti di bawah ini.

# SELAMAT MENCOBA :)

Read more...