Merhaba arkadaşlar ;

Internette çok kolaylıkla bulabileceğiniz bir sürü photoshop tutorial sitesi var.Ama çoğunluğu giriş seviyesinde ve açıkçası tasarımları gayet kötü. Ama bu sitedeki seçilmiş ve ileri seviye tutoriallar ve sonuçları gerçekten göz alıcı. Mutlaka bir göz atın.

Merhaba arkadaşlar ;

Bugün flash içerisinde istediğimiz bir animasyonu Movie Klip olarak atayarak fotoğraflarımıza maske olarak eklemeyi göstermeye çalışacağım.

Arkaplandaki mantığı anladığınızda ilk başta çok karışık gibi gelsede eminim 2. ve 3. seferlerde Movie Klipleri daha etkili tasarlayıp muhteşem maskeler çıkaracaksınız. Mantığımız ise çok basit : maskelenecek bir foto (foto layerında) ve maske olacak bir movie klip ve setMask actionscripti ile bu movie klipi o fotonun instance name'i ile maskelemek.

Gelin hemen başlayalım,öncelikle bazı temel adımları atlıyorum uygulamalarımda herzaman için temel bir flash bilgisi(dosya oluşturma,layer açma,kopyalama gibi..) gerekecektir,kusura bakmayın. Alttaki gibi 2 farklı layer açalım ve alta maskeleyeceğimiz fotoğrafı ekleyelim. Daha sonra burada yukaryada örneğini koyduğum çalışmamı yapacağım,orada aslında ufak bir büyüyen daire movie klip olarak tutuluyor ve bu movie klip 8 kere yanyana eklenerek bir başka movie klipin içine bırakılıyor.Ve o 8 tane ufak movie klipi tutan movie klip actionscript ile maske olarak gösteriliyor. Bu yüzden önce bu ufak asnimasyonu ufak_maske adında CTRL-F8 ile yeni bir movie klipte tasarlayalım.

Ufak maske animasyonu maske efektini verecek animasyonumuzdur,burada
farklı şeylerde tasarlayabilirsiniz,özellikle Shape Hint ile eğitimlerde öğrencilerim değişik şeyler çıkarıyorlar. Ben kafa karıltırmasın diye basit bir shape tween ile büyüyen bir daire tasarlıyorum,alttaki gibi ve son frame de bir stop(); ekliyorum. Burada ufak_maske MovieKlipi içerisinde olduğumuzdan emin olalım.

Daha sonra ana sahnemize geri dönelim,yukarıdaki Scene 1 yazısına tıklayarak dönebilirsiniz. Şimdi ise bu ufak_maskeden onlarca tutacak maske olacak Movie Klipi yaratalım.Yine CTRL-F8 ile yeni bir MovieKlip yaratıyorum,ana_maske adını veriyorum ve içerisine libraryden(window-library ile açabilirsiniz) ufak_maske Movie Klipinden 4 sıralı çekiyorum.Ve bunları Window-Align ile kırmızı daire ile gösterdiğim gibi tepeden hizalayıp aralarını da eşitliyorum. Daha sonra 4ünü de shift ile seçip Alt tuşuna basılıyken bir alta sürükleyerek kopyalıyorum. Bu adımı gerektiği kadar çoğaltabilirsiniz.

Ana_Maske movie klipimizden de Scene 1 'e tıklayarak ana sahnemize çıkıyoruz ve Library açıkken Ana_Maske movie klipini sahneye Maske layerına bırakıyoruz. Alttaki gibi daireler tasarım olarak gözükecekler. CTRL-Enter ile flash palyerında önizlerseniz şuan maske özelliği kazanmadan animasyonunuz çalışıyor. Hemen o ana_maske movie klipini sahnede tutalım(arkaplandaki foto ile karışıyorsa foto layerını kitleyin böyleliklesadece movie klipi seçersiniz. Ona bir alttaki gibi instance name atayın.Instance Name'ler o elemanların actionscript kodlarıyla erişebilmemiz için taktığımız adlardır ve asla türkçe karakter,boşluk ve önceden tanımlı class isimleri(button,graphic..) olamaz.Ben daireler adını verdim.

Aynı şekilde fotoğrafımızı da actionscript ile çağıracağımızdan onu da seçip(kilitlediyseniz foto layerındaki kilidi kaldırıp) alttaki gibi foto instance name verelim.

Buraya kadar tasarım kısmını tamamladık. İş geldi yukarıdaki animasyonu alttaki instane name'ler atanmış fotoğrafa maske olarak atamaya. Bunun için sahnede 1.frame'e sağ tıklayıp actions kısmına girip eğer açıksa Script assisti kapatıyoruz çünkü kendi kodumuzu kendimiz yazağız.Öncelikle maske eklenecek fotoğrafın instance name yazıp daha sonra .setMask yazıyoruz ve parantez açıp çift tırnak içinde maske olacak movie klipin instance name'ini yazıyoruz,burada ben daireler verdim.

Yapamayanlar,çalıştıramayanlar buyrun fla dosyası tepe tepe kurcalayın :)

Bugün internette gezerken güzel bir sanat diyebileceğim tasarım taktiğini gördüm. Fotoğrafı mozaiklere ayırıp daha sonra o mozaiklerde istediğiniz ikonları ekleyebiliyorsunuz.Bu akdar basit olduğunu bilmiyordum. Emek kısmı yine yoğun her ikonu elle rengine göre yerleştirmişler ve bunu Adobe Genel Müdür yardımcısı Edward'a yapmış bir tasarımcı ve yaptığı porgramı ve adımlarını flickrda anlatıyor.

http://www.flickr.com/photos/tsevis/sets/72157594429356675/detail


Ayrıca bu tasarım tekniğiyle alttaki linklerde diğer şirketler ve CEO ları içinde ilginç örnekler var.

http://www.cpluv.com/www/item/edvard/11235


Tasarımlarda emek yoğun olunca bir başka kıymetli oluyor....

Merhaba arkadaşlar ;

Websitenin tasarımına başlamadan arayüzüne kafamızda karar vermek enazından kağıda çizmek çok önemlidir. Tasarıma başlamadan kullanacabileceğiniz o kadar çok teknik ve program varki.

Mesela yukarıda sitenizin logosu,sloganı ve görsellerini tutan tanıtıcı bir flash tabanlı bannerınız var. Bu banner içinde de linkleriniz var,anasayfa,galeri,ürünler,iletişim gibi.. Bu linklere tıklandığında tüm bir sayfanın değil sadece alttaki kısımda linkle ilgili içeriğin gelmesini istiyorsunuz. Flash animasyonunuzun giriş animasyonu olduğunu düşünün ve her linke tıklandığında sayfa baştan yüklenirse o animasyonun baştan oynaması hoş olmaz. Bu sorunun birçok çözümü olabilir. Frame ile bir yapı oluşturabilirsiniz,veya master sayfalarında dwt şablon sayfalarından faydalanabilirsiniz ancak master ve dwt dosyaları flashı desteklemez,flash tekrardan yüklenir,frameset ile yaparsanız size frameset çok sayıda htm verecektir güncellemelerde zorluk olacaktır.
Profesyonel anlamda yukardaki flash banner içerisindeki linklere tıklandığında altta bir iframe penceresinde başka bir sayfayı açabiliyoruz ve bu çok ta zor değil. Altta göstermeye çalıştığım gibi bir iframe kodunu sayfamıza kopyalıyoruz.Kodu tarayıp sağ tıklayıp copy ile kopyalayıp editörünüze kopyalayabilirsiniz.



src="iletisim.htm" kısmında bu iframe içinde açılacak html dosyasının adı yer alır.

width=450 height=400 ile bu pencerenin büyüklüğünü belirtiriz.

scrolling="no" ile eğer açılacak sayfa pencereden büyükse bir scrollbar çıkarmamızı sağlar.

frameborder="0" ile iframe penceremizin köşelik kalınlığını belirtebiliriz.

id="main" ile de bu pencerenin link ile çağıralacak target adını belirtiriz.Bu çok önemli.


Mesela bu pencerede iletisim.htm dosyasını açmak istersek id="main"tanımlandığından flashta link verilirken :

şeklinde çağırabilinir.


İlla Flash içinden değil full html tasarımlarınızda da aynı mantıkla bir iframe açıp
ona id verip bu id adını verdiğiniz linklerin targetına yazarak o sayfada sadece
güncelleme yapılmasını sağlayabilirsiniz.

Microsoft özellikle efsanevi Frontpage ile iframe temellerini atıp ve Ajax ile Silverlight projelerinde iframe uygulamalarını çok kullanarak sektörde yaygınlaşmasını sağladı. Dreamweaver 8 versiyonun da
iframe eklecenk menümüz yokken CS3 ile layout kısmından en sağda iframe ekleyebileceğimiz panelimizde eklendi.

Ayrıca çağırdığınız websitesinin arkaplanı ile sizin çağırdığınız background ile uyuşumsuzluk
var ise çağırdığınız iframe penceresini transparanlığa izin verebiliyorsunuz,
böylelikle boş kısımlarda arkaplan olarak çağırılan sayfanın arkaplanı gözüküyor.

Bu özelliği denemek için iframe tanımlamalarınıza :

allowtransparency="true" ekleyin.

Ayrıca çağırdığınız htm dosyasının da head kısmına alttaki transparan background kullanımı
sağlayan CSS kodunu yazın.


< type="text/css">
Body { Background: transparent; }


Sadece Flash içerisinden değil html sayfalarında da iframe kullanabilirsiniz. Yukarıdaki örnekte sol üstteki iframe'e dışardan bu pencere içeriğinden büyük bir sayfa çağırılmış ve scrolling="yes" denerek scrollbar çıkmasına izin verilmiş.

I-frame'ler özellikle Microsoft'un da sıkça kullanmasıyla Adobe'yi de
Dreamweaver CS3 te iframe paneli eklemesini sağladı. Şuanda tüm browserlarda
sorunsuz bir şekilde çalışmaktadır. Gözüken o ki Ajax ve Silverlight
uygulamalarının da vazgeçilmezi iframe artık Dreamweavercılar tarafından da sevilecek.


Faydalı olması dileğiyle ...

Bugün 24 Kasım ; Öğretmenler Günü.

Bizler Başöğretmen Atatürk'ün gösterdiği aydınlık ilim ve medeniyet yolunda ilerlemeye çalışıyoruz . Bu ara herkes Atatürk'ün o dönem ve koşullarında söylediği bazı sözleri günümüz koşulları ile eşleştirmek üzere kullanıyor,açıkçası kendilerini tatmin etmekten ileri gidemiyor.Oysa Atatürk'ü anlamak onun sözlerini tekrar etmekten öte,onu ve devrimlerini anlayarak her koşulda sahip çıkıp,koruyarak ve geliştirerek olabilir.

Bende Atamızın aynı günümüz Atatürkçülerinin yaptığı gibi ; ancak bugün hala anlamını yitirmemiş bir sözüyle tüm eğitmen dostlarımın,ailelemde bolca bulunan emekli öğretmenlerin Öğretmenler gününü kutlamak isterim.

" Arkadaşlar, efendiler ve ey millet, iyi biliniz ki, Türkiye Cumhuriyeti şeyhler, dervişler, müritler, meczuplar memleketi olamaz. En doğru, en hakiki tarikat, medeniyet tarikatıdır."ri
ka
Medeniyet tarikatı üyeleri,bu blogu ve bunun gibi bilgi paylaşımı üzerine irili ufaklı birçok blog ve siteyi takip eden sizlersinizdir. Ortalama gün aşırı blog adresimden dolayı bir teşekkür epostası,yorumu veya telefonu alıyorum,bu sefer sıra bende. Bende zamanınızı bu blogu okuyarak aydınlanma yolunda harcayıp ilerlediğiniz için teşekkür ediyorum. Sizin bu iletileriniz benim bu bloguma her geçen gün daha güzel şeyler eklememi sağlıyor. Teşekkürler....

Merhaba arkadaşlar ;

Bugün hepimizin bildiği ; verdiğimiz linklerin başında , o linkte web adresi çağırmak değil direk eposta attırmak için kullandığımız "mailto:" html kodundan bahsedeceğim. Dreamweaver,Fireworks ve Flash programında link veya hotspot verirken " mailto : ercanaltug@gmail.com " gibi bir kalıpla o linke tıklandığında direk sistemde yüklü olan bir eposta hesabını açtırarak ziyaretçinin istediğimiz email adresine eposta atmasını sağlayabiliyoruz.

Ayrıca ziyaretçi gmail,hotmail.. gibi bir eposta hizmetinde sign-in olduğu anda bir mailing olarak gelmiş bir ileti de "mailto" linkli bir bağlantıya tıkladığında sistemdeki Outlook Express'ten önce o sayfadaki sign-in bulunduğu eposta hizmetinden email göndermeye çalışıcak. Bu mailing projelerinde "mailto" linkinin kullanımını çok gönüllendiren bir unsurdur. Daha da önemlisi Firefox ve tab yapısı nedeniyle tek browserda çoklu sayfada surf yapılmasına imkan verdiğinden bir tabda bir eposta hesabına giriş yapmış durumda bu linke tıklarsa Firefox direk o hesapta epostayı atmaya hazırlayacaktır. Internet Explorer ise mutlaka kardeş programı Outlook Express açmaya çalışıyor.

Peki bu mailto ile açılan eposta üzerinde ne gibi haklarımız var mesela link olarak eposta atılmasını istediğiniz email adresinize gelen emaillerden hangisinin bu linkten geldiğini anlamak için server side bir programlama dili bilmiyorsanız (bir id iletilebilirdi bu koşullarda) bu "mailto" linkiyle açılan eposta iletisinin başlığına da karar verebilirsiniz.Şunun gibi :

mailto:ercanaltug@gmail.com?subject=Bu eposta internet sayfanızdan gelmiştir

Dreamweaver veya Flash'ta linklerinizi Properties panelinde Link kısmından bu şekilde yazarak verip bir denerseniz atılacak epostaya başlıkta eklediğini ve türkçe karakterde eklediğini göreceksiniz. Eğer sadece html kodunu isterseniz < href="mailto:ercanaltug@gmail.com?subject=Bu eposta internet sayfanızdan gelmiştir"> yazmanız gerekecektir.

Bu noktaların ötesinde bir outlook iletisinin alabileceği tüm unsurları aslında bu linke ekleyebilirsiniz. Mesela ;

mailto:ercanaltug@gmail.com?subject=Bu eposta internet sayfanızdan gelmiştir&body=Merhaba

Bu mailto'da atılacak epostanın body yani içeriğine de eklemeler yaptık bu sadece outlook ile açılanlarda geçerlidir,aynı alttaki gibi bir cc veya bcc alıcı ekleyebileceğiniz gibi.

mailto:ercanaltug@gmail.com?subject=merhaba&cc=ercan.yilmaz@netron.com.tr

Kısaca mailto diyip geçmeyin , unutmayın bilgi güçtür ve ayrıntılar sizi bilgili yapar.

Microsoft yeni nesil işletim sistemi Windows Vista 'yı çıkardığında en çok dikkat çeken özellikler çoğunlukla görsel odaklıydı. Camsı şeffaf pencereler , havada 3 boyutlu birbiri içerisine geçişen çalışır durumdaki programlar ( Aero özelliği ) ve özellikle Chess oyunu .

Aslında Microsoft bir devrimin peşindeydi. Bütün bir işletim sisteminin kullandığı grafik arayüzü XML tabanlı yeni bir programlama dili XAML ile geliştirilmiş WPF motorunu kullanmaya başlamıştı. .Net Framework 3.0 ; Framework 2.0'ın tüm çekirdek yapısının üstüne 4 adet yeni uygulama ile geliştirilmişti ancak duyurulduğu ilk anda en çok WPF ile öne çıkmıştı.

WPF daha önce hiç tecrübe edilmemiş vektörel , gerçek zamanlı 3D etkileşimler,HD Videolar ile çok daha görsel masaüstü deneyimleri sunuyordu ve ilk kez bu uygulamaları open source(açık kaynaklı) tutuyordu. XAML kodları ile WPF uygulamaları geliştirebilmek için çok geçmeden de Expression tasarım ürünlerini duyurdu. Expression Design XAML kodlu vektörel grafikler tasarlamamıza imkan veriyor,bu arayüzlere interaktivite ve data bağlamamıza imkan vericek program olarak ta Expression Blend 'i duyurmuştu.

Expression Media ile de bu yeni sektör standartlarına sahip dosyalar üzerinde dosya yönetimi daha kolaylaşıyordu. WPF uygulamalarının internete taşınması noktasında ilk başlarda WPF-e (WPF-everywhere) adı kod adı benimsendi ve WPF uygulamalarını internete taşıma hayali başladı. Bu noktada bir diğer Expression aile üyesi Expression Web ile .Net uyumlu HTML tasarımı ve geliştirilimi yapılabilinir hale gelinmişti.Her ne kadar Microsoft'un efsanevi HTML Editörü Frontpage'in yenisi gibi adlandırılsa da Expression Web ; aslında çok farklı bir vizyonda , çok güçlü bir takımın üyesiydi,Frontpage'in yaptıklarını yeni web standartları XHTML;CSS;XML;Javascript;AJAX .. uyumlu yapabiliyordu.
Daha da önemlisi Expression Web .Net projeleriyle uyumlu olması ve WPF uygulamalarının internette de aynı kullanıcı deneyimlerini alabilmesi için ileride Silverlight adını alacak WPF-e çalışmalarını HTML 'in tutması gerektiğinden Silverlight arayüzlü internet siteleri tasarlamamızı sağlayan Expression tasarım programlarının Internet'e çıkış ayağı ve Visual Studio ile ortak dili olacaktı.

Microsoft Expression Studio tasarım ürünleri paketlerinden belkide en çok ilgi çeken Adobe Flash'a rakip olacağı söylenen Expression Blend programı oldu. Çünkü ilk etapta Windows-Based uygulamalar geliştirilebilen Blend çok geçmeden Blend May Edition ve en son Blend September Preview ile Silverlight adı verilerek bu WPF grafiklerini internete de taşıyabildi.

Ancak burada unutulan artık internette de gerçek bir multimedya zenginliği,veritabanı ne olursa olsun .Net ile tam uyumlu bir arayüz ve daha önemlisi gerçek ve anlık 3D yani 3 boyutlu bir internet arayüz altyapısından bahsediliyordu.

Bugün Expression Blend September Preview ile size basit bir Windows-Based(WPF) ve internet için Silverlight(WPF-e) animasyonu yapmayı anlatacağım.Bu programlarınız yoksa ve bu tanışmak isterseniz www.microsoft.com/expression adresinden 60 günlük deneme sürümlerini indirebilirsiniz. Blend programı için ayrıca sisteminizde .Net Framework 3.0 yüklü olması gerekiyor,deneme sürümlerini indirdikten sonra verilen yerlerdeki linklerden ücretsiz indirebilirsiniz,eğer sisteminiz Vista ise .Net Framework 3.0 beraberinden geldiğinden bir işlem yapmanız gerek yok.


Microsoft Expression Blend programını çalıştırdığınızda karşınıza siyah bir ekran gelecektir. Expression ürünlerinin Web haricinde hepsi siyah arayüzlü. İlk başlarda zorlansanız da zamanla alışıyorsunuz. Ekranın solunda tasarım programı olduğunu gösteren bir toolbarımız var. Hemen yanında da trigger yani Event yani olaylardan tetikleyicileri seçeceğimiz kısım var.Yani butona tıklanınca hangi animasyon ( buradaki adı stroyboard ) oynasın , veya dışarıdan bir içerik yüklendiğinde hangi yazıyı yazsın gibi. O kısmın altında animasyonlarımızı oluştururken kullanacağımız şuanda girişte kapalı olan Timeline ve Objects kısmı var. Animasyon yapacağımız zaman o kısım açılacak. Onun da altında Window başlığı altında tasarım programlarının vazgeçilmezi Layer kısmı var.Tasarıladığımız elementler adları ile burada yer alıyor.Göz ve kilit Adobe ürünlerindekiler gibi çalışıyor burada da. Sağ üst kısımda da Project & Properties ve Resources kısmı var.Buradan Project kısmı ile çalışmalarınızı bir proje altında görebilir ve çift tıklarak ilgili programlar ile açabilirsiniz. Properties kısmı ise aynı Adobe ürünlerindeki sağ kısım gibi çizdiğiniz tasarımların ek özelliklerini buradan değiştirebileceğiz. Resources ise projenizde kullandığınız kaynakları gösteren Flash'taki Movie Explorer benzeri bir kısayol penceresidir.

Blend arayüzü ile yabancılığınızı atmak için gelin hemen alıştırmalara başlayalım ve bir çalışma açalım.File-New takibinden sonra Blend size alt ekrandaki gibi bir WPF Uygulamasımı , WPF Kütüphanesinden bir çalışmayımı yoksa Javascript tabanlı internet için tasarlanacak bir Silverlight(1.0) projesimi açmak istediğinizi soracak. Bu ilk uygulamamız da basit bir buton ve ona tıklanınca animasyon yapacağız ve bu denemeyi hem WPF hem de Silverlight 1.0 için Javascript kodlarıyla birlikte göstereceğim.Böylelikle Expression Blend'in WPF 'teki şuanki yerleşik toollarını ve Silverlight'a adapte sürecini daha iyi algılayacağınızı düşünüyorum.

Sahnemize bir buton eklemek için sağ panelin en altındaki oka basıyoruz ve açılan Asset Library bizim projemize ekleyebileceğimiz en çok kullanılan elemanları getiriyor.Bu listeyi uzatmak için altta göstermeye çalıştığım gibi ekranın sağındaki Show All 'a tıklayalım. Button örneğini tutalım ve sahneye sürükleyelim. Sahnedeki butonumuzu köşelerinden tutarak istenilen boyutlara getirin. Button 'un özelliklerini mesela Button yazısını Tıkla yazısı ile değiştirmek istersek Buton seçiliyken sağ kısımdaki Common Properties kısmından Content kutucuğuna "Tıkla" yazabiliriz . Hemen onun altında Cursor seçimini Hand yaparsak aynı Flash'ta olduğu gibi butonun üzerine geldiğinde mouse bir el imlecine dönecektir.Altta yer alan text kısmından da yazının fontu,rengi ve büyüklüğünü değiştirebilirsiniz.

Şimdi ise bu butonumuza animasyon kazandırmaya başlayacağız. Blend 'de butonların etkileşimleriyle çalıştıracakları animasyonları öncelikle ayrı ayrı Storyboard'larda oluşturuyoruz ve daha sonrasında bu storyboardları trigger yani tetikleyici unsurları belirterek mesela mouse butonun üzerine gelince veya tıklayınca gibi çağırıyoruz. Şimdi butonun üstüne gelince büyüme efektini kazandıracak bir Stroyboard oluşturalım.bunun için Objects and Timeline kısmından alttaki gibi Open,Create or manage Storyboard diyoruz.

Gelen ekranda da + işaretine tıklayarak yeni bir Storyboard oluşturuyoruz ve adını buton_ust verelim.Timeline adlarında Türkçe karakter ve boşluk vermemeye çalışın.

Çalışma sahnemizin hemen yanına bir Timeline açıldı. Bu zaman çizelgesinde sarı çizgi sahneden gösterilen zamanda durur.Bu sarı çizgiyi tutarak 1.sn kadar çekin.1.sn de iken altta gösterdiğim Record Frame ile Flash'taki insert keyframe mantığı gibi bir keyframe ekleyelim ve butonu 1.sn biraz daha büyütelim. Böylelikle yapmak istediğimiz mouse butonun üzerine geldiğinde buton büyüyecek.
Timeline üzerinde timeline adı yazan yerin sağında çarpı işaretine tıklayın ve timeline kapayalım. Şimdi bir Storyboard oluşturduk ancak ne zaman bu storyboardun oynayacağını göstermedik.Yani triggerını. Sahnemizde butonu seçelim ve Trigger panelinden alttaki gibi default gelen Window.Loaded işaretine tıklayalım.Alt kısımda When ile başlayan trigger seçenekleri geldi,Window seçip bir altta bulunan Buttonumuzu seçelim.

Butonu seçtikten sonra bu butonun üzerine gelindiğinde animasyon1 oynasın mantığıyla MouseEnter seçiyoruz. Buradaki Mouse Down mouse tıklayınca,Mouse Leave tıklamadan ayrılmak ayrıca MouseLeftButtonDown gibi sol tuşla butona tıklanınca veya çok ilginç olan MouseRightButtonDown yani sağ tuşla butona tıklayınca gibi seçeneklerimiz varçEvet Flashtaki sağ tık engeli burada yok WPF ve Silverlight'ta sağ tuş ile de etkileşim deneyimlerimizi zenginleştirebileceğiz.

Aynı mantıkla şimdi de mouse butonun üzerinden ayrılınca ilk haline dönsün istiyoruz. Bu işlem içinde önce storyboard oluşturmamız gerekiyor ve daha sonra yine trigger ile mouseLeave vererek bu animasyonu bu mouse işlemi ile ilişiklendirmeye. Hemen timeline yanındaki + işaretine tıklayın ve daha önceki buton_ust animasyonuna tıklayın.Timeline gelecektir.Tekrar + işaretiyle girdiğinide bu sefer alttaki ekran gelecek ve daha önce tanımladığınız storyboardlar burada gözükecektir.MouseEnter'a verdiğimiz büyüme efektinin aynısını yaparak geri ilk haline kavuşsun istiyorum.Bu aynı işlemi kendi elimle yapmak yerine altta gösterdiğim gibi bir stroryboardu Duplicate ederek çoğaltabiliyoruz.

Ancak oluşan buton_ust_Copy1 storyboardu 1e 1 butonust le aynı özellikte yani buton büyüyor,ben bunu aynı yere erişerek bu sefer alttaki gibi Reverse StoryBoard dersek butonun büyüme efekti küçülmeye dönecektir ve mouse geri çekince yani mouseLeave triggerına bunu atadığımızda işlemimiz tamamlanmış olacak.


Aynı daha önceki adımdaki gibi Buton seçiliyken When Button MouseLeave buton_ust_Copy1 play diyelim. Böylelikle mouse Button'umuza giriş(mouseEnter) ve çıkışta (mouseLeave) yapılacak animasyonları storyboardlar ile tasarlamış ve triggerlar ile atamış olduk.Çalışmanızı her zaman Project - Test Solution ile önizleyebilirsiniz,F5 de kısayoludur. Gelelim mouse Buttonumuza çift tıklayınca ( MouseDoubleClick) yapacağı animasyonu tasarlamaya ve triggerlardan seçmeye.

Ve son olarakta butonla mouse etkileşimlerden en önemlisi mouse'a tıklanınca da basit bir top animasyonu yapalım ve eşlemeyi görelim. Öncelikle animasyonu yapalım. Önceki adımlardaki gibi alttaki kısımdan Storyboard kısmını açalım.

Storyboard kısmında daha önce yarattığımız MouseEnter ve MouseLeave için animasyon storyboardlarımız var.+ işaretine tıklayıp animasyon1 adı ile asıl butona çift tıklatıldığında oynayacak animasyonu tasarlayalım. Animasyon1 timeline kısmında 1.keyframe'de bir kırmızı kare çizdim ve Appearance kısmında Opacity'sini %0 düşürdüm. Brushes kısmından Stroke sekmesinin yanındaki küçük noktaya tıklayıp reset diyerek stroke yani çeperini de kaldırdım. Daha sonra 1 sn gelerek keyframe ekledim ve aynı karenin Alpha'sını %100 yaptım. Böylelikle görünmezden bir buton görünür hale gelecek. X çarpıya tıklayarak timeline kapadım.

Aynı şekilde son adım olarak bu yarattığıomız storyboardu MouseDoubleClick triggerına eşlememiz gerekiyor. Hemen butonumuzu sahneden seçip(seçiliyken triggera buton eklenir) sağdaki menuden default gelen Window Loaded yerine Button diyip MouseDoubleClick seçiyoruz. Yandaki + simgesine tıklayarak ta başlayacak storyboardtan animasyon1 seçip - Begin diyoruz.

En son durumda sağdaki Trigger penceresinde 3 adet trigger ve iletili storyboardumuz aşağıdaki gibi olmuş oluyor. Buradan da diğer triggerları vererek , ekleyerek veya kaldırarak deneme-yanılma ile animasyonumuzu geliştirebiliriz.

Projemi indirmek için tıklayınız :

http://www.expression.web.tr/al2y/WPF.rar

Buraya kadarki kısımda Expression Blend ile temel bir WPF animasyonunu 1 adet buton ve animasyonla masaüstü uygulamaları olacak şeklide tasarladık. Bundan sonraki noktada yeni proje açarken Silverlight projesi seçerek aynı basit işlemi 1 adet buton ve animasyonla göstereceğim ancak projemizi Silverlight açtığımızda Assets kısmında Button bulamayacağız,Trigger'lar da elle yazmamızı gerektirecek. Silverlight 1.0 'da kare çizerek Javascript kodları ile butonlarımızı tanımlayacağız ve triggerlarını kod ile vereceğiz.

Altta Flash'taki buton etkileşimlerinin Silverlight 1.0 'daki karşılıklarını göstermeye çalıştım. Bu adlandırmalara alışmamız gerekiyor. Sonraki yazımda aynı projeye bu grafik ile başlayaıp Silverlight uygulaması yaparak linkini paylaşacağım.Sorularınız ve takıldığınız noktalar mutlaka olacaktır eposta atmaktan çekinmeyin.



Faydalı olması dileğiyle ....

Merhaba arkadaşlar ;

Bugün aslında yeni olmasa da önemli bir güncellemeden bahsetmek istiyorum. Dreamweaver 8.0.2 update'i aslında çok önemli bir konuyla geliyor. Netron'da bilgisayarlarda DW 8 yüklü olduğundan Flash dosyalarımızı ( hatta DW kısmında gördüğümüz Flash button,Flash Video eklemelerde) Internet Explorer ile önizlediğimizde Click to Activate gibi bir pencereye tıklayarak Flash çalışmamızı aktif edebiliyoruz. Bu sıkıntı aslında embed ettiğimiz Flash dosyasının Microsoft tarafından patent ile ilgili bir anlaşmazlık sonucu değişmiş olmasıdır. Biz buradaki çözümü flash çalışması swf dosyasını embed ederek değil Javascript ile çağırarak çözmüştük. Ya da DW CS3 ile eklediğinizde zaten Dw bunu bu şekilde yaparak gerekli Javascript kodunu da yanında bir dosyaya (AC_RunActiveContent.js) adında ekliyordu.Bu dosyayı da servera upload ettiğimizde bu javascript dosyası yardımıyla Flash objelerimiz direk aktif edilmiş olarak geliyordu. Bununlua ilgili ayrıntılı hikayeyi ve bir video eğitimi daha önceki yazımda bulabilirsiniz.

http://ercanaltug.blogspot.com/2007/07/flashta-ereve-sorunu-ve-giderilii.html

Sizlerden ricam Dreamweaver dersine Netron'daki bilgisayarlarda başlarken bu ücretsiz Dreamweaver 8.0.2 güncellemesini yapmamız,bu şekilde CS3 gibi 8.0.2 de Flash objelerini Javasriptle sayfamıza ekliyor. Güncellemeyi indirmek için tıklayın.

Dreamweaver 8.0.2 Güncellemesi indirmek için tıklayın

Merhaba arkadaşlar ;
Daha önce Airinteractivie şirketinin Flickr fotoğraflarınıza 3Dtiltviewer adlı bir uygulamasını göstermiştim.Aldığım epostalardan kullanıldığını görmek beni mutlu etti.Gerçekten işe yarar ve görsel uygulamalar. Şimdi de çok daha basit bir tanesini göstereceğim.Aslında Flash ile biz de yapabiliriz ancak Flickr foto albümünüzü göstererek alttaki gibi flash galeriler düzenleminize imkan veren PictoBrowser uygulaması da gayet popüler ve bende ondan bahsedeceğim.Bu ücretsiz uygulamadan faydalanmak için yapmanız gereken Flickr'da yüklediğiniz fotoğraflardan bir albüm yaratmak. Daha sonra alttaki galeriden sağ alttaki info'ya tıklayın,Flickr kullanıcı adınızı girin ve HTML kodunu alın ve sitenize kopyalayın. Hepsi bu kadar :)

Full flash olarak tasarladığınız websitelerinde sizi sıkıntıya sokacak tek konu uzun yazılar olacaktır. Flash ilk çıktığı günden beri multimedya öğeleri ses ve video uygulamaları ile internet sayfalarının tüm görselliğini al üst etti.İnsanların bir internet sitesinden ve dolayısıyla internetten beklentileri değişti.Ancak Flash vektörel çizim ve multimedya öğelerinde ne kadar başarılı ise klasik html sayfalarının tuttuğu uzun yazılarda tasarım kısmında aynı verimi alınamadı. ScroolBar burada sizin için Flash içinden çıkmadan güzel bir çözüm olabilir.

Yukardaki örnekte derste uyguladığımız arayüzümüze Bonzai ağaçları ile ilgili uzun bir yazı eklemek istediğimizde yazı ekrandan taşıyor. Ancak bu yazıyı belirleyeceğimiz bir alanda ScroolBar eklentisiyle okunabilmesini sağlıyabiliriz. Bunun için öncelikle yazacağımız yazı tipini soldaki panelden Text Tool'u seçip ekrana birkere tıklattıktan sonra aşağıda açılan properties özelliklerinden Text tipini Dynamic Text olarak belirtip bir de herhangi bir instance name atıyoruz. Ve altta kırmızı ticklerle vurgulamaya çalıştığım üzere en sağda Show border around text kısmını seçili hale getiriyoruzki beyaz background çıkmasın.Onun 2 yanında Selectable text kısmını da seçersek flash içindeki yazılar aynı HTML'dekiler gibi seçilip kopyalanabilir olacaktır.

Şuanda sadece metininin geleceği Metin kutusunu ayarlıyoruz. Ekrana yazımızın geleceği alanı belirtmek üzere köşelerinden büyütebileceğiniz aşağıdaki gibi bir dörtgen çiziniz.Biraz sonra kopyalacağımız yazımız tam bu dörtgenin içinde yer alacaktır.

Metin kutumuzu belirttikten sonra bu metin kutusunun içine gelecek
uzun yazımızın Scrollable yani Scroll edilebilir olduğunu belirtmemiz
gerekiyor.Yandaki gibi Text-Scrollable diyelim.

Böylelikle uzun yazımızın gelecek olduğu Metin kutusunu boyutları ve Instance Name 'i ile tanımladık.Buraya yazacağımız veya copy-paste edeceğimiz metinler metin kutusu dışında kalacak yazılar artık Metin kutusunu genişletmeyecek. Şimdi benim dışardan kopyaladığım uzun metni metin kutusunun içerisine paste(yapıştır) diyorum.

Yazımızı metin kutusunun içine yerleştirdik şimdi ise metin kutusuna sığmayan ve altta kalan yazılarımızı sağda küçük bir scrollbar ile göstermemiz gerekiyor. Bunun için Window-Components panelinden UIScrollbar bileşeninden faydalanacağız.