Page Curl

The Silverlight PageCurl Manual

Silverlight PageCurl 1.0 adds a page curl effect to any webpage, shows a customizable image and opens any website in a new browser window when clicked.

Page Curl

 Features

  • Adds a Page Curl effect to any HTML page
  • Shows a Download Silverlight image when Silverlight is not installed
  • Opens a small (150x150px) PageCurl after the page is loaded to attract attention
  • Opens a large (500x500px) PageCurl on mouse hover
  • Shows small Page Curl again on mouse leave
  • Shows a customizable image, created from a Photoshop template
  • Customizable link on image opens any site in a new browser window
  • Default image shows when your image can’t be located
  • isCloseable option shows Close button… or not
  • Saves IsClosed setting to IsoStore

The Silverlight PageCurl starts with a small footprint and plug-in size of 150 pixels. This way the rest of the page is visible and links around that area still clickable. Only when the user moves the mouse cursor inside that area the plug-in size will increase and an image will show in de lower right corner beneath the page curl. The image is clickable and a new window will open, using a customizable link. The image URL will show up in the browser status bar if it is visible. When the mouse cursor leaves the plug-in area the page curl will close with an animation with elastic effect and the size of the plug-in area is reduced. The reflected color of the page curl can be changed to give the curl a light color that fits well with your image.

Create your own image to show when the page curl opens. This image is 500 x 500 pixels in size. The lower right corner of this image should present a teaser shape or text that invites the user to hover the mouse over the corner. A Photoshop Template is available that visualizes the end result in the small and large state in a realistic manner. Save your image as a JPEG or PNG file and add it’s name and path to the Silverlight PageCurl initialization parameters.

cThe Page Curl Photoshop Template 

 The isCloseable option gives you the choice whether you want to allow the user to close the page curl. When a users clicks the close button, the curled corner will disappear forever. The settings is stored so the user is not bothered with a reopened page curl when the page is refreshed or visited again. If you don´t want the user to close the page curl, the close button will not show and a curled corner will always be visible.

Implement your PageCurl

  1. Create your own image
    • The 500 x 500 pixel Photoshop Template included in the package is called SLPageCurlTemplate.psd. Open this in Photoshop CS1 or higher and create your teaser image. Layers Groups in the Photoshop template can be hidden or shown to determine what is visible beneath the small and large page curls.
    • Create your image on or above the “Your image here” layer. Make sure the lower right corner presents something interesting, so user will hover their mouse cursor over that area.
    • Give your image a ‘call to action’ so people will actually click the image.
    • When you’re done, hide all other layers and save it as a JPG or PNG file. Place the image in the ClientBin/images folder.
  2. Update initParams
    • Use the initialization parameters in the Silverlight object tag the customize the Page Curl. The available options in this version are: imageUrl, ImageLink, curlColor and isCloseable. The correct syntax is:

<param name="initParams" value="
        imageUrl = /Images/SLPageCurl.jpg,
        imageLink = http://antonidol.nl/pagecurl,
        curlColor = #FFC4D8F8,
        isCloseable = true
" />

  • imageUrl determines the relative path and name to the image you have created. Images must be inside the ClientBin folder for them to show up: imageUrl=/images/SLPageCurl.jpg,
  • imageLink determines the absolute hyperlink used when opening a new browser window: imageLink=http://antonidol.nl/pagecurl,
  • curlColor: this parameter allows you to change the color of the curl so it fits with the image. Use a light color for the best effect: curlColor=#FFC4D8F8,
  • The isCloseable parameter allows the user to close the Page Curl using a close button. This boolean value determines whether the close button is available or not: isClosable=true.
  1. Test your PageCurl implementation
    • Include the Page Curl XAML in a local website or page and check if your image shows, the link opens the right site. When the page curl is closeable the close button should be visible.
    • Make sure your parameters are correct.
    • Check if your own image is in the /ClientBin/Images folder.
    • Check if the image getSilverllight.png is in the /ClientBin/Images/ folder.
  2. Publish your customized PageCurl
    • Place the SLPageCurlContainer DIV, including the object tag, in the page you want to have the page curl. Add the DIV at any place inside the <body> tag. The Silverlight plug-in is placed using CSS absolute positioning.
    • Add the CSS class #SLPageCurlContainer in your stylesheet.
    • Copy the ClientBin folder with the images subfolder in the root of your website. Leave out all unnecassary files.  Everything should be ready and the page should now present a curl at the bottom right.

Download Silverlight Page Curl 1.0 from my SkyDrive

If you want to learn a bit more about the implementation of this Silverlight application, check out the blog post at the Silverlight & Expressing Insiders site…

Responses

  1. Can you make this control work for WP7 (Windows Phone 7), I would be willing to pay for this.

    • That would be interesting. Just how would you want to use the Page Curl control in WP7?
      You cannot use Silverlight in a browser in WP7, so I would assume it should work over any Page or even inside Panorama or Pivot controls…
      Would you use it to show advertising in Apps? Because it would be hard to connect it to existing advertising platforms.
      Or would you use it to show an image in an interesting way?

      Please, let me know what you want so I can consider what to do…

  2. Bravo !!!!

  3. Hello nice work . Did you have finish the WP7 version

    • There is no WP7 version of this, because the use of it is still unclear…
      You can rebuild it for the phone if you really want :)

  4. Very revealing look forwards to coming back again.
    Regards – K0nst4ntyn0

  5. Is there any update for windows phone version

    • Sorry, no updates or even version for Windows Phone.
      If you decide to create a version for Windows Phone, please let me know so I can reference it from here.
      I wouldn’t mind sharing the original XAML/C# code if you’d like that…


Geef een reactie

Vul je gegevens in of klik op een icoon om in te loggen.

WordPress.com logo

Je reageert onder je WordPress.com account. Log uit / Bijwerken )

Twitter-afbeelding

Je reageert onder je Twitter account. Log uit / Bijwerken )

Facebook foto

Je reageert onder je Facebook account. Log uit / Bijwerken )

Google+ photo

Je reageert onder je Google+ account. Log uit / Bijwerken )

Verbinden met %s

Volg

Ontvang elk nieuw bericht direct in je inbox.

%d bloggers like this: