Membuat Jam Dinding

Publish: 3 Agustus 2011 | Author & Copyright: Johan | Status: FREE tutorial

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

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
4. Dengan Line Tool (N) buatlah 3 buah garis untuk penunjuk arah jam
garis jam (pendek) , garis menit (agak panjang) , garis detik (panjang)

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

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

9. Setelah semuanya terpasang, klik frame 1 dan tekan F9. Pada panel actions yang muncul
masukkan script berikut :
Masukkan code script berikut ini:
//perintah yang dijalankan ketika frame dimainkan
onEnterFrame = function () {
//membuat variable w aktu sebagai date object
w aktu = new Date();
//membuat variable jam dengan nilai sama dengan jam
pada komputer
jam = w aktu.getHours();
//membuat variable menit dengan nilai sama dengan menit
pada komputer
menit = w aktu.getMinutes();
//membuat variable detik dengan nilai sama dengan detik
pada komputer
detik = w aktu.getSeconds();

10. Tekan Ctrl+Enter untuk melihat hasilnya.

kira - kira seperti ini:

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 Animasi Berputar (Kipas Angin)

Publish: 02 Oktober 2010 | Author & Copyright: Johan | Status: FREE tutorial

Hai kawan semua, sudah lama kita tak jumpa dalam kategori Tutorial Flash, kali ini kita akan belajar
bagaimana cara membuat animasi berputar pada Flash, Hal ini bisa diterapkan pada semua program
Flash mulai dari macromedia Flash (versi lama) sampai Adobe Flash (versi baru).

Melihat dunia yang semakin panas, kerusuhan di mana-mana, musim yang tidak menentu, dll (wah
ini tutorial apa berita gan?? wkwkwk... intermezo aja) maka di rumah saya selalu memakai kipas
angin untuk mendinginkan suasana. Maklum klo pakai AC listriknya kagak kuat, duitpun tak cukup jd
pakai AC yang lain alias (AC) Angin Cendela.

Tutorial kali ini tak lepas dari Kipas angin, bagaimana kita membuat kipas angin atau animasi
berputar di Flash? ikuti langkah berikut ini :)
1. Siapkan Kipas angin, Lihat arah berputarnya, jangan lama-lama nanti pusing, wkwkwk....
2. Nyalakan komputer dan buka program Flash, Disini saya memakai Adobe Flash CS 4
3. Buat Object 2 buah segitiga + 1 Buah object lingkaran di Lembar kerja flash
Caranya:
Untuk membuat Segitiga gunakan PolyStar Tool pada toolbar , Untuk Pengaturan gunakan Style:
Polygon, Number Of Side: 3
Untuk membuat Lingkaran gunakan Oval Tool dan tekan dan tahan tombol shift agar lingkaran bulat
sempurna

Petunjuk Gambar IG

4. Atur gambar sehingga membentuk Sebuah baling baling kipas dan seleksi semuanya lalu tekan
CTRL + G (Group) untuk menggabungkan 3 object tersebut menjadi 1 kesatuan

Petunjuk Gambar IG
5. Sekarang waktunya membuat Frame pada Layer 1 klik Frame 50 dan pilih insert Frame

Petunjuk Gambar IG

6. Masih di Frame 50, klik kanan lagi dan sekarang pilih Create Classic Tween

7. Pada Properties, atur Tweening , pilih Rotate: CW (Searah jarum jam)

Petunjuk Gambar IG

Setelah selesai, tekan F6 di frame 50 untuk memunculkan keyframe

Selesai

untuk melihat hasilnya tekan CTRL + Enter

Kira kira seperti ini:
Untuk membuatnya lebih menarik tambahkan lingkaran kipas dan penyangga:

Yuhuuu seger benerrrr ilmuGrafis, kipas angin dari samping dan dari depan monitor
Terima kasih, Selamat belajar
Semoga Bermanfaat

Animasi Burung Terbang

Publish: 17 April 2010 | Author & Copyright: Miko | Status: FREE tutorial

Dalam Tutorial kali ini akan membahas bagaimana membuat animasi sederhana dengan
mode Frame by frame yaitu animasi dengan membuat gambar perframe beda halnya dengan
Motion Tweening teknik frame by frame memerlukan waktu yang cukup banyak karma
dalam setiap frame kita harus membuat gambar yang tidak sama, pada tutorial kali ini objek
yang akan kita gunakan yaitu sebuah ilustrasi burung dan aplikasi yang digunakan yaitu
Macromedia Flash MX Professional 2004

Langkah pertama yaitu buatlah gambar ilustrasi burung sebanyak 3 kali dengan
menggunakan Toolbox Brush Tool

Untuk membuatnya perhatikan gambar dibawah ini

Buatlah ilustrasi gambar burung dengan brush tool bisa juga menggunakan Pen Tool

Sebelum menginjak langkah selanjutnya copy gambar yang sudah dibuat tadi, tujuannya yaitu
agar kita tidak usah repot-repot membuat badan burung lagi jadi pada akhirnya  kita tinggal
paste gambar setelah itu nanti hanya menambah bentuk sayap yang berbeda saja

buatlah sayap pada bagian atas , pada bagian ini kita sedang membuat gambar 1
Masuk ke pembuatan gambar kedua buatlah bentuk sayap di bawah

Untuk gambar yang terakhir buatlah sayap diatas punggung burung tetapi agak rendah
sedikit, jika sudah selesai tinggal pewarnaan pada gambar
burung

langkah selanjutnya yaitu pembuatan animasinya pada gambar 1 letakkan dikeyframe

pertama , atur posisi gambar sesuai keinginan anda asal semua gambar harus di 1 posisi yang
sama semua

buatlah Keyframe dengan cara klik kanan frame kedua >> pilih Insert Keyframe, setelah itu
masukan Gambar 2  

buatlah Keyframe dan masukan gambar 3 keposisi yang sudah kita tentukan tadi

 
langkah selanjutnya blok semua Frame yang telah kita buat >> klik kanan dan pilih Copy
Frame. Kemudian Paste ke frame selanjutnya

Hasilnya bisa dilihat dengan cara pilih Menu Control >> pilih Play atau Ctrl+Enter

Hasilnya:

Animasi Burung Terbang :)

salam kreatif by MIKO IG

Selamat Belajar Flash, SEMOGA BERMANFAAT

Membuat Taman MATAHARI

Publish: 4 Desember 2009 | Author & Copyright: Muhammad Ichwan | Status: FREE tutorial
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 Tutorial Flash

Semoga berhasil…
SEMOGA BERMANFAAT
Membuat Animasi Ombak
Publish: 30 November 2009 | Author & Copyright: Muhammad Ichwan | Status: FREE tutorial

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 dan warna stroke dijadikan none

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

4. Klik kanan di frame 15 lalu  klik insert keyframe, Ubah gambar airnya dengan cara tarik ke atas

menggunakan selection tool yang sebelah kiri

Gambarnya :
7. Klik di frame 1  lalu pilih tween shape

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

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:
Selamat mencoba...(@_@)

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

animasi ombak

Selamat mencoba Tutorial Flash

Semoga berhasil…
SEMOGA BERMANFAAT