flashhtml

11/7/05

6:30 PM

Page 1

ÇÖZÜMLER

Flash ve Formatl› ‹çerik
Flash ile dinamik içerikli web siteleri haz›rlayabilirsiniz!

H

erkese merhaba! Bu ay, Flash ile dinamik Web sitesi haz›rlayan programc›lar›n ilginizi çekecek bir konu ile karfl›n›zday›z. Flash’te haz›rlad›¤›m›z bir animasyonun 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 metinleri kolay bir flekilde formatlayam›yor olmakt›r. Örne¤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 animasyonlar›n›za dinamik ve formatl› içeri¤in nas›l ithal edilebilece¤ini ö¤renmifl olacaks›n›z.

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. Veritaban›nda, METINLER adl› bir tablo ve bu tabloda ID ve METIN adl› iki alan olacak. Tahmin edece¤iniz 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' size='11'><b>Firmam›z›n kurumsal Web sitesine hoflgeldi-

fiekil 2:

Gördü¤ünüz gibi, veritaban› yap›s›n› oldukça basit tuttuk...

niz!</b> Biz her zaman ifl ve <u>müflteri</u> odakl›

Genel Çerçeve
NOT: Bu makaleye ait kaynak dosyalar›, http://www.winnetmag.com.tr adresinden indirebilirsiniz.

çal›flmak taraftar›y›z. ‹fl ortaklar›m›z aras›nda <a href='http://www.cozumevi.com'><font color='#0000FF'><u>Çözümevi</u></font></a> gibi firmalar da bulunmaktad›r. Hakk›m›zda daha fazla bilgi almak isterseniz, <a href='http://www.doublekey.org'>Kerem Köseo¤lu</a>'nun bizimle birlikte yapt›¤› projelere göz atabilirsiniz</font>

Her zaman oldu¤u gibi, konuyu bir örnek yard›m›yla inceliyor olaca¤›z. Sistemimizi daha iyi anlamak için, afla¤›daki flemaya bir göz atal›m.

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›mda 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 yazd›r›yor olaca¤›z. Flash animasyonumuz bu sayfay› yükledi¤inde, “metin” de¤iflkeni içerisinde
www.winnetmag.com.tr

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.

fiekil 1:

Haz›rlayaca¤›m›z sistemin genel yap›s›...

Örne¤imizde; amac›m›z, veritaban›nda bulunan “metinler” adl› tabloda bulunan uzun bir metni çekip formatl› bir flekilde Flash animasyonumuz içerisinde göstermek olacak. Veritaban›
KASIM 2005

30

Windows &.NET Magazine

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› tamamlam›fl oluyoruz. Haz›rlad›¤›m›z sayfay› test etmek istersek, taray›c›m›z›n adres k›sm›na http://localhost/flashtml/kaynak.aspx?id=1 yaz›p üretilen ç›kt›ya göz atabiliriz. fiekil 3:
ASP.NET sayfam›z›n ak›fl mant›¤›

fiekil 7:

Ak›fl flemam›z› bir de Flash’in bak›fl aç›s›ndan çizelim

veritaban›ndan gelen içeri¤i sakl›yor olacak. Ak›fl mant›¤›m›z› kabaca tasarlad›¤›m›za göre, art›k ASP.NET sayfam›z› haz›rlamaya bafllayabiliriz. Önce kaynak.aspx dosyas›na göz atal›m...
<HTML> <HEAD> <title>kaynak</title> </HEAD> <body MS_POSITIONING="GridLayout"> <form id="Form1" method="post" runat="server"> <asp:Label ID="lblMetin" Runat="server" /> </form> </body> </HTML>

fiekil 4:

.aspx sayfam›z›n Flash’e ne gönderece¤ini önceden görebiliriz.

Ak›fl flemas›n› bir de Flash’in bak›fl aç›s›ndan görmek san›r›m herkesi biraz daha rahatlatt›, öyle de¤il mi? fiimdi s›rada ActionScript kodlar› var...
txtIcerik.setStyle("borderStyle", "none");

Buradaki ç›kt› Flash’in görüntüleyece¤i ç›kt› ile birebir ayn› olmasa da, afla¤› yukar› neyle karfl› karfl›ya oldu¤umuza dair bir fikir verecektir. Bunun yan› s›ra, sayfam›z›n do¤ru çal›fl›p çal›flmad›¤›n› da elle bir kez test etmifl oluyoruz. S›rada, Flash animasyonunu haz›rlama ifli var.

myQuest = new LoadVars(); myAnswer = new LoadVars(); myQuest.id = "1"; myAnswer.onLoad = function(success) { if (!success) { return; } txtIcerik.text = myAnswer.metin; }; myQuest.sendAndLoad("kaynak.aspx", myAnswer, "GET");

Flash Dosyas›
Haz›rlayaca¤›m›z Flash dosyas› da, ASP.NET sayfam›z kadar basit olacak. Flash animasyonumuzda bulunmas› gereken en önemli ö¤e, bir TextArea nesnesidir. Bu nesneyi, Window / Components menüsüne t›klay›p ilgili pencereyi açt›ktan sonra sürükle - b›rak yöntemiyle animasyonunuza dahil edebilirsiniz. Bu nesneye txtIcerik ad›n› verelim. Bu ad› Properties / Instance Name bölümüne yazmam›z gerekti¤ini herkes biliyor, öyle de¤il mi? Bunun yan› s›ra, txtIcerik nesnesinin Parameters penceresinde “html = true” de¤erini atamam›z gerekiyor.

Sayfan›n üzerindeki kayda de¤er tek nesnenin lblMetin adl› Label oldu¤una dikkat edin. Kaynak kod içerisinde yapaca¤›m›z fley, bu Label’›n içeri¤ini veritaban›ndan gelecek olan metinle doldurmak olacak. Haydi doldural›m o halde! Zira s›rada, kaynak.aspx.cs dosyas› var...
// Nesnelerimizi tan›mlayal›m OleDbConnection co; DataTable dt; OleDbDataAdapter da; // Ba¤lant›y› açal›m co = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath("kurum.mdb") + ";User Id=;Password=;"); co.Open(); // Metinler tablosundan talep edilen metni çekelim da = new OleDbDataAdapter("SELECT * FROM metinler WHERE id = " + Request.QueryString["id"].ToString(), co); dt = new DataTable(); da.Fill(dt); // Çekilen metni sayfaya yazd›ral›m

fiekil 5:

Metin kutumuzun ad›n› ve HTML deste¤ini Parameters sekmesinde at›yoruz.

Bu kod içerisinde; önce metin kutumuzu formatl›yoruz. Ard›ndan, kaynak.aspx sayfas›n› ça¤›racak olan myQuest nesnesini yarat›p, sayfay› ça¤›r›rken “id=1” de¤erini göndermesini sa¤l›yoruz ki, kaynak.aspx içerisinde Request.Querystring[“id”] komutu 1 de¤erini döndürsün. Ard›ndan sayfay› ça¤›r›yor ve sayfadan dönen cevapta bulunan de¤iflkenleri myAnswer nesnesine at›yoruz. Son olarak, myAnswer içerisinde saklanan “metin” de¤iflkenine ait de¤eri metin kutusuna aktararak, Flash’teki iflimizi tamaml›yoruz. Tecrübeli Flash programc›lar›, “Neden basit bir Text Tool kullanmak yerine TextArea bileflenini kulland›n?” diye merak ediyor olabilir. Bunun tek sebebi, TextArea içerisindeki metin uzun geldi¤i takdirde kayd›rma çubuklar›n›n otomatik olarak görüntülenme özelli¤inden faydalanmak istemem. Bu flekilde, animasyonu, konuyla do¤rudan ilgisi olmayan bir y›¤›n grafikten ve koddan kurtarm›fl olduk.

S›rada, ASP.NET sayfas› ile ba¤lant› kurup ilgili metni animasyonun içine ça¤›racak olan ActionScript kodunu yazma ifli var. Önce koda ait ak›fl flemas›na bir göz atal›m.

HTML Sayfas›
Son olarak, Flash animasyonunu bar›nd›racak olan index.html sayfas›n›n kodlar›na göz atal›m.
Windows &.NET Magazine KASIM 2005

www.winnetmag.com.tr

30

flashhtml

11/7/05

6:30 PM

Page 3

Flash ve Dinamik Web Sayfalar›
<table width="100%" height="100%" border="0" ID="Table1"><tr><td align="center" valign="middle"> <object classid='clsid:d27cdb6e-ae6d-11cf96b8-444553540000' codebase='http://download.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' pluginspage='http://www.macromedia.com/shockwave/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/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash'>indirin</a>.</font> </td></tr></table>

Bu sayfan›n Flash animasyonunu bar›nd›rmak d›fl›nda pek fazla bir ifllevi olmad›¤›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 sayfas›n› ça¤›rabilir ve Flash animasyonunu görüntüleyebiliriz.

fiekil 9:

‹çeri¤imiz hem dinamik, hem de formatl›!”

Nas›l? Keyif verici, öyle de¤il mi? Az önce veritaban›nda saklanan bir metni Flash animasyonumuza çektik ve formatland›¤› haliyle görüntüledik. Kendimizi tebrik edebiliriz! ‹nsan›n neredeyse “Flash art›k HTML görüntüleyebiliyor!” diyesi geliyor... fiimdi gelin, Flash taraf›ndan desteklenen Tag’lere k›saca bir göz atal›m.

Desteklenen Tag’ler
<a> : Bir Web sayfas›na ba¤lant› yaratmak için kullan›lan Tag’dir. • href: Ba¤lant› • target: Ba¤lant›n›n aç›laca¤› pencere Örnek: <a href=’http://www.doublekey.org’ target=’_blank’>Kerem’in Web sitesi</a>

<b> : Kelimeyi kal›n harflerle yazmaya yarar. Örnek: <b>Windows .NET Magazine</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=’Tahoma’ size=’11’>Ben mavi bir Tahoma metniyim</font>. <img> : Metin içerisine bir resim veya bir baflka Flash animasyonu dahil etmeye yarar. • src: Resmin dosya ad› • id: E¤er resim yerine Flash animasyonu dahil ediyorsan›z, animasyonun 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, insanlar nefleli, sen de gel oyna...</p> <span> : CSS ile formatlanacak bir metin 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 yarar. Do¤ru kullan›l›rsa, HTML’in <table> Tag’inin temel ifllevlerini yerine getirebilir. • blockindent: Blo¤un ne kadar içeriden bafllayaca¤› • indent: Paragraf›n ilk sat›r›n›n ne kadar 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Çerkezo¤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, makalenin bafl›nda veritaban›na ekledi¤imiz 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 formatlanabilece¤ini ö¤renmifl olduk. Bu tekni¤in gerçek hayatta iflinize çok yarayaca¤›n› tahmin ediyorum. Karfl›laflaca¤›n›z bir projede Flash içinde formatl› metin göstermek durumunda kal›rsan›z, bu yöntemi rahatl›kla uygulayabilirsiniz. Tek yapman›z gereken fley; içerik yöneticilerini, veritaban›na ekleyecekleri metinleri Flash’in anlayabilece¤i tag’lerle formatlanm›fl halde haz›rlamaya ikna etmek olacakt›r. Kendini bu konuda daha fazla gelifltirmek isteyenler, yola afla¤›daki noktalar›n üzerinde yo¤unlaflarak devam edebilir: • Text Tool’un dinamik kullan›m› • Flash ve CSS deste¤i • <a> Tag’ine t›kland›¤›nda, Flash animasyonunun belli bir Frame’e atlamas›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çerisine dinamik veri çekmenin temellerini ö¤renebilirsiniz. • http://livedocs.macromedia.com/flash/8/main/00001457.html --> Flash 8 ve HTML deste¤i konusunda resmi dokümantasyon • http://livedocs.macromedia.com/flash/8/main/00001444.html --> Flash ve CSS deste¤i konusunda resmi dokümantasyon
www.winnetmag.com.tr

30

Windows &.NET Magazine

KASIM 2005

Sign up to vote on this title
UsefulNot useful