Animasi Flash- Membuat Jam Analog

Dalam membuat media pembelajaran maupun game edukasi, biasanya Tim Gardu Media menambahkan asessoris untuk mempercantik tampilan. Asessoris yang sering dibuat adalah jam digital. Namun, untuk kali ini kita akan belajar bersama untuk membuat jam analog.
Yuk, mari!

1. Buatlah flash document.
2. Buatlah sebuah gambar seperti di bawah ini. Kita bisa menggunakan oval tool, text tool, dan panel transform untuk membuatnya.

3. Untuk jarum jam, kita akan membuat ukurannya sama seperti jam dinding kita: jarum jam terpendek, jarum menit paling panjang, jarum detik panjang tipis.
4. Buatlah tiga buah garis seperti gambar di bawah ini :

5. Seleksi garis yang paling kecil, kemudian tekan F8 (Klik Kanan --> Convert to Symbol). Pada panel yang muncul masukkan jam_mc dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah bagian bawah lalu tekan OK

6. Seleksi movie clip jam_mc di stage kemudian tekan Ctrl+F3. Pada panel properties yang muncul kita masukkan jam_mc sebagai instance name.
7. Seleksi garis kedua (garis yang tidak terlalu panjang), kemudian tekan F8. Pada panel yang muncul kita masukkan detik_mc dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah bagian bawah lalu tekan OK.
8. Seleksi movie clip detik_mc di stage kemudian tekan Ctrl+F3. Pada panel properties yang muncul kita masukkan detik_mc sebagai instance name.
9. Seleksi garis ketiga (garis yang paling panjang), kemudian tekan F8. Pada panel yang muncul kita masukkan menit_mc dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah bagian bawah lalu tekan OK.
8. Seleksi movie clip menit_mc di stage kemudian tekan Ctrl+F3. Pada panel properties yang muncul kita masukkan menit_mc sebagai instance name.
9. Letakan movie clip jam_mc di tengah lingkaran yang kita buat sebelumnya, disusul movie clip menit_mc ditempat yang sama movie clip jam_mc, lalu kita letakkan juga movie clip detik_mc ditempat yang sama movie clip jam_mc dan menit_mc berada. Kira-kira tampilannya menjadi seperti ini:

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

code;
//perintah yang dijalankan ketika frame dimainkan
onEnterFrame = function () {
    //membuat variable
    waktu = new Date();
    jam = waktu.getHours();
    menit = waktu.getMinutes();
    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;
    }
    //animasi movieclip
    jam_mc._rotation = jam*30+(menit/2);
    menit_mc._rotation = menit*6;
    detik_mc._rotation = detik*6;
};

11. Tekan Ctrl+Enter untuk melihat hasilnya.  

Selengkapnya... »»  

Animasi Flash- Membuat Animasi Loading Sederhana

Hampir semua multimedia menggunakan animasi loading sebelum masuk ke menu utama. Pada tutorial kali ini, marilah kita belajar bersama membuat animasi loading sederhana.

Quote:1. Buat 3 buah layer dengan nama sesuka Anda

awal

2. Buatlah panjang frame ketiga layer sampai pada frame ke-60

Editing1

3. Buat sebuah kotak di layer latar animasi, hilangkan fill colornya dengan menyeleksi bagian dalam kotak, kemudian tekan tombol delete sehingga menjadi seperti di bawah ini.

Editing2

4. Pada Frame Animasi, Insert Keyframe pada frame ke 10 dengan menekan tombol F6, kemudian buatlah sebuah kotak tanpa stroke color dengan tinggi yang tidak menutupi garis latar.

Editing2

5. Masih pada layer Animasi, masukkan keyframe pada frame 60 dengan menekan tombol F6. Kemudian panjangkan kotak tersebut hingga memenuhi panjang kotak pada layer Latar.

Editing3

6. Klik di sembarang tempat antara frame 10 – frame 60, pada panel Properties, gantilah panel Tween dari None menjadi Shape.

Editing4

Jika benar,akan menjadi seperti ini

Hasil

7. Agar lebih menarik, pada layer Teks, tambahkan tulisan Loading menggunakan Text Tool dan letakkan sesuka hati Anda.

Finishing

Bagaimana? Mudah bukan?

Selengkapnya... »»  

Animasi Flash-Membuat lintasan dengan bentuk parabola

1. Buat document flash baru.
2. Ganti nama layer menjadi bola.
3. Buatlah sebuah objek bola dengan menggunakan Oval Tool.

4. Ubahlah objek bola tersebut menjadi simbol dengan tipe Graphic.
5. Klik frame 70 pada Timeline dan berilah sebuah Keyframe.
6. Buat sebuah layer baru, beri nama layer ini dengan nama Lintasan, letakkan di bawah Layer Bola.
7. Buatlah sebuah lintasan pada layer ini dengan menggunakan Pencil Tool.
8. Klik frame 1 Layer Bola, dan pindahkan objek pada awal lintasan.
9. Klik frame 70 Layer Bola dan pindahkan objek pada akhir lintasan yang telah dibuat

10. Kembali ke frame 1, klik menu Insert > Create Motion Tween atau klik kanan mouse dan pilih Create Motion Tween.
11. Klik kanan Layer Lintasan dan klik Guide, terdapat gambar palu pada Layer lintasan.

12. Klik Layer Bola, tahan dan drag/geser Layer Objek sehingga berada di bawah Layer Lintasan, gambar palu berubah pada Layer Lintasan.

13. Lakukan test movie.

Selengkapnya... »»  

Animasi flash-Menggambar Variasi Objek (JAMUR)

Berikut ini akan diberikan satu contoh lagi penggambaran obyek menggunakan Pencil Tool dan Line Tool . Kita akan menggambar “Jamur”.
1. Buat bentuk dasar berupa lingkaran menggunakan Oval Tool
2. Buat garis lurus memotong obyek lingkaran menggunakan Line Tool . Perhatikan gambar berikut.

3. Aktifkan Selection Tool . Selanjutnya,klik garis obyek yang tidak terpakai dan tekan Delete untuk menhapus garis tersebut. Perhatikan gambar

4. Menggunakan teknik yang sama, hapus garis yang tidak perlu sehingga hasilnya tampak seperti gambar

5. Aktifkan Selection Tool. Arahkan pointer mouse di tengah garis lurus hingga pointer berubah menjadi anak panah dengan garis lengkug,klik dan geser ke bawah, sehingga garis lurus berubah menjadi garis lengkung.

6. Selanjutnya, buat garis lurus untuk membentuk batang seperti gambar.

7. Hapus garis-garis yang tidak perlu dan lengkungkan garis pada batang jamur sehingga hasilnya tampak seperti gambar

8. Buat garis lengkung pada batang jamur. Gunakan Pencil Tool dengan pilihan Smooth.

9.Selanjutnya, sempurnakan gambar jamur tersebut menggunakan Oval Tool dan hapus garis-garis yang tidak diperlukan . Ubah bentuk garis (stroke style) sesuai selera.Perhatikan hasil berikut ini.

10. Selanjutnya mewarnai jamur menggunakan Paint Bucket Tool lihat hasilnya

Selamat berkarya...

Selengkapnya... »»  

Animasi Flash-Membuat Donat

Berikut ini akan diberikan satu contoh penggambaran obyek menggunakan Pencil dan Line Tool. Sebagai contoh, kita akan menggambar “Donat” Gunakan langkah berikut ini: 1. Buatlah obyek Lingkaran tanpa warna dengan bentuk dasar menggunakan Oval Tool. 2. Buat lingkaran yang lebih kecil di tengah-tengah lingkaran besar 3. Menggambar coklat menggunakan Pencil Tool 4. Mewarnai pada bidang gambar “Donat”, kemudian aktifkan Paint Bucket Tool pilih warna yang diinginkan. 5. Selanjutnya , klik pada bidang gambar yang akan diberi warna. Perhatikan hasilnya sebagai berikut.

Selengkapnya... »»  

Animasi Flash- Berlatih Media

Setelah di posting sebelumnya oleh mr plaxtunk mengenai panel-panel dan timeline, kali ini saya mencoba berbagi mengenai aplikasi dari posting sebelumnya. Macromedia Flash 8 sangat mudah digunakan, untuk membantu Anda dalam mengenal dan menggunakan aplikasi ini dapat melalui fitur Help dan tutorial-tutorial yang ada.
Untuk penggunaannya klik menu Help > Flash Help atau tekan F1


Gambar 2.1 : menu Help

MENYIAPKAN LEMBAR KERJA (STAGE)
Gunakan langkah berikut ini:
1. Klik menu File > New hingga ditampilkan kotak dialog New Document.
2. Di dalam tabulasi General, pastikan Flash Document yang terpilih
3. Klik OK.


Gambar 2.2 : Kotak Dialog New Document

MENGATUR STAGE
Setelah membuat stage, Anda dapat mengatur ukuran dan warna background dari stage tersebut. Gunakan langkah berikut untuk mengatur stage:
1. Klik menu Modify > Document, atau tekan Ctrl + J, sehingga akan ditampilkan kotak dialog Document Properties.
2. Tentukan lebar (width) dan tinggi (height) stage pad pilihan Dimensions.
3. Untuk mengubah warna latar belakang stage, gunakan pilihan Background Color.
4. Untuk mengubah kecepatan frame, gunakan pilihan Frame rate.
5. Selanjutnya , tentukan satuan ukuran stage pada pilihan Ruler units.
6. Akhiri dengan OK.


Gambar 2.3 : Kotak dialog Document Properties

MENAMPILKAN RULER
Penggunaan fasilitas ruler akan mempermudah Anda untuk membuat obyek dengan ukuran dan bentuk yang tepat. Penggunaan ruler akan dibarengi dengan penggunaan guides sehingga ruler juga mempermudah peletakan obyek di dalam stage. Untuk menampilkan ruler, klik menu View > Rulers.

MENGGAMBAR OBYEK
Berikut akan dijelaskan cara membuat obyek menggunakan beberapa piranti menggambar yang disediakan progam Flash Pro 8.
1. Menggambar Obyek Lingkaran
Gunakan langkah berikut untuk menggambar obyek lingkaran:
a. Klik Oval Tool
b. Tentukan warna garis (Stroke Color) dan warna dasar (Fill Color) dari obyek yang akan dibuat.
c. Drag pointer mouse di dalam stage untuk membuat bentuk lingkaran. Rahasia untuk membuat obyek lingkaran dengan bentuk yang proporsional maka tekan tombol Shift


Gambar 2.5 : Obyek Lingkaran

2. Menggambar Obyek Kotak
Gunakan langkah berikut ini untuk membuat obyek kotak :
a. Klik Rectangle Tool
b. Tentukan warna garis (Stroke Color) dan warna dasar (Fill Color) dari obyek yang akan dibuat.
c. Selanjutnya, klik Round Rectangle Radius pada toolbox untuk membuat obyek kotak dengan sudut lengkung yang akan ditampilkan pada kotak dialog Rectangle Settings . Ketikkan sebuah nilai untuk mengatur kelengkungan sudut pada pilihan Corner Radius. Kemudian klik OK untuk mengakhiri.


Gambar 2.6 : Kotak Dialog Rectangle Settings

d. Selanjutnya , drag pointer mouse di dalam stage untuk membuat bentuk kotak yang diinginkan.


Gambar 2.7 : Obyek Kotak

3. Menggambar Obyek PolyStar
Untuk menggambar obyek polystar, gunakan langkah berikut:
a. Klik Polystars Tool
b. Tentukan warna garis (Stroke Color) dan warna dasar (Fill Color) dari obyek yang akan dibuat.
c. Berikutnya, klik tombol Option pada Properties Inspector sehingga kotak dialog Tool Settings seperti gambar berikut.


Gambar 2.8 : Kotak Dialog Tool Settings

d. Tentukan bentuk obyek Polystar atau Star pada pilihan Style
e. Tentukan juga jumlah sisi pada pilihan Number of Sides, lalu akhiri dengan OK
f. Selanjutnya, drag pointer mouse dalam stage untuk membentuk obyek.

4. Menggambar Garis Lurus
Gunakan langkah berikut ini:
a. Klik Line Tool
b. Tentukan warna garis (Line Color)
c. Drag pointer mouse dalam stage untuk membentuk garis lurus.

5. Menggambar Garis Lengkung
Untuk membuat garis lengkung, anda dapat menggunakan bentuk dasar garis lurus dan mengeditnya hingga membentuk garis lengkung. Untuk itu, gunakan langkah beriktu ini:
a. Buat garis lurus horizontal dengan Line Tool
b. Klik Selection Tool dan arahkan pointer mouse di antara titik awal dan titik akhir dari garis lurus hingga pointer mouse berubah bentuk. Klik dan geser ke arah yang diinginkan hingga garis lurus tersebut berubah menjadi garis lengkung.


Gambar 2.9 : Membuat garis lengkung dari garis lurus

c. Proses tersebut dapat diterapkan ke obyek Lingkaran, kotak, Polygon, Star dan garis lainnya.

6. Menggambar dengan Pen Tool
Dengan Pen Tool Anda dapat membuat gambar bidang dengan garis lurus atau garis lengkung. Untuk itu, gunakan langkah beriktu ini:
a. Aktifkan Pen Tool
b. Arahkan pointer pada Stage. Klik sekali untuk menentukan posisi awal. Lalu geser pointer mouse ke arah tertentu sesuai bentuk yang akan dibuat dan klik sekali lagi untuk menentukan titik kedua. Lakukan proses terebut beberapa kali sesuai bentuk obyek yang diinginkan.


Gambar 2.10 : Gambar Pen Tool dengan Bentuk Garis Lurs

Itu dulu dari saya untuk kali ini, mudah-mudahan bermanfaat

Selengkapnya... »»  

Animasi Flash-Mengenal Berbagai Jenis Panel

Macromedia Flash 8 / Adobe CS 3 memiliki beberapa panel yang dapat Anda gunakan dalam membuat dan mengedit obyek serta animasi dalam sebuah dokumen Flash. 1. PROPERTY INSPECTOR Panel Property Inspector digunakan untuk mengatur setting dokumen Flash serta property obyek dalam stage. Setiap kali Anda membuat atau memilih sebuah obyek pada stage, maka atribut obyek tersebut akan otomatis muncul pada panel Property Inspector. 2. PANEL LIBRARY Panel Library berisi semua jenis symbol, baik gambar (graphic), sound, movie clip, tombol (button) , dan sebagainya yang sering digunakan dalam sebuah dokumen Flash. Penggunaan panel Library sangat membantu Anda dalam membuat aplikasi Flash yang efisien dan efektif, sebab Anda tidak perlu mengimpor file gambar atau suara yang sama berulang kali. Anda cukp menyimpan file-file tersebut dalam panel library dan mengambilnya kembali bila sewaktu-waktu Anda perlukan. Untuk menampilkannya klik menu windows > Library pada menu bar. Atau tekan Ctrl + L pada keyboard atau F11 3. PANEL ACTION Panel Action digunakan untuk menuliskan Action Script pada frame, button, atau obyek lainnya pada stage. Pembahasan lebih lanjut mengenai panel Action serta penggunaan Action Scipt dapat disimak pada pertemuan berikutnya. 4. COMMON LIBRARIES Common Libraries adalah kumpulan komponen (symbol) dalam library yang disediakan oleh Flash untuk memudahkan pembuatan animasi yang Anda lakukan Untuk menampilkannya klik menu Windows > Common Libraries pada menu bar. Common Libraries terdiri atas tiga jenis, yaitu: - Button - Classes - Learning Interactions 5. COLOR MIXER Color Mixer digunakan untuk memilih warna Stroke atau Fill yang ingin Anda gunakan pada sebuah obyek. Anda cukup memilih salah satu warna yang tersedia, atau dengan mengetikkan kode warna heksadesimal pada kotak yang tersedia. Index istilah-istilah dalam program Flash

Selengkapnya... »»  

Animasi Flash-Mengenal Timeline

Timeline digunakan untuk membuat dan mengatur animasi masing-masing obyek layer dan frame. Seperti halnya film, animasi flash terbagi dalam beberapa frame. Layer dapat diibaratkan seperti beberapa klik film yang disusun secara vertikal. Masing-masing klik memiliki gambar dan tampilan yang berbeda pada stage.


MENGENAL LAYER
Layer dapat anda bayangkan sebagai kumpulan lapisan plastic transparan yang tersusun vertikal. Anda dapat membuat dan mengedit obyek pada sebuah layer tanpa mengganggu dan mempengaruhi obyek pada layer yang lainnya.


MENGENAL FRAME
Frame merupakan kotak-kotak pada Timeline yang berguna untuk membagi dan mengatur waktu berjalannya animasi yang Anda buat. Semakin banyak frame ditempatkan maka semakin lama animasi Anda akan berjalan.
Untuk lebih memahami pengertian frame, mari kita lakukan langkah-langkah berikut ini:
1. Buatlah sebuah dokumen baru. Misalnya : gardumedia.fla
2. Buatlah sebuah kotak (bujursangkar) pada Stage. Hasilnya seperti gambar berikut.

Pada saat Anda membuat bujursangkar pada Stage, maka akan muncul tanda lingkaran hitam pada Timeline. Lingkaran kecil berwarna hitam menandakan bahwa frame tersebut memiliki obyek. Lingkaran hitam tersebut disebut Keyframe.

MENGENAL KEYFRAME
Keyframe merupakan frame yang mendefinisikan perubahan yang terjadi pada animasi atau frame yang digunakan untuk meletakkan frame action.

Lingkaran kecil berwarna hitam menandakan bahwa frame tersebut memiliki obyek. Sedangkan bila hanya terdapat lingkaran putih berarti frame tersebut tidak memiliki obyek di dalamnya atau disebut Blank Keyframe.

MENGENAL PLAYHEAD
Playhead berbentuk kotak merah, digunakan untuk menjalankan animasi berdasarkan urutannya pada Timeline. Pada saat animasi dijalankan, playhead akan bergerak ke kanan mengikuti alur animasi yang anda buat. Playhead juga dapat Anda gunakan untuk mengetahui tampilan animasi pada Stage. Klik dan Drag playhead pada timeline header menggunakan mouse kearah kanan.

Selengkapnya... »»  

Animasi Flash-Mengenal Drawing Tool (Tool Box)

Toolbox terdiri atas beberapa jenis ikon yang digunakan dalam membuat dan mengedit obyek dalam stage. Toolbox terbagi menjadi empat bagian utama, yaitu:
1. Tools Area
2. View Area
3. Color Area
4. Option Area

TOOLS AREA
Sesuai dengan namanya, Tools Area terdiri atas kumpulan tool yang digunakan untuk membuat dan mengedit obyek di stage.


a. Selection Tool, digunakan untuk memilih, memindah dan mengubah bentuk suatu obyek
b. Subselestion, digunakan untuk memindah dan mengubah bentuk obyek
c. Free Transform Tool, digunakan untuk memilih , memindah, dan memanipulasi obyek (mengubah bentuk dan ukuran). Ketika Anda memilih Free Transform Tool, pada bagian Options akan terlihat emat tool tambahan, yaitu: (1) Rotate and Skew, (2) Scale, (3) Distort, (4) Envelope
d. Fill Transform Tool, digunakan untuk memanipulasi warna Fill pada obyek yang terpilih
e. Line Tool, digunakan untuk membuat garis
f. Lasso Tool, digunakan untuk membuat seleksi atau pilihan dengan mengambil bentuk seleksi sesuai keinginan Anda. Lasso tool terdiri atas tiga pilihan tool. Dapat dilihat pada bagian Options pada saat anda menggunaka Lasso Tool ini.
Magic Wand , Magic Wand Properties , Polygon Mode
g. Pen Tool, digunakan untuk membuat garis dan menggambar kurva.
h. Text Tool, digunakan untuk menuliskan teks.
i. Oval Tool, digunakan untuk membuat lingkaran dan elips.
j. Rectangle Tool, digunakan untuk membuat kotak, baik persegi panjang maupun bujur sangkar. Tool ini menyediakan sebuah opsi tambahan pada bagian Options , yaitu Round Rectangle Radius.
k. Polystar Tool, digunakan untuk membuat obyek gambar berupa bitang segi lima
l. Pencil Tool, digunakan untk membuat gambar seperti anda menggambar menggunakan pensil. Ada tiga pilihan mode garis yang dapat Anda gunakan , yaitu:
- Straighten : garis yang dihasilkan tampak kaku dan lurus
- Smooth : garis yang dihasilkan memiliki sudut yang lebih halus
- Ink : garis yang dihasilkan seperti coretan tinta
m. Brush Tool, digunakan untuk menggambar bentuk bebas dengan berbagai pilihan bentuk dan ukuran brush yang beragam. Ada lima mode yang dapat Anda gunakan, yaitu :
- Paint Normal
- Paint Fills
- Paint Behind
- Paint Selection
- Paint Inside
n. Bottle Ink Tool, digunakan untuk membuat atau mengganti warna Stroke suatu obyek
o. Paint Bucket Tool, digunakan untuk member warna atau mengubah warna suatu obyek. Tersapat empat pilihan tambahan pada Gap Size yang dapat Anda gunakan dalam mewarnai suatu area, yaitu:
- Don’t Close Gaps
- Close Small Gaps
- Close Medium Gaps
- Close Large Gaps
p. Eraser Tool, digunakan untuk menghapus bagian obyek tertentu pada obyek
q. Eyedropper Tool, digunakan untuk mengambil sampel warna tertentu. Fungsi tool ini hampir sama dengan tool serupa pada aplikasi Adobe Photoshop.

VIEW AREA
View Area terdiri atas dua komponen, yaitu:
a. Zoom Tool, digunakan untuk memperbesar tampilan gambar pada stage
b. Hand Tool, digunakan untuk menggeser tampilan layar


COLOR AREA
Color Area digunakan untuk mengatur warna Stroke dan Fill suatu obyek. Stroke adalah warna garis obyek, sedangkan Fill adalah warna isi suatu obyek.


OPTION AREA
Option Area berisi beberapa setting tambahan yang digunakan dalam proses painting dan editing . Komponen yang terdapat dalam option Area tergantung pada jenis tool yang sedang anda gunakan .

Selengkapnya... »»