Botego Web Seminerlerine Davetlisiniz.

Botego şirketinin her ayın ilk cumartesi İTÜ Maçka yerleşkesinde düzenleği Web Seminerleri devam ediyor.Geçtiğimiz ay Daron YÖNDEM ile Silverlight üzerine bir seans için oradaydık,yarın ise Mart programında saat 12:00'de Adobe yeni programları ve internete etkileri üzerine ben konuşmacı olacağım. Avrupa tarafında olan blog okuyucularımı ve Maçka'ya yakın olanları bekliyorum.


Ayrıntılı bilgi ve eski seminerlerden görüntüler için :



NETRON'da Ücretsiz Silverlight Workshopları


Merhaba arkadaşlar ;

Microsoft'un yeni Web Tasarım ve Geliştirme teknolojisi Silverlight üzerine Netron'da 3 ayrı gün 6 saatlik ÜCRETSİZ workshop eğitim planını uzun süredir planlayıp en sonunda hayata geçirebiliyoruz.Silverlight üzerine hiç bilgisi olmayan,biraz bilgisi olup projeler yapmak için tam gün eğitim isteyenler için kaçınılmaz fırsat. Her gün Netron, Kadıköy/Altıyol şubesinde sabah 10.00-18.00 arasında bilgisayar başında eğitimler yapılacak.İlk gün Netron 'dan değerli hocamız Ozan INKAYA açılış konuşması yaptıktan sonra Silverlight üzerine Tüekiye'de tek isim olan Daron YÖNDEM ile Silverlight eğitimine geçilecek.2.adımda veri tabanı uygulamarı ve son adımda da video uygulamalarını derinlemesine uygulamalı öğrenme fırsatımız olacak.

Laptoplarıyla gelenler içinde yerimiz olacak ama sınıf imkanları dahilinde en fazla 25 kişi alabileceğiz o yüzden önkayıt yapanlar arasından 25 şanslı kişi aktivite tarihinden bir kaç gün önce ön kayıt esnasında belirttikleri telefon numaralarından aranarak bilgilendirilecektir. Katılımcı sayımız 25 olacağı için kayıt yaptıranlar arasından seçim kura ile yapılacaktır.







Ön kayıt yaptırtmak için değerli eğitmen dostum Daron YÖNDEM 'in blog adresinden bilgilerinizi girebilirsiniz. Güzel bir etkinlik 3'lemesi olması dileğiyle...

http://daron.yondem.com/tr/PermaLink.aspx?guid=e52a84f7-3c2c-4ae5-8fd1-2b998eb25378



Samples & Tutorials klasöründeki hazineler! :)



Merhaba arkadaşlar ;

Güzel bir sürpriz olacağına inandığım bir bilgiyi paylaşmak istiyorum. Geçtiğimiz günlerdeki bir kurumsal eğitimde internet yerine offline örnekler gerekince Flash programı altındaki " Samples & Tutorials " klasörünü kurcalamak zorunda kaldık. İyi de olmuş,muazzam örnekler var ve tavsiyem sizin de kurcalamanız :)

Tam olarak adres "C:\Program Files\Macromedia\Flash 8\Samples and Tutorials" klasörü altında.Maskeler,galeriler,animasyonlar,actionscript ile oyunlar daha neler neler. Ben beğendiğim bir XML Foto Galerisini buraya ekliyorum ki talep artsın :) XML galerisi olduğundan fotoğraflar dışarıdan çağırılıyor ve sadece fotoları değiştirmeniz yeterli bu galeriyi kullanmanız için ve fla'sı da zaten kullanmanız için var.

Benim örneğimin dosyalarını da ekliyorumki Flash 8 için geçerli bu örnekler ne yazıkki CS3'te veya daha eski versiyonlarda yok.





Fatih Hayrioğlu CSS E-kitapı yayınlandı.

Merhaba arkadaşlar ;

Tavsiye linklerimde de görür görmez eklediğim Türk blogları arasında CSS dersleri ve eğitim odaklı olması nedeniyle dikkati çeken Fatih hayrioğlu'nun Günlüğü , en sonunda Fatih'in notlarını toplamasıyla Türkçe'de benzeri olmayan bir CSS kaynağı olmuş.Mutlaka sitesinden indirip okuyun.

Fatih'in yazması ve ayrıca toplamasının da emeğinden dolayı ayrıca yine kutluyorum.


Faydalanın...



http://www.fatihhayrioglu.com/?page_id=461


Türkiye'de ilk Bireysel Silverlight Eğitimi Netron BA'da açıldı.


Merhaba arkadaşlar ;

Blogumu takip edenlere güzel haberlerim var. Netron Bilişim Akademisi'nde Türkiye'de bir ilki gerçekleştirerek " Microsoft Web Designer " başlığı altında Silverlight tabanlı Web Tasarım ve Programlama kursunu açtık.Ben Expression Studio ve tasarım kısmını , Daron Yöndem hocamız da Silverlight ve Visual Studio kısmına girecek 200 saatlik haftaiçi 2 ay sürecek eğitimlerimiz.

Eğitim içeriğini altta saat saat programlarla beraber görebilir , ayrıntılı bilgileri Netron'un anasayfasından veya telefon ile öğrenebilirsiniz.



Web tasarım sistemi kodlama yapısını temel aldığından script veya language dediğimiz XHTML, CSS, Java Script, DOM ve ASP.Net kodlama yapıları temelleri Expression Web programı üzerinde katılımcıya öğretilir. Web Teknolojileri altyapılarını kuran katılımcılar Expression Design ile Silverlight projeleri için özel olarak geliştirilmiş XAML tabanlı vektörel görselleri hazırlamayı ve tasarlamayı öğrenirler. Bu görseller ile oluşturulan arayüz elemanlarını Expression Blend ile Animasyon kazandırma ve bu animasyonları Visual Studio ile çeşitli etkileşime ve internete hazır hale getirim gösterilir. Dersler web tasarım sektörünü simule etmek amacıyla proje bazlı verilir ve başarılı biçimde projelerini tamamlayan katılımcılar "Netron MS Web Designer" sertifikası almaya hak kazanırlar.

Ayrıntılı bilgi için :




Custom ScrollBar Tasarımı ve alternatifler

Merhaba arkadaşlar ;

Ne zamandır bloguma eklemeyi düşündüğüm şirketin logosunu scroll olarak bir Statik Text'e ( Dynamic olmadığından türkçe sorunu da ortadan kalkıyor)gayet basit bir uygulama ile atanabildiğini,sizin istediğiniz logo veya sembolu scrollbutonu olarak bir şerit boyunca kullanabildiğiniz tasarımı anlatacağım.Biraz AS 2.0 bilgisi gerekicek ama eğer yabancıysanız kodlara sonuçta ben yazdım siz kullanın :)

Daha önce Flash'taki uzun yazılarımızın yarattığı sıkıntılar için çözüm olabilecek 3 farklı scroll çözümünü paylaşmıştım.

Çok basit bir şekilde dinamik bir texte Component'lardan UIScroll ile ekleme :

http://ercanaltug.blogspot.com/2007/09/flash-iinde-yazlara-scroolbar-ekleme.html

Eğer bu scroll içerisine görseller de eklemek isterseniz komple bir sayfayı scroll etmek için yine Component panelinden ScrollPane kullanmayı gösterdiğim :

http://ercanaltug.blogspot.com/2007/12/adobe-flash-component-scrollpane.html


Dışarıda bir txt dosyasından da yükleyebileceğiniz dinamik bir yazının 2 farklı buton ile akışını sağlama ve bunun geliştirilimi noktasında bir fonksiyon ile kayar gibi gösterme :

http://ercanaltug.blogspot.com/2007/12/scrollbuton-uygulamalar-gelitirilimi.html

Yine 2 farklı buton ile yönetilebilen bu sefer yazının actionscript içerisinden yüklenebileceği bir örnek :

http://ercanaltug.blogspot.com/2007/10/flash-iin-advanced-scroolbar.html


Şimdi ise istediğiniz bir Movie klipi scroll olarak atayabileceğiniz bir örneği paylaşıyorum.Fla dosyasını inceleyerek maskesi ve kodlarını görebilirsiniz.


http://ercanaltug.googlepages.com/scroller_vFinal_v2.fla


Projelerinizde kullanmanız ümidiyle...



Microsoft Expression Web - XML Uygulamaları


Microsoft'un yeni tasarım araçlarının bulunduğu Microsoft Expression Studio paket programının Web Editör programı Expression Web (evet yeni frontpage-frontpage öldü yaşasın yeni kral :) )üzerine yazdığım kitabın "XML Uygulamaları" kısmını tamamladım. Programı kurup çalışma dosyalarını da aşağıdaki linkten indirip uygulayabilirsiniz. Yürüyen kursta da XML,Access,SQL Server veritabanlarıyla iletişim kısmını Expression Web üzerinden kendi notlarım ile anlatacağım.Expression programlarını indirmek için www.microsoft.com/expression adresini ziyaret edebilirsiniz.Programlar hakkındaki giriş bilgisini yandaki Makalelerim kısmındaki Expression Studio makalemi indirip okuyabilirsiniz.




Expression Web ile XML Uygulamaları Notlarım


Expression Web ile XML Notlarımın Uygulama Dosyaları


Faydalı olması dileğiyle...

Flash ile Kayma Animasyonlu Foto-Galeri Tasarımı

Merhaba arkadaşlar ;

Bir projede tasarladığım içerisinde bir sürü afişin olduğu ve bu afişlerin yukarıdaki gibi kayarak ekranda loop ( otomatik başa sarar ) biçimde tekrar etmesini sağladık. Bunu o kadar basit bir mantıkla yaptım ki burada da paylaşmak istedim,siz de projelerinize uygulayın.Fenerbahçemizin Sevilla kahramanlarına itaf ediyorum :)

Öncelikle kayacak fotoğrafları gerekli ve eş ölçülere Photoshop veya Fireworks benzeri görsel işleme programının Batch işlemleriyle ile getirin.Daha sonra Flash çalışmamızda iken yeni bir Movie Klip yaratıp ( CTRL-Enter ) ile içerisine girelim ve dışarıdaki fotolarımızı Library'e File - Import to Library ile çağıralım. Daha sonraki adımda bir tanesini sahneye sürükleyip bırakalım. Sahnenin dışından gelmesini istediğinizde sahne dışına bırakabilirsiniz.Burada fotoyu tutup F8 ile Buton yapalım ve buton özelliklerinden Up aynı kalırken,Over da biraz büyütüp üzerine gelindiğinde etrafında beyaz Glow filtresiyle beyaz bir çeper çıkmasını istiyorum,bu yüzden bu fotoyu Overda F8 ile Movie Klip yapıp filtre verilebilinir hale getiriyorum. Daha sonra bu fotoğrafa alttaki gibi properties sekmesinin yanında Filters kısmına geçip beyaz Glow filtresi ve ayrıca beyaz çeper çiziyorum.


Butonumuzun Down halinde ise Up halini kopyalıyorum tıklanınca küçülerek ilk halini alsın istiyorum ve Hit te ise Down halinin aktif edeceği alanı aynen bırakıyorum. Butonun dışına çıkıp üstüne gelince akışın durmasını ve geri çekince de tekrar akmasını sağlayan alttaki kodu butona sağ tıklayıp üstündeyken actions paneline girip yazalım.

on (rollOver) {
stop();
}
on (rollOut) {
play();
}


Böylelikle istediğimiz efektleri ve kodları yazdığımız bir butonumuzun tasarımı tamamlandı. Burada size göstermek istediğim bunun gibi aynı çoklu efekt ve stilleri eğer birden fazla elemana eklemek isterseniz onları duplicate ile çoğaltıp daha sonra yerine Swap ile görselleri ve movie klipleri,butonları değiştirebiliriz,böylelikle aynı efekti korumuş sadece görseli değiştirmiş oluruz.Hemen 11 adet fotoyu yanyana gelecek şekilde ALT tuşuna basarak alttaki gibi ekliyorum.

Swap image yapacağımız kopya movie klipleri oluşturmak için de öncelikle aynı efekti alttaki gibi çoğaltmalıyız,sağ tıklayıp hem volkan adını verdiğim butonu hemde volkan_mc adını verdiğim overda filtre verebilmek için değiştirdiğim movie klipi sağ tıklayıp duplicate ettim ve adlarını da diğer futbolcuların adını verdim siz butona 2 ve Movie Klipe 2_mc gibi verebilirsiniz.

Şimdi çoğaltılmış ama 2 tane Volkan olan örneğimizdeki yeni duplicate edilmiş movie klip ve butonun içerisindeki görselleri Lugano ile Swap yapmaya geldi sıra.Öncelikle Duplicate ettiğiniz yeni Movie klip içerisine girip içerisinde alttaki gibi görseli seçtikten sonra Swap diyerek Librarydeki bir görselle yer değiştiriyoruz. Aynı işlemi buton içinde yapıyoruz.Ancak overdaki Movie klipi mesela Volkan olanı duplicate edilen Lugano_mc Movie klipi ile swap ediyoruz. Ve en son adımda da akışın olduğu sahnede Volkan butonunu Lugono butonuyla Swap ediyoruz.


Bu işlemlerin aynısı 10 adet fubolcu içinde yapıyoruz ve kodlar da kopyalanmadığından alttaki üstüne gelince durdurma ve çekince devam ettirmeye yarayan kodu da butonlara sağ tıklayarak Actions panellerine yazıyoruz.Siz ayrıca tıklanınca gideceği adresi getURL("..") ile yazabilrsiniz,proje de iframe kullanmıştım html içerisinde yeni bir sayfa açılıyordu.

on (rollOver) {
stop();
}
on (rollOut) {
play();
}

Şimdi ise bu 11 oyuncunun ekranda loop ederek yani tekrarlı şekilde akmaları için senkron sağlamak gerekiyor.Bunun içinde 2.ci bir 11 kişilik kopya grubun akması gerekmekte. Aynı hizaya CTRL-A ile 11 butonu seçip ALT 'a basılı iken yan tarafa bir 11 adet daha oyuncuyu tutan butonu kopyalayın.Daha sonra yine CTRL-A ile hepsini seçip 100.frame'e F6 ile bir keyframe ekleyelim. 100.keyframe'de de Movie klipi sola taşıyalım ve arada bir keyframe'e sağ tıklayıp Create Motion Tween diyelim.

Böylelikle akan Foto Galerimizi tamamladık,tek düzeltilmesi gereken ekrana girdikten sonra devamlı akışın tekrarlaması için gerekli olan senkron sorununu da şu şekilde çözebilirsiniz. Altta gösterdiğim gibi 87.frame'de tekrardan gelen 2.ci 11deki Volkan'ın konumu siyah ekranın sol başında ve alttaki gibi asıl ilk animasyonda 35.frame'de de sanki bir sonraki adımdaki konumunda olduğunu görüyorum amacım 2.ci 11 başladığı an aslında ilk 11in kaymasının ortasına göndermek timeline'ı.

Bunun için alttaki gibi timeline'a sadece actions koduma özel bir layer açıp 87.frame'e gotoAndPlay(35) diyorumki volkan 87den sonraki 35.frame'i gösterdiğinde ziyaretçi bir fark algılamadan devam ediyormuş gibi izlesin,bu taktiği derslerde bir araba yolda ilerlerken arkaplandaki ormanında devamlı gitmesinde daha da güzel benzer ağaçlar bulup tekrar ettiriyoruz.

Takıldığınız veya benim anlatmadaki sorunlarım için örnek çalışmamdan fla dosyasını inceleyebilirsiniz.




Faydalı olması dileğiyle....

Superman SEMIH ! Sevilla'da Saraçoğlu'na gömüldü..

Dün akşam yine bir Semih klasiği ve Fenerbahçe Destanı izledik. Fenerbahçemiz Şampiyonlar Ligi 'nde Çeyrek Finale'e kalma mücadelesinde İspanya'nın Kupa Canavarı Sevilla!yı Kadıköy'de konuk etti. Sevilla maçtan 2 gün önce gelerek Kapalıçarşı,Sultanahmet gezileri ile aslında maça verdiği önemi ortaya koymuştu,turistik bir geziydi sanki bir Güney Kıbrıs,Arabistan takımı,rahatça maça çıkmadan gezdiğimiz kar mantığıyla.

Ama sahaya çıkılınca daha 14.dakikada daha ölmedim dercesine Mateja Kezman eski günlerinden kalma bir kafa vuruşu ile Fenerbahçemizi öne geçirdi,sonra Edu yine(!) kaleleri şaşırdı ancak Luganoyla ümitlendik,ama yine kalemizde çok kolay bir pozisyonla hem beraberlik golü yedik hem de spor hayatı boyunca ciddi hiçbir sakatlık yaşamayan Roberto Carlos sakatlanıp çıkmıştı,moraller sıfırdı. Bu skorla ispanyadaki maça çıkmak ona göre takımı yönlendirmek bir hayli güç olacaktı.

Ancak dakika 83de formasını 7 dakika için bile olsa 90 dakika gibi terleten Semih'imiz oyuna girdi ve daha ikinci buluşmasında sanki büyülü bir dokunuşla topu poziyon bile yokken köşeye bıraktı ve yeni bir Saraçoğlu destanına imza attı.

Semih seni yedek bırakanlar utansın,Kezman'la beraber de oynarsın hatta kaleye bile geçersin sen aslanım benim,dün akşam o kadar para verip sıra bekleyip otobüslerle uçaklarla sanki birbirlerine söz vermişçesine Kadıköyde buluşan o topluluğa (bende ders arasında birsüre Şöhretlerdeydim karıştım grupların içine) bu kadar emeklerine karşılık gibiydi,saol Semih!

Ve rövanşta gol yemeyeceğiz diye birşey yok kimse onun garantisini veremez hele Edunuz varsa,ancak Sevilla'ya 3 gol atabilen takım orada da mutlaka gol veya goller atacaktır,enazından biz öyle umuyoruz yeterki attıkları yediklerinden fazla veya eşit olsun.


Hakem oyna diyince Cumhur'da oynadı :)

Fireworks'te Knife Tool ile Yazı Efektleri

Merhaba arkadaşlar ;

Adobe Fireworks programında vektörel çizimlerinizi istediğiniz şekilde istediğiniz kısımdan bölebilmeniz için bir Knife yani bıçak toolumuz var. Bu tool kullanarak yukarıdaki gibi değişik yarıdan kesilmiş efektli yazılar tasarlayabilirsiniz.

Hemen Fireworks’u açalım ve sonra 400x200px boyutlarında, arkaplanı beyaz olan yeni bir döküman oluşturalım.Şimdide daha düzenli çalışabilmek için sayfanın ortalarına yeni bir hizalama kılavuz çizgisi ekleyelim. Bunu eklemek için View > Rulers seçeneğinin aktif olması gerekir, Rulers (Cetvel) görünümünü aktif etmek için CTRL+ALT+R tuş kombinasyonlarınıda kullanabilirsiniz. Şimdi yatay eksende bir hizalama çizgisi eklemek için sayfanın üst tarafındaki cetveli tutup sayfanın ortalarında bir yere taşıyabiliriz.

Daha sonra yazmak istedeğininiz yazıyı istediğiniz ölçü ve konumda yazabilirsiniz. Biz dökümanımızla orantılı olarak sayfadan taşmayacak ve çok küçük görünmeyecek bir font büyüklüğü olan 74pt, Siyah renkli ve kontürü de siyah olan Algerian karakterli “AVANTAJ” yazdık.


Daha sonra Rehber (guide) yardımı ile yukarıya bir kare(Rounded değil normal) çizin ve rengini beyaz verin. Bu kareyi Knife Tool ile Guide rehberin yardımıyla ortadan ikiye bölelim ve üstte oluşan yeni Path kısmını CTRL-X ile cut yapalım.

Yazının sadece kesilmiş üst kısmına alttaki gibi Edit-Paste Inside diyelim.

Üstteki dikdörgeni seçip dolgu rengini siyaha çeviriyoruz, sonrasında layers panelinden işlem yaptığımız katmanı ilk oluşturduğumuz yazı katmanın altına taşıyoruz. (Kısayol olarak CTRL+SHIFT+UP tuşlarını da kullanabilrsiniz.) Bunu yapmamızdaki amaç yazıya Paste Inside ile kazandırdığımız beyaz görünümün farkedilmesi ve Layer panelinde, şeklin bulunduğu katmanı alta alarak dikdörtgenin yazıyı ezmesini engellemek idi. Siz de alttaki gibi değişik renkler vererek istediğiniz sonucu elde edebilirsiniz.

En son adımda da aynı işlemi alt tarafa da uygulamak kalıyor ve sonuç istediğiniz yazı,istediğiniz yerden Knife Tool ile kesilmiş ve sizin kullanımınıza hazır,ister Dreamweaver'da ister Flash'ta.Yazımızda emeği geçen Turgay öğrencime teşekkür ediyorum.

Faydalı olması dileğiyle....


The Flasher Blog

Merhaba arkadaşlar ;

The Flasher Blog , bu ayki PCNet dergisinde gördüğüm ve gayet beğendiğim bir flash tasarım paylaşım sitesi.Güzel kısmı, AS 1& 2 ve AS 3 olarak ayrılmış olması ve sizin de çalışmalarınızı veya netten bulduğunuz diğer çalışmaları ne kadar amatör veya profesyonel olsada gönderebilmeniz.


Zaman içerisinde genişleyen kütüphanesiyle çok güzel ve popüler bir başvuru kaynağı olacaktır,emeği olanlara teşekkürler.


http://www.flasherblog.com


Photoshop ile Çimen yazısı Tasarımı

Merhaba arkadaşlar ;

Öncelikle yeni bir doküman açalım ve Text Tool’u ile istediğiniz bir yazıyı sahneye yazın. Çimen efektinin daha belirgin görünmesi için “bold” ve büyük puntolu bir yazı seçmenizde fayda var. Biz Impact yazı karakterini ve 200 pt büyüklüğünü kullandık ve renk olarakta toprak gibi görünmesi için koyu kahve bir renk verdik.


Şimdide yazı katmanın üzerinde Brush Tool’u kullabilmek için yazı katmanına sağ tıklayarak Rasterize seçeneğini seçelim. Ya da Layer seçili iken, Rasterize etmenin diğer bir yolu olan Select > Rasterize > Type seçimini yapın. Son bir seçenekte :) hiç Rasterize etmeden sonraki aşamaya geçebilir Brush ile ilk müdahalede karşınıza çıkan uyarıya Ok diyerek otomatik Resterize edilmesini sağlayabilirsiniz.

Ardından Brush Paleti’nden 112 Dune Grass Fırça tipini seçin. Shape Dynamics panelinden Size Jitter: %100 - Control: Off, Minimum Diameter: %1, Angle Jitter: %50 - Control: Off, Roundness Jitter: %0 - Control: Off seçeneklerini seçebilir yada kendi denemelerinizi yapabilirsiniz.

Daha sonra fırça darbelerinin, yazı sınırları dahilinde etkili olabilmesi için Layer önizleme penceresine Ctrl tuşu ile tıklayalım.


Seçtiğimiz fırça özellikleri dahilinde renklendirme önalan ve arkalan renkleri arasında otomatik olarak atanacağından yeşil renginin açık ve koyu tonlarını tercih ettik. Şimdi de fırça darbeleriyle boyamaya başlayalım.


Homojen görünümün önüne geçmek için fırça büyüklüğünü ve renk seçimini aralıklarla değiştirebilirsiniz. Çimlerin font sınırları içinde keskin olarak sonlandırıldığını fark etmişsinizdir bunun önüne geçmek için ise Select > Inverse (Ctrl+Shift+I) seçimi ile düzenleyebileceğiniz alanları yazı sınırlarının alanları dışına taşıyın.

Yazının okunaklığının bozulmaması açısından küçük bir fırça boyutu ile daha gerçekçi görünüm için keskin geçişleri fırça darbeleri ile yumuşatalım. Görünümü yaklaştırarak daha rahat çalışabilsiniz…



Son aşamada Select > Deselect (Ctrl+D) ile tüm seçimleri pasifleştirdikten sonra kontur ve dolgu arasında ki keskin geçişi daha gerçekçi göstermek için yeni fırça darbeleriyle rötüşü tamamlayalım. Ve işte Çimen desenli yazımız emrinize amade :) Bu yazıya tasarımı ile yardımcı olan öğrencim Turgay'a teşekkürlerimi iletirim,ondan daha çok güzel şeyler bekliyorum. Size de iyi tasarımlar....





Adobe CS3 Help Dosyaları Türkçe'de !

Arkadaşlar Türkçe CS3 kitapları yok diye üzülmeyin , denk geldi buldum ama Adobe saolsun çoğunluk help dosyalarını Türkçe dilinde de ücretsiz sunuyor. After Effects veya Soundbooth Türkçe değil ama buna da şükür :) Öğrenmek istediğiniz konuyu search kısmına yazın örnekleriyle gelsin,help demekte bence haksızlık bu dökümanlara. Teşekkürler Adobe...








http://www.adobe.com/support/documentation/tr/?docmenuGo=Git

Actionscript 2.0 ile Buton etkileşimli Movie Klipler

Merhaba arkadaşlar ;


Bugün günün anlam ve önemine bağlı kalarak sizin de mantığını anlayabilmeniz için faydalı olacağına inandığım ufak bir buton tasarımı projesi notumu aktarıyorum.

Adobe Flash içerisinde animasyonlu butonlar yapabilmemiz mümkündür. Buna ihtiyaç ise Flash'ta bir butonun metodlarının sadece Up,Over,Down ve Hit ile sınırlandırılması, özde overa veya down kısmına Movie klipler ekleyebilsekte üzerinden çekildiğinde animasyon yapamamızdır.Mesela rollout,dragout gibi ekstre metodları da actionscriptle erişebilmekteyiz.Böyle etkileşimli bir Movie Klip buton yaratmak için boş bir çalışmada CTRL-F8(İnsert New Symbol) ile yeni bir Movieklip yaratalım.Bu Movie klip içerisinde benim projemde 6 adet layer kullandım,bunları teker teker açıklayayım,siz kendi projelerinizde bu animasyonları istediğiniz gibi geliştirebilirsiniz. Benim senaryomda ilk frame'de butonun normal(up) hali gözükecek, 2.frameden 10.frame'e kadar rollover(üstüne gelinmesi)göstereceğim,devamında da 11den 20.frame'e kadar da rollout animasyonunu göstereceğim.

1-)Actionlar Layerı : Animasonun ilk frame'ine stop koyuyoruzki anasahnede direk oynamasın,üstüne gelince oynasın(bu kısmı kod ile halledeceğiz)

2-) Çeper Layerı : Animasonun oynayacağı buton tasarımının dışarısı,çeper özünde içerisinde de bir renge sahir köşeleri yuvarlanmış bir kare.Ancak çeper adını verdiğimdende anlaşıldığı gibi,içerisi yani dolgusunu seçip F8 ile Movie Klipe çevirip properties panelindeki Color kısmından Alpha'sını %0 yapıyoruz yani görünmesini istemiyoruz.Peki seçip silseydik olmazdı,çünkü bu kısım bir nevi butonun Hit alanı,mutlaka olmalı ama görünür olmayabilir.

3-) Yazı layerı : her frame'de de gözükecek yazımızı buraya getiriyoruz.

4-) Kalp layerı : 2.frame'den itibaren gözükecek şekilde(rollover scriptine 2ye git oyna dieyeceğim, rollover olunca çıksın istiyorum o yüzden) kalpi bir blend mode(multiply) efekti ile yerleştirdim.

5-)Alt çizgi layerı : Butonumun üzerine gelince yazının altında bir çizgi çizilsin istiyorum ve 2.frame de küçük bir şeritten 10.frame'e gelince bir alt çizgi oluşturacak şekilde Shape Tween yapıyorum.

6-) Dolgu-Animasyon Layerı : Üzerine gelindiğinde de arkaplanda bir kırmızı dolgunun butonumu doldurmasını istiyorum,bu animasyonu yine 2.frame'den 10'a yapıyorum.

Benim senaryom böyle siz kendiniz mantığı kapıp değişik butonlardaki efektleri de verebilrsiniz. Asıl şimdi size göstermek istediğim birkaç animasyon kolaylaştırıcı ipucu var.Öncelikle rollover animasyonunuzu tamamladınız,ve bunun birebir aynısını rollout'a da vermek istiyorsunuz. Bunun için teker teker animasyonları yapmanıza gerek kalmadan,istenen animasyona sahip frame'leri kopyalayıp tekrar terse çevirebiliyoruz. Öncelikle altta gösterdiğim gibi dolgu animasyonunu 2den 10a kadar kopyalıyorum.


Daha sonrada kopyalanacak frame'leri alttaki gibi seçiyorum ve sağ tıklayıp kopyaladığım animasyona sahip frame'leri yapıştırıyorum.



Senaryo gereği kopyalanmış frame'lerdeki animasyonu tersine çevirmemiz gerekiyor. Bu kısımda da animasyona sahip frame'leri seçip sağ tıklayıp alttaki gibi Reverse frames diyoruz.


Ve sonuç olarak alttaki gibi bir timeline'a sahip oluyorum.1.frame'de sadece gözükecek şeklinde,2.frame'den 10'a kadar rollover animasyonunun oynayacağı kısımı tasarladım,11den 20.frame'e kadar da rollout yani mouse çekilinceki animasyonu rolloverdan kopyalayıp tersine çevirdim.Yanlız dikkat etmeniz gereken bir nokta çeper layerının dolgu alphası %0 olan ve sadece butonun etrafındaki çeperi tutan şeklin olduğu layerı hemen actions layerından sonraki 2.sıraya ekledim,bu mouse imlecinin düzenli çıkması için önemli.

Animasyonu tamamladık , şimdi bu içinde bulunduğumuz Movie Klipe buton özelliği kazandıracak kodları yazmaya.Anasahneye geri dönüp animasyonu yaptığımız MovieKlip'e sağ tıklayarak Actions kısmına girelim ve alttaki gibi Script Assist'i kapatıp Global Functions-Movie Clip Control kısmından on 'a çift tıklayın , alttaki kod kısmı gelecek.

Burada Movie Klipin üstüne yazdığımız kod ile bu movie klipin mesela üzerine gelindiğinde (rollover) nasıl bir actions alacağını,veya geri çekildiğinde (rollout) nasıl bir actions yine tetiklendiğini gösteren yazabileceğimiz metodlar var.Press movie klip üzerinde tıklayınca,release ise tıklayıp mouse'u bırakınca alınacak actionsları belirten metodlar.

Bizim senaryomuza uygun olan rollover(mouse Movieklipin üstüne gelince) seçip this.gotoAndPlay(2) diyoruz. this olmasının nedeni relative bir erişim ile bu movie klipin içerisindeki bir timeline'ı hedeflemek istememizdir. Aynı şekilde mouse movie klipin üzerinden tıklamadan çekilince yapılacak animsyon içinde yine aynı timeline'da this.gotoAndPlay(11) diyoruz.Son olarak ta press(tıklanırsa) bu sefer ana timeline'da(movieklipin değil) istediğimiz frame'i klasik gotoAndPlay veya Stop ile yazıyoruz.

Ben de bu çalışmamı güzel bir sürprizle tıklandığında gelen yazı ile sözlüm Gayem'e sevgililer günü sürprizi olarak ithaf ediyorum. Siz de çalışmalarınızda kalp kullanmak isterseniz ufak ta bir tüyo vermek isterim,kalp çizmek ya da vektörel kalp aramakla uğraşmadan hemen Webdings fontunu seçin ve büyük Y harfinin burada kalp olduğunu göreceksiniz,kırmızı renkle Flash'ta ve animasyonlarınızda kullanabilirsiniz.


Böylelikle animasyonlu buton tasarımımızı tamamladık.Bu animasyonun aynısına sahip diğer butonları Library'de bu movie klipe sağ tıklayıp Dublicate edip sahneye bırakın.İçerisine çift tıklayarak girip sadece yazı layerında yazısını güncelleyin,hepsi o kadar :)

Çalışmamın fla dosyasını indirmek için ekteki linke tıklayınız.




Faydalı olması dileğiyle...




80'ler Nostalji : La Linea :)



Ne çok izlerdim küçükken,youtube yine saolsun kaybolmuş eski bir oyuncağımı bulmuş gibi hissettim izleyebildiğim kadar episode izledim :) Youtube'ta 80lere 90lara dair neler var neler...

Flash AS 2.0'da Absolute ve Relative Erişim


Blog adresimden gelen epostalarda çoğunluğun bana danıştığı bir konu için yazı yazmam gerekiyordu,ne zamandır aklımdaydı bugüne kısmetmiş. Flash projelerinizde level level tutulan elemanlarınıza birbiri içerisinden erişim için bilmemiz gerekenleri paylaşacağım. Mesela yukarıdaki gibi bir movie klip içerisindeki movie klip içerisindeki butona tıklanınca anasahnedeki başka bir elemanın yerini değiştirmek veya animasyonu durdurmak isteyebilirsiniz,bu ancak Flash mimarisini anlamaktan geçer.Gelin hemen basitçe başlayalım.

Adobe Flash (AS 2.0) projenizde bir elemandan ki bu movie klip olabilir,buton olabilir veya bir graphic bile olabilir,bu elemandan diğer başka bir movie klip içerisine erişmek için mutlaka seviyelerine göre erişmek gerekiyor.Bunun içinde flash üzerinden Actionscriptle erişeceğiniz her unsura bir Instance Name vermeniz gerekir.Ben de yukarıdaki gibi buyukkutu_mc ve daire_btn gibi adlar verdim._mc olmasının nedeni o nesnenin MovieClip olduğunu belirtmek içindir ve eğer actions panelinde buyukkutu_mc yazıp noktaya bastığınızda gelen intellisense tamamıyle bu movieklip olarak tanıtıldığından gelen bir movie klipe ait tüm metodlardır.Aynı şekilde butonlara daire_btn gibi ve yazılara yaz_txt gibi instance name'ler verilir ve actions panelinde onların metodlarına erişilir.

Adobe Flash'ta 2 farklı erişim yöntemi vardır :

1-) Absolute ( Kesin ) erişim
2-) Relative (İlişikli) erişim


Absolute erişim ; kesin hedefler alarak ( mesela anatimeline'ı hedefleyen _root) erişimi sağlar.
Relative erişim ise birbiri içerisinde olan elemanlardan adım adım ilişikli şekilde erişimler tanımlar.
2 yönteminde kendi aralarında artıları ve eksileri bulunmaktadır ama öncelikle gelin öğrenelim sonra da farklı senaryolarda karşılaştıralım.Absolute erişim kesin bir adresleme yolu ile elemanlara erişir demiştik.Alttaki örnek üzerinden anlatacak olursak :
_root kodu ile anasahneye erişilir(bazen _level0 olarakta yazılır) ve _root.buyukkutu_mc kodu ile buyukkutu_mc movie klipine erişilir ve mesela örnek olarak _root.buyukkutu_mc.alpha=0 gibi bir kod ile buyukkutu_mc 'nin alpha yani görünürlük değerini sıfırlayabiliriz.Ve _root ile absolete hedeflendğiniden herhangi bir başka elemana aynı kodu yazarsak yine erişebiliriz.

Bu erişimin az kod ile yazılıp kolay olması gibi avantajları olduğu gibi dezavantajları da olabilir.Mesela absolute hedeflendirerek projenizi geliştirdiğiniz bir çalışmanızı başka bir projeye çağırdığınızda artık _root değişir ve _root.buyukkutu_mc gibi bir erişim mümkün olmayabilir.

Peki tavsiye edilen ve aslında sonuçta aynı erişimi sağlayacak bir diğer yöntem ise relative yani ilişikli erişim sistemidir. Burada bilinmesi gereken alt seviyedeki bir mesela movie klipe buyukkutu_mc ile erişiyoruz,ayrıca bir üst levela _parent ile erişilebiliniyor. Gerektiği yerde alttaki gibi 2 sefer üst levela çıkmak için _parent._parent kullanılabilinir.

Ayrıca relative erişimlerde aynı levellardaki 2 unsur birbirine adıyla erişebildiği gibi _this metoduyla bunu ilişiklendirebilirler.Altta aynı levelda(buyukkutu_mc içerisinde) olan daire_btn butonuna ve kare_mc movieklipinden erişmek için "_this.daire_btn._visible=false" yazabiliriz.Bu hedeflemenin artısı bu çalışma nereye yüklenirse yüklensin _root 'tan bağımsız olacağından aynı şekilde çalışacaktır çünkü ilişikli hedeflenmiştir.


En alttaki paylaştığım Macromedia Paper 'da da tavsiye ettiği üzere projelerinizde relative hedeflendirmeler yapmaya dikkat edin. Ancak elinize absolute hedeflenmiş bir çalışma gelir ve bu içeriği dışarıdan çağırmanız gerekirse tüm kodları teker teker değiştirmemek için _lockroot=true; kodunu ilk farme'e yazın.Bu _root bilgisini kitleyerek ona göre yüklendiğinde hatırlayacak ve kendi _rootunu görecektir,kendi yüklendiği ana timeline rootunu değil.

Ancak bu bir çözüm yöntemidir ASLA tasarım yöntemi değil,eğer AS 2.0 projelerinze yeni başlıyorsanız mutlaka relative ilişiklendirmelerle kodlarınızı yazınız.

Bu yazıdaki örneklere benzer Macromedia Paper notunu indirmek için linke tıklayın.