Sunday, August 1, 2010

Silverlight On Mobile : Windows Phone 7 Splash Screen and Customization

After talking about 3D capabilities on Windows Phone 7 using Silverlight in last article, Now I am moving ahead with small but equally important part of development. I am going to talk in short about Splash Screen of your application and how you can customize it depending on your business scenario.

Whenever you start with new project of Windows Phone 7, By default you will get on default splash screen as JPEG format titled as “SplashScreenImage”.This is a 10KB file,Default size of this Image is 480x800 and it is always recommended to keep the same even while you customize it.It loads once your application starts.If you have not seen it before, Here how it looks like :DefaultSplashScreen

Now we will see how we can make it more useful and good looking. In Ideal Scenario, This will be either your company logo or some product logo with some picture and text. (Loading.. Image and Progress Bar? Hold on…I am leaving that experiment to you).

Here today I am assuming a Application based on Indian Film Industry (Bollywood), You can take any case studay for your trial. The way we are going to this is important that content.So our job is make default splash screen look more nice like this :

DefaultSplashScreen[6]OutputNehaFinalOutput

So lets start !

Step 1 : Choose Editor to edit SplashScreenImage

This is initial important and easy step. All you have to do is just right click on SplashScreenImage and select “Open With…”, You will get Default dialog box where you will find list of editors, If you find that Editor you looking for is not there then you can add it as well,I added Expression Design 4 like this :

EditSplash

Step 2 : Edit in Microsoft Expression Design 4

Once you open Image in Expression Design 4 then you can edit it like this :

EditInDesigner

Remember one thing, Image has to be in JPEG format which is by default and also size aspect should be maintained 480x800 for ideal results.The advantage of Expression Design 4 is that it allows you to add effects and export image in whatever format you like.

I understand the above Image of Model is stunning ! Winking smile ..So how about make it more jazzy by adding some more effects? Smile

Step 3 : Adding Effects using Expression Design 4

Check the Effects Tab on right hand side and start applying some effects like this :

EffectsNeha

EffectWindows

After applying effects you can see the change in Plain Image and Image with Effects like this :

Before :NehaAfter :OutputNeha

Step 4: Export Image as JPEG and save as “SplashScreenImage”

After adding effects as per your requirement and choice,Next step is to save our work in Expression Designer 4 and hit back to Visual Studio. Export option you can find in Context Menu as well as in File Menu. Make sure while saving Image that Format and Size are as per predefined standards.

Export

Step 5 : Execute and Enjoy your Splash Screen !

OutputNehaWhile doing this POC, My friend saw this stuff I am doing and he asked me how one can add some Text over it and apply effects to that as well instead of just Raw Image or Image effects. Well the solution for this problem is same ! Follow same steps and take help of Expression Design 4, So something similar like this :

TextOnNeha

Again Export this Image so finally it will look like this :

FinalOutput
So, Your Splash Screen is Ready !.. I am seriously looking ahead for some exciting splash screens from you people since I am not expert Designer. So buzz me back with your designs.I will surely post it here with giving you full credits and it will be great collection as well.

Though my splash screen is Jazzy ! I Hope you understand the real life application of it and the business value it carries, Remember ! Splash Screen is your first impression of application. So be careful about it and do it very seriously.

On more serious note. While making splash screen jazzy like this, Make sure it does not becomes a Heavy Image and trouble for your end users and customers.

Note that I am using Microsoft Expression Design 4 because I find it simple, However you can do this using other editors and put some transparent layer of PNG image on this and do layer as well. You need to figure out smart and better way,I just shown the way to do it !

In coming post we will now focus into other areas related to UI and then we will go to controls and navigation then followed by Data and Line of Business applications. So expect lot of stuff here and keep visiting for more !

Vikram.

4 comments:

ccs said...

Visit http://www.mobilereflex.com has broad experience in Business Mobile Application Development. We have a team of experts who has developed Mobile Applications and various other Mobile developments on different mobile platforms.

Saumya Aggarwal said...

Really nice description.

http://saumyablogs.blogspot.com

Regards
Saumya Aggarwal

Saumya Aggarwal said...

Nice desciption of silverlight.

http://saumyablogs.blogspot.com

mahasiswa teladan said...

hi...Im student from Informatics engineering nice article,
thanks for sharing :)