进站加载动画

教育科学与技术学院Flash网站进站加载动画设计方案专业：教育技术班级：2012级二班姓名：吴保娣学号：120401041218指导老师：高晓晶一、作品简介本作品的主题是“Flash网站进站加载动画”，即在进入网站前的加载动画。一般我们看到的加载动画都是以进度条或者单纯的数字显示，背景也一般是白色的背景，或者模糊的主页背景。为了体现新意，有所突破，我用了一个动态的旋转的紫色背景加数字加载来呈现。这样使得画面不会太显单调，并且以秒计时，时间也不会太长，使用户不易产生疲劳之感。二、设计理念1.颜色我选择黑色背景，用紫色的旋转动画，白色的数字加载，这样搭配出来的效果明显，视觉冲击感强，给人留下深刻印象，同时也不易产生视觉疲劳。2.布局因为画面元素比较简单，比较少，因此我采用最简单的居中布局，旋转动画位于整个画面的正中间，加载数字位于旋转动画的下方。三、材料的收集过程本作品制作比较简单，用到的素材也比较少，只用到一张图片，还有就是实现动画功能的脚本代码。四、设计过程1.关键技术本作品制作简单，除了利用图片之外，没有多余的元件，因此使用的技术也很少，几乎完全是利用脚本代码实现预期功能。2.制作过程（1）打开FlashCS5，选择矩形工具，在主场景中画出下一个只有边框有矩形，本例该矩形大小为350*16像素。（2）再在主场景中仍用矩形工具画出一个只有填充而无边框的矩形，并按F8键将其转换为影片剪辑（注：其注册点一定要选在该矩形的最左侧），其实例名为bar。本例该矩形大小为345*11像素。（3）将上述两矩形在主场景中排列好，使边框矩形嵌套填充矩形。（4）在上述两矩形旁边用文字工具拖出一动态文本框，其变量名为bar_per。至此，准备工作就绪，即建立了两矩形框和一动态文本框，下面准备编写代码。（5）在主场景中，新建一层，选中该层第1帧，按F9键打开动作脚本编辑窗口，输入以下代码：this.onLoad=function(){myBytesTotal=_root.getBytesTotal();}this.onLoad();this.onEnterFrame=function(){myBytesLoaded=_root.getBytesLoaded();bar_xscale=myBytesLoaded/myBytesTotal*100;percent=Math.round(bar_xscale);this.bar._xscale=bar_xscale;this.bar_per=percent+%;if(myBytesLoaded==myBytesTotal){deletethis.onEnterFrame;_root.nextFrame();}else{this.stop();}}（6）从主场景时间轴第2帧起制作的flash影片。注解:①this.onLoad=function(){myBytesTotal=_root.getBytesTotal();}此段代码是指,当影片剪辑(本例指两矩形和一动态文本框所存在的主场景)加载时,读取主时间轴存在的所有元素的总字节数并赋值给变量myBytesTotal。②this.onLoad();flash事件处理函数MovieClip.onLoad=function(){…}有些奇怪,其中设置的代码，若不在后面加上this.onLoad();，这些代码并不能执行，因此加上这一句以便这些代码得以执行。③myBytesLoaded=_root.getBytesLoaded();//读取主时间轴存在的所有元素已加载的字节数,并将其赋值给变量myBytesLoaded。④bar_xscale=myBytesLoaded/myBytesTotal*100;//将myBytesTotal折算成100时，myBytesLoaded所得到的折算值赋给变量bar_xscale，以便给主场景中bar的_xscale赋值（_xscale的最大值只能为100），这里用到了初等数学的比例计算。⑤percent=Math.round(bar_xscale);//将变量bar_xscale的值取整后赋给变量percent，以便显示的百分比不带小数。3.界面描述五、心得体会本次作业的界面比较简单，但对于对Flash脚本代码一窍不通的我来说，脚本代码就是一个难点。作为网站的加载动画，本次作业中的代码使用也不少，为此，我查阅了很多相关加载动画的制作，参考了一些网站的加载动画制作过程，最终才做出了这样的效果。经过这次作业之后，感觉自己欠缺的地方太多，特别是脚本代码这一块，希望在以后几次的实验中能潜心学习，做出令自己满意的作品。