Giorgio Natili's Forum Nokia Blog

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
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.

The 2007 flash lite contest will end the 15th february, at the moment we have more than 70 entries, thanks to all the developers that joined our contest.

Join today our contest and don't lose the opportunity to get our prizes:

1st Prize - A prize of YOUR choice valued up to US$ 5,000 sponsored by Playyoo.
2nd Prize - Adobe software licenses
3rd Prize - O’Reilly books

For more info www.mobilecontest.org

Good luck!

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.

recently...

• [Flash Lite 1.1 scrolling menu]
• Flash Lite 1.1 collisions
• 2007 flash lite game contest
• Flash Lite 1.1 scrolling background
• Congratulations!

Categories

• Browsing [0]
• Business Opportunities/Services [0]
• CDMA [0]
• Connectivity [0]
• Enterprise [0]
• Entertainment [0]
• Event [1]
• Flash [3]
• Games [1]
• General [1]
• Java [0]
• Location Based Services [0]
• Maemo [0]
• Messaging [0]
• Open C [0]
• Python [0]
• S60 [0]
• Series 40 [0]
• Series 80 [0]
• Symbian C++ [0]
• Testing [0]
• Web Run-Time (WRT) [0]
• Widget [0]

Syndicate

• RSS 0.90
• RSS 1.0
• RSS 2.0
• Atom