Share via

Cool Silverlight Splash Screen Concept Demo (including Source Code)

  • Article

In this tutorial: 

  • Creating a cool (and easy) Vista-like "ray of light" effect in Silverlight
  • Creating images for splash screens

The demo below shows a "core" that emits rays of light as a hypothetical download progresses.

Download source code

 

Images used to create this sample:

Bottom:

Bottom image

Top:

Top image

Just right-click, save them and they are yours! Since I created them myself from scratch, you are free to use them in your projects!

One requirement if you use them: please send me an e-mail at nokola@nokola.com. I appreciate it a lot! Please also link to this site somewhere in the app credits or from your site.

Structure of the Sample

The sample displays 2 images. The bottom image is the “rays” view and the top image contains the “core”.

Having the rays be more intense in the center and less intense at the end is nice for 2 reasons:

· The image is visually appealing

· If we animate the Opacity of the rays from 0 to 1 it would look as if the rays “shine out” gradually

I use the second fact to make my life easier. The sample initially displays the rays image with Opacity=0 and the core image on top with Opacity=1.

When the user clicks the Opacity of the rays is animated using this simple XAML animation:

        <Storyboard x:Name="coolStartup" Completed="coolStartup_Completed">

            <DoubleAnimation Storyboard.TargetName="imgAnim" Storyboard.TargetProperty="Opacity"

                             To="1" Duration="00:00:03.00" />

        </Storyboard>

 

Creating the Images

Another challenging part when making this sample is creating the actual images from scratch. Fortunately there are a bunch of good tutorials that you can use.

For example, check this tutorial: https://www.gimptalk.com/tutorial/abstract-art-(-good-for-background-)-33124-1.html. Then on the last step separate the rays image from the core image.

Make sure to convert the black (or white) background to transparency (Colors | Color To Aplha in this case).

I hope you like this sample! I enjoy it a lot!

Comments

  • Anonymous
    August 13, 2008
    PingBack from http://hoursfunnywallpaper.cn/?p=1393

  • Anonymous
    August 13, 2008
    You've been kicked (a good thing) - Trackback from DotNetKicks.com

  • Anonymous
    September 11, 2008
    adding a animated clip to this may increase the effect.                <Canvas.Clip>                    <EllipseGeometry x:Name="Cliplogo" Center="250,180" RadiusX="0" RadiusY="0" />                </Canvas.Clip>                       <DoubleAnimation Storyboard.TargetName="Cliplogo" Storyboard.TargetProperty="(RadiusX)" From="0" To="500" Duration="0:0:4"   />                        <DoubleAnimation Storyboard.TargetName="Cliplogo" Storyboard.TargetProperty="(RadiusY)" From="0" To="500" Duration="0:0:4"   />

  • Anonymous
    September 11, 2008
    thanks, this is a nice idea!