Download Lumia 925 Emulator Skin

Have you seen this feature demo video of Avirall? (jump to 00:50)

Do you like the emulator? This is Visual Studio Windows Phone Nokia Lumia 925 emulator skin, i created :D.

Nokia925_UP

You can also create your own app demo video with this skin! Download this skin from here.

Instructions about how to apply skin to your emulator are here.

Happy skinning, oops!

Talk About Your App

As an app developer you are supposed to reach out to your prospective users as much as you can to let them know about your app. Social networks – FB, Twitter, Reddit, etc. are some great tools to spread the word. I also think creating a small video about your app and publishing it to YouTube is an effective way to let your users quickly get to know about your app. These are some fantastic posts to talk more about how to promote your apps:
Making A Love Connection? Build Relationships To Promote Your Apps
The Simplest Things People Don’t Do To Market Their Apps (But should)

In this post I will share some points about creating video.

The simplest and very effective way of creating a video is capture the physical phone screen while you are using it. That’s it. You can upload it as it is with your commentary in it. If you want to be fancier, there could be many other pricey options – e.g. hiring an advertising agency. Here I would talk about a no-cost (but a little extra work) option for creating attractive videos showcasing your app. The two videos, listed below, are created with following tools and processes.

In this setup I chose not to go for a video on physical device screen because i wanted to keep focus on the functionality and information about the app, rather than telling about how to use the app. I used emulator instead. It’s easier with emulator and it also gives more control to capture the desired section on the screen.

Prepare Emulator

You could choose to use the default generic emulator image to show your app in. Following is the generic emulator skin which comes with the IDE:

WM7_Skin_Up

Or, to make your video more personalized/interesting, you could use a custom skin. You can customize skins at your heart content, for example, for one video I created this skin:

Nokia925_UP

More about the above skin here.

Once you have taken care of the device skin, have your app installed on the emulator. Don’t forget to prepare example data and load with the app, if your app is data heavy and you want to showcase the same for your users. Set up a nice background on your desktop (it could be your app’s or company’s branding). Background is required because in this case you would have the complete HD movie created along with the background. The least HD movie size is 720P, so apart from the device there would be a lot of background in the video.

Animations and 2D Graphics

Silverlight is an ultimate tool to create fantastic 2D animations. You need to come up with a story as to how you would want to present information to the audience. Think about dynamics of the information, their movements, exit, and entry. Plan 5-10 slides. Create animations and transitions in Silverlight desktop application. If your animations and graphics are showing on the same screen with the video, first capture the video and using VideoBrush add the video in the Silverlight application. Fine tune the timing of the video while test running the app. You can see in the videos below, one of the video is a completely Silverlight video captured on screen and other is a mix of Silverlight and pre-captured video. You can have your titles, credits, and subtitles in the app itself with your custom animations.

Raw Video Footage

I captured screen with Expression Encoder 4 (I hear that the studio has been discontinued, but there are other tools available to download with which you can effectively capture screen). Set the capture size to minimum 1280X720 to play well in HD. Run the app on emulator, or run your desktop Silverlight application and capture the video.

Voice Over

You might want to include commentary in your video. It might be your own voice or you can choose to use text to audio tools. In both the cased you will need a script to read. Prepare the script  by running and re-running the video and match your speed with the video speed. The best free tool to prepare audio is Audacity. You can add commentary, music, effects in a single with multiple tracks. You can adjust the speed of your audio and match it with your video output.

Fuse Video And Audio

Now remains the simple task of bringing Video and Audio together. In this step you would make least changes to video or audio so a simple video editing tool like Movie Maker is enough. Export the video in MP4 format with the source dimension locked.

Examples

Icons In Accent Color

You have about 50 different icons in your app. You want to show them in dynamic color (determined by user/device at runtime) in different sizes at different places. You want them to be lightweight and swift to render. If you go by traditional PNG way, you could somewhat achieve (no scalability) it with about 2000 different files of no less than 5MB. Here is my proven solution to achieve this with a 15KB, yes a single 15KB file.

If you have used my app Avirall Time Suite, you must have noticed that throughout the app, where required, icons adopt accent color. Some elements in the app are also shown in dynamic contrast color of the accent color. I will write another post about how to get contrast color of the accent color. Following are screen shots of the app with different accent colors and different size icons. Notice New, Recent, and Options sections:
Avirall

I had to meet following requirements to achieve accent color icons in the app:

    • There are about 50 different icons in the app to be shown in current theme accent on the device.
    • At different places same icons have different sizes.
    • No JPG because of lack of alpha channel.
    • No PNG because though it had alpha channel, color and size scalability is an issue. 50 icons X 4 sizes X 12 accent color would have gotten to unmanageable 2400 icon files, and still it would support only rigid 12 accent colors.
    • So, no raster images.
    • No paths – managing complex paths would not be easy, plus i was not sure about the performance compared to the solution I was thinking.

So I decided to develop and design my own custom dingbat TTF font. Having fonts for icons has following pros:

  • Very light file containing all 50+ icons. Just 15KB!
  • System renders the fonts as text, so no performance issue.
  • Easy Color and size scalability.
  • Low maintenance.

Following are the cons:

  • No gradient. (Though it’s possible but I have not experimented)
  • Font creation is a pain, initially.

You could also think of using fonts for icons, if you need color/size variations in your app for a large number of icons.

I have released the font I created for Avirall, under OPEN FONT LICENSE. Read this post for details.

Happy coding!

Nokia Lumia 900 White Skin Now Available (others are following)

My apologies for being late in bringing out the skin as promised, because the WP7 application i am working on is keeping me busy all the time. i am rarely finding any time to work on any other stuff. The app is in final test pass phase and bug fixes are going on. Sifting through 14K lines of only cs code is no less than a daunting task. i have fixed 76 HP and MP issues from TP1 and still 23 remaining. Bugs are really bugging me at this point of time – why productivity goes down south while bug fixing. i know TP2 and TP3 are gonna bring out more issues, but i am ready!!! By the way every test pass includes automatic Load Testing for CRUD operations, 300+ manual test cases including – data, UI, navigation, and perf testing.

i am excited to provide WP dev community with the emulator skin of this beautiful and most talked about Nokia Lumia 900 White. You would surely want to showcase your app running inside the emulator decorated with Nokia Lumia 900 skin. Follow these steps to install the skins on your dev box:

  • Download the skin pack, which has following files in a zip format
    • NokiaLumia900_up. png
    • NokiaLumia900_down. png
    • NokiaLumia900_mask
    • WM7_skin.xml
  • Close the WP emulator if running.
  • Navigate to your XDE (emulator) install folder, which is usually in C:\Program Files\Microsoft XDE\1.0.
  • Take a back-up of existing emulator skin files. Following are default skin files:
    • WM7_skin.xml
    • WM7_Skin_Down.png
    • WM7_Skin_Up.png
    • WM7_Skin_Mask.png
  • Copy into XDE folder all the four files from the zip you downloaded  – overwrite WM7_skin.xml.
  • Run WP emulator and voilà, it’s now beautiful Nokia Lumia 900 White. Why don’t you also change the background of your screen to some solid dark/light color and experiment to choose the best matching color to highlight the white frame of your emulator.

Keep checking. Other colors – Magenta, Cyan, Black, and custom colors – are coming soon.

For frequent updates, you can also follow me on twitter or Facebook.

Note: Did you check my Nokia Lumia 610 skins, they are awesome.

Download Nokia Lumia 900 White skin pack.

Enjoy programming!

Skin It – Part 3 (Nokia Lumia 900)

Skin rush is on…Nokia Lumia 900 skins are almost done, a little testing and packaging is remaining. Keep an eye, or follow me here on twitter

Now back to My WP7 app, full speed. After all it’s one of my mega coding efforts after the products at  http://www.tunir.com. Currently the WP7 app is getting bug fixes and almost ready to go into beta phase. For frequent updates, do follow me here on twitter. Goodies, code samples, and skins like stuffs will be on their way as and when I get time from my WP7 app.

Thanks, and enjoy coding!!!

Skin It – Part 2 (4 Skins)

Last post here –Skin It – set the tone to bring out three new colors. Now there are total four colors – Black, Cyan, Magenta and White; all the colors offered on Lumia 610 by Nokia.

Here you go, click on the image to download that skin:

 

[Update: Do pick Nokia Lumia 900 skins from here – Skin It – Part 3 (Nokia Lumia 900)]

I have been programming for last 14 years and still enjoying it. Currently I am working on a WP7 app, a substantially big app, which is going to bring some pro class abilities to WP users. For frequent updates, do follow me here on twitter. And yes there will be more goodies, and of course skins (i have a skin fever, now:-)) very soon.

Please see last post for installation instructions.

Thanks, and enjoy coding!!!

Skin It

WindowsPhone Emulator Skins

Dear fellow devs, Nokia Lumia 610 is the latest entrant into the Windows Phone devices line-up in Asia. It is one of the most affordable smartphones and thus targets a wider range of buyers.  Showcase your app in a Nokia Lumia 610 skinned emulator and your app will look and feel more personalized to the end-user and will appeal to a wider audience. Let’s see –

As a thankyou note to the community, I have created this skin based on the Nokia Lumia 610 images at Nokia.

[UPDATE : 3 new skins added, find here – Skin It – Part 2 (4 Skins)]

[Update: Do pick Nokia Lumia 900 skins from here – Skin It – Part 3 (Nokia Lumia 900)]

Find all the files in a package here. Leave a comment and I will be motivated to share more stuff around here. Follow http://www.twitter.com/WPTopTips for latest update related to Windows Phone development and news.

For installation instructions and a bonus skin, head to awesome Jeff Wilcox’ blog post.

Enjoy skinning 🙂