Yeniden mehaba. Daha önce buradan paylaşma fırsatı bulduğumuz, Flash ve .Flv konusunda pek çok faydalı bilgiler içeren yazılarımıza bir yenisini daha ekliyoruz. Flash MX 2004 Professional – Media Componentlerinin Actionscript ile Kontrolü, Flash MX 2004 Pro. ile Sunum Hazırlamak ve Flash ve FLV ‘ ye Giriş(Flash Video).

Bu yazımızda flv ve flash kullanımında yeni bir aşamaya geçip "yarı-dinamik" bir uygulama yapacağız.

TAVSİYE: Bu makale bir önceki makaleden metot ve özellikler içermekte. Eğer bu konuda bir önbilgi sahibi olmak istiyorsanız, Media Componentlerinin AS ile kontrolü isimli makaleyi okuyunuz.

1- Öncelikle yeni bir dosya açıyoruz. boyutları 554 × 415 olsun. 2- Daha sonra sahneme bir adet background tanımlıyorum.

3- Sahnemin sol alt kısmına Media Components kısmından MediaDisplay componentini sürükleyip bırakıyorum ve kenarlarını rectangle tool ile çiziyorum. Sol üst kısma da List Component’i sürükleyip bırakıyorum.

Media Display in boyutu : 336 × 224 – Instance Name : flv_list List Component in boyutu : 336 × 161 – Instance Name : media_display

4- List componenti seçiyorum ve properties kısmında açılan ayarlardan Label kısmına çift tıklıyorum. ve açılan dialog kutusunda + işaretini kullanarak .FLV dosyalarımın listede görünecek isimlerini giriyorum.

5- Aynı şekilde data kısmına çift tıklayıp açılan dialog kutusuna bu kez .FLV dosyalarımızın isimlerini gireceğiz. Ben isimler (01, 02… gibi) kullanıyorum. Siz istediğiniz ismi koyabilirsiniz.

Buraya kadar herşey tamam. Listemizde seçeneklerimiz bulunuyor fakat tıkladığımızda herhangi bir işlem söz konusu değil. Şimdi sahnemizde bulunan 2 componentimizi birbirine bağlayacak olan işlemi gerçekleştireceğiz.

List component seçildiğinde çalışmak için herhangi bir referans içermiyor. Varsayılan şemanın özellikleri dataProvider, selectedIndex, selectedIndices, selectedItem, selectedItems dir. Biz burda iletişimi sağlamak için List componentin selectedItem in data özelliği ile mediaDisplay in contentPath özelliklerini kullanacağız.

1- List Componenti seçiyoruz. Component Inspector da ayarlardan Schema bölümüne geliyoruz. SelectedItem : Object i seçip ve üstteki 2. artı butonuna (Add a field under the selected field) tıklıyoruz. (data özelliği selectedItem in özelliğidir, fakat bu varsayılan listede gözükmez eklemek zorundasınız. 2. artı butonu ile ekleyebilirsiniz.)

tıkladıktan sonra hemen alt kısıma new field : String eklenecek.

tıklayıp field name kısmından adına data yazıyoruz.

Şimdi sıra geldi 2 componenti birbirinden haberdar etmeye. SelectedItem in data özelliği ve mediaDisplay in contentPath özelliklerini birleştireceğiz. Bu sayede kullanıcı List component’e tıkladığı zaman mediaDisplay componentimiz bunu hemen algılayacak.

1- List component’i seçiyoruz ve Component Inspector panelinden Bindings kısmına geçiyoruz ve + (Add Binding) butonuna tıklıyoruz ordan da SelectedItem : Object’in alt seçeneği olan data : String seçeneğini seçiyoruz ve Ok butonuna basıyoruz.

Şimdi selectedItem.data eklendi listemize onu seçiyoruz ve aşağıdaki seçeneklerden direction seçeneğinin out olduğundan emin olmalıyız çünkü bu değer bizim başka bir component ile bağlantıya geçtiğimiz anlamına geliyor. Bundan emin olduktan sonra hemen altta olan bound to seçeneğini buluyoruz ve çift tıklıyoruz. Bound to dialog kutusu açılıyor ve solda componentlerimiz listeleniyor. Listeden MediaDisplay componentimizi seçince sağ kısımda bulunan Schema location kısmı açılıyor. Ordaki listeden contentPath : String i seçiyoruz ve Ok butonuna tıklıyoruz.

Moviemiz şu an itibariyle listeden tıklandığında oynuyor.

UYARI :

Dikkat ederseniz moviemizin kütüphanesine DataBindingClasses compiled clip‘ini eklediğini göreceksiniz. DataBindingClasses compiled clip SWF dosyamıza 18 KB daha ekler. DataBindingClasses compiled clip’i data bağlama işlemi ile ilgili bütün Actionscript 2.0 sınıflarını içermektedir. Bu şekilde kaç tane bağlama yaparsanız yapın kütüphanenizde sadece bir adet klip olacaktır. (Sakın gaflete düşüp te nerden geldi bu ben böle birşey eklememiştim diyerekten silmeyin, o zaman çalışmayacaktır bağlama işlemi)

Şimdi biraz modifiye edeceğiz…

1- Moviemiz ilk açıldığında herhangi bir FLV oynamıyor, ilk açılışta ilk videonun oynamasını sağlayacağız.

2- Listede tıkladığımız yada o anda oynayan FLV dosyasını tespit edip bittikten sonra sıradaki videoya geçmesini sağlayacağız.

1. frame :

//mediaDisplayin yolunun değişkene aktarımı
var m = _root.media_display;

//list componentin yolunun değişkene aktarımı
var v = _root.flv_list;
//list componentin stil rengini ayarlıyoruz.
//varsayılan olarak açık yeşil gelir.
v.setStyle("themeColor", 0xFFCC00);

//mediaDisplay component boyut ayarı
m.aspectRatio =false;
m.autoSize= false;

//list componentteki girdiğimiz dataları değişkene aktarıyoruz.
//hatırlayın FLV data kısmına FLV isimlerini girmiştik.
//01.flv 02.flv .....
var flv_liste:String = v.data;

//list componentteki verilerimizin uzunluğunu alıyoruz.
//kaç tane değer girdiysek, bize rakamsal çıktı verecek.
//bizim 8 çıktısını alırız.
//çünkü 8 adet FLV dosyamız var.
var len:Number = flv_liste.length;

//ilk açılışta MediaDisplay de ilk olan video oynasın
//ve ilk seçim seçili halde olsun.
//bunu setMedia ile de çok kolay yapabilirdik, oynardı.
//fakat list componentten herhangi bir seçim olmadığı
//anlayamazdı ve bir sonraki videoya geçmezdi.
if(v.selectedIndex == undefined){
v.selectedIndex = 0;
var starterPoint:Number = 0;
m.contentPath = v.data[starterPoint];
m.play();
}

//o anda oynayan videonun bittiğini anlayıp
//bir sonraki video ya geçmesi için Listener hazırlıyoruz.
var myListener = new Object();
myListener.complete = function(eventObject) {
//list componentte o anda seçili olan seçeneği değişkene atıyoruz
var selIndex:Number = v.selectedIndex;
//secim diye bir değişken tanımlıyoruz.
var secim:Number;
//burda bir karşılaştırma yapıyoruz.
//eğer selIndex tanımlı değilse secim değişkenini 0'a eşitle
//tanımlıysa secim'i selIndex+1 e eşitle
//yani eğer seçim tanımlı ise o anda çalanvideo bittikten sonra 1 arttıracak
v.selectedIndex = (selIndex==undefined ? secim=0 : secim = selIndex+1);
//en sondaki FLV bittiğinde başa dönmesini
//ve baştan çalmasını sağlıyoruz.
if(secim==len){
secim=0;
v.selectedIndex=0;
}
//değerini ayarladığımız secim değişkeninin değerini
//list componentin data özelliğine aktarıyoruz
//bunu da mediaDisplay componentinin contentPath özelliğine aktarıyoruz.
//hatırlayın contentPath setMedia'da FLV dosyamızı oynatmak için URL sağlıyordu.
//bunları karşılaştırarak FLV'yi mediaDisplay componentine aktarıyoruz
m.contentPath = v.data[secim];
//ve FLV'yi başlatıyoruz.
m.play();
}
m.addEventListener("complete", myListener);

Evet. Şimdi moviemiz ilk açıldığında 1. FLV oynuyor ve ilk seçenek seçili halde geliyor. Oynayan her FLV tamamlandıktan sonra bir sonrakine geçiyor. (ister o bu şekilde devam eder, isterseniz siz herhangi birini seçersiniz farketmez o yine bir sonrakine geçecektir.)

Bu şekilde üzerinde oynamalar yapıp biraz daha geliştirebilirsiniz. Bazı arkadaşlar diyebilir yaw bunun pause ve play vs. butonları yok. Hazır olana alışmamak adına ben bilerek kontrolleri olmayan MediaDisplay componentini kullandım. Diğer metot ve özellikleri bir önceki makalemizde vermiştik. Diğer makale ile birlikte birleştirerek çok daha başarılı çalışmalar çıkacağına inanıyorum.

Herkese faydalı olması dileklerimle… Bütün arkadaşlara çalışmalarında başarılar diliyorum.

Yardımlarını esirgemeyen dostlarıma sonsuz saygı ve sevgilerimle….

Flv Oynatıcımızın kaynak dosyasını indirmek için tıklayınız -> 1.2 mb!

Kaynak video dosyalarınıı indirmek için tıklayınız -> 24 mb!

Bu konuyla ilgili soru ve görüşlerinizi hasan@mediaprestige.com e-posta adresime gönderebilirsiniz.

Kaynaklar :

• Macromedia.com
• macromedia.com/devnet/
• www.dancarrdesign.com
• Video kaynağı (http://www.ea.com/downloads/eagames/official/nfs_underground/gallery/videos/all/ )
• communitymx.com