header ilmugrafis
Home Tutorials Fonts IG Store Contact
 
ilmu grafis » MACROMEDIA DAN ADOBE FLASH

Menambah Sound Pada Button Saat Diklik

Publish: 04 Oktober 2013 | Author & Copyright: Okie Eko W | Status: FREE Tutorial Flash

Tutorial ini adalah kelanjutan dari teknik dasar odobe flash yang telah dimuat sebelumnya yaitu Membuat Flash Button. Di sini saya menggunakan Adobe Flash CS5. Di dalam tutorial ini kita membahas cara membuat Flash Button, menambahkan Sound saat mouse diklik tanpa AS (Action Script).

Setelah sebelumnya kita telah membuat button ( silahkan click tutorial sebelumnya  ), maka pada tutorial kali ini kita akan membahas tentang cara menambahkan sound saat mouse diklik. Anda pasti sudah tahu yang saya maksudkan di sini. Misalnya saat kita mengklik sebuah button makan akan bunyi suara beep, atau suara suara yang unik, atau mungkin sebuah lagu. Nah, dikesempatan kali ini kita akan menyisipkan suara unik saat mouse diklik atau lebih tepatnya “menyisipkan sound di frame down” pada button.

Disini kita tidak menggunakan Action Script (AS)  tapi hanya mengimport sebuah sound ke library kemudian kita insertkan ke button. Penggunaan Action Script akan kita bahas pada tutorial selanjutnya.

Langkah 1 : Silahkan buka Adobe Flash anda.
Di sini saya menggunakan Adobe Flash CS5 , bila anda menggunakan versi lama sebetulnya caranya sama saja. Jadi tidak perlu khawatir.

Gambar : Adobe flash cs5

 

Langkah 2 : Bukalah button yang telah anda buat, atau kita bisa mengambil sample button dari ‘Common Libraries’.
Di sini saya menggunakan sample button yang telah tersedia di ‘Common Libraries’ Adobe Flash CS5. Klik window -> Common Libraries -> Button -> Pilih salah satu button yang menarik untuk anda.

Lihat gambar:
Common Libraries
Gambar : Common Libraries

“koleksi button yang terdapat di Common Libraries merupakan koleksi button yang sudah jadi, anda dapat mempreviewnya melalui control -> test movie-> test “

 

Langkah 3 : Imporlah file sound ke library.
File sound di sini dapat berupa mp3, wav, atau file yang lainnya yang disupport oleh Adobe Flash CS5. Karena sound ini nantinya untuk button, jadi saya sarankan sebaiknya file soundnya pendek saja misalnya 1 detik agar button kita lebih terlihat professional.

Klik file -> import ->Import to library -> pilih sound pendek anda

Lihat gambar :
pilih sound
Gambar : Pilih Sound

“pada gambar diatas, saya memilih file sound yang durasinya 1 detik , kemudian click import dan secara otomatis file anda akan terimport ke flash library“

Lihat gambar:
imported
Gambar : Imported

 

Langkah 4 : Mari kita fokus kembali ke button kita , double click button agar kita masuk ke symbol button tersebut.
Setelah masuk maka kita akan bisa melihat frame ‘up’, frame ‘over’ , frame ‘down’, frame ‘hit’. Nah, di frame ‘down’ lah kita nanti akan menyisipkan sound kita. Sebetulnya anda juga dapat menyisipkan di frame ‘over’  atau frame ‘hit’, tapi supaya lebih terlihat profesional saya sarankan sebaiknya kita sisipkan di frame ‘over’ saja.

Double click button ->lihat timeline->  insert new layer ( di new layer inilah sound kita letakkan )

Lihat gambar:
insert-newlayer.jpg
Gambar : insert newlayer

 

Langkah 5 : di new layer yang baru saja kita buat, klik kanan frame ‘down’ -> insert keyframe
Key frame ini nanti akan kita sisipi sound.

Lihat gambar:
insert-keyframe.jpg
Gambar : Insert Keyframe

 

Langkah 6 : Drag lah sound yang telah kita import di library, ke stage ( lembar kerja ) , ingat pastikan posisi anda di frame ‘over’ ( frame yang baru saja kita buat melalui insert keyframe tadi ).

Nah, ini adalah langkah terakhir kita , setelah didrag ke stage ( lembar kerja ), maka button dengan sound bisa kita gunakan, silahkan anda preview melalui control -> test movie -> test.
Cobalah untuk mengclick maka sound yang telah kita sisipkan tadi akan dimainkan.

Lihat gambar:
drag-tostage.jpg
Gambar : Drag to Stage

Oke, akhirnya selesai juga tutorial tentang button yang kedua ini. Silahkan test movie, click buttonnya, dan dengarkan sound beep nya.

Terimakasih sudah menyimak, semoga bermanfaat…. ^_^

Share URL Share the URL of this Tutorial in IM, Email or post in forums

* Klik Link, copy (ctrl + c) dan paste (ctrl + v)
 

author
<> Info dan Kontak Penulis
Okie Eko Wardoyo

TTL : December 10, 1987
Email : Okie_eko_wardoyo[at]yahoo[dot]com
Facebook : www.facebook.com/okiewardoyo
Tentang Penulis: aku anak mojogedang,karanganyar, solo
alumni smansakra dulu


Rekomendasi ilmugrafis

FLA4
Adobe Flash CS4

CD Video Tutorial Flash mengajarkan membuat animasi, presentasi, banner dan web design

FLG
Flash CS4 Programmer

Video Tutorial Flash membahas Pemrograman dan Animasi berbasis Action Script Flash



[adv.] Supported by
dumetschool kursus desain grafis
DumetSchool.com

PHOTOSHOP
Photoshop Dasar
Photoshop Teks Effect
Photoshop Photo Efek
Photoshop Alternatif
Photoshop Plugins

CORELDRAW
CorelDRAW Dasar
CorelDRAW Logo
CorelDRAW Bebas
CorelDRAW Tools

BLENDER 3D
Blender Dasar

FOTOGRAFI
Lightroom

VECTOR
Adobe Illustrator

ANIMASI
Flash
Swishmax

3D MODELING
3dsMAX
AutoCAD
Cinema 4D

VIDEO EDITING
Adobe Premiere
After Effect
Pinnacle

WEB DESIGN
Dreamweaver
jQuery

PUBLISHING
InDesign
Ms. Paint

FREEWARE
Gimp
Inkscape

ARTS
News
Artikel
Gallery
Jasa Desain
Donasi

FRIENDS
Photoshop Desain
Hog Pictures

Link to us


bantuan information

ilmugrafis launcher
Privacy policy
Peta Situs | Term of Use web edukasi - ilmugrafis.com Indonesia
Copyright © 2017 ilmuGrafis. All Rights Reserved. | RSS | Subscribe
Hak Cipta Dilindungi Undang - Undang & Dmca
eXTReMe Tracker