ZZ flex preloader
Flex 的默认的 Preloader, 平心而论,不是很好看。一个个性化的Preloader,基本上要包括三个部分。
1. 公司或者网站Logo,或者个性化的预载图片。好似是桌面软件的Splash Screen。
2. 载入数据的进度,文字形式的百分比。
3. 载入进度条。
preloader不像Flex项目中普通的部件可以通过CSS进行设置,是因为当程序初始载入时,CSS文件的设定还未被载入,所以不好通过CSS进行外观的控制。
这里有Ted把SWF,GIF 和 PNG 文件作为 Preloader 的教程。不过这里没有上述元素三合一的例子。
把网上的资料总结一下,这里放个三合一的例子。最终效果预览,
设置WEB程序的Preloader为自制的Preloader时,要修改主程序Application标签中的preloader属性,
- <?xml version="1.0" encoding="utf-8"?>
- <MX:APPLICATION xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"preloader="com.ibsol.view.Preloader">
- <MX:SCRIPT>
- ...</MX:SCRIPT></MX:APPLICATION>
这里的com.ibsol.view.Preloader是自定义Preloader类的路径。
Preloader要扩展DownloadProgressBar类才能设置自己的Preloader
- package com.ibsol.view
- {
- import flash.display.Sprite;
- import flash.events.Event;
- import flash.events.ProgressEvent;
- import flash.events.TimerEvent;
- import flash.text.TextField;
- import flash.utils.Timer;
- import mx.events.FlexEvent;
- import mx.preloaders.DownloadProgressBar;
- public class Preloader extends DownloadProgressBar
- {
- //显示进度的文字
- private var progressText:TextField;
- //进度条
- public var img:WelcomeScreen;
- //logo页面
- public var logo:WelcomeLogo;
- private var _timer:Timer;
- public function Preloader()
- {
- super();
- //加入logo
- logo = new WelcomeLogo();
- this.addChild(logo);
- //加入进度条
- img = new WelcomeScreen();
- this.addChild(img);
- //加入进度文字
- progressText = new TextField();
- progressText.x = 40;
- progressText.y = 90;
- this.addChild(progressText);
- //进度条计时器初始化,我们实现进度条的原理就是不停的刷新进图条图片
- //因为每次进度条的长度不同,所以就有进度条在走的效果
- _timer = new Timer(1);
- _timer.addEventListener(TimerEvent.TIMER, drawTimerHandler);
- _timer.start();
- }
- /**
- * override这个函数,来实现自己Preloader的设置,而不是用其默认的设置
- */
- override public function set preloader(value:Sprite):void
- {
- value.addEventListener(ProgressEvent.PROGRESS, progHandler);
- value.addEventListener(FlexEvent.INIT_COMPLETE, initCompleteHandler);
- //在这里设置预载界面居中
- //如果在初始化函数中设置,会有stageWidth和最终界面大小不一致的错误,而导致不能居中
- x = (stageWidth/2) - (300/2);
- y = (stageHeight/2) - (180/2);
- }
- private function progHandler(e:ProgressEvent):void
- {
- //计算进度,并且设置文字进度和进度条的进度。
- var prog:Number = e.bytesLoaded/e.bytesTotal*100;
- progressText.text = "已下载 " + String(int(prog)) + "%";
- if(img)
- {
- img.progress = prog;
- }
- }
- private function compHandler(e:Event):void
- {
- }
- private function initCompleteHandler(e:FlexEvent):void
- {
- //如果载入完毕,则停止刷新
- img.ready = true;
- _timer.stop();
- //测试专用。下载完毕后,不马上跳到程序的默认界面。而是停顿10秒后再跳入。
- var timer:Timer = new Timer(10000, 1);
- timer.addEventListener(TimerEvent.TIMER, dispatchComplete);
- timer.start();
- }
- private function initProgHandler(e:FlexEvent):void
- {
- }
- /**
- * 一定要分发这个事件,来通知程序已经完全下载,可以进入程序的默认界面了
- */
- private function dispatchComplete(event:TimerEvent):void
- {
- this.dispatchEvent(new Event(Event.COMPLETE));
- }
- /**
- * 每个时钟周期都刷新进度条图片
- */
- private function drawTimerHandler(event:TimerEvent):void
- {
- img.refresh();
- }
- }
- }
图片logo层的实现方式是
- package com.ibsol.view
- {
- import flash.display.Loader;
- import flash.utils.ByteArray;
- public class WelcomeLogo extends Loader
- {
- [Embed(source="assets/preloader.png", mimeType="application/octet-stream")]
- public var WelcomeScreenGraphic:Class;
- public function WelcomeLogo()
- {
- this.loadBytes(new WelcomeScreenGraphic() as ByteArray);
- }
- }
- }
转载于:https://www.cnblogs.com/ternastone/archive/2010/12/06/1897641.html
ZZ flex preloader相关推荐
- flex自定义preloader预加载进度条
flex默认的preloader已经很不错了,可是有时候还是需要自定义的. 需要在要出现自定义预加载的程序的<mx:Application>标签里加入preloader="&qu ...
- 使用Flex Bison 和LLVM编写自己的编译器[zz]
1.介绍 我总是对编译器和语言非常感兴趣,但是兴趣并不会让你走的更远.大量的编译器的设计概念可以搞的任何一个程序员迷失在这些概念之中.不用说,我也曾 今尝试过,但是并没有取得太大的成功,我以前的尝试都 ...
- Flex 开发PDF阅读器 【转】
FLEX开发PDF阅读器,将PDF转化为SWF 2009-08-23 13:35 下载:http://down.52z.com/zz/SWFTools_en.rar(搜狗搜索) http://www. ...
- 【转】Flex Application 初始化顺序
转自:http://www.jexchen.com 大家都知道,我们在编写Flex应用程序时,通常是以<mx:Application>标签作为开头,实际上,Flex应用程序在启动运行的时候 ...
- flex java 开发环境搭建_Ubuntu Linux下Flex 4开发环境的搭建
Flex 3 应该也可以.Adobe labs有一个这样的项目:Flex Builder 3 for Linux,没试. 我的环境是 Ubuntu 10.04 Flex 4官方没有Linux版本 理论 ...
- Flex 3 与 Flex 4 beta 之间的区别
Flex 3 与 Flex 4 beta 之间的区别 Flex 4(代码名:Gumbo)beta 发行版在 Flex 3 基础上做出重大改动.Flex 4 beta 引入了一个新的组件和外观架构.但是 ...
- 获取Flex SDK加载进度的方法
用flex做的项目往往会把sdk设为RSL(运行时共享库)的方式加载,因为这样可以减小文件体积,缩短加载的时间. 但是会碰到另外一个问题,加载SDK需要很长时间,并且flex没有提供sdk加载进度的方 ...
- 深入浅出Flex组件生命周期Part4 ─ 引擎LayoutManager【转载】
一. 小结 我们已经知道,Spark组件实际上由两个UIComponent构成,一个是所谓的Skin类,一个是所谓的Component类.Component类负责管理数据和逻辑,Skin类负责管理可视 ...
- Adobe Flex Application LifeCycle
Flex的根对象就是SystemManager,而不是我们平常看到的Application. SystemManager是第一个在Flex应用中被创建的Display Class,继承自flash.d ...
最新文章
- mac 4k分辨率 字太小 27寸 hidpi_4K,就在眼前!视网膜级桌面显示器AOC U2790PQU评测报告...
- python提高办公效率-【纯干货】提高Python运行效率的小窍门
- ICCV 2019 | Lifelong GAN:基于持续学习的条件图像生成模型
- 129. Sum Root to Leaf Numbers
- Android开发学习之路-Git的极简教程?
- ctrl c 失效了_[安卓+PC双端]超C女仆无馬中字
- 苹果有意参与角逐奥斯卡 欲投资6部电影!
- FutureTask的get()方法之异常处理
- python开发100个小程序_Python小程序100例
- 不得不知的高速PCB设计中各类地的处理方法
- 什么样的固定资产管理系统才能满足企业需求
- bzoj5369: [PKUSC2018]最大前缀和 (状压dp)
- 安慕希酸奶推出草莓味了
- android系统裁剪之APP精简
- Git分支管理及命名规范
- 电阻、电容及电感的高频等效电路及特性曲线
- jmeter压力测试工具,雪崩效应,容错组件Sentinel
- 个人简历应聘优势怎么写? 个人优势让你的简历模板加分
- ubuntu android开发环境配置、jdk、Git、虚拟机、微信、xmind、搜狗等常用软件安装
- 从flw中提取mp3
热门文章
- Orchid兰花协议简介——分布式匿名代理网络
- 如何构建一个分布式爬虫:基础篇
- 使用FlowDroid生成Android应用程序的函数调用图
- java有链表吗_Java数据结构之链表(Linked List)
- python jupyter安装_python之jupyter的安装
- 2台服务器虚拟存储,虚拟存储的主要用途
- python中df head_10招!看骨灰级Pythoner如何玩转Python
- centos 7 mysql tar安装_linux centos7 下源码 tar 安装 mysql5.7.24 图文详解
- python mysql 错误处理_Python-MySQL中的错误处理
- docker内外连通ros_docker容器内的ros外设使用与远程配置