刚开始学习flash的人对flash中的进度条都充满了好奇,经常有人问 进度条怎么编写的问题。
在这里,我对进度条的编写作了一些总结,希望对有需求的朋友有所帮助,特别是那些初学者,希望他们在读完这篇文章后有所收获。当然,对那些高手来说未必没有一点用处,也许会有些意外收获哟。
注意:具体问题具体分析,并不保证所有情况下都适用
言归正传,从最简单的开始
所谓最简单的其实就是摆放那里的一个假的进度条,你可以作一个mc后者直接在贞里画,把它放在动画的最前面就行了,哈哈没想到吧,其实这种方法在早期swf文件比较小的情况下,确实是个不错的选择,但随着flash技术的发展,以及swf文件体积的大增,这种方法基本上已经被弃用。这里就当是一个小插曲让大家放松一下,其实做进度条没什么难的,接下来我们正是开始用as编写进度条。
首先我们来学习一下单一flash文件内部加载进度条的制作:
0,将要加载进度条的文件打开
1,将所有放置元件的的层在时间轴上的贞,向后移两贞(当然如果你没有做其他的动画,就直接插入两个关键贞就完了)
2,在第一贞处放置进度条元件,在这里我们是用一个名为preloader的mc(一个长方形的元件,记住注册点在左,或左上角);
3,在第一贞处添加代码
var amountLoaded:Number = _root.getBytesLoaded()/_root.getBytesTotal();
prelaoder._xscale = amountLoaded*100;//进度条的宽度
//当然你也可以在这里加一些动态文本之类的标示白分别什么的,在此不再赘述
4,在第二贞处加如下代码
if(_root.getBytesLoaded() == _root.getBytesTotal()){
gotoAndPlay(3);//播放结束,继续后面动画
}else{
gotoAndPlay(1);//播放未结束,继续回第一贞
}
到此,第一种用代码加载进度条的方法就完成了,很简单吧。
让我们继续往下讲,
第一种方法这么简单,为什么还要继续说别的方法呢?这里我们就要说到上一种方法的缺点了
问题出现了:如果在舞台上添加了组件或其他延展类(具体问题具体分析),前面的方法将不起作用。
解决办法:将组件连接属性中的第一贞导出取消,发布选项中选导出从第2贞,将组件放在第二贞(或有命名的贞)
并在第二贞加上stop();(注意 本文没有特别说明是所有脚本都是写在单独的as层,即写在贞上);
在第一贞加代码,
this.onEnterFrame = function(){
var amount:Number = this.getBytesLoaded()/this.getBytesTotal()*100;
preloader._xscale = amount;
}
if(amount == 100){
this.gotoAndPlay(2);//如果是命名的贞,则改成此贞
delete this.onEnterFrame;
}
分享到:
相关推荐
网站顶部显示预加载进度条插件`preload.js`是一个用于优化用户体验的重要工具,尤其是在现代网页设计中,它能够显著提高用户对网站加载速度的感受。预加载技术是预先加载部分关键资源,如JavaScript、CSS、图片等,...
预加载可以使用`<link rel="preload">`标签或者JavaScript实现。 5. **异步加载**: 对于大型应用,可以使用分块加载或按需加载(懒加载)技术,这样用户可以先看到主要内容,而其余部分则在后台加载,进度条可以...
在这个例子中,我们首先引入了jQuery库和预加载插件,然后在文档加载完成后(`$(function() {...})`)调用`$.preload()`函数预加载图片。当图片预加载完成时,会触发`preload`事件,我们可以监听这个事件来执行后续...
本篇文章将深入探讨如何使用jQuery实现图片预加载功能。 首先,我们需要理解图片预加载的目的。当浏览器解析HTML时,如果遇到`<img>`标签,它会立即请求图片资源。如果图片很大或者网络状况不佳,这可能会导致页面...
为了解决页面加载延迟带来的用户体验问题,mpvue新增了一个预加载生命周期钩子——preLoad。这个生命周期钩子的主要作用是在页面跳转前预先加载数据,以便在新页面跳转时用户能够快速看到渲染完成的页面。 本文详细...
5. **进度反馈**:为了提供更好的用户体验,插件可能还会提供预加载进度的反馈,如进度条或者百分比,让用户了解加载状态。 在实际使用 preload-master 压缩包时,开发者需要根据项目需求进行以下步骤: 1. **引入...
图片预加载技术是Web开发中的一个重要概念,尤其是在处理大量图像或者多媒体内容的网站时,能够显著提升用户体验。本文将深入探讨“图片预加载js”这一主题,包括预加载的原理、实现方式以及如何使用JavaScript来...
图片预加载技术是一种优化网页性能的方法,主要用于提升用户体验,尤其是对于图像密集型的网站或应用。当用户浏览网页时,预加载技术会提前加载部分或全部未来可能需要的图片资源,这样在用户实际查看这些图片时,...
图片预加载插件。包含有序加载和无序加载两种。具体使用方法,参考https://blog.csdn.net/yang1393214887/article/details/92582715
"wxapp-preload"是专门为微信小程序设计的一个图片预加载解决方案,它能帮助开发者在用户实际看到图片之前提前加载图片资源,减少页面加载时间,提高应用性能。 首先,我们要理解什么是图片预加载。预加载就是在...
**preloadjs 图片预加载插件详解** 在Web开发中,图片预加载是一项重要的优化技术,它可以提升用户体验,确保图片在需要时能够迅速显示。preloadjs 是一款强大的JavaScript库,专为实现资源预加载而设计,包括图片...
本篇文章将深入探讨“图片预加载”的概念、重要性以及如何使用jQuery插件实现这一功能。 一、图片预加载的概念 图片预加载,顾名思义,就是在用户实际看到图片之前,提前下载图片到浏览器的缓存中。这样当用户滚动...
5. **监控进度**:为了提供更好的用户体验,可以添加一个进度条或者提示来显示预加载的进度。这可以通过修改预加载函数中的`onload`回调来实现。 通过以上步骤,我们就完成了使用jQuery 1.3进行图片预加载的简单...
在这个例子中,`.not(".preload")`确保已经预加载过的图片不会再次被延迟加载。 总结,通过jQuery实现图片预加载和延迟加载,可以有效提升网页加载速度,改善用户体验。预加载保证了关键内容的快速显示,而延迟加载...
例如,可以使用`<link rel="preload">`标签来声明预加载资源: ```html <link rel="preload" href="resource.css" as="style"> <link rel="preload" href="script.js" as="script"> ``` 在这两套预加载代码中,...
在`f-preload-master`这个压缩包中,可能包含的就是一个实现了以上功能的预加载插件源代码。用户可以解压后查看其结构,学习如何实现这样的预加载机制。通常,这样的插件会包含一个主文件(如`preload.js`),可能...
当然,实际项目中,开发者往往会选择使用已有的预加载插件,例如本案例中提到的`preload_images`。这个插件可能封装了上述步骤,提供更方便的接口调用。使用插件通常只需几行代码即可实现图片预加载,例如: ```...
在您的路由组件中添加preload功能,用于在呈现这些路由之前预填充数据。 大多数情况下是根据Sapper的建模的,但也类似于Nuxt.js的和Next.js的 。 安装 $ npm i @badrap/preload 用法 提供了以下示例的修改。 基本...
资源预加载组件——preload 队列,可以支持队列加载和回调,也可以加载视频或者音频 进度条,可以动态获取进度条信息 支持img标签的预加载,添加pSrc属性即可 原生ES5 demo Install: git clone ...
在网页设计中,图片预加载是一项重要的优化技术,它的目的是提前加载用户可能需要的图片,以提高用户体验,减少页面加载时间。"图片预加载loading"就是这个概念的具体应用,它通常会在页面的主要内容加载之前,预先...