A Scrollable, Finite Map
bigMap.swf
Stepping back from the convolutions of the Bitmap class, we return to simpler ways of using bitmapped graphics, as in this oversize, scrollable ground map. You could use this project as the basis for a top-view video game, employing what the trade calls "two-and-a-half-D," or perspectival graphics.
The 400x400 pixel window at the top of this page shows a section of a larger image (1600x1600), rendered in a 3-D landscape design program (Vue 6, from E-On Software). Moving your cursor into one of the four edges of the window (or into one of the corners) triggers scrolling of the map in the appropriate direction(s). Scrolling in any direction stops when you reach an edge of the map.
I. Architecture
As usual, we've kept things as simple as possible. There is only one keyframe in the main movie, which contains a text field announcing that our image is loading. This effect covers the inevitable delay in loading a large (3 megabyte) image file. We'll discuss the scripting that handles the loading sequence below.
Otherwise, the timeline and Library are empty. The main movie file (bigMap.fla) is linked to a document class (bigMapDocClass).
II. Document class
The imports are entirely standard: MovieClip, Loader, URLRequest, and Events.events.*, to handle JPEG loading and an enter-frame loop.
The declared variable list is as follows:
public var imageA = new Loader();
public var reqA = new URLRequest("bigMap.jpg");
public var ready:Boolean = false;
The first and second cover our JPEG Loader, as we've seen many times before. The third in the list is a flag variable that signals whether the image data is available.
The Constructor is fairly straightforward. Since we don't need to recycle anything here, we can put all our initialization instructions right into the method:
function bigMapDocClass()
{
imageA.contentLoaderInfo.addEventListener(Event.COMPLETE, image_A_Good);
imageA.load(reqA);
addEventListener(Event.ENTER_FRAME, nav);
}
The first pair of instructions do the usual business of loading a JPEG via the Loader class, with an event listener and callback. The callback method, image_A_Good, looks like this:
public function image_A_Good(e:Event)
{
imageA.x = -800;
imageA.y = -800;
ready = true;
}
This method aligns the loaded graphic, setting it off by half its width and height, thus centering it within the 400x400 window. Next we set the ready flag for action, which starts our navigation callback (to which we are coming).
The last line of the Constructor sets a enter-frame listener with a callback handler called nav, which is of course where the main business of this project takes place.
That method runs as follows:
public function nav(e:Event)
{
if(ready)
{
if(mouseX < 20 && imageA.x < 0) imageA.x +=10;
if(mouseX >380 && imageA.x > -1200) imageA.x -=10;
if(mouseY < 20 &&imageA.y < 0) imageA.y +=10;
if(mouseY >380 && imageA.y > -1200) imageA.y -=10;
}
if(numChildren > 1) removeChildAt(1);
addChild(imageA);
}
The animation instructions -- those four if statements -- are all contained within a prior if test on our ready flag, which keeps anything from happening until the loader callback indicates our data have arrived.
The inner if tests look for cursor position, setting up 20-pixel zones around the edges of the window, and also test for a limit of movement in each of the four directions. This latter test keeps us from scrolling past the edge of the map. The limit is zero for right and top, because we start our map image at -800. Likewise, the limit for left and bottom is -1200. Holding at these points gives us 400 pixels of fill in the respective dimension, allowing the map graphic to completely occupy the window.
Note that these four tests operate independently, which allows the corners of the window to do double duty, since at those points we satisfy two tests at once, and thus can scroll the map diagonally.
The remainder of the nav() callback manages screen updates. We must add the map to the display list on every iteration, to reflect its change of position. That means we need to remove a previous version, if we're not making our very first pass. Failing to do this creates a memory drain.
Note that we leave level 0 untouched. That level holds the first frame of our main movie, with our "loading image" message. If we don't spare it, the message disappears when loading begins.That's the entirety of this refreshingly simple project.
III. Source files
The two Flash files and map graphic used in this posting can be found in the directory scrollableMap, within MULTIMEDIA in the shared account on student-iat.
|