For this tutorial i used Flash CS5 but it works if you have any other verision as well.
Please follow all the steps in order for you to understand it as good as possible and im sure it will be a lot easier than it seems so please give it a try.
By the way, I try to not use any special words as much as possible so you should understand it even if you are not used to flash or any other program. If I do then I try to explain them so you can understand.
The first thing I want to teach you is how to make a button. First thing we have to is to draw our button and then convert it to a symbol. You do it by either highlighting the button, right-click and "Convert to Symbol" or you can simply press F8 after you highlighted it. This window will pop up:
- Untitled 1005.png (30.57 KiB) Viewed 2294 times
What is important now is that you change the "Type" of your symbol to "Button" or else it wont work and then press "OK", you can name it if you want but it is not necessary.
We can now go and edit the button and we do so by either double-click on it or right-click, "Edit", "Edit in Place" or "Edit in New Window".
Your "Timeline" should now look like this:
- Untitled 1006.png (2.95 KiB) Viewed 2294 times
On your "Timeline" you will see the four different states you can edit for your button, "Up", "Over", "Down" and the "Hit" state. What these allow us to is to not only edit the original button you created but also change how the button looks when your cursor rolls over it ("Over") and how it looks when you click on it ("Down"), you can also change the boundaries (hit area) of our button on the last state ("Hit").
You cant edit them yet because there is no "Keyframes" under each state like the first one ("Up") so what you need to do is to add a "Keyframe" under each of them, except the last one ("Hit") unless you dont want your original button to set the boundaries. To add a "Keyframe you right-click on a empty frame under the state name and "Insert Keyframe". To get back to the main scene (out of the button) you just double click anywhere beside the button and to test it you hold Ctrl+Enter.
Here is a example how it can look like (hold over and click the circle):
For this tutorial i want to make so that when you click the button you move to the next frame so what we need is a second frame on our main "Timeline" and to do so you right-click on the second/empty frame and "Insert Keyframe" like you did in the button.
- Untitled 1008.png (31.24 KiB) Viewed 2294 times
Next thing we want to do is to click on the second frame and remove the button from it. If you test the movie now (Ctrl+Enter) you will see how it jumps from the first frame with the button to the second frame over and over and that is not what we want so we need to add our first piece of code. Click on the first frame in the "Timeline" and press F9, in the box i want you to type: stop();
what this code does is pretty obvious, it stops the animation. after that do the same for the second frame as well and you will understand why once you got the button working. If you test the move now it should stay on the first frame and your button shouldent work and that is because we need to add some code to it as well and it is very simple if you know what you are doing.
Let me try to explain it before we move on, this is all the code that you must add in the button:
- Code: Select All Code
on () {
}
But you need some more to get it to work. This is how our button code is going to look like:
- Code: Select All Code
on (release) {
gotoAndPlay(2);
}
So first we have: "on (release)"
that means that when you have released the mousebutton the following will happen (which is the next part of the code) but it can also be "press" or "RollOver" instead of "release". "press" means when you press the button the following will happend and "RollOver" means when you drag your cursor over the button the following will happen.
Then we have: "{"
and that seperate the first part with the following part.
Then we have: "gotoAndPlay (2);"
"gotoAndPlay" means go to and play the following frame or you can change that in to "gotoAndStop" and it will go to and stop at the following frame and that means you dont need any stop code (stop();). The number between the "()" is the frame it will go to. You can add "" (quotes) instead of the number and a frame lable between but i will show you that later in this tutorial.
You can also change "gotoAndPlay/Stop ();" to "nextFrame ();" or "prevFrame ();"
"nextFrame ();" means that it will jump to the next frame in the "Timeline" and "prevFrame ();" (prev, Previous) means that it will go to the Previous frame in the timeline. those two codes will not only go forward or backwards, they also stop so what you have to do if you want it to play is to add "play();" in the actions for the frame it stops on (similar to when we added "stop();").
And then we have: "}"
and it ends that section. It is important that you remeber when a word need a capital letter or not, it is basecly like this the first half of the words dont while the other half does.
This may seems like a lot to remember but it isnt, here is all of them put together:
on (:press,release,rollOver) {
gotoAnd:Play,Stop/:next,prev:Frame + (: ,N,L);
}
So first we have the three different "on" lines that you can use for your button, then we have the two different "gotoAnd" lines or we have the two "Frame" lines, then you have the three different "();" lines (nothing, frame number or framelabel)
Dont worry if you dont understand, it should be easier once we start adding the code.
Ok, go to the first frame and click on the button and then F9 or you can click on where it sais "Actions - Button". Then you type:
- Code: Select All Code
on(release){
gotoAndPlay(2);
}
Also the code doesnt have to be lined like that, it can be one straigt line but it is easier to read it like that. Now test the movie and click on the button it should jump to the second frame. The thing is just that you should try to not use frame number ("(2);") as much as possible so we want it to be a name instead so lets move on to frame label. To add a label we need to go to "Properties" and if you dont see it then you can press Ctrl+F3 or go to "Window" "Properties". When you got it click on a frame and in this case the second one and then on "Properties". Now you will see "Label" and "Sound", in label you will see "Name", write anything you want but i suggest you keep it simple so i am going to write "two" as my label. When you got a label go to the button code and change the number (2) to your label with quotes on each side like this:
- Code: Select All Code
on (release) {
gotoAndPlay("two");
}
This may seems stupid when a number works, but to use labels makes it alot easier to write the code and then read it, it can even save loads of time. It can also be used to go between scenes while a frame number cant do that, to work with scenes can be good to know but it i dont think i have to go through it.
It is also very good to know how to go between frames inside a movieclip (like changing a costume on a character) so lets move on to that but before we do that i suggest you to save this file somewhere so you can look at it when you need to.
A movieclip is a symbol like the button but it have its own Timeline instead of the button ability.
Make a new file and in this file there will be two buttons, one for forward and one for back and a movieclip. Lets start with the buttons and when you are done with those add this codes:
The forward button:
- Code: Select All Code
on (release) {
nextFrame();
}
The back button:
- Code: Select All Code
on (release) {
prevFrame();
}
These codes is still not complete but we have to add the movieclip before we finish them and you do so by drawing your movieclip and then you convert it to a symbol, movieclip and the name doesnt matter like last time.
- Untitled 1009.png (32.2 KiB) Viewed 2294 times
Then we have to go in to our movieclip and you do so by double clicking it or right-click edit like with the button but this time the Timeline looks exactly like the main timeline. Add at least one more Keyframe by right-click on a empty frame and "Insert Keyframe" and then you add "stop();" to both of the frames. Then you want to edit the second frame so that it looks different from the first one. When you are done go out of the movieclip by double-clicking anywhere beside it and then you click on the movieclip, go to properties and this time you should see "Instance Name", write anything you want (no spaces, use _ instead) i suggest to keep is simple like: mc. As said the name doesnt matter, but the instance name does.
Now we want those buttons to change frame inside the movieclip we made and you do so by adding the last piece to the codes:
The forward button:
- Code: Select All Code
on (release) {
_root.mc.nextFrame();
}
The back button:
- Code: Select All Code
on (release) {
_root.mc.prevFrame();
}
what we added was _root.mc. (change mc to your instance name) between "on (release) {" and "nextFrame();/prevFrame();" and what _root.mc. does is that it tells the buttons to go to the next or previous frame inside the movieclip with the instance name: mc (or in this case your instance name)
When you test the movie and press the next button the movieclip should jump one frame forward and when you press back it should jump one frame back.
You can even add a movieclip inside the movieclip and change it to _root.mc.mc2. if you want. As said this can be used when you want to change costume on a character.
We can actualy create a decent game with only using the button code and "stop();". Like this one:
The first frame got the start button and the code for it is:
- Code: Select All Code
on (release) {
gotoAndPlay("stage1");
}
(stage1 is the label of frame 2)
The second frame got the maze and the finish button. The maze is actualy a button as well and the code is:
- Code: Select All Code
on (rollOver) {
gotoAndPlay("lose");
}
This is a good example where "rollOver" can be usefull, lose is the label for frame 4 (the lose frame). The code in the finish button is:
- Code: Select All Code
on (rollOver) {
gotoAndPlay("win");
}
(win is the label of frame 3)
Then frame 3 is the lose frame with a start button and frame 4 is the win frame. That is how simple it is to make a maze game so i really suggest you to try to make one and im sure it will help you get interested in making more in flash.
And thats it for this tutorial, hope it was helpful and that you get a good start.
PLease vote and leave a comment if you like it, want more/better explanations, dont understand, dont like it... Anything.
