Working with Nokia Series 40 Flash Lite content – Part 3: Creating a screen saver

Creating the screen saver

Now that you have your Stage and device settings configured to work with the target Nokia Series 40 device, it's time to start developing the actual content.

Before you start, do a quick save and name your working file to bounce.fla (alternatively, if you skipped the setup steps above, you can just open bounce_Nokia6125_start.fla as a starting point and resave it as bounce.fla).

Take a look at the main root Timeline (see Figure 3). By default on the ActionScript layer on frame 1, we already have the command to go to full-screen mode:

// this ActionScript sets your content to be full screen
fscommand2("FullScreen", true);

Note: You don't really need this command here because, by default, Nokia Series 40 content running as either the screen saver or wallpaper content type runs in full-screen mode. It is implicit in screen saver content. This statement does, however, enable you to test as a Full Screen Flash Lite application if you choose to run it in Standalone mode (i.e., launching it as non-screen saver content). We'll keep it in the SWF format for this specific purpose.

Figure 3. Default Timeline to start

Now you want to change the quality setting to high. By default, Flash Lite 1.1 uses "medium" as its initial setting. Although there is not much noticeable difference to the naked eye between "high" and "medium" for our example, we'll change it here nevertheless to be assured of the best rendering possible on the mobile device during playback. Use the following code on frame 1 in the ActionScript layer:

//-- set quality level
fscommand2( "SetQuality", "high" );

Now set up your root Timeline structure as follows:

1. Delete the layer named Content. You won't be using it.
2. Create a layer named Labels for the frame labels on the root Timeline.
3. Create a layer named Ball that will host the movie clip that bounces around the screen.
4. You're going to need four wall movie clips. These are going to be used to contain the animated content. To keep things neat and clean, create a folder named Walls.
5. Inside the Walls folder, create four individual layers named N, S, E, and W.
6. Create a unique layer called Bg to hold the background graphic. You can insert any static background image you'd like here later. Leave the Bg layer empty for now, so you can more clearly see what is happening with the assets you are to add shortly.

Your Timeline should now look something like Figure 4.

Figure 4. Timeline ready for code to be added

The layers have now all been created successfully. Time to add the assets to the Stage. The walls are a good place to start:

1. Select one of the wall layers you just created (E will do nicely) and draw a simple rectangle shape without a stroke color that is 2 pixels wide and 160 pixels high. The wall should extend the entire length or width of the available dimensions of the target device.
2. Use a hex color such as #ff0000 (red) if you wish the border to stand out, or use the background color #000000 (black) if you don't want a border to be displayed (to make it an "invisible" boundary).

3. Select the final shape created and then right-click and convert this into a movie clip with a symbol name of east_mc (see Figure 5).

   

   Figure 5. Creating a wall movie clip (the "east" wall)

4. Enter the Timeline of the wall movie clip and rename Layer 1 as wall.
5. Select the movie clip on the main Timeline and change the instance name in properties to east_mc as shown in Figure 6.

Figure 6. Wall movie clip with instance name of east_mc

6. Position the east_mc movie clip so it is on the "east" wall of the Stage, at x = 128.0 and y = 0.0 (see Figure 7).

   Note: Set the outline option from the layer Timeline menu if you have trouble positioning the wall due to its color.

   

   Figure 7. The "east" wall (east_mc) positioned to the right of the screen

7. Fantastic. Now that you have one wall created, you need to create the west_mc, north_mc and south_mc movie clips. The quickest way to do this is to duplicate the existing east_mc movie clip within the Flash Library (right-click to duplicate a movie clip).

   Do this for west_mc first; then for north_mc and south_mc. You'll need to modify the width parameters for these last two to match the available dimensions of the movie. Resize north_mc and south_mc to width = 128 pixels and height = 2 pixels. Also rotate the shapes so they are correct in their horizontal and vertical roles as walls (see Figure 8).

8. Rename each instance name to its location. So the rightmost clip would have an instance name of west_mc, for example. Change all four walls so that this is true.

9. Position the north_mc, south_mc, and west_mc movie clips so that they occupy their respective locations of north, south, and west on the screen (see Figure 8).

Figure 8. All of the walls set up (north_mc, south_mc, east_mc, west_mc)

With the four walls now in place, it's time to create the ball movie clip that moves within the four walls you just created:

1. Select the Ball layer on main root Timeline and simply draw a circle shape with a hex color of #333333 (dark gray) on the Stage.
2. Right-click the circle shape on the Stage or in the Library and convert it to a movie clip. Set the movie clip symbol name to ball_mc (see Figure 9).

   

   Figure 9. Converting the ball shape to a movie clip symbol

3. Now select the ball movie clip on the Stage and give it an instance name of ball_mc (see Figure 10).

   

   Figure 10. Giving the ball an instance name

4. Place the ball_mc movie clip on the Stage so it's in the center—and therefore enclosed within the four walls.

5. Open the ball_mc movie clip. Be sure the registration point for the movie clip is right smack dab in the middle of the ball clip (see Figure 11).

   

   Figure 11. Ball movie clip on the Stage and surrounded by the four walls

6. On the Timeline of ball_mc, add an ActionScript layer and insert the following code:

   //-- speed at which ball bounces
   speed = /:SPEED;
   //-- direction in the X axis
   xdir = ( random( 100 ) >= 50 ) ? 1: -1;
   //-- direction in the Y axis
   ydir = ( random( 100 ) >= 50 ) ? 1: -1;
   
   stop();
   

   This code sets the speed for the ball and defines a random x and y direction that will be used later to determine where the ball moves to next. I use the random() function to generate approximately a 50/50 outcome for both the x and y directions. For example, values of xdir = -1 and ydir = -1 indicate that the ball will travel to the lower right corner to start, whereas xdir = 1, ydir = 1 means the ball will move to the upper left corner.

7. Add a new layer named highlight. In this layer, create a simple shape in gray to give the appearance of a highlight on the ball. Use #3c3c3c as the color. Move the shape to the upper left side of the ball (see Figure 12).

   

   Figure 12. Ball created with highlight

   OK, you've got all of the assets on the Stage. Now it's time to add the ActionScript code to make things start moving.

8. Jump back to the main Timeline and extend all the layers to frame 4. You should see something resembling Figure 13.

   

   Figure 13. The main root Timeline has been extended to four frames

9. On the ActionScript layer, add the following variables to frame 1:

   //-- assign instance names to vars for "shortcuts"
   ball  = "ball_mc";
   wall1 = "north_mc";
   wall2 = "south_mc";
   wall3 = "east_mc";
   wall4 = "west_mc";
   

   You'll use these variables later once you start actually adding the code to detect for the bounce, as well as moving assets on screen.

   Also add a global variable to set the speed of the bouncing ball:

   //-- default speed
   SPEED = 0.35;
   

   You can change the overall speed to affect how the ball bounces.

   Note: Changing this may impact performance, so it's crucial to test on the actual device.

10. On frame 2 in the ActionScript layer, add the following code:

    for ( j=1; j<=4; j++ ) {
       k = j;
       call( "bouncefn" );
    }
    

    This is going to call the frame label named bouncefn and execute all the ActionScript found on it. The code calls the bouncefn movie clip four times: once for each side of the wall.

11. Go to frame 4 and create a label called bouncefn. (You'll fill in the code for this frame shortly.)

12. On frame 2 of the Labels layer, add a label called loop. Add the following code to the ActionScript layer in frame 3:

    gotoAndPlay( "loop" );
    

Great! Now you have a continuous looping structure that will call the bouncefn clip until the content is exited.

Adding movement

The ActionScript on frame 4 is where most of the action takes place. This includes checking for the ball bouncing off the walls, as well as direction changes.

Your first goal is to make the ball actually move. To do this, you merely update its x,y coordinates on the screen each time this frame is executed. The xdir and ydir variables determine the direction that ball will follow. As I described earlier, xdir = -1 and ydir = -1 refers to the lower right corner. Once the ball hits the the wall, these values change. Add this code to the current frame:

//-- update the ball
tellTarget( ball ) {
   _x += speed * xdir;
   _y += speed * ydir;
}

You may remember from Step 10 that you are actually checking to see if the bounce has occurred for all four walls. Here you take the value of the loop and use it to reference the wall variable names defined in Step 9. Add the following code:

//-- get the current wall to test
wall = eval( "wall" add k );

Calculating the collision detection

Now for the math. Here I am using a primitive method based on Flash 4 syntax to figure out whether ball_mc has collided with the wall currently being evaluated.

First, add the code that determines the difference in pixels between the x,y coorindates of the current position of the ball and the x,y coorindates of the wall. Remember that the ball is constantly on the move, so its position is dynamic, whereas the wall has static x,y properties:

//-- determine offset of ball and wall
diffX = getProperty( ball, _x ) - getProperty( wall, _x );
diffY = getProperty( ball, _y ) - getProperty( wall, _y );

The next script determines the minimum width and heights needed:

minWidth  = getProperty( ball, _width ) / 2 + getProperty( wall, _width ) / 2;
minHeight = getProperty( ball, _height ) / 2 + getProperty( wall, _height ) / 2;

The next piece of code merely makes sure that the differences are absolute and are non-negative values so that the collision check will be valid:

( diffX < 0 ) ? diffX = -diffX : "";
( diffY < 0 ) ? diffY = -diffY : "";

Now for the algorithm that actually detects the collision. You want to determine whether the difference between the x and y coordinates is less than the minimum width and height to intersect the two objects.

If this is true, then a collision has occurred. You can display a visual clue on the wall using tellTarget() as well as flip the travel direction of the ball, so a bounce-like effect occurs with the ball_mc movie clip. Depending on which wall is struck, the ydir and xdir values will also update. For instance, if the ball was traveling to the lower right corner with a value of xdir = –1, then xdir will now be 1, causing the ball to move to the lower left corner. Once the ball hits the west wall (the west_mc movie clip), the direction will change back to 1, sending the ball to the north wall. If no collision occurs, the script simply resets the wall to its no-hit status.

Because you have your main Timeline looping structure set up as in Steps 9–11, your ball will bounce from one end of the screen to another endlessly. Here is the code to accomplish that:

//- detect for collision between the current wall and the ball
if ( diffX < minWidth && diffY < minHeight ) {	
	//-- reverse direction of the ball
	switch( k ) {
		case 1:
		 tellTarget( ball ) {
		 	ydir = ( ydir != -1 ) ? -1: 1;
		 }
		 break;
		case 2:
		 tellTarget( ball ) {
			 ydir = ( ydir != -1 ) ? -1: 1;
		 }
		 break;
		case 3:
		 tellTarget( ball ) {
			 xdir = ( xdir != -1 ) ? -1: 1;
		 }
		 break;
		case 4:
		 tellTarget( ball ) {
			 xdir = ( xdir != -1 ) ? -1: 1;
		 }
		 break;
	}
}

Now that you have all the ActionScript for frame 4, it's time to resave your FLA file. Choose the name bounce.fla. Then compile and publish the final FLA file as a Flash Lite 1.1 SWF file.

Now that all the code is complete, you may decide to add a background image to your Bg layer from Step 6. You can import any of the graphics from the /backgrounds folder contained in the ZIP file accompanying this article. Just select File > Import to Stage and choose the target graphic file to use. Alternatively, you can search for a new background graphic or generate your own. Just resize the dimensions to the target device size in mind (128 x 160 pixels for the Nokia 6125).

You should now have a ball_mc movie clip that bounces aimlessly across each of the four walls.

Page 3 of 5

Previous Page

Next Page