Giorgio Natili's Forum Nokia Blog

[Flash Lite 1.1 vertical scrolling menu with dynamic content]

Sun, 07 Sep 2008 03:47:54 +0300

Another common task in Flash Lite applications is to handle a vertical scrolling menu that show different external contents in each section.

The main tasks of this menu are the movement of the content and the handling of the external content in the application avoiding the Flash Lite issue that can’t handle multiple simultaneous HTTP requests.

It’s a good habit to store the data you need to load in an easy to reach place in your application, for instance put the paths in the first frame of the main timeline

img_local_1 = "content/menu01.swf";
img_local_2 = "content/menu02.swf";
img_local_3 = "content/menu03.swf";

In order to complete the first task you can work as in the previous post but thinking vertical. First of all create a movie clip on the stage and arrange the timeline as the following picture

The label level contains all the stuff you need in order to create an animated scrolling menu that trough ActionScript moves itself on the y axes of the player and a group of actions that acts like a function that you need in order to move the movie clip and set the next item to show and the content level contains three movie clip that the application will use to show the content.

The content level contains three instances of the movie clip mc_item that is stored in your library with the following instance names: item_1, item_2, item_3.

Let’s start to explore the code you need to handle the animation, later we’ll take a look to the building blocks needed in order to load the external content.
In the “Init” frame you perform the initialization of the variables you need in order to know the amount of items, the current item, the increment of movement and the current position

item = 1;
item_total = 3;
move_value = .47;
move_increment = 220;
current_position = _y;

Then you set the variable needed from each item to load the external content calling the “loadContent” “function” on the first movie clip

tellTarget("item_1"){

current = 1;
call("loadContent");

}

tellTarget("item_2"){

current = 2;

}

tellTarget("item_3"){

current = 3;

}

and the action needed to move the timeline to the “Pause” frame

gotoAndStop("Pause");

The “Pause” frame is the one that set again the quality to high (in order to enhance performance during the animation you’ll reduce this value) and that call the “loadContent” “function” on the current shown movie clip

fscommand2("SetQuality", "high");

tellTarget("item_" add next_item){

call("loadContent");

}

When the UP or DOWN soft keys are pressed the application calls the gotoAndStop(“FRAME”) method on the movie clip that contains all the content, the “up” and the “down” frames work in a very similar way, let’s take a look to the second one.

The code in this frame set the movement destination and the item to move, pave the path and call the “handler” “function”

destination = current_position - move_increment;

if (item == item_total) {

next_item = 1;

} else {

next_item = item + 1;

}

eval("item_" add next_item)._y = eval("item_" add item)._y + move_increment;

call ("handler");

The code stored in the “handler” frame acts like a function in Flash Lite 1.1 and each time is called it set the _y property, register current state and position and decrease the quality

_y = current_position;
item = next_item;
current_position = destination;
fscommand2("SetQuality", "medium");

The frame after the “down” one is the responsible of the movement

if (_y <= destination + 2) {

_y = destination;
gotoAndStop("Pause");

} else {

_y += Math.round(move_value * (destination - _y));

}

The “up” frame work in a similar way but the logic that olds is opposite to this one in order to handle the inverse movement.

The mc_item movie clip contains the code you need in order to handle the loading of the external content and its timeline is arranged as in the following picture

The “loading content…” text is stored inside a movie clip in order to handle the time the application needs to load the external content.

In the first frame of the “actions” level the initialization operations are performed

contentLoaded = 0;
stop();

The code stored in the “loadContent” frame perform the load operation only if the variable contentLoaded is set to 0 (it means that if the content is already loaded nothing will happen) and create a loop in which a check of the loading status is performed

if(contentLoaded == 0){

loadMovie(eval("/:img_local_" add current), "holder_mc");
gotoAndPlay("looper");

}

The code stored in the “looper” frame check the current frame of the movie clip that hold the external content changing the value of the contentLoaded variable and hiding the “loading content…” movie clip

if(holder_mc._framesloaded > 0 ) {

       contentLoaded = 1;
       setProperty("loader_mc", _visible, false);
       stop();

}

These are the building block of a scrollable menu with Flash Lite 1.1 with dynamic content, if you need more details please contact me, I’ll be happy to explain in more details the content of this post.

[Flash Lite 1.1 scrolling menu]

Mon, 21 Apr 2008 12:55:32 +0300

One of the most common stuff with Flash Lite is to create menus that can work also with the small screen of the mobile devices.
One solution is to scroll the content of the menu horizontally or vertically in order to show all the icons and / or all the text.
In this post we’ll try to explore the building blocks of an horizontal menu composed by a sequence of icons that react to the LEFT or to the RIGHT key pressure and that shows an enlarged version of the selected icon (fig 1).

fig. 1

Each menu icon is a movie clip with two key frames, in the first one is contained the normal status , in the second one is contained the enlarged status (fig. 2).

fig. 2

The main timeline is very simple, it contains a button used in order to handle the key pressure, an instance of the menu and the ActionScript you need to put the application in full screen.
The menu instance’s name is menuContainer_mc, in the script placed on the button we’ll refer to this name in order to control the menu

on(keyPress "<Left>") {
tellTarget("menuContainer_mc"){
  gotoAndPlay("left");
}
}
on(keyPress "<Right>") {
tellTarget("menuContainer_mc"){
  gotoAndPlay("right");
}
}

The menu contains in its timeline four labels used in order to keep well organized and separated the code you need (fig. 3).

fig. 3

The init frame initialize the menu, set to invisible the selected icon and enlarge the icon that represent the selected icon

item = 1;
item_total = 6;
item_skip = 3;
move_value = .4;
move_increment = 48;
current_position = _x;
// enlarge first icon
duplicateMovieClip("item_" add item, "enlarged_" add item, 10);
setProperty("item_" add item, _visible, false);
// Move the enlarged icon to the second frame
tellTarget ("enlarged_" add item) {
gotoAndStop(2);
}

Each time you call the “left” and “right” key frames after the calculation needed in order to select the right icon the menu will handle the visibility of the selected icon, the _x property of the item of the menu that has to be selected and calls the functions script

setProperty("item_" add item, _visible, true);
// Control the _x
setProperty("item_" add next_item, _x, getProperty("item_" add item, _x) + move_increment * item_skip);
// perform various functions
call ("Functions");

The frames contained after the “left” and the “right” labels perform a loop with which you handle the position of the icons container

if ( _x <= destination + 1) {
_x = destination;
gotoAndStop("Pause");
} else {
_x = _x + Math.round(move_value * (destination - _x));
}

When the destination is reached the Pause key frame is called, in this frame the selected icon is handled and the menu is ready to react again to the user input

// enlarge selected icon
duplicateMovieClip("item_" add item, "enlarged_" add item, 10);
setProperty("item_" add item, _visible, false);
tellTarget ("enlarged_" add item) {
gotoAndStop(2);
}

These are the building block of a scrollable menu with Flash Lite 1.1, if you need more details please contact me, I’ll be happy to explain in more details the content of this post.

Flash Lite 1.1 collisions

Sat, 02 Feb 2008 17:56:16 +0200

Flash Lite 1.1 collisions
A common task you may need when you start to develop a Flash Lite 1.1 arcade game is to check the collision between the sprites on the screen.
If you surf the web you may find tons of way to detect the collision in Flash but in Flash Lite 1.1 you have refer to the old ActionScript 1.0 syntax.
In this post we’ll try to explore the building blocks of detecting collision through a sample in which a character have to get some gift that are attached on the screen in a random way (fig. 1).

fig. 1

In order to complete this task we need to create a movie clip that contains the function that launches the gift (remember that Flash Lite 1.1 doesn’t support the functions so you store the script you need in a key frame associated to a label), a movie clip that call this function, a movie clip that store the script that moves the gift and that check the collisions and a movie clip used as a character.
The first three movie clips are outside the stage (fig. 2).

fig. 2

The aim of the “functions” and “loop” movie clips are self explanatory because the first one contains the code that duplicate the “gift” movie clip on the stage

// Duplicate the movieclip
duplicateMovieClip("../gift", "gift_mc" add count, count);
// Control the duplicated movie clip
tellTarget("../gift_mc" add count){
// Set the position of the movieclip
_x = random(/:_width);
_y = 0;
// Start to move
gotoAndPlay("moving");
// Set the max value for the y
set("ymax", /:screenHeight);
}

and the second one the call to this script at the end of its timeline.
Let’s take a look inside the gift movie clip.
Organize your timeline in order to have a a key frame with the label “moving” and a key frame with the label “removing” (fig. 4).

fig. 4

The “moving” key frame modifies the value of the _y property and launches a loop inside which you check if the movie clip has reached an _y that is outside the screen or if it is colliding with the character on the stage

// Check if the movie clip is get from the sprite
if(_y + _height > eval("../sprite_mc")._y ){
if(_x > eval("../sprite_mc")._x && _x < eval("../sprite_mc")._x + eval("../sprite_mc")._width){
  tellTarget("../sprite_mc"){
   gotoAndPlay("getIt");
  }
  removeMovieClip("");
}
}
// Check if the gift is outside the screen
if (_y + _height >= ymax) {
isLooping = false;
}else{
isLooping = true;
}

the “removing” key frame changes the graphic of the movie clip and at the end of its timeline removes the movie clip from the stage

removeMovieClip("");

I’m pretty sure that everybody knows how to move the main character on the stage so I’ll not explain this stuff in detail, by the way for reference and in order to be clear this is the file described in this post.

Flash Lite 1.1 scrolling background

Sun, 23 Dec 2007 16:37:57 +0200

When you start to develop a Flash Lite 1.1 arcade game is often required to have a background that “loops” under your sprite according to the direction sprite.
This is not a very complicated stuff and now we’ll look very quickly how to implement this with the old Flash Lite 1.1 ActionScript.

Import in the library of your .fla a PNG file with the same height of the screen of your target device and with the width equal to the double of the screen width.
Create a movie clip that contain this file and then create a new symbol in which you have to place an instance of the background and to define the script that handle the scroll.
Organize your timeline in order to have a “move” and an “init” label, a layer for the code and another one for the graphic

In the “init” frame you define the direction of the scroll, duplicate the bg_mc movie clip and complete the stuffs needed in order to handle your scrolling background.

direction = 1;
duplicateMovieClip("bg_mc", "bg_mc_new", 1000);
bg_mc_new._x = bg_mc._x + bg_mc._width;
bgStartX = _x;
speed = 4;
columnWidth = 320;

Now you are ready to implement the script contained in the move label (remember that the script associated with a frame label in Flash Lite 1.1 are used like functions and can be invoked with the call instruction) that handle the _x of this movie clip

_x -= (speed*direction);

if (_x <= (bgStartX - _width + columnWidth)){
_x = bgStartX - columnWidth - speed;
}

if(_x >= 0){
_x = - _width/2 + speed;
}

This script always increment the _x property and then check if the background is going outside the boundaries of the stage.
In order to make the background moving you handle the left and the right arrow pressure moving the background timeline to the frame 2 in order to create a loop

tellTarget("../mainBg_mc"){
set("direction", -1);
gotoAndPlay(2);
}

For reference and in order to be clear this is the file described in this post.