Macromedia


Membuat Jam Dinding


Tik tok tik tok, sambil menunggu waktu berbuka puasa lebih baik kita belajar animasi dengan Flash. Pada Tutorial Flash kali ini kita akan mencoba membuat jam dinding sederhana. Penasaran cara membuatnya? mari kita belajar bersama di IlmuGrafis

Langkah - langkahnya sbb:
1. Buka Program Flash
Start >> All Program >> Flash , pilih flash dokumen
disini penulis menggunakan Flash MX 2004 namun tutorial ini bisa diterapkan di Adobe Flash versi berapapun termasuk Flash CS5


2. Buat lingkaran Gunakan oval tool (shortcut tombol: O), tips: tekan dan tahan tombol shift pada keyboard agar lingkaran bulat sempurna
image ilmugrafis


3. Ubah warna fill jadi hitam, Gunakan text tool (Short cut tombol : T) dan tulis 1 per 1 nomor jam mulai dari 1 - 12 untuk penomoran angka
gunakan Selection tool untuk meletakkan nomor - nomor tersebut pada bagian jam
image ilmugrafis


4. Dengan Line Tool (N) buatlah 3 buah garis untuk penunjuk arah jam
garis jam (pendek) , garis menit (agak panjang) , garis detik (panjang)
image ilmugrafis
5. Seleksi garis yang paling pendek dengan selection tool (V) dan tekan F8
muncul jendela dan masukkan jam_mc dan pilih movie clip sebagai type serta pastikan titik registrationnya berada di tengah bagian bawah lalu tekan ok.
image ilmugrafis
Seleksi movie clip jam_mc di Lembar kerja kemudian tekan Ctrl+F3 untuk memunculkan panel properties. Pada panel properties yang muncul masukkan jam_mc sebagai instance name.
image ilmugrafis

6. Sama seperti di atas
Seleksi garis kedua (agak panjang), kemudian tekan F8. Pada panel yang muncul masukkan menit_mc dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah bagian bawah lalu tekan ok.
Seleksi movie clip menit_mc. Pada panel properties yang muncul masukkan menit_mc sebagai instance name.

7. Sama seperti di atas
Seleksi garis ketiga (paling panjang), kemudian tekan F8. Pada panel yang muncul masukkan detik_mc dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah bagian bawah lalu tekan ok.
Seleksi movie clip detik_mc. Pada panel properties yang muncul masukkan detik_mc sebagai instance name.

8. Satukan dan letakkan garis dengan urutan jam lalu menit kemudian detik dan letakkan di dalam tempat jam
image ilmugrafis

9. Setelah semuanya terpasang, klik frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script berikut :
image ilmugrafis

Masukkan code script berikut ini:


10. Tekan Ctrl+Enter untuk melihat hasilnya.
kira - kira seperti ini:
image ilmugrafis
Animasinya bisa diexport dalam bentuk flash movie dengan cara klik File >> Export movie, beri nama dan pilih format swf
seperti ini:

Tutorial Jam Dinding ini
Tutorial ini saya buat sederhana namun bertujuan agar mudah dipraktikkan oleh pemula yang baru belajar flash. Anda dapat mengembangkannya dengan memperbaiki bagian grafisnya sehingga nantinya jam akan terlihat lebih bagus lagi. sampai jumpa di Tutorial menarik lainnya: baca juga Memasukkan Animasi Flash Ke Website

Download file mentahnya disini

Terima kasih, Selamat belajar
Semoga Bermanfaat






Membuat Gradien di Adobe Flash


Pada Tutorial kali ini kita akan mempelajari cara membuat gradien di Flash, membuat gradien di flash agak sedikit berbeda dengan gradien di photoshop karena di flash kita bukan memakai fill tapi cenderung memakai pengaturan color (Shift + Alt + F9)

Ok, mari kita praktekkan dengan Tutorial:

1. Buka Program Adobe Flash, Disini Bisa menggunakan Adobe Flash CS3,CS4,CS5
2. Pada Lembar kerja buatlah gambar terserah tapi disini saya akan mencontohkan dengan menggambar kotak, pada pengaturan sudut (Rectangle Option) gunakan angka 15
tutorial flash

Gunakan Free Transform Tool (Q) untuk mengatur besar kecilnya kotak yang anda buat

3. Seperti penjelasan saya di awal, kita tidak bisa merubah fill karena fill hanya terdiri dari 1 Warna, untuk itu kita harus masuk ke pengaturan color dengan Window - color (Shift + Alt + F9) nanti akan muncul Color Setting seperti ini
tutorial flash
Pilih Linear Gradien atau Radial Gradien, namun disini saya mencontohkan dengan linear gradien , Anda bisa memilih Flow: Extend Color
tutorial flash
Untuk pengaturan Warna yang diinginkan bisa klik kedua panel di bawah yang ada tanda 2 panah caranya klik kotak tersebut dan pilih warna yang anda inginkan
Contohnya:
Kombinasi hitam dan biru
tutorial flash

4. Ok sekarang pasti anda bertanya-tanya.... bagaimana cara mengubah posisi gradien agar tidak kaku seperti gambar di atas, ahaaa.... caranya gunakan Gradient Transform Tool (F)
tutorial flash
tutorial flash
Anda bisa mengatur bentuk gradien yang anda inginkan
tutorial flash
dan juga memberikan hiasan text

Hasilnya kira-kira seperti ini
tutorial flash
Gradien di Flash

Selamat Belajar Flash, SEMOGA BERMANFAAT
 



Animasi Shine - Mobil Mengkilap Bercahaya

Flash merupakan program untuk membuat animasi yang handal, Tutorial Flash kali ini adalah membuat efek animasi shine dan membuat mobil mengkilap bercahaya...

Para Pembaca yang budiman, belum punya mobil yang mengkilap tapi ingin membuat mobil anda jadi mengkilap tanpa biaya nah cuma di ilmugrafis kumpulan tutorial flash dengan tema mobil mengkilap bercahaya.

Langkah - Langkahnya:

1. Masukkan (import) gambar ke dalam stage
import gambar

misalnya gambar mobil seperti gambar di bawah ini
gambar mobil


2. Setelah gambar berada pada stage, atur besarnya stage sesuai dengan ukuran gambar yang telah di import tadi misalnya 500 px (width) dan 315 px (height)
setting


3. Ganti nama  layer1 menjadi mobil
layer 1 setting

4. Tambahkan satu layer baru, kemudian ganti layer tersebut dengan nama efek.
efek

5. Klik icon rectangle tool ( tekan huruf R di keyboard ), kemudian gambar persegi panjang melebihi gambar mobil, seperti gambar di bawah ini.
mobil


6. Klik gambar persegi panjang yang telah dibuat tadi, kemudian ubah warna persegi panjang seperti gambar di bawah ini
setting

7. Kemudian untuk mendapatkan efek cahaya yang mengkilap, lakukan pengaturan warna persegi panjang seperti gambar di bawah ini
setting 3

8. Efek mengkilap telah selesai dibuat, kemudian langkah selanjutnya, tambahkan satu layer lagi, kemudian ganti nama layer tersebut dengan animasi
setting


9. Masih di layer animasi kill icon Pen tool
tool flash

10. Kemudian buatlah bagian yang akan dianimasikan misalnya seperti gambar di bawah ini.



11. Setelah area yang dianimasikan selesai dibuat, maka langkah selanjutnya yaitu klik kanan pada layer animasi pilih menu mask




12. Klik frame 30 pada setiap layer, kemudian tekan F6 untuk memberikan insert keyframe



13. Klik kanan antara frame 1 – 30 pada layer efek, kemudian pilih menu create motion tween





14. Klik frame 30 pada layer efek, kemudian pindahkan gambar persegi panjang ke sebelah kanan dari gambar mobil, seperti gambar di bawah ini


15. Tekan ctrl + enter untuk melihat hasilnya…
Preview in image mode


Preview in Animation Mode

Cling.. Cling.. Mobil Bersinar Mengkilap ^_^
Source File: mobil bersinar *.fla
Enjoy it………… OK sampai ketemu di tutorial Flash Selanjutnya...
SEMOGA BERMANFAAT







Membuat Animasi Ombak


Tutorial kali ini adalah Tutorial Membuat ombak di flash, disini saya menggunakan Macromedia Flash 8...

1. Buka program flash 8
Ubah ukuran stage menjadi 768 x 576 pixels.
Ganti warna bacground menjadi warna hitam


2. Ganti warna fill color menjadi #336699 tutorial flash dan warna stroke dijadikan none tutorial flash

3. Klik rectangle tool tutorial flash  untuk membuat airnya dengan mendragnya ke stage seperti gambar dibawah ini.
tutorial flash


4. Klik kanan di frame 15 lalu  klik insert keyframe, Ubah gambar airnya dengan cara tarik ke atas menggunakan selection tool yang sebelah kiri tutorial flash
Gambarnya :
tutorial flash


7. Klik di frame 1  lalu pilih tween shape
tutorial flash
gambarnya
tutorial flash

Di frame 35 klik kanan insert keyframe, Ubah gambarnya seperti ini>>
tutorial flash


8. Klik Di frame 15 pilih tween shape


9. Lalu copy frame 1
caranya : klik kanan pada frame 1 dan pilih Copy Frames
kemudian Pastekan di frame 60


10. Klik Di frame 35 pilih tween shape
Seperti gambar dibawah ini:
tutorial flash
Selamat mencoba...(@_@)

Jika semua sudah selesai tinggal kita menekan ctrl + enter  dan nikmati hasilnya

animasi ombak

Selamat mencoba Tutorial Flash
Semoga berhasil…
SEMOGA BERMANFAAT







 

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  tutorial flash ,untuk membuat rumput hijau dengan mendragnya ke stage seperti gambar dibawah ini.
tutorial flash


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:
tutorial flash


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:
tutorial flash


6. langkah terakhir, klik frame 1 di layer matahari ganti warna fill color menjadi #FFFF00 tutorial flash dan stroke dijadikan none tutorial flash 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:
tutorial flash


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


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:
tutorial flash


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


10. agar matahari terlihat dibelakang pindahkan layer matahari di paling bawah….
untuk membuat rumputnya gunakan line tool buat seperti gambar
tutorial flash
Selamat Mencoba>>>>@_@
Untuk melihat hasilnya tekan Ctrl + enter
hasilnya:

Taman Matahari ilmuGRAFIS

Selamat mencoba Tutorial Flash
Semoga berhasil…
SEMOGA BERMANFAAT