Adobe Flash'ı Web'de Full Screen Yapma

Merhaba arkadaşlar ;

Daha önceki yazılarımla ilgili gelen bir email üzerine güzel bir bilgiyi paylaşmak istedim. Bildiğiniz üzere webde kullanacağımız Flash videolarına istediğimiz şekil ve renkte play,pause,ses .. butonları ekleyebiliyoruz.Bununla ilgili ve HD video ekleyebilmemizi anlatan yazıma alttaki linkten erişebilirsiniz.

http://ercanaltug.blogspot.com/2007/10/adobe-flash-hd-video-custom-skin.html

Bu yazımla ilgili aynı youtube'taki gibi fullscreen yapabilecek bir düğmenin kodları için bir eposta aldım ve kodları sanalkurs'ta Yalçın beyin yazınından buldum burada da paylaşacağım. Video veya flash çalışmanız üzerinde bir buton tasarlayın fullscreen yapacağını bildirecek şekilde ortasında yuvarlak falan olsun :)Eğer videoya tıklanınca fullscreen yapmak isterseniz benim örneğimdeki gibi video kadar bir görünmez buton yapmanız gerekecektir ve butona instance name olarak "tamekranbuton" yazıp sağ tıklayarak actionslarına :
_____________________________________________

on(press) {


tamekran();


}

_____________________________________________


yazarak tıklandığında tamekran fonksiyonunu çalıştıracağını belirtelim.Daha sonra bu butonun bulunduğu frame'e gidelim ve alttaki kodu yazalım :

_____________________________________________


function tamekran(){


if(Stage["displayState"]=="normal"){


Stage["displayState"]="fullScreen";


}else{


Stage["displayState"]="normal";


}


}


var boyutlandir:Object = new Object();


boyutlandir.onResize = function () {


tamekranbuton._x=Stage.width/2;


tamekranbuton._y=Stage.height/2;


}


Stage.addListener(boyutlandir);

_____________________________________________


Böylece butona fullscreen yapacak tamekran fonksiyonunu da tanıtmış olduk. Ancak flash çalışmamızı sonuçta html'e embed edeceğiz ve embed kodlarının da fullscreen'e izin vermesi gerekiyor. Bunun için flash çalışması swf dosyasını gömdüğünüz html'in kodlarında allowFullscreen parametrtesinin değerini (value) "true" olarak değiştirmemiz gerekiyor.

< param name="allowFullScreen" value="true" />

gibi html kodundaki değişiklikleri 2 farklı yerde vardır,embed eden kısımda ve source yani kaynak gösteren dosya adında değişiklikleri yapın. Ayrıca html kodunun yukarısında AC_FL_RunContent javascript kodu ile çağrılmış ise flash çalışmanız,head kısmındaki bu satırlarda onun metodlarından 'allowFullScreen', 'true', satırını da true olarak değiştirmeniz gerekiyor.

Örnek çalışmamı görmek için tıklayın:

http://ercanaltug.googlepages.com/fullscreen_flash.html

Çalışma dosyasını indirmek için :

http://ercanaltug.googlepages.com/videofullscreen.rar

Faydalı olması dileğiyle...

Actionscript 2.0 ile Slice Metinler




Merhaba arkadaşlar ;

Flash tasarımlarınızı güçlendirecek kolay yöntemlerden bir tanesi de slice actionscriptidir. Yazıların tane tane gelmesini tabiiki bir maskeyle de sağlayabilirsiniz ancak bunu dinamik yaparak güncelleme noktasında inanılmaz rahatlık yaşayabilirsiniz. Flash çalışmanıza bir dinamiktext alanı oluşturun ve var:dinamikmetin yazın.Frame'e de alttaki kodu yazın.

___________________________________________

harf = 0;

onEnterFrame = function () {

metin = "Websitemize Hoşgeldiniz";

yaz = metin.slice(0,harf += 1);

dinamikmetin = yaz;


}

___________________________________________


"0" ile metnin başlangıç karakterini


"1" ile metnin yazılma hızını belirleyebilirsiniz.


Ayrıca gelme animasyonunu dinamik metini seçip alttaki align toollarıyla geliştirebilirsiniz.




Faydalı olması dileğiyle...

Maldonado Fener'de,pazara Gerçek Fenerli olacak :)

Sanalkurs E-Dergi ilk sayısı çıktı !


Benim de yazarlarından olduğum sanalkurs ailesi çok güzel bir çalışma sonucu sitede bulunan yazarların yazılarından en talep görenlerden bir e-dergi çıkarmış.Ellerine sağlık çokta güzel olmuş.Benimde Adobe Flash'ta pekte anlatılmayan interaktif CD'ler için kullanılan fscommand actionscripti üzerine yazdığım yazı eklenmiş.Sanalkurs sitesinden aynen alıyorum.

Bu ayki derginin içeriği:
Sanalkurs E-Dergi ilk sayısı ile sizlerle. Bu sayıda yazı ve dersleri yer alan yazarlarımız aşağıdaki gibi gerçekleşti:

- Nereden, Nasıl Başlamalı? Abdullah Tekin
- Bilgisayarımda Casus Yazılım Varsa...Çağlar Umut Tosun
- Fireworks Nedir, Ne Değildir? Siraceddin El
- ASP ile IP'leri Engelleme - Kerim Sarıgül
- MSN Sohbetinizi Birileri Dİnliyor - Serdar Kuzuloğlu
- CSS İle Şeffaf Tasarımlar - Hakan Çamoğlu
- Şimdi İllustrator Zamanı - Ceyhun Akgün
- Gazete İlanları Tasarımı Nasıl Olur? Fatih Nebioğlu
- İnteraktif CD'lerde fsCommand - Ercan Altuğ Yılmaz
- Corel'de Yazı İçine Resim Gömmek - Zeynep Seymen
- Microsoft Nedir, Ne Yapar? Hakan Ayaz Damar
- Yorumlarınız - Zeynep Seymen
- Sanalkurs Haber7'de (Röportaj)- Seçkin Çakır
- Adminim, Mod Olmak İstiyorum - Siraceddin El

Dergiyi ücretsiz indirmek için :

http://www.sanalkurs.net/e-dergi-1.html


Sanalkurs forumda da hemen bu dergi uygulamalarının nasıl yapıldı üzerine bir yer açılmış ve buna benzer bir "pageflip" hazır flash çalışması eklenmiş.Ben bu seferkini başarılı buldum,çünkü benim de daha önce verdiğim bir sürü hazır pageflip çalışması paylaşan siteler var ancak bu uygulamada yeni sayfa açmak ve içerisinde gösterilecek içeriği xml dosyasında gösteriyorsunuz.

XML klasörünün altında Pages.xml dosyasının içeriği bunu sağlıyor.Aşağıda hem jpg hemde swf gösterilmiş 2 sayfanın kodu var,buradan yeni page leride ekleyebiliyorsunuz.Hatta flv video dosyasını da swf embed edip denedim oynatıyor,eh ne de olsa flash :)

src="pages/page2.jpg"
canTear="true"
/>

src="pages/transparent_page1.swf"
/>

İngilizcesi olanlar readme.txt dosyasında tüm metodlar daha ayrıntılı anlatılıyor.Bu çalışmayı forumda paylaşan arkadaşa ve bana ileten Hamza Erbay arkadaşımıza teşekkür ederim. Çalışma dosyasını indirmek için :


MIX University BootCamp Silverlight'la evinizde!


March 5 - 7, 2008
The Venetian
Resort Hotel Casino
Las Vegas, Nevada


Microsoft Teknolojileri 'nin gövde gösterisi haline gelen MIX'ler özünde bir sürü BootCamp eğitimlerde içeriyor.Düşündüğünüz gibi sadece birkaç seminer,sunum ve Steve Balmer'ın atlaması zıplamasından ibaret değil.

Bu seneki MIX 5-7 mart aylarında Las Vegas'ta gerçekleşiyor,Silverlight ve Expression ürünlerinin showbusiness noktasında da damgasını vuracak gibi.Geçen seneki bir BootCamp videolarının WPF,Silverlight ve Expression Blend üzerine olan kısımlarını Silverlight video olarak evinizde izleyebilirsiniz.Sanki orada gibi çok keyifli!

Bizde CETURK'le birlikte verdiğimiz seminer ve Daron hocanın yapacağı Silverlight workshoplarını kameraya çekip aynı şekilde internette Silverlight üzerinden paylaşmayı düşünüyoruz.Tabii gerekli bandwidth altyapısını hazırlayarak.

Katılmak isteyenlere iyi dersler :)


http://visitmix.com/university

Hazır Silverlight Foto-Galerisi


Silverlight ile yapılmaya başlanan Foto ve Video galerilerinin tahmin edebileceğiniz üzere open source , açık kaynaklı olduğundann javascript,xaml ve html dosyalarını kopyalamak ve geliştirmek çok basit.İşte öyle bir galeriyi tüm dosyalarıyla inceleyebilmeniz için paylaşıyorum.Öncelikle Silverlight galerimize bir göz atın.

Silverlight Foto-Galeri Örnek Uygulamasını görmek için tıklayın.

gallery.js adlı Javascript dosyasının içinde klasörde tutulan dosyalara erişme yolları kayıtlı.Buradan yeni diziler atayıp images klasörü altına da görselleri eklerseniz bu galeriyi genişletmek için yeterli olacaktır.Adını da buradan değiştirebiliyorsunuz.

var galleryTitle = "Basit Silverlight Galerim";
var photoArray = new Array(12)
photoArray[0]="images/purpleFlowers640x480.jpg"
photoArray[1]="images/crownPoint640x480.jpg" .....

Çalışma dosyasını indirmek için :


Faydalı olması dileğiyle...

Adobe Flash CS4 - MAX Videoları




Keyframe ve Movieklipsiz matematiksel animasyonlar,Customize Video & 3D,runtime motor ve Puppet Tool! Hepsi CS4'te olacak! Kol oynatma demosu süper!

Fireworks CS3 ile Hazır Slideshow 'lar

Merhaba arkadaşlar ;

Bireysel eğitimlerde Adobe CS3 programları üzerinden gitmeye başladık.Fireworks CS3 ilk programımız. 8'den farklılıkları ilk gözüme çarpan Assets Style zenginliği ve Shapes'lerdeki yeni hazır şekiller(Inspire-ilham demek-inanılmaz eğlenceli,her ekrana bıraktığınızda farklı bir şekil oluşturuyor size ilham almanız için:) ve Pages paneli ile master page'ler tanıtarak yayınlamaya yarıyor. Bir de bu programlara yeni başlayanların en çok başvurdukları hazır uygulamalar. Aynı Photoshop CS3'te olduğu gibi burada da bir klasördeki tüm fotoğraflarınızdan bir foto-albüm yaratmanız sadece birkaç tık ötenizde. Bunun için commands-create slideshow diyelim.

Size açıla yeni ekranın çok beğenilen bir extension olduğunu belirtmeme gerek yok sanırım orjinal Fireworks ekranıyla ne akdar farklı olduğunu görebilirsiniz.Fireworks'e dahil edilmiş 3th party başka bir şirketin geliştirdiği uygulamadır bu Albumbook. 5 adet flash tabanlı 1 adet HTML ancak AJAX teknolojisi ( Adobe tarafında Spry denmekte) kullanılmış toplamda 6 adet stil seçerek foto albümünüzün yaratılacak klasörünü,önizleme fotolarının büyüklüklerini gibi kısımları seçip yayınlayabiliyorsunuz.


Açıkçası gerçekten çok sayıda gösterilmesi gereken fotoğrafınız var ise büyük bir zaman kazancı sağladığı kesin. Ve AJAX ( Spry) tabanlı albüm özellikle çok başarılı,fotoların bilgilerinin tuttuğu bir xml,fotoların kendilerini tuttuğu bir images klasörü ve html yayınlıyor.Direk Dreamweaver ile html sayfasını açıp tasarıma devam edebiliyorsunuz.

CS3'ün beğendiğim ve dikkatimi çeken özelliklerini paylaşmaya devam edeceğim. İyi tasarımlar...

Sayfa açma efektli Flash Reklam Tasarımı



Merhaba arkadaşlar ;

Adobe Flash vektörel etkileşim özellikleri nedeniyle özellikle son zamanlarda reklamlar ve pazarlama üzerine çok sık kullanılmaya başlanıldı.Umarım sonu pop-up gibi olmaz :)

Bir reklamın üzerine gelince açılmalar veya bunun gibi sayfa kıvrılmış alttan reklam göstermeler. Netron.com.tr'de de tasarımcılarımız buna benzer bir uygulamayla anasayfa tasarımını bozmadan meşhur(blogumu da eskisi gibi güncelleyememe neden olan) gencturkcell eğitimlerimizi burada gösteriyorlar.Görmek için ansayfamızı ziyaret edebilirsiniz.


Aslında mantık herhangi bir rollover butondan farklı değil sadece sayfanın frame frame bükülerek animasyona tamamlanmış birkaç gölgelendirmeyle de noktalandırmış. Sizde bu tasarıma arka planınızı yeni birlayerda altta tutarak kullanabilirsiniz. FLA dosyasını indirmek için :

http://ercanaltug.googlepages.com/reklam.rar


Faydalı olması dileğiyle...

Mars'taki Adamın Hikayesi :)

Arkadaşlar blog adresime özellikle ilginç ve eğlenceli bulduğum şeyleri de eklemeye çalışıyorumki hali hazırda bir günlük olduğu belli olsun :) Blogum sayesinde flashı öğrenenler,ilk defa silverlightı duyanların sayısı hiçte az değil. Ancak blogumun amacı da bu değildi ama e-learning blogu oldu,faydalı oluyorsa ne mutlu bana.

Dün akşam NASA'nın yayınladığı bir mars fotoğrafına Çin'den birinin zoomlayarak ayrıntılarında bir kaya (!) parçasının insansı bir görünüm kazanmış olduğunu gösterince bir fırtına koptu.NASA'dan bile tam bir cevap verilememesi üzerine herkeste klasik " Evrende yanlız değilmiyiz ? " sendromu başladı.

Biz ise hala türbanmı başörtüsümü konularında ülke olarak enerjimizi harcamakla meşgul olalım sanırım Tayyip bu fotoğrafı görse "marslıda türban takıyor bakın" yorumunu yapardı :) Bense ilk gördüğümde nedense yukarıdaki mizanseni gördüm ve buraya aktarmak istedim,NASA bu durumdan hoşnutmuş çünkü Amerika planlanan ilk insanlı Mars mekiğini daha erkene çekmek üzerine projelere başlamış. Sanırım marslılar karşılarında ilk dünyalıyı gördüklerinde alacakları cevap İngilizce olacak,dünyanın resmi dili bu oldu.Teknolojiye ne kadar sahipseniz bence aslında o kadar zenginsiniz.Petrolünüzde olsa,kültürünüz de olsa gelir elinizden alırlar.

Neyse bu Mars'lı olayları ile ilgili sizi de kendi iç dünyanızın fantastik düşüncelerine bırakıyorum ve haberin linkini ve daha ilgili linklerini de buradan bulabilirsiniz.


Illustrator CS3 -> Flash CS3 = Vektörel Animasyonlar

Merhaba arkadaşlar ;

Adobe CS3 programlarının en önemli gücü programlar arası entegre iş akışı imkanları. Bugün size bende Adobe'nin vektörel tasarım programı Illustrator'un Flash programı ile entegresi üzerine birkaç örnek göstereceğim. Illustrator tüm tasarım toolları ve vektörel çizimleriyle çok güçlü bir program.Aslında Flash kısmında da biz vektörel çizimler yaparak butonlarımızı yaratabiliyoruz ancak Flash'ta toollar Illustrator'a göre oldukça kısıtlı.

Mesela öncelikle bir Illustrator çalışmamızı flash'a getirmeyi görelim. Illustrator'da tasarladığım bir logoyu ai dosyası olarak saklayıp Flash'ta bir movie klip içerisine file-import to stage diyelim. Aşağıdaki gibi bir ekran gelecektir ve her vektörel nokta için renk,stil ve geleceği konum üzerine ayarlar yapmamızı sağlayacaktır. Burada özellikle vektörel olarak rahatça gözüken ancak Flash'ta aynı verimi alamadığımız vektörel efektleri bitmap olarak getirip bire bir aynı kalmasını vektörelliği bozulsa da görselliği eş bırakabiliyoruz.

Bir vektörel tasarımı hem vektörel hemde piksel getirip yayınlarsak ( bu uygulamayı yaptığım çalışma dosyalarını yazının sonundan indirebilirsiniz.) pikselin boyutları fotoğrafın kendisini tuttuğundan 15-20 kb olabilirken vektörel ise 3 kb olabiliyor.1 tane değil animasyonunuzda enaz 10-15 tane böyle görsel olacağından 150-200 kb optimizasyonlar söz konusu,fotoğraf özlü görseller dışında herşeyi Flash içerisinde vektörel tutmak çok daha mantıklı.

Ayrıca vektörel olarak tekrardan konumlandırma,renklendirme işlemlerimizi de rahatça yapıp aşağıdaki gibi parça parça animasyonlara katabiliyoruz.






Adobe CS3 ile Illustrator layerlarını Flash'a keyframe olarakta getirebiliyoruz. Böylelikle bir butonun üzerine gelince tıklanınca gibi efektlerini ilkel flash toollarıyla değil alttaki gibi Illustrator ile ayrı layerlarda tasarlayıp flasha direk buton olarak atabiliriz.
Adobe Illustrator programının zengin tasarım toollarıyla bu 3 layerlı yıldızı tasarladım ve flash çalışmamda bir buton özellikleri olarak getirmek istiyorum.Flash'ta da CTRL-F8 (insert new symbol) ile bir buton yaratıp içine giriyoruz. Daha sonra insert to stage ile ai dosyasını seçip aşağıda gösterdiğim gibi en alttaki oktan keyframes seçelim. İstersek eğer efektlerimiz uyumlu gelmedilerse ortadaki okun gösterdiği yerden bir bitmap olarak getirebiliriz efektlerimizi.


Butonun Hit sekmesine de aktif edeceğiniz alanı istediğiniz tool ile çizerek butonunuzun tasarımını tamamlayın ve ana sahneye geri dönelim.Library'den butonu sahneye sürükleyip butonumuzu deneyelim. Böylelikle bir butonu Illustrator ile tasarlayıp Flash'a birebir uygunluk ile getirebildiniz. Gerçekten vektörel entegrasyon çok önemli ve Flash'ta tasarımın adı Illustrator olmuştur.Bol bol Illustrator ile ilgili web odaklı uygulamaları blogda bulabileceksiniz. Çalışma dosyalarımı indirmek için :

After Effects Ücretsiz Temel Eğitimi


Adobe Flash eğitimini tamamlayanlara hep söylediğim bir şey var. Flash temellerini çok sağlam attık. Gerekli Actionscript kodlarını öğrendik uyguladık,3D deneyimler için Swift 3D ile uygulamalar yaptık(Flash'ta gerçek zamanlı 3D desteği yok frame-frame biz ekleyebiliyoruz ama) timeline ve animasyonlara hakim olduktan sonra full flash bir websitesini tasarlayabilmeniz için hiçbir engel yok.


Ancak bu sitenin gerçekten tek duyu organı göze aynı zamanda kulağa da hitap etmesi için çok gerçekçi ses geçişleri,daha etkileyici görseller için efektler eklemeliyiz.


Flash tasarımlarınızı güçlendirecek bence 3 unsur daha var :


1-) Actionscript for Designers ( Programcılıktan öte daha görsel odaklı )


2-) Illustrator ( Etkileyici vektörel arayüzleri Flash ile çizemezsiniz )


3-) After Effects for Flash ( Flash'ta yazıları,menüleri,arka planları uçurun )

Bu noktada bu 3 yönetimden özünden farklı kullandığımızı belirtmeliyim.Aslında After Effects aslında bir video editleme programıdır ancak yazılara,arka planlara efektlerini swf,flv çıktı alabiliriz.Aynı şekilde Illustrator bir vektörel tasarım programıdır ve çoğunlukla baskıya yöneliktir,ancak CS3 ile birlikte AI veya EPS,PNG çıktılarını flash arayüzü olarak kullanabiliriz.Aynı şekilde Actionscript aslında programlama dilidir ancak tasarım kaygılı olarak kullanılırsa muazzam efektler yapabilir.


Flash tasarımlarınızı daha zenginleştirmeye birinden başlayın.Bugün size güzel bir site paylaşarak AE ile başlamınıza yardımcı olmak isterim.


Videocopilot.com sitesi hazır After Effects animasyonları satan bir şirket,AE yaygınlaşması için AE giriş derslerini ücretsiz internet sitesinden yayınlıyor. Başlıklara bakarsak hiç te fena sayılmaz bir giriş eğitimi için.

01. Introduction
02. Effects
03. Animation
04. Keying & Transparency
05. Motion Tracking
06. Time Remapping
07. 3D Integration
08. Titles: 1 & 2
09. Expressions
10. Rendering




Türkiye'de de After Effects kullanıcılar için bir forum ve türkçe içerik bulabilirsiniz. Sizlere tavsiyem yeni başlayanlar CS3 ten eski versiyonlarla hiç uğraşmasın. Kolay gelsin...




Flash Yazılarda Filtrelerin Gücü Adına!



Merhaba arkadaşlar ;

Bugün size aslında çok basit ama çok ta etkileyici sonuçlar verebilen Flash'taki yazılarımıza filtrelerle neler yapabileceğimizi göstereceğim. Öncelikle siyah arkaplanda beyaz yazı herzaman daha vurgulayıcı olmuştur,arka plan siyak iken beyaz yazımızı websitemize hoşgeldiniz gibi yazıyoruz.Daha sonra 1.keyframe'deyken bunu F8 ile Movie Klipe çeviriyoruzki(ancak movie klipin metodlarıyla filtre ekleyebilir,alphasıyla oynayabiliriz.) Daha sonra mesela 20.keyframe de F6 ile keyframe ekleyip 1ile 20.keyframe arasında bir frame'e sağ tıklayıp Create Motion Tween diyoruz. Animasyon mavi renk alıp ok çıktıysa şuan tamam.


Gelelim filtrelere,1.keyframedeyken Movie Klipi seçelim alttaki properties panelinden Color kısmından Alpha'sını %0 yapalımki görünmez başlasın,sonrada alttaki fotodaki gibi Filters sekmesine geçerek Blur filtresi verelim.Blur X ve Y boyunca eş verilir o yüzden altta okla gösterdiğim kilidi açarak sadece X koordinatlarınca blur efekti verebilir hale gelelim ve Blur X :100 yapalım.

Daha sonra ben 20.keyframe'den de 30a kadar aynı mantıkla Alpha 100den 0'a görünmez yaptım.Umarım filtrelerin bu gücünü görür hem yazılara hem fotolarınıza bol bol uygularsınız.

Açıkçası bu efektleri ve dahasını After Effects ile yapmak mümkün ve çok yakında onla ilgili çalışmalarımı ve kaynaklarımı da paylaşmaya başlayacağım çünkü CS3 Flash müfredatlarında bol bol After Effects var.Bizde Netron'da CS3 geçerken açıkçası 8 müfredatı verip CS3 programları kullanarak "Türkiyede ilkkez CS3 eğitimi" gibilerinden çıkmak istemedik gerçek Adobe CS3 Web eğitimi içeriği bütün programları kapsıyor denebilir.Photoshop,Illustrator ve After Effects artık Web'te de etkin.Inşallah CS3 eğitimleri vermeye başladığımızda Adobe CS3 müfredatıyla birebir verebileceğiz.

İyi tasarımlar...

Silverlight'ı Microsoft'tan Yükleme

Merhaba arkadaşlar ;

Silverlight yüklü olmayan bilgisayarlarda Plug-in yüklemek için bir uyarı geliyor,aynı Adobe Flash'ta olduğu gibi. Bu mesaj çok kısa süre öncesine kadar ingilizceydi,şimdi her dilde verilebiliyor.Ancak bire bir çeviri yapıldığından yukarıdaki gibi bir mesaj çıkıyor.

" Silverlight'ı Microsoft'tan Yükleme "


" Adobe'den mi yüklim :) "

Umarım bu çeviri hatasını edinin veya yükleyin gibi düzeltirler. Komik :)

Microsoft'un derdi Adobe'yi gerdi :P


Merhaba arkadaşlar ;

Bugün biraz da eğlenceli şekilde size de faydalı olacağına inandığım bir deneyimimi paylaşacağım.Zeynep Kamil hastanesinin her sene düzenlediği bir kongrenin web sitesinin güncellenmesi eski öğrencim ve dostum Önder'e verilmiş. Önder'de eski dosyaları organize etmekte zorlanınca beraber giriştik.

İçerisinde Flash öğeleri de içeren HTML dosyaları Dreamweaver CS3 ile açmaya çalıştığımda yukarıdaki uyarıyla karşılaştım. Dreamweaver < object > taglerini otomatik olarak algılayıp bu taglerin taşıdığı ActiveX objelerinin sadece Internet Explorer'da ancak tıklamayla aktif olacağından(Firefox,Opera ve Safaride bu sorun yok sadece IE)burada çağırılan Flash objesini otomatik olarak Javascriptle çağıracak şekilde değiştirebileceğini bildiriyor.Gerçekten büyük rahatlık. ActiveX objelerinin tıklanma sorununun nedeni Daron hocanın yazısından okuyabilirsiniz :

http://daron.yondem.com/tr/PermaLink.aspx?guid=b359c340-e08c-4466-a49b-4e304438824f

Dreamweaver object ile çağırılan Flash objesini gerekli kodları yaratarak Javascriptle çağırdıktan sonra bu kodları "Scripts" adlı bir klasöre "AC_RunActiveContent.js" adından bir dosya ile ekliyor,bu klasörü de servera upload etmeniz gerekiyor.Zaten Dreamweaver 8.0.2 güncellemesiyle birlikte CS3 versiyonuyla da flash objeleri bu şekilde getiriliyor. Flash'ın yayınladığı HTML de de aynı durum sözkonusu. Dreamweaver 8 kullananlar hemen bu konuyla ilgili yazımı ve adresten ücretsiz güncellemeyi indirsinler.

http://ercanaltug.blogspot.com/2007/09/dreamweaver-template-dwt-ile-ablon.html

Silverlight ile Foto-Galeri ve Video-Galeri Tasarımı

Merhaba arkadaşlar ;

Nam-ı değer Mike Swanson'un (Illustrator to XAML Plug-in yazan eski bir MS çalışanı) blogunda gördüğüm "Silverlight Slide.Show" uygulaması ilk başlarda yine Flash'ın yapabildiğini bizde yapabiliyoruz göstermelerinden diye düşünmüştüm.


Ancak Slide.Show'u geliştiren Vertigo adlı Microsoft Teknolojileri üzerine yazılımlar geliştiren şirket daha önce Family.Show ile adını duyurmuşken daha etkileyici bir işe imza atarak "Silverlight Video.Show" adlı bir uygulama daha yapmış. Foto galeri yerine videoların konumlarını XML'de tutan yapımı oldukça basit bir görsel şölen gibi. (Bu uygulamayı tutacak serverdaki Bandwidthi karıştırmayın şimdi o halolur zamanla)



Slide.Show yapımı gayet basit olarak ta alttaki linkte anlatılıyor sizde hemen ilk Silverlight Foto-Galerinizi tasarlayın.



Expression Design ile Yazıdan Kontürler (Text Strokes)


Microsoft Expression ürün ailesinin vektörel tasarım programı Expression Design diğer tasarım programlarından bazı özellikleriyle ayrılabiliyor. Artık günlük hayatımda da Design ile çalışırken dikkatimi çeken bazı özelliklerini -Adobe ürünlerine göre- burada paylaşmaya çalışacağım.

Expression Design'da şuanda Adobe kısmında olduğu kadar customize şansınız yok,daha çok yeni bir program olduğundan kullanıcı sayısı arttıkça eminim plug-inler brushlar da getirebileceğizdir. Design'da tasarım yaparken bir maddenin yine 2 unsuru var.İç rengi ( fill) ve kontörü(stroke). Stroke olarak çok zengin bir kütüphanesi var,ayrıca sizin yazdığınız herhangi bir yazıyı da stroke olarak ekleyebiliyorsunuz. Karıştırılmasın ama bir yazıyı bir vektörel çizgiye Attach etmekten bahsetmiyorum ( o da zaten Object-Text on Path kısmında var) çizdiğiniz her nesneye otomatik olarak çeper atanmasından bahsediyorum. Gelin bakalım.Öncelikle kontör olacak yazınızı alttaki gibi Design'ın sahnesine çizin.


Daha sonra yazınız seçiliyken sağ taraftaki panelde aşağıda oklarla gösterdiğim yerdeki sırayla önce 1'e No Stroke tıklayın,daha sonra açılan stroke kütüphanesinde gezebilirsiniz,ancak bu yazdığımız yazıyı stroke olarak eklemek için en alttaki 2 ile gösterdiğim çarka tıklayın.Add Stroke çıkacaktır Add diyip ekleyin.

Şimdi yazımızı Design da istediğimiz şekle verilebilecek şekilde kontör olarak ekledik. Şimdi çizeceğimiz şekillere , pathlere stroke olarak atanmasını sağlamak amacıyla alttaki gibi iç rengi(altta pembe ama siz renksiz seçebilirsiniz) yandaki stroke rengini seçin ve okların altındaki yerden de artık yazdığınız yazının adıyla stroke tipi olarak eklenmiş yazı tipini seçin.

Ve artık sahneye soldaki panelden kare çizin oval çizin hatta Brush tool ile düz bir çizgi çizin hep yazınız kontür olarak eklenecek. Dahası altta seçili olan Adobece subselection tool ile çizdiğiniz şekillerin kırılma noktalarından yeniden konumlandırın,kontürde yeni konuma göre yeniden çizilecek.

Acaip kolay,muhteşem güçlü bir olay. Attach to Path yapmak ta geride kaldı artık :) İyi tasarımlar.....




Infragistics şirketinin WPF Uygulamaları



Merhaba arkadaşlar ;


WPF , tasarım dünyasında da çok etkiliyici olacağa benzer. Silverlight kod adı WPF-e(everywhere) olduğunda da demolarda böyle uygulamalar gösteriliyordu.Infragistics şirketinin hazır bir component olarak sattığı bu arayüzler dataları SQL,Access,Oracle gibi veritabanlarından otomatik alıp animasyon kısmını Blend ile yapmış. Gerçekten çok başarılı.Ancak WPF masaüstü uygulamalar içn kullanılıyor,1'e 1 şimdilik Silverlight 'ta (mesela 3D render edemiyoruz runtime yani karşı makinede,hazır alıp designtime yapıyoruz aynı Flashtaki gibi ziyaretçi onu görüyor etkileşemiyor) Ancak varacağı noktayı göstermede MIX videolarında 1'e 1 uyumluluk olacağını o yüzden hala Preview versiyonların yayınlandığını belirtmişti Scott.

Şirketin hazır olarak sunduğu direk dataya bağlayabileceğiniz kontrollorin listesi alttaki gibi.Artık kuru kuru SQL,XML tablolarına son :) Yaşasın Animasyon Yaşasın Vektörellik :)


Bir tablonun online olarak tabloda gösterilmesi. Carousel de olmasa olmazdı :)


Ayrıntılı bilgi ve demoları için sitelerini gezebilirsiniz. Silverlight gelişimini heyecanla bekliyoruz.



CETURK Microsoft 2008 Semineri gerçekleşti

Merhaba arkadaşlar ;

Dün CETURK ailesinin davetlisi olarak Microsoft Türkiye'de Ineta ve Microsoft sponsorluğunda "2008 Microsoft Vizyonu ve Yeni Teknolojiler" seminerini gerçekleştirdik.Açılış konuşmacısı Nuri Çankaya'nın ardından ben 2 saate yakın vardım.Benden sonra WPF ve Silverlight uygulamalarını Türkiye'de Silverlight denince akla gelen ilk isim olan üstad Daron YONDEM'den öğrendik. Daha sonra da MVP Eralp ERAT VS 2008 ve LINQ 'dan uygulamalı olarak bahsetti,açıkçası o da ufaktan eğitime geçmişti proje odaklı örneklerle tadından doyamadı kimse 5buçukta bitmesi gereken seminer 7sularında bitti.

Ben Microsoft Expression ürün ailesinin Web Tasarım programı Expression Web'in yazılım odaklı taraflarından bahsetmeye çalıştım,XHTML,CSS,XML ve Access uygulamalarını gösterdim.Zaman ve internet sıkıntısından Expression Vektörel programı Design ve animasyon programıyla entegresini uygulamasına zamanımız yetmedi,ancak bir sonraki seminerde eminim daha güzel iş akışlarıyla demolarını geniş zamanla gösterebilirim.

Özellikle hem sunumumu evde tekrar izlemek hemde gösteremediğim demo ve sonunu görmek isteyenler için powerpoint sunumumuda paylaşıyorum.


Eminim gelenler çok büyük keyif aldı,benzer seminerlerden öte programların vizyonlarını koymakla kalmayıp uygulamalarını da soru-cevaplı göstermeye çalıştık.

Ayrıntılı yorumları ve etkinlik fotolarını http://www.ceturk.com/haberoku.asp?id=270'dan görebilirsiniz.

Ben ayrıca bu satırları okuyan organizasyonu sağlayan CETURK'ten İbrahim Demir ve tüm etkinliği videoya alarak emek yoğun çaba gösteren Mehmet ACA kardeşlerime de teşekkürü borç bilirim.Videoları yakında Silverlight tabanlı CETURK'te paylaşmayı düşünüyoruz , 7saatlik kısmı olmasa da bölüm bölüm.Paylaşıldığında blogumdan yine duyuracağım , gelemeyenler üzülmesinler.

Bir sonraki CETURK etkinliğinde görüşmek üzere.

Microsoft Expression Web 2 'deki Yenilikler



Expression Studio paketinin ilk programı Expression Web ; artılarından çok eksileriyle konuşuldu.Microsoft Database'leriyle SQL Server,Access,Excel,XML.. Code-Free development imkanı veren toollarıyla aslında Dreamweaver'dan ayrılıyordu.

Şimdi ise MIX'07 den bir video paylaşarak yaz başlarında çıkması beklenen Expression Studio v2 paketinde olacak Expression Web 2'deki yeniliklerin beğendiklerimi yazmak istiyorum.Dahası için 15 dk yukarıdaki videoyu izleyebilirsiniz.

1-) Panelden eklenebilinir (Built-in)

  • Silverlight

  • Windows Media Player

  • Adobe Flash

dosya desteği.(Flash'ı da JS ile çağıracak-tıklama sorunu olmadan)

2-) ASP Ajax Kontrolleri ( Update Panel....)

3-) Javascript Snippet ve Intellisense (Woww!)

4-) CSS 2.1 Güncellemeleri

5-) PHP desteği ( PHP Projesi yaratma & Snippets & Intellisense )

6-) FTP (Secure) Paneli

7-) Office 2007(Word,Excel,Access,Publisher..)dosyalarını getirebilme.


Hemen yaz gelsin istiyorum bu programı seviyorum ne yalan söyliyim :)


"Silverlight 1.0 for Designers" Eğitimi Hazır.

Merhaba arkadaşlar ;

2 gündür Microsoft Türkiye'nin düzenlediği Ingiliz e-learning şirketi Xperties'den Mark Price'ın verdiği " Silverlight 1.0 for Designers " eğitimindeydim. Eğitim Orta Asya'daki seçkin Microsoft ortağı ajans ve şirketlerin çalışanlarına özel ve Türkiye'de Silverlight üzerine Microsoft-Based bir eğitim olmasından dolayı ilkti. Mısır,Ürdün,İsrail,Belçika,Güney Kıbrıs ve Kanada gibi ülkelerden insanlar gelmişti.Sayabildiğim ve tanıdığım kadarı ile 4 veya 5 türkte içerideydi.Luckyeye,Anadolu Finans ve Digiturk firmaları çalışanları vardı.

Eğitim çok keyifli , gayette güzel geçti. Gerçi çoğunluk sıfır olduğundan bizim için çok verimli oldu diyemem ama altta paylaştığım üzere Microsoft'un aynı MCPD,MCSE gibi moduller ve Lablar(evet tasarım labı var 15 dk buton yapıyoruz :) olması beni çok heyecanlandırdı. Bu eğitimlerin MOC ( Microsoft Official Curriculum ) çıkması yakın duruyor. Silverlight 1.0 for Developer bu ay sonunda hazır olacakmış o eğitimi de açıkçası Javascript yoğun olacağından dört gözle bekliyorum.

Eğitim içeriği bu şekilde oluyor. Biz hızlandırmış şekilde 2 günde tamamladık,Labların bazılarını atladık,yazılım gereken 4 modulu yapmadık ama materyal olarak hepsi var,ben uygulayıp bu bloga zaman zaman ekleyeceğim.

Adından da anlaşılacağı üzere daha çok Silverlight'ın tasarım programları ve entegreleri üzerine geliştirilimş bir eğitim.Expression Web içerikte yok ne yazıkki. Eğitim temel olarak Silverlight ve programların tanıtımıyla başlıyor.Daha sonra XAML ve kodlama mantığı var.XAML tasarımları yapan Expression Design ve tooları tasarımcıları pek tatmin etmesede daha çoğunlukla bu kısımda zamanı Illustrator2XAML Plug-in verimliliğini irdeleyerek geçirdik. Daha sonra oluşan XAML tasarımları Expression Blend atarak orada anime ettik.Çoklu buton ve Javascriptlerle metodlar(Begin();,Play();,Pause();) ve triggerları eklemeyi gördük. En son adımda da Encoder ile video dosyaları yönetimi,markerlar,script commands,Overlay ve Template(Flash'taki Skin) editing gördük ve yarattığımız videoları Media Element ile Blend'e çağırmayı izledik. Eğitimin en verimli kısmı bu kısımdı benden yana. Encoder gerçekten sağlam geliyor. Silverlight Video uygulamalarında ; değil Flash flv - Quicktime dahil hiçbir rakip tanıyamayak ve webte video uygulamaları sektör standartı olacak.Bunlardan en önemlisi de e-learning.

Ayrıca hoşuma giden Microsoft dökümanlarda rakip tanımamazlık yapmadan sektörün gerçekleriyle bolbol Adobe ürünlerinden bahsederek iş akışlarını anlatmış. Mesela altta görsel tasarımcı gerektiği yerde Blend'e atılacak tasarımı Photoshop ile yapıp Design ile XAML çıkartıp kullanabilecek veya Illustrator Plug-in ile Design'ı atlayıp direk Blend'de vektörel görseline animasyon ve datagridler bağlayabilecek. Bunu slaytlarda Adobe ürün adlarıya gösteriyorki aynen katılıyorum. Yıllarca insanlar Photoshop,Illustrator(veya Freehand) çalıştılar tüm el alışkanlıkları ve güçlerini biliyorlar yeni bir programla bu dönem çok daha zor olacaktır.

Arayüzü Design ile tasarladıktan sonra Video dosyalarımızı Encoder ile sadece encode değil,boyutuna,süresine,skin template tasarımına,metadatasına(evet bu metadata arama motorlarının videoyu okuyup cashlemesi için) karar veriyorsunuz.

Silverlight projesinin temel noktada komple görebileceğiniz iş akışı ise alttaki gibi olacaktır. Kalpte Blend var. XAML kodlu görsellerin Expression Design ile veya Illustrator'dan Plug-in ile veya Photoshoptan Designa oradan Blende gelecek.Video dosyaları da Encoder ile tasarlanıp Blende ilişiklendirilecek ve en son noktada Visual Studio 2008 ile triggerlar ve data kısımları Javascript ile yazılacak. Actionscriptteki Event Listenerlarla aynı algoritmada yazılıyor.

Şubat ayında 2 tane Kurumsal Silverlight eğitimi gözüküyor Netronda,eminim o eğitimler müddetince bloguma çok daha ayrıntılı ve uygulamalı örnekler koyabilirim.Şimdilik linklerimdeki nibbles ile yetinin. Teşekkürler....





Oh be Hadi be Vay be Yürü be Avea ! :)

Yok böyle gırgır ya :)





Flash'ta Bulut Efekti verme mantığı



Merhaba arkadaşlar ;

Bu ara çok güncelleyemiyorum (enazından hergün) blogumu,farkındayım ama hem gencturkcell eğitimleri,hem Microsoft Silverlight eğitimi ve 2 proje zamanımı hatta gecelerimi baya bir sıkıştırdı. Ancak çok önceden aklımda olan gördüğümde niye düşünemedim dediğim bulut efekti vermeyi ve mantığını göstereceğim.bu sefer tasarımla çok uğraşamadım ama Bulut efekti vereceğiniz kısma bulut olacak Brush ile beyaz görselleri alttaki gibi çizin.

Daha sonra bunları seçip Filtre verebilmek için Movie Klip yapın ve alttaki properties sekmesinden Filters kısmına geçin ve altta verdiğim gibi tasarımda anlık güncellenecek şeklide Blur filtresini verin.Ben daha sonra da o bulutları taşıyan Movie klipleri çoğalttım birde loop ederseniz Motion Tween ile bi tarafta diğer tarafa işiniz bitti.

Gerçekten tüm işimiz bu kadardı,şimdi daha gerçekçi olması için Blur ve loop ayarlarını birdaha gözden geçirin ve dışarıdan bir arkadaşınızdan yorum isteyin çünkü size hep basit gelecektir siz yaptığınızdan.İyi tasarımlar.

Technorati ile Blog içeriğinizi takip edin.


Bir blog adresiniz var ve ne kadar ziyaretçi olduğunu bir scripting veya Google Analytics benzeri bir servisle tutuyorsunuz.Peki sizi kaynak gösterip BlogRoll denilen takip ettiğim bloglara ekleyenleri görebilirmisinz? Technorati ile evet,ayrıca blogunuzun içeriğini kaynak göstererek kullanan etik blog adreslerini görebilir(kaynak göstermeden kullananları google'dan aratıp bulabilir okkalı bir eposta atabilirsiniz,ben öyle yapıyorum:) ve blog adresinizin Authority yani otoritesi,önemliliğini görebilirsiniz. Benimki için :



Tek yapmanız yukarıdaki linkteki blog adresim yerine sizin veya merak ettiğiniz bir adresi yazmak. Bu sayede tanımadığım ama gayet saygın kişilerce de takip edildiğimi öğrendim.Faydalı olması dileğiyle...


CETURK 2008 Microsoft Vizyonu Semineri



Merhaba arkadaşlar ;

Yukarıda da afişi gözüken Microsoft Türkiye'de Ceturk'un düzenlediği " Microsoft 2008 Vizyonu ve Yeni Teknolojiler " seminerinde bende Expression Web ve Expression Design üzerine konuşmacı oldum. Açılış konuşmasında Microsoft Türkiye'den Nuri Çankaya 'nın açılış konuşmasından sonra ben 2 saate yakın bu 2 programı ve yeni teknolojilerinden bahsedeceğim. Benden sonraki arayı takiben Daron Hoca internetin yeni gözbebeği Expression Blend ile WPF ve Silverlight uygulamaları gösterecekki Expression ürün ailesi noktasında benim gösterdiklerimin tamamlayıcısı olacak. Son etapta VS 2008 ve C# üzerine Eralp hoca konuştuktan sonra Ceturk'ten İbrahim Demir hediye dağıtımını yapacak.

Güzel ve çok verimli bir gün olacağı kesin,şanslı 50 kişi arasında olmak için Ceturk üyesi olup kayıdınızı yaptırmanız gerekiyor. Görüşmek üzere...



FLV Flash Video'nuzu Loop edebilme

Merhaba arkadaşlar ;

Yeni bir yılın ilk mesajımda bu blog sayesinde bana gelen hem yardım konulu hemde teşekkür epostalarından birisine verdiğim güzel bir cevaptaki konuyu sizle de paylaşmak istedim.
Websitenizde Flash Video'larınızı belki Final Cut ile oluşturdunuz,Photoshopla süslediniz,güzelce Flash'a getirdiniz.Daha önce gösterdiğim örneklerdeki gibi istediğiniz skin playerı siz seçtiniz,veya renklendirdiniz ancak flash videonuzu tutan FLV Component bu videonuzu bittiğinde başa sarsada tekrar otomatik olarak oynatmıyor.Kullanıcın Play düğmesine basması gerekli.Loop olarak bu flv dosyanızın sürekli oynamasını isterseniz FLV Componentı sahnede seçiliyken Window-Actions kısmına girin,bu componenta alttaki kodu yazın.

on (complete)
{
this.autoRewind=true;
this.play();
}

Ve böylelikle flv videonuz oynayıp bitsede tekrardan başlayacaktır.
Faydalı olması dileğiyle...