Monday, 24 December 2007

Happy Holidays!

Wishing everyone a safe and Happy Holiday and New Year!

Saturday, 22 December 2007

Dynamic Wallpaper Tutorial: Sunrise, Sunset

Hey guys - it's been a while since I've posted a tutorial. I've been terribly busy with my school studies, that I barely have time for myself, let alone write a tutorial. But now that I am done exams and the holiday season is upon us, here is my gift for fellow readers out there. I hope you enjoy it!

Dynamic Wallpaper: Part 1: Sunrise, Sunset

With the onset of new SE phones being able to support standby swfs, we see a growing number of standby swfs that are animated in such a way that they change according to the time of day. Wouldn't it be nice to see an evening landscape when it's dark out and a bright meadow during the afternoon? Let's see how this is done!

Above is an swf example of the 'animation' we are aiming for. Obviously, the background should only change as time progresses, but I just wanted to give you an idea of what the end product would be like in summation.

The trickiest part of this project is creating the effects that corresponding to sunrise and sunset; the actionscript is incredibly simple and you have probably seen it already. In this tutorial we are aiming for mountain scape, where the dynamic components are the sun, moon and sky colour.

Therefore, we first need to create 3 graphic symbols that correspond to the sun moon and sky. Since we will need to change the colour of these symbols using the Color properties, we will create these symbols with a white fill. When creating your graphics, try to center them onto the crosshair using the Align tool. That way, it will be easier to select the appropriate colour tween. The sky will just be a white rectangle, the sun a circle, and the moon a will be a yellow crescent. Because I felt the moon is generally a static colour, I decided to keep it one colour. The others may change colours, so I felt it would be easier to keep them white and apply a tint later:

Next, we create a new movieclip that will house the entire 24 hour animation. The easiest way to create this animation is to have the frame length set at 24 frames, but I feel that it would be pretty choppy, so in this tutorial, we are creating a 48 frame animation. The frame numbers will correspond to:

Frame 1 (Midnight)
Frame 20 (10:00 am)
Frame 30 (3 pm)
Frame 48 (11:59pm)

We will need 4 layers:

1) Foreground (we will use a mountain scape)
Motion Guide (todirect the motion tween of sun and moon)
2) Sun (will contain the sun animation)
3) Moon (will contain the moon animiation)
4) Background (this will contain the sky)

Here is the overview of the movieclip timeline. You can refer to this later:

We will go through each layer individually.

This will be the top most layer and will be the graphic you would like to display in the forefront of the landscape. This can be anything to your liking such as trees, houses, buildings. For this example, we use a mountain range. Be sure not to cover up the whole stage, or else you will not be able to see the background sky change colours. Don't mind the other layers on the picture below:

The background will contain the sky graphic symbol undergoing a motion tween (colour change).
First off, we need to determine the appropriate colours of the sky at various times of day while keeping in mind that there are 48 frames to represent 24 hours in the day. Here is what I chose. This is a very plain and vague colour scheme which can be definitely improved upon.

Frame 1 (Midnight): #000000 (will look like #353535)
Frame 20 (10:00 am): #4CA3FA (will look like #71B6FB)
Frame 30 (3 pm): #4CA3FA (will look like #71B6FB)
Frame 48 (11:00pm): #000000 (will look like #353535)

*IMPORTANT: Remember that our original sky symbol was white! This means that the symbol will appear a few shades lighter when you add the tint. The tint colour will not be equivalent to what is shown in the symbol!

To apply these colour changes, first create keyframes on frames 1,20, 30 and 48, and apply a motion tween between them. Then select the keyframe and symbol, then select Color: Tint at the bottom properties menu. I chose Tint over Advanced because I can use the dropper tool to select the appropriate colour instead of guessing the RGB values.

Sun and Moon Layers:
These layers will use the same concepts as the sky colour change tweens except we add one more dimension: a motion tween guide. A motion tween guide lets the user designate a path for the symbol to travel while it is undergoing a motion tween. This is appropriate for the sun and moon animations because sunrise and sunsets have a curved path, not straight!

First create the two layers that house the Sun and Moon symbols. Next, right click the sun layer and select Add Motion Guide... This will create a new pseudo layer which will be the parent for the Sun. Next, move the Moon layer upwards so that it becomes under the Motion Guide as well. We put them in the same guide because for simplicity, they will rise and fall in the same path. (Look at the MovieClip Timeline picture)

After this is complete we have to start creating the path for the moon and sun to travel on. Selecting the Motion Guide layer, choose the line tool and roughly draw out a curve for which you want the sun/moon to follow. Now, remember that during the day, the moon doesn't need to be on stage, and during the night, the sun doesn't need to be on stage.

Recall our scheme:
Frame 1 (Midnight)
Frame 20 (10:00 am)
Frame 30 (3 pm)
Frame 48 (11:59pm)

I decided the sun should rise at around 7/8ish am; this corresponds to around Frame 16. So, select the sun layer: Frame 16 and place the sun on the stage such that the crosshair is centered on one part of the curve you drew in the motion guide. Now, create a keyframe at frame 25; this corresponds to around 12 noon, so now, move the sun so that the cross hair is at the top of the curve. Now, create a keyframe at frame 35, and move the sun so that its the right most side of the curve.

Now, you can select each keyframe (16, 25, 35) and change the colour properties of the sun: it is more orange during sunrise and sunset and more yellow during high noon. Fiddle around with the tint tool to get the best colour. You can see what I did in the above diagram.

Now, we can repeat the same steps for the moon layer. But remember that because the moon rises at night, the motion tween will begin at the ENDS of the timeline. Make sure that the moon is placed in the exact same place at Frame 1 and 48, so it can be continuous.

The Main Timeline:

Now, place your created movie clip in the main timeline on frame 1. Select your movieclip, and give it the variable name: background. Create a keyframe at frame 6.

Right click Frame 1, add the following actionscript:

//this will get the current time and convert it to a number between 1 and 48.
/:theHour=FSCommand2("GetTimeHours") * 2;
/:hourFraction = Math.round((/:theMinutes/60) * 2);

Right click Frame 6, add the following actionscript:


There you have it! Now compile and test it out! The movie will check the time every 6 frames and update the movieclip to reflect this. So in a sense, it seems continuous on the viewer's perspective. You can test this easily by previewing on computer, and changing your system's clock, and see the flash file update the background automatically!

EXTRA TIP: If you want the animation to seem more realistic, you can use motion tween easing for the movement of the sun and moon, so that it slows the most when it reaches the peak of the curve.

Tuesday, 21 August 2007

Password Protection Pt. 2: Backspacing (and String Functions)

In the previous Password Protection Tutorial, we explored a simple solution to creating a password entry prompt that enables a certain degree of privacy when accessing their flash lite menu. I have received a couple responses from users wanting to know how to create a backspace function so that if the user accidentally keys in the wrong digit, they can 'backspace' and re enter something new. Here is what I'm talking about:

Click the swf and press 15403 and press enter. It will display an incorrect password message.
Now type in 15403, then press the left key, then press numpad digit 2. It will remove the last digit you entered and append on the correct one instead. This backspace function can be easily created by considering a couple String functions that come with flash lite 1.1

There are 2 functions we will use: length() and substring().

The length(string) function returns an integer representing the length of the string you have given it. For instance:

numLetters = length(theWord);
trace(numLetters); //OUTPUT will be 5

The substring(string,index,count) function returns a string variable.

string The string from which to extract the new string.
index The number of the first character to extract.
count The number of characters to include in the extracted string, not including the index character.

trace(theWord1); //OUTPUT will be 'sna'

The Backspace Function

The backspace function is a great example of how these two string functions can be used together. Pressing the backspace button once, will essentially run a substring function that returns a string that is one character shorter. The one liner for this is essentially:

//we only want this to occur when the variable has characters in it
/:realPW = substring(/:realPW, 0, length(/:realPW)-1);

Implementation into Password Protection

Continuing from our previous password protection tutorial, select the button you had placed on stage that listens to the buttons pressed. Right click and click Actions... At the very bottom at the following code:

//we designate the 'backspace' button to the left key, but you can change it to whatever you want
on(keyPress ""){

'backspace' corresponds to a pseudo function we will create. In the area of the timeline designated to these pseudo functions, create a new blank keyframe and give it a frame label of 'backspace'. Right click the blank keyframe and choose Actions... Enter the following:

/:realPW = substring(/:realPW, 0, length(/:realPW)-1);
/:pwBox = substring(/:pwBox, 0, length(/:pwBox)-1);

We need to execute the code for both the entered password and the corresponding asterisks that appear on screen. If we don't do this, the number of asterisks on screen would not match up with the number of keystrokes entered.

There you have it! Now you can backspace passwords you enter.

Friday, 17 August 2007

Oman3D: Creating A Flash Lite Game

Oman3D has posted a comprehensive tutorial on creating a simple flash lite 1.1 game using Flash 8/CS:

This tutorial will teach you how to create a Flash Lite game playable on the Flash Lite Player version 1.1 - one of the earliest versions and most restricted, but the most widely spread version as well. Our basic game could be created without using the advanced features provided in later versions. Adopting Flash Lite 1.1 will guarantee that the game will be compatible with the largest possible number of Flash Lite powered devices.

For more information on this, please read their tutorial.

Sunday, 5 August 2007

Password Protecting Flash Menus: Basics

Lots of people I see on SE forums want their flash menu customized so that they are password protected. I guess it gives an extra dimension of privacy which is important for some. In this tutorial, we'll look at a simple solution to creating a fully functional password screen that can be customizable to whatever numerical password you wish.

This will be Part 1, which will give you the basics on how to create this password protection. Note that this is a simplified version and we will cover other things (how to backspace) in later tutorials. Here is a preview. Click on the swf and enter the password (15402) and press Enter.

Is it possible?

First off, let's talk about what's involved. For one, Flash Lite 1.1 does not support reading or writing to file. Second, it does not support so-called "flash cookies", or more officially, "Mobile Shared Objects". So what can we do? One solution I have proposed is simply designating your wanted password into variable name. The great thing about this is that the numerical values are preserved upon compiling such that the values can be read and consequently changed using a hex editor. So for one, you can customize the password by editing the swf in a hex editor. However, once on your phone, it will not be changeable, though it may be possible with some file explorer and text editing applications. Oh well, better than nothing right?

But wait, how about input fields? Why don't we just use one of those? Although it does allow for alphanumeric data entry, I find the system extremely tedious and requires the user to go through a lot of work just to enter data. I feel that a cellphone user doesn't want to spend a minute entering the password just to unlock a menu. Just try creating a simple input field and see how it functions on your cellphone and you'll see.

The Algorithm

The way we will accomplish a password protection system without input text fields is by creating a mini loop at the beginning of the movie. A button listener will listen for digits pressed and the Enter button being pressed. It will compare it to the real password, and if valid, will allow the flash lite to proceed to the flash menu. We will mimic an input system by appending asterisks to a dynamic textfield as the user continues to press numpad buttons.

Let's Begin

First off, we need to create a button. In the main timeline, create a layer and place the button on it so that it is not on stage. Right click and select Actions... to add this following code:

on(keyPress "1"){
on(keyPress "2"){
on(keyPress "3"){
on(keyPress "4"){
on(keyPress "5"){
on(keyPress "6"){
on(keyPress "7"){
on(keyPress "8"){
on(keyPress "9"){
on(keyPress "0"){
on(keyPress ""){

Yes, I know the code is quite repetitive, but I haven't found a more efficient alternative. Basically, this code relays the number that's pressed on the pad and passes it to a pseudo function using the call function. Pressing enter will call another function to evaluate the validity of the numbers pressed.

Now, create another layer. On frame 1, you will define the password you want to use:


For now, we can only use numbers, as it is the easiest thing to do. Give frame 1 a frame label called "Idle".

On frame 1, you will also need to add a dynamic textfield. Give it a var name pwBox. This will house the asterisks that will be appended when you press a numpad button; center the text and be sure to limit the textfield to one line. To mimic this textfield to look like an entry form, you can add a backgroup image that looks like a textfield.

You will need to add another blank dynamic text field with var = error. This will house any error messages that will pop up after you enter an incorrect password.

TIP: Make sure the font colour of the dynamic text fields are selected so that they are different from the background!

You may also want to add some additional titles, prompts and some instructions on frame 1 to tell the user to enter a password.

Now, extend the duration of the frame to 7 frames. On frame 7, create a keyframe and add the acrionscript:


This ensures that the movie stays in the password prompt area, and not proceed to the actual flash menu.

Now, create blank keyframes on Frame 8, such that all of the placed items are no longer on stage.

On frame 10, (on any layer you want), create a BLANK keyframe. Give this frame a label named 'addDigit'. This blank frame will contain the code to be executed when the user presses any numpad button, which will trigger the call function for 'addDigit'. Add the code:

//pwBox refers to the dynamic text field we have added in frame 1. By appending an asterisk, we give the effect that the password is actually being entered into the text field. In fact, this is NOT the case, we are simply appending to a variable.
/:pwBox= /:pwBox add "*";
//the variable realPW represents the entered password; with every numpad button presses, it appends the value 'digit', which is declared in the button listener
/:realPW=/:realPW add /:digit;

On frame 11, (on any layer you want), create a BLANK keyframe. Give this frame a label named 'evaluate'. This blank frame will contain the code to be executed when the 'enter' button triggers the call function for 'evaluate'. Add the code:

//this compares the defined password with the real password that has been entered by the user. We use 'eq' to compare strings.
if(pwWord eq realPW){
//we advance to the actual menu is the password matches
gotoAndPlay("Flash Menu");
//error refers to a dynamic text field that's at first empty in frame 1. Once the password is incorrect, text will pop up in the field prompting the user to re enter the password
/:error="Incorrect Password.\nPlease Re-enter.";
// if the password is incorrect, we need to immediately clear the previously entered password as well as the asterisks present in the text field.
/:pwBox= "";
/:realPW= "";

Now, on frame 15, create a blank keyframe named "Flash Menu". This is where the flash menu can be placed. From the code above, you see that we jump to this keyframe when the password is correct.

Hex Editing to change Password

There you have it! A nice password protected flash menu. Now, for kicks, if you compile the swf and reopen the swf in a hex editor, you can easily see where the variable name is defined, and you can change it to whatever you like!

Something to think about:

Nonetheless, there are some drawbacks to this method:
1) You can only use numerical passwords
2) Although the password length is essentially as long as you want it to be, the text field that contains the asterisks will overflow.
3) You can't backspace at the moment (check back for a later tutorial)

Thursday, 26 July 2007

Creating Pseudo Functions in Flash Lite

Is it possible to create functions in Flash Lite 1.1? I'm having problems getting it to work...

This is good question. First off, Flash Lite 1.1 does not support functions. This is a major drawback, as applications, especially games use functions to impart versatility and efficiency. Fortunately, there is a solution to this problem, and it is in the form of the function call():


To illustrate this concept, place a button listener on stage, and enter the following code, by right clicking and selecting options:

on (keyPress "1"){

In the above code, jimmy refers to the frame name that will we will be executing code from. Now extend the duration of frames to 5 frames. On Frame 5, add:


This guarantees that your movie will be always within frames 1 and 5. Now, add a blank keyframe on frame 6 so that the button is not on stage. Name this frame jimmy. Add the following code:

trace("Code executed!");

Now, compile the code and see for yourself. When you press '1', it will pop up with a message window (in your emulator) saying "Code executed!". This shows that the code from frame 6 was executed. More importantly, it DOES NOT move the movie to that particular frame (your button is still on stage, meaning its still playing between frames 1 and 5). In essence, we are just calling the code from that particular frame, and NOT playing the content of that frame. From CS3 Documentation:

The default form executes the script on the specified frame of the same timeline where the call() function was executed, without moving the playhead to that frame.

So as you can see, this is pretty much equivalent to creating functions. The only difference is that each labelled keyframe you make represents a different function. For best practice, you can place these at the end of your movie so it doesn't interject anywhere and also helps make your movie more organized.

Wednesday, 18 July 2007

Flash Lite on Sony Ericsson: The Struggle

When I start browsing around the internet to look for interesting flash lite applications for Sony Ericsson phones, the majority of results land on flash lite menus. Let's face it, they're slick, animated and aesthetically pleasing: who wouldn't want one? Everyone wants a cool flash lite menu to show off to their peers. I would've expected this potential area of interest to be booming at a phenomenal rate, but the fact of the matter is that SE makes it very hard for us to create and implement these menus.

First, let's consider how one needs to implement these flash lite menus. It's not something an ordinary cell phone user can achieve without learning and download tutorials on the special programs, drivers, files needed to get the flash files into the right directory. Moreover, you risk screwing up your phone if the process of moving that file somehow goes wrong. Let's not forget that the programs do not currently support CID 51/52. Because the directory in which swf files exist are within the file system of the phone, one can not just plop the file into their internal or external memory to expect it to work. This is by far the biggest problem that's limiting this sector from expanding.

Many of you have contacted me with potential ideas on how to get around this idea, but after several weeks of fidgeting with directories and themes.xml, I'm afriad I can't find a solution to this problem. It really seems as though SE wants to keep this flash lite creation business in control. With no leads as to what the solution is, my attempts are comparable to finding a needle in a haystack.

Second, there are very little resources out there that teach people how to create these menus. Albeit, there are intelligent, and generous users out on forums who dedicate their time on understanding how the code works with flash decompilers and hex code editing, but it's very tedious and time consuming. That's one reason why this site exists. So for those users out there who think it's super easy to convert FL2 to FL1.1, or changing resolutions, take some time and think about the amount of work needed just to change something. In fact, I have yet to see that many flash menus created from scratch; most of them are just slight variations on flash menus created by SE.

Lastly, SE's flash lite only works in browsers and may the prime reason why animations run so poorly on several select phones. On the bright side, we are seeing more phones compatible with flash wallpapers that do not require a specific directory to operate. While the current outlook on flash lite expansion seems like a struggle, I am truly optimistic that SE can turn things around by realizing how many potential flash lite developers are interested in creating applications for their cellphones.

Saturday, 14 July 2007

Falling Snowflakes: Tutorial

We continue our series of useful dynamic aesthetics with one associated with the winter season. Wouldn't it be nice to have a nice snowy landscape as a wallpaper and better yet, have snowflakes falling in the forefront? We will discuss in this tutorial how to transform your ordinary snowy landscape into a winter wonderland!

The idea of falling snowflakes can be achieved using actionscript very easily and is almost identical to the code used for the ripple tutorial I wrote earlier. However, in this tutorial we aim for more realisitc effects, such as:

1) Snowflakes that fall non linearly (they can move side to side)
2) The falling speed of the snowflakes differ
3) The above two effects are randomized.

To understand how we achieve this, you must first be familiar with a bit of trigonometry. The function y=sin(x) mathematically yields a wave like shape that repeats itself every 360 degrees (2 pi) returning a maximum and minimum of 1 and -1.

So, using this function, we can randomly generate an x value so that the starting point in the wave will differ. By incrementing the x placement using this function we can allow the snowflake to move right and left in a natural sense. Randomly incrementing the y direction will change the speed the snowflakes fall.

First, we will create a movieclip symbol named snowflake_mc. Inside this symbol, create a graphic to use for the snowflake. For simplicity, we will use a circle:

Second, create a new movieclip symbol named snowing_mc. Inside this symbol, place the snowflake_mc symbol created above inside on frame 1, and give it an instance name 'snowflake'. Create a keyframe on frame 2. Right click frame 2 and add the following code:

//Everytime the movie loops to this frame, it will update the extent the snowflakes move to the right and left, as well as its falling speed
//Amplitude measures the maximum X value displacement you want
//Phase defines where in the sine function the snowflake begins at.
snowflake._x +=amplitude*Math.sin(phase);
snowflake._y +=speed;
//this increments the sine function
//if the snowflake has reached the bottom of the screen, remove it (memory conservation)

Now switch to the main timeline:

Frame 1: Place the snowing_mc symbol onto the main area, but off-stage (not in the visible area). Give it an instance name of 'snow'. Also add the following actionscript:

/:XRes= 128;
/:YRes =160;

This 'counter' serves dual purpose. It helps create a pseudo array of movieclips and also designates which layer the movieclip will be placed. X and Y Res are values you should change according to which phone resolution you're creating your swf file for. For example I used 128 x 160 because my w300i is fitted for that resolution. MaxOnScreen refers to the maximum number of snowflakes you want on the screen. Remember that the more you have, the more processing requirements are needed on your phone.

Now, add a KeyFrame on Frame 2: Add this actionscript:

//This will generate a random number between 0 and XRes to place your snowflake
//This creates a new movieclip in a pseudo array format (ex: snow0, snow1, snow2, etc.) using the counter we created in frame 1
duplicateMovieClip("snow", "snow" add /:counter, /:counter);
//This places the created movieclip into a correct position
eval("snow" add /:counter)._x= /:randomX;
//We place it above the stage to ensure you don't see magically appearing on screen
eval("snow" add /:counter)._y= -10;
//This phase value determines where in the sine function we start. We use this value in the snowing_mc where we define the x movement of the snowflake
eval("snow" add /:counter).phase=random(360);
//Here we define the amplitude variable randomly so that some snowflakes move left/right more than others
eval("snow" add /:counter).amplitude=random(3);
//Here we define the speed
eval("snow" add /:counter).speed=random(3)+5;
//We recycle our counter to conserve memory

Please note that the variables: amplitude, speed, and phase are up to you to define. You need not to follow exactly the code I have written above. In fact, I encourage users to test out different values to develop the optimal numbers to use!

Now create KeyFrame at frame 15 and add the line:

//this will loop back to frame 2 to generate a new snowflake

Voila, compile in FL 1.1 and you will see snowflakes falling on your video. Note that we didn't explore all the possibilities of snowflake dynamics in this tutorial (such as snowflake type, size, colour), but you can easily incorporate those effects using past tutorials I've written. There are also several different things to modify in this algorithm such as:

1) Frame duration between Frame 2 and 15 (This will change how often a snowflake appears)
2) Frame duration between Frame 1 and 2 in snowing_mc (This will change how often the snowflake changes position)
3) The variables amplitude, phase, speed (snowflake dynamics)
4) MaxOnScreen (how many snowflakes you see at once)

Saturday, 7 July 2007

MeBoy: Gameboy fun for your Non Symbian Phone

Let's take a rest from Flash Lite just for a minute. I just came across this really cool application called MeBoy:

MeBoy is a Gameboy emulator for mobile phones (which means you can use it to play Gameboy games on a mobile phone). It works on phones with support for Java Micro Edition, specifically MIDP 2.0. Your phone manufacturer's web site can tell you if this includes your phone.

This means you can load up Gameboy (and Color) ROMs onto your cell phone and play them. I decided to give it a try with my SE W300i. A great added function for v 1.4 is the ability to shrink fit, meaning your screen can be shrunk to fit on your cellphone screen if it's too small; this was great for my 128x160 screen. Also, the rotate screen function also makes lets me maximize the screen for a larger display, albeit more awkward controls. However, you get the flexibility of designating all the controls which is nice.

Gaemplay is surprisingly good on my w300i, averaging around 20fps at most times. But to be honest, there is a noticeable decrease in performance in certain circumstances (fading, transitions) but I guess you can't expect too much. Another big downer is the current lack of audio support. Oh well, I guess you can't have it all. Either way, it's still great to see this program bring back the great Gameboy games of our time. You can visit the developer site here: MEBoy.

Now, back to flash for a minute: wouldn't it be cool if emulators could be created in Flash (or flash lite?). Would be pretty awesome, but I honestly have no idea if that's even possible. Just a thought...

Friday, 6 July 2007

Random Ripple Tutorial

Lots of the new flash wallpapers out there feature cool randomized aesthetics which make it look really nice. In this tutorial, we will create a randomized ripple like effect using Flash Lite 1.1. I'm taking a simplifed approach to this and is fairly simple to understand.

This can be achieved with two symbols. First, create a movie clip symbol called ring_mc. Inside this symbol, create a simple ring shape like so:

Next, create a movie clip called ripple_mc. Inside this movieclip, place ring_mc symbol inside frame 1. Give the placed ring_mc an instance name, called 'ring'. Extend the frame duration to 4 frames. At frame number 4, add a keyframe and add the following script: I have made comments to show you what it does:

//increase the size of the instance ring
//make the instance more transparent
//after the instance expands to a certain degree, remove the symbol from stage

From the above code, you can see that the increased size and decreased alpha will give it a ripple effect as the movie continues to loop. The last couple of lines above are more to conserve memory: we don't want all these symbols to accumulate on stage when we randomly place them.

Now, switch to the main timeline. Let's take this frame by frame:

Frame 1: Add Keyframe
Place the ripple_mc symbol onto the main area, but off-stage (not in the visible area). Give it an instance name of 'ripple'. Also add the following actionscript:

/:counter = 1;

This counter serves dual purpose. It helps create a pseudo array of movieclips and also designates which layer the movieclip will be placed!

Now, add a keyframe at Frame 2: In frame 2, add the actionscript:

//these two lines generates a random number: since we want to randomly place a movieclip in X and Y directions, we need two random numbers*/
//the numbers in the parentheses depend on your screen resolution (here it is 240 x 320)

//here we generate a random size for the rippled to be scaled to
//we add 30 so that they are not too small

//this is the most important line: it duplicates the instance we placed on stage (ripple) and gives it a name (ripple1, ripple2, ripple3 etc) based on the counter. The last parameter is the layer which each movieclip will be placed on (1,2,3,..). Only one movieclip can exist on each layer, so that is why we increment everytime a new movie is instantiated
duplicateMovieClip("ripple", "ripple" add /:counter, /:counter);

//these four lines scale and place the created movieclip onto the stage
eval("ripple" add /:counter)._xscale= /:randomSize;
eval("ripple" add /:counter)._yscale= /:randomSize;
eval("ripple" add /:counter)._x= /:randomX;
eval("ripple" add /:counter)._y= /:randomY;

//we need to increment the counter so that when this code is executed again, a new movieclip with a new instance name will be created

//since we know that it is unrealisitc to have 10 ripples on stage at once, we can loop the counter to save on memory and to reuse some layers

Recall back in the ripple_mc we had an if statement to check on the size. This is to 'double check' on the ripple size: if it's too big we will remove it to save memory.

Now, add a keyframe at frame 25 and add the line:

//this will loop the movie

There you have it! Remember that this is just a tutorial, and a lot of things can be modified to fit your needs. Such as :

1) How much you want to increment the _xscale, _yscale and _alpha
2) The frame duration of ripple_mc (how often the ripple expands)
3) The frame duration between frames 2 and 25 (how often a new ripple appears)
4) Frame Rate!

Here is the final product:

Analog Clock Wallpaper

Here's a simple analog clock wallpaper for those who wish to use it:

176 x 220
240 x 320

Wednesday, 4 July 2007

Importing SE Music Player Data

What is the actionscript that receives the music info from those standby menus?

Taking a look at some commercial SE standby swfs, it looks like the key to displaying music information is the following command:


However, it seems as though this function is only supported in phones that run walkman player 2.0 [credit: peter3334], which are usually the phones that are able to run wallpapers. From here, it looks as though the variables imported are: TITLE, ARTIST and ALBUM. The actionscript associated with displaying, updating and formatting this information definitely seems more complicated than the ordinary flash lite menu...

Tuesday, 3 July 2007

w910 Standby: Conversion from FL2.0 to FL1.1

Lithium3r has taken the time to convert a FL2.0 standby (for the w910) to FL1.1 standards, allowing many more SE phones to run this nice standby menu. Way to go! Here is a screenie:

Discussion : SE-NSE FORUMS

Getting started with sound in Macromedia Flash Lite 1.1

Some users have shown interest in learning how to incorporate sound into flash lite menus and other applications. Here is a very nice starting point: a tutorial from SE outlining the necessary steps to implementing sounds into FL1.1

Getting started with sound in Macromedia Flash Lite 1.1

Friday, 29 June 2007

Aura SE FL Menu (1.1, Various)

I'm happy to announce that the latest flash lite menu is available for download. This new menu, called 'Aura' features my first menu with a circular icon motion (using a motion guide) as well as a nice analog clock in the middle. The beautiful icons used in this menu are not my own; they are from gakuseisean's iVista icon pack. Many thanks goes to him for giving me permission to include these stellar icons into my menu system. You can visit his website here.

Due to feedback from the SE-NSE forums, I've decided to switch the background to a black colour and must admit it does look better! The menu is available in 3 resolutions:

The zip file contains the thm file (it is very basic), readme and swf file.

128 x 160
176 x 220
240 x 320

I'd love to hear your comments and any suggestions for upcoming menus. Thanks again for everyone's support!

Monday, 25 June 2007

More SE Flash Lite Menus

For those who are hungry for more SE flash lite menus, peter3334 over at se-nse forums have generously uploaded his collection of over 100 menus in 3 different resolutions. You can take find them here


Wednesday, 20 June 2007

Using Arrays? (FL1.1)

Can I create an array in Flash Lite 1.1?

Unfortunately they are not supported. This has been a common question, as it is definitely an important component in creating icon menus as it drastically simplifies the process. However, what you can do is create a pseudo-array where you name variables using actionscript and a counter, like so:

This will set the variable 'numbers1' equal to one:
eval("numbers1") = 1;

This will set the variable 'numbers2" equal to two:
eval("numbers" add 2) = 2;

If you want to create the range of variables "numbers1" to "numbers9", then you simply do the following:

for(i==1; i<10; i++){
eval("numbers" add i) = i;

Here is an application of using this method:

For a typical SE flash menu with icon scrolling, you will have a movieclip that contains each of the 12 icons in each frame. There will be a stop() command on frame 1 to keep it from playing. You will place 5 of the same movieclips on stage, and give them instance names icon0, icon1, icon2, icon3 and icon4. Now, if you want to designate which icon they want to show, you can easily accomplish this through a for loop :

tellTarget("icon" add /:x){

I found this method particularly useful in designating and changing icons in flash lite menus.

Tuesday, 19 June 2007

Anchoring Random Placement

I want to randomly place a symbol somewhere on stage, but I want it to stay anchored around a specific point so it won't wander off the stage. What can I do?

This was previously covered in the Vibrating Objects tutorial. Here are the steps:

1) Create a graphic symbol of the object you want to randomly place
2) Create a movieclip, place the graphic symbol inside. Give the graphic an instance name: we will call ours ball. Extend the movieclip to 2 frames long.
3) In Frame 1 of the movieclip, add actionscript:

/:x_displacement = random(2*/:boundary)-/:boundary;
/:y_displacement = random(2*/:boundary)-/:boundary;
ball._x = /:x_original + (/:x_displacement);
ball._y =/:y_original + (/:y_displacement);

4) Place the movieclip on the stage and place it directly where you want it to be anchored.
5)In frame 1, or whenever the movieclip is beginning, add actionscript in that frame:

/:x_original = getProperty(ball,_x);
/:y_original = getProperty(ball,_y);

6) Determine what x and y displacement you want for randomly placing your graphic. If you decided you want it to displace 5 pixels, then you would add the following line:

/:boundary = 5;

That's it. If you want to control when it will randomly place, and when it will not, obviously you can place a stop() command in frame 1 of the movieclip and tell it to play whenever you want. Also, if you want to displace the graphic in the x and y directions independently, then you can declare a variable called /:boundary_x and /:boundary_y, and then replace the /:boundary variable found in the calculations for /:x_displacement and /:y_displacement.

Sunday, 17 June 2007

Creating a Stopwatch Timer

Is there a way I can create a stopwatch timer in FL 1.1?

Yes, this can be done. The main function you can use is getTimer():


This will return the time (in milliseconds) which has elapsed since the flash lite file has been loaded. In a typical stop watch, you will have a start, stop and reset button. We will create 3 button symbols representing each button and will act as button listeners.

First off, let's discuss the algorithm. Since we are trying to emulate a real stopwatch, there are a couple things we need to achieve:

1) Only ONE button should be pressable at each specific state. For example, if the stopwatch is ready to start counting, pressing STOP or RESET will not do anything. Likewise, while the stopwatch is counting, START and RESET will not do anything.
2) There should be an actively incrementing counter when START button has been pressed.
3) There should be some instructions on screen.

Let's begin. Create 3 buttons (one for START, STOP and RESET). Also create 4 layers.
Set up the main timeline as follows. I have exaggerated the frame lengths for easier understanding:

Here you can see I've divided the main timeline into 3 distinct portions with labelled frames. "Static Text" means placing normal text on stage. "Only Stop Button" refers to the fact that in that duration of frames, only the STOP button will be on the stage, and not the START nor RESET buttons. There is also a layer that contains actionscript which has been written out for you. In the layer named Output, you will create a dynamic text field on stage, and set the var property to 'output'.

The last thing we need to do is add some actionscript to the buttons. So, drag the button onto the stage in the appropriate phase (ie - drag the START button in the Stopped phase, etc.), right click the button and select Actions...

For the Start Button: We will execute the code when the keypad 1 button is pressed. You can change it to whatever you like:

on(keyPress "1"){

For the Stop Button: We will execute the code when the keypad 2 button is pressed. You can change it to whatever you like. By subtracting the difference, we now have the elapsed time from when button 1 was pressed until button 2 was pressed. You can then format the code for display purposes:

on(keyPress "2"){
/:duration = /:time2 - /:time1;
/:output = "Elapsed Time: " add /:duration;

Please note that the information being held in the variable /:output will directly be displayed in the dynamic text field we talked about earlier.

For the Reset Button: We will execute the code when the keypad 3 button is pressed. You can change it to whatever you like.

on(keyPress "3"){

There you have it. Here is a recap:

One important thing to realize is that this stopwatch won't increment as smoothly as a real timer. That is to say, the display will jump from 0, 15, 23, ... instead of 0,1,2,3,.... The frame duration of the "Counting" phase will determine the duration between updating the display. So a shorter frame length will result in a smoother increment display.

Saturday, 16 June 2007

Converting SE Flash Menus from FL2.0 to FL1.1

Is there an easy way to convert FL 2.0 to FL1.1?

Alot of the new SE phones coming on the market are starting to support FL2.0, which gives developers greater flexibility and power in creating flash lite applications. Consequently, a lot of the new menus coming out are being exclusively for FL2.0 enabled phones.

Based on my knowledge, there is no easy way to convert it. If you have the original FL2.0 fla file, you would have to go in and manually change the actionscript code so that it is FL1.1 compatible. While in some cases it may be very easy (like variable names minutesDisplay to /:minutesDisplay), some require more research and some are straight out impossible.

Many FL2.0 functions are not supported in FL1.1. One big loss in FL1.1 is the inability to create dynamic tweens. Thus, converting to FL 1.1 would require 'hardcoding' a motion tween. An example would be the analog clock. In FL2.0, you can dynamically rotate the symbols using AS, whereas in FL1.1 you would have to pre-create the 360 rotating motion tween.

Thus, the algorithm to create an application in FL2.0 may not necessarily be the same as in FL1.1 This means that one would have to re-design the application which could require a lot work. In terms of SE flash lite menus here are some things you would need to keep in mind when trying to convert:

1) Variable designations (var1 in FL2.0 would need to changed to /:var1 if accessed globally)
2) Phone accessing function (FL2.0 uses FLCmd(), FL1.1 uses FSCommand, FSCommand2)
3) Unsupported functions (hardcoding the motion tween, using other functions, etc.)
4) Button Listeners (FL2.0 uses button listeners, whereas FL1.1 uses on(keyPress))

If you feel I've missed any important functions that pertain to SE FL menus, feel free to buzz me.

Sunday, 10 June 2007

Randomizing Colours

Here's the latest question from a user:

Do you know any way that I can let that flash lite to choose random colors for a specific symbol?

Unfortunately in FL 1.1, it DOES NOT support the setRGB() function. This function (supported in FL2.0 and later) allows you to set the hexidecimal colour designation for symbols.

A work around to this problem is available though. However, it really defeats the concept of a completely random selection. What you can do is, create graphics and save them as movieclip symbols. Each movieclip contains several frames of the same graphic but in different colours. This can be achieved by manually changing colours, or even better, you can change the color properties of the symbol (Color -> Advanced). In that window, you can manually change RGB and Alpha values to your liking.

Then at frame 1, set the actionscript stop();. Once the frame is placed on the main timeline and given an instance name, you can then use a random number generator to create a random number between 0 and x, where x is the number of frames-1. Then use the gotoAndStop() function to designate the frame number:

The number in brackets sets the maximum number which will be outputted. So if you have ten frames in said movieclip, choose 9, because the numbers outputted are 0-9 inclusive.

theFrame = random(9);

Then we follow with a command to change the frame number of that movieclip (with instance name 'graphic') to that randomized number. We add 1 because frame 0 does not exist.


Though the random-ness of this method really depends on how many different frames you want, it is kind of nice, as it lets you determine which colours you want displayed specifically.

Hope this helps.

Preview: Aura FL SE Menu

Here's a quick preview for my next FL SE Menu, named Aura. Special thanks to Sean for giving me permission to use his awesome iVista icons in the menu. You can check out his dA site here.

Monday, 4 June 2007

w850i: FRP: Part 2: R1GB001

A few days after posting the original w850i frame rate profile with the 2 button phenomena, a w850i user named '20' e-mailed me and was interested in running these tests on his phone. Even better, his phone has a different firmware version on it (R1GB001), and therefore was just what I needed to determine whether the 2 button phenomena was only happening on R1ED001. Thanks to 20, we have some results to display:

The above graphs have identical results as the original firmware (R1ED001). The normal mode shows times indifferent to frame rates (-23fps), while pressing 2 buttons increases performance significantly.

Using the data obtained from Part 1, we have plotted the time ratios of the old firmware R1ED001 (Normal, 2 Buttons) on the same graph as the new firmware R1GB001 (Normal, 2 Buttons).

As you can see, the time ratios are comparable to eachother, both having increased performance when 2 buttons pressed. Finally, here is the apparent fps plot:

It seems like the 2 button performance increase is more evident in the older firmware than the newer one. Either way, pressing down 2 buttons still shows an increase in flash lite movie performance.

So from these graphs, we have evidence that 2 SE w850i firmwares (R1ED001, R1GB001) both show a marked increase in swf performance when two buttons are pressed. I will be contacting SE shortly to see what their input on this is.

Friday, 1 June 2007

How to: Incorporate Standby SWF into THM files

Some of the new SE phones on the market are beginning to support swfs as standby screens, with the ability to display and react to time, dates and other information retrieved from the phone. Here are the steps to adding a standby menu to a thm file. Credit to lithium3r:

1) Locate your thm file. Open it up and extract into a designated folder using TUGZip.

2) Now, locate your swf standby file. Place it in the same designated folder as above. For simplicity, we will call our file standby.swf.

3) In that designated folder, open up theme.xml. Add this line in the thm file:

<standby_image source="standby.swf"/>

If that line is already present, then just change the file name to whatever the swf is named.

4) Repackage all the contents in the designated folder into a tar file using TUGZip.

5) Rename the .tar file back to .thm.

6) Upload the thm file to your SE phone via file transfer method.

7) Browse to themes and enable that theme.

There you go.

Thursday, 31 May 2007

SE Analog Red (Various, FL 1.1)

Earlier when I posted my AnalogBlue FL Menu, someone had wanted it in a red theme as well. Here two zip files corresponding to the AnalogRed resolutions (176 x 220 and 240 x 320):

I also quickly made a matching thm file, but it is by no means the best theme for it.

176 x 220: Download
240 x 320: Download

Looking forward to seeing some screenshots of this.

Hope this helps,

Wednesday, 30 May 2007

w850i Frame Rate Profile and the '2 Button Phenomena'

The next phone we have the privilege to look at is the SE 850i. Special thanks goes out to lithium3r for providing the test results and generously using his phone to run the tests. This is the first 240 x 320 SE phone we've taken a look at. For more specifications on this phone, take a look here.

This is a particularly interesting SE phone to look at, as lithium3r has discovered something very interesting. The w850i runs swf files extremely slowly, but once 2 buttons on the keypad is pressed, the performance of the swf increases drastically!

I have one flash lite standby and it runs much faster when it's set to standby than just running it through that browser. So I think that when you press 2 keys down it shows the real speed. I don't know that is this some kind bug in the firmware [R1ED001] because i have the release firmware on my phone [CID49].

That being said, lithium3r proceeded to run the frame rate profile on his phones once using normal methods, and once pressed down 2 buttons on his phone. The results will surprise you. We start with the theoretical vs actual graphs:

The above graph shows the test being run in 'normal mode'. As you can see, the time it takes to run the swf is very long (~22 s) and seems to be constant regardless of what frame rate you're running at. Here is the same graph using data obtained using the '2 button mode':

Here we see the more familiar shape as seen with other SE phones we've looked at. The times are reduced to around 8 seconds (achieved at fps 30-40), and comparable to results seen with the w300i frame rate profile. How can 2 buttons make your swf run twice as fast?

Now we can compare the time ratios from these two different modes:

Regardless of what you're doing to the phone, both display a linear relationship. The 2 button pressed mode of course shows a much lower time ratio (preferable). The apparent FPS graph follows:

Again, the normal mode only shows a mere 8 fps, while the 2 button pressing mode shows a nice fps of 23. Also, the 2 button pressed mode seems to have an optimal frame rate (35) while the normal mode remains indifferent to frame rate.

What conclusions can we make from this? I'm afraid not much. Although pressing 2 buttons drastically improve performance, it is unrealistic to mash buttons whenever a swf is on your screen. The frame rate profile of the SE w850i under normal conditions is not impressive at all, showing no preference to any frame rate at all.

This makes me strongly feel that there must be some firmware (R1ED001) bug associated with this phone that causes a bottleneck effect on swf performance, that is somehow alleviated when 2 buttons are pressed. I need to get a hold of another phone (preferably with different firmware version) to draw some conclusions.

Please keep in mind that this test has only been completed on lithium3r's w850i. If you would like to contribute to this test using your 850i, please don't hesitate to contact me: phirewerkz [at] gmail [dot] com.

Tuesday, 29 May 2007

Analog Clock Tutorial (FL1.1)

Many of you have asked for me to create a tutorial on how to create your own animated analog clock. In this tutorial, we will go through this process using a couple simple FSCommands.

First off, you will need to create 3 graphic symbols. Each symbol will represent the different hand on the clock. Thus, there will be a minuteHand, secondHand and hourHand graphic symbol (they don't have to be named this way).

Update: Registration does not have to be at the pivot point. Read below for more info.

Next you will need to create 3 movieclips. Each movieclip will house the corresponding graphic symbol undergoing a 360 rotation motion tween. Thus we can name them minuteAnimation, secondAnimation and hourAnimation.

UPDATE: The registration point does not need to be at the pivot point. Here are the clarified directions.

In your movieclip, place your graphic symbol at frame 1 pointing upwards (corresponding to '12' on the clock). Then, click on the graphic, right click and select Free Transform. There should now be some handles on the graphic that let you scale and transform the object. More importantly there will be a white dot in the middle of graphic. Click this dot and drag it to the pivot point of the hand (the end opposite to the pointing hand). This dot placement ensures that the graphic will rotate around this point.

Next, right click at frame 60, add a keyframe so that the same graphic should be shown at frame 60. Right click the frames in between and Create Motion Tween. The motion tween will be 60 frames long, but it can be longer given you modify the actionscript code that ensues. After creating the motion tween, in the motion tween properties, select CW rotation with 0 rotations. Next, you will need to select your endframe and rotate your pointer CCW by 6 degrees. You can do this by selecting the Align Window and clicking the Transform tab. We need to do this because, if we don't frame 1 and frame 60 will be at the same position, and will screw up the clock dynamics.

You will need to repeat this process for each of the three movie clips that animate each hand movement.

Now we take a look at the other parts of the clock. In another layer, create the face of the clock with the ticks and whatever else you want to add. Place this layer BELOW the main layer that will house your clock hands. It is a bit tricky to create the ticks on the clock but try to use the rotate function in Flash to rotate a circle with 1 tick 12 times, each time by 30 degrees.

Now on your main layer, place your three movie clips. Try to center them in the center of the clock face. Again, use the align function in Flash to help you with that. We will now name each animation with a instance name; we will name ours: minVar, hourVar, secVar.

Now in frame 1, we put in actionscript:

/:hourWhole = FSCommand2("GetTimeHours");

The above three lines retrieve the values for the current hour, minute and second. Please note that the hour value is [0,23] format.

To make it easier to code, we will have to convert the 24-hour format to it's 12 hour equivalent. We will also designate AM/PM, by checking whether the returned hour value is greater or less than 12:


/:ampm = "PM";






/:ampm = "AM";

The next following lines compensate for fractions of an hour/minute, since the values returned above are whole numbers. For example, if it is 2:30, you want the hour hand to be between 2 and 3, not just at two:

/:hourFraction = (/:mins / 60)*5;

We multiply by 5 to yield a number between 1 and 60 (we will see why later).

/:minFraction = /:seconds/60;

Note that we do not need to calculate fractions for seconds, since it is a finite amount.

We then calculate the total number of hours and minutes by adding the remainder:

/:mins = int(/:minFraction + /:minWhole);
/:hours = int((/:hourWhole*5)+ /:hourFraction);

Now, /:mins is a variable between 0 and 60 (because there are sixty minutes in an hour). /:hours is also a variable between 0 and 60 because we multiplied hourWhole by 5, and hourFraction was multiplied by 5 in a few lines before this. We want /:hours in this format because our original animation had the hand rotating in sixty frames. Thus, we can use this number to refer to the frameNumber for which the time corresponds to.

*UPDATE: The following lines account for when the hour hand is at 12am and 12pm. It fixes the bug of not moving...


*UPDATE: These blocks of code add the '0' in front of the minute or hour when it is a single display and is solely for display purposes. That's to say, it will say 9:05:01 instead 9:5:1.

/:minFormat = "0" add /:minWhole;
/:minFormat = /:minWhole;

if(/:seconds <10){
/:secondsFormat = "0" add /:seconds;
/:secondsFormat =/:seconds;

Here we use tellTarget() to tell the movieclips that are placed on the stage to go to their specific frame. Note that the movie clip contains frames 1-60, while any returned value will be between 0-59. This is why we add one to the variable:


Now in the main timeline, extend the frames such that the animation lasts 6 frames, lets say. This number is completely arbitrary and will vary depending your cellphone. Basically, you're determining the number of frames that pass after which the phone rechecks the time and updates the clock. Thus, an optimal frame duration would be one in which it updates at every second. But as we've seen with the frame rate profiles, frame rates run much slower on cellphones, so beware.

Monday, 28 May 2007

w810i Frame Rate Profile

The next phone we have decided to look at for our frame rate profile is the SE w810i, a very successful and popular phone on the market that is FL1.1 enabled. You can take a look at the specifications here

If you do not understand the rationale behind these tests, take a look at my previous posts to see what I'm doing this for.

Here is the Actual vs. Theoretical Times for a rotating ball swf file for the w810i:

As with all the SE phones we've looked at, there seems to be a sharp drop in the actual times midway through the frame incrementing. Let's take a look at the time ratios:

From the graph, it seems like the lowest (and most desirable) time ratio comes at around fps 35, which is a bit lower compared to the w300i and w550i profiles we looked at earlier.

To get a better idea at what apparent FPS the phone will be displaying, I've decided to add another graph which compares the Actual FPS achieved from a defined FPS in FL 1.1:

Drawing from the above graph, you can see that the best FPS you're going to achieve with the w810 will be around 20 frames per second (achieved from FPS 35-110). Although the apparent FPS is the same regardless of FPS>35, it's a better bet to settle with 35 to spare the processor from higher loads.

I'm currently looking for other phone models to test out. If you would like to participate, please contact me: phirewerkz [at] gmail [dot] com