Photoshop Magazin
 


ActionScript 3.0 ile Gelişmiş Ses Kontrolü

01 October 2009 | Sayı: Oct 2009
 
1 2 3 4 5
 

Web sitelerinde kullandığınız seslerin sitenizi yavaşlatmasına izin vermeyin ve kullanıcıya gelişmiş kontrol imkanı vererek sitenizi gezerken keyif almasını sağlayın.


ActionScript 3.0 ileGelişmiş Ses Kontrolü
Ses Kontrolünü Tasarlamak
Ses kontrolü tasarlarken ilk tavsiyem bu tasarımı tamamen bir MovieClip sembolünün içinde yapmanızdır. Böylece bu kontrolü daha sonra farklı yerlere taşımanız hatta farklı sitelerde de kopyalayıp kullanmanız çok daha kolay olacaktır.

Ses kontrolünü yukarıdakine benzer bir şekilde tasarlayın. Aynı tasarımı yapmak zorunda değilsiniz, dilerseniz kendi istediğiniz ses kontrolünü tasarlayabilirsiniz.
Bu tasarımı yaparken katman yapınız ise aşağıdaki gibi olsun. Bu şekilde çok daha yönetilebilir bir tasarım elde etmiş olursunuz.

Burada en önemli olan sesDuzeyi katmanında tasarladığımız üçgenin üzerindeki maske katmanıdır. Maske katmanında yapacağımız tasarım ile ses açılıp kısılırken sesin düzeyini görsel olarak temsil edecek olan üçgenin görünen alanını değiştireceğiz.
Maskeyi Oluşturmak
Maske olarak çizeceğimiz şekil ses düzeyini temsil eden üçgeni tamamen kaplamalıdır. Bunun için en doğru seçim bir dikdörtgen olacaktır.Ses düzeyini tamamen kapyalacak bir dikdörtgen çizin ve onu MovieClip olarak sembole dönüştürün.
Ancak sembole dönüştürürken mutlaka Registration noktasını sağ orta nokta olarak belirleyin

Registration noktası, sembollerin merkez noktasını belirler. Ses kontrolünü yaparken maskenin sağ noktasını baz alarak hareketleri yapacağımız için bu seçimi yapmalıyız.
Ses Düzeyini Kullanıcıya Göstermek
Ses düzeyini kullanıcıya göstermek için bir önceki aşamada tasarladığımız maskeyi kullanacağız.Maske olarak oluşturduğumuz dörtgeni sağa ve sola hareket ettirerek istediğimiz sonuca ulaşmış olacağız.

Maskemizin en solda olduğu konum -30, en sağda olduğu konum ise +30 konumudur.Bu konumlar sesin minimum ve maximum düzeylerini temsil edecektir. Ses maximum düzeydeyken maske en sağda, ses minimum düzeydeyken maske en solda, ses ara düzeylerdeyken ise maske bu iki konum arasında olacaktır.
Butonları Oluşturmak
Ses kontrolünü yapmak üzere oluşturacağımız toplam 5 tane buton bulunmaktadır. Bunlar sesi açma ve kapama butonları, ses düzeyini azaltma ve arttırma butonları ve ses düzeyini sürüklemek için kullanacağımız butondan oluşacak.

Bu butonları oluştururken her birini ayrı ayrı semboller yapmak yerine, hepsini tek bir sembolün kopyaları olarak kullanabilirsiniz.

Butonları oluşturduktan sonra özellikler panelindeki Instance Name bölümünü kullanarak oluşturduğunuz butonlara eksi_btn, arti_btn, ac_btn, kapat_btn ve maske_btn isimlerini verin. Sesi Yüklemek ve Başlatmak Web sitemizin yavaş açılmaması için sesi Flash’ın içine import etmek yerine Action-Script ile klasörden çağırıp oynatmaya başlayacağız. Kodumuzu yazmaya başlamak için actions katmanının ilk karesini seçip Actions(F9) panelini açın.Sesi yüklemek, çalmak ve daha sonra ses düzeyini yönetmek için 3 farklı Class kullanmamız gerekiyor.
Bunlar;
Sound
SoundChannel
SoundTransform
Sound sınıfı, harici sesi yüklemek, SoundChannel, sesi başlatıp durdurmak, SoundTransform ise ses düzeyini ayarlamak için kullanılacak sınıflardır. Bu 3 sınıfı kullanarak birer nesne tanımlıyoruz. Bunların isimleri sırasıyla ses, sesKontrol ve sesDuzeyi olsun.
Bu 3 nesneyi tanımladıktan sonra ses.load() diyerek Flash dosyamızla aynı klasörde bulunan sound.mp3 dosyasını yüklüyoruz.Tanımlamaları ve ses yükleme komutunu bitirdikten sonra devreye olay ve olay işleyici giriyor. Ses yükleme işlemi bittiği anda sesi çalmaya başla diyoruz.

ses.addEventListener(Event.COMPLETE,
baslat);
function baslat(event:Event) {
sesKontrol = ses.play(0,999);
}
Bu kod bloğunda gördüğünüz play(0,999); sesin 0. saniyesinden başla ve 999 kez tekrar et anlamına gelmektedir.Ses çalmaya başladığı anda da ac_btn butonunu devre dışı bırakıyoruz. Çünkü zaten çalmakta olan bir ses var. Eğer tekrar çalmaya
başla dersek bu sefer sesler birbirine karışmış olur.
Sesin Kontrolünü Sağlamak
Ses yükleme ve başlatma işini bitirdikten sonra sıra geldi ses kontrolünü sağlamaya. İlk olarak aç/kapat işlemini yapmak üzere ac_btn ve kapat_btn butonlarını çalışır hale getiriyoruz. Kapat butonuna tıklandığı anda yapılması gereken işlem stop(); aç butonuna tıklandığında yapılacak olan ise ses yüklemesi bittiği anda yaptığımızın aynısı olacak. Açma ve kapama işlemlerinden sonra asıl önemli olan ses düzeyini nasıl azaltıp/arttıracağımızdır. Ses arttır ve azalt butonlarına tıklandığı anda mevcut ses düzeyini belirli oranlarda değiştireceğiz. Ancak bu aşamada önemli olan nokta ses zaten minimum yada maximum düzeyde ise daha fazla azaltılmasını veya arttırılmasını engellemektir.

Bunu da koşullu deyimleri kullanarak sağlıyoruz.
if (sesDuzeyi.volume > 0) {
sesDuzeyi.volume -= 0.1;
sesKontrol.soundTransform =
sesDuzeyi;
maske_mc.x -= 6;
}
Bu kod bloğu, eğer sesin şu anki düzeyi 0’dan büyükse sesi %10 azalt ve maskeyi 6px sola çek anlamına gelmektedir.
Artı butonuna ise bu kodun tam tersi yazılmalıdır. Yani, eğer sesin şu anki düzeyi 100’den küçükse sesi %10 arttır ve maskeyi 6px sağa çek...Tabiki bütün bu işlemleri yaparken butonlara tıklanma olayını kullanıyoruz.
arti_btn.addEventListener
(MouseEvent.CLICK, sesArttir

Sürükleyerek Kontrolü Sağlamak
Açma/kapama, ses düzeyini arttırma/azaltma işlemlerini yaptıktan sonra son olarak geriye sürükleyerek kontrol kalıyor. Ses düzeyini temsil eden üçgen üzerinde fare ile taşıma yapılarak sesin düzeyini değiştirmek istiyorsak bu kodları çalışmamıza eklememiz gerekiyor.Maske butonuna tıklanıldığı anda maske olarak kullandığımız maske_mc sembolünün sürüklenmeye başlaması gerekiyor. Ancak sürüklenme işlemi sadece yatayda ve -30 ile +30 koordinatları arasında gerçekleşmeli.
Bunu sağlamak için şu kodu kullanıyoruz.


maske_mc.startDrag(true,
new Rectangle(-30,maske_mc.y,60,0));
Sürükleme işleminde 3 farklı olay kullanıyoruz.
Maske için hazırladığımız butona basılması (MOUSE_DOWN), sahnenin herhangi bir yerinde farenin bırakılması (MOUSE_UP) ve sahnenin herhangi bir yerinde farenin hareket ettirilmesi (MOUSE_MOVE)... Olayları kullanırken, olay işleyicilerin bir kısmını
maske_btn üzerine bir kısmını ise stage üzerine tanımlıyoruz.
Bunun sebebi sürüklemeyi belirli alanlarla kısıtlıyor olmamızdır. Fare kısıtlanan bölge dışına çıktığında butonun dışına çıkmış olur ve fare bırakıldığında butonun üzerinde değil sahnenin herhangi bir noktasındadır.
Önemli olan nokta ise sürüklenen ve bırakılan dörtgenin ses düzeyini de aynı anda etkilemesidir.
Burada yapılması gereken, dörtgenin max. ve min. noktalarındaki konumlarını 0 ile 1 arasında değişen ses düzeyine eşitlemektir.
(maske_mc.x+30)/60;
-30 ile 30 arasında değişen konum değerlerini 0 ile 1 arasına getirmek için yukarıdaki matematiksel işlemi uyguluyoruz.
Böylelikle, ses kontrolü örneğimizi tamamlamış olduk.
Örnek Dosyalar Uygulamanın çalışır halini indirmek için http://www.actionscripttr.com adresini ziyaret edebilirsiniz.

Önümüzdeki sayılarda buluşmak üzere...

 

October 2009

 


ActionScript