Welcome to Blogger Susanto SMKN 1 Pinrang

Animasi

     Animasi Shine - Mobil Mengkilap Bercahaya 
Publish: 17 Januari 2009 | Author & Copyright: Inchan | Status: FREE tutorial 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  misalnya gambar mobil seperti gambar di bawah ini!

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) 3. Ganti nama  layer1 menjadi mobil    4. Tambahkan satu layer baru, kemudian ganti layer tersebut dengan nama efek. 5. Klik icon rectangle tool ( tekan huruf R di keyboard ), kemudian gambar persegi panjang melebihi gambar mobil, seperti gambar bawahini.   6. Klik gambar persegi panjang yang telah dibuat tadi, kemudian ubah warna persegi panjang seperti gambar di bawah ini 7. Kemudian untuk mendapatkan efek cahaya yang mengkilap, lakukan pengaturan warna persegi panjang seperti gambar di bawah ini 8. Efek mengkilap telah selesai dibuat, kemudian langkah selanjutnya, tambahkan satu layer lagi, kemudian ganti nama layer tersebut dengan animasi   9. Masih dilayer animasi kill icon Pen tool 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  klik di sini
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








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
image ilmugrafis


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
image ilmugrafis


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

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
image ilmugrafis

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

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:
image ilmugrafis
Animasinya bisa diexport dalam bentuk flash movie dengan cara klik File >> Export movie, beri nama dan pilih format swf
seperti ini:
Klik di sini..
Tutorial Jam Dinding ini 







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
image ilmugrafis
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
image ilmugrafis
Petunjuk Gambar IG

5. Sekarang waktunya membuat Frame pada Layer 1 klik Frame 50 dan pilih insert Frame
image ilmugrafis
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)
image ilmugrafis
Petunjuk Gambar IG

Setelah selesai, tekan F6 di frame 50 untuk memunculkan keyframe
image ilmugrafis
Selesai

untuk melihat hasilnya tekan CTRL + Enter
Kira kira seperti ini:
Klik di sini...
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









Membuat Flash Button
Publish: 17 September 2010 | Author & Copyright: Okie Eko Wardoyo | Status: FREE tutorial

Taukah anda tentang button? Button adalah sebuah tombol yang bisa diclick oleh mouse kita. Biasanya button digunakan untuk memanggil fungsi-fungsi tertentu, serta memiliki tampilan yang berubah ubah sewaktu kita meng-mouseover atau meng-click nya. Nah, dalam tutorial kali ini kita tidak akan membahas tentang fungsi – fungsi ( fungsi disini bukan berarti ‘kegunaan’ lho, tapi sebuah ‘function’ ) melainkan hanya membahas pada tampilan button nya saja.
Screenshot  jadi:
image ilmugrafis
Gambar Flash Button

Berikut Tutorial Flash :
- Langkah 1 : Silahkan buka Adobe Flash anda, di sini saya menggunakan versi Adobe Flash terbaru CS5, anda juga dapat menggunakan CS4, CS3, Flash 8, atau versi lama lainnya.
Berikut screenshotnya:
image ilmugrafis


- Langkah 2 : Langkah pertama, mari kita buat sebuah gambar button seperti di atas. Untuk menggambarnya anda dapat menggunakan Adobe Flash sendiri, Photoshop, Coreldraw, Adobe Illustrator, atau aplikasi lain. Di sini saya tidak akan menggambar, tetapi saya menggunakan gambar button sederhana yang sudah ada di Adobe Illustrator.

“hum, saya sendiri tidak tahu, kenapa sangat minim sekali tool tool untuk menggambar di Adobe Flash, mungkin itu merupakan teknik bisnis sehingga bila kita menggunakannya maka kita memerlukan product Adobe lain yang mengkhususkan pada bidang menggambar seperti Adobe Illustrator atau Adobe Fireworks ^_^ “

Berikut Screenshotnya:
image ilmugrafis
“buka Adobe Illustrator anda dan pilih salah satu button yang sudah ada, drag button ke lembar kerja kemudian copy paste ke lembar kerja Adobe Flash”


- Langkah 3 : Saat kita copy paste ke Adobe Flash maka tampilannya akan seperti berikut ini:
 image ilmugrafis
“akan ada konfirmasi saat proses paste, silahkan untuk lebih mudahnya pilih saja ‘paste as bitmap’ , maka semua layer layer dari AI (Adobe Illustrator akan di merge dijadikan gambar bitmap ).
Sebenarnya untuk membuat animasi yang lebih komplek anda bisa memilih ‘paste using AI File Importer Preferences’ , tapi karena di tutorial ini kita hanya membuat button jadi cukup pilih saja ‘paste as bitmap’


- Langkah 4 : Convert bitmap kita ke symbol. Untuk membuat sebuah flash button di Adobe Flash, maka bitmap yang baru saja kita import harus dijadikan ‘button symbol’. Klik kanan bitmap -> convert to symbol -> button.
Berikut adalah screenshotnya:
image ilmugrafis
Setelah convert to symbol maka pilih ‘button’
Berikut screenshotnya:
image ilmugrafis
“symbol di flash dibagi menjadi 3 yaitu ‘movie clip’, ‘button’, dan ‘graphic’. Karena kita akan membuat button, maka kita harus mengeset symbol kita sebagai button. Bila anda ingin membuat animasi anda dapat memilih ‘Movie Clip’


- Langkah 5 : Anda telah berhasil mengkonvert bitmap kita sebagai button. Nah, kemudian langkah selanjutnya adalah kita akan mengotak atik ‘apa yang ada’ di dalam symbol button yang baru saja kita buat.
Double click button dan akan terlihat screenshot seperti berikut:
image ilmugrafis
“di dalam button kita terdapat 4 buah frame yang dapat kita modifikasi dengan menggunakan ‘key frame’. Pada gambar diatas yang baru terisi hanya frame Up, sehingga saat button di preview maka tidak ada effect  ketika mouse diarahkan ke button maupun ketika button diclick, haduh susahnya menjelaskan, untuk lebih jelasnya silahkan dipreview  control -> test movie ( ctrl + enter )   ^_^ “
Frame Up : untuk button normal ( saat tidak ada event tertentu pada button, misalnya mouse over )
Frame Over: saat mouse diarahkan diatas button
Frame Down: saat mouse diclickan ke button ( click di sini masih dalam posisi ditekan, belum dilepaskan)
Frame Hit: Saat mouse dilepaskan ( setelah click )


- Langkah 6 : Saatnya kita isi frame demi frame button kita.
- Mari kita buat button over ( button berubah saat mouse diarah kan ke button)
a. Klik Kanan frame over -> insert keyframe->setelah insert keyframe pastikan anda masih dalam frame over tersebut->klik object button di frame over-> lihat properties di window kanan.
Berikut adalah screenshotnya:
image ilmugrafis

image ilmugrafis
b. Diatas kita lihat bahwa button di frame over masih bitmap, nah untuk menambah effect saat mouse over maka bitmap ini harus kita ubah menjadi symbol lagi. Symbol di dalam symbol adalah ciri khas product Adobe.
Untuk mengubah sebagai symbol , anda tinggal click kanan->convert to symbol ->pilih movieclip atau button.

c. Kemudian setelah terconvert sebagai symbol ( movieclip atau button ), click button yang sudah terconvert sebagai symbol di frame over tadi, nah window properties sekarang sudah berubah seperti pada screenshot di bawah:
image ilmugrafis
“nah, setelah diconvert lagi ke symbol ( movieclip atau button ) maka ada filters (effect yang akan kita gunakan ), juga ada option option lain yang sangat berguna untuk kita”

d. terakhir, beri effect filter saat mouse over di frame over
click symbol button ->lihat window properties-> click add filter ->glow
silahkan lihat screenshot:
image ilmugrafis
“setelah filter glow muncul, anda tinggal melakukan pengaturan sekehendak anda seperti screenshot berikut ini”
image ilmugrafis
Sekarang kita telah berhasil menambahkan effect glow pada mouse over ( tepatnya di frame over ), bila anda ingin mempreviewnya bisa mengclick  control -> test movie pada menu atas.
Berikut adalah hasil akhir untuk button over:
image ilmugrafis
Untuk button down dan hit adalah sama saja prosesnya. Anda dapat berkreasi sendiri, coba coba ,
Maupun membuat sebuah proyek dengan button.

Demikian sedikit tutorial dari saya, semoga bermanfaat. Sampai jumpa ;-)
Selamat Belajar Flash, SEMOGA BERMANFAAT

















Membuat Animasi Sederhana dengan Permainan Keyframe
Publish: 25 Juni 2008 | Author & Copyright: Johan | Status: FREE tutorial

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