..:: Selamat Datang Di Aan Samudra Blog - Memberikan Berbagai Tutorial dan Artikel Menarik Lainnya ::..
Showing posts with label Tutorial Flash. Show all posts
Showing posts with label Tutorial Flash. Show all posts

Thursday, December 30, 2010

Mengontrol Movie Clip

MODUL 6
MENGONTROL MOVIE CLIP

Dari Hasil animasi yang kita buat, penting sekali bagi kita untuk dapat mengontrol animasi movie clip yang telah kita buat agar dapat dijalankan dengan baik. Mengontrol movie clip disini artinya kita disuruh membuat beberapa tombol-tombol perintah seperti tombol play dan tombol stop. Tombol Play digunakan untuk menjalankan movie dan tombol stop digunakan untuk memberhentikan movie clip. Bagaimana Caranya? Untuk uraian selanjutnya, mari kita ikuti bahasan berikut ini:

1. Membuat Tombol Dengan Event Klik pada Mouse
a. Buka sebuah dokumen baru Animasi Flash dengan ketentuan:
- Width : 15 cm dan Height: 8 cm
- Warna Background : Biru
- Frame Rate : 20
(Pengaturan dokumen sudah kita bahas sebelumnya pada matari sebelummnya, kalo Anda masih lupa cara mengatur dokumennya, Klik disini
b. Buat 3 buah layer dengan cara Klik Tombol Insert Layer, sehingga hasilnya sebagai berikut:



c. Untuk mengganti nama layernya, Double Klik Tulisan Layer 1 misalnya, ganti masing-masing namanya :
Layer 1 = Background
Layer 2 = Bola
Layer 3 = Tombol



d. Kemudian Klik Kanan pada Frame ke-30 pada Layer Background
e. Kemudian Pilih Insert Frame
f. Kemudian Klik Frame Pertama pada Layer Bola (Untuk menggambar objek bola)
g. Ambil Oval Tool (O), kemudian gambarkan pada stage pada sebelah kiri



h. Kemudian Klik Kanan Frame Pertama pada layar bola tadi, pilih Create Mottion Tween

i. Kemudian Klik Kanan Pada Frame Ke 30 pada Layer Bola, Pilih Insert Keyframe



j. Pindahkan Objek Bola menggunakan selection tool dari sebelah kiri ke sebelah kanan.



k. Selanjutnya, Klik Frame Pertama layer tombol
l. Untuk membuat tombol, ikuti langkah sebagai berikut:
1) Klik menu Window – Pilih Common Libraries – Pilih Buttons



2) Kemudian Akan muncul jendela libraries untuk tombol



3) Kemudian Cari Folder Playback Rounded
4) Klik Kanan Folder tersebut, pilih Expand Folder untuk membuka folder tersebut



5) Kemudian cari button rounded green play dan rounded green stop.
6) Klik dan tahan serta geser ke area stage button rounded green play (Untuk membuat tombol play)



7) Sehingga hasilnya seperti gambar diatas yaitu terdapat dua tombol play dan tombol stop
8) Untuk mengetikkan kode program pada tombol play, klik kanan pada tombol play pilih action
Atau klik tombol play, kemudian tekan F9 pada keyboard, sehingga muncul jendela editor Action. Ketikkan kode program seperti gambar dibawah ini.



9) Untuk menghilangkan jendela Action tadi, tekan F9 lagi.
10) Kemudian untuk mengetikkan kode program pada tombol stop langkahnya sama dengan tombol play. Ketikkan kode program seperti gambar dibawah ini.



m. Kemudian Klik kanan pada frame ke 30 pada layer tombol
n. Pilih insert frame (agar tombol yang dibuat bisa mengikuti pada saat dijalankan)
o. Tekan Ctrl + Enter untuk melihat hasilnya.


2. Membuat Tombol Dengan Event Enter
Sebenarnya cara dan langkah untuk membuat tombol sama dengan diatas, hanya yang berbeda pada kode programnya. Untuk membuat kode program menggunakan event enter Anda cukup mengubah tulisan :

on(release)

menjadi:

on(keypress "<enter>")

lihat hasilnya:

READ MORE - Mengontrol Movie Clip

Tuesday, December 28, 2010

Mengubah Warna Objek

MODUL 5
MEMFORMAT OBJEK

Penting bagi ita untuk mengubah atau memformat objek atau desain yang kita buat dengan tujuan agar kelihatan lebih menarik. Format warna objek disini meliputi pemformatan warna background maupun objek yang telah didesain pada stage berupa objek lingkaran, objek teks, objek persegi, maupun objek lainnya.

Untuk uraian selanjutnya, mari kita ikuti bahasan berikut ini:
1. Memformat Dokument Kerja (stage)
Langkah yang dapat dilakukan adalah sebagai berikut:
a. Terlebih dahulu, anda siapkan satu dokumen flash
b. Kemudian klik Menu Modify, pilih Document



c. Kemudian akan muncul jendela document sebagai berikut:



- Title : untuk memberi judul
- Description : untuk memberikan kolom keterangan
- Dimensions : untuk memberikan ukuran stage yang akan kita buat
- Background color : untuk memberikan warna background pada stage
- Frame rate : untuk mengontrol kecepatan/ kelambatan objek
- Ruler units: satuan ukuran stage
d. Sekarang ketikkan Dimensions : 270 px x 200 px
e. Tentukan warna background warna Hitam
f. Tentukan Frame ratenya 30
g. Kemudian Klik Ok
2. Memformat Objek Lingkaran
a. Gambarkan sebuah lingkaran pada dokumen dengan menggunakan objek oval tool, sehingga hasilnya seperti ini:



b. Untuk mengubah warna objek bola, lakukan langkah sbb:
- Klik Paint Bucket Tool
- Tentukan warna yang Anda inginkan pada Fill Color, misalnya biru
- Klikkan Paint Bucket Tool tadi pada area lingkaran, sehingga akan berubah seperti berikut:



3. Memformat Objek Tulisan (Text)
a. Klik Text Tool
b. Gambarkan pada stage
c. Kemudian Ketikkan : AL ANSORI, sehingga hasilnya seperti ini:



d. Kemudian Klik Selection Tool
e. Kemudian Klik Menu Text :
- Pilih Font: untuk mengganti jenis huruf
- Pilih Size: untuk mengganti ukuran huruf
- Pilih Style: untuk menjadikan teks tebal, miring dsb
f. Hasilnya:



g. Supaya tulisannya dapat menyesuaikan dengan panjangnya, klik kotak-kotak kecil yang ada pada sudut tulisan
h. Tarik perlahan kearah sebelah kanan, sehingga hasilnya:



i. Untuk mengganti warna, klik Fill Color, tentukan pilihan warnanya, misal merah

READ MORE - Mengubah Warna Objek

Friday, December 24, 2010

Animasi Mottion Path

MODUL 4
ANIMASI MOTION PATH
Animasi ini merupakan dasar dari animasi game balapan mobil atau motor, yaitu bahwa mobil/motor bergerak mengikuti jalur/track yang sudah ditentukan. Hati-hati dalam membuat animasi ini, karena langkah tidak sesuai prosedur, maka animasi tidak akan berhasil.
Adapun Langkah-langkahnya sebagai berikut:
1.    Buat objek persegi menggunakan rectangle tool dan convert object to symbol (F8), pilih Movie Clip

2.    Klik kanan pada layer 1, pilih Add Motion Guide

3.    Buat jalur bebas menggunakan Pencil Tool di layer guide

4.    Gunakan Selection Tool, klik frame 30, dan insert keyframe di layer guide

5.    Pilih kembali layer 1, Klik kanan frame 1, Pilih Create Mottion Tween
6.    Pindahkan objek ke pangkal jalur, posisikan objek dengan tepat, sehingga terlihat lingkaran kecil di tengah-tengah objek persegi

menjadi:

7.    Klik Kanan frame 30 pada layer 1, lalu Insert Keyframe
8.    Pindahkan objek dari pangkal ke ujung sesuai jalur yang dibuat, hati-hati pada langkah ini !
9.    Tekan Ctrl + Enter.

Hasilnya sebagai berikut:


READ MORE - Animasi Mottion Path

Animasi Mottion Shape

MODUL 3
ANIMASI MOTION SHAPE
Animasi bentuk/shape dibedakan menjadi 2 bagian yaitu:
1.     Animasi bentuk dengan objek statis/diam di tempat
2.     Animasi bentuk dengan objek dinamis/bergerak (ada motion-nya)
    Yang perlu diperhatikan ketika Anda akan membuat animasi bentuk baik yang statis ataupun dinamis adalah bahwa objek tidak perlu di Convert to Symbol.
1.     Animasi Bentuk Statis
    Adapun Langkah-langkahnya sebagai berikut:
    a.    Buat objek lingkaran dengan Oval Tool
    b.    Klik frame 1, kemudian tekan Ctrl+F untuk memuculkan jendela properties
    c.    Pada Tween pilih : shape yang ada di bawah stage.

    d.    Klik Kanan Frame 30, kemudian Pilih Insert Keyframe.

    e.    Pindahkan objek lingkaran tersebut dengan selection tool
    f.    Ubah bentuk lingkaran menjadi bentuk bukan lingkaran, menggunakan alat subselection tool.
Dari



Menjadi:



        Dengan mengklik titik-titik pada objeknya
    e.    Tekan Enter untuk Play atau Ctrl + Enter untuk Test Movie.

Hasilnya sebagai berikut:



2.     Animasi Bentuk Dinamis
    Jenis animasi ini merupakan pengembangan dari animasi bentuk statis. Pada jenis animasi ini akan diberikan contoh objek kotak berubah menjadi teks kotak.
    Adapun Langkah-langkahnya adalah:
    a.    Buat bentuk objek bentuk kotak di frame 1 menggunakan rectangle tool.



    b.    Klik  frame 1, Tekan Ctrl+F3, Pada Tween pilih :shape



    c.    Klik Kanan frame 40, pilih Insert keyframe.



    d.    Pindahkan objek kotak dari frame 1 ke frame 40 setelah itu hapus objek dengan Delete.
    e.    Masih di frame 40, buat teks KOTAK, atur Ukuran Size Teks dengan klik Menu Text pilih Size: 48
    f.    Lalu tekan Ctrl + B (2x), agar teks terkonversi menjadi objek.



    g.    Tekan Ctrl+Enter.



hasilnya sebagai berikut:

READ MORE - Animasi Mottion Shape

Animasi Dasar Tween Mottion

MODUL 2
ANIMASI DASAR TWEEN MOTION

Animasi ini merupakan animasi yang paling dasar karena animasi ini pada prinsipnya adalah pergerakan suatu objek (motion), seperti halnya definisi animasi yaitu teks/gambar yang bergerak.
Untuk membuat animasi dengan menggunakan Tween Motion, Anda dapat mengikuti langkah-langkah sebagai berikut:
1.    Buka area kerja Flash 8 pro, kemudian atur area kerja (stage) sesuai dengan keinginan
2.    Ambil objek Oval Tool (O) kemudian gambarkan pada stage
 

3.    Kemudian Tekan Ctrl+F8
 

4.    Kemudian Klik Scane 1 yang ada di pojok kiri atas
 

5.    Kemudian Ambil Selection Tool
6.    Klik Objek Bola
7.    Pada Layer 1, Klik Kanan Frame 1, pilih Crate Mottion Tween

 
8.    Kemudian klik kanan pada Frame tertentu, misal Frame ke 20, Pilih Insert Key Frame


 
9.    Kemudian Pindahkan Objek Bola menggunakan Selection Tool ketempat sesuai keinginan Anda.

 
10.    Jalankan dengan menekan Ctrl+Enter

Hasilnya sebagai berikut:
READ MORE - Animasi Dasar Tween Mottion

Mengenal Area Kerja Flash 8 Pro

MODUL 1
AREA KERJA MACROMEDIA FLASH PRO 8

Pada bab pertama ini kita akan melihat secara sekilas area kerja Macromedia Flash Pro 8 yang akan digunakan dalam pembuatan animasi pada bab-bab berikutnya. Semakin Anda dapat mengenal dan menghafal bagian-bagian dalam area kerja Macromedia Flash Pro 8, maka Anda akan semakin mudah dalam mempraktikkan tutorial yang disajikan dalam blog ini.
Jika Anda baru belajar pertama kali, maka Anda dianjurkan untuk mengetahui komponen-komponen utama dalam area kerja Macromedia Flash Pro 8 yang dibahas pada bab ini. Tidak semua komponen dalam Macromedia Flash Pro 8 dibahas pada bab ini. Beberapa penjelasan mengenai komponenkomponen dalam area kerja akan dibahas pada tutorial atau langkah-langkah pada tutorial yang terkait. Meskipun buku ini menggunakan program Macromedia Flash Pro 8, namun Anda juga dapat menggunakan versi yang lain. Jika Anda menggunakan versi yang berbeda dengan yang digunakan tutorial ini, maka Anda harus dapat menyesuaikan dengan komponen-komponen yang tersedia.

Bagian-bagian penting dalam area kerja di atas diantaranya: Menu, Toolbox, Timeline, Stage dan Panel.
A. Menu
Menu pada Macromedia Flash Pro 8 terdiri dari: File, Edit, View, Insert, Modify, Text Commands, Control, Window dan Help. Anda dapat melihat submenu yang terdapat pada masing-masing menu dengan mengeklik satu kali pada menu yang ingin Anda pilih.

Berikut ini adalah jendela tampilan awal Macromedia Flash 8 Profesional:
B. Toolbox
Dalam toolbox terdapat komponen-komponen penting diantaranya: Tools, View, Colors dan Options. Toolbox memiliki peran untuk memanipulasi atau memodifikasi objek dalam stage. Berikut komponen-komponen dalam toolbox beserta fungsi atau kegunaannya:
1. --> Selection Tool (V)
Memilih dan memindahkan objek
2. -->Subselection Tool (A)
Mengubah bentuk objek dengan edit points
3. -->Free Transform Tool (Q)
Mengubah atau memutar bentuk objek sesuai keinginan
4. -->Gradient Transform Tool (F)
Mengubah warna gradasi
5. -->Line Tool (N)
Membuat garis
6. -->Lasso Tool (L)
Menyeleksi bagian objek yang akan diedit
7. -->Pen Tool (P)
Membuat bentuk objek secara bebas berupa dengan titik-titik sebagai penghubung
8. -->Text Tool (T)
Membuat teks (kata atau kalimat)
9. -->Oval Tool (O)
Membuat objek elips atau lingkaran
10. -->Ractangle Tool (R)
Membuat objek berbentuk segi empat atau segi banyak
11. -->Pencil Tool (Y)
Menggambar objek secara bebas
12. -->Brush Tool (B)
Menggambar objek secara bebas dengan ukuran ketebalan dan bentuk yang sudah disediakan
13. -->Ink Bottle Tool (S)
Memberi warna garis tepi (outline)
14. -->Paint Bucket Tool (K)
Memberi warna pada objek secara bebas
15. -->Eyedropper Tool (I)
Mengambil contoh warna
16. -->Eraser Tool (E)
Menghapus objek
17. -->Hand Tool (H)
Menggeser stage
18. -->Zoom Tool (M atau Z)
Memperbesar atau memperkecil objek
19. -->Stroke Color
Memberi warna pada garis tepi
20. -->Fill Color
Memberi warna pada pada objek
C. Timeline
Timeline atau garis waktu merupakan komponen yang digunakan untuk mengatur atau mengontrol jalannya animasi. Timeline terdiri dari beberapa layer. Layer digunakan untuk menempatkan satu atau beberapa objek dalam stage agar dapat diolah dengan objek lain. Setiap layer terdiri dari frame-frame yang digunakan untuk mengatur kecepatan animasi. Semakin panjang frame dalam layer, maka semakin lama animasi akan berjalan.

D. Stage
Stage disebut juga layar atau panggung. Stage digunakan untuk memainkan objek-objek yang akan diberi animasi. Dalam stage kita dapat membuat gambar, teks, memberi warna dan lain-lain.

E. Panel
Beberapa panel penting dalam Macromedia Flash Pro 8 diantaranya panel: Properties & Filters & Parameters, Actions, Library, Color dan Align & Info & Transform.
1. Panel Properties & Filters & Parameters
Panel ini terdapat di bawah stage. Untuk mengeluarkan atau menyembunyikan panel ini dapat digunakan shortcut Ctrl+F3. Panel Properties & Filters & Parameters digunakan untuk untuk mengatur ukuran background, warna background, kecepatan animasi dan lain-lain.

2. Panel Actions
Panel Actions digunakan untuk menuliskan script atau bahasa pemrograman flash (ActionScript). Anda dapat mengetikkan secara langsung pada layar Actions atau menggunakan bantuan yang disediakan oleh Macromedia Flash Pro 8. Untuk memunculkan atau menyembunyikan panel ini dapat digunakan shortcut F9.

3. Panel Library
Library merupakan panel yang digunakan untuk menyimpan objek-objek berupa graphic atau gambar, button atau tombol, movie dan suara baik yang dibuat langsung pada stage ataupun hasil proses impor dari luar stage. Untuk memunculkan atau menyembunyikan panel ini dapat digunakan shortcut Ctrl+L.

4. Panel Color
Panel Color merupakan panel yang digunakan untuk memilih warna yang digunakan dalam pembuatan objek-objek pada stage. Ada dua jenis subpanel, yaitu: Color Mixer dan Swatches. Shortcut untuk Color Mixer adalah Shift+F9 dan shortcut untuk Color Swatches adalah Ctrl+F9.

5. Panel Align & Info & Transform
Untuk menampilkan panel ini Anda dapat menekan Ctrl+K pada keyboard. Panel ini digunakan untuk mengatur posisi objek, ingin diletakkan pada tengah stage, sebelah kiri atau kanan dan lain-lain. Dengan panel ini Anda juga dapat memutar objek dengan Transform.
READ MORE - Mengenal Area Kerja Flash 8 Pro

 
Dibuat Oleh: Aan Samudra