IMPORTANT UPDATE 09/18/2006 The official iriver u10 template is now included in Mobile Profile Update #4 that is distributed by Adobe. It is recommended you no longer use the temporary u10 template I had created below as it was never certified by neither Adobe or the vendor … besides, you get a nice .MXP install with the newer one! Thanks!

Back in December 2005 (when a bunch of us Flash Lite folks were at Adobe) there was some talk about customizing the mobile templates for Flash Lite development. I think it was Justin who brought up the topic.

Well, it’s totally possible and relatively easy to do. However, one of the reasons why Adobe doesn’t document it … they don’t like to have all kinds of people mucking around inside a directory with prefabricated templates.

But there’s nothing stopping you from doing this …

I just put one together for the iriver U10, even though I know Adobe is bound to push a U10 CDK soon.

I thought it might be a good exercise and I got sick of using the lackluster default profile I created.

The updates don’t occur as frequently as we would all like (perhaps this should be an interns job?), and the current feature for “check for device updates” in the emulator panel doesn’t actually update real-time (you have to manually click, go to the site, download the .mxp, etc … Adobe please change this if it makes sense to do so?).

In this post, I’m going to explain how to create and install your own mobile template.

I created a template for the u10, even though it will probably appear on Adobe’s site within a few weeks (at which point you should use theirs, not mine).

————————————————-

Download the complete u10 profile I created from scratch:

u10 mobile template

————————————————-

Install notes (I’d create an MXP, but I figure Adobe will be doing that shortly anyways for the real deal):

Copy IRiver_u10.xml to:

C:\Program Files\Macromedia\Flash 8\en\Configuration\Mobile\Devices

Copy the IRiver_u10 directory to:

C:\Program Files\Macromedia\Flash 8\en\Configuration\Mobile\Devices\

Copy IRiver_u10.fla to:

C:\Program Files\Macromedia\Flash 8\en\Configuration\Templates\Global Phones\

Launch Flash 8. Choose the iriver template under global phones. There you go. Now create some content or load the test_u10.fla file.

————————————————-

Steps to create a mobile template (for the u10, yours may differ):

This is just from memory, so please post if I forgot a step or two. You can follow along if you have already extracted and installed the template.

1.) First and foremost, it is important to backup your mobile templates directory before beginning. If I have to explain why, you probably shouldn’t be mucking around with the templates directory.

The mobile templates are located for windows under:

C:\Program Files\Macromedia\Flash 8\en\Configuration\Mobile\Devices

On a Mac it is something similar.

Make a backup for that directory. Good.

2.) Now, enter that directory and copy one of the other templates to start the u10 template. I used Nokia_6680.xml. Rename the copy to Irivier_u10.xml.

3.) Now open it with your favorite XML editor (notepad works fine too). You’ll now want to change some parameters. First, you want to change the device tag to:

<device id=”999″ width=”320″ height=”240″ heap=”5120″></device>

I set the id to 999 (a number not used), adjusted the width and height for the u10 content, as well as the max memory available. The u10 doc says 5 megs, hence I put 5120 (obviously, you’ll probably want to keep memory to minimum).

Update all the locals to this type of format. Basically, slash separates the hiearchy seen in the mobile emulator, so there will be a top level iriver directory, then u10 directory, then iriver u10 template folder.

<locale id=”de”>
<name>iriver/u10/iriver u10</name>
<name>Hersteller/iriver u10</name>
<description />
</locale><

change the content type tag to:

<contenttype id=”standalonePlayer” width=”320″ height=”240″ />

Next, set all the features available for the u10. I came up with this:

<feature contentType=”standalonePlayer” name=”DeviceSoundsOrdered” value=”DeviceSound_MIDI_Generic,DeviceSound_3GP2,DeviceSound_3GP” />
<feature contentType=”standalonePlayer” name=”NativeSounds” value=”NativeSound_ADPCM,NativeSound_MP3,NativeSound_PCM” />
<feature contentType=”standalonePlayer” name=”LoadMovie” value=”OnePerKeyPerFrame” />
<feature contentType=”standalonePlayer” name=”getUrl” value=”OnePerKeyPerFrame” />
<feature contentType=”standalonePlayer” name=”Loop” value=”Yes” />
<feature contentType=”standalonePlayer” name=”MultipleDeviceSound” value=”No” />
<feature contentType=”standalonePlayer” name=”FSCommand” value=”OnePerKeyPerFrame” />
<feature contentType=”standalonePlayer” name=”keySet” value=”Phone” />
<feature contentType=”standalonePlayer” name=”mouseType” value=”None” />
<feature contentType=”standalonePlayer” name=”SMS” value=”No” />
<feature contentType=”standalonePlayer” name=”LoadVars” value=”OnePerKeyPerFrame” />
<feature contentType=”standalonePlayer” name=”DeviceSoundKeyOnly” value=”No” />
<feature contentType=”standalonePlayer” name=”InputText” value=”No” />
<feature contentType=”standalonePlayer” name=”soundEnabled” value=”Yes” />
<feature contentType=”standalonePlayer” name=”NavigationType” value=”4Way” />
<feature contentType=”standalonePlayer” name=”MMS” value=”No” />
<feature contentType=”standalonePlayer” name=”Email” value=”No” />
<feature contentType=”standalonePlayer” name=”SetSoftKeys” value=”Yes” />

Ok, that’s it for that file.

4.) Now make a copy of the Nokia_6680 directory. Rename it to: IRiver_u10.

Enter the directory. You’ll notice a main template that shows the device, as well as an “active” template, and a “mask” template. Another xml file for the specifc device is located in this directory.

All this should probably make sense to you on how they do skinning for the emulator.

Open the xml file and change the skinDescription tag to:

<skindescription width=”320″ height=”240″ skinImage=”iriver_u10.png” maskImage=”iriver_u10_mask.png” activeImage=”iriver_u10_active.png” contentMask=”#FFFF00″ skinMask=”#00FE00″>
</skindescription>

Rename all the template files to iriver_u10.*

Change the device node to:

<device id=”999″ />

or whatever you entered in the previous XML file.

Then update the controls so that the device keys are set properly. Remember that volume +,- are the softkeys on the u10. Then you have left, right, up, down.

Note, that you can set the tooltips, and the mask hex colors match the colors found in the _mask file. Pretty simple.

<control type=”button” action=”soft-left” tooltip=”Left Soft Menu” mask=”#0066FF” />
<control type=”button” action=”soft-right” tooltip=”Right Soft Menu” mask=”#9966FF” />
<control type=”button” action=”left” tooltip=”Left” mask=”#33FF66″ />
<control type=”button” action=”right” tooltip=”Right” mask=”#660000″ />
<control type=”button” action=”up” tooltip=”Up” mask=”#33FF00″ />
<control type=”button” action=”down” tooltip=”Down” mask=”#33FFFF” />

Now comes the fun part … replacing all the graphics, and creating the mask that will be used to drive the controls. I used photoshop to do this.

You can find the .psd inside the IRiver_u10 template directory. Just something quick I whipped up …

So the first graphic file, iriver_u10.png will just be a screenshot of the device. iriver_u10_active.png defines the active key area (in our case the whole device (rocker panel) so just use iriver_10.png). The iriver_u10_mask.png is essentially the hotspot areas that are applied as masks to the other device graphic files.

Careful, all 3 files should have the same dimension and position for all the elements within.

5.) Now, you’ll want to create a mobile template to open in Flash. Just duplicate:

C:\Program Files\Macromedia\Flash 8\en\Configuration\Templates\Global Phones\Flash Lite 1-1 – Symbian Series 60.fla

and rename it to something iriver_u10.fla … then open it and set the dimensions to 320×240, and the frame rate to 15fps – 30 fps.

15 fps is reasonable for the u10. It is pretty zippy device, so even 20-25 fps might be a good value to use (depends).

Lastly, select the u10 template and set it as the default device.

6.) Ok. Now that all that’s done. You need to test your template. Load up flash and access the u10 template you just created. Test some content. I included test_u10.fla as a sample file. Everything should be good to go.

7.) Remember that when Adobe releases the official u10 template, use that one instead.

I haven’t really thoroughly tested mine, and it was merely used as an exercise.

Now, when new devices appear you have an idea of how to create a temporary mobile template.

This entry was posted on Monday, January 9th, 2006 at 1:36 pm and is filed under Flash, Mobile, flashlite, iriver u10. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.