8 Comments

Membuat StopWatch

Membuat sebuah aplikasi untuk digunakan sebagai pencatat waktu. Nama kerennya adalah Stop Watch. Anda pasti kan tahu apa itu Stop Watch, bagaimana cara bekerjanya Stop Watch. Disini kita akan memcoba untuk membuat sebuah Stop Watch. Ikuti langkah berikut :

Buat file baru. Atur stage dengan ukuran 300 x 150 pixels dengan warna putih.

Pilih Rectangle Tool pada toolbox, set Rectangle Radius dengan 10. Fill Color warna merah dan tanpa Stroke Color.

Buat objek persegi panjang pada stage. Lalu atur ukuran objek persgi panjang tadi dengan ukuran 290 x 140.
Posisikan objek tepat di tengah-tengah stage dengan tekan Ctrl + Alt + 2 lalu tekan Ctrl + Alt + 5.

Gambar 5.23

Pilih objek tadi, lalu pada panel Color Mixer kita akan membuat warna gradasi. Pilih Fill Color, pada type pilih Linier. Atur warna seperti berikut :

Gambar 5.24

Kemudian klik Paint Bucket Tool dan atur warna gradasi atas ke bawah hingga hasilnya seperti gambar berikut :

Gambar 5.25

Pilih objek, lalu klik Free Transform Tool pada toolbox.
Lakukan penyalinan objek dengan tekan tombol Ctrl + C lalu tekan Ctrl + Shif + V. Kemudian sambil menahan tombol Alt kecilkan ukuran objek hasil salinan atau objek yang kedua, maka hasilnya akan terlihat seperti pada gambar :

Gambar 5.27

Objek kedua masih dalam keadaan terpilih, pada panel Color Mixer, ubah nilai Alpha pada semua warna menjadi 100%, maka hasilnya akan terlihat seperti pada gambar berikut :

Gambar 5.28

Tambahkan satu layer dan beri nama ”efek”. Klik Rectangle Tool set Corner Radius dengan 0, buat objek persegi panjang dengan ukuran 290 x 25. posisikan objek hingga seperti gambar berikut :

Gambar 5.29

Objek persegi panjang tadi masih dalam keadaan terpilih, pada panel Color Mixer ubah nilai Alpha menjadi 40% maka objek akan terlihat transparan seperti gambar berikut :

Gambar 5.30

Klik Text Tool, buat teks Static ”GAPRANIMATOR” dengan Font : Arial, Size : 16, warna : hitam, Bold. Lalu posisikan objek teks seperti gambar berikut :

Gambar 5.31

Berikan efek Drop Shadow dengan cara klik tab Filter pada panel Properties lalu klik tombol + dan pilih Drop Shadow. Atur nilai Blur : 4, Strength : 100%, Quality : Low, Color : putih, Angle : 45 dan Distance : 2.

Gambar 5.32

Selanjutnya kita akan membuat tempat untuk perhitungan waktu. Klik Rectangle Tool set Corner Radius dengan 5, pada Stroke Color pilih warna putih Fill Color pilih warna hitam. Buat objek persegi pada stage, lalu aturlah ukuran menjadi 225 x 25, tekan tombol Ctrl + Alt + 2 lalu tekan Ctrl + Alt + 5 untuk menengahkan objek tepat ditengah stage.

Gambar 5.33

Objek tadi masih dalam keadaan terpilih, pada panel Color Mixer ubah nilai Alpha menjadi 70% maka hasilnya akan terlihat seperti gambar berikut :

Gambar 5.34

Langkah selanjutnya adalah kita akan membuat tombol-tombol untuk tombol Start, Stop dan Reset.
Buat layer baru dan ganti nama menjadi tombol.

Gambar 5.35

Klik Rectangle Tool, set Corener Radius dengan 5. Pada panel Color Mixer, klik Fill Color pilih warna putih dan tanpa Stroke. Buat objek persegi panjang kecil dengan ukuran 50 x 15. Posisikan seperti gambar berikut :

Gambar 5.36

Objek masih dalam keadaan terpilih. Pada panel Color Mixer ubah nilai Alpha menjadi 60% sehingga akan terlihat seperti gambar berikut :

Gambar 5.37

Klik Text Tool pada toolbox, buat teks Static tuliskan ”Start” dan atur jenis Font : Courier New, Size : 12, warna : merah tua (#990000), Bold.
Posisikan tepat diatas objek persegi kecil tadi hingga seperti gambar berikut :

Gambar 5.38

Pilih layer tombol, klik di frame 1 untuk menyeleksi semua objek yang ada pada layer tombol. Kemudian tekan F8 untuk mengubahnya ke symbol.
Pilih behavior Button beri nama start dan pada Registration pilih point bagian tengah.

Gambar 5.39

Pilih objek tadi yang baru diubah menjadi button, klik dua kali untuk masuk ke modus edit symbol. Lalu klik di frame Over dan klik kanan pilih Insert Keyframe, pilih objek persegi yang kecil lalu ubah nilia Alpha pada panel Color Mixer menjadi 20%.

Gambar 5.40

Klik di frame Down, klik kanan pilih Insert Keyframe.Ubah warna pada teks menjadi warna putih dan ubah warna juga pada objek persegi dengan warna merah tua (#990000) dengan nilai Alpha 100%. Maka hasilnya akan terlihat seperti gambar berikut :

Gambar 5.41

Tekan Ctrl + E untuk kembali kemodus edit dokumen. Pilih objek tombol tadi (Button Start) pada Library lalu klik kanan pilih Duplicate, beri nama stop. Pilih tombol stop pada Library lalu klik kanan dan pilih Duplicate beri nama reset. Seret ke dua tombol tadi (stop dan reset) ke stage, lalu aturlah posisinya hingga seperti gambar berikut :

Gambar 5.42

Kemudian pilih tombol Start yang kedua dari kiri (tombol stop pada Library), klik dua kali untuk masuk ke modus edit symbol. Klik di frame Up, ganti teks Start menjadi Stop.

Gambar 5.43

Klik di frame Over lalu pilih teks dan ganti teks Start menjadi Stop.

Gambar 5.44

Klik di frame Down lalu pilih teks dan ganti teks Start menjadi Stop.

Gambar 5.45

Setelah itu, tekan Ctrl + E untuk kembali ke modus edit dokumen. Pilih tombol berikutnya. Klik dua kali untuk masuk ke modus edit symbol. Lakukan hal yang sama pada setiap frame untuk mengganti teks, ganti teks Start menjadi Reset.

Gambar 5.46

Tekan Ctrl + E untuk kembali ke modus edit dokumen. Dan hasilnya akan terlihat seperti gambar berikut :

Gambar 5.47

Sekarang kita sudah mempunyai tombol-tombol yang nantinya akan berfungsi untuk mengontrol waktu mulai dari memulai waktu, menghentikan waktu dan mereset waktu.

Pada setiap tombol-tombol berikan nama instance pada tombol Start, Stop, dan Reset. Untuk tombol Start beri nama instance ”mulai_waktu”, untuk tombol Stop beri nama instance ”stop_waktu”, dan untuk tombol Reset beri nama instance ”reset_waktu”.

Selanjutnya kita akan membuat field teks bertipe Dynamic untuk menampilkan angka-angka dari waktu.
Buat layer baru dan ganti nama menjadi waktu.

Gambar 5.48

Klik Text Tool lalu pilih Dynamic Text, Font : Arial, Size : 16, warna : putih, Bold, Align : Center. Buat field teks tepat di tengah-tengah stage seperti gambar berikut :

Gambar 5.49

Gambar 5.50

Langkah selanjutnya kita akan memberi ActionScript untuk dapat menjalankan aplikasi pencatat waktu.
Buatlah layer baru dan beri nama action.
Klik frame 1 pada layer action, lalu buka panel Action dan tuliskan script seperti berikut :

Gambar 5.52

Script diatas adalah script untuk membuat variabel yang nantinya akan dapat dipanggil sesuai dengan fungsinya dan untuk mendeklarasikan fungsi untuk dapat mengkalkulasi waktu.
Kemudian tambahkan lagi script di bawahnya (dibawah no 16), script tambahan tersebut digunakan untuk membuat fungsi pada tombol yang nanti untuk menjalankan fungsi-fungsi dari waktu dan tombol serta untuk mengkalkulasikan waktu.

Script lanjutan1Script lanjutan2Script lanjutan3

Setelah Anda menuliskan script-script diatas, simpan file dan publish file ke format Flash (.swf) dank e format Windows Projector (.exe) kemudian jalankan aplikasi atau movie yang Anda buat.

Gambar 5.53

Semoga bermanfaat………….
Terima kasih

By : gapra27

8 comments on “Membuat StopWatch

  1. wahhhhh bagus banget,,,,,
    Q boleh kan down load mua yahhhhh
    makasih banget

  2. kalau buat nyimpannya gimana mas??
    pada saat stop pertama tercatat waktu sekian menit… lalu truz berurutan seperti itu…
    dan apa yang perlu ditambahkan??
    kasih scripts lagi donk…. hehehe

  3. kalo bwt untuk menyimpannya… Anda harus mengkoneksikannya dengan database
    misalnya database MySQL atau sejenisnya oracle mungkin…
    itu akan butuh pembahasan yang lebih rumit..

  4. tutorialnya bagus, boleh minta lagi gak gimana scriptnya supaya masukin stopwatch ini ke game, supaya pas waktu abis, gamenya jd game over…
    klo sempet kirim ke email ya..
    thanks bgt atas tutorialnya..

    • scriptna sama kyk distopwatch, cm tinggal tempel ja di game flash-na tp berbeda layer dan dikondisikan ke fungsi gamenya atau movieclip gamenya…
      tambahin kondisi untuk , jika waktu habis maka akan berlanjut ke game dan memulai game…

      dibwh contoh kondisinya:
      if(nama_instance_stopwatch-nya < o) {
      then gotoAndPlay(frame game mulai);
      }

  5. Terima kasih ya … salam kenal

  6. aduh aduh… udah ngikutin step by step dari awal, capek banget.. pas endingnya ternyata scriptnya ga bisa dicopy, ternyata itu gambar. kita disuruh ngetik satu persatu scriptnya. pelit banget ngasih informasinya. sangat disayangkan.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: