Flash 文字扭曲的效果

【 tulaoshi.com - 效果 】

　　本例通过使用动态遮罩绑定以及简单的影片剪辑复制来实现文字扭曲的效果。至于本例的实现原理，示意如图1：

　　图1　原理示意图

　　可以试想现在摆在面前的有一叠6张一模一样带字的圆形纸片，然后把倒数第2张并将其外围剪去宽度为整个圆半径1/6的圆环，把倒数第3张剪去2/6大小的圆环，倒数第4张3/6，第5张4/6，第6张5/6。剪完之后，仍然按照原来的顺序，对齐中心叠好。这样的一叠纸片就能够用来粗略地实现扭曲效果了。还不明白？试着转动不同层次的纸片看看。

　　图1左边的6个instance就可以看作是上面那个场景中所提到的6张纸片，然后instance 2-6上的黑边就可以看作是被剪去的部分。而图1-76边的那个圆饼就相当于是6张纸片对齐叠好后的样子。也许各位已经发现了：纸片数量越多，产生的模拟扭曲的效果就越好。很显然如果只胡两层，其制作示意如图2所示：

　　图2 单个instance的制作原理

　　图1-77展示的是单个instance的制作原理：将用来作为遮罩的影片剪辑Mask和要实现扭曲效果的影片剪辑Text通过Flash MX中的新函数SetMask联系起来。这个SetMask函数的出现，使得可以在运行时任意指定某个影片剪辑作为遮罩，实现动态遮罩绑定，从而大大简化了以往制作动态遮罩的步骤。在制作过程中主要用到了　最终效果如图3所示，要实现这一效果，其具体制作步骤如下：

　　图3 最终效果图

　　1.新建一个电影，在属性面板中设置其尺寸为500pxX400px,选择一种颜色（本例为#FFFFFF）作为背景色。

　　2．双击时间线上的Layer 1，并将其改为main，如图1-79所示。选择插入/新建元件菜单命令或直接按Ctrl+F8，打开创建新元件对话框。名称一栏中输入Text，并设置其行为为影片剪辑，单击确定按钮新建一个名为Text的影片剪辑

　　3．选择插入/图层菜单命令或直接点击时间线窗口上的 图标，新建一个图层。分别将图层命名为text和background，影片剪辑text的时间轴窗口如图4所示：

　　图4 影片剪辑text的时间轴窗口

　　4．选中background层，选择文件/导入菜单命令，打开导入对话框。然后选择一张图片（本例为apple.jpg）导入到background层上作为背景。如果导入的图片太大，就得使用Transform（变形）工具将其缩小到合适大小。选择窗口/变形菜单命令或直接按Ctrl+T，打开变形面板，修改面板上的垂直和水平缩放比例至合适的值。导入后的图片如图5所示：

　　图5 导入后的图片

　　5.接下来该是在背景上写字了。选中text层，在工具箱中选取文本工具，然后在舞台上写上Apple几个字符，在属性面板中，根据需要将刚才所写的Apple的字体、大小、颜色设置妥当，本例中设置字体为Ruach LET，颜色为CCFFCC，文本大小为60，这样，纸片就做好了。

　　修复一提的是为什么一定要在字的后面加背景呢？这个问题是这样的。知道，图层就好像透明的玻璃一样，可以透过一层看到下面的一层。如果这里不使用什么东西做背景的话，那么你写的字就会象剪纸一样有镂空的地方，那么，在下一步进行纸片重叠旋转的时候就会露馅儿了。所以，字的后面一定得有背景，不管你所用的是图片还是色块。另外，其实这里并不一定要使用两个图层。因为文字和图片或者色块都是独立的对象，就算把它们都堆在一起也是不会有影响的（除非你把文字和图片打散）。但是，请记住，把不同的对象放在不同的层是一个能让你受益匪浅的好习惯。如果操作系统中没有这样的字体，是看不到如图6的效果的。

　　图6 加上文字后的图片

　　二.制作遮罩

　　1．选择插入/新建元件菜单命令或直接按Ctrl+F8，打开创建新元件对话框。在名称一栏中输入Mask，并设置其行为为影片剪辑，新建一个名为Mask的影片剪辑，将缺省的图层图层1改名为mask。从工具箱中选取椭圆工具，按住Shift键不放在舞台上随便画一个正圆。因为是制作遮罩，所以圆的边框色和填充色可以随便是什么颜色。并把这个圆放到舞台正中。打开排列面板排列先点击 按钮，将整个舞台作为参照物，接着再分别点一下 （垂直居中）和 （水平居中）按钮，这样代表舞台中心的十字就落到圆的中央了。如图7所示。

　　图7 圆中央放到舞台中心

　　三.编写代码

　　1．回到主场景在时间轴中选中第一帧。选择窗口/动作或直接按F9，打开动作面板，按F11，打开库面板，单击 按键，从弹出的功能菜单中选择联接，打开联接属性对话框。不必修改什么选项，直接按确定按钮将Text元件导出，标识符为Text，将元件导出是为后面代码中attachMovie函数所服务的，因为此函数的一个参数要求必须使用元件的导出标识符。用同样的方法，将Mask元件也导出。

　　2．输入如下Action代码（注释号//及其后面的文字可以不输）：

iInitX = Stage.width/2;//初始横坐标iInitY = Stage.height/2;//初始纵坐标iMax = 30;iDirection = 1;//旋转方向for (i=1; i=iMax;//影片剪辑个数iCounter = 1;//旋转计数器iBound = 3;//旋转终止界限 i++) {this.attachMovie("Text", "text"+i, 2*iMax-2*(i-1));//通过捆绑复制创建文字影片剪辑Text的第i个实例this.attachMovie("Mask", "mask"+i, 2*iMax-2*(i-1)-1);//通过捆绑复制创建遮罩影片剪辑Mask的第i个实例this["text"+i]._x = iInitX;//设定刚生成的文字影片剪辑text i的初始横坐标this["text"+i]._y = iInitY;//设定刚生成的文字影片剪辑text i的初始纵坐标this["mask"+i]._x = this["text"+i]._x+5;//设定刚生成的遮罩影片剪辑mask i的初始横坐标this["mask"+i]._y = this["text"+i]._y+5;//设定刚生成的遮罩影片剪辑mask i的初始纵坐标this["mask"+i]._width = i*5;//设定遮罩影片剪辑的宽度this["mask"+i]._height = i*5;//设定遮罩影片剪辑的高度this["text"+i].setMask("mask"+i);//将影片剪辑Mask设定为影片剪辑Text的遮罩}

　　程序详解：

　　看到上面密密麻麻的程序是不是有点头昏了？不急，下面就来分析分析这程序是怎么做事的吧：第1到第12行进行的是一些变量的赋值工作。其中第1、3行的变量iInitX和iInitY分别代表了影片剪辑们在舞台上出现的横坐标和纵坐标。

　　1、3两行中使用到的Stage 对象是Flash MX中的新添加的。这个对象对应的是就是Flash舞台，所以，对Stage对象属性的读写就是对Flash舞台属性的操作。本程序中只用到了Stage对象的Width和Height属性。使用这两个属性要注意，当Stage.noScale属性为true，也就是影片没有被缩小或放大时，返回的就是当前播放器的宽度和高度；而在Stage.noScale属性为false的情况下，返回的就是Flash影片的宽和高了。

　　第5行的变量iMax代表的是影片剪辑的总数，也就是上面所提到的纸片的张数。第7、9、11行的三个变量在当前这一帧里还没什么用，先放一放。

　　从第13行开始到最后就是这第1帧代码中最重要的部分了。开始是个for语句，告诉Flash接下去要开始循环了，而循环计数从1到iMax依次递加，也就是一共要循环iMax次。第14行到31行是要不断重复做的事情复制Text影片剪辑和相应的Mask影片剪辑。

　　第14行和第16行使用attachMovie函数从Library中分别复制Text和Mask到舞台上。就拿iMax=30，i=1时来说吧，它所代表的意思就是，复制Library中Text影片剪辑到第2*30-2*(1-1)=60层，然后将此实例命名为text1；然后复制Library中Mask影片剪辑到第2*30-2*(1-1)-1=59层，然后将此实例命名为mask1。随着i的增大，可以看到代表影片剪辑的放置深度参数2*iMax-2*(i-1)和2*iMax-2*(i-1)-1的值会越来越小，这相当于从上到下地放置一张张纸片（不知道为什么要这么做吗？把参数前面的2*iMax-部分都去掉试试看）。

　　第18行到29行是分别设置上一步复制出来的texti和maski的属性。这里要注意一下的是第26、28行设置遮罩高宽（也就是大小）的语句，因为遮罩的大小和影片剪辑总数iMax共同决定了扭曲效果的逼真度，换言之，遮罩越小，影片剪辑总数越大，表现的扭曲效果就越好。不过，在确定这两个值的时候还得考虑考虑系统的感受，因为效果好的代价就是速度的下降。为了在后面更方便、更快速地预览效果，建议在第一帧最后加上一句_quality="LOW" ，将影片的质量设为低，然后在影片发布时将这一句注释掉或删掉。

　　第30行就是通过SetMask方法告诉Flash把影片剪辑mask i指定为影片剪辑text i的遮罩。

　　3．单击选中第二帧，选择插入/空白关键帧菜单命令或直接按F6，插入一个空白关键帧，然后在Action面板上输入以下代码：

for (i=1; i=iMax; i++) {　　　this["text"+i]._rotation = i*iCounter;　　　//旋转文字影片剪辑Text的实例}iDirection = (iCounteriBound || iCounter-1*iBound) ？ (-1*iDirection) : iDirection;//确定转动方向iCounter += iDirection;//计数器增一或减一

　　程序详解：

　　经过第1帧中一堆代码的努力，现在舞台上应该已经形成了如图1所示的那种结构了。下面该是第2帧和第3帧共同努力让这一堆东西转起来的时候了。

　　第1到第4行又是一个循环，它的作用是依次设定从第一个Text实例起到第iMax个Text实例的_rotation属性（也就是旋转的角度）。其中第2行里的变量iCounter，它在这个循环体里的作用不仅是确定旋转的方向（因为它有正有负），同时也和循环变量i一起决定了每个Text实例的转动角度。

　　第5行的iDirection变量相当于一个确定转动方向的标志，它只有-1和1两个值。这里用到了表达式1？表达式2:表达式3的条件操作来确定iDirection的值为1还是-1。当问号前面的表达式1的值为真时，也就是当-iBound≤iCounter≤iBound时，iDirection的值就等于表达式2的值，也就是用-1乘上iDirection。知道变量iDirection只有绝对值相等符号相反的两个值，所以，乘上-1后iDirection就会变为相反的值。否则当表达式1的值为假的时候，iDirection的值就等于表达式3的值，这里也就是等于变量iDirection本身不变。

　　第6行的程序就等于iCounter=iCounter+iDirection。当iDirection等于1的时候，iCounter的值不断增加，直到iCounter的值超出边界iBound的值；而当iDirection等于-1时，加上个-1就等于减去一个1，所以，iCounter的值就不断减小，直到iCounter的值超出边界-iBound的值。

　　值得注意的是不要将诸如-1*iBound之类的语句写成-iBound，在ActionScript里可没有直接在变量前面加个减号做负号的规矩。

　　单击选中第三帧，同样按F6插入一个空白关键帧并输入以下代码：

gotoAndPlay(_currentframe-1);//重复前一帧，实现动画的循环播放效果。

　　程序详解：

　　这第3帧的内容就比较简单了，用一个gotoAndPlay语句将第3帧和第2帧组成了一个循环的结构。其中_currentframe属性返回的是当前帧的帧号，将它的值减去1，很明显就是指当前帧前面一帧的帧号了。

　　5.选择控制/测试影片菜单命令或直接按Ctrl+Enter观看效果，即可看到扭曲的文字。