In this tutorial you will learn how to save data in flash through a small touch tag game for the Cowon s9. I will assume throughout the tutorial that you know the basics of flash. If not, there are plenty of flash tutorial sites available with a simple search. I will be using Flash Professional CS3 so there will be some minor graphical difference, but the concept will be the same as well as the code.
If you only need to see the example source file, then you can download it here.
Otherwise, you can follow along through this tutorial and begin creating a game that utilizes Shared Objects – the means to save data with your Cowon s9.
Prerequisites
You will need a Flash IDE program that is able to author Actionscript 2.0 Any Flash IDE from Flash MX and above will work. You can purchase or try the latest version of flash CS4 here.
The Setup
1. Create a new flash document with AS 2.0 and change the size to 480 x 272.
Note: It is crucial that you open the flash document in AS2.0 because the Cowon s9 will not be able to read AS3.0 flash files and AS1.0 will not be able to save data.
2. We will also need to set the FPS (Frames per second) to 24.
3. On “Layer 1″, relabel it to “actions” and lock the layer.
4. Create three additional layers and label them accordingly: frame label (locked), text, object.
Note: While not crucial to lock the frame label and/or the actions layer it is a good programming habit.
5. We will need 4 frames total to cover for the following games states: initialization, main menu, play game state, end state.
6. Name the last frame of the frame label layer with “gameover” and the third frame with “game”
We are done setting up the scene. If you are lost, or would like to start with the file I have created so far you can download it here.
The Objects.
The next portion will focus on the objects you will be interacting with.
7. On the second frame of the Object Layer, add a button. You can do this manually, or you can add a common library button.
Windows >> Common Libraries >> Buttons
8. Add a dynamic text field on the Text Layer with a variable name of “highscore”
9. Add any text or decoration you feel fitting for a title/menu screen.
9. On the the third frame in the Object Layer, Create a circle with Oval Tool with size of 100 x 100 and place it somewhere on the canvas.
10. Convert the circle you have just made to a Movie Clip instance by
Double Click on it to select it
Press F8 and choose “Movie Clip” under Behavior radio button
Click OK
11. Give the new Movie Clip the instance name of “ball”
12. Create three new dynamic text on the Text Layer with the variable names of “timer”, “score”, “highscore”. Place them where you want them listed. Remember to add static texts to label what each dynamic text represents.
13. Lastly, on the last frame ( the game over screen) of the Object Layer, add another button.
14. Add one last dynamic text labeled “score”.
15. Finish the Game Over screen by decorating it to your will.
We are done setting up the visual scene. If you are lost, or would like to start with the file I have created so far you can download it here.
The Code.
This is what allows flash to save data.
16. Open up the Actions window by pressing F9 on the “actions” layer of the first frame and insert the following code:
score_record = SharedObject.getLocal(“name_of_file”);
if (score_record.data.highscore == undefined){
highscore = 0;
} else {
highscore = score_record.data.highscore;
}
5. Let’s see what this does:
score_record = SharedObject.getLocal(“name_of_file”);
// Replace “name_of_file” to the filename you choose for the Shared Object.
// The variable “score_record” is the name for the data stored.
highscore = 0;
// if no highscore has been defined, it will be initialized to 0.
highscore = score_record.data.highscore;
// if a highscore has been defined, it will be set to the saved highscore.
16. On the second frame insert the following code:
stop();
var score:Number = 0;
var initial_timer:Number = 120;
var timer:Number = initial_timer;
17. Let’s see what this does:
var score:Number = 0;
// The score is initially set to 0.
var initial_timer:Number = 120;
// We set the initial timer to 10 seconds.
// In this example we have 120 because we have 24 fps. eg: 24 fps * 5 sec = 120.
var timer:Number = initial_timer;
// We then set the timer to the initial timer.
18. On the third frame insert the following code:
stop();
onEnterFrame = function(){
_root.timer-=1;
if (score > highscore){
highscore = score;
}
if(timer < 0 ){
gotoAndStop(“gameover”);
}
}
ball.onLoad = function(){
this._x = random(480-this._width)+this._width/2;
this._y = random(272-this._height)+this._height/2;
}
ball.onPress = function(){
_root.score+=1;
_root.timer += 5;
this._x = random(480-this._width)+this._width/2;
this._y = random(272-this._height)+this._height/2;
}
19. Add the following code to the button on the Object Layer :
on(release){
_root.gotoAndPlay(“game”);
}
20. Let’s see what this does:
// onEnterFrame is our main loop
onEnterFrame = function(){
// The variable timer looses one every loop.
_root.timer-=1;
// If the player reaches a score that is greater than the current highscore,
// the highscore will be replaced with the current score.
if (score > highscore){
highscore = score;
}
// If the timer is less than 0 the game will end to the “gameover” framelabel.
if(timer < 0 ){
gotoAndStop(“gameover”);
}
}
ball.onLoad = function(){
/*
To randomize the ball’s next location we have this code:
We first randomize the value of the screen size minus the ball’s height.
We then add it’s radius to create a offset from the center.
The same principal is done for the height.
*/
this._x = random(480-this._width)+this._width/2;
this._y = random(272-this._height)+this._height/2;
}
// This function activates whenever the ball movieclip is pressed.
ball.onPress = function(){
// score is incremented by one for every successful click.
_root.score+=1;
// A bonus time of 5 is given for a successful press.
_root.timer += 5;
/*
To randomize the ball’s next location we have this code:
We first randomize the value of the screen size minus the ball’s height.
We then add it’s radius to create a offset from the center.
The same principal is done for the height.
*/
this._x = random(480-this._width)+this._width/2;
this._y = random(272-this._height)+this._height/2;
}
21. On the fourth frame insert the following code:
stop();
if (score>=highscore) {
score_record.data.highscore = score;
score_record.flush();
}
22. Let’s see what this does:
// A record is set!
if (score>=highscore) {
// We now set the score to the highscore variable.
score_record.data.highscore = score;
// The score is saved to the Shared Object.
score_record.flush();
}
23. Finally add the following code to the button on the Object Layer.
on(release){
_root.score = 0;
_root.timer = _root.initial_timer;
_root.gotoAndPlay(“game”);
}
24. Believe it or not, you are finished. If you did everything right, after testing your movie (ctrl+Enter) you should be able to save your new game. If you are lost, or would like to start with the file I have created so far you can download it here.
If you have any questions, thoughts, suggestions and/or comments, feel free to post them here. If there is an error in my post feel free to point them out as well.
