Animasi gerak dengan flash

Sesuai permintaan dari sahabat, cara pembuatan efek tulisan bergerak (animasi) dengan format file gif. Animasi ini dibuat dengan program photoshop pada awalnya, kemudian proses pembuatan animasinya dengan menggunakan Adobe Image Ready. Jika photoshop yang digunakan adalah versi CS3, maka animasi ini bisa dibuat langsung dengan Photoshop, tanpa harus menggunakan image ready.

Tutorial pembuatan animasi tulisan dengan Photoshop :

Langkah 1
Buatlah sebuah file baru dengan Photoshop. Ukuran file bisa disesuaikan dengan kebutuhan Anda. Pada tutorial ini, saya menggunakan sebuah file yang berukuran 468 x 60 pixel; 72 dpi; RGB; content=white.



Langkah 2
Buatlah sebuah tulisan dengan menggunakan Type tools pada Photoshop.



Langkah 3
* Jika Anda menggunakan versi Photoshop 7 hingga CS:
Klik icon Jump to Image ready. Icon ini terletak di sebelah bawah pada Tools Box. Anda juga bisa memilih menu File > Jump To > Adobe ImageReady 7.0 (pada Photoshop 7), atau File > Edit in Image Ready (pada Photoshop CS).



* Jika Anda menggunakan versi Photoshop CS3:
Pilih menu Window > Animation



Langkah 4
Akan Anda dapati sebuah palet panjang di sebelah bawah (bentuk tampilan relatif sama baik pada Image Ready ataupun Photoshop CS3).


Jika perlu, perlebar tampilan palet ini dengan melakukan klik dan geser pada sudut kanan bawah palet tersebut.


Langkah 5
Geser tulisan hingga ke sebelah kiri luar dari background yang putih, hingga seluruh tulisan tidak nampak.



Langkah 6
Klik icon Duplicate current frame.



Langkah 7
Sekarang ada 2 frame pada palet Animation. Pastikan yang terpilih sekarang adalah frame kedua.
Geser lagi tulisan hingga sisi kanan luar dari background.



Langkah 8
Klik icon Tweens animation frames.


Tujuan penggunaan Tween ini adalah untuk mempermudah pembuatan frame-frame animasi. Tween akan menambahkan frame secara otomatis berdasarkan perbedaan posisi, ukuran, tranparansi, dan efek pada obyek.

Kemudian akan muncul kotak dialog baru, seperti gambar tutorial berikut ini.



Pada kotak dialog ini, kita bisa mengatur:

* Tween with: digunakan untuk memilih frame mana yang akan kita gunakan sebagai dasar animasi berdasarkan frame yang aktif. Karena kita aktif pada frame kedua, maka yang tepat adalah Previous Frame.
* Frame to Add: digunakan untuk memilih jumlah frame yang akan ditambahkan. Semakin banyak jumlah frame, animasi akan semakin nampak halus, tetapi ukuran file hasil jadinya akan semakin besar.
* Layers: digunakan untuk memilih animasi pada antara semua layer, atau hanya pada layer yang aktif saja.
* Parameters: digunakan untuk memilih jenis perubahan obyek yang digunakan sebagai dasar animasi


Langkah 9
Klik icon Plays/stops animation.


Animasi sudah jadi. Jika Anda menginginkan pengaturan kecepatan animasi, bisa Anda pilih dari tulisan 0 sec disebelah bawah frame.


Jika pengaturan kecepatan ini akan dilakukan pada banyak frame sekaligus, maka klik sebuah frame, kemudian tekan dan tekan tombol Shift, lalu klik frame yang lain. Bisa juga dengan Ctrl + klik frame yang lain. Setelah terpilih banyak frame sekaligus, baru ubah kecepatannya. Pengubahan kecepatan animasi akan berlaku pada semua frame yang terpilih.

Untuk menyimpan hasil animasi, pilihlah menu File > Save Optimized pada Adobe ImageReady. Atau File > Save for Web & devices pada Photoshop CS3. Pastikan format file yang dipilih adalah gif.


Berikut ini adalah hasil dari tutorial ini, sebuah tulisan dengan efek gerak yang disimpan dengan format file gif.

Silahkan dicoba dan digunakan sebagai tambahan materi belajar photoshop. Berikut ini ada 1 buah contoh file lain. Silahkan dicoba sendiri juga untuk membuat seperti gambar berikut ini :

Posted in: Animasi dan flash

Membuat taman matahari

Tutorial kali ini adalah Tutorial Membuat taman MATAHARI, disini saya menggunakan Macromedia Flash 8...

1. Buka program flash 8
Ubah ukuran stage menjadi 768 x 576 pixels.
Ganti warna bacground menjadi warna warna biru #0099FF


2. buat 4 layer yaitu dengan nama: Rumput hijau, tiang, kotak nama, matahari


3. Di layer rumput hijau Klik rectangle tool ,untuk membuat rumput hijau dengan mendragnya ke stage seperti gambar dibawah ini.



4. Klik di frame 1 pada layer: tiang lalu gunakan rectangle tool lagi untuk membuat tiang penunjuk arah ,
setelah selesai pembuatan tiangnya maka untuk pemberian garis tiang dan arah gunakanlah line tool setelah itu tekan tombol F8 dan beri nma tiang_mc
lihat gambarnya:



5. sekarang klik frame 1 pada layer: kotak nama
Ganti fill color menjadi warna putih dan strokenya hitam lalu tekan tombol F8 dan beri nama Kotaknama_mc dan copy menjadi 4 lalu sesuaikan dengan gambar dan beri nama : jl. Grafis, jl.animasi, jl.film, jl.kartun.
lihat gambarnya:



6. langkah terakhir, klik frame 1 di layer matahari ganti warna fill color menjadi #FFFF00 dan stroke dijadikan none gunakan rectangle tool
Untuk mebuat perputaran matahari buat 8 kotak panjang lalu urutkan seperti gambar lalu tekan F8 dan beri nama sun_mc
lihat gambarnya:



7. Klik 2 kali pada objek sun_mc dan akan terlihat seperti gambar ini



8. buat 1 layer lagi dan beri nama bulat
klik di frame 1 layer: bulat dan klik oval tool untuk membuat objek lingkaran klik kanan > insert keyframe di frame 60 lalu klik
klik kanan create motion tween di frame 30.
lihat gambarnya:



9. klik di frame 1 layer 1
klik kanan > insert keyframe di frame 60
lalu klik pada frame 30 , klik di propertiesnya



10. agar matahari terlihat dibelakang pindahkan layer matahari di paling bawah….
untuk membuat rumputnya gunakan line tool buat seperti gambar

Selamat Mencoba>>>>@_@
Untuk melihat hasilnya tekan Ctrl + enter
hasilnya:

Taman Matahari ilmuGRAFIS

Selamat mencoba
Semoga berhasil…
SEMOGA BERMANFAAT

Posted in: Animasi dan flash

Animasi Teks Berjatuhan

Berikut ini adalah contoh membuat animasi teks yang berjatuhan, menggunakan pilihan Distribute to Layers untuk membagi tiap-tiap huruf ke dalam layer-layer yang berbeda. Selanjutnya pada setiap layer huruf yang ada diberikan suatu animasi huruf yang berjalan dari atas ke bawah. Untuk layer-layer huruf yang lainnya diberikan interval 5 frame agar huruf-huruf yang beranimasi terlihat seperti berjatuhan. Langkah-langkah pembuatannya adalah sebagai berikut :

Ketiklah sembarang teks (jangan terlalu panjang), misalnya : PETRA dengan ketentuan : Type Font : Arial; Size : 70; Color : Black.

Blok object teks menggunakan Selection Tool, kemudian pilih menu Window - Info (CTRL + I) untuk mengganti posisi x dan posisi y dari object yang sedang kita pilih. Ganti posisinya : X = 100; Y = 20.

Aktifkan teks, pisahkan setiap huruf pada teks tersebut dengan memilih menu Modify - Break Apart (Ctrl+B) untuk memisahkan teks menjadi per huruf.

Pilih menu Modify - Timeline - Distribute to Layers (Ctrl+Shift+D) untuk membagi tiap-tiap huruf ke dalam layer-layer dengan nama setiap huruf yang terdapat dalam teks. Perhatikan gambar berikut :

Berikan keyframe pada frame 10 untuk semua layer huruf. Caranya adalah, klik frame 10 pada layer huruf pertama (layer P) kemudian tahan tombol shift lalu klik pada frame 10 untuk layer huruf terakhir (layer A). Hasilnya adalah pada semua layer huruf di frame 10 akan terblok, kemudian pilih menu Insert - Timeline - Keyframe (F6).

Tampilkan panel Info dengan menekan Ctrl+I, untuk mengubah posisi huruf. Pindahkan semua posisi huruf di Y=220.

Pada frame 15, untuk semua layer berikan keyframe (F6). Dengan Panel Info, pindahkan posisi huruf di Y=150. Miringkan sedikit huruf-hurufnya dengan menggunakan Free Transform Tool.

Pada frame 20, untuk semua layer berikan keyframe (F6). Dengan Panel Info, pindahkan posisi huruf di Y=220.

Blok semua layer huruf. mulai dari frame 1 sampai frame 19. Berikan Tween Motion pada semua layer yang di blok.

Untuk membuat efek tulisan muncul secara satu persatu, blok Layer huruf kedua (Layer E) dari frame 1 sampai frame 20.

Kemudian masih dalam keadaan terblok silakan geser layer huruf kedua ini ke sebelah kanan dengan selisih 5 frame dari layer huruf pertama (Layer P). Perhatikan gambar berikut :

Demikian juga untuk layer-layer huruf selanjutnya, silakan blok layer huruf selanjutnya kemudian geser ke kanan sebesar 5 frame dari layer huruf di atasnya. Sehingga tampilan pada timelinenya akan nampak seperti gambar berikut :

Pada layer huruf terakhir (Layer A), posisi keyframe terakhir berada pada frame 39. Untuk menyamakan posisi semua frame, maka klik frame 40 pada layer huruf pertama (Layer P), kemudian tahan tombol shift dan klik frame 40 pada layer huruf yang terakhir lalu Insert Frame (F5)

Berikut ini adalah tampilan akhir dari timeline.

Jalankan animasi (Ctrl+Enter) !!!

Posted in: Animasi dan flash

Animasi Kursor di Flash

Pasti semua telah mengenal yang namanya kursor, kursor adalah indikator penunjuk mouse. Membuat kursor lain dari pada yang lain memang terlihat menarik. Namun bagaimana cara membuat animasi kursor kita di animasi flash kita. Kali in kita akan mempelajari juga tentang action script dan penggunaan symbol di Flash. Anda juga bisa menggunakan Macromedia Flash atau Adobe FlashCS. Untuk Action script tetap gunakan ActionScript 2.0. Sekarang kita mulai saja tutorialnya.

Membuat simbol movieclip

Ikuti langkah-langkah untuk:

• Tekan (Ctrl + F8) untuk menciptakan simbol baru.
  "Create New simbol" jendela akan muncul
• beri nama symbol dengan nama cursorNew_mc simbol.
• Klik pada movieklip dan kemudian tekan "OK"
  sekarang kita akan memasukan symbol movieclip sebagai animasi kursor
• Gambar sembarang bentuk kursor yang anda inginkan untuk menjadi kursor di animasi flash anda.
  contohnya seperti gambar dibawah.
  
• Sekarang kembali ke "Scene 1" yang merupakan movie utama Anda
  Untuk kembali ke "Scene 1", klik pada "Scene 1" teks pada bagian atas jendela timeline Anda seperti ditunjukkan pada gambar di bawah ini
  

Dalam "Scene 1" Movie Utama Anda

• Drag Anda movieklip cursorNew_mc simbol dari perpustakaan ke stage Anda.
  Jika jendela library tidak terbuka, Tekan (Ctrl + L).
• Nama Simbol ini "cursornew" dalam kotak teks contoh dari jendela properti Anda.
• Select 1st Frame of your "Layer1". Bingkai 1 Pilih "Layer1". Go to Actionscript panel ( If your actionscript panel is not open, Press "F9") Buka panel Actionscript (Jika panel actionscript tidak terbuka, Tekan "F9")
• Pada Frame1 pada layer 1 masukan script di bawah ini
  
  

  Mouse.hide() startDrag(cursornew,true)

Nah, sekarang coba jalankan animasi dengan menekan tombol ctrl + Enter.

Hasil test kursor pada animasi flash

by : http://www.entheosweb.com

Posted in: Animasi dan flash

Membuat Mp3 player dengan Flash

December 21, 2008 in Komputer | Tags: belajar flash, flash, membuat mp3 player, mp3 player sederhana, tutorial flash | by Abid Famasya

Melihat begitu banyaknya yang melihat tutorial yang berisi membuat efek mengetik dengan flash, maka saya coba-coba cari referensi di internet lagi. Kali ini saya akan membuat simple mp3 player tentu saja dengan flash. Go!
Pertama, buat sebuah rectangle di stage area dan corner radiusnya adalah 10. Jangan beri warna apapun di dalamnya

Next, buat juga 2 layer. Bernama player dan as (actionscript). Pada layer player, buat 2 kotak yang sama. Satu kotak di-convert ke button dengan nama play dan satunya di-convert dengan nama pause.

Sekarang mainkan musik kesukaan kamu. Biar nggak stress! Next. Atur layoutnya agak bener-bener simple.

Sekarang klik button start dan ketikkan play_btn pada instance name. Dan klik stop button dan ketikkan stop_btn pada instance name. Jadinya kayak di atas.

sekarang mulai pake actionscript. Sekarang kita main2 dengan audio ya!! Pada layer as klik panel action frame (di-bawah stage). Ketikkan ActionScript berikut:

var lagu:Sound = new Sound(); //mendeklarasikan variabel lagu lagu.loadSound(“axel.mp3″,false); //meload sound
play_btn.onRelease = function(){
lagu.start();
};
stop_btn.onRelease = function() {
lagu.stop();
};

(sekali lagi, saya sangat menganjurkan untuk mengetik manual). Hasilnya akan seperti ini:

Oke, saya akan jelaskan.

var lagu:Sound = new Sound(); // menyatakan bahwa variabel lagu adalah sound

lagu.loadSound(“axel.mp3″,false);

Me-load lagu dengan nama file anya adalah axel.mp3 (kamu juga bisa me-load file dari URL. Contohnya axel.mp3 diganti dengan http://www.domain.com/file/axel.mp3). Nilai false jika file tidak di-load otomatis. Jika nilai false dirubah menjadi true, maka setiap flash dibuka, otomatis me-load file. Kamu bisa juga me-import lagu ke library dulu lalu di-load dalam flash itu. Caranya import, File > Import > Import to Library… setelah itu, klik kanan file tadi di library dan klik Linkage, klik pilihan Export for ActionScript dan isi Identifier-nya dengan nama file (punya saya axel). Lalu, ganti kode diatas dengan

lagu.attachSound(namafile) //punya saya lagu.attachSound(axel)

play_btn.onRelease = function(){
lagu.start();
};

ActionScript diatas berarti bila tombol play_btn (karena tadi instance name-nya adalah play_btn) ditekan (onRelease) maka mulai memainkan lagu kita.

stop_btn.onRelease = function() {
lagu.stop();
};

Kalo yang diatas ini kebalikannya. Kalo tombol stop_btn (instance name-nya stop_btn) ditekan, maka akan menghentikan pemutaran lagu. Sekarang Test Movie (Ctrl+Enter)

Oke, inilah akhir dari tutorial singkat saya. Jika ada pertanyaan, silakan isi komentar ataupun email saya.

Posted in: Animasi dan flash

Membuat Animasi Menulis dengan Flash

Kali ini kita akan membuat sebuah animasi yang sederhana. kita sebagai manusia pasti pernah menulis. Pasti anda telah mengetahui apa yang nanti akan kita buat. Disini kita hanya butuh ketelitian dan kreatifitas dalam setiap membuat animasi. Dengan ilmu sederhana yang saya dapat dari para ahli dan saya salurkan serta kembangkan kepada anda, anda juga harus dapat mengembangkanya menjadi suatu karya animasi yang menarika nantinya.

Kita mulai saja tutorial kali ini, yaitu membuat animasi menulis tulisan. Pasti anda agak bingung dengan animasi menulis tulisan. kita akan memeperagakan tulisan yang ditulis pada kertas kosong hingga kertas tersebut mempunyai sebuah tulisan

Pertama anda buat lembar kerja baru dengan ukuran yang di sesuaikan dengan panjang tulisan yang akan anda tulis. Disini saya akan menuliskan nama saya sebagai contohnya. Berinama layer1 dengan nama text.

Setelah itu buat layer baru dengan nama path. Path ini berfungsi sebagai alur(rel) pensil atau alat tulis kita. Beri nama layer2 dengan nama path.

Buat path menggunakan Pen Tool mengikuti bentuk dari font yang anda gunakan. Contohnya seperti di bawah ini.

Pastikan semua path tidak menyatu atau menggabung. Path boleh bersilangan tetapi tidak boleh menyatu karena animasi tidak akan berjalan nantinya.

Jika semua huruf telah diberi path. Hasilnya akan tampak seperti dibawah ini.

Buat layer baru dengan nama pena untuk membuat penanya. lalu masukan gambar pena atau alat menulis lainya dengan melakukan drag ke layer pena. Bila anda tidak mempunyai pena anda dapat mendownloadnya pada akhir artikel ini.

Panjangkan semua frame layer menjadi 30.

Buat Motion Tween pada layer pena.

Tekan Ctrl + Q. Dan tarik titik pusat pena menjadi di ujung pena. Lalu geser mendekati path. Pastikan titik pusatnya tepat diujung huruf yang kita buat.

Klik kanan pada layer path lalu klik guide untuk membuat guide.

Drag layer pena tepat di bawah layer path.

Pada layer pena di frame 30, geser pena anda ke ujung huruf yang anda buat. Pastikan titik pusatnya tepat diujung path yang kita buat.

Kembali ke layer text pada frame 1. Lalu tekan Ctrl + B 2 kali untuk memecah bagian huruf.

Lalu tekan F6 hingga layer terpecah menjadi beberapa frame hingga frame 30. lalu kunci semua layer kecualu layer text.

Hapus huruf yang ada pada frame satu di layer text. Pada frame2 hapus sisa huruf sesuai alur gerak pena.

Lakukan hingga frame terakhir.

Beri backgroud untuk memberi kesan yang menarik.

Tekan Ctrl + Enter untuk mencoba animasi yang telah kita buat..

Posted in: Animasi dan flash