china.com
主页
新闻
体育
游戏
文化
教育
健康
财经
科技
旅游
军事
娱乐
商贸
  科技动态 硬件广场 下载基地 网络教室 网络冲浪 科学博览 移动时代 手机上网 桌面壁纸 科技商情  


第七节 文字的输入与输出


这一节我们要来介绍文字的输入和输出方法,这是Flash中的一项重要功能,也是我们认识Flash交互性的基础。大家试着在上面的Flash电影下面的文本框中输入一段文字,然后回车或点“确定”按钮,看一看有什么效果。再点一点“清除”键呢?

要实现文本的输入,就要用到绘图工具栏中的文字工具,我们先把输入框做好。点击工具栏中 ,选中文字工具,在下面的参数修改器中设置好用于输入的文字字体,字号,颜色以及对齐方式等项,不要忘记一定要点选最下面的,这个按钮用于设置文本域。在场景中下方用鼠标拉出一个文字框用作输入,宽度大约比所选字宽稍大一点。

然后我们要对所画的输入文本框的属性做一点调整。在文本框上点鼠标右键,在弹出的菜单中选最下面的“属性”(Properties...),进入文本域属性设置面板。如下图所示,在变量名(Variable)后填“input”,并选中第一项Draw border and background,这样就会显示文本域的背景和边界。设置变量名是为了方便我们今后的调用。现在按回车确定。

输出文本框的做法与输入框相同,我们还和刚才一样,在文字工具下用其参数修改器为要输出的文字设置字体,字号,颜色等,注意要保证按下,在刚才的输入框上面拉出一个宽一些的文本域用作输出。用鼠标右键点这个区域选“属性”进入文本域属性设置对话框。将Variable设置为“Output”,再将Options中的选项设置为下图所示。(关于每个项目的含义和设置我们将在本节的后面部分详细介绍。)这样我们就将输出文本域设置成了有边界和背景,允许多行输出并自动换行以及禁止编辑等属性。

下面我们还需要做两个按钮,分别用来输入和清除文字。因为是演示,所以我们把按钮做得简单些,你也可以直接调用Flash中已经做好了的按钮。按Ctrl-F8新建一个图符,给图符起名为Button,并将图符的类型设置为Button。进入图符编辑模式后,用矩形工具拉出一个矩形,我们还可以加入圆角并修改颜色使它更象一个按钮。注意到我们所绘制的图形都是在按钮的UP帧下,为了简单起见,我们只做这一帧。

返回场景中,按Ctrl-L打开图库窗口,分两次从预览窗口把按钮拖动到输入文本框的下面并排放置,用文字工具在两个按钮上分别写上“确定”和“清除”,如上面的电影所示。

下面的步骤要稍微难理解一些,因为我们要用到actions为按钮加入一些动作,这样当点击按钮后才能执行相应的操作。actions属于Flash的高级技术,今后我们会重点介绍的。在这里,我们只需要有个大概的印象和认识就行了。

用鼠标左键双击“确定”按钮,弹出实例属性对话框,注意到按钮类实例比图形类实例多了一项设置,就是Actions。点选Actions标签,点为按钮增加动作,在下拉菜单中选On MouseEvent,即设置鼠标对事件的响应。然后在出现的选项框中选ReleaseKey Press,并在Key Press后的输入框中按一下回车键。这样我们就把按钮将要响应的鼠标事件设置好了,即当按钮被释放或按下回车键后发生动作。

然后,我们将进一步指定在这些事件产生后如何进行操作。再点一下,在菜单中选Set Variable,我们在右边的变量名(Variable)一栏中填入output,在下面的值(Value)一栏填入input。注意必须把值右边的等价方式按钮设为,表示当按钮按下时,output中应该具有和input域中相同的内容,即二者的值相同。如果选,表示字串内容相同,这时无论你在文本输入框中输入任何文字,在按下确定按钮后,输出框中只会出现input这几个字符。同时我们注意到在这两种等价方式下,表达式的写法也不相同。
同样,双击清除按钮,我们也为它设置动作。它的Actions设置如下所示。表示鼠标在该按钮上释放时,将outputinput里的内容全部清空。
这样我们就把这个文字输入和输出的演示做好了。

              

怎么样,我做的这个文字输入输出演示比上面那个漂亮多了吧。大家想一下,如何利用我们前面学过的知识生成这样的效果。这个效果很容易实现的,与上面那个动画最大也最主要的差别是输入和输出文本域设置了边框和背景色,这使得画面靓丽了许多。

其实,幸运鸟也不会设置文本域的背景和边框颜色,只是利用了层的技术造成了一个假象罢了。我们还用上面做好的动画为例,在两个文本域上分别点鼠标右键,在弹出的文本域属性设置框中把Draw border and background前的对勾去掉,如右图所示。这样在场景中效果应如下图所示,文本域的边框和背景不再显示。

新建一个层,把它拖动到原来层的下面,并命名为Background。在该层上用矩形工具选好边框和背景色绘制出两个大小和位置分别与输出输入框均相同的矩形来,如下图所示。
这样,文本域就有了边框和背景色了。然后,我们再给按钮上上渐进色,再加些文字点缀就得到上面的效果了。怎么样,不难吧。点这里下载源文件。

附:文本域属性对话框中各项含义解释

Draw border and background 显示文本域的边框和背景
Password 用户键入的任何字符均以*号表示,且文字不能复制,剪切,从而得到保密
Multiline 允许文本以多行方式出现
Word wrap 使文本在到达右边界时自动换行
Restrict text length to 限制用户文本输入的最大字符数
Disable editing 防止用户改变文本域的内容,使文本域不能被编辑
Disable selection 使文本域中的内容不能被选择
Outlines 可以选择只保存字体的轮廓,或指定的文字,符号等,适当选用可大大减小Flash文件的大小

 

  摘自《新闪光时代》 幸运鸟/文

 


科技检索


中华网推荐

  • 1000名医生在线咨询

  • 中国足球队官方网站

  • 鸦片玫瑰(新版)

  • 精选股票天地

  • 闪光的flash教程

  • 中华网汽车世界

  • 为你的爱情出谋划策

  • 网文精选——野百合集

  • 世界文化遗产在中国

  • 历届香港小姐风姿集




  • 网络教室编辑信箱
    版权声明 | 本站检索 | 联系方法 | 刊登广告 | 使用说明 | 关于中华网 | 豁免条款

    版权所有 中华网