flash动态缓冲图片导航制作详解
The buffer formula is very useful in making special effects.The famous Samsung navigation menu uses this formula. Manywebsites are now in the limelight, and buffer navigation is oneof the highlights. This article takes the navigation of aGermanwebsite as an example to explain the manufacture of buffernavigation. This effect is done by me and the solvent. Heprovides the coordinate algorithm, and I provide the scalingalgorithm.
This example demonstrates the effect
The part of the mouse across the picture will become largerProduction ideas
Picture zoom control
Using the buffer formula to set the zoom ratio of the picture,if the mouse glides through a picture, zoom in 1.8 times. Ifthe serial number of the other picture is 1 different from thatof the picture, the picture on both sides of the picture ismagnified 1.4 times, and the other is of the original size.Picture coordinate control
When a picture is enlarged, the coordinates of the adjacentpictures are equal to the coordinates of the image, plus halfof the width of the two pictures, so that the pictures arearranged without distance.
Line and text control
Lines are implemented using line drawing functions, and thecoordinates and scale of text are the same as those of thecorresponding pictures.
Making process
1, startFlash, create anewmovie, set the size of 600px*200px.Get ready, like the material in the picture. The actual namesof the pictures are zjs0 to zjs4, and the literal names of thetext are Z0 to z4.
The intermediate image coordinates set (300130) , select all thepictures, arranged according to CTRLK panel set to top out, makethe same picture, y coordinates, X coordinate picturecontrolled by AS. In the same way that y coordinates the samecharacters, and adjust the spacing of text and pictures.2, add the following code on the first frame in the main sceneX / / get intermediate image coordinates
For (VaR = I = 0; i<5; i++) {
This["ZJS", +i] .n = i;
Each picture / / MC define a variable
This["ZJS", +i] .onRollOver = function () {
Control = true;
Mouse over the picture is true / /
} ;
This["ZJS", +i] .onRollOut = function () {
Control = false;
The picture is false when the mouse out of /
} ;
}
OnEnterFrame = function () {
For (VaR = k = 0; k<5; k++) {
This["Z", +k] ._x = this[, "ZJS", +k] ._x;
X/text should be equal to the X coordinate coordinate pictureThis["Z", +k] ._xscale = this[, "ZJS", +k] ._xscale;
This["Z", +k] ._yscale = this[, "ZJS", +k] ._yscale;
/ / text and pictures the same zoom ratio
}
If (control) {
Mouse_in () ;
} else {
Mouse_out () ;
}
/ / call the function condition of true or false when} ;
/ / coordinate setting function
Function, setX () {
For (VaR k = -2; k<3; k++) {
This["ZJS" + (k+2) ] ._x = myx+this["ZJS" +2] ._width*k;In the middle picture is / / no distance arrangement
}
For (VaR k = Number (temp 1) +1; k<5; k++) {
//temp1 is the variable value under the maximum scaled picture
this was mc1 = ["zjs' + k] ;this was mc2 = ["zjs' + (k - 1) ] ;
/ /此图片右边的其它图片mc1. _x = mc2. _x + (mc2. _width + mc1. _ width) / 2 - 1;/ /设置这些图片的x坐标, 1为消除图片间的空隙
}for (where k = number (temp1) - 1; k > 1; k) {this was mc1 = ["zjs' + k] ;this was mc2 = ["zjs' + (k + 1) ] ;mc1. _x = mc2. _x - (mc2. _width + mc1. _ width) / 2 + 1;}
/ /缩放比例最大的图片的左边的图片的x坐标设置myline () ;
/ /图片下方的线条
}
/ /比例缩放函数function move _ scale (x, obj) {speed = (x - obj. _ xscale) *.65 + speed * 0.6;obj. _ xscale + = speed;obj. _ yscale + = speed;
/ /缓冲公式, x为图片的缩放比例, obj为mc}
/ /鼠标滑过图片时, 图片的缩放、 x坐标设置函数function mouse _ () {for (i = 0; i < 5; i + +) {where mc = this ["zjs" +] ;
/ /获得实例名i f (mc.hittest (_xmouse, _ ymouse, true)) {move _ scale (180, mc) ;
/ /如果鼠标位于图片的上方, 图片放大1.8倍t emp 1 = mc.n;
/ /把此图片下的变量赋给变量t emp 1
} else if (math.abs (mc.n-temp1) = = 1) {move _ scale (140, mc) ;
/ /两侧的图片比例放大1.4倍
} else {move _ scale (100, mc) ;
/ /其它的图片为原始大小
}
}setx () ;
/ /设置图片的x坐标
}
/ /鼠标移出图片时, 图片的缩放、 x坐标设置函数function mouse _ out () {for (i = 0; i < 5; i + +) {
move _ scale (100, this "zjs" [+]) ;
/ /缩放比例为1,恢复原始大小
}setx () ;
/ /坐标复原
}
/ /线条函数function myline () {createemptymovieclip ("line", 1) ;
/ /创建一个空影片with (line) {linestyle (0. 1, 0xff9933, 100) ;moveto (zjs0. _ x - zjs0. _ width / 2, zjs0. _y + 10) ;lineto (zjs4. _ x + zjs4. _ width / 2, zjs4. _ y + 10) ;/ /图片下方水平的直线moveto (zjs0. _ x - zjs0. _ width / 2, zjs0. _y + 5) ;
lineto (zjs0. _ x - zjs0. _ width / 2, zjs0. _y + 15) ;/ /右边垂直的直线moveto (zjs4. _ x + zjs4. _ width / 2, zjs4. _ y + 5) ;lineto (zjs4. _ x + zjs4. _ width / 2, zjs4. _ y + 15) ;/ /左边垂直的直线
}
}
按ctrl + enter测试,本例制作完成.掌握原理后,加上好的创意,相信你能做出更好的特效.
资料引用: http: / / www.knowsky.
With / 340840.html
今天父亲节我们有没有陪伴家人一起吃个饭,还是打个电话问候一下。前一段时间同学将网站账户给我说可以有空更新点信息确保他在没有时间的时候还能保持网站有一定的更新内容。不过,他这个网站之前采用的主题也不知道来源哪里,总之各种不合适,文件中很多都是他多年来手工修改的主题拼接的,并非完全适应WordPress已有的函数,有些函数还不兼容最新的PHP版本,于是每次出现问题都要去排查。于是和他商量后,就抽时间把...
妮妮云的知名度应该也不用多介绍了,妮妮云旗下的云产品提供商,相比起他家其他的产品,云产品还是非常良心的,经常出了一些优惠活动,前段时间的八折活动推出了很多优质产品,近期商家秒杀活动又上线了,秒杀产品比较全面,除了ECS和轻量云,还有一些免费空间、增值代购、云数据库等,如果你是刚入行安稳做站的朋友,可以先入手一个119/元季付的ECS来起步,非常稳定。官网地址:www.niniyun.com活动专区...
数脉科技怎么样?昨天看到数脉科技发布了7月优惠,如果你想购买香港服务器,可以看看他家的产品,性价比还是非常高的。数脉科技对香港自营机房的香港服务器进行超低价促销,可选择10M、30M的优质bgp网络。目前商家有优质BGP、CN2、阿里云线路,国内用户用来做站非常不错,目前E3/16GB阿里云CN2线路的套餐有一个立减400元的优惠,有需要的朋友可以看看。点击进入:数脉科技商家官方网站香港特价阿里云...