Cool Silverlight Splash Screen Concept Demo (including Source Code)
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:
Top:
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: http://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!
