Senin, 05 Desember 2011

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

Tutorial Flash Animasi
Sebelum melangkah lebih jauh sebaiknya anda kenali dulu dasar-dasar FLASH

Di bawah ini merupakan window dari Flash MX
layout flash
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

Share URL Share the URL of this Tutorial in IM, Email or post in forums

* Klik Link, copy (ctrl + c) dan paste (ctrl + v)


Sumber: Ilmu grafis

Membuat Animasi Sederhana dengan Permainan Keyframe

Flash merupakan Software animasi yang hebat, kali ini saya akan mencoba membuat tutorial yang sederhana yaitu membuat animasi sederhana dengan permainan keyframe...

Ini berawal dari keisengan saya mengutak atik software ini, ya namanya juga baru belajar jadi maaf bila ada yang kurang jelas disini, hehehe...

Ok, mari kita coba mulai saja...

Langkah 1
Buka Program Flash MX kamu

Lalu pilih new... Flash Document

Langkah 2
Menentukan besarnya STAGE (coba pelajari dulu layout Flash agar lebih paham)
Tutorial Flash Animasi
Caranya:
1. Klik Size pada Properties
2. Akan Muncul Document Properties
Atur dimensions:
disini saya menggunakan 300 x 200 px
3. Tekan OK

Langkah 3
Tutorial Flash Animasi
1. Tekan R pada keyboad lalu gambar kotak di Stage
2. Lakukan pewarnaan dengan menekan V pada keyboard dan klik kotak lalu pilih Fill yang ada tanda nomor 2 di gambar
3. Pilih warna disini saya menggunakan warna biru dongker dengan nilai hexadecimal #000066

Langkah 4
Tekan T pada keyboard untuk menggunakan Text Tool lalu ketik terserah namun disini saya mengeti huruf "F"
Tutorial Flash Animasi

Langkah 5
Lihat Kotak Timeline
Di situ kita akan bermain... ;P
Baiklah sekarang tekan F5 pada keyboard... hasilnya frame akan bertambah
hal ini untuk mengatur ritme dari animasi

OK tekan sebanyak 5 X
Hasilnya:
Tutorial Flash Animasi


lalu Tekan F6 pada keyboard... hasilnya key Frame (untuk animasi) akan muncul
jika sudah tambahkan huruf pada stage
Tutorial Flash Animasi

Ulangi Langkah 5 dan 6 (Terus tambahkan huruf sehingga membentuk tulisan FLASH
Tutorial Flash Animasi
tutorial Flash
OK!!!

Untuk melihat hasilnya... berdoa dulu ya... Tekan CTRL + Enter
Hasilnya:
Tutorial Flash Animasi
Flash animasi,,, Siapa takut!!!

Jika ada saran maupun kritik... kontak penulis Johan - ilmugrafis
"Dare to Dream, Sometime A Dreamer Can Create A Future"
Source File: Download Source File - *.FLA
OK sampai ketemu di tutorial Flash Selanjutnya...



Share URL Share the URL of this Tutorial in IM, Email or post in forums

* Klik Link, copy (ctrl + c) dan paste (ctrl + v)



Sumber: Ilmu Grafis

Memasukkan dan Menyesuaikan Gambar dengan Stage

Bagi yang masih awam tentang Flash saya akan berbagi tips, Seringkali kita menemui kendala dalam menyesuaikan ukuran gambar dengan ukuran Stage...

Namun sebelum itu masukkan dulu gambar ke dalam Stage dengan menggukanan
File > Import > Import To Stage...
Atau tekan CRTL + R > Pilih Gambar > OK

Apa kendala yang muncul???
Kendala - kendala itu adalah:

Ukuran gambar lebih besar daripada ukuran Stage, atau ukuran Stage yang Lebih besar daripada ukuran gambar...

Contoh Kasus:
ukuran Stage yang Lebih besar daripada ukuran gambar

(Ket: Kanvas Putih adalah Stage)

Contoh Kasus:
Ukuran gambar lebih besar daripada ukuran Stage

(Ket: Kanvas Putih adalah Stage)

Apa yang harus kita lakukan????
Tenang... Caranya sangat mudah...
Langkah Convensionalnya adalah dengan Menggunakan Free Transform Tool (Q) dan Selection Tool namun cara ini kurang efektif...

Cara yang paling efektif dan efisien adalah dengan menggunakan pengaturan Properties
Klik Properties


Kemudian Klik Gambar pada Stage agar muncul pengaturan seperti ini:

Ini dia rahasianya... W dan H
W= Weight=Lebar
H=Height=Panjang
X=Menunjukkan Selisih Gambar dengan Stage secara Horisontal / Sumbu X
Y=Menunjukkan Selisih Gambar dengan Stage secara Vertikal / Sumbu Y

Misal:
Jika kita mempunyai ukuran Stage 400 x 300 px
Maka agar sesuai dengan Stage nilai W dan H harus diubah mengikuti ukuran Stage
W= 400
X= 300
dan agar posisinya sejajar dengan Stage maka X dan Y harus diubah ke 0
X= 0
Y=0

Nah Dengan Pengaturan Tersebut maka Stage = Gambar

Ok LEts Practice With Auron - Final Fantasy X
Nantikan Tips dan Trik berikutnya... Hanya di ilmugrafis.com

Jika ada saran maupun kritik... kontak penulis Johan - ilmugrafis
"Dare to Dream, Sometime A Dreamer Can Create A Future"

OK sampai ketemu di tutorial Flash Selanjutnya...



Share URL Share the URL of this Tutorial in IM, Email or post in forums

* Klik Link, copy (ctrl + c) dan paste (ctrl + v)



Sumber: Ilmu grafis

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

Share URL Share the URL of this Tutorial in IM, Email or post in forums

* Klik Link, copy (ctrl + c) dan paste (ctrl + v)

sumber: ilmu grafis

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

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

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

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

Setelah itu klik layer bola , dan buat bentuk bola denga warna putih
tutorial flash
Pembuatan objeknya sudah selesai kini kita menginjak ke animasinya, buatlah frame sepanjang 90 -> kemudian klik kanan lalu pilih insert frame
tutorial flash

Jika sudah semua hasilnya kurang lebih seperti ini
tutorial flash

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

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

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

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

tutorial flash

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

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

Semua juga sama buat semua layer di rubah menjadi motion tweening
tutorial flash

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

Share URL Share the URL of this Tutorial in IM, Email or post in forums

* Klik Link, copy (ctrl + c) dan paste (ctrl + v)

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

Share URL Share the URL of this Tutorial in IM, Email or post in forums

* Klik Link, copy (ctrl + c) dan paste (ctrl + v)