Jako: 01/01/2007 - 02/01/2007

So we're planning our games round an island. A narrative (physical or otherwise) that restricts the user in some form or another. I'm going to take a few key elements from the word Island and bundle them into my game.
Firstly, as I detailed earlier, my game will be following a relatively linear concept. You progress through the game world in order to read a story that I have set. Deviations from the path may well be introduced but for the most part you are being directed by me, the narrator.
Firstly, and most probably the incorrect way of going about it, I wanted to make the game engine (if that's what it can be called) based on my first thoughts about concept.
Because the story is linear and because the game is point and click I wanted at least to have the interface interactable. A scroll map, one you explore through mouse control.
After talking to Anna-Beth about the concept that I had for a scrolling map I created the following code:

a = Stage.width;
b = 565;
doStuff = function () {
x = _root._xmouse;
b_mc._x = (b*x)/a;
};
setInterval(doStuff, 1);

In short this would direct an image (the world) to position itself on the stage at a point relative to the user cursor. I'll describe how it should behave:
We define 2 variables. The first, "a" is set to obtain the stage's (that's the area in flash you work with) width. The second variable "b" is set to the width of the image we wish to scroll.
We then have our code, this I set as a one tick function with an interval to repeat it.
In theory the variable "x" will capture each tick (that's the frames per second tick, each time the frame is loaded) the position of the mouse on the stage.
I named our image "b_mc" and have the code position it's "_x" location (that's the distance along the x axis (the width) to variable "b" multiplied by variable "x" and divided by variable "a".
The set interval at the very bottom simply tells flash to replay that code, which I named "doStuff" every 1 milliseond. Flash counts in milliseconds, i.e. 1000 = 1 second.
Unfortunately this code almost but not quite works, the image scrolls and will match to 50%. i.e. if I placed my cursor on the far right of the stage the image will align. However, if I place my cursor on the left of the stage then the image will only mark half it's distance. I've no idea how to alter this as my maths is shocking to say the least and the idea is now obsolete to another anyway.

This method is a great way to allow a user to search a small area but after much deliberation I figured I would return to my original plan which I shall go through in the follow:
The map (the area the user explores) will scroll along the _x plane at a speed and in a direction based on the position of the users cursor upon the stage.
i.e. If the user places his/her cursor on the far left of the stage then the map will scroll away from that direction, as if the user is searching the map with his mouse.
With this system the user will be able to search a map of any size whereas the previous idea would have made a very large map very touchy and sensitive to navigate.
I shall detail the code I have thus far:
Now, we're assuming we've made a movie clip that is larger in width to that of the stage and that we've named it "city_mc". This is our map. A few things to note before I explain the code. It's good practice to have everything code driven in your production held within a single frame and as rarely as possible within movie clips. This allows for much more precise control over your production and makes it easier to read what's going on. This code is all nestled in my main _root frame. Also, I've tagged my descriptions with "notation" marks. These marks usually look like this "//" . What they do is tell flash to ignore the follow code as it's there for reference and not for flash to use. In this case however I've used the larger notation marks which you can use to bracket larger text together. The "//" only works for a single line whereas "/*" defines an area. The area is defined with /* at the beginning and */ at the end. Just like brackets. If you wish to test this code you can copy and paste it ALL straight into Flash.
One last point, I apologise for my US spelling of the word "center". Flash works with US spelling and it's just something you'll have to ignore.

--------------------------------------------------

city_mc.onEnterFrame = function() {
/*First we target our movie clip which we've named "city_mc". Then we let flash know this is a per frame tick function with "onEnterFrame". Finally we tell flash the following is the function we wish to be executed by opening our statement with the "{" bracket.*/

center = Stage.width/2;
/*The first line of code in this function defines a new variable. A variable is code association. We define for the code a word that means something else. In this case we've told Flash that "center" actually means the "Stage.width/2". Which in short means the word "center" when used within the code actually means; the stage width divided by 2. This is an easy way of finding out the center of the stage and referring to it later./*

if (_root._xmouse<=center) {
/*Our first "if" statement. A statement is a collection of code contained within the curly brackets "{ }". These "if" statements tell flash that the following statement is to only be executed if certain specified conditions are met (that's the bit contained within "( )" brackets) . In this case we're saying "if the _x position of the mouse on the stage is equal to or less than the center of the stage, then you may proceed with the statement". Remember we named "center" as a variable for the center of the stage! Now if the condition is met, then the next line will be executed.*/

if (city_mc._x<=-10) {
/*Here we're making another if statement, this way Flash will have to meet 2 conditions in order to proceed. This statement is to stop the map scrolling further than it should. We don't want the user to just scroll to nothingness. Now all this part of the code is about the mouse being on the left hand hand side of the stage and thus making the map scroll to the right. So here we say: "if the map (city_mc) is positioned on the _x (horizontal) axis less than or equal to position -10 then you may continue". If the conditions are met then the next line is executed.

city_mc._x -= (_xmouse-center)/40;
/*This line instructs that: "the position of the map (city_mc) on the _x axis should be it's current position minus (symbolised by "-=") the following". This effectively will move the map each tick by "(_xmouse-center)/40;" which in short is the _x axis position of the mouse minus the "center" variable and together divided by 40. This results in the map being moved to the right at a speed relative to the distance of the mouse from the center of the stage.*/

}
/*This bracket defines the end of the current if statement, but not the statement this one resides within!*/

if (_root._xmouse>=center) {
/*Now, this is a third if statement. The following code is dedicated to the opposite direction and works in exactly the same way bar a few "numerical and comparison operator" changes. Comparison operators are "<=" and the like, operators that compare properties. */

if (city_mc._x>=-2200) {
/*In order to obtain the _x position of our map that we wish it to not scroll beyond we simply align our maps right hand edge to the right hand side of the stage and copy the number in the _x axis property window for the movie clip. Simple enough. For the left hand we can assume that it will always be 0. However I made i -10. Just to be on the safe side.*/

city_mc._x -= (_xmouse-center)/40;
/*This repeated bit of code will move the map the opposite direction as well since our mouse position will now be into the positives numerically which has the effect of increase when 2 negatives are used. I don't expect you to understand that as neither do I and it took me much trial and error to work it out as well!*/

}
/*This ends the current statement*/

};
/*This ends the entire statement. The code is now complete and because it's a "onEnterFrame" function it will if all goes to plan, just run it again next frame. The ";" marks at the end of the curly bracket tell us that this is the end of a code block.*/

Well now that's the code for the scrolling background. It's quite small and simple enough to understand once you get your head round the basics of action script. I'm going to paste now ALL the code I have. I'm not going to explain it all as there's a lot there and most is completely irrelevant. However I did take the time to add a little notation which might help guide you. Basically in all this code we have several map layers driven, plus some sky and even some rain. On top of this there's some looping ambient music which plays in the background. There's some notation in there that you may not understand, your not supposed to. It's just me saving some un-used code should I need it in the future. The notation marks just means Flash ignores it for the time being. I recommend you paste this code into Flashes action script box so you can read it easier. Thank you.

--------------------------------------------------

stopAllSounds();
/*Attaches and loops the music*/
//create new empty sound object
musicDrone = new Sound(this);
//attach the sound to the empty sound object
musicDrone.attachSound("acz.wav");
//play the sound object. 0 = start possistion and the 999 = the loop times
musicDrone.start(0, 9999);
music = new Sound(this);
music.attachSound("short.wav");
music.start(0, 9999);
/*Create rain*/
//creates a variable with number 0 assigned
rainNum = 0;
//Create a function to run random steam noises
steamNoise = function () {
randomNumber = random(2)+1;
trace(randomNumber);
if (randomNumber == 2) {
steam = new Sound(this);
steam.attachSound("steamLong.wav");
stam.start(0, 1);
}
};
setInterval(steamNoise, 1000);
//Creates the function to follow, called rain
raining = function () {
//incriments the rainNum in integers of 1
rainNum++;
//creates a variable called rain and attaches the raindrop clip to it
var rain = _root.attachMovie("rain_mc", "rain_mc"+rainNum, rainNum);
//places the raindrop in a random location along the width of the stage
rain._x = Math.round(Math.random()*Stage.width);
//gives each raindrop a random transparency
rain._alpha = random(20)+15;
//random speed
rain.speed = random(30)+20;
//random _xscale
rain._xscale = random(80)+20;
//random _yscale
rain._yscale = random(80)+20;
//on each frame the following function will run for the variable objects "rain"
rain.onEnterFrame = function() {
//commands each dropket to move 3 pixels downwards each frame
rain._y += this.speed;
//commands each dropket to move 1 pixels left each frame
rain._x -= 3;
//The following removes the droplet once it leaves our view.
//If we left the raindrops to accumulate without removing them they would slow down the game
//This says, if the _y (height) of the droplet falls below the lowest stage coordinate
if (rain._y>Stage.height) {
//If the previous is true, then the droplet is removed on the next available frame
delete this.onEnterFrame;
this.removeMovieClip();
//This decreases the rainNum count so that the rain doesn't reach a depth that we require other objects to reside on.
}
};
};
setInterval(raining, .1);
/*Scroll top & rear landscape
To reverse the direction the backgrounds scroll switch "-" with "+" and vice versa.
"+" will scroll towards the direction the mouse is sitting on
"-" will scroll the opposite direction to the mouse
The "+30" and "-30" at the end of the if statesments are to give the stage a un-reacting dead zone. Anything 30 pixels left or right (60 pxl spread) of the center will have any effect*/
city_mc.onEnterFrame = function() {
trace(city_mc._width);
//This is the work out the exact center of the stage. Stage width could be anything
center = Stage.width/2;
//Scroll right (mouse on left)
if (_root._xmouse<=center) {
if (city_mc._x<=-10) {
sky_mc._x -= (_xmouse-center)/100;
city_mc._x -= (_xmouse-center)/40;
city2_mc._x -= (_xmouse-center)/45;
city3_mc._x -= (_xmouse-center)/50;
city4_mc._x -= (_xmouse-center)/55;
} else {
trace(city_mc._x);
}
}
//Scroll left (mouse on right)
if (_root._xmouse>center) {
if (city_mc._x>=-2200) {
sky_mc._x -= (_xmouse-center)/100;
city_mc._x -= (_xmouse-center)/40;
city2_mc._x -= (_xmouse-center)/45;
city3_mc._x -= (_xmouse-center)/50;
city4_mc._x -= (_xmouse-center)/55;
} else {
trace(city_mc._x);
}
}
};
//This stops play on this frame
stop();
/*fscommands are used to control the window and some limited OS features*/
//This turns the flash screen into a fullscreen
//fscommand("fullscreen", "true");
/*Attaches and loops the music*/
//create new empty sound object
//musicDrone = new Sound(this);
//attach the sound to the empty sound object
//musicDrone.attachSound("introBassBoost.wav");
//play the sound object. 0 = start possistion and the 999 = the loop times
/*musicDrone.start(0, 9999);
_root.start_btn.onRelease = function() {
gotoAndStop(3);
};
stop();*/

--------------------------------------------------