pillinetwork hesabınızla giriş yapın.

ManÅŸetlere XML, Action Script DokunuÅŸu

action script başlıklar
action script başlıklar

Merhaba Arkadaşlar daha önce sitemizde xml ve jquery ile güzel bir örneği yapılan gazete manşet tekniğinin biraz daha değişik ve action script versiyonu denedim. bence güzel oldu sizlerle de paylaşmak action script meraklılarına bir kaç teknik göstermek istedim.

Öncelikle çalışma sayfamızı hazırlayalım. ölçüler önemli biraz.sayfamız 600X350 ana resim botunumuz 500x350 cercevemiz(kutu) 95x65 uyfak resmimiz 84x56. daha sonra instance nameleri atayalım. aşağıdaki resimden faydalanabilirsiniz.

deÄŸiÅŸken isimleri
deÄŸiÅŸken isimleri

Kısaca nasıl bir yol izleyeceğimizi anlatayım. ana yazan bölüme haber resmi gelecek. bu haber resimleri ve başlıkları xml dosyasından çekeceğiz. Aynı resimleri ufaltıp kücük resim olarak yan tarafa sıralayacağız. klasik manşet sistemi aslında.

ilk frame'e gelelim ve aşağıdaki kodu kullanalım.önce xml'den çekme işlemi yapıyoruz.bu kod için başka bir kaynaktan faydalandım ben de.başlık ve resim yolları içi 2 tane array kullandım. aşağıda gördüğünüz üzere.baslangic degeri düzgün hizalama için boşlukları belirliyor .xml dosya yapımız aşağıda

1
2
3
4
5
6
7
 
<gallery>

<image title="Türk uçağı düştü 9 ölü">resim1.jpg</image>

<image title="Haber 2 başlığı">resim2.jpg</image>

<image title="BaÅŸka bir haber">resim3.jpg</image>

<image title="flash haber!!!!">resim4.jpg</image>

<image title="İran'da Nükleer Alarmı">resim4.jpg</image>

</gallery>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
_global.adres = new Array();

_global.baslik = new Array();

_global.baslangic=3;



//burada xml'den çekme kodumuz başlıyor. xml nesnemizi oluşturuyoruz.



var myXML:XML = new XML();



//gereksiz boşlukları temizleyelim

myXML.ignoreWhite=true;



//list.xml'den okumayı deneyelim

myXML.load("list.xml");

//okuma başarılı ise elementleri ayıralım.

myXML.onLoad = function(success) {

if (success) {

_global.myImage = myXML.firstChild.childNodes;

for (i=0; i<myImage.length; i++) {



var imageNumber = i+1;



//imagename değişkenine sıralı olarak title elementi geliyor xml okudunduğu sürece

var imageName = myImage[i].attributes.title;



//imageurl değişkenine de xml kaydının değeri yani value değerini alıyoruz.

var imageURL = myImage[i].firstChild.nodeValue;



//oluşturduğumuz adres ve baslik arraylarına sırayla kayıtları dolduroyoruz.

_global.adres[i]=imageURL;

_global.baslik[i]=imageName;



//şimdi de her kayıt okunuşunda kutu ve deger mclerini kopyalacağımız için bir aralık belirleme fonksiyonu yazdım.



boy=(kutu._height*i)+_global.baslangic*i+baslangic;

trace(boy);



//eğer ilk kayıtsa resmi ana mc'mize yükleyelim.

if(i==0)

{

	loadMovie(_global.adres[i],_root.ana);

}



//kutu ve deger mc'lerini kopyalayalım. bu kopyalama her okunuşta tekrarlanacak.biz 5 kayıt çekeceğiz. 5 adet ufak butonumuz olacak.kutuyu p1,p2,p3 degeri ise d1,d2,d3 şeklinde kopyacak kodumuz aşığadadır.



   duplicateMovieClip (kutu, "p"+i,i);

   duplicateMovieClip (deger, "d"+i,i+5);

  

//evet her kopyalamada biraz aşağı kaydırmak için yukarıda belirlediğimiz boy değerini _y eksenlerine atıyoruz.d'nin ki kutu içinde kalacğaından 4 ekledim. biraz dha aşağı kaymış oldu.



  setProperty("p"+i,_y,boy);

  setProperty("d"+i,_y,boy+4);



  //kopyaladığımız mc'ye resimleri yüklüyoruz.

  loadMovie(imageURL,"d"+i);

  

//resim boyutları normalde 500x350 olduğu için çok büyük. yüzde 17'e kadar kücültüyoruz. çünkü sağdaki butonlarımız ufak.



  setProperty("d"+i,_xscale,17);

  setProperty("d"+i,_yscale,17);  

  

}

}

};

Şimdi deger movieclibimize geleim ve onrollover ve rollout fonksiyonlarını oluşturalım.

kodlarımız aşağıda

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
on(rollOver)

{

	//üstüne gelince efekt verelim.

	this._alpha=80;



//unutmayalım ki bu mc'den 5 tane kopyaladık ve tıklama işleminde bunu belirlememiz lazım. aşağıda bunu mc adından tespit ediyoruz.no değişkenimize atıyoruz. aslında sadece d harfini replace ediyor kod.

	

    _global.no= this._name.split("d").join("");

	

//artık adres değişkenindeki resmi yükleyebiliriz. array'ı no sayısı ile kullanıyoruz.  evet yandaki butonların üstüne gelindiğinde ana mc'ye büyük resmi yüklüyoruz.

//noyu da bulduğumuza göre haber metin kutumuza başlık verelim.onu da ilgili array'dan bulduk.

	loadMovie(_global.adres[no],_root.ana);

	_root.haber.text=_global.baslik[no];

	

//yandan ok gibi çıkan animasyon için kopya kutunun 2. frame gitmesini sağlıyoruz.

	_root["p"+no].gotoAndPlay(2);

	

//güzel gidiyor. bir de alıştığımız tweenleri action script ile kullanalım. hızlı bir alpha efekti elde etmiş olalım.

//gerekli sınıflarımızı import ediyoruz.



import mx.transitions.Tween;

import mx.transitions.easing.*;



//yeni bir tween tanımlıyoruz.gördüğünüz gibi bu tween ana mc'mizin alpha değerini 0-100 arasında 1 kereye mahsus olmak üzere animasyona sokacak.



var myHoriTween:Tween = new Tween (_root.ana,"_alpha",Strong.easeOut,0,100,1,true);



}



//buton üstünden çekildiğimizde butonun alfasını tekrar 100'e getiyoruz. ve for döngüsü ile çıkmış tüm okları kapatıyoruz.



on(rollOut)

{

	this._alpha=100;	

	for(i=0;i<=5;i++)

	{

		_root["p"+i].gotoAndStop(1);

	}

	_root["p"+_global.no].play();

}

Evet arkadaşlar biraz karışık gibi görünsede açıklamalarla herkesin yapabileceğinden eminim.yine de kullanmak isteyenler uygulamayı indirebilirler.

çalışan halini görmek için tıklayın

Tüm projeyi indirmek için tıklayın

Spacer
Spacer
/* Etiketler: , , , , , , , */
/* vectro yazdı. 02 Mart 2009 13:23. 22 yorum var */

Yorumlar

1. Demo sayfası artık bi park sayfası sanırım :)
2. Rapidshare artık collector hesabı veya premium hesabıyla yüklenmeyen dosyaları sadece 10 kez indirmeye izin veriyor ve senin dosyan da şu mesajı veriyor artık:

This file is neither allocated to a Premium Account, or a Collector's Account, and can therefore only be downloaded 10 times.

Not: Collector hesabı ücretsizdir. Sen silmedikçe dosyan silinmez.

/* hasan tayyar beÅŸik */
/* sacrosancttayyar | 03 Mart 2009 09:49 */

kusura bakmayın arkadaşlar. domain bitmiş. yeni linkleri gödneriyorum.

uygulama - download

/* daily news | Logmania | RockLies */
/* vectro | 03 Mart 2009 09:59 */

çok güzel bir uygulama ve paylaşım eline sağlık

/* infoman | 03 Mart 2009 16:51 */

Alternatifini arayanlar burada yaptığım örneğe bakabilirler.

/* porno sektörü | flash öldü | iphone temaları | winamp temaları | eczanede utanma arkadaş */
/* lazaronnie | 03 Mart 2009 18:26 */

süper oldu bu çok teşekkür ettim herkese :)
edit: bu arada @lazarronie rica etsem sende kaynak atarsan seviniriz.

/* riddler | 05 Mart 2009 17:07 */

dostum benimki açık kaynak.

html, css ve javascript kodlaması sayfanın "kaynak kod" kısmında bulunmakta.
efektleri sağlayan kütüphane olarak jquery kullandım. projenize dahil etmeniz uygulamanın çalışması için yeterli..

/* porno sektörü | flash öldü | iphone temaları | winamp temaları | eczanede utanma arkadaş */
/* lazaronnie | 05 Mart 2009 18:15 */

çok guzel ya acaba bız ucretsız domaınlerle ugrasan arkdaslar bunları kullanabılırmı sonucta onu atacak ftp edıtoru yok

/* www.ligingolleri.blogcu.com */
/* ligingolleri | 06 Mart 2009 22:50 */

tabiki de kullanabilirsiniz uygulamayı indir tek tek yükle nasıl yükleme yapıyorsan. web arayüzden yükle zaten 2-3 dosyadan oluşuyor. ama link gibi işlemler için lütfen makaleyi oku oralarını yazmadım çünkü. bi kaç şey kendin eklemek zorunda kalabilirsin. xml dosyasına bak zaten resimlerini oradan çağıracaksın. sadece xml ve resim değiştirmen yeterli olur güncelleme için.

/* daily news | Logmania | RockLies */
/* vectro | 06 Mart 2009 23:15 */

harika olmuş. öncelikle ellerinize sağlık.
bu scripte nasıl auto play - cycle özelliği ekleyebiliriz?

/* roxx | 15 Mart 2009 23:30 */

teşekkürler gayet başarılı

/* Boşa Seyretme Seyret Öğren www.seyretogren.com */
/* ASB | 16 Mart 2009 15:56 */

dostum bunu ben kendim de denedim olmadı acaba nerede hata yaptım? lütfen bakabilirmisin? işte benim çalışmam...
ayrıca linkli nasıl yapacaz bunu?

NOT:bu rapid linki collector hesabı değildir...

/* criminal1 | 24 Mart 2009 00:17 */

link konusunda on pres funksiyonu yaz bir tane xml dosyana bir de link ekle.deger moviceclibine. on roller gibi on press ekle. xmlden çekerken baslik değişkeni gibi aynen çek linki de press de de geturl ile gödnerebilirsin.

dosyana baktım bende instance nameler görünmüyordu değer kutu vs. onlara dikkat et. uyglamanın çalışan halini indir incele.

/* daily news | Logmania | RockLies */
/* vectro | 24 Mart 2009 15:15 */

nedense ben onu incelerken hata flash donuyor ctrl+alt+del kombinasyonuyla flashı hep kapatmak zorunda kalıyorum acaba neden?(flash cs4)

nedense hep dynamic text kutusuna tıklayınca donuyor hem senin hem benim çalışmmada anlamadım sorunu gitti...ayrıca yuklarıda link verme ile ilgili yazdıklarını bence aynı çalışmanın linkli versiyonu şekline ikinci olarak ekelyebilirsen çok iy olur...çünkü ben pek bişi anlayamaıdm...aslında karılşık değil ama...teşekkürler...

sorun instance name lerdeymiş teşekkür ederim...ama başlıkları dyn. txte yazdırmıyor acaba hata nerede???

buyur yeni hali...link olayını mutlaka bekliyorum...teşekkürler...

/* criminal1 | 25 Mart 2009 00:09 */

uygulamanın son hali burada. burada xmle link değeri ekledim incelerseniz göreceksiniz ve onpress olaylarına tıklama ekledim. şimdi dinamik uygulamalarla da kullanılmak üzere güzel eksiksiz bir uygulama oldu.

/* daily news | Logmania | RockLies */
/* vectro | 25 Mart 2009 09:21 */

teşekkürler bu iyi oldu harikasın saol adamım...

/* criminal1 | 25 Mart 2009 20:58 */

arkadaşlar flasden.net de bunun gibi 100 lerce örnek 5-10 dolara satılıyor...Alternatif arayanlar oradan alıp düzenleyebilir...hatta oradan aldıgım bir örnegi buradan görebilirsiniz

/* alpercankaya | 24 Nisan 2009 02:59 */

slm yaptığınız uygulamayı sitemde denedim elinize sağlık çok güzel çalışıyor. Ancak sayfa yeni açıldığında başlıklar buraya gelecek yazısı duruyor xml dosyasından başlıkları değiştirdim ama sayfa yenilendiğinde ilk başta bu yazıyla karşılaşıyorum. Sanırım flashla düzelecek (yanlış bilmiyorsam) eğer flashla düzeliyorsa kısaca tarif edebilir misiniz? çünkü flashtan hiç anlamıyorum :(

/* jhonstars | 04 Mayıs 2009 22:44 */

merhaba
ilk frame action script kodlarında

1
2
3
4
 
if(i==0)

{

	loadMovie(_global.adres[i],_root.ana);

}

yerine

1
2
3
4
5
 
if(i==0)

{

	loadMovie(_global.adres[i],_root.ana);

	_root.haber.text=myImage[i].attributes.title;

}

ekle sorunun çözülecektir.

/* daily news | Logmania | RockLies */
/* vectro | 13 AÄŸustos 2009 12:13 */

Merhaba,
Çok kaliteli bir script yapmışsınız. Ellerinize sağlık. Şimdi tek sorun kaldı. Bu manşetin boyutunu düşürmek istiyorum. Beceremedim, flashla aram 0 gibi birşey. 550x300 olmasını istiyorum mesela.

Bu arada bir hata, ufak resme tıklayınca istenilen linke gidiyor ancak büyük resme tıklayınca undefined adresine gidiyor. Bilginize.

Ayrıca asp dosyasından haberleri döngüye bağlayıp manşet listelemesi yapabilirsiniz.

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<!--#include file="includes/baglanti.asp"--> 
<gallery>
<%
sql = "Select top 5 id,baslik,resimurl from haberler order by id desc"
set rs = data.execute(sql)
do until rs.eof%>
<image title="<%=utf(rs("baslik"))%>" link="icerik.asp?id=<%=rs("id")%>"><%=rs("resimurl")%></image>
<%rs.movenext
loop
rs.close
set rs = nothing%>
</gallery>

utf fonksiyonuna sokmamım sebebi, veritabanından gelen türkçe karakterleri düzgün göstermiyordu. Böylelikle sorunu çözmüş oldum.

utf fonksiyonunu buraya yazamıyorum. örneğin ş harfinin ş nin utf kodu ile replace ediyorum. Ancak kodaman ş nin utf kodunu sizlere ş olarak gösteriyor :) isteyen olursa özelden gönderirim dosyayı.

/* shibbytr | 20 Aralık 2009 22:20 */

Linkler yenilerseniz çok sevinirim şimdiden tşkler

/* deniz123456 | 02 Mayıs 2010 21:19 */

Proje linki kırık yenileyebilir misiniz? Merak ettim bu manşeti.

/* kayibey | 24 Haziran 2010 02:48 */

Linkler gitmiş yenileme imkanı varmı acaba ?

/* By Necdet | 03 Temmuz 2010 17:25 */

üye olunpillinetwork sitelerine yorum ekleyebilmek ve daha fazlası için, üye olun ya da giriş yapın.

Bu yazıyı rapor et. Kural dışı içeriğe rastladığınızda editörlerimize rapor ederek müdahale edilmesini sağlayabilirsiniz. (Hangi durumlarda rapor edebilirim?)

Bu site

Nokta ve pilli ortak yapımı olan kodaman.org kolektif bir kod yazarları blogudur. Siz de katılabilirsiniz.

son yorumlar

devamı »

arama

pillinetwork