In this tutorial I’ll guide you through the basics of Flash Lite using the 1.1 version; sacrificing features, but ensuring compatibility.

Nokia N70 Black Edition Icon by Ito

Step 1: Brief Overview

Using basic ActionScript 1.0 we’ll create a Unit Converter application that can be run in almost any Flash Lite enabled device.

Step 2: Flash Lite Basics

So what is Flash Lite anyway? As i mentioned before, Flash Lite is an implementation of the Flash runtime for devices. It runs on different mobile platforms such as Symbian, Brew, Windows Mobile, Android and more.

How do I know which devices can I create content for? You can visit the official Adobe supported devices page or you can update the Online Library in Adobe Device Central.

How can I implement Flash Lite? There are several ways to implement Flash Lite content; you can create standalone applications, animated wallpapers, screensavers, or display content in the device browser.

How many versions are of Flash Lite? There are 3 major versions, 1.1, 2.1 and 3.1. You can check the features of the releases in the Adobe version comparison page.

Which tools do I need to start developing for Flash Lite? You just need a version of Flash Professional (8+) which includes device central (CS3+).

Step 3: Setting up

Open Flash and create a new Flash File (Mobile).

Device Central will automatically open and you will have to select a device or a matching size preset. To choose a device just browse the online library and drag it into the device sets panel.

Be sure to select the 1.1 player version in the top of the Device Central window. When you’re done click the create button.

Step 4: Interface

The interface for our app is very simple. As you can see there are two textfields, one to convert from, and one to display the converted amount. Then there is a panel which shows us the names of the units we’re converting and right next to it is a list of units that we can choose to convert.

Finally, in the bottom of the screen, two textfields indicate the options and the exit button.

Step 5: Adding Interactivity

Now that we’ve designed our interface, it’s time to make it dynamic. Let’s start by adding the instance names to the textfields.

In Flash Lite 1.1 instance names are not supported in TextFields, so we set a Variable name in the Properties panel, Options section. Look at the image below to see where TextFields are created and where to enter its Variable name, remember that these are dynamic TextFields.

You’ll notice that the bottom text is dynamic too, this is to be able to embed the characters to display them clearly. It’s worth noting that using embedded fonts will increase the file size of the final document.

Step 6: Options Panel

The options panel will let the user choose which units to convert.

Create your options panel design and convert it to a MovieClip, name it "options" and place it. No need for Variable names in the TextFields.

Step 7: Full Screen

ActionScript time!

The following code will use the Flash Lite specific element “fscommand2″ to make the application go full screen at launch. Open the Actions Panel and write:

fscommand2("FullScreen", true);

Step 8: SoftKeys

A device’s soft keys are multifunctional keys that use the device’s display to identify their purpose at any moment. They only display when the application isn’t in full screen mode, but I’ll show you how to set them anyway.

fscommand2("SetSoftKeys", "Options", "Exit");

These keys are handled by "PageUp" key constant for the left, and "PageDown" constant for the right.

Step 9: Options

This code will hide the Options Panel.

options._visible = false;

As the panel will be activated and deactivated with the same key, we’ll set a variable to check if it’s visible or not.

pressed = false;

Step 10: Default Values

We have to set a default conversion unit to handle when the user presses the conversion key without changing the units in the Options Panel.

from = "in";
to = "cm";

Remember that these are the names of the variables we set to the textfields, which will be checked later in the code when the user presses the conversion key.

Step 11: KeyCatcher

A keyCatcher or keyListener is a Button symbol that listens for key events. This keyCatcher will handle all the key related actions of our application.

Create a button with anything inside and place it out of stage. You can create a text button as I did:

Step 12: SoftKeys Actions

Open the Actions Panel with the keyCatcher button selected to add the code.

By default, the right softKey function is to exit the application, so you can avoid writing the code for it. In any case, this would be the code:

on (keyPress "PageDown")
{
	fscommand2("Quit");
}

And this is the code for the left softKey. It checks for the "pressed" variable and sets the options panel to visible or invisible.

on (keyPress "<PageUp>")
{
	if(!pressed)
	{
		pressed = true;
		options._visible = true;
	}
	else
	{
		pressed = false;
		options._visible = false;
	}
}

Step 13: Moving the Selection

This code will check if the options panel is visible and move the gray bar when the up or down keys are pressed.

on (keyPress "< Up >")
{
	if(pressed && options.select._y != 0)
	{
		options.select._y -= 20;
	}
}

on (keyPress "< Down >")
{
	if(pressed && options.select._y != 80)
	{
		options.select._y += 20;
	}
}

Step 14: Choosing a Menu Item

The following lines will check for the position of the gray bar and the Enter key (the center button of the navigation keys), set the corresponding values to the variables and hide the menu when done.

on (keyPress "<Enter>")
{
	if(pressed && options.select._y == 0)
	{
		fromGraphic = "in";
		toGraphic = "cm";

		pressed = false;
		options._visible = false;
	}

	if(pressed && options.select._y == 20)
	{
		fromGraphic = "m2";
		toGraphic = "cm2";

		pressed = false;
		options._visible = false;
	}

	if(pressed && options.select._y == 40)
	{
		fromGraphic = "gal";
		toGraphic = "l";

		pressed = false;
		options._visible = false;
	}

	if(pressed && options.select._y == 60)
	{
		fromGraphic = "kW";
		toGraphic = "W";

		pressed = false;
		options._visible = false;
	}

	if(pressed && options.select._y == 80)
	{
		fromGraphic = "kg";
		toGraphic = "lb";

		pressed = false;
		options._visible = false;
	}

Step 15: Conversion

This code goes inside the last "on" event, it checks the actual value of the conversion variable and performs the neccessary operation. Remember that as the variables changes their value, so are the TextFields.

if(!pressed)
	{
		switch(fromGraphic)
		{
			case "in":
				from = "in";
				to = "cm";

				toNumber = fromNumber * 2.54;
				break;
			case "m2":
				from = "m2";
				to = "cm2";

				toNumber = fromNumber * 10000;
				break;
			case "gal":
				from = "gal";
				to = "l";

				toNumber = fromNumber * 3.78;
				break;
			case "kW":
				from = "kW";
				to = "W";

				toNumber = fromNumber * 1000;
				break;
			case "kg":
				from = "kg";
				to = "lb";

				toNumber = fromNumber * 2.20;
				break;
		}
	}
}

Step 16: Keys

In order to write in the "fromNumber" textfield we add an "on" event to handle the number keys.

on (keyPress "1")
{
	fromNumber = fromNumber add "1";
}

on (keyPress "2")
{
	fromNumber = fromNumber add "2";
}

on (keyPress "3")
{
	fromNumber = fromNumber add "3";
}

on (keyPress "4")
{
	fromNumber = fromNumber add "4";
}

on (keyPress "5")
{
	fromNumber = fromNumber add "5";
}

on (keyPress "6")
{
	fromNumber = fromNumber add "6";
}

on (keyPress "7")
{
	fromNumber = fromNumber add "7";
}

on (keyPress "8")
{
	fromNumber = fromNumber add "8";
}

on (keyPress "9")
{
	fromNumber = fromNumber add "9";
}

on (keyPress "0")
{
	fromNumber = fromNumber add "0";
}

on (keyPress "*")
{
	fromNumber = substring(fromNumber, 0, length(fromNumber) -1); //This will delete the last number in the field
}

Step 17: Test

Now you’re ready to test your movie!

Press cmd+return and Device Central will be opened. You can test the application pressing the keys on the test device and see if everything works as expected, if you are finished in the emulator, it’s time to test your file in the actual device!

Conclusion

Be sure to test every aspect and add more functionality to you application, you have a lot of posibilities. Here are some useful links for learning more about the world of Flash Lite:

• Flash Lite Visual Guide.
• Flash Lite Optimization.

I hope you liked this tut!