Cara membuat dan memasang banner animasi flash pada blog

Lihat sidebar sebelah kanan dari blog ini, sekarang...
Ok sudah? disana terdapat banner iklan (itu memang iklan he he he) yang animatif, kita akan membuat seperti itu.

Pertama kali, kita atur dulu ukuran banner yang akan kita buat. Caranya klik properties, tentukan ukuran misalnya 188 x 200 pixel




Setelah itu akan kembali ke halaman flash, dan ukuran halaman menjadi seperti yang telah kita atur.

Mulai membuat desain dengan rectangle tool, kita buat kotak tanpa garis tepi, misalnya seperti ini:


Untuk merubah warna, sekarang klik selection tool,atau tekan huruf V dari keyboard anda. Klik gambar kotang yang tadi kita buat, punya saya berwarna pink. Kemudian klik panel color di sebelah kanan.


Pilih seperti gambar diatas, yaitu untuk mengatur fill dengan warna gradasi linier. Kemudian setelah itu maka panel color tadi akan berubah seperti ini:


Lihat gambar, untuk merubah warna, silahkan klik ganda pada tanda yang saya beri anak panah, kemudian akan muncul jendela baru dan pilih warna sesuai selera anda.Anda juga dapat memberikan slider tambahan, caranya klik satu kali pada area slider, sedangkan untuk merubah warna dengan klik ganda. Misalkan hasilnya seperti ini:


Tambahkan layer baru dan buat teksnya, misalkan seperti punya saya "cara apapun" kemudian gunakan selection tool, klik teks tersebut, anda dapat mengganti warna, ukuran, jenis hurufnya melalui properties. Setelah itu, tekan F8, pada jendela yang muncul pilih movie clip dan klik OK.


setelah itu klik ganda teks yang telah kita ubah menjadi movie clip tadi, pada jendela symbol klik insert layer, pada layer baru yang muncul, buatlah kotak misalkan seperti ini:


pada layer 1 (yang memuat teks) klik kanan pada frame 25 misalnya, kemudian pilih insert frame.

Sekarang klik pada frame1 layer 2 (yang memuat kotak) klik kanan pilih create motion tween. kemudian klik pada key frame sepereti gambar atau sesuai keinginan andan, klik kanan dan pilih insert key frame. pada key frame baru itu pindah-pidahkan kotaknya.

langkah selanjutnya klik insert layer, dan copy lah teks yang ada dan paste in place pada layer yang baru tadi. Sehingga akan terjadi penumpukan teks. Ok sekarang klik layer 3, yang terakhir paling atas, klik kanan pilih mask. jalankan dulu animasinya untuk mencoba, tekan Ctrl+enter
Tralala.... jadi deh...

Oke kembali ke halaman awal, klik scene 1


kemudian tambahkan satu layer lagi untuk membuat teks yang kecil-kecil dibawahnya. buat menjadi movie clip dan kasih animasi tween ajah, selesai.... jadi deh....

==============================================
ok selanjutnya kita latihan bagaiman caranya untuk upload file tadi ke blog. Anda harus memiliki akun website, misalnya seperti saya ndaftar gratis di sites.google.com lihat posting terdahulu tentang membuat direct link, sehingga tidak perlu saya jelaskan disini bagaimana anda mendaftar ke sites.google.com

Setalah anda memiliki akun, silahkan upload file anda kesana, selesai upload, ambil link nya saja, jika anada menggunakan firefox, jangan link download yang anda copy, tetapi link "view" klik kanan dan pilih copy link location.

Kemudian login akun blog anda, masuk ke tab rancangan, klik insert gadget, pilih html/javascript, paste link yang tadi di copy.

Simpan.

Selesai.

Lihat blog anda.

Cihuiiii...
Semoga bermanfaat...

read more

Mengatur suara dengan slider pada flash 8

Masih tentang Flash 8, Sebagai bahan latihan supaya terstruktur, saya posting lagi tentang flash.

Mengatur suara pada flash lebih mudah jika cara memasukkan suara yang kita pilih dengan action script. Sebagai catatan,kita bisa saja memasukkan suara langsung ke frame, mudah kita lakukan, tetapi pengontrolan terhadap suara pada cara tersebut relatif lebih rumit.

Hal yang akan kita lakukan dalam tutorial ini adalah mengatur volume suara menggunakan visualisasi slider.

Ok, langsung buka flash nya,kemudian:
1. buat sebuah garis mendatar dengan line tool, tekan f8 pilih movie clip, dan pastikan registration berada di tengah sebelah kiri, lihat gambar ini:


2. langkah kedua, buat new layer, pada layer dua ini buat lingkaran kecil sebagai tombol slider nantinya, tekan f8 pilih movie clip, dan pada registration pilih yang tengah.


3. ok, sekarang anda klik garis,kemudian pada properties, pada instance name ketik garis
4. sekarang klik lingkaran kecil, pada properties beri nama lingkaran
5. Langkah yang berikutnya, atur posisi kedua obyek movieclpi seperti ini:


6. kemudian kita import file suara/musik ke library, klik file-iomport-import to library kemudian pilih filenya dan klik open.

7. Ok, istirahat sejenak.....setelah ini kita kerja keras memahami script.
==============================================================================
##############################################################################
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
==============================================================================

8. Pada library, klik kanan file musik/suara yang kita import tadi,pilih linkage. centang export for action script dan export in first frame, pada identifier ketik musik, klik OK


9. pada frame 1, mau layer 1 atau layer 2 bebas, klik disana dan tekan f9, pada jendela action frame yang muncul ketik kode berikut:


Sedikit penjelasan:
baris pertama, kita membuat variabel "lagu" sebagai new sound, bebas mau dikasih nama variabel apa saja terserah.

pada baris ke dua, perintah attachSound digunakan untuk memanggil suara, jadi dengan script tersebut berfungsi memainkan "suara yang mana?" yaitu "musik" yang tadi kita tulis pada identifier.

pada baris ketiga, adalah perintah untuk memainkan lagu, nilai 999 adalah nilai perulangan, jadi lagu itu akan dimainkan sebanyak 999 kali, ini nilai terbanyak untuk perulangan dalam flash.

Ok,sejauh ini jika kita jalankan animasi, tekan ctrl+enter maka lagu akan dimainkan. Gampang khan? tapi belum bisa kita atur volume nya. Silahkan coba jalankan animasi.

10. pada lanjutan kode yang berikut, kita gunakan untuk mengatur volume dengan slider yang kita punya. ketik scriptnya yah...nih saya tampilkan gini aja biar bisa di copy-paste.

lingkaran.onPress = function() { //jika lingkaran ditekan
kanan = _root.garis._x+180; //batas drag, 180 adalah panjang garis
kiri = _root.garis._x; //batas drag
atas = _root.garis._y; //batas drag
bawah = _root.garis._y; //batas drag
startDrag(this, true, kiri, atas, kanan, bawah); //mulai drag
};
lingkaran.onMouseMove = function() { //jika mouse digerakkan
myPoint = new Object(); //membuat obyek baru "mypoint" atau mengambil nilai posisi
myPoint.x = this._x;
myPoint.y = this._y;
_root.garis.globalToLocal(myPoint);
_root.lagu.setVolume(myPoint.x); //mengatur volume sesuai posisi lingkaran
};
lingkaran.onRelease = lingkaran.onReleaseOutside=function () { //jika klik dilepas
stopDrag(); //berhenti drag
};


ndak perlu saya jelaskan yah, udah ada tuh dibelakang script saya beri penjelasan.

11. Jalankan animasinya, lihat hasilnya, mainkan slidernya, apa jadinya?
Selamat kalau anda sukses. kalau belum, coba unduh disini.

Semoga bermanfaat, komentar dunk...

read more

Drag-Drop di Flash 8 bagian 2

Tutorial ini merupakan lanjutan dari drag dan drop di flash 8 yang kemarin saya posting. Apa bedanya? kami ini kita tambahkan bagaimana untuk mengecek kebenaran dari pasangan obyek yang di drag. Kasusnya begini:

Saya punya satu lingkaran merah dan satu lingkaran biru. serta satu kotak merah dan satu kotak biru.

Skenario nya: obyek berwarna biru akan kita pasangkan dengan obyke sejenis yang berwarna merah. jika lingkaran biru dipasangkan dengan lingkaran merah, maka akan muncul teks "Benar" jika selain itu "salah". Demikian juga untuk obyek kotak.

Capcus ke TKP (Tempat Kursus Phlash):
1. buat lingkaran merah, tekan f8 pilih movie clip, klik ok
2. klik lingkaran merah tersebut, kemudian munculkan properties, pada instance name ketik lingkaran_merah.
3. buat kotak merah, tekan f8 pilih movieclip, klik ok.
4. klik kotak merah, properties pada instance name ketik kotak_merah.
5. Lihat yang kita punya ini:


6. sip, sekarang buat lingkaran biru,tekan f8 pilih movie clip,klik ok
7. pada properties beri nama lingkaran_biru
8. buat kotak biru, tekan f8 pilih movieclip, klik ok
9. pada properties beri nama kotak_biru
10. lihat yang kita punya sekarang:


11. sekarang buat dynamic text, klik texttool (huruf A pada toolbox), klik properties, pilih dynamic text. Kemudian buat area text di layar.


lihat gambar yah...pada var ketik ling_kode


12. sekarang buat satu lagi dynamic text, tempatkan diatas kotak merah, dan pada properties var isi dengan kotak_kode

=============sebentar, saya minum dulu===================

gelas_pegang=true;
isi=air_panas;
coffemix=open;
tuang._coffemix=semuanya(){
aduk._pelan2=1 menit;
}

on(taruh){
diamkan sejenak;
}
siap._minum=coffemix panas;

==============selesai===============

he he he, maaf, iklan,.....

ok lanjut, sekarang ke bagian koding nya. Apa? mau minum dulu? silahkan...

no 13 ini kalau tidak salah. klik pada frame 1 layer 1, tekan f9 maka akan muncul jendela action frame.
14. ketik kode berikut (maaf anda ikuti dulu, pahami langkah demi langkah)
Kode untuk menggerakkan lingkaran biru:

lingkaran_biru.onPress = function() {
this.startDrag();
};
lingkaran_biru.onRelease = function() {
this.stopDrag();
if (eval(this._droptarget) == lingkaran_merah) {
this._x = _root.lingkaran_merah._x;
this._y = _root.lingkaran_merah._y;
}if (eval(this._droptarget) == kotak_merah) {
this._x = _root.kotak_merah._x;
this._y = _root.kotak_merah._y;}
}


Koding untuk kotak biru:

kotak_biru.onPress = function() {
this.startDrag();

};
kotak_biru.onRelease = function() {
this.stopDrag();
if (eval(this._droptarget) == lingkaran_merah) {
this._x = _root.lingkaran_merah._x;
this._y = _root.lingkaran_merah._y;
}if (eval(this._droptarget) == kotak_merah) {
this._x = _root.kotak_merah._x;
this._y = _root.kotak_merah._y;}
}


15. Sampai tahap ini, coba anda jalankan, tekan ctrl+enter. Lingkaran biru dan kotak biru dapat didrag dan drop, coba anda taruh pada obyek merah.
16. Selanjutnya untuk mengecek nilai benar atau salah. Script kita modif seperti ini:

lingkaran_biru.onPress = function() {
this.startDrag();

};
lingkaran_biru.onRelease = function() {
this.stopDrag();
if (eval(this._droptarget) == lingkaran_merah) {
this._x = _root.lingkaran_merah._x;
this._y = _root.lingkaran_merah._y;
ling_kode="BENAR" }else{ling_kode="SALAH"
}if (eval(this._droptarget) == kotak_merah) {
this._x = _root.kotak_merah._x;
this._y = _root.kotak_merah._y;}
}


17. Kemudian untuk yang kotak juga kita modif yang sama:

kotak_biru.onPress = function() {
this.startDrag();

};
kotak_biru.onRelease = function() {
this.stopDrag();
if (eval(this._droptarget) == lingkaran_merah) {
this._x = _root.lingkaran_merah._x;
this._y = _root.lingkaran_merah._y;
}if (eval(this._droptarget) == kotak_merah) {
this._x = _root.kotak_merah._x;
this._y = _root.kotak_merah._y;
kotak_kode="BENAR"}else{kotak_kode="SALAH"}
}


18. Sip, jalankan animasinya!

kurang jelas? download aja disini

read more