Blog

  • 15 Haz 2008

Silverlight İle Sayfa Çevirme (Page Turner) Animasyonu

Merhaba arkadaşlar bu makalemiz de silverlight ile geliştirilmiş hazır uygulamalardan biri olan Kitap Çevirme(Page Turner ) animasyonunu inceleyeceğiz.

Silverlight ile gelistirilmis hazır bir uygulama olan Kitap Çevirme(Page Turner) animasyonu özellikle kitap satıs siteleri için çok kullanıslı ve ilgi çekicidir. Satısı yapılan kitapların sayfalarının belli bir bölümünün kullanıcılara kitap seklinde gösterilmesini saglar.  Kullanıcılar sayfalar arasında geçis yaparken gerçek kitap okuyormus hissi alıyorlar. Bir güzel yanı da kitap sayfalarının üzerine not da alabiliyoruz. Bu kontrole örnek olarak Daron Yöndem'in kitabı olan ASP.NET AJAX kitabı için hazırlanan animasyonu verebiliriz.
http://www.pusula.com/silverlight/aspnetajax/

Kitap çevirme animasyonunu http://journalist.charette.com/europe1992/europe1992.zip  adresinden indirip sizde projelerinizde kullanabilirsiniz. Uygulamayı indirdikten sonra içerisinde yer alanlara bir bakalım. Içersisinde yer alan klasörler asagıdaki gibidir.

Assets: Burada uygulamamızda kullanılan resimler ve kitabımız da yer alan sayfaların resimleri yer alır. Kitapların sayfalarını page00.jpg, page01.jpg, page02.jpg, .. pagen.jpg gibi isimlendirerek resimleri klasör içerisine koymamız yeterli olacaktır.

XAML: Uygulama için kullanılan XAML dosyaları bulunuyor.

Js: Uygulamamız içerisinde yer alan javascript klasörlerini içerir. Burada bizim için önemli olan javascript dosyası CreateSilverlight.js'dır. Burada sayfamızda yer alacak uygulamanın sayfa sayısını ve özelliklerini burada belirtmemizi saglar.

functioncreateSilverlight()
{
    varscene = new PageTurn(8);
    //Burada kitabımızda gösterilecek olan sayfa sayısını belirtiyoruz
    ..
    ..
    ..
}

Simdi indirdigimiz klasörü Visual Studio 2008 ile açıyoruz.  Burada Index.html dosyasını açalım

<head>
    <title>Page Turner</title>
<!-Uygulamamız için gerekli olan javascript dosyalarını ekliyoruz.-->  
 <script type="text/javascript" src="js/silverlight.js"></script>
    <script type="text/javascript" src="js/createsilverlight.js"></script>
    <script type="text/javascript" src="js/inkManager.js"></script>
    <script type="text/javascript" src="js/inkButtons.js"></script>
    <script type="text/javascript" src="js/pagebrowserbutton.js"></script>
    <script type="text/javascript" src="js/pageBrowserControl.js"></script>
    <script type="text/javascript" src="js/pageGenerator.js"></script>
    <script type="text/javascript" src="js/navigationManager.js"></script>
    <script type="text/javascript" src="js/thumbnail.js"></script>
    <script type="text/javascript" src="js/mainpage.js"></script>
</head>
<bodystyle="margin: 0px; overflow: hidden;">
<table height="99%" cellSpacing=0 cellPadding=0 width="100%" border=0>
<tbody>
<tr>
<td align=middle vAlign=middle bgcolor="#000000">
<!-
Olusturdugumuz silverlight uygulamasını sayfamıza ekliyoruz.-->
                        <div id="SilverlightControlHost">
                        <script type="text/javascript">
                            createSilverlight();
                        </script>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>

</body>
</html>

Ben animasyonumda kitap sayfaları kullanmaktansa kendi resimlerimi kullandım ve bu uygulamadan fotograf albümü yapmaya karar verdim :) Siz isterseniz animasyonun kendi amacına göre yada daha farklı örnekler de yapabilirsiniz. Simdi sayfayı çalıstıralım,

Sanki gerçek kitap sayfası çeviriyor hissi veren güzel bir animasyon :) Simdi Annotate ve Clear Annotations yazılarını Türkçeye çevirelim. Javascript dosyalarından mainpage.js dosyasını alalım ve asagıdaki gibi degistirelim.  

var_annotateToggleButton = new InkToggleButton(this.plugIn, "Not Al", Silverlight.createDelegate(this.inkManager, this.inkManager.toggleInkMode), Silverlight.createDelegate(this.inkManager, this.inkManager.toggleInkMode));

var_clearAnnotationButton = new InkButton(this.plugIn, "Notları Sil", Silverlight.createDelegate(this.inkManager, this.inkManager.clearInk));

Iste Sonuç :)
Ilk silverlight makalemin de sonuna geldik. Baska bir makale de görüsmek dilegiyle.

Sem GÖKSU
MCP | MCAD.NET | MCST
www.semgoksu.com  - semgoksu@semgoksu.com

Kaynaklar
http://silverlight.net

Yorum (6)

  • Ali EROĞLU / 18.2.2009 14:23:55

    Güzelmiş :)

  • Çağrı Çelikbilek / 17.3.2009 09:05:47

    hocam indirme linki kırılmış yenileyebilir misin? teşekkürler..

  • Onur ÜNLÜ / 14.4.2009 12:42:21

    Hocam Linki güncelleyebilir misiniz?

  • Turgay TURHAN / 2.7.2010 03:22:19

    Üstad ben dosyaları indirdim tarif ettiğiniz üzere ilgili değişiklikleri de yaptığım halde resimler sayfalara gelmiyor.

  • Akd / 16.12.2014 09:51:59

    Hocam malesef link uçmuş, sizdeki dosyayı benim meilime atabilirmisiniz.akd1961@hotmail.com

  • akd / 17.12.2014 03:55:46

    hocam link ölmüş prg mı siz eklermisiniz.?

Yorum Yaz