Right then, this is my first tutorial I have ever wrote/written, so it may not be perfect.
What will this teach you?
Hopefully, after you have gone through this tutorial, you should know how to make a menu, that can slide out. Hopefully with a few variasion!
Ok then, lets start of setting up the flash and stuff.
first things first, make a new layyer and call AS, this is where any code that needs to go on the main time line will go, I advise you do this in all you animations/games.
for our menu, we will keep it simple, it will only make things apear and dissapre, by changing the alpha levels. so start by making a large rectangle that is of to the side of the stage, make it the of to the left. now press "f8" to turn it into a movie clip, and give it an instance name of "panel". just incase you dont know how to do this, there is a panel at the bottom of the screen for this.
Now in order to make use of the menu, we will need some buttons in it, so dubble click it to open it up, everything else should 'tint'. Make two circles, one red and one green. convert these both to 'buttons' by pressing "f8". give the green button a instance name of "notinvisible" and the read an instance name of "invisible".
Back to the main stage. Make another square, convert it to a mocie clip and give it an instance name of "square". finale, make a circle, convert it to a 'button' and give it an instance name of "button".
right then, now for the code.
due to lack of space, I will have to give you the code, and explain it as i go along. I would of built the code up as i went along, thus making sure you can see where the code comes from.
click on the first frame of the AS layer, press "f9" to bring up the actipn script panel, and copy and past this code in.
_root.onLoad = function() { // do this code when the movie loads
menumove = 0; // sets the movement of teh menu
maxout = 40; // set the furthest out the panel should go
maxin = 40; // set the furthest in teh panel should go
};
_root.button.onPress = function() { // do this code when you press the button
if (menumove == 5 || _root.menu._x == maxout) { // do this code if the menu id moveing right or (||) is fully right
menumove = -5; // sets the menus movement so that it will go left
} else { // do this if the menu is not moveing right or fully right
menumove = 5; // set it so that the menu moves right
}
};
_root.panel.invisible.onPress = function() { // do this code when you press the invsible button
_root.square._alpha = 0; // make the square so that you cant see it
menumove = -5; // set the menu to move back in
};
_root.panel.notinvisible.onPress = function() { // do this code when you press the visible button
_root.square._alpha = 100; // set the square so that you can see it
menumove = -5; // set teh menu to move back in
};
_root.onEnterFrame = function() { // do this code every frame
if (menumove != 0) { // if the menu is not ment to be staying still
_root.panel._x += menumove; // add the value of the movement to it
if (_root.panel._x<-maxin) { // if it is to far right
_root.panel._x = -maxin; // move the panel to the right postion
menumove = 0; // stop the panel moveing
} else if (_root.panel._x>maxout) {
_root.panel._x = maxout; // move the panel to the right postion
menumove = 0; // stop the panel moveing
}
}
};
hopefully you should understand from the comments i put in how that code works! you may find that you will have to change some of the values to suit your needs, such as how far out the panel needs to move, or how fast.
as you can see, it is very simple, but very effective. you may find it more practicle though, to have the code on the buttons and manus, it depends how you like to have your code set out.
so what do you lot think of my first tutorial?
