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)