daha iyi net

Flash, eğitim alanında farklı şekillerde kullanılabiliyor; özellikle eğitim görsellerinin hareketli hale getirilmesi eğitim sektöründe sıkça karşılaşmaya başladığımız bir uygulama tekniği. Ama flash’ı sadece vektör grafikleri hareketlendirmek, özellikle Flash’daki son gelişmelere haksızlık etmek olur. Toplam 36 saatte hazırladığım bir oyunda görsel malzemeyi hareketlendirmek yerine çeşitli videoları kullanıcının seçeneklerine göre peşpeşe ekrana getiriyor.

Bir süredir interaktif senaryo fikrini düşünüyordum; daha önce bir forum altyapısı üzerinde ağaç şeklinde dallanan bir yapıda bir interaktif hikaye yazma modlü hazırlamıştım. DVD hazırlarken de beneri bir teknikte interaktif senaryo yapılabileceğini görmüş ve ufak 1-2 deneme yapmıştım. Geçenlerde ProjectHouse şirketinden tanıdığım bir arkadaş, alelacele bir proje rica etti benden; senaryosu zaten görüştüğümüzde yazılmaya başlanmıştı. Haftasonu talep ettiğim şekilde opsiyonlu cevaplara uygun biçimde videoların çekimini yaptılar ve bana gönderdiler.

Böyle bir proje, keyifli de bir fikir olduğu ve daha sonra farklı senaryolarla kullanılabileceğimi hissettiğimden tüm içeriği XML ile hazırlamak ve buradaki düzene göre bilgileri alıp bunlara göre soru ekranlarını ya da videoları ekrana getirecek oldukça basit, ama pratik bir yapı tasarladım. Sorular, sorulara ait puanlama opsiyonları, opsiyonlu cevaplar ve bunlara uygun eğitici metinlerin hepsini XML dosyaya gömdüm. Tabii ki türkçe bir arabirim olacağından UTF-8 kullanmak kaçınılmazdı.

XML dosyamızı Flash içerisinden en ilkel haliyle şu ActionScript ile ilk frame’de yüklüyor ve yükleme tamamlandığında bir sonraki sahneye ilerliyoruz:

var r = new XML();
r.ignoreWhite = true;
r.onLoad = function(success) {
if (success) {
nextFrame();
}
};
r.load(”setup.xml”)

Bir sonraki frame’de en pratik hareket, uygun boyutlarda bir Array açarak .childNodes[...], .nodeValue, .attributes[...] gibi komutlarla gereken tüm bilgiyi daha rahat kullanabileceğimiz hale getirmek. Tüm verileri çok boyutlu bir array’de toplamak, kullanım açısından en pratik çözüm oluyor. Zira oyunun yapısını bör döngü içerisine oturtursak daha sonra istediğimiz adette soruya olanak tanır. Döngünün tamamını tek frame’de actionscript olarak yapmak büyük külfet olacaktır. Zaten Flash’ın en güzel özelliği isteğe göre yatay (timeline üzerinde) ya da dikey (tek frame’de ActionScript kodu olarak) döngü kurmamıza izin vermesi.

Sık kullandığım bir kod parçacığı da sahnede MovieClip olarak tanımlanmış görselleri buton haline getirmek. .onRelease, .onRollOver, .onRollOut ve .onPress metodlarına dilediğiniz kodları atayarak bunları birer buton olarka kullanabilirsiniz. Ben genellikle bu tür tanımlamaları, sadece ilgili frame’de yaparak o kareye lokal kalmasını sağlarım. Ama timeline’daki tüm sahnelerde hakim butonlar varsa, onları ilk frame üzerinde yapmak sağlıklı olur. .onPress yerine .onRelease kullanmamın da sebebi, mouse tuşu bırakıldığında algılamanın sadece basılı tutmaktan daha doğru olduğunu düşünmemden. Ama her iki metodu kullanarak daha karışık buton mekaniği de kurabilirsiniz. .onDragOut, .onDragOver, .onKeyDown, .onKeyUp, .onKillFocus, .onReleaseOutside ve .onSetFocus benzer şekilde kulalnabileceğiniz diğer movieclip metodlarıdır. Bunlara aynı zamanda event adı verilir ve oluşan bir genel durum üzerine işlem yapmaya odaklı fonksiyonlar yaratmanıza yardımcı olurlar.

_root.bay.onRelease=function(){
gotoAndPlay(’infos’);
}

Flash’da video oynatmak çok basittir. Ama bunun için birkaç şey bilmekte fayda var. Öncelikle Flash’ın stream özelliğinden bahsedeceğim. Klasik web dosyalarının aksine, browser’a kurulu gelen flash plugin’i, .swf dosyaları bir defada yükleyip bağlantıyı kesmez. .swf dosyalar, server’dan bir veri akışı halinde uzun olabilecek bir süreçte yüklenir. Bu sayede, dosya boyutu açısından klasik bir web sayfasına göre hayli büyük düzenlemeler, rahatlıkla yüklenebilir ve bu yükleme sırasında da kullanıcıya artan bir yükleme bilgisi gösterilebilir. Flash dosyalarının temeli bu şekilde progresif bir yükleme sisteminde olduğundan flash ile yapacağınız tüm uygulamalar da aslında bundan faydalanabilir. Ama bu özelliği bilmeyip tüm materyalleri klasik web yüklemesi gibi tek seferde yüklemeye çalışan o kadar çok stie var ki! Bu yüzden zaten flash’a hep ağır yüklüyor damgası basılmıştır. Oysa yapı olarak iyi tasarlanmış bir site, biraz actionscript kod ile bu hantallığından kurtulabilir ve site ziyaretçisi de sürekli kendine ‘yüklüyor mu yüklemiyor mu acaba?’ diye sormaz. Neyse, biraz konu kaymaya başladı sanırım.

Amacımız, flash’ın bu stream olarak yükleme özelliğinden yararlanarak video’ları yüklemek. Video’ların her birinin ismini zaten xml dosyasından alıp kaydetmiştim. Elimdeki videolar, DV kameradan uncompressed avi olarak geldi. Bunları Flash Video Encoder ile webe uygun biçimde sıkıştırarak kaydetmemiz gerekecek. Ama bu işlemi yaparken ince bir detay önem taşıyor; stream olan okuma şeklinde karşı taraftan gelecek bilgi miktarı belirli değildir ve bu yüzden de Flash, akışın ne zaman kesilmesi gerektiğini tahmin edemez. Videoları dosyadan almak yerine kameradan sürekli aktarım da yapabilirdik. Ama yazdığım uygulama, bir sürü küçük video parçası üzerine yapılandığından bunların her biri bittiğinde flash programımız ziyaretçinin vereceği cevaba göre tüm movie üzerinde başka yerlere geçmesi gerekecektir. Bu yüzden videoların bitişlerini algılayabilmek için Flash Video Encoder ile sıkıştırma sırasında her birinin son karesine birer cuepoint eklemek işimizi görecektir.

Videoyu göstermek istediğimiz frame’de FLVPlayBack component’ini sahneye koyup buna isim vermekle başlayabiliriz. Aşağıdaki kod parçacığı ile de stream olarak veri alışına hazırlık yaptıktan sonra oluşturduğumuz işaret noktasını gelip gelmediğini kontrol ediyoruz ve geldiyse ilgili frame’e ilerliyoruz. Burada setBufferTime ile tanımladığımız değer (10) video gösterilmeye başlamadan önce kaç saniyenin hafızaya alınacağı. Bu süre ne kadar artarsa videonun başlangıçta gösterime geçmeden bekleyeceği süre de o kadar artar; ama gösterim sırasında da o kadar süreyi hafızada tamponlamış olduğu için akış rahat ilerler. .onCuePoint ile videoyu sıkıştırırken belirttiğim tipte (event) ve isimde (end) bir işaret noktası geldiğinde gerekli işlem yapılır.

var my_nc:NetConnection = new NetConnection();
my_nc.connect(null);
var my_ns:NetStream = new NetStream(my_nc);
mc.my_video.attachVideo(my_ns);
my_ns.setBufferTime(10);

my_ns.onCuePoint = function(infoObject:Object) {
if((infoObject.type == “event”) && (infoObject.name == “end”)){
gotoAndPlay(’quest’);
}
}
my_ns.play(’video.flv’);

Genelde bitmiş bir uygulama vermek yerine, bunları okuyanların bu temel bilgiler üzerinden kendi istediklerini yapmaya çalışmalarının, biraz da keşfetmeye vakit ayırmanın daha kalıcı bir bilgiye dönüşeceğini bildiğimden bitmiş net bir uyuglama yerine böyle ufak parçaların daha yararlı olduğunu düşünüyorum. Ama buradaki örnekler, hata yapmaya çok müsait olduğundan basit bir örneği önümüzdeki günlerde buraya koyacağım.

This entry was posted on Thursday, September 28th, 2006 at 8:09 pm and is filed under actionscript, flash, web teknolojileri. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.