Creating a Battery Indicator in Flash Lite 1.1
By Blue_Chi | Flash CS3 | Flash Lite 1.1 | BeginnerThis tutorial will teach you how to create a graphical battery indicator in Flash Lite 1.1. Our movie will make use of the special Flash Lite FScommands; GetBatteryLevel and GetMaxBatteryLevel.
Our battery indicator will make use of a battery run-out animation. I am going to provide you with an animation I made myself, you can use any other animation that you wish, but make sure that you do not use something that is too large in size as it will have to run on a mobile device. You can download the animation in this zip file here.
Our tutorial will be divided into two sections:
- Preparing the graphical assets
- Coding the indicator
Preparing Graphical Assets
Start by opening Flash and going through File>New to open the New Document window, click on the Template tab and select Nokia S60 - 240x320 from the Global Handsets category then click on OK.
Our target version is Flash Lite 1.1 and this one is Flash Lite 2.0. To down grade the version, access the Properties Inspector and change the version to Flash Lite 1.1. We are using this version to ensure compatibility with the largest possible number of phone models.
We will now work on the actual assets. We need to import the animation you downloaded at the start of this tutorial. We need this animation to be in its own movie clip to manipulate it by itself. To create a new empty movie clip press Ctrl+F8 to do just that, name your movie Battery Animation, make sure the symbol type is set to Movie Clip.
You should be on the timeline of this newly created Movie Clip. To import the battery animation simply go through File>Import>Import To Stage, browse the SWF file we need and then click on Open. You should instantly see your animation laid down as frames on this timeline. If you hit Enter you will see that the animation runs out, however, for technical reasons related to our code which you will see later, it will be much easier for us if the animation was actually to fill up the battery rather than see it run out. We are going to Reverse the order of the frames. To do this press the mouse key on an empty frame and then hold your mouse key and move it all the way to the first frame, this will select all the frames on the timeline, once you do that right-click any frame on this timeline and select Reverse Frames.
You can press Enter again to see the animation reversed now! When you're done you can click on Scene 1 to go back to the main timeline.
Our battery movie clip is made but it has not been put on stage. Open the Library by pressing Ctrl+L and then drag the Animation movie clip onto the stage. Make sure that you position it properly on the stage.
In order to be able to manipulate our movie clip via ActionScript we need to assign an instance name to it, an instance name is simply an object reference that ActionScript understands. To add an instance name to our battery animation, simply select the movie clip on stage and then access the Properties Inspector and set the name as battery_mc.
We are done working with the graphical assets of our movie. It is time to code. Right-click the first frame of the Actions layer and select Actions to open up the Actions panel.
Coding our Battery Indicator
The first task of our ActionScript is to retrieve the current battery level and the maximum possible battery level. To retrieve these we can use the flash lite fscommand2() methods. We are going to use it to retrieve these two values and store them in two variables called current and max.
max = fscommand2("GetMaxBatteryLevel");
If we try out these two values right away they would be arbitrary numbers. What we need to know is a percentage number indicating whether the battery is full, half full, or empty. To do this, we simply divide the current by the max, this will give us a floating decimal point between 0 and 1, where 0 means that the battery is empty and 1 means that the battery is full, the decimal value between these values will indicate how much battery is left, for example 0.5 means that the battery is half full.
max = fscommand2("GetMaxBatteryLevel");
currentRatio = current/max;
Our battery animation starts from frame 1 and gradually plays until its final frame where the first frame means that the battery is empty and the last frame means that the battery is full. We need to find the equivalent frame of the animation in relation to the value of our currentRatio variable, because our currentRatio variable is a decimal point indicating the relationship between the max and current battery levels, we can simply find the target current frame by simply multiplying this value with the total number of frames in our battery animation.
max = fscommand2("GetMaxBatteryLevel");
currentRatio = current/max;
currentFrame = currentRatio*battery_mc._totalframes;
There is a small problem with our code above, the currentFrame variable is a decimal point and a movie clip frame can only be a whole number. To do this we can use the int() method to round up the number.
max = fscommand2("GetMaxBatteryLevel");
currentRatio = current/max;
currentFrame = int(currentRetio*battery_mc._totalframes);
OK, now we have our target frame, we can tell our battery_mc to play that frame:
max = fscommand2("GetMaxBatteryLevel");
currentRatio = current/max;
currentFrame = int(currentRatio*battery_mc._totalframes);
tellTarget("battery_mc"){
gotoAndStop(/:currentFrame);
}
That should do it. However, our action now runs only once. To make our code update the status continuously we will need to use a timeline loop. Close the Actions panel and select the only frame in the first layer and select Insert Frame. Do the same for the second layer as well.
You can now test your movie in Flash, the movie should be automatically tested in Device Central. To check if the battery trick works, you will need to play with the Device Status controller in Device Central.
This concludes our tutorial, I hope that you've learnt something new. You can download the end source file from here. Please feel free to ask any questions you have at the Oman3D Forum. You might be interested in viewing our tutorials on how to create a Flash Lite Game or a Flash Lite Analogue Clock.
- End of Tutorial