基于纯flash的动画网站的设计与实现_毕业论文(编辑修改稿)内容摘要:
动作就是指用ActionScript(动作脚本)编写的、当特定事件发生时执行的一组指令。 触发动作的事件可以是播放头到达某帧,或用户单击一个按钮,或用户按下键盘上的键。 在 Flash 中, 在动作面板中可以编写的有帧动作、按钮动用和影片剪辑动作。 使用 Normal Mode(标准模式 )动作面板上的控件,无需编写任何动作脚本就可以插入动作。 如果已经熟悉 ActionScript,也 可以使用 Export Mode(专家模式 )动作面板编写自己的脚本。 指令的形式可以是一个动作(如指令动画停止播放),也可以是一系列动作(如首先计算条件,然后执行一个动作)。 很多动作的设置只要求读者具有少量的编程经验,而其他一些动作的应用则要求比较熟悉编程语言,用于高级开发。 ActionScript 中的对象可以包含数据或作为影片剪辑以图像形式出现的编辑区中。 所有的影片剪辑都是预定义类 MovieClip 的实例。 每个影片剪辑实例均包含MovieClip 类的所有属性(例如 _height、 _rotation、 _totalframes)和所有方法(如gotoAndPlay、 loadMovie、 startDrag)。 在面向对象的脚本编写中,依据指定的顺序,类可以相互接收属性和方法,这称为继承。 利用继承可以扩展或重定义一个类的属性和方法。 从其他类继承而来的类称为子类,传递属性和方法到另一个类的类称为父类。 一个类可以是子类,也可以是父类。 3. 网站设计 的 前期 规划 网站的名称 Lane 兰蔻。 本网站 是一个商业型的网站, 做网站的目的就是为了提高公司的知名度,让公司的产品推广出去,让更多的消费人郡知道这个公司的 存在。 兰蔻 主要是推出化妆品。 运用 flash 技术去做商品展示型的网站,可能让用户更直观的了解产品, 并且给用户一种视觉的享受,让用户可以和计算机之间有一个交互的过程。 6 网站素材收集 兰蔻是法国的一个知名品牌,在全国各地都有销售,兰蔻也有自己的网站。 因此网络成为了获取信息的一个最佳路径。 通过在网上查找一些兰蔻产品的图片和文字信息,同时根据设计的需求,做一些相应的背景和小动画为网页做陪衬。 素材收集完后,再把图片在 photoshop 的处理,做一些文字效果。 最后进行设计,将图片加上文字解说放入网站中,运用 flash技术做出动态的效果。 网站的色调及风格 化妆品主要是针对的广大女性,因此选用了紫色 和白色相结合的色调,给人一种高贵优雅的感觉。 网站的风格简单大方,运用渐变的色块将网站分为了三大块,分别是 logo 导航、内容和版权信息。 网站的布 局 及栏目 网站的布局:首先在上部放入网站的左边 logo 和兰蔻的标志,中间放入导航,右边放上背景音乐的播放动画。 网站中间的部分为网站的主要内容部分,点击导航中的菜单,相应的内容就会也现在中间的版块中。 最后是页面下部分为网站的版权信息。 如图 31 所示: 图 31 本网站的栏目主要 分为 首 页、推荐 、彩妆、护肤、香水、男士、论坛七个栏目。 如图 32 所示。 7 图 32 网站的框架 网站具体框架如图 23所示 图 33 4. flash 网站的页面设计 开场动画的设计 开场动画中的图片切换用了逐帧动画,每隔一帧放一张图片。 而线的残影效果的实现的实现过程如下: 1) 新建一个影片剪辑,画一个矩形将它的四分之三的部分去掉, 将其转换为 片剪辑, 命名为 bk,新建一层,复制粘贴帧,点击“修改” —— “变形” —— “ 水平翻转 ” , 将图层 2 中的图形翻转过来和图层 1 中的 图形相对, 将两个图形移到中间刚好是个矩形,在第 10 帧的位置插入关键帧,将两个图形分别向外移动,移到刚好容下一张变换的图片为止,为它们创建形状补间动画 2) 新建一个影片剪辑 ,将影片剪辑 bk 拖入,新那一层,复制粘贴帧,点击“修改” —— “变形” —— “水平翻转”,将图层 2 中的图形翻转过来和图层 1 中的图形相对, 将它们移动到中间的位置刚好放下切换的图形,在第 5帧的位置插入关键帧,主页 推荐产品 彩妆产品 论坛 护肤产品 香水 男仕 新品 口碑产品 畅销排行 眼部 保 湿系列 璀璨香水 清洁系列 肤色 唇部 抗皱系列 美白系列 珍爱香水 奇迹香水 梦魅香水 防晒系列 修复系列 防晒系列 护理系列 8 将图形分别缩小,再 20 帧的位置插入关键帧,将图形分别向外移动并将它们的透明度变为 0。 3) 新建一个影片剪辑, 将 1)中建的影片剪辑拖入, 将其实例化为 bkuang 延长到第 10 帧,新建一个动作层, 1—— 10 帧都插入关键帧,如图 41 所示 图 41 在第 2 帧上都写入如下代码: duplicateMovieClip(bkuang,bkuang1,1)。 setProperty(bkuang,_alpha,90)。 其中第 2帧上的 alpha 的值相对于上一帧都要低,而且复制的新影片剪辑的名字依次为 bkuang1—— bkuangN,名字不可以一样。 透明度也 要相对应它的前一帧要降低。 二级面页的设计 彩妆页 面主要分为了眼部彩妆、唇部彩妆和肤色。 在这一页面中,我彩用了缓动的方法,分别将兰蔻公司具有代表性的三个彩妆系列来做为二级页面的主要内容。 并且 兰蔻全球创意总监 Aaron De Mey 作为该栏目的一部分进行介绍。 彩妆页面每一个图片上 都有一上透明的按钮,而 文字 的 显示则是用了按钮事件onRollOver 和 onRollOut 来进行调用。 到于点击图片就会进入相应的三级页面,是在该场景中放入了一个空的影片剪辑, 并将其实例化,通过 loadMovie 来调用外部文档。 打开彩妆页面和进入三级页面的图片的进入和退出用到的是缓动。 进入时的主要代码如下: 9 import。 import .*。 myTween = new Tween(mc1, _y, , 600, 10, , true)。 为了让它们出现逐个进入的效果,只需 将 它们的速度改变一个即可,也就是修改 的值,数值越大表示出现的越慢。 退出时是设计了一个函数, 代码 如下: function down(mc, time) { myTween = new Tween(mc, _y, , 30, 500, time, true)。 } 用是只需 调用并改变 它们 的影片剪辑的名字和速度就可以为了,也就是 mc 和time 的值。 三级页面的设计 按钮的设计 三级页中的按钮用的是补间动画。 本页面中的按钮为透明按钮。 主要用到了按钮事件中的 onRollOvert 和 onRollOut,当鼠标移到按钮上时影片剪辑开始播放并且在某一帧停下来,当鼠标移开时,再播放后面的帧。 具体步骤如下: 1) 新建一个图形元件,画一个矩形,不要边框。 2) 新建一个影片剪辑,将做好的矩形图形元件拖入 制作一个两帧的逐帧动画 将第一帧和第二帧的透明度改成不一样的。 3) 新建一个影片剪辑,将做好的矩形图形元件拖入,做。基于纯flash的动画网站的设计与实现_毕业论文(编辑修改稿)
阅读剩余 0%
本站所有文章资讯、展示的图片素材等内容均为注册用户上传(部分报媒/平媒内容转载自网络合作媒体),仅供学习参考。
用户通过本站上传、发布的任何内容的知识产权归属用户或原始著作权人所有。如有侵犯您的版权,请联系我们反馈本站将在三个工作日内改正。