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():

call(frame);

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

on (keyPress "1"){
call("jimmy");
}

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:

gotoAndPlay(1);

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
phase+0.2;
//if the snowflake has reached the bottom of the screen, remove it (memory conservation)
if(snowflake._y>(/:YRes+15)){
removeMovieClip(_root._name);
}



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:

/:counter=0;
/:XRes= 128;
/:YRes =160;
/:MaxOnScreen=20;

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
/:randomX=random(/:XRes);
//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;
/:counter++;
//We recycle our counter to conserve memory
if(/:counter>/:MaxOnScreen){
/:counter-=/:MaxOnScreen;
}



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
gotoAndPlay(2);

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
ring._xscale+=5;
ring._yscale+=5;
//make the instance more transparent
ring._alpha-=10;
//after the instance expands to a certain degree, remove the symbol from stage
if(ring._width>150){
removeMovieClip(_root._name);
}



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)
/:randomX=random(240);
/:randomY=random(320);

//here we generate a random size for the rippled to be scaled to
//we add 30 so that they are not too small
/:randomSize=random(120)+30;

//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
/:counter++;

//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
if(/:counter>10){
/:counter-=10;
}

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
gotoAndPlay(2);



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:



Download:
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:

loadVariables("MP:",_root)

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
Linkage: http://www.zshare.net/flash/233871192abfc1/

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