Harici Veri Dosyasını Grafik Olarak Gösterme

Bu örnekte biz sadece bir text dosyasındaki değerleri gösterdik. Bunun için ASP veya diğer dillerden de yararlanabilir siniz.

Grafik animasyonları oluşturmanın birçok tekniği vardır. Bizim kullandığımız kodlar uygulanması en basit olan kodlardır. Doğru hazırlama tekniği bu olmasa bile hazırlanmasındaki basitlik tercih sebebi olabilir. Animasyonu görmek için butona tıklayınız.

DOSYAYI İNDİR

1- Önce verileri kaydetmek için bir metin dosyası açalım. Kayıt için burada 4 veri kullanılmıştır. Bunları peşpeşe yazalım. bar1=50&bar2=92&bar3=39&bar4=24& Text dosyasını kaydetip kapatalım, dosya adını veriler.txt olarak kaydedelim.

2- Yeni bir flash sayfası açalım.Burada en önemli kısım yukardaki swf dosyasında gördüğünüz gri renkli alandır. Bu alanı 200*200 piksel olarak hazırlayalım. Yatay çizgilerle 10 eşit parçaya bölerek numaralandıralım. İstatistiksel sonuçlar burada yüzde olarak gösterilecektir. Grafik görüntüsünü istediğiniz şekilde süsleyebilirsiniz. Bu alanda en önemli olan kısım gri alanın yüksekliğinin 200 piksel olarak planlanmasıdır.

3- İnsert-->New Symbol komutu verip davranış olarak film klibini seçelim. Dikdörtgen aracı ile sahneye minik bir dikdörtgen çizin. Çizimi seçin ve properties panelinde yükseklik kısmına 1 piksel en kısmını da istediğiniz boyutta seçin. Bu kısım grafiği gösteren hareketli alan olarak kullanılacaktır. Şimdi çizimi tekrar seçin ve F8`e basarak grafik olarak tanımlayın. Properties panelinde grafinin x ve y düzlemini bir yere not edin. 100. kareye bir keyframe ekleyin ve bu karede iken sahnedeki şekli seçin, properties panelinde yükseklik kısmını 200, en kısmını ilki ile aynı bırakın. Başta da belirtildiği gibi bu 200 piksellik alan %100 değerinin karşılığıdır ve bu nedenle ana sahnedeki gri alan ile aynı yükseklikte olmalıdır. 100.karedeki grafi 200 piksel yüksekliğinde ayarlandı. Şimdi grafinin yukarı doğru büyüdüğü düşünüldüğünde x düzleminin aynı y düzleminin farklı olması gerekir. 1.karedeki grafinin y düzlemine bakın. Bizim animasyonumuzda değeri +53 dür. Animasyon yukarı doğru 200 piksel büyüdüğüne göre +53-200= -147 sonucu çıkacaktır. Çünkü y ekseni yukarı doğru negatif aşağı doğru pozitif değer alır.

Sonuç olarak 100.karedeki şeklin x değeri aynı kalacak y değerine -147 yazılacaktır. Hazırlıklar tamamsa 1.kareye bir motion tween komutunu atayın. Hata yapmamışsanız enter tuşuna bastığınızda animasyon aşağıdan yukarıya doğru düzgün olarak hareket edecektir. İşin zor kısmı bitti.

4- Bu filmden 4 adet örneği sahneye 0 alanına yerleştirelim. Align penceresinden hepsini aynı hizaya getirelim. Örnek adı olarak sıra ile grafi1, grafi2, grafi3, grafi4 yazalım. Animasyonu başlatmak için sahneye bir de buton ekleyelim. Butonun örnek adını buton olarak yazalım

5- Ana sahnede en üst kısma bir aksiyon katmanı ekleyelim ve 1.kareyi seçerek:

loadVariablesNum("veriler.txt", 0);
yeni_renk1 = new Color(_root.grafi1);
yeni_renk1.setRGB( 0x006699 );
yeni_renk2 = new Color(_root.grafi2);
yeni_renk2.setRGB( 0xCC0000 );
yeni_renk3 = new Color(_root.grafi3);
yeni_renk3.setRGB( 0x669999 );
yeni_renk4 = new Color(_root.grafi4);
yeni_renk4.setRGB( 0xFF9933 );

İlk dizinde veriler.txt dosyasındaki bilgileri level0`a yüklüyoruz. Alttaki komutlar sahnedeki 4 film klibinin renk ayarlaması içindir. Bu komutlardan dersler bölümünde geniş olarak bahsedilmişti.

Eğer bu renk kodları ile uğraşmak istemiyorsanız grafi animasyonunun 3 ayrı kopyasını çıkartıp farklı renklerde hazırlayıp sahneye eklemeniz de mümkündür.

6- Şimdi sahnedeki grafi1 klibini seçip:

onClipEvent (load) {
stop();
}
onClipEvent (enterFrame) {
if (_root.grafi1._currentframe==_root.bar1) {
_root.grafi1.stop();
}
}

Komutlarını atayalım. İlk komut filmin oynamasını durduracaktır. Altta enterframe olayına atanan komutlar da veriler.txt dosya ile yüklenen bar1 değişkenine ait değer, durulması gereken frame numarasını verecektir. Hatırlayacağınız gibi değerlendirmemiz 100 üzerinden planlandı.(yüzde hesabı olduğundan) Animasyonumuza eklediğimiz frame sayısı da 100 idi. O halde bar1 değişkenine ait değer 50 ise animasyonun 50. karede durması gerekecektir. İşte bu işlem yukardaki komutlarla sağlanmaktadır._currentframe ifadesi o anda animasyonun bulunduğu mevcut kare sayısını verir.

Aynı işlemi diğer üç grafi içinde tekrarlayalım.

Grafi2 için:

onClipEvent (load) {
stop();
}
onClipEvent (enterFrame) {
if (_root.grafi2._currentframe==_root.bar2) {
_root.grafi2.stop();
}
}

Grafi3 için:

onClipEvent (load) {
stop();
}
onClipEvent (enterFrame) {
if (_root.grafi3._currentframe==_root.bar3) {
_root.grafi3.stop();
}
}

Grafi4 için:

onClipEvent (load) {
stop();
}
onClipEvent (enterFrame) {
if (_root.grafi4._currentframe==_root.bar4) {
_root.grafi4.stop();
}
}

7- Son olarak sahnedeki butonu seçelim:

on (release) {
_root.buton._visible=false;
_root.grafi1.play();
_root.grafi2.play();
_root.grafi3.play();
_root.grafi4.play();
}

İlk dizinde tıklama yapıldıktan sonra butonun sahneden kaybolması sağlanır. Çünkü sahnede kalırsa kullanıcı butonu her tıkladığında animasyon kaldığı yerden oynamaya çalışacak ve ortalık karışacaktır. Bu kodlarla engellenebilirse de en pratik yol butonu kaldırmaktır. Buradaki buton ifadesi düğmeye atadığımız örnek adı göstermektedir.

Herşey tamam. Bir noktayı açıklamalıyım. Çekeceğiniz fla dosyasında bazı ek komutlar ve fazladan bir buton vardır. Bunun amacı şu anda sahnedeki animasyonu tekrar tekrar görmek isteyen kullanıcılar için yenile butonunun eklenmesindendir. Çektikten sonra yukardaki komutlarla kontrolünü yapabilirsiniz.

Tekrar belirtmekte yarar var. Bu işlem için uygulanan teknik sadece basit olduğu için tercih edilmiştir. Bu kadar uzun komutlar birkaç fonksiyon hazırlanması ile azaltılabilirdi. Burada amaç en basit yöntemi kullanmaktır.