Flash Tutorial Links:
Play Games: HTML5 Tutorials:

How To Make A Simple Flash Game

A catcher kind of game is probably the easiest flash game you should start developing on this learning journey. Every flash gaming site you go to, I'm pretty sure you can find a similar kind of [insert object here]-is falling-from-the-sky-and-you-need-to-catch-it kind of game.

Apple Catcher game

This will be the first flash game tutorial that we'll learn with. The game is simple to make and I'll use it to highlight some basic fundamentals and show you the framework to follow when making a flash game.

Game Scenario

The scenario of this flash game tutorial is simple. It's harvest time for the famous Red Apples! Jovia (the blue creature) loves eating apples and the enchanted forest he lives in is full of them. During harvest time, they fall onto the ground in large amounts. Unfortunately, their tender apple skin provides little protection when they fall, and they splatter into pieces upon contact with the forest bed.

Help Jovia snack on them before they drop to the ground. It always tastes better crunching on an entire apple for Jovia!

Game Details

  1. Jovia follows the movement of the player's mouse cursor
  2. Each apple drops randomly with a constant speed from the top
  3. Each apple disappears when they touch the ground
  4. Each apple that Jovia eats earn the player 10 points

Download the Game Files

The files you need to create this game can be downloaded from here.

Step 1 - Managing your FLA file

I would always start off with the fla file, because it sets the stage for the game. In this simple flash game tutorial, we just need 1 frame for the entire game. Eventually, we'll move on to a more complex setup than this by using more frames... but let's leave that to another day.

Although we will only use 1 frame, I like to use different layers to keep track of my game assets. Here is my recommended setup. If you check out other flash game tutorials, they all tend to be a little haphazard in the game structure. There are tons of flash game tutorials here, and I will code in a very similar fashion, so you can expect a great deal of consistency.

flafile

The 3 layers UI, Contents and Background are self-explanatory. Use them to layer your different game assets. In a more complex game environment, you may want to handle all these aspects in your game files directly. Since these are fairly simple games that we're writing here, this framework allows you to get things done fast.

In this short flash game tutorial, the UI layer contains a TextField which we will use for displaying of the score to the player. We set the name of this textfield as txtScore. Later on, the flash game will reference this textfield to reflect the latest score to the player.

The Contents layer stores the mcGameStage where the flash game will take place. Notice that we're using this separate MovieClip called mcGameStage to let all the action take place. In a way, you'll see the benefits later on where we need to scroll things, or remove the game elementas totally. It will work better than if you were to load everything onto the stage itself. The Background layer stores a simple background behind the game's stage.

The AS layer contains all the actionscript you need in that frame. There shouldn't be any movieclips or art assets placed here, and keep the Actionscript simple here; remember that we already have the GameController.as taking care of the complex game logic for us.

And truly, these are the code that we need to put in that frame only.

flafile2

"What?", you may say. Only 1 line of code? Yup. This is the only line of code you need to put into your FLA file for now. It calls the function startGame which we'll define later on in the GameController.as file. Just a caution again, that if you're unfamiliar with AS3 coding, please pick up a book and learn it first. You do not need to be an expert at it, but basic familiarity with the syntax is required.

Take a look at your library assets now. You should see the following assets.

libraryassets

I'm never a fan of managing library assets using the Flash IDE, and this is one area where I hope Adobe can improve in. Organising these assets can be quite a pain, especially when the flash game is huge. CS4 made it a little easier by allowing you to search. To facilitate your keeping track of the flash game assets, I recommend you use a folder structure, and number them accordingly so that the folders will always be in the sequence you wanted them to be at.

Keep the raw png or jpeg files in a separate folder ( I call it 00.RAW ). Your main interaction in the game will be with the movieclips and sprites. As you can see, there are 3 movieclips now, GameStage, Apple and Jovia herself. To be able to add Jovia and Apple objects into the game dynamically, you need to make it into a class. Fortunately, you do not have to write the codes for all classes. Flash defaults it if it is unable to find a class file written by you for that movieclip. In this case, the default ones will suffice.

Right click on Jovia, and choose Properties. Under the Linkage portion, you should set the following.

linkage

By setting Jovia as the name of the class, you can subsequently create a Jovia object by instantiating it in your actionscript (you'll see it below in GameController.as) Set the base class as flash.display.Movieclip. This way, Jovia will inherit the properties of a movieclip in Flash.

Likewise, do the same for the Apple MovieClip. There is no need to create the Linkage for GameStage since we will be dragging it directly onto the Stage during design time instead of runtime.

Step 2 - Setting initial values in your GameController.as

Once you are done with the FLA file, let's focus on the GameController.as. Like I said, this is the soul of your game. Remember to check that you have set the Document class of your FLA file to point to the GameController.as file.

document class

We'll be doing most of our ActionScript coding in the GameController.as. If you need an explanation for lines 1 to 38 where we import modules in and set the variables, please head over to the tutorial on Game Framework where I explain those in greater details. Otherwise, in each tutorial, we'll focus solely on the code that makes each particular game work and not spend too much time revisiting those concepts.

Now, if you look at line 40 to 43, you'll see that the constructor is actually empty. There'll be cases where we probably have to fill the constructor up with some code, but in this case, it isn't necessary. But because in Object Oriented Programming, the constructor function is such an important function, I'll just leave it here in case seasoned programmers start to wonder what happened to it.

40
41
42
43
public function GameController()
{
    
}

The startGame function is where you initialize all the variables and game states that your game should be defaulted to. Recall that this is the single line of code we placed in the action layer in our FLA file. That line of code actually triggers this function here.

45
46
47
48
49
50
51
52
53
54
55
public function startGame()
{
    speed = C.PLAYER_SPEED;
    gravity = C.GRAVITY;
    score = C.PLAYER_START_SCORE;
    randomChance = C.APPLE_SPAWN_CHANCE;
    apples = new Array();
    player = new Jovia();
    mcGameStage.addChild(player);    
    mcGameStage.addEventListener(Event.ENTER_FRAME,update);
}

You can see that this is where I use values from the constants file, C.as extensively. As we discussed earlier on, we could have very well used speed = 5 instead of speed = C.PLAYER_SPEED in line 47. But using constant values is a good practice that you should cultivate. It enables you to change game mechanics easily without having to search through and fiddle with your code too much. This flash game tutorial, as well as most of my others, will make use of this concept extensively.

In line 52, we create a Jovia object, which is the player controlled character. Recall earlier on that although we didn't write the class for Jovia, we have used the default Flash class file for it by setting it in the linkage. But simply by creating it in line 52 will not cause Jovia to appear at all. It still creates it and places it on the stage, but it will not be visible to the player.

Line 53 is where we add the player object onto the mcGameStage (which is the MovieClip on stage where all the game action will take place). Only with this will Jovia appear visible to the player when you run the game.

Line 54 is where you set the function, update, to run as many times as specified by the fps of your FLA file. Hence, the update function is essentially your game loop.

Step 3 - The Game Loop, Handling User Controls

Earlier on, we talked about the game loop, and that it has 3 key elements to it. These elements are user control, game logic and display.

We'll take a look at how to handle the user control first. Recall that this function update will run as many times a second as you have set previously as the fps of your FLA file.

57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
78
79
80
81
82
private function update(evt:Event)
{
    //******************			
    //Handle User Input
    //******************
    var currMouseX = mouseX;
    var currMouseY = mouseY;
    var moveX = 0;
    var moveY = 0;
    if (currMouseX > player.x)
    {
        moveX = 1;
    }
    else if (currMouseX < player.x)
    {
        moveX = -1;
    }
    if (currMouseY > player.y)
    {
        moveY = 1;				
    }
    else if (currMouseY < player.y)
    {
        moveY = -1;				
    }

This game is purely playable using the mouse, so all you need are mouseX and mouseY which will track your mouse's x and y coordinates on screen. The Flash runtime provides values for the x and y coordinates through these two variables, mouseX and mouseY. We assign them to our own variables, currMouseX and currMouseY which we'll use later on for the rest of the codes.

The logic in the code above is straightforward. moveX and moveY are two variables which we'll use later in the game to track the motion of the player. If moveX is 1, it means that the player should be moving to the right by 1 pixel. If moveX is -1, it means the player should be moving to the left by 1 pixel. Likewise, moveY tracks the movement in the y direction, but do note that for y is actually positive in the downward direction. A value of 1 for moveY moves the player down by 1 pixel.

Line 64 and 65 initializes moveX and moveY to zero first, so that by default, no movement is detected. Line 66 then checks if the mouse position is on the right of Jovia. If it is true, moveX is set to 1, indicating that Jovia should move towards the right.

Line 74 to 82 handles the same movement in the y-axis.

Notice that in this chunk of code, the player does not actually move. This is the purpose of dividing up the game loop into these 3 distinct portions. The code here merely captures the user input. It is up to the next portion which handles the game logic to process these inputs, and react accordingly. If you need some reasons why, you can think of a situation whereby the player is actually trapped and is unable to move. So even though we capture the user input that the player wants to move, when we handle the game logic, we should refuse this motion.

So that's it! That's all the user input that we're going to allow for the game now. In subsequent tutorials, I'll show how key input can be captured.

Step 4 - The Game Loop, Handling Game Logic

Next, let's move on to code for the game logic. Remember that this is essentially the most important part of your game as it crunches the game numbers and churns out the new game state based on all factors in the game. If the coding is not done well here, it could potentially cause unbearable lagging in your game.

After obtaining the user input, we update Jovia's new position.

83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
//******************
//Handle Game Logic
//******************
//Handle new Player Position
if (moveX > 0)
{
    if (player.x + C.PLAYER_SPEED <= currMouseX)
        player.x += C.PLAYER_SPEED;
}
else if (moveX < 0)
{
    if (player.x - C.PLAYER_SPEED > currMouseX)
        player.x -= C.PLAYER_SPEED;
}
if (moveY > 0)
{
    if (player.y + C.PLAYER_SPEED <= currMouseY)
        player.y += C.PLAYER_SPEED;
}
else if (moveY < 0)
{
    if (player.y - C.PLAYER_SPEED > currMouseY)
        player.y -= C.PLAYER_SPEED;	
}

You can see that based on the moveX and moveY values we set earlier on when we handled the user's input, we update the position of Jovia accordingly. Notice that an additional check is done in lines 89, 94, 99, 104, without which, Jovia will be dancing around your mouse position, which is pretty unsightly. You can try commenting them off to see what happens. By changing the .y and .x properties of the player, we move it around the stage.

Next, we will spawn the apples randomly.

107
108
109
110
111
112
113
114
115
116
117
//Spawn new apples
if (Math.random() < randomChance)
{
    var newApple = new Apple();
    newApple.x = Math.random() * C.APPLE_SPAWN_END_X+C.APPLE_SPAWN_START_X;
    
    newApple.y = C.APPLE_START_Y;
    apples.push(newApple);
    
    mcGameStage.addChildAt(newApple,0);
}

Line 108 first makes a check based on a randomChance you specified earlier on in C.as, the constants file, because Math.random() returns you a number from 0 (inclusive) to 1 (exclusive). If the probability of spawning happens, we just instantiate a new apple by using new Apple() in Line 110. Recall that this is possible because we set the Linkage of the Apple Movieclip earlier on. We then set its respective x and y locations to a random starting x position, but a fixed y position.

In Line 114, we push each newly created apple into an array called apples. We keep track of each apple so that it's easier to keep track of, and interact with them in the game. But remember that instantiating an object or pushing it into an array will not cause it to appear on the stage at all. The player will still not be able to see them, although technically, the game is still interacting with them. To make them show up on the game stage, remember to include Line 116. mcGameStage.addChildAt(newApple,0) will insert the apple at depth 0, which is the bottommost depth. This will ensure that Jovia is always on top on the apples that are falling.

So far so good ... with these code, the apples should be randomly created, but they would all be floating in the air. We need to add in the game logic to pull them onto the ground using simulated gravity.

118
119
120
121
122
123
124
125
126
127
128
//Move Apples
for (var i = apples.length-1; i >= 0; i--)
{
    apples[i].y += gravity;
    
    if (apples[i].y > C.APPLE_END_Y)
    {
        mcGameStage.removeChild(apples[i]);
        apples.splice(i,1);
    }
}

This is one of the main reasons why we added each apple into the array apples just now. We can now easily iterate through the apples array to reference each of the apples that has been created so far. We move each of the apples down by as many pixels as the gravity which we specified in Line 121.

We do not want the apples to keep falling indefinitely, so Lines 123 to 127 will check if the apples have fallen onto the ground and if so, remove them from the game so that the user cannot see them by using the removeChild function in Line 125. Since we do not want to be dealing with that apple anymore (hey! it's contaminated after it touches the ground and Jovia is smart enough to avoid it), remember to remove it from the array apples using the splice function in Line 126.

Over here, we're simulating the game based on a flat gravity, where the apples fall with a fixed velocity. With some code improvements, we'll be able to modify it to move faster as it falls.

Also, notice how we did the for loop in line 119. We start off with the last element in the array, and loop all the way to the first. This is IMPORTANT ! Because we may splice off an apple from within the loop (line 126), we mess up the array index reference if we were to loop through the array from the front. So remember that for such for loops, we always loop from the back.

And now, the last part is to make Jovia interact with the apples ... finally!

130
131
132
133
134
135
136
137
138
139
140
141
142
143
//Check for collision
var playerPoint = new Point(player.x, player.y);
for (var i = apples.length-1; i >= 0; i--)
{
    var applePoint:Point = new Point(apples[i].x, apples[i].y);
    if (Point.distance(applePoint,playerPoint) < C.HIT_TOLERANCE)
    {
        //Register hit
        score += C.SCORE_PER_APPLE;
        
        mcGameStage.removeChild(apples[i]);
        apples.splice(i,1);
    }
}

The good thing about making the player's position into a Point object is because Flash provides the API to calculate the distance between 2 points. In line 131, we create a new point based on Jovia's current position.

I know that many other flash game tutorials out there suggest using hitTestObject function to check if two MovieClips are touching each other. My feel is that the hitTestObject operation lacks control because it checks based on the bounding box. We could otherwise use the hitTestPoint to do the job, but again we either do not require the pixel perfect accuracy it provides or it lacks the kind of control I would want to have in this case. I prefer using the distance function provided in the Point class to get the distance between 2 points (here, the points are the two centres of the apple, and the player), and then comparing if it is lesser than a certain tolerance level.

distance

The diagram above shows you graphically what is happening in line 135. It makes sense to check that if the point to point distance is less than the tolerance level (exaggerated a little in the diagram so that it's easier to visualize). If so, then we consider Jovia as having touched the apple.

So, in the event that a collision occurs, we add a score to the player in line 138. Line 140 removes the apple visually from the stage, and line 141 removes the reference to the apple from our array such that it no longer updates. Eventually, the garbage collection in Flash will remove it totally.

Step 5 - The Game Loop, Handling Display

And finally, the third key element in the game loop would be to display all the necessary information to the player. We should avoid further game changing computations here, and focus mainly on updating the UI display or animations if need be.

145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
//******************
//Handle Display
//******************
//Animate the player
if (moveX > 0)
{
    if (player.currentLabel != C.JOVIA_RIGHT)
        player.gotoAndPlay(C.JOVIA_RIGHT);
}
else if (moveX < 0)
{
    if (player.currentLabel != C.JOVIA_LEFT)
        player.gotoAndPlay(C.JOVIA_LEFT);
}
//Display new Score
txtScore.text = String(score);

Lines 149 to 158 handles the part to animate Jovia into flapping her wings. moveX was set earlier on in the handling of user input. The additional if conditions in line 151 and 156 are checks to see if the animation of Jovia flapping her wings in the respective-facing direction is already playing. If it isn't, then that animation is activated. If these lines were missing, Jovia would look like a video disc that is stuck while playing (as usual, you can comment it off to see the effect).

The line 160 updates the text field in the UI to reflect the latest score. Notice the casting into a String object we have to do on the score variable. This is because score is declared as a Number earlier on, but txtScore.text expects a String.

The Game

And this is the very first game you have created. I hope you see from this flash game tutorial how easy it is to make a simple flash game.

Download the Game Files

The files you need to create this game can be downloaded from here.

How To Play

Objective: Eat all the falling apples.

Controls: Move your mouse cursor to make Jovia follow it.


Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Flash Resources
Preloader FPS Display Sounds & Music
Keycodes Name Generator
Game Development Resources
Sprite Sheets


Posted by Joseph

on 2014-12-04 23:13:39

@Alkis: Need to differentiate a Class from an instance name. GameStage is the class name. mcGameStage is the instance name given to the particular one I put on the stage.


Posted by Joseph

on 2014-12-04 23:12:07

GameStage in my case is just a rectangle, with alpha 0, and converted into a movie clip. =)


Posted by Joseph

on 2014-12-04 23:11:27

Ensure that your GameController.as file is linked to the FLA. Lookout for Document Class.


Posted by B

on 2014-11-16 07:32:56

I followed all the instructions and keep getting 1180 undefined method startgame


Posted by michal

on 2014-10-22 14:54:35

Hi,

I would like to know how to create Contents in .FLA file. Can you please tell me how to create GameStage?

Thank you very much :)


Posted by Shirley

on 2014-10-02 00:17:55

Hello there,

Thank you for your useful tutorial. I am wondering if you can help me over a few things.

1. How can I replace another image with apple in actionscript? Do I need to make up new word for 'apples'? ie oils?

2. Could you advise how can I add the timer? Perhaps a min or 2 mins to do that.

3. I may miss some part or something, how can I put the game to 'game over' when apples are failed to be saved 5 times? Could you give me the actionscript?

It would be greatly appreciated if you can help asap :)


Posted by Alkis

on 2014-09-27 00:42:56

Hi, I've been following your tutorials and they are great.Well done.I've read all them until Whack A Snowman.
And this question emerges that I can't explain myself.
Variable mcGameStage is supposed to be refer GameStage, the stage you create in the library right?
If so,how are they linked, since one is called mcGameStage and the other GameStage?
I really can't seem to figure that out.


Posted by Bala

on 2014-09-15 12:51:43

very nice i can understanding the game.
**thank**


Posted by Ethan

on 2014-08-06 21:50:04

Hi I've been following your tutorials and so far they have been really helpful but there is one thing I don't quite get. I'm not sure how you are creating the mcGameStage.


Posted by Mein

on 2014-08-03 17:40:22

Can I use this tutorial for Flash CC as well?


Posted by Nic

on 2014-08-03 16:21:56

Really love the tutorials here! Can I do this step-by-step tutorial (as well as the others) on Flash CC as well?


Posted by Banskel

on 2014-07-25 10:12:16

Hi, when I run the game in flash it works but the character and the spawn location of the apples are shifted about 300 pixels to the left and 200 pixels down. So the Jovia does not really follow the mouse. I tried to create the game from ground up and the same thing is happening.


Posted by prince

on 2014-06-30 22:05:24

excellent


Posted by Elsa7

on 2014-06-10 04:24:52

I am receiving an error message as well on line 132. You stated :” You might have recompiled the FLA with CS5 and above.” in a previous post. I am using Flash CC so I am to assume from your comment it is because I am using a newer version?

Thanks,

Elsa7


Posted by Anika

on 2014-05-23 23:46:09

Hi, I'm an undergraduate student of CSE. It may sound silly but I think I can make this game as my project for my graduation. All I need, is some information about it like which software is needed to open these given files like fla, as or frame and where do I have to write the codes. And please tell in detail because my skill is very poor. Regards.


Posted by Boyko

on 2014-05-22 03:42:49

Hi Joseph,
I do really like your site, it's amazing and i have lernt a lot. But i need some help. I would be very happy if you can help me. I download the files(for that game) and i make some changes, the objekts are diferent, the screen also.... and here is the problem I want make a timer. You have 2mins to play then the game stops and just show you the score. I know mby it's very easy to make it, but i can't. I read the others "How to make.." but it's just not working :/ . I will be very very happy if you can say, show me or teach me how to make it.
Thank you very much, Boyko


Posted by Joseph

on 2014-05-08 22:05:59

@Nitin:

1. If you run the swf, that's what you'll get. You can do a Publish, and you'll get the the html file that will embed the swf.

2. For adding the play button, you can look at some of the later tutorials, like Frogger, Memory, etc.


Posted by Joseph

on 2014-05-08 22:03:51

@ Ozer: Good catch! Haha, I think I did not use the Idle frames.


Posted by Özer

on 2014-05-06 06:29:18

Thanks a lot for this usefull tutorial and this excellent site.
Although my english and my programming info are poor, i understood this tutorial very well.

I have only one question: Where were we use idle frames of Jovia on the stage? I saw only named as left and named as right frames we used on the stage.

Notice: English isn’t my first language, so please excuse any mistakes.


Posted by Nitin

on 2014-04-29 03:35:50

hi,I followed your advice and the game is now working with all the enhancement i wanted.Thanks for the replies.

some questions about this game :

1.The shockwave file is running on the whole browser instead in a window like your game is running.how to make that possible?

2.How did you add the play button in the starting of your game ?on clicking which the game started.

And sorry for bothering you about Photoshop question.I figured it out and now pics are without borders :)


Posted by Joseph

on 2014-04-27 22:48:35

@Nitin:
1) You can use Mouse.hide() to hide the mouse pointer.
2) Use a png file where the sides are transparent.
3) If you want Jovia to move with the mouse cursor instantly, you can use
player.x = mouseX;
player.y = mouseY;


Posted by Joseph

on 2014-04-27 22:45:46

@F66: Don't worry about the warnings, it's because we re-used variable names.
You can go to the library and double-click into your movie clip. The cross hair should show. The cross hair is the coordinates of the movie clip.

Not too sure about the falling apples


Posted by Joseph

on 2014-04-27 22:43:25

@Hawkar: Warnings are not errors, it's fine. You might have recompiled the FLA with CS5 and above. Remember to embed the fonts. Scroll down the comments given here on how to do that.


Posted by hawkar

on 2014-04-21 04:29:24

Hi I have downloaded this game but there was a Warning in line 132
and also its not counting the score, how to be Solved ????


Posted by Nitin

on 2014-04-19 00:33:13

Thank you for your fast reply.I corrected some code and now its running properly.I have some questions for updating the game :
1. how to disappear the mouse pointer when it comes to screen window ?

2.I have placed photo of a mango instead the apple but the photo is showing in square format i.e its showing some white space in the sides.I want just mango to appear not the white space around it like you have done with apple.how to do that?

3.how to write the code so that the Jovia reacts instantaneously to the cursor movement?Right now its moving after the mouse is ahead it,i want it to move with the mouse.

Thanks a ton for your help first reply and this tutorial.
helped a lot :)


Posted by F66

on 2014-04-18 23:34:12

Hi,

Thanks for the tutorial. Really helped a lot. But I'm having the same problem as Lindzsay as my movie clip doesn't line up with the cursor. How do I check for the crosshair position of my movieclip?

Also, I'm not getting any apples falling either. I'm getting an error saying 'Warning 3596: Duplicate variable definition'. How do I resolve this?

Thanks!


Posted by Joseph

on 2014-04-18 14:16:32

@Nitin,

the movement happens in Line 87 - 106.

The reason why we did not need up and down is because Jovia is going to look the same when it is moving up and down. Left and Right is different because we need to swap the facing.


Posted by Joseph

on 2014-04-18 14:12:55

Shahrukh, it's because you did not add in the fonts.
What you can also do is to select that text field, and go to the properties. You should see something like Use Device Fonts as one of the options (as opposed to anti alias, etc).

Select that. =)


Posted by Nitin

on 2014-04-16 03:29:16

hi,i have have a question.in C(constant.as) file you have mentioned Jovia_right ="right" and Jovia_left="left" ,they are for left and right movement.But where did you write code gfor up and down movement?, how did you manage to move up and down without writing the code for it ?
I made some changes like a bucket in place of jovia but did not make any change in code(changed class jovia to bucket ofcourse) and i can only move right and down.Can you please help.


Posted by shahrukh

on 2014-04-11 04:12:42

hi bro,
i download your game file. it's very nice game but it's scoring function not working. i run your game in flash cs6
but your game scoring function didn't work . please help me kindly. waiting for your kind reply thanks
shaharukh
shahrukhnewton@gmail.com


Posted by Brit

on 2014-04-11 02:53:42

Hi!

I love this! I'm going to start working on making a flash game of my own with this function soon!

My only question is, what scripts would be added where if the player wanted to "END" the game, or if I, as the game developer, wanted to add a timer?

Thanks!


Posted by Shiva

on 2014-04-10 21:08:53

Hi

NIce tutorial thank you!!!

can you please suggest on adding 1 min timer to this

Thanks


Posted by syazwan

on 2014-04-01 12:15:36

Awesome tutorial! Thanks a bunch!


Posted by thanas

on 2014-03-17 03:03:14

Hi I have a question


Posted by J.S.

on 2014-03-09 11:26:38

Awesome tutorial! Thanks a bunch!


Posted by jeffrey

on 2014-03-02 12:36:06

thanks...


Posted by Joseph

on 2014-03-01 21:35:57

Double click into the Jovia movie clip from the library. The timeline should change to that of Jovia the bird, and you'll see the right, left and idle frames.


Posted by Florencia

on 2014-02-28 00:10:10

Hi! How did you do the animation part? Could you explain that part with more details? please!
I read the comments but still don't get it, my MovieClip Jovia doesn't have the "right", "left" and "idle" frames.
There's a way to make the frames automatically?
Thanks!


Posted by Joseph

on 2014-02-09 22:46:45

@LindzSay: Check that the crosshair for your own image is positioned exactly at the centre. When you are using .x and .y properties, they actually refer to that crosshair of the image.

This is also why your image moves off-screen.


Posted by Gamey the Geemer

on 2014-02-02 13:18:09

I am going to start working on making games tomorrow.

The only things I'm planning on changing to this is the graphics in every regard, and add a 5 point deduction for dropped apples.


Posted by LindzSay

on 2014-01-30 04:34:11

Great tutorial!! I'm practicing making games with your code and it has helped me so much. Thanks!!
I do have a couple of questions. I'm using a different image instead of Jovia, but set it up the same way. The game is running great except that my mouse cursor is completely off. It doesn't align with my movie clip. The cursor is a couple of inches away from the movie clip so this causes a problem when moving it. Also, my movie clip moves off-screen. Any ideas why the cursor is off and why it moves off-screen?


Posted by timothycool01

on 2014-01-18 12:26:54

this well be cool


Posted by Farhan

on 2013-12-24 20:32:09

First thing i m thinking about is to first become enough good developer to develop games in C console as currently i have project to develop a archer game, game idea is my choice....then i will move towards graphic site...which is flash games...i think this is best for me....not to go on advanced level until you dont get proficient in beginner level.....what you say sir...


Posted by Farhan

on 2013-12-24 20:09:55

first thing I m myself is very much into games..... but now i like to develop games og my own choice...this is 1st time....i dont know the coding you wrote...its strange for me....but i want to learn.....what you suggest me to do? is flash software is require to make a flash game....


Posted by Joseph

on 2013-12-09 22:34:43

Takes a bit of coding and redesigning to make that happen.

One approach is to add in that animation to the Jovia movie clip.

when the collision happens, play that animation.


Posted by Ck

on 2013-12-08 16:11:15

Hey, hi.

I have a question. so if let say I want when jovia eat the apple, and once collosion hit the apple, jovia will make like happy face or whatever. how can i do that?


Posted by reymart

on 2013-11-23 20:03:40

hhahaha i try to make a games


Posted by Arman

on 2013-11-16 16:27:04

The tutorials in this site are great complement with many ActionScript 3 books. Planning to go through all the tutorials here, many thanks.


Posted by Joseph

on 2013-11-03 22:32:06

@Andrew --> For Flash games, I generally use Flash CS or now Flash CC. They generally work well for me. I know some ppl who use Flash Builder, and then use higher level frameworks like Starling. I believe coding from scratch at the start gives you a better grounding. The tutorials here, when done in sequence, should give you a good foundation.

@Me --> Did you recompile it? If you are using CS4 or later, do set the properties of the textfield to "Use Device Fonts" so that they display properly.


Posted by Andrew

on 2013-11-01 01:06:19

Hello there. I am into programming uni for 1 year now and I know all basics of programming and such, but I'm really interested into game designing. My question is, what programs do you recommend I use for flash games, and generally where should I start?

Thanks in advance,
Andreas


Posted by Me

on 2013-10-29 21:35:29

I just downloaded the game files and didn't do anything to them, but I don't get any points when I hit an apple.. The score remains 0... What's wrong?


Posted by Joseph

on 2013-10-28 22:06:14

Sorry, don't really understand your qn. To get width and height, use .width and .height properties.


Posted by Slim

on 2013-10-24 10:48:22

Hi author,

I've created the GameStage symbol and drag it into the stage like you said but...I could't set size for it. Whatever I try, its width and its heigh still 0:0. Thus, it makes displaying the gameplay is no sense. When I copy and patse your GameStage symbol(from your source code) into my stage, It has size. So, What is the difference?


Posted by john cena

on 2013-09-25 15:22:44

makin' flash games are easy


Posted by Joseph

on 2013-09-21 11:58:43

What's the error msg? Try hitting SHIFT+CTRL+ENTER to enter debugging mode. That may pinpoint the error.

Also, make sure the error is not because of the Device fonts issue. For later Flash, you need to either embed the fonts, or choose Use Device Fonts for the text fields to work properly.


Posted by Nerd

on 2013-09-11 01:12:11

Herro der, i was just adding a button to this game for just whatever reason, and after i added the button and got the game to work, the score board wouldnt work. Everything is the same in the gamecontroller, and C, but the A.S. in the fla file is changed to -


stop();

startBtn.addEventListener(MouseEvent.CLICK, onClickPlay);

function onClickPlay(event:MouseEvent):void
{
startGame();
}


-Thanks in advance.


Posted by Joseph

on 2013-08-21 00:18:38

What's the error msg? Need at least Flash CS3 to open it.


Posted by singingbadger

on 2013-08-12 20:54:56

downloaded (and finally managed to unblock) files but FLA will not open...any ideas?


Posted by Febin Regulos

on 2013-06-02 16:38:56

Tx....


Posted by g.p.prabhu

on 2013-05-14 19:41:53

best in the game to all the kids enjoy the timer game


Posted by Joseph

on 2012-12-19 23:55:00

There are 3 layers in the main FLA file. You wouldn't want to touch the mcGameStage movie clip inside the Contents layer. This movie clip is where dynamic objects such as your apples will appear in.

But you can always modify the background at the Background layer.


Posted by Adam

on 2011-10-10 23:16:37

Hi,
Great tutorial! Really big help for a beginner like me!
I downloaded your files and was trying to do some chnages to see the results. And when I just changed the background color (in Flash itself) or did any other change all the apples appeared behind it. Why? How can I modify the background and keep it on top?
I can't use command 'move to front' it's inactive.

Cheers!


Posted by bboysloover

on 2011-05-27 17:04:37

I have a problem with the application.

Ive changed the bird with just a box.

The box or bird just flies away to the left side and goes out of the stage.

I only can move up or down until the box is out of the frame.
The box cant go left or right.

What is the problem ?


My code

ackage
{
import flash.display.MovieClip;
import flash.events.*;
import flash.events.MouseEvent;

import flashx.textLayout.events.UpdateCompleteEvent;

public class Main extends MovieClip
{
//Properties
private var kinderSurprise:KinderSurprise;
private var schaduw:SchaduwKinderSurprise;

//Constructor
public function Main()
{
//EI op de stage plaatsen, met schaduw.
setup();
}
//Methods
private function setup():void{
//deze functie blijft ongewzijzigd;
kinderSurprise = new KinderSurprise();
schaduw = new SchaduwKinderSurprise();

//ei+schaduw in midden van de stage plaatsen
kinderSurprise.x = stage.stageWidth/2;
kinderSurprise.y = stage.stageHeight/2
schaduw.x = kinderSurprise.x;
schaduw.y = kinderSurprise.y + 115;

//en toevoegen aan de stage
addChild(schaduw);
addChild(kinderSurprise);

//click event toevoegen op het ei
kinderSurprise.addEventListener(MouseEvent.CLICK, enterSiteHandler);
kinderSurprise.buttonMode = true;
}
private function enterSiteHandler(event:MouseEvent):void{
//verwijder het ei indien gewenst, tenzij er nog verder mee wordt gewerkt
//removeChild(kinderSurprise);
//removeChild(schaduw);

trace("enter site - introanimatie");

//plaats vanaf hier de code van je eigen project


}

import flash.display.MovieClip;
import flash.events.*;
import flash.geom.*;
import flash.text.*;

import Game.*;

{
private var player:Jovia;
private var speed:Number;
private var gravity:Number;
private var randomChance:Number;
private var apples:Array;
private


Posted by Joseph

on 2010-12-20 10:59:19

Select the text field, under properties, you can find a character tab. Expand it and select use device fonts under anti-alias. :)


Posted by Angelo

on 2010-12-10 13:58:40

hi im using CS5 and i also encountered the same problem waning 3596, line 132- "used duplicate code". my score in the textbox is not being updated but when i do trace(score) its displaying the right score. also where can i find the "use device fonts"? all i can see is embed font


Posted by Joseph

on 2010-11-15 22:34:29

Tom, are you using Flash CS5? Did you convert my files into a Flash CS5 file?
There is this Font embedding thing that you must set when using Flash CS5. Try converting the text fields to "Use Device Fonts" to see if that fixes the problem?

You can ignore that warning, it's because I re-used a variable.


Posted by Tom

on 2010-11-09 06:16:12

Nice tutorial!! I'm a Flash animator trying to understand the basics of coding simple games such as this. I downloaded the tutorial files and replace your art with mine ( added new layers in MC and turned your layers to "Guides"). It all works fine, except I get waning 3596, line 132- "used duplicate code". The falling objects disappear when 'caught', but my scoring doesn't work. Any suggestions on how to fix this?


Posted by Joseph

on 2010-09-20 00:35:36

Hi William, for multiplayers, you can take a look at SmartFox Server + AS3. Big games like Disney Club Penguin uses it.

Otherwise, you can take a look at the integrated server-client model provided by Adobe, which is the Flash Media Server.


Posted by William

on 2010-09-19 03:21:08

Nice tutorial, i am really looking for tutorial about frameworks in flash game for beginners, found it here.
Thanks. It help me a lot.

But i'm still looking for multiplayer flash games tutorial frameworks, especially for creating list rooms, chat etc.
Did someone have link?


Posted by Joseph

on 2010-08-22 09:27:41

For the flapping of wings, they are animated at the graphics level. If you look at the library, under 00. RAW, you will find all the images for Jovia that contains her entire flapping animation.

They are added to the movieclip timeline, and Flash takes care of the animation by running through the frames. If you doubleclick and go into the Edit mode for the Jovia movieclip, you see the timeline containing the labels "idle", "right", and "left".

Basically, to animate it, you just need to issue a code that says << player.gotoAndPlay(C.JOVIA_RIGHT); >> and Flash will play the timeline starting from the frame labelled "right".

If you look closely at frame 19, there's an Actionscript there that says << gotoAndPlay("right"); >>. This makes Jovia continuously loop around the "right" animation sequence.


Posted by kamal

on 2010-08-17 19:31:45

Really good tutorial as far as one knows the basics of AS3.

I wrote ur code from start to end instead of directly downloading it.I took the images for the game.


Just wanted to ask one thing,how did u made the bird flap her wings.I know you have written code for it but the symbol((Movieclip jovia)) i used doesn't react to that code.


Flash Tutorial Links:
Play Games: HTML5 Tutorials:
gaming tools download on app store now!
Home | About Us | Contact Us
Powered by Make Flash Games. All Rights Reserved.
By Joseph Tan