Dijital Kronometre ve Saat

Dijital Kronometre ve Saat Hazırlama

Dijital saat hazırlama işlemi oldukça basit komutlar zinciri ile sağlanabilir. Halbuki kronometre hazırlama işlemi zahmetli sayılabilir. Kronometre ile başlayalım.

Dijital kronometre hazırlama: Bu işlem için faydalanılan komutlar getTimer ve entereFrame olayıdır.En önemli prob em ise kronometreyi çalıştırdıktan sonra sıfırlayıp tekrar çalıştırmanın sıkıntılı komutlar zincirini gerektirmesidir. Zorluğu aşabilmenin en pratik yöntemi fonksiyonların kullanılmasıdır. Şimdi alttaki örneği inceleyelim. Gördüğünüz gibi kronometre için 3 buton kullanılmaktadır. Başlama, duraklama ve sıfırlama butonları.

DOSYAYI İNDİR

İpucu: Butonlara dikkat ederseniz gömülü bir görünüm içeriyor. Bu işlemi yapmak çok kolay.Butonların dış kenarlarını seçip üst ve sol kenarı siyah, alt ve sağ kenarı beyaz yaparsanız bu tür bir efekt elde edebilirsiniz. Artık kronometremizi oluşturalım:

1- Yeni bir flash sayfası açalım, sahnede dinamik metin kutusu oluşturalım. Kutunun değişken adını goruntu olarak ayarlayalım. Burada yapılan hata isim için instance name kutusunu kullanmaktır. Bu hataya düşmeyelim ve properties panelinde var alanına bu ismi yazalım.İçine istenilen font ve renklerde rakam için ayarlamaları properties panelinde oluşturalım. Burada öneri daima _typewriter fontunun seçilmesi olmuştur.Bu font harfler ve rakamlar için sabit aralık sağladığından rakamlar değişirken zıplama gibi hatalı bir görüntü vermezler. Sayfanın altındaki digital saate bakın. Burada farklı bir font kullanılmıştır. Rakam değişmelerinde minik oynamalar dikkatinizi çekecektir. Kutuya ilk görünümü sağlaması için 0:00:00:00 yazalım. Bunlar sırası ile saat, dakika, saniye ve saniye kesirlerini göstermektedir.Bu katmana isterseniz bizim yaptığımız gibi süslemeleri ekleyebilirsiniz. Şimdi sahnedeki dinamik kutu ve diğer tüm elemanları seçin ve F8`e basın. Sembol çevirim kutusundan film klibini seçin ve hem kütüphane hem de örnek adı olarak kronometre adını yazın.

2- Sahnedeki klibe çift tıklayarak açın. Örnekte gördüğünüz gibi daha önceden hazırladığınız başlama, duraklatma ve sıfırlama butonlarını klip içine yerleştirin. Her üç butonu seçin ve F8 butonuna basarak bunları film klibine çevirelim.Kütüphane ve örnek adı olarak butonlar yazalım. Şu anda elimizde kronometre klibi ve bunun içinde butonlar klibi bulunmaktadır. Bu yuvalanmanın amacı ilerde _parent komutunu kullanacağımız içindir. Butonlar klibini açalım ikinci kareye bir frame ekleyelim. Bu klibe ilerde enterFrame olayı ekleneceğinden tetikleme için ikinci bir karenin eklenmesinde yarar vardır. Şu anda kodları yerleştirmeye hazırız.

3- Butonlar klibini tekrar açalım ve buradaki kırmızı kare şeklindeki butonu seçip şu komutları atayın:

on(release){
_parent.resetle()
}

Sıfırlama düğmemiz bu olacak. _parent bildiğiniz gibi bir üstteki film klibine işaret eder. Demek ki bu butona basıldığında kronometre klibinin ilk karesine yerleştirilecek resetle fonksiyonunu çalıştırarak sahnedeki rakamları sıfırlayacaktır. Bu fonksiyonu daha sonra anlatacağız. Şimdi yeşil renkli başlat butonunu seçelim ve:

on(release){
_parent.oynat()
}

komutunu verelim. Bu da aynı yerdeki oynat fonksiyonunu çalıştıracaktır. Ortadaki duraklat butonunu seçelim:

on(release){
_parent.duraklat()
}

Yukardaki komutlarda duraklat fonksiyonunu çalıştırarak kronometrenin duraklamasına neden olacaktır.

4- Kronometre film klibini açalım ve içindeki butonlar klibini seçelim. Actionscript panelini açalım ve:

onClipEvent(enterFrame){
_parent.guncelle();
}

komutlarını ekleyelim. enterFrame olayı çok önemlidir . Bu klip her tekrarladığında guncelle fonksiyonunu çağırarak buradaki işlemlerin devamlı icra edilmesini sağlayacaktır. Guncelle fonksiyonu kronometrenin çalışması için gereken komutlar zincirini içerecektir.

Bağlantılar hazırlandı, geriye fonksiyonları hazırlamak kaldı. Şu anda 4 tane fonksiyon hazırlayacağız.

- Oynat
- Duraklat
- Resetle
- Guncelle

Kronometre film klibini açalım ve ilk kareye üstteki 4 komutumuzu yazalım:

function oynat(){
if(duraklama){
baslamazamani=getTimer()-gecenzaman;
}else{
baslamazamani=getTimer();
}
duraklama=false;
zamanlama=true;
}

function duraklat(){
zamanlama=false;
duraklama=true;
}

function resetle(){
zamanlama=false;
duraklama=false;
goruntu="0:00:00:00";
}

İncelemeye guncelle fonksiyonundan başlayalım. Önceden bu fonksiyonu butonlar klibine enterFrame olayı ile bağladığımızdan devamlı tekrarlanan tek fonksiyon olmaktadır. Öbür fonksiyonlar buton tıklaması ile bir kez çalışmaktadır. Guncelle fonksiyonu devamlı çalıştığından aralıksız olarak sistem bilgisindeki geçen süre milisaniye olarak kayda giriyor ve buradaki komutlarla işlenerek saat, dakika ve saniyelerine ayrılıyor. bu yolla dinamik metin kutusundaki geçen süre devamlı güncelleniyor. Nereye kadar ? Diğer butonlara basarak güncelleme işlemi kesilene kadar.

Burada bir zamanlama değişkeni oluşturuluyor ve bu değişkene onun altındaki komutlar atanıyor. Önce geçenzaman hesaplanıyor. Geçenzaman o andaki süre ile başlama anındaki sürenin farkını veriyor. Başlama anındaki süre ise oynat fonksiyonunda tanımlanacaktır. Bu komutla o andaki geçen süre elimizde oluşturulmuştur. Bu süreyi şimdi saat, dakika, saniye ve saniye kesirlerine çevirerek dinamik metin kutusunda gösterilmesini sağlayacağız.

getTimer komutu bilindiği gibi o anki süreyi milisaniye cinsinden verir. Bu değeri 60*60*1000=3.600.000 rakamına bölersek saat cinsinden değeri elde ederiz. Math.floor komutu ile bu değeri yuvarlıyoruz.(gecenzaman_saat=Math.floor(gecenzaman/3600000);)

Saat değerini böldükten sonra kalanzamanı (kalanzaman=gecenzaman-(gecenzaman_saat*3600000); buluyoruz. Kalan zaman içinde daika değeri var mı araştırıyoruz:

Bunun için kalanzamanı 60*1000=60.000 rakamına bölüyoruz. Dakika değerini tesbit ediyoruz. Yine saat işlemindeki gibi kalanzamandan dakika değerini çıkartıp kalan değerde saniyeyi arıyoruz. Bunun içinde kalandeğeri 1saniye 1000milisaniye olduğu için o rakama bölüyoruz. Hala kalan değer varsa o değeride küsürat olarak kullanıyoruz.

Aralarda gördüğünüz if işlemleri elde edilen değer 10 altında bir rakamsa görselliği bozmamak için yanına sıfır eklemek için kullanılmıştır.

Şu anda elimizde geçen süre ayrıntılı olarak mevcuttur. bunu dinamik metin kutusuna atamak için :

goruntu=gecenzaman_saat+":"+gecenzaman_dakika+":"+gecenzaman_saniye+":"+gecenzaman_kesirler;
komutunu ekliyoruz. Aralara görsellik katmak için iki nokta üstüste ekliyoruz. Bunlar değişken değil string olduğundan çift tırnak içine alıyoruz. Bu fonksiyon tamam. Artık devamlı tekrarlanarak görüntümüzü sağlayacaktır.

Duraklat fonksiyonuna geçelim. Durakla butonuna basıldığında bu fonksiyon çağrılacak ve guncelle fonksiyonu içindeki zamanlama değişkeni false olarak atandığından yukardaki komutlar stoplanacak ve o ana kadar geçen sabit değeri gösterecektir. Burada bahsolunan duraklama değişkeni oynat butonuna tekrar basıldığı an kronometrenin gösterilmeyen süreyi de kapsayacak şekilde çalışması için kullanılmıştır.

Resetle fonksiyonunda ise hem zamanlama hemde duraklama değişkeni false olarak atanmıştır.Duraklama fonksiyonu da kalktığı için tekrar oynat butonuna basıldığında kronometre sıfırdan başlayacaktır. Yine görsellik için sıfırlandığını gösteren:
goruntu="0:00:00:00"; işlemini dinamik kutu için hazırlamakta yarar vardır.

Oynat fonksiyonu sonuncu işlemi tamamlamamızı sağlayacaktır. Burada oynat butonuna basıldığı andaki başlama zamanı değerini elde ediyoruz. Duraklamayı false, zamanlamayı true olarak atayarak guncelle fonksiyonunu çalıştırıyoruz. Dikkat ederseniz oynat butonuna 2 nedenle basılmaktadır. Birincisi ilk defa oynatmak için, ikincisi bir kez oynatıp sonra durakla butonuna bastıktan sonra tekrar oynamasını istediğimiz zaman. Peki bu ayırımı nasıl yapacağız? Bir if işlemini yaparak

if(duraklama){
baslamazamani=getTimer()-gecenzaman;

o anki getTimer değerinden o ana kadar geçen süre çıkartılarak başlamazamni değişkenine atanır. Guncelle fonksiyonuda bu değer işlenerek oynat butonuna ikinci kez basılıp basılmadığı anlaşılır.İkinci kez basılmışsa kaldığı yerden değerler işlemeye devam eder. Değilse (else sorgusu yapılır) ilk kez basılmış kabul edilerek işleme devam edilir.

Herşey yerli yerine oturdu. Klip düzgün çalışacaktır.Fakat zor bir çalışma olduğu da bir gerçek.

Dijital saat hazırlama:

Bu örneğimizde özellikle sıfır eklentisi yapılmamış ve _typewriter fontu dışında bir font kullanılmıştır. Rakamların görselliği bozacak şekilde değişirken nasıl oynadığına dikkat edin.

Aynı çalışmanın düzeltilmiş şekli. Aşağıdaki örnekte saatin çalışması 24 üzerinden ayarlanmıştır.

DOSYAYI İNDİR

1- Sahneye dinamik bir metin kutusu ekleyin. Kutunun değişken adını goruntu olarak yazın. Görsellik istiyorsanız dosyadaki gibi bazı eklentiler yerleştirin. Sahnedeki tüm elemanları seçip F8`e basarak film klibi haline getirin.

2- Film klibini seçerek actionscript panelini açın. Alttaki kodları ekleyin:

onClipEvent (enterFrame) {
saat = new Date();
mevcut_saat = saat.getHours();
mevcut_dakika = saat.getMinutes();
mevcut_saniye = saat.getSeconds();
if (mevcut_saat<10) {
mevcut_saat = "0"+mevcut_saat;
}
if (mevcut_dakika<10) {
mevcut_dakika = "0"+mevcut_dakika;
}
if (mevcut_saniye<10) {
mevcut_saniye = "0"+mevcut_saniye;
}
goruntu = mevcut_saat+":"+mevcut_dakika+":"+mevcut_saniye;
}

Tüm işlem bu kadar. Şimdi kodları irdeleyelim. EnterFrame işleyicisi önemlidir ve kodların devamlı icra edilmesini sağlar.

Önce saat adında bir nesne tanımlıyoruz. Bu nesnenin sistem saatinden aldığı bilgiyi saat, dakika ve saniye olarak ayrı değişkenlere atıyoruz. Görsellik katmak için bunlara if komutları ekleyerek şayet rakamlar 10 değerinin altında ise asıl rakamın hemen solunda bir 0 görüntüsü oluşturuyoruz. Son olarakta tüm değerleri goruntu adındaki dinamik metin kutusuna atıyoruz. Buradaki çalışma 24 saat üzerindendir. İsterseniz yeni if komutları ile 12`lik bir saat sistemi de oluşturabilirsiniz.