当前位置: 主页 > 平面设计 > Flash5创建连波效果

Flash5创建连波效果

  • 2022-04-01
  • 来源/作者: 不详    / 佚名    
  • 1 次浏览

效果描述:

  连波效果是指一串对象(可以是文字也可以是按钮或者图片等等其他对象)。当鼠标移动到涵盖对象的范围内的时候,使每个对象因为与鼠标距离不同而产生相应的透明度和大小的不同变化。而当鼠标移动到范围外的时候,所有的对象都恢复到原来的状态。


鼠标移动的时候对象相应的变化

具体的实现步骤

主要结构:

  在主场景舞台,我们新建一个Movie Clip(MC)――命名为叫“01-boundingbox”,在帧1上书写一些actions。

  这些actions的目的是为了限定MC的大小。这样我们的MC就不会因为使用者的人为自主放大缩小而改变了大小,以免造成不必要的紊乱。

fscommand ("fullscreen", "false");//禁止全屏

fscommand ("allowscale", "false");//禁止比例缩放

stop ();

  接下来我们看MC。

  在“01-boundingbox”这个MC里,你可以看到有三个层。第一层dragscale是鼠标定位MC以及action;第二层text是对象;第三层bounding box是敏感响应范围。第二层里的对象就是一个MC――名字叫“column1”。第一层里的MC――名字叫“dragscale”就是一个空的MC(帧内是stop()),我们在这个MC的层的帧上写:

startDrag ("dragscale", true);//把这个空MC中心锁定在鼠标上,这样可以通过MC得到鼠标位置。我们在本例子中需要得到鼠标和对象的距离,所以有这个空的MC,会方便很多。

  接下来我们再来看看第二层text里的对象MC――“column1”。

  这个MC里可以看到主要的action在第二帧里;第三帧只是简单地返回第二帧以便第二帧的action可以循环。

gotoAndPlay (2);

  如果你仔细看会发现这个MC里除了第一层的action语句外,接下来就是19个单独的层,每层都放了一个对象(当然,你可以放更多的对象,也可以减少部分对象)这些对象是一些内容为文字的MC,实例名字分别为text1~text19

  接下来我们来仔细研究主要的实现语句部分。

  在action层的第二帧我们可以看到如下action:

定义环境

colnum = "1";//单纯的字符

startnum = 1;//起始对象1

endnum = 19;//结束对象19

numberofItems = 19;//对象个数为19

mouseposX = getProperty("../dragscale", _x);//得到上级目录中dragscale这个鼠标定位MC的x轴数值

mouseposY = getProperty("../dragscale", _y); //得到上级目录中dragscale这个鼠标定位MC的y轴数值

i = startnum;

m = startnum;

filledSpactione = 0;

gapspace = 0;

if (myInit == false) {

// 得到所有对象的y轴数值

while (i<= endnum) {

set ("textY" add i, getProperty ("text" add i, _y ) );

i ++;

}

i = startnum;

myInit = true;

}

boundleft = getProperty ("../boundbox" add colnum, _x);

boundright = boundleft + getProperty ("../boundbox" add colnum, _width) ;

boundtop = getProperty ("../boundbox" add colnum, _y);

boundbottom = boundtop + getProperty ("../boundbox" add colnum,_height);

  第一个变量colnum是个简单的数字而已。帮助我们得到MC“column1”和MC“boundbox1”的名字而已。接下来的三个变量是对象个数的起始和结束数字(“startnum”,“endnum”和“numberofItems”)。我们用“mouseposX”和“mouseposY”来存放鼠标的定位x和y。由于我们需要定义所有对象的位置所以这个是一个循环,为了计算这样一个循环所以我们使用了计数变量“i”和“m”。最后,我们初始化了两个变量:“filledSpace”和“gapSpace”,关于这两个变量我们将在后面具体讨论。

  我们需要所有的对象的原始位置,所以我们必须创建一个数组来存放这些原始位置的值。当我们把所有的位置存放完毕后,就要初始化“i”的值以便以后的使用。此外我们要确定这些action只在第一次执行,所以我们设定“myInit”这个变量,在执行语句后使它为真,因为我们在最初执行定位的语句只在这个变量为假的时候执行。

  因为我们有个敏感响应的范围需要定义,所以我们也设定了四个变量:“boundleft”,“boundright”,“boundtop”和“boundbottom”。通过语句我们可以得到整个boundbox1的上下左右的界限从而得到范围。得到环境的数据以后,我们可以让Flash明白两种不一样的情况:第一,鼠标在范围内;第二,鼠标不在范围内。

实现过程:

if ((mouseposX>=boundleft) and (mouseposX<=boundright) and (mouseposY>= boundtop) and (mouseposY<= boundbottom)) {

while (i<= endnum) {

myDif = (eval("textY" add i) ) - (mouseposY - boundtop);

// percentage increase

scaleAmount = 250-((myDif*myDif)/16);

alphaAmount = 100-((myDif*myDif)/6);

if (alphaAmount<50) {

alphaAmount = 50;

}

if (scaleAmount<100) {

scaleAmount = 100;

}

setProperty ("text" add i, _xscale, scaleAmount);

setProperty ("text" add i, _yscale, scaleAmount);

setProperty ("text" add i, _alpha, alphaAmount);

i ++;

}

// 所有的文字对象的高度

while (m<= endnum-1) {

filledSpace = filledspace + getProperty ( "text" add m, _height);

m++;

}

//整个高度 totalheight = getProperty ( "text" add endnum, _y) - getProperty ( "text" add startnum, _y);

gapSpace = totalheight-filledspace;//得到中间空隙的整个高度

avgDistance = gapSpace/numberofitems;

m=startnum+1;

while (m<= endnum-1) {

setProperty ("text" add m, _y, (getProperty ( "text" add (m-1), _y) + getProperty ( "text" add (m-1), _height)) + avgdistance);

m ++;

}

}

  这个过程,首先确定鼠标是否在响应区域中。如果是的,就计算每个对象和鼠标之间的距离。在循环里,我们先计算鼠标y轴到上界限的距离,然后再计算对象和鼠标的距离。这个是因为我们的鼠标定位MC和对象不在同一个level里。我们必须这样计算,除非上界限为0,那么我们才可以让两者直接相减。

  我们计算得出的是鼠标和对象的垂直最短距离。也就是说鼠标和对象的y轴的最短距离。

  我们得到对象和鼠标的距离以后(我们把这个距离值给了变量“myDif”),我们通过myDif来控制scaleAmount和alphaAmount的值。我们可以发现这两个值在经过表达式赋值以后它们的大小就看myDif这个值的变化了。如果myDif等于0,则scaleAmount的值就达到最大为250。随着myDif的增大,则逐渐减小。AlphaAmount也是一样的变化过程。

  scaleAmount和alphaAmount都设定了最小界限:100和50,所以我们可以知道scaleAmount是在250到100之间范围变化,而alphaAmount则在100到50之间变化。然后用setProperty来使用这些值改变对象。最后,我们需要重新设置对象之间的距离。因为这些对象的大小变化了以后位置需要重新设置过。

  我们来讨论另外一种情况――返回原始状态:

  这就是两种情况里的另外一种情况:鼠标离开了敏感响应区域时候我们需要让对象的所有变化复位。那么就来看一下代码:

else {

//鼠标离开响应区域时候的情况 i = startnum;

while (i<= endnum) {

if (getProperty ("text" add i, _yscale ) >= 100) {

// 凡是发现对象有变化的都恢复原状,慢慢恢复,每次恢复1

setProperty ("text" add i, _yscale, int ( getProperty ("text" add i, _xscale ) ) - 1);

setProperty ("text" add i, _xscale, int ( getProperty ("text" add i, _yscale ) ) -1);

}

if ( getProperty ("text" add i, _y) < eval("textY" add i)) {

// 凡是发现定位有变化的全部恢复,每次恢复1

setProperty ("text" add i, _y, int ( getProperty ("text" add i, _y ) ) + 1);

}

if ( getProperty ("text" add i, _y) > eval("textY" add i)) {

setProperty ("text" add i, _y, int ( getProperty ("text" add i, _y ) ) - 1);

}

if ( getProperty ("text" add i, _Alpha) > 50)
{

      //凡是发现透明度有变化的全部恢复,每次恢复1

setProperty ("text" add i, _alpha, getProperty ("text" add i, _alpha ) - 1);

}

i ++;

}

}

扩展功能:

  如果要创建多个这样的响应区域,那么我们可以设定colnum的范围。然后进行循环操作便可以了。就是说boundbox1~boundboxn;column1~columnn。