Laman

Like

BAGI ANDA MERASA INI BERMANFAAT SILAHKAN LIKE PAGE ON FACEBOOK DIBAWAH INI!!!


Like Page halaman http://iswahyuniiswahyuni.blogspot.com/ di Facebook!!
Tampilkan postingan dengan label PEMOGRAMAN FLASH (Animasi). Tampilkan semua postingan
Tampilkan postingan dengan label PEMOGRAMAN FLASH (Animasi). Tampilkan semua postingan

Kamis, 26 Desember 2013

Membuat Game Berhitung (Kalkulator) Dengan Menggunakan Macromedia Flash

Sebelum kita masuk ke game nya, kita pahami terlebih dahulu Action Script nya, cekidot!!!

ACTION SCRIPT

Action script yaitu gabungan instruksi - instruksi yang digunakan untuk menghubungan suatu perangkat dengan sebuah object.

Ada 3 komponen yang harus dipahami dalam peletakkan/penggunaan script yaitu:
a. target
b. Event
c. Action

*Target yaitu suatu komponen yang akan letakkan instruksi.

*Event yaitu kejadian/peristiwa yang terjadi pada saat penggunaan action script terdiri atas :
a. Event keyboard
b. Event Mouse on relies, on press
c. Event Movie

*Action adalah instruksi2 yang digunakan pada suatu object.
Panel Action Script 
- klik menu windows 
- Action
- f9
- ctrl + f3


LANGKAH LANGKAH MEMBUAT GAME BERHITUNG
  • Tampilan Awal


  1. Pada frame diangka 1, Buatlah Desain seindah mungkin.
  2. Disini saya menggambar sebuah orang dengan menggunakan gabunggan dari line, oval tool, dan color (warna).
  3. Buatlah 1 Buah Symbol Movie Clip beri nama dengan GAME BERHITUNG => “Tambah kan insert keyframe sesuai letak ukuran yang anda inginkan beri warna sesuai selera, ulangi sampai warna sudah terlihat menarik”
  4. Buatlah kata – kata untuk memulai permainan seperti : “Hello, My Name Is “ Iswahyuni” welcome to my game klik start button to select the level of game” Dengan menggunakan sebuah Text Tool, dan masukan kedalam kotak dengan menggunakan Rectangle dan Line.
  5. Buatlah 1 Buah Button dan beri nama tombol Start
  6. Lalu Letakkan Sesuai Gambar Dibawah Berikut.
  7. Tambahkan Insert Layer dibawah Layer Games, Buat dengan Nama “Bground” untuk Main Menu, Pilih warna sesuai selera.
  8. Berikan action script berikut pada tombol Start
    on(press){
                gotoAndStop(5);
    }
  9. Berikan action script berikut pada Action Frame
    stop ();
    onEnterFrame=function(){
    }


  • Main Menu


  1. Pada frame diangka 5, Buatlah 3 Buah Button yang masing-masing diberi nama tombol EASY, MEDIUM, Dan HARD
  2. Buatlah 1 buah static  text dengan menggunakan sebuah Text Tool yang diberi nama Main Menu
  3. Buatlah 1 Buah Symbol Movie Clip beri nama dengan PILIH LEVEL GAMES => “Tambah kan insert keyframe sesuai letak yang anda inginkan beri warna sesuai selera, ulangi sampai warna sudah terlihat menarik”
  4. Lalu Letakkan Sesuai Gambar Dibawah Berikut
  5. Tambahkan Insert Layer dibawah Layer Games, Buat dengan Nama “Bground” untuk Main Menu, Pilih warna sesuai selera.
  6. Berikan action script berikut pada tombol Easy
    on(press){
                gotoAndStop(10);
    }
  7. Berikan action script berikut pada tombol Medium
    on(press){
                gotoAndStop(15);
    }
  8. Berikan action script berikut pada tombol Hard
    on(press){
                gotoAndStop(20);
    }
  9. Berikan action script berikut pada Action Frame
    stop ();
    onEnterFrame=function(){
    }

  • Games Easy


  1. Tambahkan Insert Blank Keyframe pada frame diangka 10 => Klik kanan pada angka 10  Lalu pilih Insert Blank Keyframe.
  2. Buatlah 1 buah static dan beri nama Durasi dengan menggunakan Text Toll.
  3. Buatlah 4 buah dynamic text yang masing-masing Var diberi nama iswah, yuni, respon, dan waktu.
  4. Buatlah 1 buah input text yang Var diberi nama iswahyuni
  5. Buatlah 3 buah button yang masing-masing diberi nama tombol Random, Hasil, Dan Cek.
  6. Buatlah lambang + dan =  (sesuai keperluan, untuk gamenya penjumlahan) 
  7. Buatlah 1 Buah Symbol Movie Clip beri nama dengan EASY => “Tambah kan insert keyframe sesuai letak yang anda inginkan beri warna sesuai selera, ulangi sampai warna sudah terlihat menarik”
  8. Buatlah 1 Buah Symbol Movie Clip beri nama dengan :) “ Gambarkan dengan menggunakan Oval dan Brush Tool sehingga hasil gambar seperti orang tersenyum”. Lambang ini dibuat melambangkan Easy itu Mudah makanya dibuat gambar orang tersenyum.
  9. Lalu letakan seperti berikut dibawah ini
  10. Berikan action script berikut pada tombol Random
    on (press) {
    iswah=random(50);
    yuni=random(50);
    }
  11. Berikan action script berikut pada tombol Hasil
    on (press) {
    iswahyuni=Number(iswah)+Number(yuni);
    }
  12. Berikan action script berikut pada tombol Cek
    on (press) {
                if (iswahyuni == iswah+yuni) {
                            respon = "benar";
                } else {
                            respon = "salah";
                }
    }
  13. Berikan action script berikut pada Frame Easy
    stop();
    waktu=300;
    onEnterFrame=function(){
                if(waktu>0){
                            waktu--;
                }
                if(waktu==0){
                           
                            gotoAndStop(25);
                }
    };


  • Games Medium
  1. Tambahkan Insert Blank Keyframe pada frame diangka 15 => Klik kanan pada angka 15 Lalu pilih Insert Blank Keyframe.
  2. Langkah 2 sampai 5 ikutin seperti game easy diatas.
  3. Buatlah lambang x dan =  (sesuai keperluan, untuk gamenya perkalian) 
  4. Buatlah 1 Buah Symbol Movie Clip beri nama dengan MEDIUM :| “Tambah kan insert keyframe sesuai letak yang anda inginkan beri warna sesuai selera, ulangi sampai warna sudah terlihat menarik”
  5. Buatlah 1 Buah Symbol Movie Clip beri nama dengan :| “ Gambarkan dengan menggunakan Oval dan Brush Tool sehingga hasil gambar seperti orang terpaku”. Lambang ini dibuat melambangkan Medium itu Sedang makanya dibuat gambar orang terpaku.
  6. Lalu letakan seperti berikut ini:
  7. Berikan action script berikut pada tombol Random
    on (press) {
    iswah=random(100);
    yuni=random(100);
    }
  8. Berikan action script berikut pada tombol Hasil
    on (press) {
    iswahyuni=Number(iswah)*Number(yuni);
    }
  9. Berikan action script berikut pada tombol Cek
    on (press) {
                if (iswahyuni == iswah*yuni) {
                            respon = "benar";
                } else {
                            respon = "salah";
                }
    }
  10. Berikan action script berikut pada Frame Medium
    stop();
    waktu=200;
    onEnterFrame=function(){
                if(waktu>0){
                            waktu--;
                }
                if(waktu==0){
                           
                            gotoAndStop(30);
                }
    };


  • Games Hard


  1. Tambahkan Insert Blank Keyframe pada frame diangka 20 => Klik kanan pada angka 20 Lalu pilih Insert Blank Keyframe.
  2. Langkah 2 sampai 5 ikutin seperti game easy diatas.
  3. Buatlah lambang / dan =  (sesuai keperluan, untuk gamenya pembagian) 
  4. Buatlah 1 Buah Symbol Movie Clip beri nama dengan HARD :( “Tambah kan insert keyframe sesuai letak yang anda inginkan beri warna sesuai selera, ulangi sampai warna sudah terlihat menarik”
  5. Buatlah 1 Buah Symbol Movie Clip beri nama dengan :( “ Gambarkan dengan menggunakan Oval dan Brush Tool sehingga hasil gambar seperti orang tsedih”. Lambang ini dibuat melambangkan Hard itu Sulit makanya dibuat gambar orang sedih.
  6. Lalu letakan seperti berikut ini:
  7. Berikan action script berikut pada tombol Random
    on (press) {
    iswah=random(200);
    yuni=random(200);
    }
  8. Berikan action script berikut pada tombol Hasil
    on (press) {
    iswahyuni=Number(iswah)/Number(yuni);
    }
  9. Berikan action script berikut pada tombol Cek
    on (press) {
                if (iswahyuni == iswah/yuni) {
                            respon = "benar";
                } else {
                            respon = "salah";
                }
    }
  10. Berikan action script berikut pada Frame Hard
    stop();
    waktu=100;
    onEnterFrame=function(){
                if(waktu>0){
                            waktu--;
                }
                if(waktu==0){
                           
                            gotoAndStop(35);
                }
    };

  • Game Over Easy


  1. Tambahkan Insert Blank Keyframe pada frame diangka 25  Klik kanan pada angka 25 Lalu pilih Insert Blank Keyframe.
  2. Buatlah 2 buah button yang masing-masing diberi nama tombol Play Again, Dan Back To Menu.
  3. Gambarlah sebuah orang dengan menggunakan gabunggan dari line, oval tool, dan color (warna).
  4. Buatlah kata – kata untuk mengakhiri permainan seperti : “Thank You For Playing My Game” Dengan menggunakan sebuah Text Tool, dan masukan kedalam kotak dengan menggunakan Rectangle dan Line.
  5. Buatlah 1 Buah Symbol Movie Clip beri nama dengan GAME OVER => “Tambah kan insert keyframe sesuai letak yang anda inginkan beri warna sesuai selera, ulangi sampai warna sudah terlihat menarik”
  6. Lalu letakan seperti berikut ini:
  7. Berikan Action Script Pada tombol Play Again
    on(press){
                gotoAndStop(10);
    }
  8. Berikan Action Script Pada tombol Back To Menu
    on(press){
                gotoAndStop(5);
    }
  • Pada Game Over Medium & Hard


  1. Tambahkan Insert Blank Keyframe pada frame diangka 30 => Klik kanan pada angka 30 Lalu pilih Insert Blank Keyframe (Untuk Game Over Medium).
  2. Tambahkan Insert Blank Keyframe pada frame diangka 35 => Klik kanan pada angka 35 Lalu pilih Insert Blank Keyframe (Untuk Game Over Hard).
  3. Ulangi langkah 2 sampe 5 pada game over Easy
  4. Seperti Gambar Dibawah ini untuk game over Medium & Hard
  5. Berikan Action Script Pada tombol Play Again Medium
    on(press){
                gotoAndStop(15);
    }
  6. Berikan Action Script Pada tombol Back To Menu Medium
    on(press){
                gotoAndStop(5);
    }

  • Game Over Hard

  1. Berikan Action Script Pada tombol Play Again Hard
    on(press){
                gotoAndStop(20);
    }
  2. Berikan Action Script Pada tombol Back To Menu Hard
    on(press){
                gotoAndStop(5);
    }

GAMBAR ATAU DESAIN MEMBUAT GAME BERHITUNG


  1. Frame
  2. Motion Tween & Symbol 
  3. Design 
  4. Hasil Keseluruhan 
Klik dengan cara mengirimkan pesan ke facebook saya Disini akan saya kasih link nya :) untuk Mendownload file type .fla atau bisa juga download Video dibawah ini!





Jumat, 06 Desember 2013

Animasi Mobil Berjalan, Daun Bergerak, Lampu Kedap - Kedip dan Pohon Pisang Menggunakan Macromedia Flash File Format .fla

GAMBAR ATAU DESAIN MEMBUAT ANIMASI MOBIL BERJALAN, LAMPU KEDAP - KEDIP DAN POHON PISANG

  • Frame

  • Motion Tween & Symbol

  • Design


  •  Hasil Keseluruhan 

    Klik dengan cara mengirimkan pesan ke facebook saya Disini akan saya kasih link nya :) untuk Mendownload file type .fla atau bisa juga download Video dibawah ini!



   By : Cut Iswahyuni

Animasi Lampu Merah, Mobil Berjalan Dan Air Terjun Menggunakan Macromedia Flash File Format .fla

Sebelum masuk ke contoh mari kita pahami dahulu mengenai Rotasi

Rotasi : pergerakan objek dengan cara berputar

 - menggunakan keyframe
 - menggunakan motion


LANGKAH – LANGKAH MEMBUAT MOBIL BERJALAN
  1.  Buka aplikasi macromedia flash pada komputer anda, lalu pilih "flash document" pada sub menu creat new.

  2. Pada menu insert, pilih new symbol (Ctrl+F8)

  3.  Buatlah nama symbol menjadi roda, type: movie klip à Ok

  4. Gambarlah sebuah roda seperti gambar dibawah ini!

  5.  Langkah selanjutnya yaitu membuat animasi ban tersebut berputar pada symbol roda, frame ke 40, klik kanan dan pilih "insert keyframe"

  6. Setelah diklik maka hasilnya sebagai berikut.

  7. Klik kanan pada "frame 1" kemudian klik "Create Motion Tween

  8. Setelah diklik maka hasilnya sebagai berikut

  9. Pada label "properties" yang terletak di bagian bawah layar, ubah pada kolom "Rotate" yg semula berupa "auto" menjadi "CW" 

  10. Setelah diklik, kemudian klik "control" dan pilih "play" maka ban tersebut akan berputar

  11. Buatlah gambar mobil dengan menggunakan "line tool" atau "rectangle tool" langkah ini bisa anda kreasikan sesuai selera masing2, karena cukup menggabung-gabungkan garis hingga menyerupai bentuk mobil yang diinginkan. kemudian klik kanan pada gambar mobil tersebut dan klik select all, klik kanan klik "convert to symbol" pilih "movie clip" dan ganti nama "symbol 1" menjadi " Body Mobil" kemudian klik ok. Hasil gambar body mobil yang sudah di desain

  12. Langkah selanjutnya yaitu membuat agar mobil beserta ban tersebut terlihat berjalan ke arah kanan. pertama: klik pada symbol "body mobil" kemudian pada "frame 5" klik "insert keyframe" lalu pindahkan  posisi ke atas

  13. Kedua: klik pada symbol "body mobil" kemudian pada "frame 10" klik "insert keyframe" lalu pindahkan posisi ke bawah kembali seperti pada posisi frame 1

  14. Ketiga: klik pada symbol "body mobil" kemudian pada "frame 15" klik "insert keyframe" lalu pindahkan ke atas seperti posisi diframe 5

  15. Masukkan symbol “Roda” dan symbol “Body Mobil”, kedalam scene1, satukan ban dan body mobil yang telah didesain. Seperti gambar dibawah ini!

  16. Pada frame 30 klik “insert keyframe”, seperti gambar dibawah ini!

  17. Pada frame 1 klik “Create Motion Tween”, seperti gambar dibawah ini!

  18.  Demikian juga pada frame 30 klik “Create Motion Tween”, seperti gambar dibawah ini!

  19. Selanjutnya pada frame 1 posisi gambar letak diujung kiri, seperti gambar dibawah ini!

  20.  Pada frame 30 posisi gambar letak diujung kanan, seperti gambar dibawah ini!

  21.  Untuk melihat hasil animasi mobil berjalan klik “Ctrl+Enter”

LANGKAH – LANGKAH MEMBUAT LAMPU LALU LINTAS

  1. Buatlah gambar lampu lalu lintas dengan menggunakan “Oval Tool”,  "line tool" atau "rectangle tool" langkah ini bisa anda kreasikan sesuai selera masing - masing, karena cukup menggabung-gabungkan garis hingga menyerupai bentuk lampu lalu lintas yang diinginkan.

  2. Pada frame 1, Buat lah Lampu lalu lintas berwarna merah, kedua warna (Kuning & Hijau) tidak usah dikasih warna. Seperti gambar dibawah ini!

  3. Pada frame 5 klik kanan lalu pilih “Insert Keyframe

  4. Buat lah Lampu lalu lintas berwarna kuning, kedua warna (merah & Hijau) tidak usah dikasih warna. Seperti gambar dibawah ini

  5. Pada frame 20 klik kanan lalu pilih “Insert Keyframe”

  6. Buat lah Lampu lalu lintas berwarna Hijau, kedua warna (merah & kuning) tidak usah dikasih warna. Seperti gambar dibawah ini!

  7. melihat hasil animasi lampu lalu lintas berjalan klik “Ctrl+Enter”
LANGKAH – LANGKAH MEMBUAT AIR TERJUN
  1.        Buat layer Baru dan Gambarlah sebuah wadah air terjun seperti gambar dibawah ini!

 2. Tambahkan Layer Baru lagi tepat diatas layer wadah air terjun misalnya beri nama air1, 
           Pada frame 1, gambar sebuah air dan letakkan paling atas wadah seperti gambar dibawah ini!

 
            Pada Frame 45, turunkan air tersebut kepertengahan tempat wadah, terlihat seperti gambar berikut!


        3. Tambahkan Layer Baru lagi tepat diatas layer air1, lalu beri nama air2, Pada Frame 45, Gambarkanlah          sebuah air seperti gambar dibawah ini!


         Pada frame 90, pindah pindah posisi air menjadi kebawah dan perbesar lah terlihat seperti gambar berikut!    Dan untuk menghilangkannya tambahkan insert keyframe nya lalu tekan delete.



     4. Demikian Seterusnya : dengan kelipatan panjang waktunya 45, apabila membuat layer baru lagi selang waktunya 20.

GAMBAR ATAU DESAIN MEMBUAT ANIMASI LAMPU MERAH, MOBIL BERJALAN, DAN AIR TERJUN
  • Frame

  • Motion Tween & Symbol

  • Design


  •  Hasil Keseluruhan 

KETERANGAN GAMBAR

     1.      Pohon à Membuat Pohon dengan menggunakan line Tool sehingga membentuk pohon dan beri warna sesuai selera dengan menggunakan Paint Bucket Tool & Fill Color.
    2.      Gunung à Membuat Gunung dengan menggunakan line Tool sehingga membentuk Gunung dan beri warna sesuai selera dengan menggunakan Paint Bucket Tool & Fill Color.
    3.      Awan à Membuat Awan dengan menggunakan line Toll sehingga membentuk Awan dan beri warna sesuai selera dengan menggunakan Paint Bucket Tool & Fill Color.
     4.      Padi à Membuat Padi dengan menggunakan line Tool sehingga membentuk Padi dan beri warna sesuai selera dengan menggunakan Paint Bucket Tool & Fill Color.
     5.      Rumah à Membuat Rumah dengan menggunkan line Toll sehingga membentuk Rumah dan beri warna sesuai selera dengan menggunakan Paint Bucket Tool & Fill Color.
    6.      Jalan Raya à Membuat Jalan Raya dengan menggunakan Line Tool, untuk garis putus – putus menggunakan Line Tool Pada bagian Propertien pilih Stroke Style, dan beri warna sesuai selera dengan menggunakan Paint Bucket Tool & Fill Color.
     7.      Pagar à Membuat Pagar dengan menggunakan line Tool sehingga membentuk Pagar dan beri warna sesuai selera dengan menggunakan Paint Bucket Tool & Fill Color.
     8.      Bunga à Membuat Bunga dengan menggunakan line Tool & Oval Tool sehingga membentuk Bunga dan beri warna sesuai selera dengan menggunakan Paint Bucket Tool & Fill Color.
     9.      Bangku à Membuat Bangku dengan menggunkan line Tool sehingga membentuk Bangku dan beri warna sesuai selera dengan menggunakan Paint Bucket Tool & Fill Color.
    10.  Air Terjun à Membuat Air Terjun dengan menggunkan line Tool sehingga membentuk Air Terjun dan beri warna sesuai selera dengan menggunakan Paint Bucket Tool & Fill Color.

Klik dengan cara mengirimkan pesan ke facebook saya Disini akan saya kasih link nya :) untuk Mendownload file type .fla atau bisa juga download Video dibawah ini!

 


By : Cut Iswahyuni