Learn how to use Adobe Flash with all the free tutorials. Game Making, Animating, Cartoon Design, Web Design and much more...
How to make a maze game
Making a maze game
Insert two additional layers, so you are left with 3 layers. Name layer 1 maze, layer 2 cursor and layer 3 actions.
Right click on the first frame in the actions layer and select actions, add the following actions:
stop();
Mouse.hide();
cursor.onMouseMove = function() {
this._x=_xmouse, this._y=_ymouse;
};
These actions have been explained in previous tutorials.
In the first frame of the cursor layer, using the oval tool, draw out a small circle on the stage. Now convert the circle into a movie clip, call it cursor. Also give it an instance name of cursor.
Now on the first frame of the maze layer, select line tool and set the stroke height to 10.75 or higher. Now draw out your maze(this is what the cursor will have to be guided through so make sure the cursor is smaller enough to fit in your maze).
Convert the maze you just made into a button. Now right click on the maze, select actions, and add these actions to it:
on (rollOver) {
gotoAndStop(2);
}
This means that if the cursor rolls over the maze it will move on the 2nd frame.
Now at the end of the maze where you want the finish to be draw our something that represents the end of the maze. Eg. You may want to put a trophy or a gold medal or something like that.
Convert it into a button and add the following actions to it:
on (rollOver) {
gotoAndStop(3);
}
These actions are the same as before only with a different frame number to go to.
Now insert a new keyframe at frame 2(this is the frame that the game will go to if the cursor rolls over the maze). Now delete everything on the stage, and using the brush tool, write something like YOU LOSE. Now insert another keyframe at frame 3 in the maze layer. Delete the YOU LOSE text and replace it with something like GREAT WORK.
That’s it, you just made a maze game, you may want to insert keyframe at frames 2 and 3 of the cursor layer so the cursor is still active.
Now that you know how to create a maze game, add more levels, with the knowledge you have learnt throughout these tutorials you will be able to add button to restart and buttons to go to the next level etc.
How to make a quiz game
Making a Quiz Game
Start by inserting an additional 2 layers, so you will be left with 3 layers.
Name the bottom layer title, the middle Q’s and A’s and the top layer Actions.
Select modify from the menu option located at the top of the screen, then select document and change the colour to black(I am using black for this example, you use what ever you want).
Insert a keyframe at frame 2 on every layer.
Right click on the first frame of the action layer and select actions, now on the first line type in:
stop();
score = 0;
Now right click on the second frame of the action layer and select actions, on the first line type in:
percent = score/1*100+%;
(IMPORTANT NOTE: THERE MUST BE QUOTATION MARKS AROUND THE PERCENT SYMBOL.
The only reason I have not added the quotation marks is because this is a html document, and if I place the quotation marks around the % you will only see “”.
This is telling flash that the percent = whatever the score is(for this example I only have 1 question, so the score will be 1) divided by 100.(which is 100%). The +% means to add a % symbol at the end of the result.
On the first frame of the title layer, draw out a text box(static text) and type in the name of the quiz. For this example I will be using learnflash8pro.blogspot.com.
Now on the second frame of the title layer, draw out another text box(static text) and type in You Scored.
On the first frame of the Q’s and A’s layer, write out the question and the answers.
My question was Is learnflash8pro.blogspot.com the best site ever?
My answers were Yes and No.
I recommend that you place each of these underneath each other.
Eg. Is learnflash8pro.blogspot.com the best site ever?
Yes
No
Convert the answers in to 2 separate buttons. Right click on the correct answer and select action(of course the correct answer for me would be yes).
Add these actions to the correct answers:
on (release){
gotoAndStop(2);
score+=1;
}
This means that when the mouse is released the score will go up by one and go to the next frame.
Add these actions to the incorrect answer:
on (release){
gotoAndStop(2);
}
This means that when the mouse is released go to frame two. As this is the wrong answer we don’t want the score to go up.
Now on the 2nd keyframe of the Q’s and A’s layer, using the text tool(static text) draw out 3 text boxes, each underneath each other.
In the top text box type in: # of Questions:1
In the middle text box type in: # of Correct Questions:
Now in the bottom text box type in: Percentage:
Now using the text tool again, this time dynamic text, draw out a text box next to the # of Correct Questions text box, give it a var name of score.
Now using the text tool(still dynamic text) draw out a text box next to Percentage, and give this text box a var name of percent.
Congratulations, you have made your first quiz.
Now that you have the idea, create a quiz with a few questions, and obviously you will have to make minor changes to the Actionscript.
Start by inserting an additional 2 layers, so you will be left with 3 layers.
Name the bottom layer title, the middle Q’s and A’s and the top layer Actions.
Select modify from the menu option located at the top of the screen, then select document and change the colour to black(I am using black for this example, you use what ever you want).
Insert a keyframe at frame 2 on every layer.
Right click on the first frame of the action layer and select actions, now on the first line type in:
stop();
score = 0;
Now right click on the second frame of the action layer and select actions, on the first line type in:
percent = score/1*100+%;
(IMPORTANT NOTE: THERE MUST BE QUOTATION MARKS AROUND THE PERCENT SYMBOL.
The only reason I have not added the quotation marks is because this is a html document, and if I place the quotation marks around the % you will only see “”.
This is telling flash that the percent = whatever the score is(for this example I only have 1 question, so the score will be 1) divided by 100.(which is 100%). The +% means to add a % symbol at the end of the result.
On the first frame of the title layer, draw out a text box(static text) and type in the name of the quiz. For this example I will be using learnflash8pro.blogspot.com.
Now on the second frame of the title layer, draw out another text box(static text) and type in You Scored.
On the first frame of the Q’s and A’s layer, write out the question and the answers.
My question was Is learnflash8pro.blogspot.com the best site ever?
My answers were Yes and No.
I recommend that you place each of these underneath each other.
Eg. Is learnflash8pro.blogspot.com the best site ever?
Yes
No
Convert the answers in to 2 separate buttons. Right click on the correct answer and select action(of course the correct answer for me would be yes).
Add these actions to the correct answers:
on (release){
gotoAndStop(2);
score+=1;
}
This means that when the mouse is released the score will go up by one and go to the next frame.
Add these actions to the incorrect answer:
on (release){
gotoAndStop(2);
}
This means that when the mouse is released go to frame two. As this is the wrong answer we don’t want the score to go up.
Now on the 2nd keyframe of the Q’s and A’s layer, using the text tool(static text) draw out 3 text boxes, each underneath each other.
In the top text box type in: # of Questions:1
In the middle text box type in: # of Correct Questions:
Now in the bottom text box type in: Percentage:
Now using the text tool again, this time dynamic text, draw out a text box next to the # of Correct Questions text box, give it a var name of score.
Now using the text tool(still dynamic text) draw out a text box next to Percentage, and give this text box a var name of percent.
Congratulations, you have made your first quiz.
Now that you have the idea, create a quiz with a few questions, and obviously you will have to make minor changes to the Actionscript.
Improve your flash skills
Tips on Improving your skill
Drawing- Spend 15 minutes everyday on drawing some basic pictures. When you are getting good at drawing basic pictures, try something a little harder. Look through a magazine for some cartoon pictures. Have a look at the way these pictures have been drawn, try draw them using flash; don’t worry if the end result looks stupid, that’s the whole point of this exercise, to improve. Everyday try and draw this picture again, this will help you greatly.
Judging Colour- This is an important skill. Say for example you are looking through pictures of cars or something like that. You might see a yellow one that you like. Take a close look at the colour, figure out what shade of yellow it is, because chances are, it isn’t just the standard yellow you find in the colour panel. In the colour panel go into custom colours(when you for example click on the oval tool, open up the fill colour, up the top of the box next to the box with the red line through it, there is a circle filled with different colours. Here you can get the exact colour you need.
Each colour has a number, when you click on the fill colour tool, hold the cursor over a colour, in the box located at the top of the colour panel, there will be a list of numbers. For example, black is #000000. So remember to have a look through custom colours often, as the ones that display when you click on stroke colour or fill colour, are only basic colours.
Judging Scale- This is really easy(for most of us). Let’s say you want to draw a picture of a person holding a five dollar note; you don’t want the five dollar note to be as big as the person’s whole arm. This would be a pretty obvious mistake, but you would be surprised how many people make this mistake.
Solution: grab a five dollar note, and have a look haw big it is compared to your hand or arm. Although this was a simple example, this mistake can sometimes be easy to make, that being said, it is also easy to avoid.
Drawing a Person- One of the most common things seen in a flash movie is a person, so it doesn’t hurt to know how to draw one.
Have a look in the mirror, take in the details, have dark are your eyes, how large are they, what do your ears look like from the front and the side, what does you nose look like, take notes like these.
A common mistake when someone draws a person is the eye position. When you had a look in the mirror I bet you didn’t notice this, but you eyes are actually in the very centre of our face. It looks like they area bit above centre.
Practice drawing out each thing individually, have a look at your nose, now try drawing it out, and so on.
Don’t worry to much about the detail, this is not that important, a cartoon drawing does not need to made complicated, it needs to be kept fun. Take “South Park” for example, for those of you who know what this is, look how simple the characters are, but yet, we can still identify their characteristics easily, so just remember don’t be too fussy with the detail.
Experiment With Colour- As I just said, don’t worry about the detail too much.
This may sound like I am contradicting what I just said before in the advice about colour, but when designing you own simple designs, make the colours fun. Say for example when you draw a person don’t worry too much about getting the colour perfect, you may even want to make the person blue, be creative, a key thing in flash, creativity.
Drawing- Spend 15 minutes everyday on drawing some basic pictures. When you are getting good at drawing basic pictures, try something a little harder. Look through a magazine for some cartoon pictures. Have a look at the way these pictures have been drawn, try draw them using flash; don’t worry if the end result looks stupid, that’s the whole point of this exercise, to improve. Everyday try and draw this picture again, this will help you greatly.
Judging Colour- This is an important skill. Say for example you are looking through pictures of cars or something like that. You might see a yellow one that you like. Take a close look at the colour, figure out what shade of yellow it is, because chances are, it isn’t just the standard yellow you find in the colour panel. In the colour panel go into custom colours(when you for example click on the oval tool, open up the fill colour, up the top of the box next to the box with the red line through it, there is a circle filled with different colours. Here you can get the exact colour you need.
Each colour has a number, when you click on the fill colour tool, hold the cursor over a colour, in the box located at the top of the colour panel, there will be a list of numbers. For example, black is #000000. So remember to have a look through custom colours often, as the ones that display when you click on stroke colour or fill colour, are only basic colours.
Judging Scale- This is really easy(for most of us). Let’s say you want to draw a picture of a person holding a five dollar note; you don’t want the five dollar note to be as big as the person’s whole arm. This would be a pretty obvious mistake, but you would be surprised how many people make this mistake.
Solution: grab a five dollar note, and have a look haw big it is compared to your hand or arm. Although this was a simple example, this mistake can sometimes be easy to make, that being said, it is also easy to avoid.
Drawing a Person- One of the most common things seen in a flash movie is a person, so it doesn’t hurt to know how to draw one.
Have a look in the mirror, take in the details, have dark are your eyes, how large are they, what do your ears look like from the front and the side, what does you nose look like, take notes like these.
A common mistake when someone draws a person is the eye position. When you had a look in the mirror I bet you didn’t notice this, but you eyes are actually in the very centre of our face. It looks like they area bit above centre.
Practice drawing out each thing individually, have a look at your nose, now try drawing it out, and so on.
Don’t worry to much about the detail, this is not that important, a cartoon drawing does not need to made complicated, it needs to be kept fun. Take “South Park” for example, for those of you who know what this is, look how simple the characters are, but yet, we can still identify their characteristics easily, so just remember don’t be too fussy with the detail.
Experiment With Colour- As I just said, don’t worry about the detail too much.
This may sound like I am contradicting what I just said before in the advice about colour, but when designing you own simple designs, make the colours fun. Say for example when you draw a person don’t worry too much about getting the colour perfect, you may even want to make the person blue, be creative, a key thing in flash, creativity.
Important things to remember
Important Things to Remember
As I have mentioned before in these tutorials, there are so many things that you can do with flash, and it would be near impossible to sum it all up. So just take the time to explore some of the things in flash. If you don’t know what some of the things are, have a look at them and find out what they are and do.
Flash also has a great help menu.
Remember to put each different object on a separate layer, so they don’t interfere with each other, always name the layers so you know where everything is.
Make sure your things are to scale, obviously this is just common sense, but many people get tricked with this. Eg. Let’s say there was a dog and a person, we don’t want the dog to be three times the size of the person do we?
If you are having trouble with doing something in flash, don’t give up, as the answer is probably very simple, you may be just doing one little thing wrong.
As I have mentioned before in these tutorials, there are so many things that you can do with flash, and it would be near impossible to sum it all up. So just take the time to explore some of the things in flash. If you don’t know what some of the things are, have a look at them and find out what they are and do.
Flash also has a great help menu.
Remember to put each different object on a separate layer, so they don’t interfere with each other, always name the layers so you know where everything is.
Make sure your things are to scale, obviously this is just common sense, but many people get tricked with this. Eg. Let’s say there was a dog and a person, we don’t want the dog to be three times the size of the person do we?
If you are having trouble with doing something in flash, don’t give up, as the answer is probably very simple, you may be just doing one little thing wrong.
How make an object move using arrow keys
Making Object Move Using Arrows
Start by naming layer 1 circle, this is the only layer that is required for this tutorial.
Using the Oval tool draw out a circle on the stage, convert it to a movie clip.
Now right click on the circle, and select actions.
Now on the first line type in:
onClipEvent (enterFrame) {
//if the left arrow is pressed, the circle will move to the left,
//the number determines how fast it will move.
if (Key.isDown(Key.LEFT)) {
this._x = _x-7;
} else if (Key.isDown(Key.RIGHT)) {
this._x = _x+7;
}
//the circle will move up
if (Key.isDown(Key.UP)) {
this._y = _y-7;
//the circle will move down
} else if (Key.isDown(Key.DOWN)) {
this._y = _y+7;
}
}
NOTE: you can quite easily copy paste these action, where I have explained what the actions will do won’t interfere as I have placed two forward slashes before them, this is so flash doesn’t pay any attention to them.
Well, how easy was that?
Start by naming layer 1 circle, this is the only layer that is required for this tutorial.
Using the Oval tool draw out a circle on the stage, convert it to a movie clip.
Now right click on the circle, and select actions.
Now on the first line type in:
onClipEvent (enterFrame) {
//if the left arrow is pressed, the circle will move to the left,
//the number determines how fast it will move.
if (Key.isDown(Key.LEFT)) {
this._x = _x-7;
} else if (Key.isDown(Key.RIGHT)) {
this._x = _x+7;
}
//the circle will move up
if (Key.isDown(Key.UP)) {
this._y = _y-7;
//the circle will move down
} else if (Key.isDown(Key.DOWN)) {
this._y = _y+7;
}
}
NOTE: you can quite easily copy paste these action, where I have explained what the actions will do won’t interfere as I have placed two forward slashes before them, this is so flash doesn’t pay any attention to them.
Well, how easy was that?
How to make a rubbish bin
Making A Trashcan
We are going to be doing something a little different in this tutorial.
Name layer 1 trashcan, now draw a rectangle on the stage, and convert it to a movie
Clip(this will be a trashcan). Now give the rectangle an instance name of trashcan.
Okay, now insert a new layer and call it rubbish. Obviously this will be the layer that contains the thing we want to put in the trashcan. On the layer rubbish draw out the thing that you want to put in the trashcan, covert the rubbish in to a movie clip. Give the rubbish an instance name of rubbish.
Right click on the first frame of the rubbish layer and select actions.
now type this in on the first line:
// Drag a piece of garbage.
rubbish.onPress = function() {
this.startDrag(false);
};
// When the garbage is dragged over the trashcan, make it invisible.
rubbish.onRelease = function() {
this.stopDrag();
// Convert the slash notation to dot notation using eval.
if (eval(this._droptarget) == trashcan) {
rubbish._visible = false;
}
};
Note: notice how there are //above the codes, they explain what the code does.
Test the movie, click on the rubbish and drag it over the trashcan, when you release the rubbish, it disappears. Well Done.
NOTE ABOUT THIS TUTORIAL: IT WOULD BE A GOOD IDEA TO PUT THE RUBBISH LAYER ABOVE THE TRASHCAN LAYER.
We are going to be doing something a little different in this tutorial.
Name layer 1 trashcan, now draw a rectangle on the stage, and convert it to a movie
Clip(this will be a trashcan). Now give the rectangle an instance name of trashcan.
Okay, now insert a new layer and call it rubbish. Obviously this will be the layer that contains the thing we want to put in the trashcan. On the layer rubbish draw out the thing that you want to put in the trashcan, covert the rubbish in to a movie clip. Give the rubbish an instance name of rubbish.
Right click on the first frame of the rubbish layer and select actions.
now type this in on the first line:
// Drag a piece of garbage.
rubbish.onPress = function() {
this.startDrag(false);
};
// When the garbage is dragged over the trashcan, make it invisible.
rubbish.onRelease = function() {
this.stopDrag();
// Convert the slash notation to dot notation using eval.
if (eval(this._droptarget) == trashcan) {
rubbish._visible = false;
}
};
Note: notice how there are //above the codes, they explain what the code does.
Test the movie, click on the rubbish and drag it over the trashcan, when you release the rubbish, it disappears. Well Done.
NOTE ABOUT THIS TUTORIAL: IT WOULD BE A GOOD IDEA TO PUT THE RUBBISH LAYER ABOVE THE TRASHCAN LAYER.
How to make your character talk when clicked
Make your character talk when he/she/it gets clicked
For this example we will also only be using layer 1. Using the oval tool draw out a circle of any colour and convert it to a movie clip. NOTE: I am only using a circle as an example, this would be your character. Now double click on your character. Start by right clicking on frame 1, and selecting actions. On the first line type in: stop();
Now insert a keyframe at frame 2. On frame 2 we need to put in the words that we want our character to say. Using the text tool (static text), insert a text box just above his head, for this example I want him to say: learningflashpro.blogspot.com.
I want the player to have enough time to read this, so I inserted a keyframe at frame 40. (this may be different for you, if you only have a short sentence like mine, use about 40 frame, otherwise just muck around with it until it is right).
On the last keyframe, in my case this would be frame 40, right click and select actions, now on the first line type in:
gotoAndStop(1);
This is so when this frame is reached it will go back to frame 1 where there is no text.
Back in the main timeline, make a cursor(do this by following the steps in tut.16).
Now we need to add some action to the character, right click on your character and select actions, on the first line type in:
onClipEvent(mouseDown) {
if(this.hitTest(_root.cursor)) {
this.gotoAndPlay(2);
}
}
This means that when the mouse has been pressed down the character movie clip will play.
That is it, pretty easy wasn’t it?
NOTE: to advance on this tutorial try instead of just using text, change it to audio.
Remember that you will need to insert a new layer to do this.
By now you should have the knowledge to do this, if not, I recommend that you go over some of the previous tutorials.
For further reference: the ads on this site contain great things about flash, consider trying them out.
For this example we will also only be using layer 1. Using the oval tool draw out a circle of any colour and convert it to a movie clip. NOTE: I am only using a circle as an example, this would be your character. Now double click on your character. Start by right clicking on frame 1, and selecting actions. On the first line type in: stop();
Now insert a keyframe at frame 2. On frame 2 we need to put in the words that we want our character to say. Using the text tool (static text), insert a text box just above his head, for this example I want him to say: learningflashpro.blogspot.com.
I want the player to have enough time to read this, so I inserted a keyframe at frame 40. (this may be different for you, if you only have a short sentence like mine, use about 40 frame, otherwise just muck around with it until it is right).
On the last keyframe, in my case this would be frame 40, right click and select actions, now on the first line type in:
gotoAndStop(1);
This is so when this frame is reached it will go back to frame 1 where there is no text.
Back in the main timeline, make a cursor(do this by following the steps in tut.16).
Now we need to add some action to the character, right click on your character and select actions, on the first line type in:
onClipEvent(mouseDown) {
if(this.hitTest(_root.cursor)) {
this.gotoAndPlay(2);
}
}
This means that when the mouse has been pressed down the character movie clip will play.
That is it, pretty easy wasn’t it?
NOTE: to advance on this tutorial try instead of just using text, change it to audio.
Remember that you will need to insert a new layer to do this.
By now you should have the knowledge to do this, if not, I recommend that you go over some of the previous tutorials.
For further reference: the ads on this site contain great things about flash, consider trying them out.
How to add an inventory to your game
Making an Inventory
This is rather easy to achieve, and a lot of Role Playing Games(rpg) games have inventories. Here is how you make one.
We will only be using layer 1 for this tutorial.
We will start by making our custom cursor.
Draw out a small circle on the stage(any colour), convert it to a movie clip and name it cursor.
Now give the cursor an instance name of cursor. Now right click on the first frame of layer 1 and select actions, now on the first line type in the following:
Mouse.hide();
cursor.onMouseMove = function() {
this._x=_xmouse, this._y=_ymouse;
};
As we know this makes the mouse hidden and allows you to move the cursor whenever you move the mouse.
Now draw out a box using the rectangle tool, make the stroke colour black, and no fill. Using the text tool, (static text) draw out a text box underneath or above that box and type in Inventory.
This is obviously so the player knows what this box is.
Now draw a small black square using the rectangle tool and convert it to a movie clip, name it item. Right click on the black box and select copy, now paste that copy, and move it inside the box. Resize it if needed so that it fits in the box. Now give it an instance name of invitem. Change the alpha of this item to 0, this was explained in a previous tutorial.
The item in the inventory box should now be invisible. If so move on to the next step.
Right click on the visible box and select actions, now on the first line type in the following:
onClipEvent(enterFrame) {
if(this.hitTest(_root.cursor)) {
this._alpha=0;
_root.invitem._alpha=100;
}
}
Now what this means is if the box that is visible represented by “this” collides with the cursor. The visible box’s alpha will go to zero “this._alpha=0;” and the other box’s alpha will go to 100 “_root.invitem._alpha=100;”.
Test the movie, now when you are move the mouse over the visible box it will become invisible and the other one will appear.
FAQ’s ABOUT THIS TUTORIAL:
Q. Why have you used the code “this” and not the name of the box?
A. As I am applying the actions to the movie clip itself, I only need to put this, as I am talking about this item that I am applying the actions to.
Q. Why do you need to put onClipEvent (enterFrame)?
A. I need to put onClipEvent as I am applying these action to a movie clip. I have put enterFrame as I want this to happen when the frame is entered. I could have changed this mouseDown which would mean when the mouse is down.
This is rather easy to achieve, and a lot of Role Playing Games(rpg) games have inventories. Here is how you make one.
We will only be using layer 1 for this tutorial.
We will start by making our custom cursor.
Draw out a small circle on the stage(any colour), convert it to a movie clip and name it cursor.
Now give the cursor an instance name of cursor. Now right click on the first frame of layer 1 and select actions, now on the first line type in the following:
Mouse.hide();
cursor.onMouseMove = function() {
this._x=_xmouse, this._y=_ymouse;
};
As we know this makes the mouse hidden and allows you to move the cursor whenever you move the mouse.
Now draw out a box using the rectangle tool, make the stroke colour black, and no fill. Using the text tool, (static text) draw out a text box underneath or above that box and type in Inventory.
This is obviously so the player knows what this box is.
Now draw a small black square using the rectangle tool and convert it to a movie clip, name it item. Right click on the black box and select copy, now paste that copy, and move it inside the box. Resize it if needed so that it fits in the box. Now give it an instance name of invitem. Change the alpha of this item to 0, this was explained in a previous tutorial.
The item in the inventory box should now be invisible. If so move on to the next step.
Right click on the visible box and select actions, now on the first line type in the following:
onClipEvent(enterFrame) {
if(this.hitTest(_root.cursor)) {
this._alpha=0;
_root.invitem._alpha=100;
}
}
Now what this means is if the box that is visible represented by “this” collides with the cursor. The visible box’s alpha will go to zero “this._alpha=0;” and the other box’s alpha will go to 100 “_root.invitem._alpha=100;”.
Test the movie, now when you are move the mouse over the visible box it will become invisible and the other one will appear.
FAQ’s ABOUT THIS TUTORIAL:
Q. Why have you used the code “this” and not the name of the box?
A. As I am applying the actions to the movie clip itself, I only need to put this, as I am talking about this item that I am applying the actions to.
Q. Why do you need to put onClipEvent (enterFrame)?
A. I need to put onClipEvent as I am applying these action to a movie clip. I have put enterFrame as I want this to happen when the frame is entered. I could have changed this mouseDown which would mean when the mouse is down.
How to make a shooting game
Making a Shooting Game(tut.15)
I would certainly suggest to those of you who would like to make games using flash to take this tutorial. It only a simple tutorial, but it will help those people beginning in this field of flash, and give them a better understanding.
Let’s start by inserting the following layers:
Actions- adds interaction to the game
Crosshair- so the player knows where they are shooting
Score- this is so the player can see how well they are doing
Enemy- this is what the player is to shoot, each time they hit it, the score goes up by 1.
Restart- this is so the player can play the game again if they want to
We are going to start by making the crosshair, this is very easy. Select the stroke color and set it to red, and set the fill color to no fill.
Making sure you have the oval tool selected, in the properties inspector, change the stroke height to about 2.75.
Now draw out a circle on the stage, (remember that this will be the custom cursor, so don’t make it too big).
Now select the line tool and draw a cross in it, hence the name crosshair.
Now select the whole crosshair and convert it to a movie clip naming it crosshair, also give it an instance name of crosshair in the properties inspector.
Now on the first frame of the actions layer, right click and select actions. On the first line type in:
Mouse.hide();
crosshair.onMouseMove = function() {
this._x = _xmouse;
this._y = _ymouse;
updateAfterEvent;
};
This was discussed in a previous tutorial.
Now for the enemy, for this example let’s just use a black circle to practice with.
Ensure that the enemy layer is below the crosshair layer otherwise the crosshair will appear behind the enemy.
Using the oval tool draw out a black circle on the stage, convert this in to a movie clip and name it enemy.
Now right click on the enemy and select actions, on the first line type in:
onClipEvent(mouseDown) {
if(this.hitTest(_root.crosshair)) {
_root.score+=1;
}
}
This means that if the crosshair is over the enemy and the mouse is clicked the score will go up by one. This was explained in more detail in a previous tutorial.
Now for the score. Select the text tool, in the properties inspector set it to dynamic text. Now draw out a text box in the top centre of the stage, now give it a var of score. It would also be a good idea to set the text so that it is aligned in the centre of the text box. Do this by selecting the option in properties inspector align centre.
In the first frame of the actions layer type this underneath the code that is already there:
var score = 0;
As we know this sets the score to zero.
Now in the following layer insert a keyframe at frame 206.
Actions
Score
Crosshair
Restart
At frame 205 of the enemy layer insert a keyframe
Here is where we want the final score to be displayed. Start by moving the score on frame 206 to the centre and enlarging the text size, only on the last keyframe(206). Make sure the score has not changed in the other keyframes.
Now above the score in frame 206 on the score layer, insert a static text box above it that says: Your Score:
This is so the player knows that the number on the screen is what they scored.
On the last key frame of the actions layer, right click and select actions, on the first line type in:
Stop();
This is so the game stops here for the player to read their score.
Last but no least we want to add a restart button to restart the game.
On the last keyframe of the of the restart layer, using the oval tool draw out a circle and write restart inside of it using either the brush tool or the text tool.
Convert this to a button naming it restart.
Right click on the button and select actions, now on the first line type in:
on (release) {
gotoAndPlay(1);
}
This means that when this button is clicked on the, flash will go back to frame 1 and play from there again.
There you go, your very first game, as simple as it is, you have to start somewhere.
NOTE: MAKE SURE THE ENEMY IS NOT DISPLAYED ON THE LAST KEYFRAME, OTHERWISE THE PLAYER CAN CONTINUE TO CLICK ON THE ENEMY AND THEIR SCORE WILL KEEP GOING UP.
I would certainly suggest to those of you who would like to make games using flash to take this tutorial. It only a simple tutorial, but it will help those people beginning in this field of flash, and give them a better understanding.
Let’s start by inserting the following layers:
Actions- adds interaction to the game
Crosshair- so the player knows where they are shooting
Score- this is so the player can see how well they are doing
Enemy- this is what the player is to shoot, each time they hit it, the score goes up by 1.
Restart- this is so the player can play the game again if they want to
We are going to start by making the crosshair, this is very easy. Select the stroke color and set it to red, and set the fill color to no fill.
Making sure you have the oval tool selected, in the properties inspector, change the stroke height to about 2.75.
Now draw out a circle on the stage, (remember that this will be the custom cursor, so don’t make it too big).
Now select the line tool and draw a cross in it, hence the name crosshair.
Now select the whole crosshair and convert it to a movie clip naming it crosshair, also give it an instance name of crosshair in the properties inspector.
Now on the first frame of the actions layer, right click and select actions. On the first line type in:
Mouse.hide();
crosshair.onMouseMove = function() {
this._x = _xmouse;
this._y = _ymouse;
updateAfterEvent;
};
This was discussed in a previous tutorial.
Now for the enemy, for this example let’s just use a black circle to practice with.
Ensure that the enemy layer is below the crosshair layer otherwise the crosshair will appear behind the enemy.
Using the oval tool draw out a black circle on the stage, convert this in to a movie clip and name it enemy.
Now right click on the enemy and select actions, on the first line type in:
onClipEvent(mouseDown) {
if(this.hitTest(_root.crosshair)) {
_root.score+=1;
}
}
This means that if the crosshair is over the enemy and the mouse is clicked the score will go up by one. This was explained in more detail in a previous tutorial.
Now for the score. Select the text tool, in the properties inspector set it to dynamic text. Now draw out a text box in the top centre of the stage, now give it a var of score. It would also be a good idea to set the text so that it is aligned in the centre of the text box. Do this by selecting the option in properties inspector align centre.
In the first frame of the actions layer type this underneath the code that is already there:
var score = 0;
As we know this sets the score to zero.
Now in the following layer insert a keyframe at frame 206.
Actions
Score
Crosshair
Restart
At frame 205 of the enemy layer insert a keyframe
Here is where we want the final score to be displayed. Start by moving the score on frame 206 to the centre and enlarging the text size, only on the last keyframe(206). Make sure the score has not changed in the other keyframes.
Now above the score in frame 206 on the score layer, insert a static text box above it that says: Your Score:
This is so the player knows that the number on the screen is what they scored.
On the last key frame of the actions layer, right click and select actions, on the first line type in:
Stop();
This is so the game stops here for the player to read their score.
Last but no least we want to add a restart button to restart the game.
On the last keyframe of the of the restart layer, using the oval tool draw out a circle and write restart inside of it using either the brush tool or the text tool.
Convert this to a button naming it restart.
Right click on the button and select actions, now on the first line type in:
on (release) {
gotoAndPlay(1);
}
This means that when this button is clicked on the, flash will go back to frame 1 and play from there again.
There you go, your very first game, as simple as it is, you have to start somewhere.
NOTE: MAKE SURE THE ENEMY IS NOT DISPLAYED ON THE LAST KEYFRAME, OTHERWISE THE PLAYER CAN CONTINUE TO CLICK ON THE ENEMY AND THEIR SCORE WILL KEEP GOING UP.
How to make a button
Adding a button to your game or movie
This is just for a little bit of extra knowledge.
Rename layer 1 button. Insert a oval shape on the stage. Put some text in it such as, Next or Play etc.
Now convert is to a button and name it button.
Now double click on this button to enter it timeline. I am sure you noticed a big difference in the buttons timeline, we will only be discussing the over and the down part of the timeline for now, we will further this later on in the tutorial.
Over: this simply means when the mouse is over this button. Insert a keyframe under Over, now in that keyframe change the colour of the button. Now when the user has the mouse over the button the button will change colour.
Down: this means when the mouse is down, so when the user clicks on this button. Insert a keyframe under this also, change the colour again. Now go back to the main timeline and test the movie. When the user click on this button it will change to the you put in the down section. (it will only be this colour while the mouse is down). When you have the mouse over the button it will also change to the colour that you put under the over section.
Other tutorials you might like:
Learn how to animate a button
How to animate text
Text Animation(tut.13)
This tutorial is good for writing out the titles of games/movie that you are working on.
Rename layer 1 text. Change the fps from 12 down to about 6 or 5.
On the first frame of the text layer, using the text tool right out your first name or something like that. Now right click on the text and select break apart. What this does is separates all the letters so that we can move them individually.
Start by inserting 5 keyframes all next to each other, so it will take up 5 frames.
On the second keyframe slightly move every letter, whether it’s up a little bit higher, or down a little bit lower. Now continue doing this on the other keyframes, but don’t move them to far otherwise it will look like just a bunch of messy text moving around.
Now when you have done this, test your movie, the text will have a nice little animation now. Perhaps you could go back to your mini movie and add a title to it and animate the title.
This tutorial is good for writing out the titles of games/movie that you are working on.
Rename layer 1 text. Change the fps from 12 down to about 6 or 5.
On the first frame of the text layer, using the text tool right out your first name or something like that. Now right click on the text and select break apart. What this does is separates all the letters so that we can move them individually.
Start by inserting 5 keyframes all next to each other, so it will take up 5 frames.
On the second keyframe slightly move every letter, whether it’s up a little bit higher, or down a little bit lower. Now continue doing this on the other keyframes, but don’t move them to far otherwise it will look like just a bunch of messy text moving around.
Now when you have done this, test your movie, the text will have a nice little animation now. Perhaps you could go back to your mini movie and add a title to it and animate the title.
How to use alpha
Alpha
This tutorial is only very short, but it is still important to know about alpha.
We will only be using on layer, you don’t even have to give it a name.
Start by drawing any shape you want to. Convert it to a graphic, name it whatever, something relating to the shape you have drawn. Now select the shape, in the properties inspector, where it says colour, change it from none, to alpha. Now another little window next to this will come up. Change that from 100% down to about 70%. Now look at the object. Alpha basically controls the transparency of the shape. This is particularly good when creating windows, water etc.
Although this was a very short tutorial, it is all information we need to know, it may be a good idea to jot down some of these points.
TIPS FOR MAKING A FLASH MOVIE
When making a flash movie it is a good idea to do a rough plan on some paper or something as I mentioned previously throughout this guide.
Figure out who are your characters going to be, what type of personality are they going to have.
How many layers will be needed when making your flash movie?
What clothes will your characters be wearing, what are there names?
Don’t worry about the name of your flash movie yet, that can be done at the end of the flash movie.
When you have jotted down your movie and you know where you are taking it, that’s when you start.
This will help you so much if you have a rough plan of what you are planning to do in your flash movie. Just like when you write narratives, you should do a plan first.
By doing this plan it is a better way to get ideas, spend a bit more time working out who your characters are and what type of personality they have.
DID YOU KNOW? South Park along with many other cartoons are made using flash 8 Professional.
Let’s begin the next tutorial.
This tutorial is only very short, but it is still important to know about alpha.
We will only be using on layer, you don’t even have to give it a name.
Start by drawing any shape you want to. Convert it to a graphic, name it whatever, something relating to the shape you have drawn. Now select the shape, in the properties inspector, where it says colour, change it from none, to alpha. Now another little window next to this will come up. Change that from 100% down to about 70%. Now look at the object. Alpha basically controls the transparency of the shape. This is particularly good when creating windows, water etc.
Although this was a very short tutorial, it is all information we need to know, it may be a good idea to jot down some of these points.
TIPS FOR MAKING A FLASH MOVIE
When making a flash movie it is a good idea to do a rough plan on some paper or something as I mentioned previously throughout this guide.
Figure out who are your characters going to be, what type of personality are they going to have.
How many layers will be needed when making your flash movie?
What clothes will your characters be wearing, what are there names?
Don’t worry about the name of your flash movie yet, that can be done at the end of the flash movie.
When you have jotted down your movie and you know where you are taking it, that’s when you start.
This will help you so much if you have a rough plan of what you are planning to do in your flash movie. Just like when you write narratives, you should do a plan first.
By doing this plan it is a better way to get ideas, spend a bit more time working out who your characters are and what type of personality they have.
DID YOU KNOW? South Park along with many other cartoons are made using flash 8 Professional.
Let’s begin the next tutorial.
Fun with text
Creating a Flash Project Using Only Text
This tutorial is particularly good for perhaps advertising, selling or just something to expand your knowledge.
This is a very simple flash file, but yet, good to know.
We will only need 1 layer, rename layer 1, text.
Now for this tutorial I will be advertising Learning Flash 8 Professional.
On the first key frame using the brush tool draw the Letter L. actually, only draw the first letter of the thing you are going to write, in my case in is L for Learning Flash 8 Professional. Now skip a frame and on the 3rd keyframe draw the second letter of what you are writing. Perhaps this may be in a different colour to make it look more appealing, or larger than the other letter. Remember, be creative. Now continue to draw the next letter on ever second frame remembering to insert new keyframes. When you have written out the whole thing, test it, now it looks like the text is being typed out the screen. The reason I have used the brush tool is it doesn’t look as plain as what it would when using the text tool. Now to add to this try adding some animation, you may want to animate the text, by now you should know how to do this, if not, I suggest you take a few of the previous tutorials again.
Add anything to this to make it more appealing to the viewer.
I might want to have learning appear on the first few frame, and than using a shape tween transform it in flash and so on, this creates a nice effect.
Try a few different things, as I have said plenty of times, exploring is the way to learn new things.
This tutorial is particularly good for perhaps advertising, selling or just something to expand your knowledge.
This is a very simple flash file, but yet, good to know.
We will only need 1 layer, rename layer 1, text.
Now for this tutorial I will be advertising Learning Flash 8 Professional.
On the first key frame using the brush tool draw the Letter L. actually, only draw the first letter of the thing you are going to write, in my case in is L for Learning Flash 8 Professional. Now skip a frame and on the 3rd keyframe draw the second letter of what you are writing. Perhaps this may be in a different colour to make it look more appealing, or larger than the other letter. Remember, be creative. Now continue to draw the next letter on ever second frame remembering to insert new keyframes. When you have written out the whole thing, test it, now it looks like the text is being typed out the screen. The reason I have used the brush tool is it doesn’t look as plain as what it would when using the text tool. Now to add to this try adding some animation, you may want to animate the text, by now you should know how to do this, if not, I suggest you take a few of the previous tutorials again.
Add anything to this to make it more appealing to the viewer.
I might want to have learning appear on the first few frame, and than using a shape tween transform it in flash and so on, this creates a nice effect.
Try a few different things, as I have said plenty of times, exploring is the way to learn new things.
How to make a time limit
Making a Countdown Timer
This tutorial is only a short and simple one.
Start by naming layer 1 counter, insert another layer and name it actions. Right click on frame 1 and select actions. On the first line type in:
Stop();
We need to do this as we will have 2 frame and we want it to stop on frame 1 as this is where a countdown will be.
On the first frame of the counter layer draw out a basic shape with a fill colour (recommended). This is going to hold the countdown time. Select the whole shape you just made and convert it to a Movie Clip, name it time control. The reason we will be naming it time control is we are going to use this to control the countdown.
Select the text tool and same as before make sure it is set to dynamic text, now change the font colour to a different colour to what the time control is, otherwise you won’t be able to see the countdown.
Now draw out the text box on top of the time control movie clip.
Give the countdown a var of countdown, var was discussed in a previous tutorial.
Now double click on the time control movie clip to enter its timeline.
Here is where we will set the speed of the countdown. First of all, check to see what your fps is set to, it is set to 12 by default, so I will use twelve. The fps was discussed in a previous tutorial. Now I want my countdown to go down a number every second, so I am going to insert a keyframe at frame 13. I realize I said 13 and not twelve. Why I did this: If you look at the bar underneath the timeline where it displays how many seconds into the timeline you are, you’ll see that at the 12th frame it is .9 sec, and at the 13th frame it is exactly 1 second.
Now right click on the 13th frame which is the last keyframe, and select actions.
Now on the first line type:
_root.counter -= 1;
This simply means that every time this frame is played the countdown will go down by one. The reason we have put _root because we are referring to the timeline.
Note: Before the = sign there is a minus “-“ you cannot see it very well.
Now click on scene 1 to enter the main timeline.
Right click on the first frame in the action layer, and select action, underneath stop(); type in:
var counter = 10;
This sets the counter to start at ten.
Now right click on the time control and select actions, on the first line type in:
onClipEvent (enterFrame) {
if (_root.counter == 0) {
_root.gotoAndStop(2);
}
}
The reason we have put clip event is because we have applied these actions to a movie clip.
enterFrame means when the frame is entered, so you won’t have to press any buttons, it will just happens when the countdown reaches zero.
if (_root.counter == 0) {
_root.gotoAndStop(2);
}
}
This simply means when the counter reaches zero, it is to go to frame 2 and stop at frame 2.
Now close the actions menu. Insert a keyframe at the second keyframe of the counter layer, on the second keyframe, delete everything.
Now using the brush tool or the text tool write something like time up.
Now test the movie, the countdown will start running from 10 down to 0, when it reaches zero it will say time up.
Don’t worry is this tutorial was a little confusing, it will all come with time until you understand what all this AS2 means. We will be working with it a fair bit in later tutorials.
Before moving on to the next tutorial, have a play around in flash, creating some flash animations, testing out the simple AS2 we have recently learnt, think of this as revision, but have fun with this.
Tip 8. Have fun when using flash.
Why this helps: It is obvious, if you are creating things in flash that you find boring you lose interest, so if you are working on something in flash that is getting boring, try think of something you could add to this to make it fun.
Tip 9. Muck around in flash often exploring new things.
Why this helps: This is how we find out new things, improve our flash projects, get better at using flash.
Alright, let’s start our next tutorial.
How to make a 'scared ya' maze game
This video includes a section showing you how to add a 'scared ya' part, simply ignore this part if you want it just to be a normal game.
Making your first game
We will be making our first game in this tutorial. Even if you have no interest in making games with flash, I recommend that you take this tutorial as it will expand on your knowledge and skills in flash, this will help with your creativity just as much as making a mini movie.
Okay let’s start. This is going to be a very simple game as this is our very first tutorial on game making, but this will be good for your skills in using flash.
Rename layer 1 to score. This will be our score layer, every game needs a score.
Now insert another layer and name it actions. Insert one more layer and name it enemy. Ok, that is all the layers we will need for our first game. Let’s start with our score layer. Start by selecting the text tool, in the properties inspector, change the box that says static text to dynamic text, now draw out a text box that would hold about three digits. Make the text size about 70 to 80. Move the text box the top of the stage and position it in the centre. Now back in the properties inspector of the text box you will see a little box that says var, if you do not see this box, click on the little down arrow in the lower right and corner of the properties inspector. Now in the box where it says var, type in “score”, without the quotations.
This is so that we can communicate with this text box through AS2.
On the first and only frame of the actions layer right click and select actions.
Now on the first line type in:
var score = 0;
what this does it sets the score to zero, as we gave the text box a variable of score, flash knows that we want this to be set to zero, var is short for variable.
Now on the enemy layer draw out a circle or any simple shape, and convert it to a button, and name it enemy.
Now right click on the button and select actions, on the first line type in:
on (release) {
score += 1;
}
We already know what the on (release) means as it was discussed in a previous tutorial. score+=1; simple means when the button is clicked on the score is to go up by one. If we were to change the 1 to a 6 it would go up by 6. {} these simply define that these are the action to do when the button has been clicked on.
Now test the move, click on the button, each time you click on the button the score will go up by 1. Great work, you have made a 5 star game, should sell for millions. This is a very basic tutorial on game making, but further on, I will make more advanced tutorials for those of you who would be interested.
Now, although this tutorial was not important to all of you, it is still good to take it anyway, as I said, it introduces you to the different areas of flash, understanding this will help you greatly.
Next we will be making a timer that counts down form 10 to 0, when the timer reaches 0 it will go to the next frame and stop. This tutorial is not really important, but I would recommend taking it anyway, just to understand it a bit more. I want to introduce you to some very back AS2.
How to make a movie
Making Your Own Mini Movie
We are now advancing again, we will now create our own mini movie. We will be exploring new areas of Flash.
Lets start by inserting all the layers that we will need. We will need the following layers:
Building
Car
Character
Audio
Road
Grass
Sky
Tree
These are the layers that will be required to make our mini movie. Let’s start designing these things. We will start with the buildings.
On the stage in any layer as we won’t be keeping it on the stage, draw out a few rectangles that vary in size, keep the aligned at the bottom. Now add windows to these buildings. Now add any other feature to the buildings that you think is necessary.
When you are happy with these buildings, select them all and convert it to a graphic, naming it Buildings.
Deselect the buildings than reselect them and delete them. (Q. Why did we deselect them first. A. Because if we didn’t, the image that we have put in the library would also be deleted, so to confirm that we are happy the way it is, we must first deselect the image).
We will now start by making our car. Draw a car on the stage, this can be as basic or advanced as you want. It may be just a rectangle with a couple of circles attached to the bottom of it. Convert this to a graphic also, name it Car.
Delete the car using the same method as before.
The audio that we want is the sound of a car horn, you could find one somewhere on the internet, or you could record yourself making a car horn sound, or even the sound of your own car horn.
Once you have this audio file, import it to the library, this was explained in a previous tutorial.
The road is really simple to make, make it probably a black or grey colour. We are just going to make this road another rectangle, a bit longer than the stage. You can add lines to it if you want. Now convert this to a graphic and name it Road.
Delete the road.
For the grass this is just another rectangle, and I would suggest making it a shade of green, as grass seems to have a tendency of being green. Also make this a bit longer than the stage. Now convert it to a graphic, and name it grass.
We will be trying something a little different with the sky to give it a better effect.
Click on the colour and set it to no line (the red diagonal line), than select the fill colour. This is where we will be doing something a little different. Above the library if you have it positioned on the right hand side of the workspace, click on the thing that says color. This will bring up a list of options on what to do with the color. Where it says type, most like be set to solid; change it to linear.
Now at the bottom of the colour panel there is a window that displays what the color looks like. We are going to mix two shades of blue together. Double click on one o the little squares just above the display window, now a pain panel will be displayed select one of the darker shades of blue. Now double click on the other square, and choose a lighter shade of blue. Now these squares can be slide along the bar which will control the colour and how much of the square it will take up, we want these two colours to blend nicely contrast nicely, so move them around until it looks nice and neat. You can add another colour simply by click somewhere else along the slider.
Now when you are happy with the colour, make sure it has been applied to your sky. Now select the whole sky, right click on it and select free transform, rotate it about 45 degrees so that the darker colour is on top of the lighter one, instead of them being next to each other. Stretch it out so it is a little longer than the stage, and convert it to a graphic, and name it Sky.
Last but not least the tree. Draw a simple tree on the stage, giving the leaves a shade
of green, and the trunk a shade of brown.
Convert this to a graphic and name it tree.
We now have everything we need for our mini movie, now we must insert all the animations needed.
First of all we need to work out how to fit all our props on to the stage, start by dragging the sky symbol on to the stage in the sky layer. Position it at the top of stage, we won’t worry about the size just yet.
Now the next thing we will be placing on the stage is the buildings. Place the buildings on the building layer. Make sure that the building layer is above the sky layer, otherwise the sky will hide the buildings.
Now we want the buildings to look like there on the grass, so make sure the grass layer is below the buildings layer and line the grass up with the bottom of the sky.
Next we will insert the road, which will be straight underneath the grass layer.
Now insert the car on the car layer, make sure the car layer is over the road layer, and position the car off the right of the stage. The car will have to be facing towards the left side of the stage.
Now is the time to position and size everything.
Check for the following:
No white showing. Eg. No gap between the sky and the grass etc.
Make things to scale: You obviously don’t want the car to be bigger than the buildings, and you also want the stage nice and neat.
Once you are happy with these results, it is time to add some animation to the car. This is going to be really simple. Insert a keyframe on the 10th keyframe in the car layer, on the 10th keyframe drag the car off to the left side of the stage, making sure it is still on line with the road. Now insert another keyframe at the 11th frame, the car should be off to the left of the stage. Now on the 11th keyframe, flip the car so it is facing the way it just come from, this was explained in a previous tutorial. Now insert another keyframe at frame 21. Create motion tween between frames 1 and 10, and between frame 11 and 21 1.
Test the movie, you should have a car driving across the screen, than it drives back across the screen. Congratulations, you have just made your first mini movie. Keep this file, as when you progress through these tutorials you can edit them to make them better. Now I mentioned that we would be putting the character in this mini movie. I want to leave this bit up to you, for your own good. You figure out what you want the character to do, what the character may say, and where to place him in this movie.
Well done on completing this tutorial, now move on to the next.
We are now advancing again, we will now create our own mini movie. We will be exploring new areas of Flash.
Lets start by inserting all the layers that we will need. We will need the following layers:
Building
Car
Character
Audio
Road
Grass
Sky
Tree
These are the layers that will be required to make our mini movie. Let’s start designing these things. We will start with the buildings.
On the stage in any layer as we won’t be keeping it on the stage, draw out a few rectangles that vary in size, keep the aligned at the bottom. Now add windows to these buildings. Now add any other feature to the buildings that you think is necessary.
When you are happy with these buildings, select them all and convert it to a graphic, naming it Buildings.
Deselect the buildings than reselect them and delete them. (Q. Why did we deselect them first. A. Because if we didn’t, the image that we have put in the library would also be deleted, so to confirm that we are happy the way it is, we must first deselect the image).
We will now start by making our car. Draw a car on the stage, this can be as basic or advanced as you want. It may be just a rectangle with a couple of circles attached to the bottom of it. Convert this to a graphic also, name it Car.
Delete the car using the same method as before.
The audio that we want is the sound of a car horn, you could find one somewhere on the internet, or you could record yourself making a car horn sound, or even the sound of your own car horn.
Once you have this audio file, import it to the library, this was explained in a previous tutorial.
The road is really simple to make, make it probably a black or grey colour. We are just going to make this road another rectangle, a bit longer than the stage. You can add lines to it if you want. Now convert this to a graphic and name it Road.
Delete the road.
For the grass this is just another rectangle, and I would suggest making it a shade of green, as grass seems to have a tendency of being green. Also make this a bit longer than the stage. Now convert it to a graphic, and name it grass.
We will be trying something a little different with the sky to give it a better effect.
Click on the colour and set it to no line (the red diagonal line), than select the fill colour. This is where we will be doing something a little different. Above the library if you have it positioned on the right hand side of the workspace, click on the thing that says color. This will bring up a list of options on what to do with the color. Where it says type, most like be set to solid; change it to linear.
Now at the bottom of the colour panel there is a window that displays what the color looks like. We are going to mix two shades of blue together. Double click on one o the little squares just above the display window, now a pain panel will be displayed select one of the darker shades of blue. Now double click on the other square, and choose a lighter shade of blue. Now these squares can be slide along the bar which will control the colour and how much of the square it will take up, we want these two colours to blend nicely contrast nicely, so move them around until it looks nice and neat. You can add another colour simply by click somewhere else along the slider.
Now when you are happy with the colour, make sure it has been applied to your sky. Now select the whole sky, right click on it and select free transform, rotate it about 45 degrees so that the darker colour is on top of the lighter one, instead of them being next to each other. Stretch it out so it is a little longer than the stage, and convert it to a graphic, and name it Sky.
Last but not least the tree. Draw a simple tree on the stage, giving the leaves a shade
of green, and the trunk a shade of brown.
Convert this to a graphic and name it tree.
We now have everything we need for our mini movie, now we must insert all the animations needed.
First of all we need to work out how to fit all our props on to the stage, start by dragging the sky symbol on to the stage in the sky layer. Position it at the top of stage, we won’t worry about the size just yet.
Now the next thing we will be placing on the stage is the buildings. Place the buildings on the building layer. Make sure that the building layer is above the sky layer, otherwise the sky will hide the buildings.
Now we want the buildings to look like there on the grass, so make sure the grass layer is below the buildings layer and line the grass up with the bottom of the sky.
Next we will insert the road, which will be straight underneath the grass layer.
Now insert the car on the car layer, make sure the car layer is over the road layer, and position the car off the right of the stage. The car will have to be facing towards the left side of the stage.
Now is the time to position and size everything.
Check for the following:
No white showing. Eg. No gap between the sky and the grass etc.
Make things to scale: You obviously don’t want the car to be bigger than the buildings, and you also want the stage nice and neat.
Once you are happy with these results, it is time to add some animation to the car. This is going to be really simple. Insert a keyframe on the 10th keyframe in the car layer, on the 10th keyframe drag the car off to the left side of the stage, making sure it is still on line with the road. Now insert another keyframe at the 11th frame, the car should be off to the left of the stage. Now on the 11th keyframe, flip the car so it is facing the way it just come from, this was explained in a previous tutorial. Now insert another keyframe at frame 21. Create motion tween between frames 1 and 10, and between frame 11 and 21 1.
Test the movie, you should have a car driving across the screen, than it drives back across the screen. Congratulations, you have just made your first mini movie. Keep this file, as when you progress through these tutorials you can edit them to make them better. Now I mentioned that we would be putting the character in this mini movie. I want to leave this bit up to you, for your own good. You figure out what you want the character to do, what the character may say, and where to place him in this movie.
Well done on completing this tutorial, now move on to the next.
Make a talking character
Creating a Character That Talks
This is where you character comes to life, where it get’s it’s personality.
Before we start, if you are still finding it hard to work with flash, don’t worry, flash can take a bit of time to get the hang of, but once you do, you can do all sorts of things, flash is a very powerful tool. Alright, what we need to do first is import some some audio to the library, you will need a microphone if you want to import your own voice, if you don’t have a microphone just have a look around for a short audio file to work with. Once you have an audio file that you are happy with continue on with this tutorial.
To import the audio file to the library click on the menu item file/import/import to library. Now find the audio file that you want and press open.
This will import it to the library. Now rename layer 1, character. Now go to the menu item insert, new symbol, check the box next to movieclip, than name it character. Now in the character timeline, insert a new layer above the layer 1 and name it mouth, layer 1 body and head. In the body and head layer draw you body and head without including the mouth. Now insert another layer called audio, insert a normal frame at about frame 5. now on the first frame select you audio file and drag it on to the stage. On the frames in the audio layer, squiggly lines will appears, that is the sound waves. The only problem is, the audio is most like likely longer than 5 frame. So click on the last frame than drag it out until the whole audio file fits properly. This audio layer is only to get the mouth in sync with the audio, we won’t actually be keeping this layer. Now on the mouth layer draw the normal mouth on the first frame. Where the audio start, insert a new keyframe on the mouth layer and change the shape of the mouth, insert another keyframe about one away form that one and change the mouth shape to math the audio. Where the audio stops talking draw the mouth that is normal, or you can right click on the first frame of the mouth layer where the mouth was normal, and select copy frames, and paste that frame where the audio is speaking. Continue doing this for the rest of the audio file, changing the mouth shapes to match the words of the audio file. This is only your first attempt, so don’t be to worried about making it perfect. When you have got the mouth talking where the audio is speaking, delete the audio layer. That is it for your character, so click on scene 1 to go back to the main timeline. Here you will need to insert a layer named audio. Now repeat the same process as before to put your audio file on the frames. Now on the first frame of your character layer drag your character from the library and place him in the center of the stage. Insert a key frame on the character layer where the audio stops. Now you will have a character that appears to be talking, press ctrl enter and see how it looks. As I said, don’t be to stressed if it is a little sketchy, it all comes with practice.
Here is your first assignment, try and put all the things that you have learnt so far and put them all into the one flash project. This would include a motion tween, shape tween, a motion guide, a button to start the file, a walking person, and a person who talks.
This might help you to think of how you can combine these in to one.
Motion Tween: Create a sun that slowly goes across the stage.
Shape Tween: Could have your characters first name, than have it transform in to his/her last name.
Motion Guide: This could as simple as a bird flying around the scene.
I want you to have a play around with these things I have taught you and really get to understand the possibilities, when feel comfortable, come back and continue with the next tutorial.
Before we move on to the next tutorial we read through these tips.
Tip 1. It is a good idea to plan out your flash presentation first, get an idea of the layers that will be needed etc.
Why this helps: this will help you work through the flash file a lot quicker and easier; it also helps you organize it nice and neat.
Tip 2. Prepare the moviclips, buttons, graphics etc. before you start adding the animations or shape tweens etc.
Why this helps: This gets the designing process out of the way and makes it less confusing when adding the animations that are required.
Tip 3: Have each separate symbol on a different layer.
Why this helps: If the symbol is on a layer of it’s own, it makes it much easier to edit, or make any changes to it that are necessary, and as it is on a layer of its own, it won’t change anything on the other layers.
Tip 4: Take notes of some of the mistakes you make and how you fix these mistakes.
Why this helps: This will help you so much when creating flash projects, as you won’t make this mistake again, and if you do, you will know exactly how to fix it.
Tip 5: Experiment with things.
Why this helps: One of the best way to learn new things in flash is to experiment, try something different, this will improve the quality of the movie/game a lot.
Tip 6: Be creative.
Why this helps: The more creative the flash file is the more appealing it will be. Let you imagination go wild, add all types of this to make it fun and interesting.
Tip 7: Challenge yourself.
Why this helps: The only way you can better is by challenging yourself, do that little bit extra. This will also help you learn new things.
Flash 8 has so many possibilities, it would be near impossible to explain every detail about flash, so it helps to do a little bit of exploring for yourself.
Don’t be afraid to make mistakes, it’s all part of the learning process.
This is where you character comes to life, where it get’s it’s personality.
Before we start, if you are still finding it hard to work with flash, don’t worry, flash can take a bit of time to get the hang of, but once you do, you can do all sorts of things, flash is a very powerful tool. Alright, what we need to do first is import some some audio to the library, you will need a microphone if you want to import your own voice, if you don’t have a microphone just have a look around for a short audio file to work with. Once you have an audio file that you are happy with continue on with this tutorial.
To import the audio file to the library click on the menu item file/import/import to library. Now find the audio file that you want and press open.
This will import it to the library. Now rename layer 1, character. Now go to the menu item insert, new symbol, check the box next to movieclip, than name it character. Now in the character timeline, insert a new layer above the layer 1 and name it mouth, layer 1 body and head. In the body and head layer draw you body and head without including the mouth. Now insert another layer called audio, insert a normal frame at about frame 5. now on the first frame select you audio file and drag it on to the stage. On the frames in the audio layer, squiggly lines will appears, that is the sound waves. The only problem is, the audio is most like likely longer than 5 frame. So click on the last frame than drag it out until the whole audio file fits properly. This audio layer is only to get the mouth in sync with the audio, we won’t actually be keeping this layer. Now on the mouth layer draw the normal mouth on the first frame. Where the audio start, insert a new keyframe on the mouth layer and change the shape of the mouth, insert another keyframe about one away form that one and change the mouth shape to math the audio. Where the audio stops talking draw the mouth that is normal, or you can right click on the first frame of the mouth layer where the mouth was normal, and select copy frames, and paste that frame where the audio is speaking. Continue doing this for the rest of the audio file, changing the mouth shapes to match the words of the audio file. This is only your first attempt, so don’t be to worried about making it perfect. When you have got the mouth talking where the audio is speaking, delete the audio layer. That is it for your character, so click on scene 1 to go back to the main timeline. Here you will need to insert a layer named audio. Now repeat the same process as before to put your audio file on the frames. Now on the first frame of your character layer drag your character from the library and place him in the center of the stage. Insert a key frame on the character layer where the audio stops. Now you will have a character that appears to be talking, press ctrl enter and see how it looks. As I said, don’t be to stressed if it is a little sketchy, it all comes with practice.
Here is your first assignment, try and put all the things that you have learnt so far and put them all into the one flash project. This would include a motion tween, shape tween, a motion guide, a button to start the file, a walking person, and a person who talks.
This might help you to think of how you can combine these in to one.
Motion Tween: Create a sun that slowly goes across the stage.
Shape Tween: Could have your characters first name, than have it transform in to his/her last name.
Motion Guide: This could as simple as a bird flying around the scene.
I want you to have a play around with these things I have taught you and really get to understand the possibilities, when feel comfortable, come back and continue with the next tutorial.
Before we move on to the next tutorial we read through these tips.
Tip 1. It is a good idea to plan out your flash presentation first, get an idea of the layers that will be needed etc.
Why this helps: this will help you work through the flash file a lot quicker and easier; it also helps you organize it nice and neat.
Tip 2. Prepare the moviclips, buttons, graphics etc. before you start adding the animations or shape tweens etc.
Why this helps: This gets the designing process out of the way and makes it less confusing when adding the animations that are required.
Tip 3: Have each separate symbol on a different layer.
Why this helps: If the symbol is on a layer of it’s own, it makes it much easier to edit, or make any changes to it that are necessary, and as it is on a layer of its own, it won’t change anything on the other layers.
Tip 4: Take notes of some of the mistakes you make and how you fix these mistakes.
Why this helps: This will help you so much when creating flash projects, as you won’t make this mistake again, and if you do, you will know exactly how to fix it.
Tip 5: Experiment with things.
Why this helps: One of the best way to learn new things in flash is to experiment, try something different, this will improve the quality of the movie/game a lot.
Tip 6: Be creative.
Why this helps: The more creative the flash file is the more appealing it will be. Let you imagination go wild, add all types of this to make it fun and interesting.
Tip 7: Challenge yourself.
Why this helps: The only way you can better is by challenging yourself, do that little bit extra. This will also help you learn new things.
Flash 8 has so many possibilities, it would be near impossible to explain every detail about flash, so it helps to do a little bit of exploring for yourself.
Don’t be afraid to make mistakes, it’s all part of the learning process.
Make your character walk
Making a Walking Character
Okay let’s begin, we will start by making all the layers that we need, these are the layers that you will need, a layer named actions, button and character. On the actions layer right click on the first frame, select the option actions. This will bring up a screen where actions will be placed. This is what you need to put on the first line:
1.Stop();
What this does is stops the flash movie at this frame. The reason we have done this is because we want to put a button on this layer that will start the flash movie, and without writing stop(); the movie will continue playing without it stopping where the button is. Let’s start by making a button. On the first and only frame of the button layer, draw out a rectangle or an oval, now grab the text tool making sure the text is a different colour than the text, this can be changed via the properties inspector which was explained in a previous tutorial. Now change the text size to a size that will fit in the oval or rectangle, and write start in the text box. Now place this text on top of the circle or rectangle. Now select the whole button and convert it to a symbol. Now this time we are not going to convert it to a graphic, we will be converting it in to a button, give it the name start or whatever you will recognize it by. Now we must also add some simple actions to this button, to do this right click on the button, and select actions, now on the first line put in the following:
on (release) {
gotoAndPlay(2);
}
Here is what this will do:
On(release) = this means that it will do the actions when the mouse is clicked and released on the button.
{gotoAndPlay(2));
} = As this is in front of the on(release) it will when the button has been pressed go to the second keyframe represented by (2) and play from there.
Here is this code translated to English.
On(release) {
gotoAndPlay(2);
} “Actionscript”
When the mouse is clicker is (released) {go to the second keyframe and play it from there} “English”
Ok now let’s move on the character. Start by going to the menu item insert, than select new symbol. Check the box next to movieclip, than name it character.
Now up where it says scene 1, next to that, it will say character, what you have done is entered the characters timeline, which is where we will be creating the walk. To enter any symbols timeline, simply double click on it. Now back to where we were. On the first frame, draw out a very simple character, I suggest to start off with just a simple stick figure until be get the hang of creating the characters walk.
Now insert a new keyframe in the 3rd keyframe, in this third keyframe delete the legs and the legs only. You can do this by clicking on one of the legs, than by holding shift, click on the other leg as well, than delete them both at the same time, or just delete them separately. Okay, in frame 3 is what we want the character legs to look like when he is in the middle of his first step. What we want to do is turn on onion skin. Onion skin is located under the frames, you will see a few little icons, scan through them until you find onion skin, than click on it.
Now a faded picture of what the legs looked like on frame 1 will appear, this will help to keep the legs the same size and to figure out where to put these next legs.
Now imagine stand up and take a few steps, what you want to do is get a very basic idea of the way your legs move when you walk. You should only end up creating about 3-4 separate legs. It is a good idea to skip one frame when inserting a new keyframe so that the characters legs don’t move to fast.
Now when you have got the second pair of legs in, create another pair using the same process. Now when you have the walk ready, turn off onion skin by clicking on it again. Note: you want the legs on the last keyframe to look fairly similar to the legs on the first keyframe.
Now up where it says scene 1 and character, click on scene 1. This will take you back in to the main timeline. Now in the library you will see the movieclip character, click on it once, now a picture of you little man will appear in the library window, in the right corner of this window will be a play button, click on this, and your character will start the walk you made.
In the character layer insert a keyframe in frame 2, then drag your character into the second keyframe and position him off a bit to the right of the stage, make sure he his facing the left way, if not right click on him and select free transform. Now click an hold on the left box that appears around your and drag it to the right, this will flip your character around, similar to a mirror.
Now at frame twenty insert another keyframe in the character layer, in frame 20 drag your character off to the right of the stage, now create a motion tween.
That is it, press ctrl enter, the start button will come up on the screen, when you press on it, the movie will start. You are progressing really well, congratulations. Please move on to the next tutorial.
Okay let’s begin, we will start by making all the layers that we need, these are the layers that you will need, a layer named actions, button and character. On the actions layer right click on the first frame, select the option actions. This will bring up a screen where actions will be placed. This is what you need to put on the first line:
1.Stop();
What this does is stops the flash movie at this frame. The reason we have done this is because we want to put a button on this layer that will start the flash movie, and without writing stop(); the movie will continue playing without it stopping where the button is. Let’s start by making a button. On the first and only frame of the button layer, draw out a rectangle or an oval, now grab the text tool making sure the text is a different colour than the text, this can be changed via the properties inspector which was explained in a previous tutorial. Now change the text size to a size that will fit in the oval or rectangle, and write start in the text box. Now place this text on top of the circle or rectangle. Now select the whole button and convert it to a symbol. Now this time we are not going to convert it to a graphic, we will be converting it in to a button, give it the name start or whatever you will recognize it by. Now we must also add some simple actions to this button, to do this right click on the button, and select actions, now on the first line put in the following:
on (release) {
gotoAndPlay(2);
}
Here is what this will do:
On(release) = this means that it will do the actions when the mouse is clicked and released on the button.
{gotoAndPlay(2));
} = As this is in front of the on(release) it will when the button has been pressed go to the second keyframe represented by (2) and play from there.
Here is this code translated to English.
On(release) {
gotoAndPlay(2);
} “Actionscript”
When the mouse is clicker is (released) {go to the second keyframe and play it from there} “English”
Ok now let’s move on the character. Start by going to the menu item insert, than select new symbol. Check the box next to movieclip, than name it character.
Now up where it says scene 1, next to that, it will say character, what you have done is entered the characters timeline, which is where we will be creating the walk. To enter any symbols timeline, simply double click on it. Now back to where we were. On the first frame, draw out a very simple character, I suggest to start off with just a simple stick figure until be get the hang of creating the characters walk.
Now insert a new keyframe in the 3rd keyframe, in this third keyframe delete the legs and the legs only. You can do this by clicking on one of the legs, than by holding shift, click on the other leg as well, than delete them both at the same time, or just delete them separately. Okay, in frame 3 is what we want the character legs to look like when he is in the middle of his first step. What we want to do is turn on onion skin. Onion skin is located under the frames, you will see a few little icons, scan through them until you find onion skin, than click on it.
Now a faded picture of what the legs looked like on frame 1 will appear, this will help to keep the legs the same size and to figure out where to put these next legs.
Now imagine stand up and take a few steps, what you want to do is get a very basic idea of the way your legs move when you walk. You should only end up creating about 3-4 separate legs. It is a good idea to skip one frame when inserting a new keyframe so that the characters legs don’t move to fast.
Now when you have got the second pair of legs in, create another pair using the same process. Now when you have the walk ready, turn off onion skin by clicking on it again. Note: you want the legs on the last keyframe to look fairly similar to the legs on the first keyframe.
Now up where it says scene 1 and character, click on scene 1. This will take you back in to the main timeline. Now in the library you will see the movieclip character, click on it once, now a picture of you little man will appear in the library window, in the right corner of this window will be a play button, click on this, and your character will start the walk you made.
In the character layer insert a keyframe in frame 2, then drag your character into the second keyframe and position him off a bit to the right of the stage, make sure he his facing the left way, if not right click on him and select free transform. Now click an hold on the left box that appears around your and drag it to the right, this will flip your character around, similar to a mirror.
Now at frame twenty insert another keyframe in the character layer, in frame 20 drag your character off to the right of the stage, now create a motion tween.
That is it, press ctrl enter, the start button will come up on the screen, when you press on it, the movie will start. You are progressing really well, congratulations. Please move on to the next tutorial.
Testing and publishing
Testing and Publishing the Movie/Game
When you test a movie it is the what the final result will look like when it has been published, to test what the movie will look like, you can either press ctrl enter, or select the menu item control, and go to test movie.
Okay, when you have finished a project, you can publish it. To do this go to the menu item file, and select publish settings. Now check the box next to Flash, unless you also want a HTML type file deselect any other options. Now this will publish it and turn it into a .swf file, which can be played through flash player, which is free. Flash player is a small file and be downloaded by somewhere like Google etc.
Now in the box next to Flash, type in the name of the file, than select where you want the .swf file to be saved. Now finally click on the option Publish. The file will be saved to wherever you chose only it will be a .swf file, if you have flash player you can just double click on it a view the file. Important Note: if you are planning on editing the flash movie/game, ensure to save a .fla file as well, which is just simply done by the normal save, as .swf files cannot be edited.
Okay, we are now going to advance a little bit in the tutorials, don’t worry, I will still be explaining these tutorials in depth. This next tutorial is how to create a walking character.
However, before we start these next few tutorials, I will explain what these tutorials are going to teach you.
We will be starting to learn a little bit of Actionscript 2.0. Creating animations that could be put in to a movie file.
In this first tutorial on creating a dude that will walk, we will be creating a button, when this button is clicked on by the person watching the movie, the movie will start playing.
If you are still a little unsure about the previous tutorials I recommend that you go over them.
How to insert a motion guide
Motion Guides
Welcome to tut.4, this tut. is an expansion on motion tweening.
Motion guides can be very helpful in creating both flash games and especially flash movies.
Okay, let’s start. Rename layer 1 circle. In frame 1, draw a circle and convert it to a graphic naming it circle. Now insert a keyframe at frame 20. Note: you do not have to insert the keyframe where I have specified, this is just for the example. Say for example you inserted a key frame at frame 1000, the movie would go for 83 seconds, this is if the frames per second is set to 12, but at the same time, the animation would be very slow and rather boring. Now I haven’t mentioned anything about the frames per second yet, so let me quickly tell you what it is and what it does. Flash by default sets the frame rate to 12fps, this means that the movie/game will play 12 frame per second. To adjust the frame rate, double click on the box that says 12fps, which is located under the timeline. Now where it says frame rate, change it to what ever you want it to be, as long it is between 0.01 and 120. So obviously the higher the frame rate, the faster it plays through the frames. Okay, back to the tutorial.
Right click on the circle layer and select the option add motion guide, now above the circle layer a motion guide layer will appear.
On the first frame of the motion guide layer, select the pencil tool and draw out a line, make sure the lines do not overlap. This is the path that the circle will take.
Now, where all the tools are look for the symbol that is represented by a magnet, make sure this is selected, this will make is so the selected object will snap to other objects. Now click on the circle with the selection tool, a little white circle will appear in the centre of the circle, drag the object by clicking on that little white circle and place it at the beginning of the line where you want the object to start.
In the last frame, select the little white circle and drag it to the opposite end of the line (the other side from where you placed it in frame 1). Now click on any frame on the circle layer between frame 1 and 20 and create a motion tween. That is it; the circle will follow the line until it reaches the end. Note: While you are still making the game/movie, the line will be visible, pay no attention to it, as when you watch it via test movie or when it has been published it will not be visible. Okay, I just mentioned two new things, underneath is a overview on these things.
Make a shape tween
Shape Tweening
Welcome to the first tutorial on shape tweening. This is another very important thing to know, this can create great effects, and it is very easy to do basic ones with just text.
By now you should be familiar with inserting and naming layers, knowing what a keyframe is, what the stage is and how to create graphics, if not, take notes from the previous two tutorial.
Lets start by renaming layer 1 text. Now we will be using the brush tool in this tutorial. Start by selecting the brush tool, now down a bit from the brush tool you can change the size of the brush. Change the size to a reasonably small size, and brush shape to a circle. Now on the stage start by writing you first name, I will use flash as an example, now insert keyframe at frame 10. delete your first name at only frame 10 and write in you last name around the same position you first name was. Now click on any frame between 1 and 10 and open the property inspector. Now we haven’t used the property inspector yet, will be displayed at the bottom of the stage, at the bottom of the window there is a little arrow that points in the up direction, click on it and the property inspector will be displayed. You will see an option named tween, select it and choose shape. The frames in the timeline should turn a light green colour and an arrow will appear, just like a motion tween would look, only with the green colour as well.
Now hit the enter button, your first name will now transform in to your last name.
Now how easy was that. We will be using the property inspector very regularly as we progress through the tutorials, but for now let’s not worry about it to much.
As I say with all the other tutorials, if it doesn’t work try again, try pick out where you went wrong, this is a very useful skill.
Try expanding on this also, create a new layer, name it shape, and insert a key frame at frame 20. Draw a circle on the first keyframe, and on the 20th keyframe delete the circle and replace it with a square, now repeat the process of creating a shape tween. You will now have a circle transforming into a square, and your name transforming in to your last name.
Congratulations, you have completed this tutorial, now move on the next tutorial.
Two motion tweens
Creating Two Motion Tweens
Now, this is similar to creating one motion tween, only we will be creating a new layer also.
Lets start by double clicking on layer 1, name it circle. Now right click on this layer and select the option Insert Layer. Another layer named layer 2 will appear, double click on this layer and name it square. You should now have two layers, a circle and a square layer. The reason we need to create two layers is because we want to do two separate motion tweens, and if we only had one layer, the tween would be applied to both of the objects, it is important to understand this as later on you will be working with layers a lot. On the first keyframe (explained in tut.1) of the circle layer, select the oval tool, make it any colour and draw an oval on the stage (explained in tut.1).
Now on the keyframe of the Square layer, select the rectangle tool and draw a square on the stage, make the square a different colour from the circle.
Now that these are on different layers you can apply the motion tween to the separate object without messing up the objects motion tween. If the square layer is currently on top of the circle layer, you can change this simply by left clicking and holding on the layer and drag it to where you want it. Lets say the circle layer is above the square layer, this would meant that the circle on the stage will appear on top of the square.
Using the selection tool select the whole circle and convert it to a graphic giving it the name of circle (explained in tut.1). Now do the same with the Square only name it square.
Now insert a keyframe at 10 and 20 on both layers (explained in tut.1)
At frame 10 where the new keyframe is, move the circle or square to another place on the stage, do this to the other layer also.
Now create a motion tween between frame 1 and 10 on both layers, and insert another one between frame 10 and 20 on both layers.
Now hit the enter key, both the square and the circle will move to the set position on frame ten, and move back to there original position, if this did not happen, just re-read this tutorial and try again, you’ll get it. Congratulations, you have passed this tutorial, move on the next and start with that. Before you move on to the next I would just like to add something, if something goes wrong or doesn’t do what you wanted it to do, don’t be discouraged, it is so easy to make mistakes when using flash, that being said, it is also easy to fix these errors.
Note on this tutorial: try and insert more keyframes to add to the current animation, expand on it, create another layer and make more objects appear in the animation, this will help you greatly in your knowledge and skill.
Start Learning Flash
START LEARNING FLASH
Basic Tutorial on Motion Tweening(tut.1)
Start by double click on the box that says layer 1 in it. This will enable you to rename it; rename it “circle”, without the quotations. Naming the layers is very important as it helps you know where everything is and keeps the workspace neat and tidy.
Now select the oval tool and draw out an oval on the stage, it can be any colour you like.
Now select the whole oval with the selection tool than right click on the oval, select the option “Convert to Symbol”. Now check the graphic box and name it oval. Now press Ok. You have just created your first graphic. It will appear in the library, if you cannot see your library, click on the menu option WINDOW, than make select library.
Now we are going to inert a new keyframe, not layer, keyframe. To do this, in the same layer go to about the 10th frame (the white boxes next to the layer) and right click on the 10th frame, now select the option insert keyframe. Now a little black circle will appear on the frame you just inserted the keyframe on.
Now, making sure you have the last keyframe selected (the one you just inserted) move the oval somewhere else in the white area.
If you click on frame 1 the oval will still be in the original position, only on the last keyframe will it be in the position you just moved it to.
Right click somewhere in the middle of the last keyframe and the first keyframe, select the option Create Motion Tween. Now an arrow stretched out along all these frames will appear.
Hit the enter button, the oval should move to the position you moved it to, not jump to the position, slide to the position. If it doesn’t don’t worry just go back and re-read this. It is all about learning by your mistakes. If it did slide, congratulations, you have completed the first tutorial, it is time to move on to the next. I recommend that you repeat this tutorial just for good practice, also, you might want to try a different shape.
Basic Tutorial on Motion Tweening(tut.1)
Start by double click on the box that says layer 1 in it. This will enable you to rename it; rename it “circle”, without the quotations. Naming the layers is very important as it helps you know where everything is and keeps the workspace neat and tidy.
Now select the oval tool and draw out an oval on the stage, it can be any colour you like.
Now select the whole oval with the selection tool than right click on the oval, select the option “Convert to Symbol”. Now check the graphic box and name it oval. Now press Ok. You have just created your first graphic. It will appear in the library, if you cannot see your library, click on the menu option WINDOW, than make select library.
Now we are going to inert a new keyframe, not layer, keyframe. To do this, in the same layer go to about the 10th frame (the white boxes next to the layer) and right click on the 10th frame, now select the option insert keyframe. Now a little black circle will appear on the frame you just inserted the keyframe on.
Now, making sure you have the last keyframe selected (the one you just inserted) move the oval somewhere else in the white area.
If you click on frame 1 the oval will still be in the original position, only on the last keyframe will it be in the position you just moved it to.
Right click somewhere in the middle of the last keyframe and the first keyframe, select the option Create Motion Tween. Now an arrow stretched out along all these frames will appear.
Hit the enter button, the oval should move to the position you moved it to, not jump to the position, slide to the position. If it doesn’t don’t worry just go back and re-read this. It is all about learning by your mistakes. If it did slide, congratulations, you have completed the first tutorial, it is time to move on to the next. I recommend that you repeat this tutorial just for good practice, also, you might want to try a different shape.
Subscribe to:
Posts (Atom)