22 Nisan 2008 Salı

Açılır menü

u derste açılan menü yapımını anlatmaya çalışacağım ilk olarak flash sayfamızı açalım rectrangle(kare yapım ®)aracını seçelim tools menüsünde options un hemen altında duran set corner radius�a tıklayalım ve bu değeri 12 yapalım Sahneye dış çizgisi olmayan bir kare çizelim text aracını seçip üzerine menü yazalım ve karemizi tamamen seçip F8 diyerek movie clip yapalım Şimdi menü movie clip imize çift tıklayarak içine girelim sahnede demin oluşturmuş olduğumuz menü karesi duruyor sahnedeki layerın ismini menü olarak değiştirelim bunun üzerine 2 tane daha layer ekleyelim ve sahnedeki layerların sıralaması aşağıdaki gibi olsun Şimdi mask katmanını seçelim ve buraya biraz sonra ekleyeceğimiz ana sayfa, galeri vs.. gibi butonları koyacağımız büyüklükte bir kare çizelim rengi önemli değildir çünkü bunu maskelemek için kullanacağız bunu f8 diyerek grafik yapalım şimdi geldik butonları yerleştirmeye ne kadar buton oluşturacaksanız o kadar layer oluşturun ve bu layerları mask katmanını altına çekin ben 3 tane buton oluşturacağım ve isimleri sırasıyla ana sayfa ,linkler ve galeri olacak son olarak en alta da bir layer eleyelim ve adına fon diyelim bu butonların arkasında bulunan zemin olacak buraya kadar yapılan işlem ve layerların sıralaması aşağıdaki gibi olmalı. Şimdi fon layer�ını seçip mask layerında çizdiğimiz kareden biraz daha ufak bir kare çizelim ama menü ile uyumlu bir renge sahip olsun ve bu çizdiğimiz kareyi menü yazısının üstüne taşıyalım aşağıdaki gibi olmalı Şimdi daha öncede yapmış olduğumuz butonları sahnedeki layerlarına yani ana sayfa butonunu ana sayfa layerına, linkler butonunu linkler layırına ama fon katmanın uzerinde bir yere yerleştiriyoruz(buton yapımı için daha önceki buton yapımı ve kullanımı adlı dersi inceleyin ) aşağıdaki gibi olmalı son şekli Şimdi gizli menüyü hareketlendirmeye geldi menü layerı hariç bütün layerlara F6 deyin menü layerın da ise 10 frame F5 deyin time line aşşaıdaki gibi olmalı Şimdi mask layerına gelin ve sağ kilik yapı mask seçeneğini seçin altındaki butonların bulunduğu layerları ve fon layer ını Mouse un sol tuşuyla çift tıklayın ve karşınıza gelen menüden masked seçenegini seçin Şimdi time line dan 5. frame geliyoruz sahnedeki action, Ana sayfa ve mask katmanını kilitliyoruz ve Mouse ile sahneyi tamamen seçip klavyeden aşağı ok tuşu ile seçtiğimiz butonlar ve fon katmanını aşağı indiriyoruz bunu yaparken sahneden kaybolduğunu göreceksiniz seçtiğiniz layerların şimdi mask katmanın üzerindeki kilitli işratinin yanındaki nokta yani gizli/ göster düğmesine tıklayın bi çarpı olmalı tıkladığınızda. Ve şimdi ana sayfa layer ına gelin ve timeline da sag klikleyin karşınıza gelen menüde en bastaki create motion tween e tılatın karşınıza pembemsi bir renkte ok gelecek bu işlemi diğer linkler, galerive fon katmanında da uygulayın --------------------------------------------------------- Şimdi time line çizgisini 0 ile 5 arasında oynatınca yukardan aşağıya inen menümüzü görüyoruz şimdi 10. freme gelelim menü layer'ı hariç bütün layerlara F6 diyelim ve demin yaptığımız gibi aşağıya taşıdığımız bütün layerları tekrara menü çubuğunun üstüne taşıylaım ve hepsine birer create motion tween ekleyin Şimdi geldi actionscript eklemeye acrions paneline gelelim 1. frame e tıklayalım F9 a basalım actions paneline stop(); komutunu ekleyelim 5. frame e de stop(); ekleyelim ve 10.frame gotoAndPlay(1); komutunu ekleyelim ve secene deyip ana sahneye dönelim şimdi işlemimiz daha bitmedi sahnede öylece çalışmayı bekleyen bir movie clip imiz var şimdi menümüzün bulunduğu layer ın üzerine bir layer daha oluşturalım ve adına da buton diyelim ve bir kare çizelim ve F8 le buton yapalım şekli şemali önemli değil sadece yaptığımız movie clip'i kaplasın yeter şimdi düğmemize tıklıyoruz ve properties denetçisin den color yazan yere tıklayın ve alpha değerini 0 yapın böylece buton sahnede görünmeyecek şimdi butonumuzu menü movie clip inin üzerine koyalım movie clip i tamamen kaplasın şimdi buton seçiliyken Actions panelini açalım (F9 ile ) ve şu kodları ekleyelim bu kısımda buton ve menü movi klip ini karıştırmamaya dikkat edin anlamak için propertiesten kontrol edin evet butona şu kodları yazalım on(release){ menü_mc.gotoAndPlay(5); }şimdi menü movi clip ini seçelim ve instance name ine menü_mc yazalım bunu yapmaz isek buton bu komutu hangi moviclipe uygulayacağını bilemez ve yaptığımız menü çalışmaz Artık CTRL+Enter

guide kullanımı

İlk olarak
1-) sahnemize 3tane layer oluşturalım ve başta top altında pota ve zemin olmak üzere isimlendirelim.
2-)top layer ına oval aracını seçerek (O) CTRL ye basılı tutarak dış çizgisi olmayan bir top çizelim
3-)şimdi pota layerına gelelim ve potaya benzer bir oval çizelim ve zemin layer ına da line tool ile düz bir çizgi çizelim
4-)şimdi top layer ına sağ kilik diyelim ve Add motion guide seçeneğini seçelim top layer ını üzerine guide top diyer bir layer geldi bu layer�a çizeceğimiz çigiyi takip edecek objemiz
5-)şimdi araçlar(tools)menumuzde selection aracını seçelim ve tools menusunun altında mıknatısa benzeyen snap to object seçili değilse seçelim (bunu yapmaz isek nesne çizgiyi takip etmez )ve çizgi seçeneklerinden smoot u seçelim
6-)pota ve top guide layer ların da 50 frame tıklayın ve F5 deyin sonra Top layer ında 50 frame F6 deyin
7-)en üstteki �top guide� layer ına gelin ve çizginizi potanızın içinden geçecek şeklide kalem yada fırça aracı ile çizin



8-)şimdi normal top layer ına gelin ve son frame e tıklayın ve topunuzu çizginin sonuna getirin yani: top oynadığında en son duracağı nokta ,şimdi top layer ına sağ kilik ve create motion tween i seçin ve CTRL+ENTER deyin.
bu mantıla hareket eden arabalar vs birçok degisik çalısma yapabilirsiniz

7 Şubat 2008 Perşembe

Harita Zoom

Önizleme











Bu Çalışmayı Indirin
Çalışmayı(.Fla) İndir







Kalemle Çöp Adam Cizdirme Animasyonu :)

Önizleme











Bu Çalışmayı Indir
(JueLz'e Tesekkurler)
Çalışmayı(.Fla) İndir







Güzel Bir Animasyon Daha

Önizleme











Byu Çalışmayı Indir

Çalışmayı(.Fla) İndir







Güzel Bir Mouse Efekti

Önizleme











Bu Çalışmayı Indirin

Çalışmayı(.Fla) İndir







Güzel Bir Çalışma

Önizleme











Bu Çalışmayı Indirin

Çalışmayı(.Fla) İndir







XML ile Flash'a Resim Cekmek

İlk olarak bir m.c oluşturun içine her hagi bir eklenti yapmadan anasayfaya dönün. Daha sonra Library den m.c nizi ana sahneye çekin ve instance name bölümüne tesi ismini verin.
Evet sıra geldi xml ile iletisim kurmaya öncelikle farklı bir layer ekleyerek içine alttaki kodları yazın.


meuXML = new XML();
meuXML.load("dosyaismi.xml");
meuXML.ignoreWhite = true;
a = 0;
meuXML.onLoad = function() {
tesi.loadMovie(meuXML.childNodes[a].firstChild.nodeValue);
};



Kodların Açıklaması :
1. Satır : Bu bölümde değişkenin xml dosyası olduğu belirtiliyor.
2. Satır : Değişken ile xml arasında bağlantı kurduğu satır. "Dosya ismi. xml" yazan bölüm xml nizin adı olmalıdır.
3. Satır : Bu bölümde açıklanmaya değer fazla bir şey yok xml ve beyaz noktalarla ilgili.
4. Satır : Bu bölümde değişkene hangi sıradaki resmin çağırılacağı belirtilir.
5. Satır : Xml nin yüklendiğini belirtmek için yazılır.
6. Satır : mc nin instace bölümdeki ismini buraya yazarak o movie nin içine yuklenmesini saglar.

Aşağıdaki kodlarda xml nin içine yazılması gereken kodlar.



img1.jpg
img2.jpg
img3.jpg
.
.
.
.
.



Burdan da anlasılacagı gibi burda resimler xml ye tanıtılmakta.

Önemli Not : Resimleri, fla dosyasını ve xml dosyasını aynı alan içine kaydetmeyi unutmayın.

Fare Ile Mask Yöntemi

  • ilk layerda sahneye maskelemek istediğiniz bir resmi sürükleyerek koyun yada file-->import-->import to stage den koyun
  • layer 1 e sağ tıklayın properties e tıklayın ve ordan ismini cisim koyun
  • yeni layer oluşturun aynı yöntemle onun adınıda mask koyun
  • mask layer ına tıklayın ve sahneye çizgisi olmayan dolgusu(renk fark etmez) olan bir yuvarlak (faketmez ama en güzel görünen yuvarlaktır diye dedim)
  • yuvarlaya tıklayıp f8 e basın ve movie clip (kısacası mc) yapın
  • instance name kısmına Flash yazın
  • yuvarlaya 1 kere tıklayıp actions bölümünü açın ve şu kodları yazın

    on (press) {
    startDrag("/flash");
    }
    on (release) {
    stopDrag();
    }


  • sellection toll a 1 kere tıklayınız ve properties bölümünden background u siyah yapın (bu benim tercihim siz istediğinizi seçin)
  • son olarak mask layerına sağ tıklayın ve mask ı seçin
    ve ctrl+enter le flashınızı kontrol edin
  • Animasyonlu Buton Yapımı

    1 . File - New

    2 . Properties alanından arka plan yeşil ayarlanır.

    3 . Timeline de yeni layer eklenir ve iki layer olmuş olur.

    4 . İlk layer de çiçeğin koyulacağı bahçe şekli oluşturulur. Bunun için araç kutusundan fırça seçilir ve dolgu rengi değiştirilerek sahneye şekiller çizilir.

    5 . Diğer layerde fırça yardımıyla çiçek çizilir. Seçim aracı ile seçilerek Insert � Convert to Symbol ile Buton özelliği verilir.

    6 . Çiçek üzerinde çift tıklanır ve açılan pencerede Up kısmında F6 ile anahtar kare eklenir. Over kısmında da F6 ile anahtar kare eklenir ve çiçeğin boyutu ve Alpha özelliği değiştirilir.

    7 . Yine Over karesindeyken Text aracı ile çiçeğin yanına bir yazı yazılır.

    8 . CTRL+ENTER ile test edelim

    Tekerlek Yapımı

    1-Layer1 -->ilk kare create motion tween-->(istediğin yere kadar) insert keyframe
    3-frame1'i seç.
    4-şekil seç.
    5-properties'ten tween:motion seç.
    6-properties'ten ease:78 (istediğiniz sayıyı seçebilirsiniz) *ease=tekerlek hızını ayarlar.
    7-tekrar properties'ten rotate=cw' yi seç. *cw=saat yönüne dönmeyi sağlar.


    8-sonuncu frame'i seç.
    9-şekil seç.
    10-properties'ten tween:motion seç.
    11-properties'ten ease:78 (istediğiniz sayıyı seçebilirsiniz)
    12-tekrar properties'ten rotate=cw' yi seç.

    Şifreli Çalışma Yapmak

    Önce 2 tane ayrı ekran çizeceğiz.

    1.EKRAN İÇİN;

    1-TEXT TOOL'a bas.
    2-properties'ten input 'a bas.
    3-dikdörtgen çiz.
    4-properties'ten var'a a yaz.


    2.EKRAN İÇİN;

    1-TEXT TOOL'a bas.
    2-properties'ten input 'a bas.
    3-dikdörtgen çiz.
    4-properties'ten var'a s yaz.


    Şimdi onay kutusu yapmalıyız.

    ONAY KUTUSU İÇİN;

    1-bir kare çiz.
    2-f8 --> convert to symbol'den buton yap.
    3-ACTION'dan --> condition/loops'a bas.
    4-if'i seç.
    5-Şu kodları yazın;

    on(release){
    if (a=="TÜRKİYE")
    { S="DOĞRU" }
    else
    { s="YANLIŞ"}
    a=" ";
    }


    Şimdi Test Edin

    Hesap Makinesi Yapımı

    EKRAN İÇİN;
    1-TEXT TOOL'a bas.
    2-properties'ten input 'a bas.
    3-dikdörtgen çiz.
    4-properties'ten var'a x yaz.



    RAKAMLAR İÇİN;
    1-hesap makinasının tuşları modunda kare çizin.
    2-kareyi f8_convert to symbol'den button'u seçin.
    3-kareleri çoğalt.
    4-bu karelerden 0'dan 9'a rakamlar,4 işlem,sil ve eşittir komudu oluşturacağız:)
    5-1 nolu buton için;

    1 nolu butonu seç
    on (release)
    {
    x=x+"1";
    }

    Geriye kalan 2,3,4,5,6,7,8,9,0 nolu butonlar için aynı işlemi uygulayacağız yanlızca kodun yazılacağı butonu seçip,
    x=x+"1"; kısmındaki 1 yerine yazılcak sayının kendisini yazacağız!!





    SİL İÇİN;
    1-Sil butonunu seç;
    on (release)
    {
    x=" ";
    y=0;
    }



    TOPLAMA (+) İÇİN;
    1-TOPLAMA (+) butonunu seç;

    on (release)
    {
    y=x;
    x=" ";
    k=1;
    }



    ÇIKARMA (-) İÇİN;
    1-ÇIKARMA (-) butonunu seç;

    on (release)
    {
    y=x;
    x=" ";
    k=2;
    }


    ÇARPMA (*) İÇİN;
    1-ÇARPMA (*) butonunu seç;

    on (release)
    {
    y=x;
    x=" ";
    k=3;
    }


    BÖLME (/) İÇİN;
    1-BÖLME (/) butonunu seç;

    on (release)
    {
    y=x;
    x=" ";
    k=4;
    }



    EŞİTTİR (=) İÇİN;
    1-EŞİTTİR (=) butonunu seç;
    on (release)
    {
    if(k==1)
    {
    x=int(y)+int(x);
    }

    on (release)
    {
    if(k==2)
    {
    x=int(y)-int(x);
    }

    on (release)
    {
    if(k==3)
    {
    x=int(y)*int(x);
    }

    on (release)
    {
    if(k==4)
    {
    x=int(y)/int(x);
    }}

    Flash ile Site Yapmak

    Bu derste flash ile site yapma mantığını anlatmaya çalışacağım görselliğe ve diğer şeylere değinmeyeceğim ilk olarak
    1-)bir layer oluşturun ve adını menü deyin ve içerisine 4 adet buton yerleştirin bu layer hep en üstte duracak diğer layerların altında kalırsa görünmeye bilir
    2-)bunun altına yeni bir layer daha oluşturun ve adına sayfalar deyin burada sayfaları ve içerikleri bulunacak Anasayfa ,linkler vs�
    3-) sayfalar layerına bir rectlance aracı ile kenarları oval bir kare çizelim bu sayfanın bir kısmını kaplasın bu bizim fon sayfamız olacak ve üzerine istediğimiz resim yazı vs şeyleri yerleştireceğiz
    4-)şimdi sayfalar layerında 2. frame e F6 diyelim ve text aracını seçip buraya bir şeyler yazalım
    5-)sonra bu işlemi her buton için gerçekleştirelim yani anasayfa için bir sayfa linkler için 1 sayfa çünkü butonlara basınca bu frame lere gidecek birazda ha açıklamak gerekirse ana sayfa butonuna tıklayınca 1.frame ye gidecek linklere tıklayınca 2.frameye gidecek
    6-)şimdi butonlara kod vermeye geldi Anasayfa butoununa tıklayalım ve actions panelini açalım ve şu kodu ekleyelim

    on(release){
    gotoAndStop(1);
    }


    burada parantez içinde olan sayı o frame git kodun tamamı ise parantez içindeki frame git ve orada dur demektir bunu diğer butonlarada uygulayalım hangi frame sayfa eklediysek onun numarasını girelim ve butonlarımızı o sayfalara yönledirelim
    7-)şimid butonlar layer ında 1 frame e tılayıp dikkat edin butonlara değil 1.frame e tıklıoyruz actions panelinden
    stop();
    komutunu yazalım ki açıldığında ilk sayfada dursun diger sayfalara biz git demeden gitmesin ve 4. frame F5 diyelim çünkü altta 4 sayfa yaptık ve 4 frame kullandık butonlarında 4. frame e kadar sayfada görünmesin için 4. frame F5 yapıyoruz

    alatım biraz karışık gibi görünebilir ama uygulama oldukça basittir

    evet artık sayfamız hazır CTRL+ENTER diyelim ve test eldelim