1.
Select our cartoon man, then open up the actions panel, (as default its located at the bottom of the screen).
2.
Type in the following
onClipEvent (enterFrame) {
}
This tells flash to update frequencley and do whatever we put in the empty content field.
3.
Now inbetween { and } we want to type in our content so now the code should look like this.
onClipEvent (enterFrame) {
if (Key.isDown(Key.UP)) {
this._y -=9;
} }
Now first we have an if statement, this tells flash that if a key is held down then do something, and the key we put in the if statement is the up key, this as a reference as Key.UP
4.
Then what will happen when the key is down is that our cartoon man shall move up, our man is refered to as this._y, y is the y axis, (up and down, the x axis is left and right).
5.
-=9;
This subtract the coordinats for y axis, and why I use 9, thats the speed, set it to 2 and it will walk slower, set it to 30 and it will be very fast.
6.
Now we have to make the same code again with just a few minor changes, instead of Key.UP we need Key.Down and then left and right. (x axis) so here is all the code.
7.
Try your flash game, and you will see that our guy can move smooth around, even angled.
Next we will give some detail to our characters movement, so when he moves then the feet and body moves.
This is going to be a very long tutorial so even newbies should be able to follow it, and hopefully learn a lot, and to see how easy it is to make games in Flash.
1.
Draw an oval with a gradient as in the image below.
2.
Right click the oval shape you just made and choose convert to symbol, and convert it to a movie clip.
3.
Now again with the oval tool, make a smaller oval, this is going to be a reflection, so place it on top of the first shape we made.
4.
Make a gradient from white to transparent and apply it to the reflection shape.
5.
Right click the oval shape you just made and choose convert to symbol, and convert it to a movie clip
Select the reflection shape, and go to the filters panel and give it a blur as in the image below.
You may also need to use the free transform tool to scale the reflection a bit to fit in the object.
6.
Now we will make the eyes, so with a random fill color and no stroke draw 2 oval as shown below, make sure they overlaps a bit.
select both ovals, right click and choose break apart.
Then with the ink bottle tool click and make a stroke around the new eyes shape.
7.
Now you can use the paint bucket tool to fill the inner color with white.
Draw two small black ovals and move them inside the eyes.
select all part of the eyes we just made, right click and choose convert to symbol, and convert it to a movie clip.
You can now move the eyes into place as I did.
8.
Right click the eyes shape and go to arrange -> bring backward, to get the behind the reflection shape.
9.
Now we will make the mouth, so draw and oval with a white fill color and a black stroke color, drag the stroke lines to reshape the mouth shape.
10.
Now with the line tool draw teeth inside the mouth, by drawing lines across as shown below.
11.
Now select all mouth and teeth parts, right click and convert them to a movie clip.
Move the mouth into place.
12.
Now we are going to make two feet, so make a graident as below.
Then use the graident transform tool to move the gradient a bit, and with the selection tool reshape the feet a bit, so its not perfectly round.
13.
Make a copy of the foot, move the feed into place, you may need to right click -> arrange -> move to front to put them on top of our new cartoon guy.
Also separately right click both feet and convert them to a movie clip.
14.
Now its important to drag and select all parts of the cartoon guy shapes, right click and convert them to one movie clip.
And we are done with the first part of this small flash game tutorial.
1.
If you havent done it already start by naming the character, we will be needing this alot, so I recomment you use the same name as I did if you tend to follow the tutorial serise.
I named mine joe, so when we refere to him, we will say _root.joe
2.
First of double click on joe to get into the movie clip, now in the timeline, name a new keyframe at frame 2, so we have joe in frame one, and frame 2.
We are going to animate joe in frame 2, so when we want him to walk we just jump to frame 2. (confused?, try to stay with me).
3.
Go to frame 2, select joe (all the part of him) right click and convert it to a movie clip.
double click this movie clip to get into its timeline, now we need to animate it a bit, so what i did was to make him normal in frame 1, then make a new keyframe in frame 2, and drag his left leg a bit up as shown in the image below.
Also rotate the eyes a bit to the left, and the body.
4.
Now make a new keyframe at frame 4, and rotate the eyes and body the other way, move the left foot back down and the right one up as shown below.
5.
Make a new keyframe at frame 5, move it back to normal view.
Now you can go back to the root stage in flash.
6.
What we will do now is to tell flash to go to frame 2 in the joe movie clip when we hold down one the the keys to move joe around, and go to frame 1 when no keys is pressed.
So click joe and go to the actionscript panel, there should be some code from our previous lessons.
Type in the following code at the top
onClipEvent (keyUp) {
_root.joe.gotoAndStop(1);
}
This tells flash that when a key is up (have been pressed but is now up) then the joe movie clip should go to frame one, (the one that is not animated to walk).
7.
Now go to the part where onClipEvent (enterFrame) is, and for every walk method, that looks like this, we made in lesson 2.
if (Key.isDown(Key.UP)) {
this._y -=11;
}
Add in the following
if (Key.isDown(Key.UP)) {
this._y -=11;
_root.joe.gotoAndStop(2);
}
8.
Repeat it for key.down, key.left and key.right.
Now you are done, you can download the source code here.
1.
So start by making some graphic, drag 4 rectangles on the stage as in the image below, then right click them seperatly and convert them to movie clips.
2.
Now name them bottom_wall, top_wall, right_wall and left_wall so we can refere to them later on in code.
3.
Now we will use the hittest function to work so our character joe cant go through the walls.
Click joe and go to the actionscript panel.
in the onClipEvent (enterFrame) {
make some room for coding, and type in the following
if (hitTest(_root.bottom_wall)==true)
{
_y=_root.bottom_wall._y - _root.joe._height
}
Now what this does is to repeatly test if joe is crossing over the bottom wall we made just before, if it does touch the wall then, we give joe a new posision, in the y axis (_y) we give it the posistion of the bottom wall + the height of the joe movie clip, so it will get placed just above the bottom wall.
4.
Now we have to repeat this for the left, right and top walls, I'm not going to make a description for them all, because its kind of the same as above, but here is the code.
//wall boundaries START
if (hitTest(_root.bottom_wall)==true)
{
_y=_root.bottom_wall._y - _root.joe._height
}
if (hitTest(_root.top_wall)==true)
{
_y=_root.top_wall._y + 16 // 16 is just the width of the wall
}
if (hitTest(_root.left_wall)==true)
{
_x=_root.left_wall._x + 20 // 20 is just the width of the wall
}
if (hitTest(_root.right_wall)==true)
{
_x=_root.right_wall._x - _root.joe._width
}
//wall boundareis END
Now you can test your game, you should not be able to move the joe character out the the stage.
1.
First of we need to make the ball, so as you can see from the image below I just made an oval, with a gradient and a reflection.
Select it, right click and convert it to a movie clip.
In the properties panel name it ball, so we can refere to it later in code.
2.
Now go to the _root stage in flash, click the ball movie clip and go to the actionscript panel, type in the following code
onClipEvent (load) {
xspeed = random(5)+11;
yspeed = random(5)+11;
}
onClipEvent (enterFrame) {
this._x += xspeed;
this._y += yspeed;
}
first of we make it create to variables when the flash movie is loaded, xspeed and yspeed they are going to be a random number between 5 + 11.
then in the onclipevent (this event is raised repeatly) what this will do is to tell flash to move this._x and this._y (our ball) to its original posistion + the x,y speed variables.
try to test your movie now and you should see that the ball is moving, but we have one problem, it moves out of the stage, so we need to change its direction when it hits a wall, luckly we made walls in part 4.
3.
Now we will use the HitTest method to make boundaries for the ball.
So in the onClipEvent(enterFrame) type the following.
if (hitTest(_root.right_wall)==true)
{
xspeed /= -1;
}
What this does it to repeatly check if the ball is touctching the right wall, and if it does then change the x direction via xspeed /= -1;
test the movie and see what happens when the ball hits the right wall.
Now here is the code for all the walls
--------------------------------------
onClipEvent (enterFrame) {
this._x += xspeed;
this._y += yspeed;
if (hitTest(_root.right_wall)==true)
{
xspeed /= -1;
}
if (hitTest(_root.left_wall)==true)
{
xspeed /= -1;
}
if (hitTest(_root.top_wall)==true)
{
yspeed *= -1;
}
if (hitTest(_root.bottom_wall)==true)
{
yspeed /= -1;
}
}
--------------------------------------
4.
One last thing to add is to change the posistion for the ball when it hits our character.
So still in the onClipEvent (enterFrame) type in the following.
if (hitTest(_root.joe)==true)
{
_x = 0;
_y = 0;
}
Now test the movie.
Tip: you could change the x_ and _y to some random positions for the ball when it hits our charector.
if (hitTest(_root.joe)==true)
{
_x = random(200);
_y = random(200);
}
1.
Now first of all we will make a score board or just some place to contain the counter.
So I made a square with soft edges and a gradient color as shown in the image below.
Then on top of it put in some text fields on static containing "life:" and one dynamic containing the number 3 (as in 3 lifes).
Select the dynamic text box and in the properties panel name it life_text
2.
Drag and select the two text fields and the graphic we just made, right click and convert it to a movie clip.
In the properties panel name the new movie clip board
3.
Now in the timeline right click at frame 2 and create a empty keyframe, (here you can make a button that goes back to frame 1 using gotoAndPlay(1);
In frame 1 go to the actionscript panel and type in stop(); do the same at frame 2.
4.
Now we are ready to code.
select the ball we made in the last lesson, and go to the actionscript panel, again we will use the hit test to determinate if the ball has hit our character, so type in the following.
if (hitTest(_root.joe)==true)
{
if (_root.board.life_text.text < 1) {
_root.gotoAndStop(2);
}
else {
_root.board.life_text.text -= 1
}
what this does is if the ball hits joe then it will check if the life counter is more then 0 life left, if that is true then subtract 1 life, if life counter is less then 1 then the flash movie will jump to frame 2, where I placed a button called restart.
And we are done for this time, you can download the source code here.
1.
Now I thought the white background was a bit boring, so I imported a grass image, placed it in a new layer beneath the other layer.
Now you see that the walls we made in lesson 4 is shown, we want to hide them, so select all the wall movie clips, right click and choose distribute to layers, and place those layers beneath the grass layer.
2.
Now we want to make some object that our character can catch to get some points, I found an image of a strawberry, converted it to a movie clip, and call it point in the properties panel.
3.
Now the trick is to make the position of the strawberry change frequently, so in frame 1 go to the action script panel and type in the following code beneath the stop(); command from lesson 6.
var dorandom = function(){
_root.point._x = random(430)
_root.point._y = random(380)
}
var intervalID = setInterval(dorandom, 5000); //repeats every 5 sec.
Now what this does is to pick a random number between 0 and 430 for the x axis and a random number between 0 and 380 for the y axis and then place the strawberry at that position every 5000 mil seconds (5 sec).
4.
Now we want to make some point for this game, so double click the board movie clip from lesson 4 and make new dynamic text field as in the image below and type in 0 for the text, (as in 0 points), then name the text field "score_text".
5.
Go back to the main stage in the flash project.
Click the strawberry, then go to the action script panel and type in the following code.
onClipEvent (enterFrame) {
if (hitTest(_root.joe)==true)
{
_root.board.score_text.text = Number(_root.board.score_text.text) + Number(1)
_root.point._x = random(450)
_root.point._y = random(400)
}
}
The onClipEvent(enterFrame) we have been using before in a previous lesson, so you should know what its function is.
Now we tell flash that if our character joe hits the strawberry then it should add 1 to the score text field (_root.board.score_text.text) and remember when adding numbers together we need to put the fields in a Number(something) field.
At last we give the strawberry a new position so we don't repeat getting points at the same spot for 5 seconds.
Finally our game is done, I know this is a very big tutorial in 7 lessons, but I did it over 7 lessons just to keep it basic so even newbies should be able to follow it.
discuss this topic to forum
