在接触flash动画的同时,相信你也有一定接触过loading这个东西吧。毕竟loading这个东西在网页制作的时候,还是十分的重要的。但是你知道怎样使用FLASH来制作出来吗?今天小编就为大家介绍这篇教程:制作一个完整的loading。

其实loading这个东西,说穿了就是一种给用户反馈的表现形式。主要有两种,第一种是在客户端中的loading,这种loading通常是以鼠标的手型变化来表现出来;另外一种是在web端,loading的创意就会层出不穷了,而且给用户的反馈更好。小编在这篇教程中,将会主要阐述在flash中如何制作loading的一些问题。

1.loading的原理

小编认为,如果要制作一样东西,首先要做得就是先理清它的原理。所以我们就先来看一看loading的原理。在flash中,制作loading的目的是为了可以预先加载一部分的内容(当然我们也可以选择全部进行加载完毕,或者加载一部分之后),然后再把flash的主要内容全部都展示出来。一般来讲,loading是放在第一帧上面的(当然这只是一般情况,我们也可以不放在第一帧,比如:放在任意的一帧,但是在第一帧以后,我们就要要做一个跳转,让播放头到loading的那一帧里面去)。在这里我们要注意一个问题是,如果我们的flash程序有从元件库里导出元件的话(这里默认是为第一帧导出),要导出的原件全部加载完毕之后,才会显示出第一帧的内容(即我们的loading)。这样的话,很可能我们在第一帧导出的内容过于庞大,从而占据了整个flash应用很大的一部分,比如50%,那么我们实际运行的效果,就是在一段空白之后loading从50%处就开始显示了。

2.避免方法

如果我们要避免上面的问题(一个明显的不好的用户体验),那也不是没有办法的。通常来讲,小编会用到以下的两种方法:

第一种:如果我们要把导出的元件进行取消导出,那么把它们集中放在某一帧(除开你做loading的那一帧),然后在放元件的这一帧之后的那一帧就可以开始运行我们的程序了。

第二种:方法就是用另个一个swf来加载所需要做loading的swf。这种方法可以有比较完整的加载进度条以及百分比文字,不过缺点就是会很容易引起其他的问题,这个问题小编在后面会进行讨论。

3.举例说明

小编在这里举个例子来说,小编想为A.swf做一个loading,关键的代码如图所示:

在AS3.0中增加了一个新的loaderInfo类,这是用来提供已加载的swf、图像文件的信息。flashplayer通过调度ProgressEvent对象的loadProgress方法来实现对加载内容反馈的监听,当全部已经加载完成以后,flashplayer再调度Event对象的loadComple方法。loadProgress方法是小编自己定义的监听加载进度的一种方法,所有有关加载的信息都可以在这个方法中加以反馈:

如图所示。上面的代码输出正在载入内容的百分比,这是一种最简单的反馈,但是我们可以在这段代码里丰富我们的loading的内容,那样子就会使loading更具有趣味性,以至于使得用户在等待下载的时候,能够更加清楚的知道下载的进度,或者在这个时候观赏一段精美的动画——当然这个完全取决于我们自己的设计,那就看大家有没有这方面的创意了。如果这时候已经加载完成了,那么就可以执行loadComplete这个方法了。在loadComplete方法里添加我们所想要的动作,比如给用户一个播放按钮,以使得用户可以进行自主选择,或者是直接进入某一帧进行播放。

小编在前面就已经说过了,直接在swf上添加loading这就可能会导致loading不是从1%开始的,那么这个时候我们可以用一个swf加载另一个swf的方法来实现完整的loading。比如,我们想在B.swf里加载A.swf,那么在B.swf的程序里使用loader加载A.swf。不过在这里需要注意的问题是,监听loader的加载进度是需要使用loader的contentLoaderInfo属性,而不是loaderInfo。关于loaderInfo和contentLoaderInfo的关系。如图所示:

由于B.swf只是起到加载A.swf的作用,然而并没有其他的显示内容,所以它本身的加载我们是可以忽略不计的,这种方法就可以比较完整的展示A.swf的加载过程。但是,同时如果我们使用这种方法也会引发了一些问题,比如我们在A.swf里与web端进行通信,使用了loaderInfo的parameters属性,则我们在使用B.swf加载A.swf以后,通信就会失效。这是因为FlashVarshtml参数只是影响了主swf(例子里面为B.swf),就是说我们可以在B.swf里完成通信,但是A.swf不行。所以,我们可以先在B.swf中获取到页面所要传递的信息,然后再让A.swf从B.swf中获取这个信息,那样就可以了。通常小编都是这样进行处理的,假如B.swf的文档类为Main.as,那么在Main.as中定义一个static的属性,比如prama(publicstaticvarprama),这是用来保存传递的信息,然后再在A.swf中通过Main.prama获取这个信息。这样的方法,就可以间接实现了A.swf与web端之间的通信。

小编总结:

相信通过这个例子,我们已经学习到了如何使用FLASH这个软件制作一个完整的loading。其实在网上,制作loading的教程也有非常的多,但是小编认为只有明白了其制作的基本原理,才能够从根本上制作出更为规范的设计。大家快来动手试一试制作完整的loading吧。希望这个教程大家会喜欢!

课课家会一直更新关于设计类的文章,请继续关注我们的网站:课课家教育。谢谢!

html加载swf 进度条,教你用FLASH如何制作完整的loading相关推荐

  1. html加载swf 进度条,Flash加载外部文件创建进度条3种方法

    Flash加载外部文件创建进度条3种方法 互联网   发布时间:2008-10-07 09:36:14   作者:佚名   我要评论 加载外部文件的进度条(看帮助文档整理),只适合那些不愿看帮助文档的 ...

  2. Process插件:typecho加载页面进度条插件

    介绍: typecho加载页面进度条插件 这是一款适用于typecho任何主题的加载页面进度条,可以让你的博客加载时显得更加顺滑而不会显得过于突兀,使用本插件可以很好得起到视觉缓冲的作用. 本插件有十 ...

  3. 精通Android自定义View(十四)绘制水平向右加载的进度条

    1引言 1 精通Android自定义View(一)View的绘制流程简述 2 精通Android自定义View(二)View绘制三部曲 3 精通Android自定义View(三)View绘制三部曲综合 ...

  4. VS2015 Cordova实现WebView加载页面进度条(Android)

    因为使用Cordova做app时,加载页面没有进度条,用户无法感知打开进度,故加入进度条,具体实现如下: 1.  如果项目没有生成过apk,需先生成一次,这样在项目下面才会出现platforms/an ...

  5. Android自定义波浪加载圆形进度条——(自定义控件 一)

    2019独角兽企业重金招聘Python工程师标准>>> 自定义控件-- 波浪形状圆形进度加载 时间管理的基础是精力管理,精力的高低.正负分影响到我们的效率 而时间是无法管理的,能够管 ...

  6. android 环形时间显示_Android自定义波浪加载圆形进度条——(自定义控件 一)...

    自定义控件-- 波浪形状圆形进度加载 时间管理的基础是精力管理,精力的高低.正负分影响到我们的效率 而时间是无法管理的,能够管理的只有自己,透过管理自己的习惯,管理自己的事件来达成对时间的管理. 而在 ...

  7. 肝了两宿才收集的17个超炫酷的 CSS 动画加载与进度条特效,绝对值得收藏!!!

    文章目录 一.圆形加载动画 二.上下跳动的圆球加载动画 三.3D立体加载动画 四.饼图加载动画 五.多色圆点波动效果的加载动画 六.制作顺时针放大的圆圈加载动画 七.制作小圆圈轮流放大的加载动画 八. ...

  8. jquery ajax加载页面进度条,基于jQuery实现模拟页面加载进度条

    因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载 ...

  9. Unity3D专区Unity实现加载场景进度条

    using UnityEngine; using System.Collections;public class Scene2 : MonoBehaviour {//异步对象AsyncOperatio ...

最新文章

  1. 洛谷P1110 报表统计 multiset stl好题
  2. python pdf-浅谈Python处理PDF的方法
  3. JDK源码解析 Integer类使用了享元模式
  4. android 获取url中的参数
  5. html抓取成xml,使用XML包将html表抓取到R数据帧中
  6. 最大规模线上新基建项目拉开大幕!第127届广交会今天正式开展
  7. 用MySQL-zrm来备份和恢复MySQL数据库
  8. 区块链 性能压力测试工具Caliper
  9. 实际测试中,经常发现摄像头断线几分钟
  10. CC2530概述(简单了解)
  11. 手机网页 弹窗layerUI
  12. HR:这样的简历我只看了5秒就扔了,软件测试简历模板想要的进。
  13. python 语音处理工具包AudioSegment的基本使用
  14. 以太坊 day (6) 简单众筹项目的演示
  15. 经典分割线 html分割线
  16. 图解GitHub和SourceTree 入门教程 使用教程
  17. ThinkPHP 缓存技术详解 使用大S方法
  18. 并非所有投资都同样贬值:数字资产的恢复期
  19. 迅雷看看播放器4.9.15.2156 如何观看超过5分钟以上的视频?
  20. rtos和linux在内存管理上,freertos与linux区别

热门文章

  1. 利用R、Octave、NumPy和SciPy求解线性方程组
  2. 《天天数学》连载04:一月四日
  3. 【BZOJ1406】【codevs2478】密码箱,数论练习
  4. 【codevs1869】硬币购物,背包+神奇的容斥原理
  5. bzoj2822 [AHOI2012]树屋阶梯 dp
  6. 2017.9.20 回文串 思考记录
  7. 2017.5.11 道路修建 思考记录
  8. 2017.3.30 寿司晚宴 失败总结
  9. 小学阅读方法六种_小学数学速算六种方法
  10. 【英语学习】【WOTD】teetotaler 释义/词源/示例