Anda di halaman 1dari 23

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)

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

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"

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:

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

Ulangi Langkah 5 dan 6 (Terus tambahkan huruf sehingga membentuk tulisan FLASH

tutorial Flash
OK!!!
Untuk melihat hasilnya... berdoa dulu ya... Tekan CTRL + Enter
Hasilnya:

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

1. Buka program flash 8


Ubah ukuran stage menjadi 768 x 576 pixels.
Ganti warna bacground menjadi warna warna biru #0099FF
2. buat 4 layer yaitu dengan nama: Rumput hijau, tiang, kotak nama, matahari

3. Di layer rumput hijau Klik rectangle tool


,untuk membuat rumput
hijau dengan mendragnya ke stage seperti gambar dibawah ini.

4. Klik di frame 1 pada layer: tiang lalu gunakan rectangle tool lagi untuk
membuat tiang penunjuk arah ,
setelah selesai pembuatan tiangnya maka untuk pemberian garis tiang dan arah
gunakanlah line tool setelah itu tekan tombol F8 dan beri nma tiang_mc
lihat gambarnya:

5. sekarang klik frame 1 pada layer: kotak nama


Ganti fill color menjadi warna putih dan strokenya hitam lalu tekan tombol F8
dan beri nama Kotaknama_mc dan copy menjadi 4 lalu sesuaikan dengan
gambar dan beri nama : jl. Grafis, jl.animasi, jl.film, jl.kartun.
lihat gambarnya:

6. langkah terakhir, klik frame 1 di layer matahari ganti warna fill color menjadi
#FFFF00
dan stroke dijadikan none
gunakan rectangle tool
Untuk mebuat perputaran matahari buat 8 kotak panjang lalu urutkan seperti
gambar lalu tekan F8 dan beri nama sun_mc
lihat gambarnya:

7. Klik 2 kali pada objek sun_mc dan akan terlihat seperti gambar ini

8. buat 1 layer lagi dan beri nama bulat


klik di frame 1 layer: bulat dan klik oval tool untuk membuat objek lingkaran
klik kanan > insert keyframe di frame 60 lalu klik
klik kanan create motion tween di frame 30.
lihat gambarnya:

9. klik di frame 1 layer 1


klik kanan > insert keyframe di frame 60
lalu klik pada frame 30 , klik di propertiesnya

10. agar matahari terlihat dibelakang pindahkan layer matahari di paling bawah.
untuk membuat rumputnya gunakan line tool buat seperti gambar

Selamat Mencoba>>>>@_@
1. Buka Program Adobe Flash, Disini Bisa menggunakan Adobe Flash
CS3,CS4,CS5
2. Pada Lembar kerja buatlah gambar terserah tapi disini saya akan mencontohkan
dengan menggambar kotak, pada pengaturan sudut (Rectangle Option) gunakan
angka 15

Gunakan Free Transform Tool (Q) untuk mengatur besar kecilnya kotak yang
anda buat
3. Seperti penjelasan saya di awal, kita tidak bisa merubah fill karena fill hanya
terdiri dari 1 Warna, untuk itu kita harus masuk ke pengaturan color dengan
Window - color (Shift + Alt + F9) nanti akan muncul Color Setting seperti ini

Pilih Linear Gradien atau Radial Gradien, namun disini saya mencontohkan
dengan linear gradien , Anda bisa memilih Flow: Extend Color

Untuk pengaturan Warna yang diinginkan bisa klik kedua panel di bawah yang
ada tanda 2 panah caranya klik kotak tersebut dan pilih warna yang anda inginkan
Contohnya:
Kombinasi hitam dan biru

4. Ok sekarang pasti anda bertanya-tanya.... bagaimana cara mengubah posisi


gradien agar tidak kaku seperti gambar di atas, ahaaa.... caranya gunakan
Gradient Transform Tool (F)

Anda bisa mengatur bentuk gradien yang anda inginkan

dan juga memberikan hiasan text


Hasilnya kira-kira seperti ini

Gradien di Flash
Selamat Belajar Flash, SEMOGA BERMANFAAT

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:


Dan seperti ini cara'a..
1. buka dreamweaver seperti biasa dan buat file baru berextensi html.. (anda bisa
menggunakan tampilan Split maupun Code, tp saya terbiasa menggunakan tampilan
code)
2. kita buat dulu bagian yang ingin dirollover gambar (backgroundnya) di antara tag
<body></body> dengan menggunakan sebuah div tag dengan nama element

menggunakan class atau id..


(di sini saya menggunakan element class)
berikut kode tag'a..

tampilan tersebut akan membuat sebuah link standar yang biasa digunakan tanpa ada
style apapun..
dan berikut kode css yang ditaruh di antara tag <head></head>

#ffffff adalah bilangan hexadecimal untuk warna putih yang digunakan sebagai warna
background..(saya menggunakan warna putih karena di halaman preview
berlatarbelakang warna putih..)
* : cari dan isi gambar yang ingin digunakan untuk gambar awal dan gambar hover..
0 0 : merupakan posisi dari gambar backround 0 pertama adalah untuk posisi x dan 0
kedua adalah untuk posisi y..
no-repeat : merupakan perulangan dari gambar..no-repeat berarti tidak menggunakan
perulangan..jika kalian ingin menggunakan perulangan..gunakan repeat-x untuk
perulangan horizontal..dan repeat-y untuk perulangan vertical..
padding-left : memberikan jarak dari kiri untuk memperlihatkan gambar dari tulisan link
yang ada..(saya menggunakan 20px karena lebar dari gambar adalah 15px..)
jika ingin menggunakan hover di setiap tag atau class atau id..cukup gunakan ":hover"
setelah nama tag atau nama class atau nama id.. (tanpa kutip)
LIVE PREVIEW
Cara Lainnya::
Bagi yang masih kebingungan dengan permainan Tag dan CSS jangan kuatir karena ada
cara alternatif dalam menampilkan rollover image karena di dalam aplikasi dreamweaver
telah disediakan :)
1. Buka aplikasi Dreamweaver
2. Pilih Insert >> Image Objects >> Rollover Image

3. Maka akan muncul pop up yang harus anda lengkapi

Penjelasan:
Image name: adalah nama / judul Rollover image anda (isi sesuka anda)
Original image: gambar utama/default Rollover image
Rollover image: gambar kedua (gambar yang akan muncul saat kursor disorot)
Arternate text : adalah penjelasan tentang gambar tersebut mengenai apa (boleh
dikosongi/ boleh diisi sesuka anda)
When Clicked, Go to URL: isi dengan URL link yang anda inginkan, bisa web anda,
paman google, atau web IG yaitu >> http://www.ilmugrafis.com :)
Nah setelah selesai Klik OK, mudah bukan, sekarang coba buka halaman yang anda buat
dengan browser anda (IE, Mozzila, Opera) whatever... yang penting minumnya teh sak
kotaknya... wkwkwk :P
Just pudding

Semoga Bermanfaat ^_^/

Anda mungkin juga menyukai