Creating the wallpaper

Now that the environment is all set up, it's time to construct your Flash Lite 1.1 wallpaper.

Examining the prebuilt assets in the library

Normally you would start building the wallpaper here completely from scratch. However, to save you precious production time, I've gone and premade the assets for the wallpaper:

1. Locate the fishtank_nokia6125_start.fla source file found within the fl11_nokia_series40_part2.zip sample ZIP file linked to at the beginning of this article and open it in Flash Professional 8.
2. Open the Flash Library (Control+L or Command+L). You'll see several library folders including graphics, mc, and tweens. Inside the folder named "mc", note the movie clips for the fish, seahorse, kelp, and air bubbles (see Figure 9). As you work through this tutorial, you'll add and then animate each of these assets on the main Flash Timeline.

3. Take a moment to examine the Flash Library in this source file.

   

   Figure 9. Flash Library for the fish tank wallpaper

Creating the main timeline ActionScript layer

Now that you are familiar with the assets that make up the fish tank wallpaper, it's time to begin development:

1. Create a layer called ActionScript directly under the Comments layer on the main Timeline of the movie. This is where some initialization will be done for the movie.

2. Since you are using all vector assets for this sample fish tank wallpaper, you'll want the best rendering quality possible. Set rendering quality to high by adding the following ActionScript to this layer:

   //-- set the movie to the highest possible quality
   fscommand2( "setQuality", "high" );
   

Adding the air bubbles

The next step is to add randomly positioned air bubbles that animate from the bottom of the screen to the top:

1. Create a layer on the main timeline called Bubble.

2. Locate the bubble_mc movie clip in the Flash Library and drag an instance of it to the Stage. Move the bubble movie clip off the visible area of the Stage (see Figure 10).

   

   Figure 10. bubble_mc positioned off the Stage

3. Be sure to give the bubble an instance name on the Stage by right-clicking the movie clip on the Stage and selecting Properties, or selecting the bubble on the Stage and setting this value in the Document Properties panel (see Figure 11).

   

   Figure 11. bubble_mc positioned off the Stage

   Now you have one bubble on the Stage. However, you want to have multiple bubbles in your fish tank. Instead of dragging more movie clips to the Stage, however, let me show you another approach: using ActionScript to duplicate the bubble_mc movie clip on the Stage to create randomly sized bubbles at runtime. You'll randomly position each of these air bubbles on the screen using the code that follows in the next step.

4. Jump back to the ActionScript layer on the main Timeline and add the following code on the first frame of the movie:

   TOTALBUBBLES = random( 4 ) + 1;
   for ( i=0; i < TOTALBUBBLES; i++ ) {
       duplicateMovieClip( "bubble_mc", "b" add i add "_mc", i );
       setProperty( "b" add i add "_mc", _x, random( 128 ) ) ;
       setProperty( "b" add i add "_mc", _y, 160 + random( 20 ) );
   }
   

   This will pick between 1 and 5 bubbles to add to the screen. Each bubble will have a random x coordinate and random y coordinate. These will place it randomly off the Stage below the fish tank.

   If you run this now, notice that all the bubbles animate at the exact same time—not the desired effect we are going after. You want to stagger this effect to give each bubble its own "speed."

   Note: The more bubbles you animate, the greater the performance hit you will incur when the final animation runs. Set the TOTALBUBBLES variable appropriately. A value less than 5 should achieve the overall look without sacrificing too much CPU performance. However, always remember to test on your target device(s).

5. Open the bubble_mc movie clip. The air bubble is already animated. If you "scrub" the Timeline (move the playhead back and forth) you'll notice that the bubble travels along an animated guide layer labeled "path." This gives a subtle effect that the bubble is steadily moving from the bottom of the tank to the top.

6. Go to the first frame of the bubble_mc and add the following code to the ActionScript layer on frame 1:

   //-- pick a number position in the x axis for this bubble
   _x = random( 128 );
   //-- generate a random size for the bubble
   p = random( 75 );
   setProperty( "", _xscale, 25 + p );
   setProperty( "", _yscale, 25 + p );
   

   These statements will position the bubble movie clip in a random x coordinate and then resize it to approximately 75–100% of the original bubble's size. This will add to the effect that each bubble is different and at least somewhat random in apperance.

7. On frame 70 of the bubble_mc, add the following ActionScript:

   //-- The bubble has reached the top of the screen. Pause a bit before it starts over.
   gotoAndPlay( _currentframe + ( _totalframes - _currentframe ) );
   

   Once a bubble has reached the end of the path, it'll hit frame 70, at which point the statements above will run, causing the bubble to jump to an empty frame between 70 and the very last frame. This will cause a bit of a delay.

The end result is that each randomly sized bubble will start at the bottom of the tank and slowly rise to the top. Once it reaches the top, there will be a pause. After this random pause, the bubble will repeat the animation sequence, starting at the bottom of the screen (see Figure 12). Test your movie in the mobile emulator to make sure you are seeing this behavior before you continue.

Figure 12. Air bubbles being generated

Adding the fish

The next assets to add to the wallpaper are the actual fish:

1. Create a folder on the main timeline called Fish.
2. Inside this folder, create layers labeled Fish1, Fish2, Fish3, and Fish4.
3. Select the Fish1 layer and drag a copy of the fish1_mc to the Stage. Position the first fish movie clip so that it appears on the left, off the main Stage.
4. Insert a keyframe of the fish1_mc into a frame. Frame 20 will do nicely to start. Position this second keyframe of the fish1_mc so it appears to the right of the Stage.

Now, it's time to animate the fish so that the fish is on the left in frame 1, and then moves to the right over time as the subsequent frame is reached. This gives the appearance that the fish is swimming from the left to the right of the wallpaper.

Note: If you're having trouble visualizing this, you can open the fishtank_nokia6125_main.fla file contained in the sample download file and take a look at the Timeline. Also run the final fishtank_nokia6125_main.swf to see the effect we want to achieve.

To create the animation motion tween, simply right-click between the two frames and select Create Motion Tween. Now if you run it, the fish moves from the left to the right.

Note: If you are unfamiliar with how to create tweens, you can find an excellent step-by-step explanation of tweening in Introduction to Animation in Flash Lite 1.1 by Dale Rankine and James Talbot in the Mobile and Devices Developer Center.

Now that you have the fish moving from left to right, it's time to add the other fish to the Timeline:

1. Repeat the process for fish2_mc, fish3_mc, and fish4_mc. Create a new layer, say fish2, insert the fish2_mc movie clip, find a new frame and insert a secondary keyframe, and then just create a motion tween between the two locations of the fish. Adjust the locations of the keyframe positions to make the fish move from one location to another.

   Tip: Turn on onion skinning in the Timeline if you want to see the overall path of the fish better, or simply scrub the main Timeline playhead back and forth to see how your individual fish animations progress over time.

2. It's a good idea to randomize the tweens of the fish, so they move at different times. This is easy to do. Just adjust the length of each tween so that only one fish is moving at one time. Add more keyframes to each fish layer in order to further control each fish's movement (see Figure 13).

Figure 13. Sample Timeline with several keyframes (fish) that tween across the screen at various frame intervals

You can also adjust the "easing" of each fish as it moves. Easing refers to the amount of speed that happens (acceleration and deceleraton) as a tween starts and ends. If you experiment with this setting, you can create the effect of the fish swimming away at a faster rate, or slowing down (see Figure 14).

Figure 14. Adding some easing to each fish

To give each timeline a bit of randomness, try spacing out frames and adding frames where fish are momentarily motionless. This will help give the illusion of random movement within the fish tank.

If you open the final fishtank_nokia6125_main.fla and look at the Fish folder containing the fish movie clips, you can see an example of how I tweened each of my fish on the Timeline. I leave it up to you to determine how each fish exactly moves about (see Figure 15). Experiment and change it up a bit in your own custom fish aquarium.

Figure 15. Fish added to the wallpaper

Note: I chose not to optimize the individual tween layers in this particular example. To improve performance, you can create an "optimized" version of a FLA file in Flash Lite, where the tweens are compressed into fewer individually separated layers. This can sometimes boost playback performance during Flash Lite content playback. However, for the purposes of this tutorial, I have left the tweens on separate layers to make things a bit less complicated during this walkthrough. I have left the tweens on separate layers to make things a bit less complicated during this walkthrough. Please refer to the fishtank_nokia6125_main_optimized.fla file in the attached sample ZIP for a more optimized version of the fish tank.

Be careful about how many simultaneous tweens you use within your Flash Lite content. Be conscience about the performance impact of having several moving fish on the screen at any given time. Also keep in mind that this is wallpaper, so it is running inline with the phone's UI.

Experiment and test to see where performance becomes an issue on your specific target device(s) for the wallpaper you create. In the case of this sample wallpaper, about four fish is a good number for the tank.

Adding the seahorse

In the Flash Library under the mc folder, you'll find a seahorse. Much like the fish you have added, just create a layer called Seahorse on the main Timeline:

1. Drag the seahorse_mc clip to the seahorse layer.
2. Insert a second seahorse keyframe in a subsequent frame. Right-click between the frames and choose Create Motion Tween.
3. Move the keyframe locations to make the seahorse move from one location to another (for example, left to right or top to bottom).
4. By extending the main Timeline of the seahorse across many frames, you can slow it down to achieve more of the effect of how a creature like this may swim (see Figure 16).

Figure 16. Seahorse now moving about the screen

Adding the bottom bar background

Because Flash Lite wallpaper runs embedded within the device's user interface, the phone navigation will be displayed while the wallpaper is active. To accommodate for this, you'll want to create a bottom bar background so that the navigation choices ("Menu", "Goto", "Names," as seen previously in Figure 1) are easy to read:

1. Create a new layer called BottomNavBar. Locate the bottombar_gra symbol located in the graphics folder of the Flash Library. Drag the asset onto the Stage and position it. The exact coordinates should be: x = 0.0 and y = 143.0.
2. Once the graphic is positioned, change its alpha value to 50% (see Figure 17).

Figure 17. Setting the alpha value of the white background bar so the device menu text will stand out when deployed on the target handset

Figure 18 depicts what the bottom navigation should look like before deploying to the target device. Once deployed on the Nokia 6125, this area will be occupied by navigation text (as seen previously in Figure 1).

Figure 18. Bottom navigation bar added with an alpha of 50%

Adding the kelp bed

Now that you've got the air bubbles, fish, seahorse, and bottom navigation background in place, it's time to add the kelp background:

1. Create a new layer called Kelp.
2. Locate the kelp_mc movie clip inside the Flash Library and drag a copy to the Stage on this new layer.
3. Set the coordinates to x = –3 and y = 42 for its location at the bottom of the fish tank (see Figure 19).

4. Make sure the Kelp layer is the lowest layer possible on the main Timeline. The fish and other animated assets should appear above it, so that it acts as a background.

   

   Figure 19. Kelp movie clip added and positioned on the Stage

Tip: If you move a fish or other animated asset below this layer, users will perceive the asset in the distance.

See this effect in the fishtank_nokia6125_main.fla source file under the FishBehindKelp folder and Fish4 layer on the main Timeline.

Adding the solid background

The last step to our fish tank wallpaper is to add a solid background color to it:

1. Create a background layer named Bg.
2. Draw a solid rectangle (without a border) on the Stage within this layer.
3. Set the color of the shape to #0066FF.
4. Resize the shape to the dimensions of the Stage. In the case of our Nokia 6125 target device, use a width of 128 pixels and height of 160 pixels for the Main Display.
5. Position this new asset at x = 0 and y = 0. This will give you a solid blue background for the wallpaper.

An example of the final wallpaper that has been created can be found in the ZIP file. The file is named fishtank_nokia6125_main.fla. Use the file fishtank_nokia6125_main.swf if you just want to see one possible end result from adding and animating the wallpaper assets.

Page 3 of 4

Previous Page

Next Page