学院首页 软件应用 编程开发 创意设计 认证培训 软件论坛
Flash Fireworks Dreamweaver Photoshop CorelDraw Illustrator FreeHand 3DsMAX AutoCAD

您的位置:学院 >> 创意设计 >> Flash >> Flash制作交互动画:星座查询器


Flash制作交互动画:星座查询器


本文中我们用Flash做一个交互动画实例——有趣的星座查询器。
  本文由中国教程网 江舟一叶 原创。

  效果演示:

/imagelist/2007/353/2yj6gk39282y.swf

  1.新建 FLASH 文档,打开属性面板,设置文档宽 400高 250 其它默认。

  2.在时间轴上新建四个图层, 我们将这五个图层自上而下分别命名 “语句” 、 “选择框” 、 “文字” 、 “星座” 、 “背景” 。
  Flash制作交互式动画星座查询器_天极设计在线转载图1


  3.新建一个影片剪辑元件取名为“背景”做一个渐变色的背景,大小为 400×250。回到场景,把这个背景剪拖到背景图层的第一帧,在第13帧加一个普通帧。

  4.分别在“文字”“星座”层的第二帧'第十三帧插入关键帧,在文字层第一帧输入“请选择你的生日范围”文字,第二'第十三帧输入“魔羯座”“水瓶座”“双鱼座”“白羊座”“金牛座”“双子座”“巨蟹座”“狮子座”“处女座”“天秤座”“天蝎座”“射手座” 。在星座图层分别对应上面的星座插入 12 星座图片。

  5.应注意各个星座之间的先后顺序。如果有举趣,还可以为每个星座加上一些说明和趣味性的文字。都完成后将“文字”“星座”层锁定。

  6.选择菜单栏的“窗口——开发面板——组件”命令,打开 FLASH 的组件面板,将其中User Interface下的 ComboBox 和 Button各拖一个至“选择框”层的第一帧,并用变形工具调整大小。

  Flash制作交互式动画星座查询器_天极设计在线转载图2

  7.用箭头工具选中其中的 ComboBox 组件,打开对齐面板水平中齐。

  8.保持 ComboBox 组件的选中状态,打开“属性”面板,可以看到有属性和参数选项,我们在属性选项的“实例名称”文本框中输入对象名称“xuanze” 。

  9.选中参数选项卡中的 labels 选项,在打开的值对话框中通过加号按钮添加各个选项的显示状态,输入各个星座对应的生日范围。

  Flash制作交互式动画星座查询器_天极设计在线转载图3

  10. 此时可以看见舞台上的 ComboBox 组件发生了变化,测试动画时已经列出了刚才输入的各个值,同时显示五项,其余项可以通过滑动条显示。    11. 退出测试动画状态, 选中 ComboBox 组件, 在属性面板的参数选项卡中双击 “data”选项,然后在打开的“值”面板中输入每个 labels 选项在动画内部真正对应的数值,如图所示。

  Flash制作交互式动画星座查询器_天极设计在线转载图4

  最终属性面板如下:

  Flash制作交互式动画星座查询器_天极设计在线转载图5

  12. 选中舞台上的 Button 组件,打开属性面板,将 Button 值改为“提交”然后在实例名称中输入“tijiao”做为该组件的名称

  Flash制作交互式动画星座查询器_天极设计在线转载图6

  13. 此时可看到舞台上的 Button组件上的文字显示不是原来的“Button”而变成了“提交” 。在选择框层的第二帧插入一个关键帧,删除舞台上的二个组件,再从“组件”面板中拖一个 Button 至舞台上,同样的方法,将实例名称命名为“fanhui” ,label 选项值改为“返回” ,属性面板如下:

  Flash制作交互式动画星座查询器_天极设计在线转载图7

  14. 在时间轴选项层的第十三帧按 F5插入帧,使返回 Button组件出现在每一个星座的画面上,然后将该层锁定。

  15. 选中语句层的第一帧,打开动作面板输入如下代码。

  stop(); //停在第 1 帧等待用户选择 
  _root.tijiao.onRelease = function() { //如果点击并释放“提交”按钮 
   x = _root.xuanze.getValue(); //将选择框的 data值赋给变量 x 
   _root.gotoAndStop(x+1); //时间轴跳转到第 x+1 帧并停止 
  };

  16.将语句层锁定, “ 选择框”解除锁定。选中第二帧的返回 Button组件,打开动作面板,输入如下语句代码。

  on(click){ //单点击时 
   _root.gotoAndStop(1); //时间轴回到第 1帧并停止 
  } 
  17. 锁定所有图层,时间轴窗口如下图所示。可以看到最上面的语句层中只有一个带脚本的空白关键帧。

  Flash制作交互式动画星座查询器_天极设计在线转载图8


  18. 保存并测试动画, 可以看到下拉菜单中选择生日提交后, 可获得该生日对应的星座,单击“返回”按钮可退回继续选择。OK 完成了。 

技术文章快速查找

栏目导航
软件应用
·操作系统 ·杀毒防黑 ·应用软件
·聊天软件 ·网络软件  
Web开发
·ASP ·JavaScript ·CGI
·JSP ·VbScript ·Web服务器
·PHP ·XML  
开发语言
·VB ·VC ·ASP.NET
·Java ·C/C++ ·Delphi
数据库开发
·MySQL ·SQL/Access ·PowerBuilder
·Oracle ·DB2  
网站设计
·Flash ·Dreamweaver ·HTML/CSS
·Fireworks ·FrontPage  
平面设计
·Photoshop ·CorelDraw ·AutoCAD
·FreeHand ·Illustrator ·3DsMAX
媒体动画
·Director ·Authorware ·Maya
·视频处理    


相关软件 产品库推荐
·笔记本 ·台式机 ·服务器
·数码相机 ·手机 ·GPS
·DV摄像机 ·MP3 ·MP4
·CPU ·硬盘 ·内存
·主板 ·显卡 ·显示器
·打印机 ·投影机 ·路由器

还没人留言,抢个先,哈哈!
对"Flash制作交互动画:星座查询器"的评论 - 快速回贴
内容:
  [完成后可按Ctrl+Enter发布]

百度中 Flash制作交互动画:星座查询器 相关内容
Google搜索中 Flash制作交互动画:星座查询器 相关内容
雅虎中 Flash制作交互动画:星座查询器 相关内容
Sogou搜索中 Flash制作交互动画:星座查询器 相关内容

相关软件 最新回复帖子:

·没有mysql支持时的替代方案
·一个可以发送附件及HTML格式邮件的PHP类
·AutoCAD打造精致三维鸟笼实例详解
·Photoshop自定义水晶字特效样式
·AutoCAD三维基础实例教程
·PS为黑背景长发美女照片抠图换背
·用Photoshop自制个性摩托车贴花小经验
·轻松几步将美女照片处理为手工素描
·巧用Photoshop画笔轻松绘制创意特效
·用Photoshop通道将模糊肖像照片清晰化


  相关软件 Flash制作交互动画:星座查询器相关文章
Flash AS代码常用调试语句trace()的使用 再谈用Flash引导线制作爱心图案动画
用Flash引导线制作爱心图案动画 Flash与Photoshop合作制作模糊渐变动画
电子杂志设计制作常用Flash技术 Flash将风景照片制作成梦幻仙境动画效果
用Flash AS代码巧做漂亮彩色线条动画 在Flash CS3中制作Fla形式的组件
Flash代码实例:神奇的互动橡皮刷 Flash8模糊滤镜绘制逼真青翠竹林
用Flash AS代码制作美丽光影变幻动画 Flash中有关层的深度处理的常用函数
如何用AS代码隐藏Flash的右键菜单 Flash动画实例:美丽蜻蜓飞舞
Flash打造窗纱随风飘动的音乐动画 Flash AS动画实例:风吹云飘草动
Flash 动画人物角色行走的几种实现方式 Flash AS代码制作鼠标触发图片缓冲放缩
精简Flash文件体积的几个小技巧 编写Flash AS代码实现按钮触发全屏动画