Ludicrous Software

Creating Icons for Windows Mobile Flash Lite Apps

Just spent some time packaging up a couple of Flash Lite games and installing them on my Samsung Blackjack (Windows Mobile 5 by default, upgraded to WiMo 6). Surprisingly, the main issue concerned the application icon! I thought I’d share what I’ve learned in the process:

  1. The first and most important lesson: it seems like Windows Mobile caches application icons. This is hugely important to know if you’re going through an iterative process of a) create icon; b) package app; c) install on device to see what icon looks like; d) modify icon based on results; e) lather, rinse, repeat. From what I can tell, if you simply reinstall the next iteration on top of the old one, WiMo will show you the old icon. So you have to uninstall your application (Settings|Phone|More..|Remove Programs), then reboot the device, then install the application.
  2. I think this may be covered in the Distributable Player tutorials on Adobe TV, but in case you haven’t watched them: you need to name your icon files the same as your main swf. So if your swf is MyGreatApp.swf, you need MyGreatApp.ico and MyGreatApp.png in the same directory. If your icon files aren’t named properly, you’ll get a message telling you that there is no icon and so the default icon will be used. Hopefully this message will be more informative in non-beta versions of the Packager - or better yet, will let you name your files whatever you want and will handle renaming things when packaging.
  3. When you package your app, you’ll need to include both a .png and an .ico version of the icon. I think the .png may be a holdover from when Adobe was still going to have the AppZone, because from what I can tell, it’s not used on the device, even though the ‘_setup.xml’ file inside the .cab created by the Builder refers to the .png file. (A .cab file is simply a renamed .zip file, so you can open it with any program that can handle .zip files and browse the contents.) At one point I made the .png and the .ico files look different, and couldn’t see where the .png showed up. Although perhaps I missed this because of icon conflicts (see #1).
  4. If you need to generate .ico files, this plugin should do the trick. The Mac CS3 version works fine for me in Photoshop Extended CS4; haven’t tried the Windows versio. (Which is ironic since Mobile App Packager is Windows-only. I probably burned more calories sliding my chair back and forth between my Mac and my Windows laptop than I did on my morning run. This is not an optimal workflow. I need a faster Windows laptop.) The plugin is free, but they ask for a $5 donation, which is a reasonable price to pay for a handy little tool, if you ask me.
  5. After you’ve installed the plugin, you can open the default icon file bundled with the Packager in Photoshop (it’s in Program Files/Adobe/Adobe Mobile Packager/private), you’ll find that it’s an indexed color, 8 bits/channel file. Replicating these settings in my own .ico file produced the best results. You get transparency, but no alpha channel. So you’ll need to do some pixel-level tweaking after you’ve converted the file.

Other than the icon issues, packaging for WiMo was quite painless. Since I’m not in one of the lucky countries, I manually installed the Distributable Player, so I couldn’t test out the detection/install process for that. One particular annoyance is that WiMo insists on launching the app as soon as it’s installed. This is a bit of a time-waster if you know the app works fine and just want to see how the icon looks!