flashhtml 11/7/05 6:30 PM
ÇÖZÜMLER
Flash ve Formatl› ‹çerik
Flash ile dinamik içerikli web siteleri haz›rlayabilirsiniz!
NOT: Bu makaleye ait kaynak
dosyalar›, http://www.winnet-
mag.com.tr adresinden indire-
bilirsiniz.
Kerem Köseo¤lu
keremk@winnetmag.com.tr
Windows &.NET Magazine’in
katk›da bulunan yazarlar›ndand›r.
Çözümevi firmas›nda e-business
çözümleri yöneticisi olarak
çal›flmaktad›r.
30 Windows &.NET Magazine
Page 1
H
erkese merhaba! Bu ay, Flash ile dina-
mik Web sitesi haz›rlayan programc›-
lar›n ilginizi çekecek bir konu ile
karfl›n›zday›z. Flash’te haz›rlad›¤›m›z bir ani-
masyonun içerisine bir metin dosyas›ndan veri
çekebilece¤imizi zaten biliyoruz. Bunun bir ad›m
ötesinde; ASP veya ASP.NET gibi dinamik bir
platform yard›m›yla veritaban›nda yatan verileri
de Flash animasyonunun içine dahil edebiliriz.
Bu konudaki temel bilginizin eksik oldu¤unu dü-
flünüyorsan›z, önce ek kaynaklarda ad› geçen
dosya ve sitelere bir göz atman›z› tavsiye ederim.
Flash içerisine veri çekebiliyor olmam›za ra¤-
men; Flash programc›lar›n›n yaflad›¤› en büyük
problemlerden biri, d›flar›dan çektikleri metinle-
ri kolay bir flekilde formatlayam›yor olmakt›r. Ör-
ne¤in; Flash ile haz›rlad›¤›n›z kurumsal bir Web
sitesinde, veritaban›nda bar›nd›r›lan formatl›
metinleri görüntülemek istedi¤inizi düflünün.
Flash animasyonuna dinamik olarak çekilen bu
yaz›n›n baz› bölümlerini koyu, baz› yerlerini alt›
çizili ve baz› yerlerini renkli göstermek isteyen bir
içerik yöneticisine, buna benzer biçimlendirme
seçeneklerini kullanabilece¤i bir ortam sa¤lamak
durumunday›z.
Bu makalenin sonuna geldi¤inizde, Flash ani-
masyonlar›n›za dinamik ve formatl› içeri¤in na-
s›l ithal edilebilece¤ini ö¤renmifl olacaks›n›z.
Genel Çerçeve
Her zaman oldu¤u gibi, konuyu bir örnek yard›-
m›yla inceliyor olaca¤›z. Sistemimizi daha iyi an-
lamak için, afla¤›daki flemaya bir göz atal›m.
Haz›rlayaca¤›m›z sistemin
fiekil 1: genel yap›s›...
Örne¤imizde; amac›m›z, veritaban›nda bulu-
nan “metinler” adl› tabloda bulunan uzun bir
metni çekip formatl› bir flekilde Flash animasyo-
numuz içerisinde göstermek olacak. Veritaban›
KASIM 2005
ve animasyon aras›ndaki ba¤lant›y› sa¤lamak
için ise, küçük ve basit bir ASP.NET sayfas›ndan
faydalanaca¤›z.
Veritaban›
Örne¤i basit tutmak ad›na, tek tablolu bir Access
veritaban›ndan faydalan›yor olaca¤›z. Veritaba-
n›nda, METINLER adl› bir tablo ve bu tabloda ID
ve METIN adl› iki alan olacak. Tahmin edece¤i-
niz gibi; ID alan›nda her bir yaz›ya ait belirleyici
bir say›, METIN alan›nda ise yaz›n›n kendisi yer
alacak.
Son olarak, tablomuz içerisinde yeni bir kay›t
yarat›p bu kayda afla¤›daki metni girece¤iz:
<img src='mini.jpg' align='left'><font face='Tahoma' si-
ze='11'><b>Firmam›z›n kurumsal Web sitesine hoflgeldi-
Gördü¤ünüz gibi, veritaban› yap›s›n›
fiekil 2: oldukça basit tuttuk...
niz!</b> Biz her zaman ifl ve <u>müflteri</u> odakl›
çal›flmak taraftar›y›z. ‹fl ortaklar›m›z aras›nda <a
href='http://www.cozumevi.com'><font co-
lor='#0000FF'><u>Çözümevi</u></font></a> gibi fir-
malar da bulunmaktad›r. Hakk›m›zda daha fazla bilgi
almak isterseniz, <a href='http://www.double-
key.org'>Kerem Köseo¤lu</a>'nun bizimle birlikte yap-
t›¤› projelere göz atabilirsiniz</font>
HTML bilgisi olanlar›n bu metne bak›p h›zla
birkaç ad›m ileriye gitme iste¤iyle doldu¤unu
tahmin ediyorum... Bekleyin... Az sonra...
ASP.NET Sayfas›
S›ra geldi veritaban›ndaki metinleri çekip Flash’e
iletecek olan ASP.NET sayfas›n› yazmaya... Önce,
bu sayfan›n çal›flma mant›¤›n› inceleyelim.
Gördü¤ünüz gibi; ASP.NET sayfam›z ilk ad›m-
da Flash’ten bir ID de¤eri devral›yor. Bunu, Flash
içerisinde veri kayna¤› olarak kaynak.aspx?id=1
adresini göstererek sa¤layaca¤›z. ‹kinci ad›mda,
id’si 1 olan metni veritaban›ndan çekiyor ve bir
sonraki ad›mda &metin=.... fleklinde sayfaya yaz-
d›r›yor olaca¤›z. Flash animasyonumuz bu sayfa-
y› yükledi¤inde, “metin” de¤iflkeni içerisinde
www.winnetmag.com.tr
flashhtml 11/7/05 6:30 PM Page 2

Flash ve Dinamik Web Sayfalar›

lblMetin.Text = "&metin=" +
dt.Rows[0]["metin"].ToString();
// Ba¤lant›y› kapatal›m
co.Close();

Bu flekilde, ASP.NET sayfam›z› tamam-

lam›fl oluyoruz. Haz›rlad›¤›m›z sayfay›
test etmek istersek, taray›c›m›z›n adres
k›sm›na http://localhost/flashtml/kay-
nak.aspx?id=1 yaz›p üretilen ç›kt›ya göz
atabiliriz. Ak›fl flemam›z› bir de Flash’in
fiekil 7: bak›fl aç›s›ndan çizelim
ASP.NET sayfam›z›n
fiekil 3: ak›fl mant›¤›
Ak›fl flemas›n› bir de Flash’in bak›fl
veritaban›ndan gelen içeri¤i sakl›yor aç›s›ndan görmek san›r›m herkesi biraz
olacak. daha rahatlatt›, öyle de¤il mi? fiimdi s›-
Ak›fl mant›¤›m›z› kabaca tasarlad›¤›- .aspx sayfam›z›n Flash’e ne rada ActionScript kodlar› var...
fiekil 4: gönderece¤ini önceden
m›za göre, art›k ASP.NET sayfam›z› ha- görebiliriz.
z›rlamaya bafllayabiliriz. Önce txtIcerik.setStyle("borderStyle", "none");
kaynak.aspx dosyas›na göz atal›m... Buradaki ç›kt› Flash’in görüntüleye- myQuest = new LoadVars();
ce¤i ç›kt› ile birebir ayn› olmasa da, afla- myAnswer = new LoadVars();
<HTML> ¤› yukar› neyle karfl› karfl›ya myQuest.id = "1";
<HEAD> oldu¤umuza dair bir fikir verecektir. myAnswer.onLoad = function(success) {
<title>kaynak</title> Bunun yan› s›ra, sayfam›z›n do¤ru çal›- if (!success) {
</HEAD> fl›p çal›flmad›¤›n› da elle bir kez test et- return;
<body MS_POSITIONING="GridLayout"> mifl oluyoruz. }
<form id="Form1" method="post" ru- S›rada, Flash animasyonunu haz›rla- txtIcerik.text = myAnswer.metin;
nat="server"> ma ifli var. };
<asp:Label ID="lblMetin" Runat="server" /> myQuest.sendAndLoad("kaynak.aspx",
</form> Flash Dosyas› myAnswer, "GET");
</body> Haz›rlayaca¤›m›z Flash dosyas› da,
</HTML> ASP.NET sayfam›z kadar basit olacak. Bu kod içerisinde; önce metin kutu-
Flash animasyonumuzda bulunmas› muzu formatl›yoruz. Ard›ndan, kay-
Sayfan›n üzerindeki kayda de¤er tek gereken en önemli ö¤e, bir TextArea nak.aspx sayfas›n› ça¤›racak olan
nesnenin lblMetin adl› Label oldu¤una nesnesidir. Bu nesneyi, Window / Com- myQuest nesnesini yarat›p, sayfay› ça¤›-
dikkat edin. Kaynak kod içerisinde ya- ponents menüsüne t›klay›p ilgili pence- r›rken “id=1” de¤erini göndermesini
paca¤›m›z fley, bu Label’›n içeri¤ini ve- reyi açt›ktan sonra sürükle - b›rak sa¤l›yoruz ki, kaynak.aspx içerisinde Re-
ritaban›ndan gelecek olan metinle yöntemiyle animasyonunuza dahil ede- quest.Querystring[“id”] komutu 1 de¤e-
doldurmak olacak. bilirsiniz. rini döndürsün. Ard›ndan sayfay›
Haydi doldural›m o halde! Zira s›ra- Bu nesneye txtIcerik ad›n› verelim. ça¤›r›yor ve sayfadan dönen cevapta
da, kaynak.aspx.cs dosyas› var... Bu ad› Properties / Instance Name bö- bulunan de¤iflkenleri myAnswer nesne-
lümüne yazmam›z gerekti¤ini herkes sine at›yoruz. Son olarak, myAnswer
// Nesnelerimizi tan›mlayal›m biliyor, öyle de¤il mi? Bunun yan› s›ra, içerisinde saklanan “metin” de¤iflkeni-
OleDbConnection co; txtIcerik nesnesinin Parameters pence- ne ait de¤eri metin kutusuna aktararak,
DataTable dt; resinde “html = true” de¤erini atama- Flash’teki iflimizi tamaml›yoruz.
OleDbDataAdapter da; m›z gerekiyor. Tecrübeli Flash programc›lar›, “Neden
// Ba¤lant›y› açal›m basit bir Text Tool kullanmak yerine Tex-
co = new OleDbConnection("Provider=Mic- tArea bileflenini kulland›n?” diye merak
rosoft.Jet.OLEDB.4.0;Data Source=" + Ser- ediyor olabilir. Bunun tek sebebi, TextAre-
ver.MapPath("kurum.mdb") + ";User a içerisindeki metin uzun geldi¤i takdirde
Id=;Password=;"); kayd›rma çubuklar›n›n otomatik olarak
co.Open(); görüntülenme özelli¤inden faydalanmak
Metin kutumuzun ad›n› ve
// Metinler tablosundan talep edilen met- fiekil 5: HTML deste¤ini Parameters istemem. Bu flekilde, animasyonu, konuy-
ni çekelim sekmesinde at›yoruz. la do¤rudan ilgisi olmayan bir y›¤›n grafik-
da = new OleDbDataAdapter("SELECT * ten ve koddan kurtarm›fl olduk.
FROM metinler WHERE id = " + Request.Qu- S›rada, ASP.NET sayfas› ile ba¤lant›
eryString["id"].ToString(), co); kurup ilgili metni animasyonun içine HTML Sayfas›
dt = new DataTable(); ça¤›racak olan ActionScript kodunu Son olarak, Flash animasyonunu bar›n-
da.Fill(dt); yazma ifli var. Önce koda ait ak›fl flema- d›racak olan index.html sayfas›n›n kod-
// Çekilen metni sayfaya yazd›ral›m s›na bir göz atal›m. lar›na göz atal›m.

www.winnetmag.com.tr Windows &.NET Magazine KASIM 2005 30

flashhtml 11/7/05 6:30 PM Page 3
Flash ve Dinamik Web Sayfalar›
<table width="100%" height="100%" bor-
der="0" ID="Table1"><tr><td align="center"
valign="middle">
<object classid='clsid:d27cdb6e-ae6d-11cf-
96b8-444553540000' codebase='http://downlo-
ad.macromedia.com/pub/shockwave/cabs/flash
/swflash.cab#3,0,0,0' width='550' height='400'
VIEWASTEXT ID="Object1">
<param name='src' value='kurum.swf'>
<embed src='kurum.swf' pluginspa-
ge='http://www.macromedia.com/shockwa-
ve/download/'
type='application/x-shockwave-flash'
width='550' height='400'>
</embed></object>
<br>
<font face=tahoma size=1>Siteyi sorunsuz
görüntülemek için Flash Player 8'i <a
href='http://www.macromedia.com/shock-
wave/download/download.cgi?P1_Prod_Ver-
sion=ShockwaveFlash'>indirin</a>.</font>
</td></tr></table>
Bu sayfan›n Flash animasyonunu ba-
r›nd›rmak d›fl›nda pek fazla bir ifllevi ol-
mad›¤›ndan, üzerinde çok fazla
durmuyorum.
Ve Gösteri Zaman›
Haz›rl›klar›m›z› tamamlad›¤›m›za göre,
art›k taray›c›m›z› aç›p index.html sayfa-
s›n› ça¤›rabilir ve Flash animasyonunu
görüntüleyebiliriz.
‹çeri¤imiz hem dinamik, hem
fiekil 9: de formatl›!”
Nas›l? Keyif verici, öyle de¤il mi? Az
önce veritaban›nda saklanan bir metni
Flash animasyonumuza çektik ve for-
matland›¤› haliyle görüntüledik. Kendi-
mizi tebrik edebiliriz!
‹nsan›n neredeyse “Flash art›k HTML
görüntüleyebiliyor!” diyesi geliyor...
fiimdi gelin, Flash taraf›ndan destekle-
nen Tag’lere k›saca bir göz atal›m.
Desteklenen Tag’ler
<a> : Bir Web sayfas›na ba¤lant› yarat-
mak için kullan›lan Tag’dir.
• href: Ba¤lant›
• target: Ba¤lant›n›n aç›laca¤› pencere
Örnek: <a href=’http://www.double-
key.org’ target=’_blank’>Kerem’in Web
sitesi</a>
30 Windows &.NET Magazine KASIM 2005
<b> : Kelimeyi kal›n harflerle yazmaya
yarar.
Örnek: <b>Windows .NET Magazi-
ne</b>, sektöründeki öncü dergilerden
biridir.
<br> : Sat›r atlamaya yarar.
Örnek: 1. sat›r <br> 2. sat›r <br> 3. sat›r
<font> : Yaz› biçimini belirleyen Tag’dir.
• color: Yaz› rengi
• face: Yaz› fontu
• size: Yaz›n›n boyutu
Örnek: <font color=’#ffcc00’ face=’Ta-
homa’ size=’11’>Ben mavi bir Tahoma
metniyim</font>.
<img> : Metin içerisine bir resim veya
bir baflka Flash animasyonu dahil etme-
ye yarar.
• src: Resmin dosya ad›
• id: E¤er resim yerine Flash animas-
yonu dahil ediyorsan›z, animasyo-
nun tan›mlay›c› ad›n› ifade eder.
• width: Genifllik
• height: Yükseklik
• align: Hizalama
• hspace: Horizontal boflluk
• vspace: Vertikal boflluk
Örnek: <img src=’mini.jpg’ width=’10’
height=’10’ align=’right’>
<i> : Metni e¤ri göstermeye yarar.
Örnek: <i>Ben e¤ri bir yaz›y›m.</i>.
<li> : Maddeleme yapmaya yarar.
Örnek: <li>K›rm›z›</li> <li>Yeflil</li>
<li>Mavi</li>
<p> : Yeni bir paragraf açmaya yarar.
• align: Metnin hizas›
• class: Biçimlendirmede kullan›lacak
CSS s›n›f›
Örnek: <p align=’left’>Gün güneflli, in-
sanlar nefleli, sen de gel oyna...</p>
<span> : CSS ile formatlanacak bir me-
tin parças›n› belirler.
• class: Biçimlendirmede kullan›lacak
CSS s›n›f›
Örnek: <span class=’ozel’>Ben özel bi-
çimli bir metinim</span>.
<textformat> : Metinleri hizalamaya ya-
rar. Do¤ru kullan›l›rsa, HTML’in <table>
Tag’inin temel ifllevlerini yerine getire-
bilir.
• blockindent: Blo¤un ne kadar içeri-
den bafllayaca¤›
• indent: Paragraf›n ilk sat›r›n›n ne ka-
dar içeriden bafllayaca¤›
• leading: Sat›rlar aras› boflluk
• leftmargin: Sol taraftaki boflluk
• rightmargin: Sa¤ taraftaki boflluk
• tabstops: Her bir TAB karakterinden
sonra b›rak›lacak boflluk
Örnek: <textformat tabstops=’[50,
100,150]’>Ad›\tSoyad›\tYafl›<br>Ke-
rem\tKöseo¤lu\t27<br>Azade\tÇerke-
zo¤lu\26</textformat>
<u> : Metnin alt›n› çizmeye yarar.
Örnek: alt›n› çiziyorum ki; <u>Ayd›n
Esen</u>, gelmifl geçmifl en büyük mü-
zisyenlerden biridir.
fiimdi bu bilgiler do¤rultusunda, ma-
kalenin bafl›nda veritaban›na ekledi¤i-
miz metne tekrar göz at›p, bunu
Flash’te üretilen ç›kt›yla karfl›laflt›r›n.
Veritaban›ndaki metni yukar›daki
tag’ler ile biraz daha süsleyip ç›kt›n›n
nas›l de¤iflece¤ini inceleyerek, tag’leri
daha iyi anlayabilirsiniz.
Tag’lerin daha ayr›nt›l› aç›klamalar›
için, ek kaynaklarda belirtilen adreslere
göz atman›z› tavsiye ederim.
Sonuç
Bu flekilde, Flash içerisine dinamik bir
flekilde ithal etti¤iniz içeri¤in HTML
benzeri komutlar yard›m›yla nas›l for-
matlanabilece¤ini ö¤renmifl olduk. Bu
tekni¤in gerçek hayatta iflinize çok yara-
yaca¤›n› tahmin ediyorum. Karfl›laflaca-
¤›n›z bir projede Flash içinde formatl›
metin göstermek durumunda kal›rsa-
n›z, bu yöntemi rahatl›kla uygulayabilir-
siniz. Tek yapman›z gereken fley; içerik
yöneticilerini, veritaban›na ekleyecekle-
ri metinleri Flash’in anlayabilece¤i
tag’lerle formatlanm›fl halde haz›rlama-
ya ikna etmek olacakt›r.
Kendini bu konuda daha fazla gelifl-
tirmek isteyenler, yola afla¤›daki nokta-
lar›n üzerinde yo¤unlaflarak devam
edebilir:
• Text Tool’un dinamik kullan›m›
• Flash ve CSS deste¤i
• <a> Tag’ine t›kland›¤›nda, Flash ani-
masyonunun belli bir Frame’e atla-
mas›n› sa¤lamak
Bir baflka yaz›da görüflünceye dek,
hoflça kal›n!
Ek Kaynaklar
• http://www.doublekey.org/mind/
flash_icinde_asp_kullanmak.pdf -->
Bu doküman sayesinde, Flash içerisi-
ne dinamik veri çekmenin temelleri-
ni ö¤renebilirsiniz.
• http://livedocs.macromedi-
a.com/flash/8/main/00001457.html
--> Flash 8 ve HTML deste¤i konu-
sunda resmi dokümantasyon
• http://livedocs.macromedi-
a.com/flash/8/main/00001444.html
--> Flash ve CSS deste¤i konusunda
resmi dokümantasyon
www.winnetmag.com.tr