Volkan Çelebi

AS3 - Dinamik Text in ilk harfini renklendirmek

2010-05-22T09:04:00.006+03:00

İhtiyaç doğrultusunda dinamik bir metni DinamikText e yazdırırken ilk harfinin büyük ve kırmızı renkli olmasını sağlamaya çalıştım.

Ufak bir dizi oyunuyla sanırım başardım. Burada manuel gönderiyorum String veriyi. Aslında bir dizi içersinden çekilen rasgele verilerden oluşan bir uygulama da karşıma çıktı.

function buyut (bul:String)
{
var dizi:Array = [];
for (var i:uint=0; i<bul.length; i++)
{
   var harf:String = bul.charAt(i);
   if (harf != " ")
   {
       dizi.push (harf);
   }
}
dizi[0]=dizi[0].toUpperCase();
aTxt.htmlText =  "<b><font color='#FF0000'>" + dizi[0] + "</b></font>"+dizi[1];
for (var fg:uint=2;fg<dizi.length;fg++)
{
aTxt.appendText(dizi[fg]);
}
dizi=[];
}

buyut ("volkan");

SWF Dosyası

Flex - ComboBox dan bilgi almak

2010-05-14T18:01:00.004+03:00

Combobox içerisine ArrayCollection kullanarak object ile verileri girmek
Combobox ın durumlarına göre iletileri almak
Combobox dan seçilenin numarasını ve text bilgisini almak

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="773" height="434">
  <mx:ComboBox x="378" y="241" width="262" height="30"
       labelField="ad"
       open="Acildi(event)"
       close="Acildi(event)"
       change="Degisti(event)">
      <mx:ArrayCollection>
          <mx:Object ad="volkan" soyad="çelebi"/>
          <mx:Object ad="Tülay" soyad="çelebi"/>
          <mx:Object ad="Behiç" soyad="çelebi"/>
          <mx:Object ad="Yılmaz" soyad="Demir"/>
      </mx:ArrayCollection>
  </mx:ComboBox>
  <mx:Script>
      <![CDATA[
          import mx.events.DropdownEvent;
          private function Acildi(evt:DropdownEvent):void
          {
              lbl.text="Durum: "+evt.type;  
          }
          private function Degisti(evt:Event):void
          {
              lbl2.text=evt.currentTarget.selectedIndex + evt.currentTarget.selectedItem.ad + evt.currentTarget.selectedItem.soyad;
          }
      ]]>
  </mx:Script>
  <mx:Label x="161" y="325" text="Label" fontSize="25" id="lbl"/>
  <mx:Label x="390" y="341" text="Label" fontSize="25" id="lbl2"/>
</mx:Application>

Flex - Alert den dönen değerlere göre işlem

2010-05-14T17:34:00.002+03:00

Alert ile çıkan pencerenin boyutunun ayarlanması
Alert ile OK, Cancel vb düğmelerin eklenmesi
Alert sonucunda basılan tuşa göre işlem yapılması

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="773" height="434">
<mx:Script>
<![CDATA[
    import mx.events.CloseEvent;
    import mx.controls.Alert;
    private var alarm:Alert;
    private function Msj():void
    {
        alarm =Alert.show("Merhaba, Kullanıcı","Mesaj",Alert.OK | Alert.CANCEL,
        null,Kapanis);
        alarm.width=300;
        alarm.height=300;
    }
    private function Kapanis(evt:CloseEvent):void
    {
        if(evt.detail == Alert.OK)
        {
            btn.label="OK butonuna bastınız."
        }
        else
        {
            btn.label="Cancel butonuna bastınız."
        }
    }
]]>
</mx:Script>
<mx:Button x="336" y="223" label="Button" click="Msj()" id="btn"/>
</mx:Application>

IV. BÖTE Kurultayından İzlenimler

2010-05-10T08:25:00.002+03:00

Bu yıl dördüncüsü ODTÜ'de düzenlenen Bilgisayar ve Öğretim Teknolojileri Öğrenci Kurultayına katıldım. MEB Eğitim Teknolojileri Genel Müdürülüğü olarak örnek öğrenme nesnelerinin ve diğer çalışmalarımızın sunumunda yer aldım.

Cumartesi işlerin yoğunluğundan dolayı ancak Pazar katılabildiğim kurultayda çok fazla bir katılım göremedim. Ancak bölümün ilk mezunlarından olarak gelişmeleri yerinde izleme olanağım oldu. Sunuma katılan sayısı çok azdı. BÖTE öğrencilerinin sektördeki en büyük işverenlerine karşı ilgisizliği biraz manidar oldu aslında.

MEB olarak öğrenme nesnesi standartlarımızdan, akıllı e-kitap projelerimizden, geleceğe dair planlarımızdan, MEB in bu konuda kat ettiği mesafeleden, eğitim portalımızdan bahsettim. Katılım az olsa da geri dönüşler bizim açımızdan iyi oldu denilebilir.

Edindiğim bilgiye göre Türkiye'de tam 78 üniversitede Bilgisayar ve Öğretim Teknolojileri bölümü kurulmuş. Bu kadar yüksek sayıda BÖTE ni açılması ileride Bilişim Teknolojileri Öğretmenlerinin sayısında patlama oluşturacağı aşikar. Bu konuda öğrencilerin de serzenişleri oldu. Bu öğretmen adaylarının hepsinin MEB tarafından istihdam edilmesi tabiki imkansız. Hayırlısı diyelim.

Sunum boyunca BÖTE öğrencilerine bir programlama dilinde çok iyi olmalarını, diğerlerinden ihitiyaçlarını görecekleri kadar haberdar olmaları gerektiğinden bahsettik. Şimdilik kullandığımız teknolojinin Flash ve ActionScript 3.0 olduğunu, gelişen Web Tabanlı dillere hızlıca uyum sağladığımızdan bahsettik. Umarım vizyon oluşturmalarında yararlı olmuştur. Bu arada 78 üniversite BÖTE olmasına rağmen kurultayda standatları olan 10 üniversiteyi geçmiyordu, bunun yorumu da BÖTE başkanlarına ait.

FootGaming - Oyun Tabanlı Öğrenmede Yeni Bir Yaklaşım

2010-05-08T08:35:00.010+03:00

Oyun Tabanlı Öğrenme popülerliğini artırdıkça bu kavrama dayalı oyunlar artış gösteriyor. Bunun yanında donanım üreticileride yeni fikirler bulmaya devam ediyor. Çok beğendiğim bir oyun aracını sizlerle paylaşmak istedim.

Ailelerin bilgisayar oyunlarına bakış açıları ne kadar değişse de çocukların bilgisayar başında uzun süre hareketsiz oturmasından hep yakınmaktalar. Bu donanımı görünce tüm düşünceleriniz değişecek.

Foot Gaming, aslında ismini de üretilen donanımdan almış. İşin özü aslında basit, Fareyi Ayaklarınızla kullanmak! Çılgınca geliyor demi! Evet yapmışlar, fareyi ayaklarımızla çalıştırabilecek donanımda yapmışlar :)

Örnek Oyun Videosu:

Şimdi burada bizim işimiz eğitim boyutuyla ilgilenmek olmalı tabi. Oyuncuların yoğun hareket ederek kullandıkları bu donanım bir çeşit fitness aleti vazifesini de görüyor. Bununla birlikte sitesinde bu cihazla eğlenceli bir şekilde oynanacak oyunlar da paylaşılıyor. Aslında her oyun oynanabilir ancak bazı oyunlar daha zevkli bir hal alıyor. Bu aşamada eğitimde nasıl kullanıldığına bir göz atalım.

Öğretmen ve Öğrencilerin görüşleri:

Eğitim sektöründe bu donanımla eğlenceli kılınabilecek eğitsel oyunlar üretmek hiç de zor değil. Flash programının yetenekleri ile mükemmel oyunlar çıkarılabiliyor.
http://www.footgaming.com/School/ExerLearning/
linkinde okulda nasıl kullanılacağına dair bilgiler yer alıyor.

http://www.footgaming.com/.docs/pg/10873
linkinde örnek ders planları yer alıyor. Yani FootGaming i derste nasıl kullanabileceğinize dair bir sürü örnek içeriyor.

Fiyatı biraz tuzlu olsa da (basit modeli: 179 Dolar, Zor platform: 379.99 Dolar) okullarda kullanılabilecek bir alternatif olarak görülebilir. Ayrıntılı bilgi için:

www.footgaming.com

Flash CS5 ile Text Acordion

2010-05-07T09:57:00.004+03:00

Adobe CS5 serisini çıkarır da biz dururmuyuz. Hemen araştırmalara girişip Flash CS5 ile yazılmış bir uygulamayı paylaşayım dedim. Text Acordion, Flash Player 10 ile rahatlıkla çalışmakta ancak FLA dosyasını sadece CS5 veriyon ve çıkarsa ileriki versiyonlarda açabilirsiniz.

import com.flashandmath.dg.text.TextAccordion;
import flash.display.Shape;

var accordion1:TextAccordion;
var accordion2:TextAccordion;

var textMarkup1:String = "<html>" +
         "<p>" +
             "The text here is created inside of ActionScript.  " +
             "It is an example of the new TLF text in Flash.  " +
             "The text is automatically being broken up into pieces, " +
             "displayed over separate sprite containers, but still considered as one " +
             "whole body of text.  The effect of unfolding after a mouse click is " +
             "handled by a tween.  We use a trick so that one tween controls the " +
             "motion of all of these container sprites.  The tween changes a single parameter " +
             "value, and all sprites are positioned using this parameter." +
         "</p>" +
     "</html>";

var textMarkup2:String = "<html>" +
         "<p>" +
             "The text used in this example is typed in " +
             "standard html format, but the Flash TLF Text converter can also import plain text " +
             "or text written in the Adobe Text Layout format.  " +
             "Since this is html text, we can " +
             "easily insert <a href='http://www.flashandmath.com'>links</a>." +
         "</p>" +
     "</html>";

///////////

init();

///////////


function init():void {
 accordion1 = new TextAccordion();
 accordion2 = new TextAccordion();

 //It is very important that the accordion be added to the display list BEFORE importing text.
 this.addChild(accordion1);
 this.addChild(accordion2);

 accordion1.x = 125;
 accordion1.y = 45;
 accordion1.yRotationStart = -30;
 accordion1.yRotationEnd = -30;
 accordion1.fontSize = 15;
 accordion1.lineHeight = 30;

 accordion2.x = 380;
 accordion2.y = 45;
 accordion2.paperColor = 0x97BC71;
 accordion2.textPixelWidth = 240;
 accordion2.yRotationStart = 27;
 accordion2.yRotationEnd = 27;
 accordion2.z = accordion2.textPixelWidth*Math.sin(Math.PI/180*accordion2.yRotationStart);
 accordion2.fontSize = 14;
 accordion2.lineHeight = 34;
 accordion2.tweenDurationDown = 20;
 accordion2.tweenDurationUp = 15;
 accordion2.cosineEnd = 1;
      
 accordion1.markupType = "html";
 accordion1.importText(textMarkup1);
 accordion2.markupType = "html";
 accordion2.importText(textMarkup2);
}

Çalışmayı görüntülemek için tıklayınız.

Proje dosyalarını ve Class ı indirmek için tıklayınız.

Çocuklarımıza Uygun Siteler

2010-05-01T22:00:00.006+03:00

Evlerin internetle tanışma sayıları arttıkça çocuklarımıza uygun site arayışları artmaktadır. Tavsiye olarak çocuklarınızı Google arama motorunda buldukları her türlü site ile yanlız bırakmamak olduğu belirtilir. O zaman onlara uygun sitelere yönlendirmemiz gerekiyor. ShiftDelete sitesini incelerken çocuklara uygun içerikli sitelerin listesini gördüm ve paylaşmak istedim. Kaynağa birkaç da benim eklemelerim oldu. Umarım faydalanırsınız.

www.egitim.gov.tr
Okul Öncesinden, İlköğretime, Ortaöğretimden Mesleki Eğitime kadar geniş bir yelpazede Öğrenme Nesneleri ile donatılmış Millî Eğitim Bakanlığı'nın resmi eğitim portalıdır. Bu sitede öğrenciler kendi seviyelerine uygun animasyon, simulasyon, sunu, çalışma kağıdı ve daha birçok içeriğe ulaşmaktadır. Dİğer sitelerden farklı olarak derslere destek nitelikte eğlenceli içeriklere ulaşabilirsiniz.

www.kulturcocuk.gov.tr
Kültür Bakanlığı, çocukları daha doğru eğitmek için internetin nimetlerinden faydalanmaya başladı. Bakanlığın çocuk kulübünde, minik ziyaretçileri eğlendirecek ve eğitecek özel içerikler bulunuyor. Basit oyuncaklar, atlas oyunu, tarihi bilgiler gibi özel bölümlere site üzerinden ulaşmak mümkün.

www.sihirliada.com
Site, sadece çocuklara özel içerikler geliştiren bir adres. Ancak sayfanın tüm özelliklerine ulaşmak için mutlaka üye olunması gerekiyor. Çocuklara İngilizce eğitimi de veren bu sitede, çizgi romanlar, masallar ve oyunlar da bulunuyor.

www.nationalgeographic.com.tr/ngkids/index.htm
National Geographic adı bilimle uğraşan herkes tarafından bilinir. Dünyanın en eski bilimsel makale dergilerinden biri olan National Geographic magazin, son yıllarda çocuklara yönelik özel bir dergide çıkartıyordu. Ödüllü belgesellerin bu ünlü kanalı, sitesinde çocuklara bilimsel bilgiler verirken içeriğini dergiyle paralel de tutuyor. Örneğin, dergideki hayvanlar hakkında daha fazla bilgi ve fotoğraflara buradan ulaşmak mümkün.

www.biltek.tubitak.gov.tr/cocuk/
Ağaç yaşken eğilir sözü insanlar için daha da geçerli. Bilimsel gerçekleri öğrenen çocuklar gelişim konusunda hayata 1-0 galip başlıyor.TÜBİTAK'ın özel olarak hazırladığı bu sitede çocuklara bilim aşkı aşılamak için hazırlanmış makalelerle karşılaşıyorsunuz. Sitede ayrıca, çocukların kendi aralarında yapabilecekleri güvenli deneylere de ulaşmak mümkün.

www.benimoyunlarim.com
Çocuklar internette en çok Flash animasyonla yapılmış oyunlara göz atıyor. Benimoyunlarim.com adlı sitede, internetin ufak sakinlerine uygun oyunlara yer vermiş.Flash'la hazırlanmış bu yapımlar, macera, yarış, spor gibi bölümlere ayrılmış.

www.ttcocuk.com
İnternetin en kapsamlı çocuk sitelerinden biride TTNET'e ait. Firma, ufak ziyaretçilerine özel olarak hazırladığı bu site için yüklü bir yatırımda yaptı. Sitede, çocuklar için eğitici bilgiler, tarihi dersler gibi bölümler bulunuyor.Bunun dışında, ufak ziyaretçilerin yaratıcılıklarını geliştirecek bölümlerde siteye eklenmiş. Örümcek Adam ve Demir Adam gibi ünlü süper kahramanlarla ilgili içeriklerde bu adreste bulunuyor.

www.cocukca.com
Birçok başarılı sanatçının çocukluğundan beri bu dalla ilgilendiği bilinir. Bir çocuğu sanata yönlendirmek aslında ona yapılabilecek en büyük iyiliklerden biri. Cocukca.com'da ziyaretçilerine bu konuda yardım etmeye çalışıyor. Çocukların yaratıcılıklarına yönelen flash oyunlar dışında sitede, minik sanatçı adaylarının yaptığı eserlere de yer veriliyor.

www.atlikarincam.com
Bu site tasarım olarak çocukların gözünden çıkmış gibi görünüyor. Renkli bir sayfa yapısına sahip, Atlikarincam.com internetin minik ziyaretçileri için farklı içeriklere sahip. Flash oyunlar, masallar, komik filmler ve eğitici oyunlar sitenin içerdiği sayfalardan bazılarını oluşturuyor.

Kaynak: http://shiftdelete.net/haftanin-web-siteleri-cocuk-ozel-20261.html

Flex Debug versiyonu Google Chrome da Çalıştırmak

2010-04-22T09:39:00.004+03:00

Flex in Debug versiyonunu Google Chrome tarayıcısında çalıştırmakta zorluk çekenler için;

Aşamaları sırasıyla takip ediniz.

1. Flash Player Firefox Debug versiyonu indirip kurunuz

http://www.adobe.com/support/flashplayer/downloads.html

2. Windows XP de bu klasör yolunu bulunuz

C:\WINDOWS\system32\Macromed\Flash

3. İçerisinde yer alan aşağıdaki dosyaları kopyalayınız

NPSWF32.dll (Version : 10.0.45.2)

flashplayer.xpt

4. Şu konuma yapıştırınız

C:\Documents and Settings\{sistem kullanıcı adı}\Application Data\Mozilla\Plugins

Flex Builder İçerisinde:

1. Şu klasör yolunu açınız

Window -> Preferences -> General -> Web Browser

2. Yeni bir web browser ekleyiniz

İsim :::Chrome
Konum :::C:\Documents and Settings\{sistem kullanıcı adı}\Local Settings\Application Data\Google\Chrome\Application\chrome.exe
Parametreler :::-sandbox

3. OK e tıklayın

Artık Google Chrome içinde kullanmaya hazır.

KONTROL İÇİN:

1. Browser içindeki Flash Player versiyonunuzu kontrol ediniz.

http://www.adobe.com/software/flash/about/

2. Veriyon, mozilla/plugins klasörüne yapıştırdığımız DLL versiyon ile aynı olmak zorundadır. NPSWF32.dll

Anlat Okulunu

2010-04-09T11:42:00.005+03:00

İlköğretim öğrencileri hayallerini yaptıkları web siteleriyle anlatıyorlar. Okumak istedikleri okulları yaratıcı zekalarıyla harmanlayıp geleceğe koşuyorlar.

Bu sene üçüncüsü düzenlenen Anlat Okulu web site yarışması tüm Türkiye'den ilköğretim öğrecilerini davet ediyor. Yarışma küçük bedenlerin hayallerini günümüzün ve geleceğin teknolojileri ile birleştirdiğinde ne kadar büyük olduğunu göstermeyi hedefliyor. Yarışma ilköğretim ve yatılı ilköğretim bölge okulları olmak üzere iki kategoride yapılarak YİBOlara da el uzatmayı unutmuyor. Yarışmak, hayallerini tüm dünyaya gösterebilmek, onlara anlatabileceğin çok şeyinin olduğunu düşünüyorsan ANLAT OKULUNU Web Site Yarışması seni bekliyor. Bilişimin Işığında Hayallerini Aydınlat...

www.anlatokulunu.com

Paper Craft

2010-04-03T09:17:00.003+03:00

Eskiden gazeteler kes yapıştır ile ev, otomobil hayva vs kartonları verirlerdi. Sevinçle bunları alır bütün gün uğraşarak bir araya getirmeye uğraşırdık. Çocuklar için (kendini çocuk hissedenlerde dahil) kesip yapıştırarak çeşitli karakterleri sağolsun Canon kendi sitesinde toplamış. Benim çok hoşuma gitti. Sizlerde indirip deneyebilirsiniz.

http://cp.c-ij.com/en/contents/1006/

MAC OS QuickLook Plugins List

2010-04-03T08:25:00.002+03:00

MAC OS un QuickLook özelliği bana göre diğer işletim sistemlerinin taklit edemeyeceği kadar güzel bir bileşen. Örneğin bir word (doc) dosyasını, bir PDF i, bir HTML i, hatta filmleri müzikleri sadece SpaceBar tuşuyla görüntüleyebilir hatta oynatabilirsiniz. İlgili program kurulu olmasa bile!

Ancak bazı dosya uzantılarının görüntüleyemiyor, bu da normal, dünyadaki tüm uzantıları görüntülemesi zaten imkansız. Örneğin CHM, ZIP gibi dosyaları benim gibi yoğun kullanıyorsanız öngörüntülemek isteyebilirsiniz. Burada imdadımıza 2. parti bileşenlerin yer aldığı QuickLook Plugins List sitesi koşuyor.

www.quicklookplugins.com

Sitede tabiki her uzantıya ait bir list bulamayabilirsiniz ancak MAC OS quicklook yapamadığı ancak popüler dosya uzantılarının bir çoğunu bulmak mümkün. Bazı bileşenler uygulama olarak makineye kurulurken, bazıları Terminal penceresinden ayar yapmanızı gerektirebiliyor. Güle güle kullanın.

MAC OS için Ezan Programı

2010-04-03T08:04:00.003+03:00

MAC OS işletim sistemi kullananlar için ezan programı, ücretsiz, ünlü seslerin (Yusuf İslam gibi) okudukları ezanlar ile hoş bir program.

Programı indirmek için tıklayınız.

Programı kurduktan sonra, City, zip kodu olan yere yaşadığınız yerin adını yazın, genellikle ezan vakitlerini tutturuyor ancak siz yine de www.diyanet.gov.tr ye girerek ezan saatlerini kontrol ediniz. Preferences -- Advanced bölümünde artı(+) eksi (-) dakikalar girerek bulunduğunuz yere göre tam uyumlu çalışmasını sağlayabilirsiniz.

Flex - ViewStack

2010-03-23T13:25:00.001+02:00

SWF Dosyası

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
    backgroundColor="#EEEEEE">
    
    <mx:Style>
        VBox {
            borderColor: #000000;
            borderStyle: outset;
            borderThickness: 2;        
        }
    </mx:Style>
    <mx:TabBar dataProvider="{menu}"/>
    <mx:ViewStack id="menu">
    <mx:VBox id="kirmizi" width="200" label="Kırımızı" height="150" backgroundColor="#FF0000"/>
    <mx:VBox id="yesil" width="200"  label="Yeşil" height="150" backgroundColor="#00FF00"/>
    <mx:VBox  id="mavi" width="200"  label="Mavi" height="150" backgroundColor="#0000FF"/>    
    </mx:ViewStack>
    
    <mx:LinkBar dataProvider="{menu}"/>
    <mx:ButtonBar dataProvider="{menu}"/>
    <mx:ToggleButtonBar dataProvider="{menu}"/>
    
    <mx:HBox>    
    <mx:LinkBar dataProvider="{menu2}" direction="vertical"/>
    <mx:ViewStack id="menu2">
    <mx:VBox id="kirmizi2" width="200" label="Kırımızı" height="150" backgroundColor="#FF0000"/>
    <mx:VBox id="yesil2" width="200"  label="Yeşil" height="150" backgroundColor="#00FF00"/>
    <mx:VBox  id="mavi2" width="200"  label="Mavi" height="150" backgroundColor="#0000FF"/>    
    </mx:ViewStack>
    </mx:HBox>
    
    
</mx:Application>

Flex - Dahili CSS Teknikleri

2010-03-23T10:09:00.001+02:00

Dahili CSS oluşturma
Tag için CSS oluşturma
Özelleştirilmiş CSS
global CSS
oluşturulan CSS leri kullanma

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
    <mx:Style>
    Application{
            background-color:#EEEEEE;
    
    }
        Label {
            font-size:24;
            font-weight:bold;
            text-decoration:underline;
            color:#000000;
        }    
        .kirmizi{
            color:#FF0000;
        }    
        global{
            font-family:"Helvetica","Arial","_sans";
        }
    </mx:Style>
    <mx:Label text="Hello World"/>
    <mx:Label text="Hello World"/>
    <mx:Label text="Hello World" styleName="kirmizi"/>
    <mx:Label text="Hello World"/>
    <mx:Text text="Bu bir css yazısı"/>
</mx:Application>

Flex - Tile ile resimleri otomatik hizalama

2010-03-22T17:56:00.002+02:00

Tile tagı içerisine gömdüğümüz resimlerin otomatik hizalanmasını ve browserda hareket olsa dahi uyum sağlamasını sağlayan güzel bir örnek:

SWF Dosyası

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#76EEEF, #FFFFFF]" horizontalAlign="left">
    <mx:Label text="Gezi Fotolarım" fontSize="18" fontWeight="bold" fontStyle="italic"/>
    <mx:HBox width="100%" height="100%">
        <mx:VBox width="60%" height="100%">
            <mx:Label text="Fotoğraf Kataloğu" fontWeight="bold" fontSize="18"/>
            <mx:Tile width="100%">
                <mx:Image source="@Embed('assets/thumbs/bigben.jpg')"/>
                <mx:Image source="@Embed('assets/thumbs/alcatraz.jpg')"/>
                <mx:Image source="@Embed('assets/thumbs/bourbonstreet.jpg')"/>
                <mx:Image source="@Embed('assets/thumbs/buckinghampalace.jpg')"/>
                <mx:Image source="@Embed('assets/thumbs/cablecars.jpg')"/>
                <mx:Image source="@Embed('assets/thumbs/coittower.jpg')"/>
                <mx:Image source="@Embed('assets/thumbs/crawfish.jpg')"/>
                <mx:Image source="@Embed('assets/thumbs/elcapitan.jpg')"/>
                <mx:Image source="@Embed('assets/thumbs/fishermanswharf.jpg')"/>
                <mx:Image source="@Embed('assets/thumbs/londonbridge.jpg')"/>
                <mx:Image source="@Embed('assets/thumbs/londonunderground.jpg')"/>
                <mx:Image source="@Embed('assets/thumbs/palaceoffinearts.jpg')"/>
                <mx:Image source="@Embed('assets/thumbs/riverboat.jpg')"/>
                <mx:Image source="@Embed('assets/thumbs/saintpauls.jpg')"/>
                <mx:Image source="@Embed('assets/thumbs/towerbridge.jpg')"/>
                <mx:Image source="@Embed('assets/thumbs/toweroflondon.jpg')"/>
                <mx:Image source="@Embed('assets/thumbs/tuolomne.jpg')"/>
                <mx:Image source="@Embed('assets/thumbs/yosemitefalls.jpg')"/>
            </mx:Tile>
        </mx:VBox>
        <mx:Panel width="40%" height="100%" layout="absolute" title="Alışveriş Kartı">
        
        </mx:Panel>
    </mx:HBox>
    
</mx:Application>

Flex- Boxes

2010-03-20T13:23:00.002+02:00

VBox, HBox ve Canvas kullanımı:
3 adet inputText in değişik kutular içinde gösterim örneği
swf dosyası

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="#EEEEEE" height="368" width="631">
        <mx:VBox borderStyle="solid" borderColor="#000000"  backgroundColor="#ffffff"
             paddingBottom="10" paddingTop="10" paddingRight="10" paddingLeft="10"
              verticalGap="25">
            <mx:TextInput text="VBox Örneği"/>
            <mx:TextInput/>
            <mx:TextInput/>
        </mx:VBox>
        
        <mx:HBox borderStyle="solid" borderColor="#000000"  backgroundColor="#ffffff"
             paddingBottom="10" paddingTop="10" paddingRight="10" paddingLeft="10"
               horizontalGap="25">
            <mx:TextInput text="HBox Örneği"/>
            <mx:TextInput/>
            <mx:TextInput/>
        </mx:HBox>
        
        <mx:Canvas borderStyle="solid" borderColor="#000000"  backgroundColor="#ffffff">
            <mx:TextInput text="Canvas Örneği"/>
            <mx:TextInput x="50" y="50"/>
            <mx:TextInput x="100" y="100"/>
        </mx:Canvas>
</mx:Application>

Flex - State ler ile çalışma

2010-03-20T11:00:00.023+02:00

Flash daki Scene (sahne) kavramına benzer State kavramı flex içinde çok işime yaradı.
Swf dosyası

Kod Bölümü:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="372" height="274">
    <mx:states>
        <mx:State name="Kayit">
            <mx:SetProperty target="{button1}" name="x" value="205"/>
            <mx:SetProperty target="{button1}" name="y" value="138"/>
            <mx:SetProperty target="{panel1}" name="width" value="320"/>
            <mx:AddChild relativeTo="{panel1}" position="lastChild">
                <mx:Label x="43" y="80" text="Adınız"/>
            </mx:AddChild>
            <mx:AddChild relativeTo="{panel1}" position="lastChild">
                <mx:TextInput x="94" y="78"/>
            </mx:AddChild>
            <mx:SetProperty target="{button1}" name="label" value="Kayıt Ol"/>
            <mx:AddChild relativeTo="{panel1}" position="lastChild">
                <mx:TextInput x="94" y="108"/>
            </mx:AddChild>
            <mx:AddChild relativeTo="{panel1}" position="lastChild">
                <mx:Label x="23" y="110" text="Soyadınız"/>
            </mx:AddChild>
            <mx:SetProperty target="{panel1}" name="title" value="Kayıt Ol"/>
            <mx:SetProperty target="{button2}" name="x" value="64"/>
            <mx:SetProperty target="{button2}" name="label" value="Kayıtlı Kullanıcıyım"/>
            <mx:SetProperty target="{button2}" name="y" value="138"/>
            <mx:SetEventHandler target="{button2}" name="click" handler="currentState=''"/>
            <mx:SetProperty target="{panel1}" name="height" value="220"/>
            <mx:SetProperty name="width" value="382"/>
            <mx:SetProperty name="height" value="288"/>
        </mx:State>
    </mx:states>
    <mx:Panel width="304" height="200" layout="absolute" title="Giriş" id="panel1">
        <mx:Label x="10" y="10" text="Kullanıcı Adı:"/>
        <mx:TextInput x="94" y="8"/>
        <mx:Label x="51" y="45" text="Şifre"/>
        <mx:TextInput x="94" y="45"/>
        <mx:Button x="94" y="98" label="Giriş" id="button1"/>
        <mx:Button x="173" y="98" label="Yeni Kullanıcı" click="currentState='Kayit'" id="button2"/>
    </mx:Panel>
</mx:Application>

Flex - Hareketli Metin Komponent Örneği

2010-03-16T10:59:00.001+02:00

Hareketli Metin Komponenti:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400"
    horizontalScrollPolicy="off" verticalScrollPolicy="off"
    creationComplete="init()">
    
    <mx:Script>
        <![CDATA[
            private var myTimer:Timer = new Timer(10);
            
            [Bindable]
            public var text:String;
            
            public function start():void
            {
                myTimer.start();
            }
            
            public function stop():void
            {
                myTimer.stop();
            }
            private function init():void
            {    
                myTimer.addEventListener(TimerEvent.TIMER, moveLabel);
            }
            
            private function moveLabel(event:TimerEvent):void
            {
                if (scrollingLabel.x < (0-scrollingLabel.width))
                {
                    scrollingLabel.x = this.width;
                }
                else
                { 
                    scrollingLabel.x --;
                }
            }
        ]]>
    </mx:Script>

    <mx:Label id="scrollingLabel" x="{this.width}" text="{text}"/>
</mx:Canvas>

Komponenti çağırıp fonksiyonlarını tetikleme:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:components="components.*">
    <components:ScrollingText id="myScrollingText" text="Basit bir mesaj"
         fontSize="18"/>
<mx:Button label="Başla" click="myScrollingText.start()"/>
<mx:Button label="Dur" click="myScrollingText.stop()"/>
</mx:Application>

Flex - Komponent Özellikleri

2010-03-16T10:11:00.001+02:00

Kendi oluşturduğumuz komponent özelliği ile oynayarak ana uygulamada değişiklikleri görmek:

Komponent Kodu:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" borderStyle="solid" paddingBottom="5"
     paddingLeft="5" paddingRight="5" paddingTop="5"
       verticalAlign="middle" backgroundColor="#000000" borderColor="#ffffff" borderThickness="2">
    <mx:Script>
        <![CDATA[
        [Bindable]
            public var degisken:String;
        ]]>
    </mx:Script>
    <mx:Label text="{degisken}" fontSize="12" fontWeight="bold" color="#0000FF"/>
</mx:VBox>

Ana Uygulamada komponentin kullanılması:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="components.*">
    <ns1:cizgili x="435" y="120" degisken="Volkan">
    </ns1:cizgili>
    <ns1:cizgili x="454" y="296" degisken="Çelebi">
    </ns1:cizgili>
    
</mx:Application>

Flex 3 - Kendi Komponentini Kullanmak

2010-02-22T18:08:00.002+02:00

Flex in en önemli özelliği çok fazla hazır komponenti bulunması ve kolay kullanılmasıdır. Kendi oluşturacağımız özel komponentleri de kullanmamıza izin veriyor.

Yeni bir komponent oluşturmak için, Projenizde istediğiniz bir bölümde (genelde src altında) bir klasör açın. Ben adına components dedim. Bu klasör üzerine Sağ Tuş -- New -- MXML Component diyoruz, Componente bir isim veriyoruz, alt bölümde hangi hazır komponenti örnek alacağını seçiyoruz ve bildiğiniz MXML belgesi oluşturuyor aslında.

Bu MXML belgesine istediğiniz özellikte bileşenler ekleyerek (örneğin bir hesap makinesi) kullanmak için kaydedebilirsiniz. Ben şimdilik basit bir VBox kullandım.

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
   backgroundColor="#FF0000">
  <mx:Label text="bu benim komponentim"/>
  <mx:TextInput id="giris"/>
  <mx:Button label="Tıkla"/>
</mx:VBox>

Şimdi bunu nasıl kullanacağımıza gelelim. Normal bir MXML Application oluşturuyoruz. İçerisinde components: diye başladığınızda komponentinizin adını görmeniz gerekiyor. Ben ismini yeni verdiğim için components:yeni diye çıktı.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:components="components.*">
  <components:yeni x="10" y="10"/>
  <components:yeni x="205" y="10">
  </components:yeni>
</mx:Application>

Design modunda View -- Components diyerek sol tarafta Components Panelini ve içinde Custom bölümünü açtığınızda da kendi komponentinizi görebilir ve sahneye sürükleyebilirsiniz. Bir çalışmada bir komponenti istediğimiz kadar kullanabiliriz. Yukarıda ben 2 adet kullandım.

Flex 3 - Dolar / TL Çevirici Uygulaması

2010-02-20T13:50:00.013+02:00

Flex 3 deki ilk uygulamam: Dolar TL Çeviricisi
Swf Dosyası

Bu kısımda dikkat edilecek uygulamalar:
mx:Number Tagı ile hesaplama işlemleri.
CurrencyFormatter ile para birimi işlemleri.
NumericStepper ile basamaklı artış işlemleri.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="300" height="300" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#913EE6, #DAD0E0]">
   <mx:Number id="hesap">{Number(girilen.text) * Number(adim.value)}</mx:Number>
   <mx:CurrencyFormatter id="cf" precision="2" currencySymbol="TL"
         alignSymbol="right" decimalSeparatorTo="," thousandsSeparatorTo="."/>
   <mx:Panel width="254" height="228" x="23" y="40" title="Dolar / TL Çevirici" borderColor="#240606" color="#000506" layout="absolute">
       <mx:Label text="Dolar:" x="10" y="21"/>
       <mx:TextInput x="57" y="19" width="116" restrict="0-9" id="girilen" text="100"/>
       <mx:Label x="26" y="62" text="TL:"/>
       <mx:Label x="57" y="62" text="{cf.format(hesap)}" width="95"/>
       <mx:ControlBar height="52" y="146">
           <mx:Label text="1 $ =" fontSize="15" fontWeight="bold"/>
           <mx:NumericStepper fontSize="14" value="1.51" stepSize=".01" minimum="0" id="adim"/>
           <mx:Label text="TL" fontSize="15" fontWeight="bold"/>
       </mx:ControlBar>       
   </mx:Panel>
</mx:Application>

Flex 3 - Bind / Bindable Olayı

2010-02-20T13:13:00.002+02:00

Bu bölümde 3 farklı Bind yöntemine bakacağız:

1. Yöntemde bir text kutusuna verdiğimiz ID ile direkt label içine yazdıralım.

<mx:TextInput id="giris"/>
    <mx:Label text="{giris.text}" width="148"/>

2. Yöntemde aynı işlemi TAG kullanarak yapalım (Bunun ayrı avantajları var uzun diye küçümsemeyin:)

    <mx:TextInput id="giris2"/>
    <mx:Label id="etiket2"/>
    <mx:Binding source="giris2.text" destination="etiket2.text"/>

3. Yöntemde ise AS3 de tanımladığımız bir değişken aracılığıyla Bind yapalım:

<mx:Script>
        <![CDATA[
            [Bindable]
            private var isim:String;
        ]]>
    </mx:Script>
    <mx:TextInput id="giris3"/>
    <mx:Label text="{isim}"/>
    <mx:Binding source="giris3.text" destination="isim"/>

* Normalde AS3 tarafında yazdıklarımız Bind edilemez. Baş tarafına Bindable yazarak altında kalan öğeleri Bind yapılabilir konuma getiriyoruz.

Flex 3 - TextInput, TextArea, RichTextEditor

2010-02-20T12:57:00.002+02:00

TextInput Özellikleri:
id: Başka bir alana Bind edilebilmesi için verilen isim.
width: Genişliği
maxChars: İçine girilecek maximum karakter sayısı
restrict: İçine girilecek karakter filtresi A-Z (sadece büyük harfler), 0-9 Sadece sayılar gibi
displayAsPassword: Şifreli görünmesi için

TextArea: Daha çok satırlı yazılar girmek için
RichTextEditor: hazır yazı sitilli text giriş ekranı

Bu kod bölümünde TextArea ya RichTextEditor den girilen yazıların HTML kodlu hali aktarılıyor. Bind örneğinden biri.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    backgroundColor="#eeeeee">
    <mx:Label text="TC Kimlik No:" x="58" y="34"/>
    <mx:TextInput x="166" y="32" id="deger" width="200"
         maxChars="11" restrict="0-9" displayAsPassword="true"/>
    <mx:TextArea x="166" y="62" width="231" height="107" id="giris" text="{zengin.htmlText}"/>
    <mx:RichTextEditor x="459" y="47" title="Title" id="zengin">
    </mx:RichTextEditor>
</mx:Application>

AS3 - İki sayı arasında rasgele sayı ürettirmek

2010-02-20T12:34:00.003+02:00

Math.random() * 10;
tarzında bir komut 0 ile 10 arasında sayı üretecektir.

Bazen ihtiyacımız başlangıç değerini de kendiniz verdiğiniz bir fonksiyon olabilir. Yani sayı 5 ile 15 arasında rasgele üretsin demek isteyebilirsiniz. Bunun çözümü:

var sayi1:Number=5;
var sayi2:Number =15;

var rasgeleSayi:Number = Math.random() * (sayi2 - sayi1 + 1) + sayi1;

Tabi rasgele değeri ondalıklı olacağından Math.floor(rasgeleSayi); diyerek ondalık kısmından kurtulabilirsiniz.

Flex 3 - Label, Text, htmlText Kullanımı

2010-02-20T12:25:00.004+02:00

Bu bölümde dikkat edilecek kodlar:
truncateToFit="false" --- Label genişliği yazıya göre dar geldiğinde (...) üç nokta ile bitirmesini engeller.

condenseWhite="true" --- Text içindeki boşluklara izin verir. Daha düzgün yazar.

htmlText --- İçerisinde tüm HTML kodları kullanılabilir. CDATA içinde direkt yazı yazılabilir.

DipNot: Flex de istedğiniz bölümün alt tarafa kopyasını almak için Bölümü seçin Klavyede CTRL + ALT + Alt Yön Tuşu

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
    backgroundColor="#eeeeee">
<mx:Label text="Volkan Çelebi Deneme Deneme Deneme fsdkf sdfjsdhfn" width="150" truncateToFit="false">
    
</mx:Label>
<mx:Text width="150" condenseWhite="true">
<mx:htmlText>
    <![CDATA[
        <font color="#FF0000"><b>Volkan Çelebi </b>Deneme</font> Deneme Deneme fsdkf sdfjsdhfn
    ]]>
</mx:htmlText>
</mx:Text>    
</mx:Application>