打字特殊效与元件缩放调整.doc

制作Flash交互打字特殊效果作者：未知文章来源：未知点击数：1613更新时间2005-6-10我们常常看见下面演示的打字效果：字符一个个地跳上屏幕，后面还跟着一个闪动的光标，很有意思。很多朋友觉得用swish制作FLASH新手对这个效果的制作还不甚清楚，现在我就将下面这个打字效果的制作过程提供给大家，希望对大家有所帮助。 实现原理 在这个影片中，我们用一个string对象来保存要显示的全部字符，然后在元件“screen”第一帧中，调用string对象的substring函数来取得从第一个字符到第index个字符，然后将其赋值给“textarea”对象显示出来（后面加上一个字符_是用来充当输入光标的）。index加1，即下次多显示一个字符，这样看起来字符就是一个个增加上去的。当index值等于需显示字符的总长度时影片停止播放，“打字”结束。然后通过生成一个随机整数随机跳转至后9帧中的任一帧，再让影片自己播放至最后一帧，最后一帧再跳转至第一帧进行下一轮的显示，这样实现了输入效果时间延迟上的随机性。关于影片中使用到的函数的具体用法，请参看FLASH的帮助文件。 首先来处理这个效果中最重要的部分：字符的显示。 1.新建一个影片元件“screen”。点选“文字”工具，在“属性”栏中将其改成“动态文本”（如下图），然后在影片中拉出一个大小合适的矩形区域。 2.点选刚刚拉出的文本区域，将其“instance”值改为“textarea”。然后调整其字体，颜色等参数至适当值。特别注意将文本区域的“行类型”改成“多行”。（参考下图） 3.点击第一帧，在“帧动作”中加入以下代码： textarea.text=textshow.substring(0,index)+_; index+; if(indextextshow.length) stop(); gotoAndPlay(Math.ceil(Math.random()*5)+5); 4.在第10帧新建一个关键帧，点击第10帧，加入以下代码： gotoAndPlay(1); 5.新建一个层“back”，在里面拉出一个跟文本框大小差不多的黑色矩形，作为文本框的背景。点击本层的第10帧，按F5键，将本层时长延长至第10帧。 6.新建一个层“sound”，点击“文件”-“导入”，导入一个打字的声音文件。然后将其拖放到这一层的第一帧并适当延长本层时长。 好了，文字的显示部分基本完成，对代码部分不清楚的朋友请再仔细阅读本文开始的实现原理，下面继续。 7.退出元件编辑状态，将我们刚才做好的这个元件放到影片中，然后点击它，将其“instance”值改为“screen”。然后在“动作-影片剪辑”中加入以下代码： onClipEvent(load) textshow=new string; textshow=打字效果演示。你可以在下面的方框中输入其它字符，改变显示的内容。由RPGS制作。; index=1; 现在按“Ctrl+Enter”测试一下影片，你已经可以看见字符一个个地打出来了，你已经学会这个效果的制作了。 下面的工作我们将完成接受有用户输入部分。 8.再在影片的适当位置拉出一个“输入文本区域”（方法同前，只是在“属性”中选择“输入文件（本）”，参考第一步图）。将其“instance”值改为“textinput”。 9.在影片中新建三个按钮（参考下图），点击按钮1，加入以下代码 on(press) textinput.scroll-=1; /文本区域向上滚动 点击按钮2，加入以下代码： on(press) /重置参数，再次显示。 screen.textshow=textinput.text; screen.index=1; screen.gotoAndPlay(1); 点击按钮3，加入以下代码： on(press) textinput.scroll+=1; /文本区域向下滚动 好了，影片至此已经全部完成。你可以在“textinput”中输入自己的内容，然后就会在上方显示出来了。下载.fla源文件。 我们先分析画面层次结构：画面很简单，在黄蓝色相间的主场景（_root）上，右下角放有几组按钮，中间有一个实例名为“huan_mc”的影片剪辑，“huan_mc”影片剪辑中还嵌套了一个实例名为“shu_mc”的影片剪辑，shu_mc影片剪辑里有一个圆形、一只小松鼠和4只按钮。把鼠标分别移到各个按钮上，可以显示按钮上设置的动作，点击主场景上的按钮和shu_mc影片剪辑里的按钮，可以分别控制各级影片剪辑的相应属性。从绝对路径控制影片剪辑属性：下面我们先来看看通过主场景上按钮的release事件对影片剪辑huan_mc进行属性控制。主场景上的一组蓝色按钮控制的是huan_mc的透明度属性：_alpha : 透明度属性，以百分比为单位。蓝色减号“-”按钮上的语句：on (release) _root.huan_mc._alpha = 50; /点击按钮时，将场景上的huan_mc影片剪辑透明度设为50 蓝色加号“+”按钮上的语句：on (release) _root.huan_mc._alpha = 100; /点击按钮时，将场景上的huan_mc影片剪辑透明度设为100。这一组按钮的语句很简单，直接将一个常量赋值给场景上的huan_mc影片剪辑对象的透明度属性。 主场景上的一组红色按钮控制的是huan_mc的纵、横向缩放比例属性：_xscale 影片剪辑的横向缩放比例，以百分比为单位。 _yscale 影片剪辑的纵向缩放比例，以百分比为单位。红色加号“+”按钮上的语句：on (release) _root.huan_mc._xscale = _root.huan_mc._xscale*1.1;_root.huan_mc._yscale = _root.huan_mc._yscale*1.1; 红色减号“-”按钮上的语句：on (release) _root.huan_mc._xscale = _root.huan_mc._xscale*0.9;_root.huan_mc._yscale = _root.huan_mc._yscale*0.9;这一组按钮上的语句中，属性的取值就不是一个简单的常量了，而是通过两个表达式计算出对象的纵、横向缩放比例，如“_root.huan_mc._xscale*1.1”，计算的结果就是横向缩放比例为场景上的huan_mc横向缩放比例的1.1倍即110%。再将这个结果赋值给表达式左边指定的影片剪辑对象的相应属性，点击一次按钮就会计算一次，由此令该影片剪辑对象按照每一次计算出的比例进行纵、横向等比例缩放。下面再来看看主场景上的一组绿色“上”、“下”、“左”、“右”按钮，这一组按钮控制的是位于huan_mc内部的shu_mc的纵、横坐标属性。_x 影片剪辑的横坐标属性，单位为像素。_y 影片剪辑的纵坐标y 坐标，单位为像素。绿色“向上”按钮上的语句：on (release) _root.huan_mc.shu_mc._y = _root.huan_mc.shu_mc._y-10;当点击鼠标时，即由右边的表达式计算出“shu_mc”的y（纵）坐标位置，然后赋值给shu_mc的纵坐标属性，如shu_mc在场景上的初始x、y位置为（0，0），第一次点击鼠标，shu_mc的位置变为（0，-10），即上移10个像素。每点击一次，上移10个像素。其他“向下”、“向左”、“向右”3个按钮同理。 主场景右下角绿色加号“+”、减号“-”按钮控制的是主场景(_root)的纵、横向等比例缩放，每点击一次减号“-”按钮，主场景按90的比例缩小，点击加号“+”按钮，比例还原到100。从相对路径控制影片剪辑属性：以上所述，主场景上的按钮都是以绝对路径的方式控制各级影片剪辑的相关属性。绝对路径在前面的内容里已经学习过。下面我们再来看看位于“shu_mc”影片剪辑内部的按钮是如何控制影片剪辑属性的。分别点击两个红色按钮，可以调整huan_mc影片剪辑的纵、横向等比例缩放，分别点击两个绿色按钮，可以控制主场景的纵、横向等比例缩放，与主场景上相应按钮的控制效果相同，但是，它们路径的指向却有所不同。红色加号“+”按钮上的语句：on (release) this._parent._xscale = this._parent._xscale*1.1;this._parent._yscale = this._parent._yscale*1.1;红色减号“+”按钮上的语句：on (release) this._parent._xscale = this._parent._xscale*0.9;this._parent._yscale = this._parent._yscale*0.9;与主场景上红色按钮的语句不同之处是，路径不一样，前者使用标识符“_root”指定绝对路径，而这里是以标识符“this”和“_parent”指定相对路径，这是我们这一节要掌握的又一个知识点。this 当将其附加到按钮的 on 事件动作中时，它指向的是包含该按钮的影片剪辑的时间轴。 _parent 当将其附加到按钮的 on 事件动作中时，它指向的是包含该按钮的影片剪辑时间轴的上一级时间轴，即父时间轴。比如红色按钮上的“this._parent”，this指向的就是包含了按钮的“shu_mc”影片剪辑的时间轴，“_parent”指向的是包含了按钮的“shu_mc”影片剪辑的上一级影片剪辑的时间轴，即“huan_mc”影片剪辑时间轴。所以，当点击位于“shu_mc”中的红色按钮时，它控制的是“huan_mc”的纵、横向等比例缩放属性。再看位于“shu_mc”中的绿色按钮上的语句：绿色减号“-”按钮上的语句：on (release) this._parent._parent._xscale = this._parent._parent._xscale*0.9;this._parent._parent._yscale = this._parent._parent._yscale*0.9;绿色加号“+”按钮上的语句：on (release) this._parent._parent._xscale = 100;this._parent._parent._yscale = 100;这里，又多了一级“_parent”，按照上面的路径分析，“_parent._parent”指向的就应该是包含了按钮的“shu_mc”影片剪辑的上一级“huan_mc”影片剪辑的上一级时间轴，即主场景“_root”的时间轴。所以，当点击按钮时，控制的是主场景时间轴的等比例缩放。路径小结： 这个实例，主场景上的按钮都是由外向内通过绝对路径的方式分别控制各个级别影片剪辑对象的属性，而嵌套在影片剪辑内部的按钮则是由内向外通过相对路径的方式控制各级父级影片剪辑的属性。 事实上，绝对路径与相对路径的区别是到达目标对象的出发点不同，绝对路径是以当前主场景（即根时间轴）为出发点，以目标对象为结束点；而相对路径则是从发出指令的对象所在的时间轴为出发点，以目标对象为结束点。 理解了路径的概念，我们就可以灵活的运用了。比如上面实例中的所有按钮，其实都可以分别运用绝对路径和相对路径的方式来实现相同的控制效果。 以shu_mc里嵌套的按钮为例，我们把绿色减号“-”按钮上控制主场景横向缩放比例的语句改成绝对路径方式： this._parent._parent._yscale 可以写成 _root._yscale在熟悉了路径概念，并能加以灵活应用之后，语句是可以加以简化的，比如：_root.huan_mc._alpha = 100; 可以写成 huan_mc._alpha = 100;this._parent._parent._yscale = 100; 可以写成 _parent._parent._yscale = 100; 路径的概念非常重要，在添加动作时，如果路径的指向不正确，就实现不了预期的效果，甚至会引起程序出错。关于设置属性的语法格式，我们再补充一点内容，本节实例中是按照面向对象编程的形式，用点语法的格式写的语句，as中还可以用setProperty()函数来为影片剪辑设置属性：setProperty(要设置其属性的影片剪辑实例名称的路径, 要设置的属性, 属性的新值/计算结果为属性新值的公式)比如以下语句是等同的：_root.huan_mc.shu_mc._y = _root.huan_mc.shu_mc._y-10;setProperty(_root.huan_mc.shu_mc, _y, _root.huan_mc.shu_mc._y-10);赋值运算符“=”：这一节出现的等号“=”是前面没有接触过的。这个等号“=”是一个“赋值运算符”，不表示相等，相等运算符是两个连接的等号“=”，赋值运算符“=”的作用是将等号“=”右边的数值或者通过表达式计算的结果赋给左边的变量或者对象，比如上面的huan_mc._alpha = 100;这一节中的语句，我们还可以用“算术组合赋值运算符”来表示 ：加法赋值运算符“+=”：格式是：数值（或者字符串）1 += 数值（或者字符串）2将数值（或者字符串）1 + 数值（或者字符串）2 的值赋予数值（或者字符串）1。比如，x = x + y用加法赋值运算符表示就是 x += y也可以是计算结果为数值的表达式