"Membuat Animasi Berputar (Kipas Angin)"

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

Read More

"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



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 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; };

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

Read More

"Dasar - Dasar Macromedia Flash"

Pernahkah anda melihat gambar animasi atau pernahkah anda melihat kartun yang setiap hari ditayangkan di televisi? salah satu aplikasi pembuat animasi dan kartun tersebut adalah Macromedia Flash...


Sebelum melangkah lebih jauh sebaiknya anda kenali dulu dasar-dasar FLASH


Di bawah ini merupakan window dari Flash MX

Di bawah ini merupakan keterangan dari kegunaan masing-masing komponen Flash MX secara detail:

- Timeline, digunakan untuk mengatur dan mengontrol isi keseluruhan movie Anda.

- Stage, merupakan tempat dimana Anda bekerja dalam membuat sebuah animasi.

- Tools Box, berisi alat-alat yang digunakan untuk menggambar objek pada stage.

- Color Window, merupakan window yang digunakan untuk mengatur warna pada objek yang Anda buat.

- Actions – Frame, merupakan window yang digunakan untuk menuliskan Action Script untuk Flash MX.
Biasanya Action Script digunakan untuk mengendalikan objek yang Anda buat sesuai dengan keinginan Anda.

- Properties, merupakan window yang digunakan untuk mengatur property dari objek yang Anda buat.

- Components, digunakan untuk menambahkan objek untuk web application yang nantinya di publish ke internet.

OK sampai ketemu di tutorial Flash Selanjutnya... "Export Animasi"
Terima kasih
Semoga bermanfaat

Read More

"Animasi Sederhana dengan Motion Tweening"

Halo semua !! Apa kabar bertemu lagi dengan saya miko ^ ^. Nah pada kesempatan kali ini di tutorial flash ini kita akan membahas membuat animasi sederhana menggunakan motion tweening. Langsung saja ya.. Kita buka program Flash dulu

Langkah pertama, yaitu buat 3 layer. Karna kita di sini hanya menggunakan sedikit layer untuk membuat animasi. Agar proses lebih mudah membuat layer lihat gambar di bawah, di sana ada menu di lingkari dengan warna merah .. Nah klik sebanyak 2 kali maka dengan mengeklik 1 kali kita membuat 1 layer klo 2 otomatis 2 layer



Nah selanjutnya, beri nama masing-masing layer seperti yang sudah dicontohkan gambar dibawah ini. Agar memudahkan proses pembuatannya


Kemudian ubah warna backgoundnya menjadi hitam, biasanya di awal-awal kita membuka flash bacgroundnya berwarne putih klo belum di rubah setingannya


Setelah itu klik layer teks dan buat tulisan seperti yang saya contohkan atau sesuka hati kalian .. Pakek punyaku juga boleh…


Setelah itu klik layer bola , dan buat bentuk bola denga warna putih

Pembuatan objeknya sudah selesai kini kita menginjak ke animasinya, buatlah frame sepanjang 90 -> kemudian klik kanan lalu pilih insert frame


Jika sudah semua hasilnya kurang lebih seperti ini


Setelah itu kita buat animasi motion tweening , sebagai objeknya layer bola


Buatlah keyframe , seperti yang saya contohkan >> kemudian klik kanan>>pilih insert keyframe


Setelah langkah di atas selesai, drag layer bola / drag objek bolanya dengan menekan tombol “ v “ di keyboard >>kemudian klik gambar bolanya


Setelah geser bolanya ( jangan menggeser menggunakan mouse pakai saja tanda panah kanan di keyboard agar posisinya tidak berubah )




Klo sudah selesai hasilnya seperti gambar yang di atas

Lanjut ke langkah berikutnya, kita menuju ke layer bola>>klik kanan di dalam  frame / seperti gambar di bawah ini>>kemudian pilih create motion tween


Setelah selesai klik juga frame ke 90 caranya>>klik kanan frame yg sudah kita buat>>pilih create motion tween


Semua juga sama buat semua layer di rubah menjadi motion tweening


Hasilnya: kira2 seperti ini:


Jika semua sudah selesai tinggal kita menekan ctrl+enter  dan nikmati hasilnya
Selamat mencoba Tutorial Flash ini teman..
Semoga berhasil…
Salam hangat miko ilmugrafis
SEMOGA BERMANFAAT

Read More

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

Read More

"Animasi Burung Terbang"

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

Read More