Menu | news
Because I did not write a very long tutorial experience, but also this large number of pumping code of the Dongdong! If you find any problems, I hope you can point out politely:
A3 menu has a lot of pirated or improved, although out for a long time, but still can be described as a classic as the menu! Let's take the A3 menu of light rain as an example! First look at the effect of the A3 menu.
http://bbs.flash8.net/bbs/UploadFile/2005-7/200572514323208.swf
Click here to download the source file
His difficulty is to control the spatial position of each menu item through as, and also has the elasticity effect! If the sense of space is not strong, even if every line of code annotation, it is difficult to form a complete concept, to understand it thoroughly! Because the step-by-step explanation!
The following is through the practice for the preparation of A3 knowledge points, if you are already familiar with, you can directly see the second floor of the post!
The first step is to practice:
To generate a menu item dynamically:
First set up a block MC, in the library file midpoint attribute, tick 1, 42, Identifier: Menu. As shown in the following figure
Then, write the following code in the first frame of the timeline:
The following 7 functions (B1 () ~b7 ()) Are the Save menu address that allows the button to be invoked at any time
Stop ();
Function B1 ()
{Trace ("B1 pressed");
GetURL ("http://1.htm");
}
function B2 ()
{Trace ("B2 pressed");
GetURL ("http://2.htm");
}
Function B3 ()
{Trace ("B3 pressed");
GetURL ("http://3.htm");
}
function B4 ()
{Trace ("B4 pressed");
GetURL ("http://3.htm");
}
function B5 ()
{Trace ("B5 pressed");
GetURL ("http://5.htm");
}
function B6 ()
{Trace ("B6 pressed");
GetURL ("http://6.htm");
}
function B7 ()
{Trace ("B7 pressed");
GetURL ("http://7.htm");
}
The following is to determine the location of the menu and menu name fill
for (i = 1; I <=7; i++)
{
_root.attachmovie ("Menu", "menu" + I, I * 10);
_root["Menu" + i]._y = 100;
_root["Menu" + i]._x = (i-1) * 70;//menu item X-axis coordinates
_root["Menu" + i].label_txt.text= i;//Menu label (1~7)
_root["Menu" + i].num = a variable in the i;//menu
}
And then the following is the dynamic call to add an address to the above function for the button
for (var i = 1;i<=7;i++) {
this["menu" +i].onrelease = function () {
_root["B" +this.num] ();
/////////////////////////////////////
It can be written in the following way!
/* S=eval ("B" +this.num);
_root.s ();
///////////////////////////////////
}
}
The effect of the exercise and the source file:
Click here to download the source file
Elastic displacement of options:
There is an instance in the main scene called MC: The code on the MC is:
Onclipevent (load) {
Front MC position = 240;
this.targetpos= front position +min_h;
this._x= front position +min_h;
this.vx=0;
var max_h = 120;
Option Max position
var min_h = 90;
Option Minimum Position
var slow = 1.2;
Elastic buffer Value
var active = false;
Determine whether to activate
}
Onclipevent (enterframe) {
if (active) {
MC Target position = Front MC position + maximum position
This.targetpos = Front MC position +max_h;
THIS.VX = (this.vx+ (this.targetpos-this._x))/slow;
this._x = THIS._X+THIS.VX;
} else {
MC Target position = Front MC position + minimum position
This.targetpos = Front MC position +min_h;
It is the same as the elastic motion, except here is the restoration!
THIS.VX = (this.vx+ (this.targetpos-this._x))/slow;
this._x = THIS._X+THIS.VX;
}
}
On (rollover, dragOver) {
active = true;
}
On (RollOut, dragout) {
active = false;
}
Click here to download the source file
Can look at the source file side of the explanation, the following is Xiaoyu A3 menu source file
The as code for the A3 main menu is mainly in three places: the first frame in the main scene AS,MENUMC the as in the instance, the as on the menu bar in the Menus movie clip in the library.
first of all, please. first frame timeline in main scene as:
function B1 () {
GetURL ("");
}
...... ......
function S7_b7 () {
GetURL ("");
}
The above are all save address functions, put together to facilitate the writing management, but also convenient button calls!
Below this is the function is used to determine the state in the MENUMC, drizzle A3 not used, you can delete! Comment out
/*
function CHECKMC () {
_root.menumc.line2.active = false;
_root.menumc.vnum = 1;
_root.menumc.line2.linemc._visible = 1;
_root.menumc.movem = true;
}
i = 20;
Nomal = true;
*/
////////////////////////////////////////////
As in the MENUMC instance in the main scene:
Film clip MENUMC, point Open see inside nothing, but his role is only for onclipevent (load) and onclipevent (Enterframe) Two events, in fact, can write code to the timeline!!
Here are the commands that are executed when MENUMC is first scanned and finished, mainly divided into three parts of the decorative line of the movement function, menu bar movement Function, menu button address calls (for the convenience of understanding, this we have done in the first step)
Onclipevent (load) {
The movement function of decoration line predefined
function Linemove () {
First to determine whether in motion, when Movem is true, that is, the menu is activated movement, run the following code
if (MOVEM) {
i = 2;//i is determined to be 2 (I would like to say that the initial, but not this argument)
while (I<=menunum) adjusts the lines of each menu item
while (I<=menunum) {
When the line of this menu item is active, that is, the item is activated at the end of the mouse suspension!
if (this["line" +i].active) {
The line target position of this option = position of the previous option line + Maximum menu item width
this["line" +i].targetpos = this["line" + (i-1)].targetpos+max_h;
}
The width of no active menu item will decrease
else {
The line target of this option = position of the previous option line + Minimum menu item width
this["line" +i].targetpos = this["line" + (i-1)].targetpos+min_h;
}
The following two lines are the elastic algorithm of the line, this algorithm is very similar, where applied to the flexibility of displacement, but also apply to zoom, transparent and so on
The movement of a line when it moves = (previous frame) movement + (line target position-line current position)/position ratio/buffer value
this["line" +I].VX = (this[' line ' +i].vx+ (this["line" +i].targetpos-this["line" +i]._x)/accel))/slow;
Position of line = line (current) coordinate + line move
this[' line ' +i]._x = this[' line ' +i]._x+this[' line ' +I].VX;
i++ to replace a line, keep looping, just like a listening function
i++;
}
}
When Movem is false, run the following code, when the mouse moves the menu item, the line will revert, make the menu become normal width
else {
It's still a loop monitor.
i = 2;
while (I<=menunum) {
The line target position of this option = the position of the previous option line + normal width
this["line" +i].targetpos = this["line" + (i-1)].targetpos+de_h;
It is the same as the elastic motion, except here is the restoration!
this["line" +I].VX = (this[' line ' +i].vx+ (this["line" +i].targetpos-this["line" +i]._x)/accel))/slow;
this[' line ' +i]._x = this[' line ' +i]._x+this[' line ' +I].VX;
i++;
}
}
}
The motion function of the menu option is predefined
function Menumove () {
i = 1;
while (I<=menunum) {
If this option is activated
if (this["line" + (i+1)].active) {
Menu line playback effect, that is, a white stripes across, and there is sound
this["Line" +i].image.gotoandstop (2);
The title of the menu dynamically displays the menu label by menutitle the movie clip
Somewhat similar to the _root["menu" + i].label_txt.text= I in the first step; just different methods
this["line" +i].menutitle.gotoandstop (i);
Show submenu
_root.submc.gotoandstop ("s" +i);
} else {
No animation effects, but also display menu labels
this["line" +i].menutitle.gotoandstop (i);
}
The coordinates of the menu = line coordinates
this["menu" +i]._x = this["line" +i]._x;
The width of the menu = the distance of the line before and after the option/1.2
this["menu" +i]._xscale = (this["line" + (i+1)]._x-this["line" +i]._x)/1.2;
i++;
}
}
Fscommand ("Allowscale", false);
max_h = 120;//Option Max width
Min_h = 93;//option min width
De_h = 97;//normal width
Menunum = number of 7;//menus
Movem = false;//Determines whether the menu is activated, initializes the fake, that is, does not activate
Accel = 5;//Position ratio
slow = 1.2;//Elastic buffer value
i = 1;
Put line and menu label items on the main scene
while (i<= (menunum+1)) {
This.attachmovie ("lines", "line" +i, i*1);
The position of the line
this["line" +i]._y = 0;
this["line" +i]._x = (i-1) *de_h;//
this["line" +i].active = false;//to determine whether this menu is hovering over the mouse, initially false
Add menu labels and picture animations to the line according to the number of menu options
if (i<=menunum) {
this["line" +i].attachmovie ("title", "Menutitle", 1);
this["line" +i].attachmovie ("image", "image", 2);
}
i++;
}
i = 1;
Copy the menu bar to the main scene
while (I<=menunum) {
This.attachmovie ("Menu", "menu" +i, i*10);
The position of the menu bar, set similar to the previous
this["menu" +i]._y = 0;
this["menu" +i]._x = (i-1) *de_h;
this["menu" +i]._xscale = (this["line" + (i+1)]._x-this["line" +i]._x)/1.2;
this["menu" +i].num = i;
i++;
}
//
Line2.active = false;
line2.linemc._visible = 0;
Line1.swapdepths (100);
}
Here is the command to execute when MENUMC each frame is invoked
Onclipevent (enterframe) {
line8._visible = 0;//will copy one more line Line8 to make the last Line8 invisible
Continuously running Linemove () and Menumove ();
Linemove ();//The Movement function of decorative lines
Menumove ();//Menu Motion function
Updateafterevent ()//refresh Player
}
//////////////////////////////////////////
As on the menu bar in the Menus movie clip in the library:
Press the mouse button when the mouse pointer is over the button or when the button is over, then slide out of the button, and then slide back to the button.
On (rollover, dragOver) {
The picture effect in the line returns frame 1th
_parent["line" +_parent. Vnum].image.gotoandstop (1);
The decision menu is activated
_parent.movem = true;
To determine if the line is active
_parent["line" + (num+1)].active = true;
_parent["line" + (num+1)].linemc._visible = 0;
The line will go to layer 100th
_parent["line" +num].swapdepths (100);
}
Slide the mouse pointer out of the button area or press the mouse button while the mouse pointer is over the button, and then slide out of the button area
On (RollOut, dragout) {
Determines that the line is not active
_parent["line" + (num+1)].active = false;
Serial number of the menu equals the ordinal of the previous line
_parent.vnum = num;
_parent["line" + (num+1)].linemc._visible = 1;
If the last line
if (num = 7) {
The decision menu is active
_parent.movem = true;
} else {
Otherwise the menu is not active
_parent.movem = false;
}
}
When the mouse button is released when the mouse pointer passes over the button
On (release) {
Call Save link Address function in the front timeline
_root["B" +num] ();
}
Then there is a submenu, on the timeline sub line on the SUBMC clip! The submenu has been put in place in advance!
The code for the link address is on the button! And the normal button is no different, nothing to say!!
As beginners to advanced friends, I hope to combine the source file carefully read the annotation, your understanding must reach a new level!
