Latest Post
Showing posts with label Macromedia Flash. Show all posts
Showing posts with label Macromedia Flash. Show all posts

MEMBUAT SENDIRI FLIPPING BOOK MENGGUNAKAN FLASH 8



Pertama-tama yang perlu sobat lakukan dalam mebuat flipping Book adalah membuat folder baru, perhatikan gambar berikut :
clip_image002
Keterangan :
Dalam folder Buku terdapat folder Hal yang berisi kumpulan halaman buku (isi buku berbentuk *.jpg) dan Folder Sound berisi efek gerakan buku.


untuk file latihannya silahkan download disini……
 

MEMBUAT PRESENTASI SEDERHANA MENGGUNAKAN FLASH 8

Langkah 1.
- Buat dokumen flash baru dengan ukuran 751 px x 372 px frame rate 21.
clip_image002

- Tambahkan 4 buah Layer lagi dan ubah masing-masing Layer menjadi : Layer 1 = Latar; Layer 2 = Tombol; Layer 3 = Label; Layer 4 = Materi; Layer 5 = Aksi.
clip_image004

Langkah 2.
Klik Frame 1 Layer Latar, masukkan image latar (jika sobat ingin menggunakan latar dalam latihan ini silahkan sobat download disini), dengan cara klik File – Import – Import to Stage.
clip_image006

clip_image008

Langkah 3.
Klik Frame 1 Layer Tombol dan buatlah 4 buah tombol seperti gambar berikut :
clip_image010

Jika keempat tombol selesai sobat buat, lanjutkan dengan meng-convert masing-masing tombol dengan cara menekan tombol F8 :
clip_image012

Dan berikanlah instance name pada property profil dengan nama “profil_btn” (tanpa tanda petik)
clip_image014

Dan berikanlah instance name pada property profil dengan nama “kegiatan_btn” (tanpa tanda petik)
clip_image016

Dan berikanlah instance name pada property profil dengan nama “prestasi_btn” (tanpa tanda petik)
clip_image018

Dan berikanlah instance name pada property profil dengan nama “kontak_btn” (tanpa tanda petik)
Jika selesai dengan langkah 3 silahkan lanjut ke langkah 4……

Langkah 4.
- Klik Kanan frame 6 pada Layer Latar dan Layer Tombol kemudian klik Insert Frame.
- Lanjutkan dengan klik Kanan Frame 2 Layer Label, Layer Materi dan Layer Aksi, lakukan hal yang sama pada Frame 3 sampai dengan Frame 6.
clip_image020

Langkah 5.
Klik Frame 1 Layer Label dan berikan nama pada Properti Frame Label dengan nama “profil” (tanpa tanda petik)
Klik Frame 2 Layer Label dan berikan nama pada Properti Frame Label dengan nama “kegiatan” (tanpa tanda petik)
Klik Frame 3 Layer Label dan berikan nama pada Properti Frame Label dengan nama “kegiatan2” (tanpa tanda petik)
Klik Frame 4 Layer Label dan berikan nama pada Properti Frame Label dengan nama “kegiatan3” (tanpa tanda petik)
Klik Frame 5 Layer Label dan berikan nama pada Properti Frame Label dengan nama “prestasi” (tanpa tanda petik)
Klik Frame 6 Layer Label dan berikan nama pada Properti Frame Label dengan nama “kontak” (tanpa tanda petik)
clip_image022

Langkah 6.
Untuk Layer Materi silahkan sobat isi materi sesukan sobat……

Langkah 7.
Klik Frame 1 Layer Aksi dan tuliskan AS berikut :
stop();
kegiatan_btn.onRelease = function() {
gotoAndStop("kegiatan");
}
prestasi_btn.onRelease = function() {
gotoAndStop("prestasi");
}
kontak_btn.onRelease = function() {
gotoAndStop("kontak");
}
Klik Frame 2 Layer Aksi dan tuliskan AS berikut :
stop();
profil_btn.onRelease = function() {
gotoAndStop("profil");
}
prestasi_btn.onRelease = function() {
gotoAndStop("prestasi");
}
kontak_btn.onRelease = function() {
gotoAndStop("kontak");
}
Untuk frame 5 Layer Aksi :
stop();
profil_btn.onRelease = function() {
gotoAndStop("profil");
}
kegiatan_btn.onRelease = function() {
gotoAndStop("kegiatan");
}
kontak_btn.onRelease = function() {
gotoAndStop("kontak");
}
Untuk frame 6 Layer Aksi :
stop();
profil_btn.onRelease = function() {
gotoAndStop("profil");
}
kegiatan_btn.onRelease = function() {
gotoAndStop("kegiatan");
}
prestasi_btn.onRelease = function() {
gotoAndStop("prestasi");
}

Selesai deh aplikasi presentasi menggunakan macromedia flash 8……
Kalau sobat kesulitan dengan membuatnya silahkan sobat download file latihannya disini

Terima kasih sudah berkunjung…
 

MEMBUAT ANIMASI KEMBANG API


Kali ini saya berbagi bagaimana membuat animasi kembang api menggunakan Macromedia Flash Profesional 8.

Tahap 1.
Jalankan Macromedia sobat dan aturlah lembar kerja dengan ukuran seperti gambar berikut :
image

Tahap 2.
Tambahkan 3 buah Layer pada lembar kerja sobat.
image

Tahap 3.
Klik Frame 1 Layer 1, kemudian tambahkan gambar roket kembang api
image
Masih di gambar roket kembang api, lanjutkan dengan menekan tombol F8 (convert to symbol)
Kemudian klik Kanan Frame 20 Layer 1 – Insert KeyFrame, lalu geser gambar ke atas sesuai selera sobat.
Jika sudah, kemudian klik Kanan Frame 10 Layer 1 – Create Motion Tween.
image
Tahap 4.
Klik Kanan Frame 20 Layer 2 kemudian insert KeyFrame, lalu tambahkan gambar kembang api.
image
Terakhir pada tahap 3 ini, klik Kanan Insert keyFrame pada Frame 40 Layer 2.
image

Tahap 5 (Akhir).
Klik Kanan Insert keyFrame pada Frame 20 Layer 3, kemudian buatlah sebuah lingkaran kecil tepat di tengah gambar kembang api.
image
Lanjutkan dengan menekan tombol F8 (Convert to Symbol) pada gambar lingkaran.
Klik Kanan Insert keyFrame pada Frame 40 Layer 3, kemudian sobat perbesar gambar lingkaran menutupi gambar kembang api.
image
Sekarang sobat lanjutkan dengan memberi Motion Tween (klik Kanan Frame 30 Layer 3 dan pilih Create Motion Tween). Pada gambar lingkaran.
Tahap akhir, klik Kanan Layer 3 dan Pilih Mask.
Selesai dan jalankan animasi sobat…

Oya… untuk file belajar dan gambarnya sobat bisa download disini.


 

MEMBUAT SOAL ESSAY DENGAN FLASH 8

Jika beberapa waktu yang lalu saya berbagi tutorial bagaimana membuat Soal Interaktif Pilihan Ganda, kali ini saya akan berbagi bagaimana membuat Soal Interaktif Essay.
Langsung ke TKP sob…
Langkah 1. Buat flash dokumen baru dan buatlah 2 buah Layer dan beri nama Layer1 dengan nama latar dan Layer2 dengan nama essay.
clip_image002
Langkah 2. Masukkan gambar latar pada Layer latar sesuai keinginan sobat, kemudian kuncilah Layer latarnya.
clip_image004
Langkah 3. Klik Frame1 Layer essay dan buatlah desain soal seperti gambar berikut :
clip_image006
Keterangan :
A. Soal; Properti : Static Text
B. Kotak Jawaban;
Properti jawaban nomor 1 : var isi dengan “jawaban1” (tanpa tanda petik)
Properti jawaban nomor 2 : var isi dengan “jawaban2” (tanpa tanda petik)
Properti jawaban nomor 3 : var isi dengan “jawaban3” (tanpa tanda petik)
Properti jawaban nomor 4 : var isi dengan “jawaban4” (tanpa tanda petik)
Properti jawaban nomor 5 : var isi dengan “jawaban5” (tanpa tanda petik)
C. Tanda Benar / Salah
Jawaban nomor 1, Properti : tipe Movie Clip, Instance Name : tanda1
Jawaban nomor 2, Properti : tipe Movie Clip, Instance Name : tanda2
Jawaban nomor 3, Properti : tipe Movie Clip, Instance Name : tanda3
Jawaban nomor 4, Properti : tipe Movie Clip, Instance Name : tanda4
Jawaban nomor 5, Properti : tipe Movie Clip, Instance Name : tanda5
D. Nilai; Properti : Static Text
E. Isi Nilai; Properti : Dynamic Text
F. Tombol;
Langkah 4. Klik Frame 1 pada Layer Essay. Sebagai contoh, buatlah 5 pertanyaan essay pada Static Text.
clip_image008
Langkah 5. Buatlah 5 buah input text dengan masing-masing Var : Jawaban1, Jawaban2, Jawaban3, Jawaban4 dan Jawaban5, dan Maximum Characters : 6.
clip_image010
…..
Langkah 6. Buatlah tanda Benar (contreng) dan tanda Salah (silang) disamping kanan input text jawaban, dengan cara :
Buatlah lingkaran menggunakan Oval Tool. Selanjutnya seleksi gambar lingkaran kemudian tekan F8 dan aturlah seperti gambar berikut :
clip_image012
Dan pada propertinya beri Instance Name dengan nama tanda1.
clip_image014
Lakukan langkah yang sama untuk soal nomor 2 sampai dengan nomor 5.
Langkah 7. Dobel klik gambar lingkaran yang telah menjadi Movie clip, tambah/insert keyframe pada frame2 dan frame3.
Berikut… klik frame2, gambarlah tanda contreng (benar) dan tanda silang (salah) pada frame3.
clip_image016
clip_image018
Jika sudah masukkan Action script :
  1. stop();
pada frame1, frame2, frame2
clip_image020
Lakukan langkah yang sama untuk soal nomor 2 sampai dengan nomor 5.
Langkah 8. Klik Layer Essay, kemudian aktifkan Actionnya dengan menekan tombol F9 dan silahkan copas action berikut :
  1. //daftar untuk jawaban yang benar
  2. jawaban_benar1 = "200";
  3. jawaban_benar2 = "1";
  4. jawaban_benar3 = "0";
  5. jawaban_benar4 = "10000";
  6. jawaban_benar5 = "101";
  7. //nilai pertama kali sama dengan 0
  8. nilai = 0;
Klik tombol Koreksi, kemudian aktifkan Actionnya dengan menekan tombol F9 dan silahkan copas action berikut :
  1. //ketika mouse diklik
  2. on (release) {
  3. //menghasilkan variable i=1, i=2, i=3, i=4, i=5
  4. for (i=1; i<6; i++) {
  5. //jika jawaban +i sama dengan jawaban +i
  6. if (_root["jawaban"+i] == _root["jawaban_benar"+i]) {
  7. //nilai ditambah 1
  8. nilai += 1;
  9. //tanda+i pindah ke frame 2
  10. _root["tanda"+i].gotoAndStop(2);
  11. } else {
  12. //tanda+i pindah ke frame 3
  13. _root["tanda"+i].gotoAndStop(3);
  14. }
  15. }
  16. koreksi.enabled = false; //tombol koreksi tidak bisa ditekan
  17. koreksi._alpha = 40; //tombol koreksi lebih transparan
  18. }
clip_image022
Klik tombol Reset, kemudian aktifkan Actionnya dengan menekan tombol F9 dan silahkan copas action berikut :
  1. on (release) {
  2. koreksi.enabled = true; //tombol koreksi dapat ditekan
  3. koreksi._alpha = 100; //warna tombol koreksi tidak transparan
  4. nilai = 0; //nilai diubah menjadi 0
  5. for (i=1; i<6; i++) { //menghasilkan variable i=1, i=2, i=3, i=4, i=5
  6. _root["jawaban_user"+i] = ""; //jawaban_user+i dikosongkan
  7. _root["tanda"+i].gotoAndStop(1); //tanda+i pindah ke frame 1
  8. }
  9. }
clip_image024
Langkah 9. Simpan project sobat dan cona jalankan project sobat.

Untuk file latihannya silahkan download disini
 

MENGGERAKKAN OBYEK MENGIKUTI MOUSE

Jika beberapa waktu yang lalu saya menulis bagaimana cara membuat animasi yang bergerak mengikuti anak panah keyboard, kali ini saya akan berbagi dengan sobat bagaimana membuat MENGGERAKKAN OBYEK MENGIKUTI MOUSE.
Tanpa basa basi, langsung saja sob……
Langkah 1.
  • Pastinya jalankan Macromedia Flash Sobat.
  • Buat flash dokumen baru.
  • Buatlah 2 buah Layer dan beri nama Layer 1 dengan nama “pesawat” dan Layer 2 dengan nama “action” (tanpa tanda petik).
clip_image002
clip_image004
Langkah 2.
Klik Layer “pesawat” dan masukkan gambar pesawat dengan cara klik File – Import – Import to Stage…, kemudian pilih gambar yang ingin sobat buat animasinya. (sebagai contoh saya menggunakan gambar pesawat tempur).
clip_image006
Langkah 3.
Klik gambar pesawat, lanjutkan dengan klik Modify – Convert to Symbol…
clip_image008
Pada kota dialog Convert to Symbol pastikan pilihan sobat seperti yang terdapat pada gambar dibawah dan lanjutkan dengan klik OK.
clip_image010
Langkah 4.
Masih di gambar pesawat, klik Windows – Properties - Properties
clip_image012
Pada kotak dialog properties isi instance name dengan “pesawat_mc”
clip_image014
Langkah 5 (Terakhir).
Klik Layer “action” frame 1, kemudian tekan tombol keyboard F9 untuk mengaktifkan kotak dialog action dan tuliskan code berikut :
  1. _root.onEnterFrame=function(){
  2. //mencari selisih dari koordinat
  3. var deltaX = _xmouse - pesawat_mc._x;
  4. var deltaY = _ymouse - pesawat_mc._y;
  5. //menggerakkan kumbang ke kursor sebesar 1/10 dari jarak ke kursor
  6. pesawat_mc._x += deltaX / 10;
  7. pesawat_mc._y += deltaY / 10;
  8. //kumbang menghadap ke mouse
  9. pesawat_mc._rotation = -Math.atan2(-deltaX,-deltaY)*180/Math.PI;
  10. }
clip_image016
Jika selesai menuliskan codenya cobalah untuk menjalankan animasinya dengan menekan tombol Ctrl + Enter dan silahkan sobat gerakkan mouse sobat.


 

MENGGERAKKAN OBYEK DENGAN KEYBOARD

Sudah lama tidak menulis tentang ANIMASI MACROMEDIA FLASH 8.
Sekarang saya akan berbagi dengan sobat tentang bagaimana caranya menggerak suatu obyek (gambar) dengan menggunakan keyboard menggunakan aplikasi Macromedia Flash 8.
Tanpa basa basi, langsung saja sob……
Langkah 1.
Pastinya jalankan Macromedia Flash Sobat.
Buat flash dokumen baru.
Import obyek dengan cara : File – Import – Import to Stage…, kemudian pilih gambar yang ingin sobat buat animasinya. (sebagai contoh saya menggunakan gambar pesawat tempur).
clip_image002
Perhatikan gambar berikut :
clip_image004

Langkah 2.
Silahkan sobat convert gambar pesawat menjadi Movie clip dengan cara, klik Modify – Convert to Symbol…
clip_image006
Pada kota dialog Convert to Symbol pastikan pilihan sobat seperti yang terdapat pada gambar dibawah dan lanjutkan dengan klik OK.
clip_image008

Langkah 3.
Klik gambar pesawat tempur, kemudian tekan tombol keyboard F9 untuk mengaktifkan kotak action dan tuliskan code berikut :
  1. onClipEvent (enterFrame) {
  2. if (Key.isDown(Key.LEFT)) {
  3. this._x -= 10;
  4. this._rotation = 270;
  5. } else if (Key.isDown(Key.RIGHT)) {
  6. this._x += 10;
  7. this._rotation = 90;
  8. } else if (Key.isDown(Key.UP)) {
  9. this._y -= 10;
  10. this._rotation = 0;
  11. } else if (Key.isDown(Key.DOWN)) {
  12. this._y += 10;
  13. this._rotation = 180;
  14. }
  15. }

Jika selesai menuliskan codenya cobalah untuk menjalankan animasinya dengan menekan tombol Ctrl + Enter dan untuk menggerakan obyek gunakan tombol anak panah pada keyboard sobat.
file latihan ini bisa sobat download disini


 

BUAT APLIKASI SOAL PILIHAN GANDA

Macromedia Flash tidak hanya digunakan membuat animasi, tetapi juga bisa digunakan untuk membuat quis interaktif.
Pada tutorial kali ini saya akan berbagi bagaimana cara pembuatan soal pilihan ganda lengkap dengan skor menggunakan Macromedia Flash 8.
langsung aja… simak langkah-langkah pembuatannya sob…
1. Jalankan Macromedia Flash 8 sobat dan buat project baru dengan ukuran 800 x 600 px.
2. Buatlah 3 buah Layer dan beri nama masing-masing Layer dengan nama : latar, materi, dan action. (lihat gambar berikut )
clip_image002
3. Klik Frame 1 Layer “latar” dan buatlah gambar latar sesuai dengan kreasi sobat.
(berikut contoh gambar saya)
clip_image004
Jika gambar latar selesai sobat buat, aktifkan icon gembok agar latar tidak bergeser.
clip_image006
4. Klik Frame 1 Layer “materi” dan tuliskan beberapa kalimat dan sebuah tombol seperti yang ada digambar berikut :
clip_image008
Untuk tombol “Mulai” beri instance name dengan nama “mulai” (tanpa tanda petik).
clip_image010
5. Klik Frame 1 Layer “action” dan tuliskan code berikut :
Stop();
score = 0()
mulai.onPress = function () {
nextFrame();
};
clip_image012
6. Klik Kanan Frame 2 Layer “latar” - pilih Insert Frame, kemudian lanjutkan dengan klik Kanan Frame 2 Layer “materi” dan Layer “action” – pilih Insert Keyframe.
clip_image014
Mulai ketikkan soal pada frame 2 Layer “materi” (lihat contoh berikut )
clip_image016
7. Lakukan hal yang sama dengan langkah ke-6 untuk membuat soal nomor 2 dan seterusnya. (sebagai contoh saya membuat 5 soal pilihan ganda).
clip_image018
8. Kembali klik Frame 2 Layer “materi”. Klik opsi jawaban “a” kemudian tekan F8 – klik type Button - OK.
clip_image020
Isi instance name dengan nama “a”.
clip_image022
Lakukan hal yang sama untuk opsi jawaban “b”, “c” dan “d”.
9. Untuk soal pilihan ganda yang lain, lakukan hal yang sama dengan langkah nomor 8.
10. Perhatikan gambar berikut untuk 5 contoh soal yang saya buat :
clip_image024
clip_image026
clip_image028
clip_image030
clip_image032
clip_image034
11. Jika sobat selesai dengan langkah 8 dan 9, selanjutnya sobat klik Frame 2 Layer “action” dan tuliskan code berikut :
stop();
a.onPress= function() {
score += 2; //skor ditambahkan pada jawaban benar
nextFrame();
};
b.onPress= function() {
nextFrame();
};
c.onPress= function() {
nextFrame();
};
d.onPress= function() {
nextFrame();
};
Klik Frame 3 Layer “action” dan tuliskan code berikut :
stop();
a.onPress= function() {
nextFrame();
};
b.onPress= function() {
score += 2; //skor ditambahkan pada jawaban benar
nextFrame();
};
c.onPress= function() {
nextFrame();
};
d.onPress= function() {
nextFrame();
};
Klik Frame 4 Layer “action” dan tuliskan code berikut :
stop();
a.onPress= function() {
score += 2; //skor ditambahkan pada jawaban benar
nextFrame();
};
b.onPress= function() {
nextFrame();
};
c.onPress= function() {
nextFrame();
};
d.onPress= function() {
nextFrame();
};
Klik Frame 5 Layer “action” dan tuliskan code berikut :
stop();
a.onPress= function() {
score += 2; //skor ditambahkan pada jawaban benar
nextFrame();
};
b.onPress= function() {
nextFrame();
};
c.onPress= function() {
nextFrame();
};
d.onPress= function() {
nextFrame();
};
Klik Frame 6 Layer “action” dan tuliskan code berikut :
stop();
a.onPress= function() {
nextFrame();
};
b.onPress= function() {
nextFrame();
};
c.onPress= function() {
score += 2; //skor ditambahkan pada jawaban benar
nextFrame();
};
d.onPress= function() {
nextFrame();
};
Klik Frame 7 Layer “action” dan tuliskan code berikut :
onEnterFrame= function () {
nilai = +score;
};
if (score>=6) {
komentar = "Pertahankan Prestasi Sobat Ya...";
}
if (score<=4) {
komentar = "Sobat Perlu Banyak Belajar";
}
ulangi.onPress= function() {
gotoAndStop(1);
};
12. Simpan project sobat dan coba jalankan aplikasi sobat dengan menekan tombol Ctrl + Enter.
untuk contoh latihannya silahkan sobat download disini

 
 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. ingin berbagi - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger