Very often web games use server side interaction to achieve a number of features like high score registration, profile updates, etc...
The latest Flash MX has introduced a new Object type called LoadVars() that simplify the exchange of data between client and server.
DickDynamite uses a lot of this interaction to load and update user profiles, and the LevelEditor is also heavily based on
server side data exchange to save, load and manage map data.
In this tutorial we will show the basics of this common practice using PHP as the server side language: PHP is an open source powerful and multiplatform scripting language, you may learn more about it HERE.
The techniques shown in this article can be used also to interact with other application servers, based on other languages such as ASP .NET, JSP , ColdFusion ...
To show you how the LoadVars works, it is better to start with a basic example:
myVars = new LoadVars()
myVars.onLoad = function(success)
{
if (success)
{
trace (myVars.score)
trace (myVars.lives)
}
else
{
trace("Ouch, a server error occured")
}
}
myVars.load("myDir/myScript.php");
I am sure that this code is self explicatory !
Basically 3 things are going on here:
1) create a new LoadVars() object
2) define a function that will handle the Load event
3) call the Load() method.
Let's have a look in detail to all three steps:
1) The LoadVars() object is created with the "new" keyword. The new object is empty.
2) The load event is fired when the response from the server is received on the client. When this happens the code specified in the function block will be executed.
The success parameter is a boolean value returned by the load method. If the variables were successfully loaded then success will be TRUE, so by checking its value you can determine wheter the data was loaded or not.
The 2 properties that are shown by the trace command are the names of the variables returned by the server side script.
This means that all variables we are loading from an external source will be found in the loadVars() object as properties with the same name.
3) The load() method is then called, passing as a parameter the relative path of the script you wish to call.
(Alternatively you can pass an absolute URL, but loading external data in a domain other than the on in which is the movie clip is in , is not permitted for security reasons)
On the PHP side, things are pretty simple, since the way to return data to Flash is a querystring just like Flash 5: basically to return the 2 variables to the Flash movie you can output something like "score=5000&lives=3".
This can be done in PHP with something like this:
<?
$score = 5000;
$lives = 3;
echo "score=$score&lives=$lives";
?>
Variables are sent back to Flash using value pairs like name=value, concatenated with the & symbol, where the first is the name of the variable and the second, it's value.
In real life this data could have been extracted from a database and furtherly elaborated before being sent to the client movieclip, but for the sake of sempliciy we just return the querystring.
There's another useful method in the LoadVar object called SendAndLoad() which let you exchange data with the server in a bi-directional way. Here's an example :
// create load object
loadObj = new LoadVars()
// create send object
sendObj = new LoadVars()
// these are the vars the are going to be sent
sendObj.score = _globals.score;
sendObj.lives = _globals.lives;
// handle load event
loadObj.onLoad = function(success)
{
if ((success) && (this.res == "ok"))
{
trace("Data saved successfully")
}
else
{
trace("Ouch, a server error occured")
}
}
// Send and Load data
sendObj.sendAndload("myDir/myScript.php",loadObj,"post");
This snippet of code could be used when you are at the end of the game and you need to update the user's profile: save the score and the number of lives remaning.
Here we create 2 loadVars objects, one for sending data and one for receiving the server response.
Next we create two new properties (score, lives) in the sendObj: these are the two variables the will be sent to the PHP script (here we pretend that _globals.score and _globals.lives were previously initialized)
Then we write a simple function that is going to be executed when the onLoad event is fired: we check that success is TRUE and we assume that server will send back a string variable called res with the value "ok".
NOT ONLY DATABASES...
We have seen how flash interacts with dynamically generated data on ther server side, but sometimes things are even simpler.
For example you may want to load a bunch of external parameters (some sort of configuration file) without using any complicated
server side stuff.
In this case you can use a plain text file that contains a list of var names/values (as we did before) and you can put it in the same
folder with your SWF.
The code for this operation is exactly the same as we did for the PHP example :
myVars.load("mydatafile.txt")
CONCLUSIONS
Dynamic data loading with Flash is pretty straightforward and independent of the server platform.
The growth of data-driven Flash applications and games demonstrates that Flash is getting better in this field.
Anyway we didn't cover all the aspects of data exchange as we should also talk about XML and the way that Flash interacts with it.
Stay tuned, as we will have articles coming on these arguments. |