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;
//进度条
private var img:WelcomeScreen;
//logo页面
private 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 public function set preloader(value:Sprite):void
{
value.addEventListener(ProgressEvent.PROGRESS,progHandler);
value.addEventListener(FlexEvent.INIT_COMPLETE,initCompleteHandler);
//在这里设置预加载页面居中
//如果在初始化函数中设置,会有stageWidht和最终大小不一致的错误,而导致不能居中
x=(stageWidth/2)-(300/2);
y=(stageHeight/2)-(180/2);
}
private function progHandler(evt:ProgressEvent):void
{
//计算进度,并且设置文字进度和进度条的进度
var prog:Number=evt.bytesLoaded/evt.bytesTotal*100;
progressText.text="已下载"+String(int(prog))+"%";
if(img)
{
img.progress=prog;
}
}
private function compHandler(evt:Event):void
{}
private function initCompleteHandler(evt:FlexEvent):void
{
//如果载入完毕,则停止刷新
img.ready=true;
_timer.stop();
//这里是测试,下载完毕后,不马上跳到程序默认界面,而是停留10秒后再跳入
var timer:Timer=new Timer(1000,1);
timer.addEventListener(TimerEvent.TIMER,dispatchComplete);
timer.start();
}
private function initProgHandler(evt:FlexEvent):void
{}
private function dispatchComplete(evt:TimerEvent):void
{
//一定要分发这个事件,来通知程序已完全下载,可以进入程序的默认界面
this.dispatchEvent(new Event(Event.COMPLETE));
}
//计时器监听事件
private function drawTimerHandler(evt:TimerEvent):void
{
img.refresh();
}
}
}
图片logo层的实现方法:
package com.ibsol.view
{
import flash.display.Loader;
import flash.utils.ByteArray;
/**
* 图片logo层
* */
public class WelcomeLogo extends Loader
{
[Embed(source="img/logo.png",mimeType="application/octet-stream")]
public var WelcomeScreenGraphic:Class;
/**
* 初始化方法
* */
public function WelcomeLogo()
{
this.loadBytes(new WelcomeScreenGraphic() as ByteArray);
}
}
}
进度条和图片可以放在一层,但是考虑到个时钟周期,都要刷新进度条的图片。
毕竟LOGO不用每次都刷新,那么我们就分开放置了。进度条层的代码如下,
package com.ibsol.view
{
import flash.display.BitmapData;
import flash.display.Graphics;
import flash.display.Loader;
import flash.display.Sprite;
import mx.graphics.codec.PNGEncoder;
public class WelcomeScreen extends Loader
{
//辅助属性,帮助进度条定位
private static var _LogoWidth:int=300;
private static var _LogoHeight:int=180;
private static var _LeftMargin:int=5;
private static var _RightMargin:int=5;
private static var _Topmargin:int=1;
private static var _BottomMargin:int=1;
private static var _Padding:int=-60;
//进度条的样式的设定,如边框颜色等
private static var _BarWidth:int=200;
private static var _BarHeight:int=12;
private static var _BarBackground:uint=0xFFFFFF;
private static var _BarOuterBorder:uint=0x737373;
private static var _BarColor:uint=0x6F9FD5;
private static var _BarInnerColor:uint=0xFFFFFF;
private var isReady:Boolean=false;
public var progress:Number;
private var _logoData:BitmapData;
/**
* 初始化方法
* */
public function WelcomeScreen()
{
}
override public function get width():Number
{
return Math.max(_BarWidth,_LogoWidth)+_LeftMargin+_RightMargin;
}
override public function get height():Number
{
return _LogoHeight+_LogoHeight+_Topmargin+_Padding;
}
/**
* 进度条加载完毕后,隐藏进度条
* */
public function set ready(value:Boolean):void
{
this.isReady=value;
// this.visible=!isReady;
}
public function get ready():Boolean
{ return isReady; }
/**
* 刷新方法,每个时钟周期都被调用这个函数
* */
public function refresh():void
{
_logoData=this.drawProgressBar();
var encoder:PNGEncoder=new PNGEncoder();
this.loadBytes(encoder.encode(_logoData));
}
/**
* 生成进度条函数
* */
public function drawProgressBar():BitmapData
{
//创建bitmapdata对象
var data:BitmapData=new BitmapData(this.width,this.height,true,0);
//画出bitmapdata
var s:Sprite=new Sprite();
var g:Graphics=s.graphics;
g.beginFill(_BarBackground);
g.lineStyle(2,_BarOuterBorder,1,true);
var px:int=(this.width-_BarWidth)/2;
var py:int=_Topmargin+_LogoHeight+_Padding;
g.drawRoundRect(px, py, _BarWidth, _BarHeight, 2);
var containerWidth:Number=_BarWidth-4;
var progWidth:Number=containerWidth*this.progress/100;
g.beginFill(_BarColor);
g.lineStyle(1, _BarInnerColor, 1, true);
data.draw(s);
return data;
}
}
}
- 大小: 17.3 KB
分享到:
相关推荐
Flex3.0 使用CSS美化界面 很简单的事例,高手就不用看了,献丑
很详细的实现了flex游戏的预加载,可以使用图片,也可以重绘技术,任你选择
flex全屏代码界面全屏flex全屏代码界面全屏
以实例讲解Flex4.0的界面设计,示例有登陆及验证码,状态的切换,图形化报表的设计等
经将Flex登陆布局的草图设计出来了,Flex登陆界面代码如 图1所示(Flex登陆界面草图代码)演示...相信大家应该从草图出来的那一刻开始,脑子就开始有想法了,^-^ 因为这个Flex登陆框实在是没有太多的操作体验和美感呈现
动态生成控件演示,很简单的,供初学者参考
flex的小例子,界面漂亮哦!还不错啦,不下载会后悔哦
Flex 移动效果 界面 最大化 Flex 移动效果 界面 最大化
FLex 无间隙界面切换 FLex 无间隙 界面切换 这个效果可以看看 但是觉得 是想要的
flex自定义的预加载进度条动画的一个demo,非常使用。
flex 等待界面显示
flex3.0 苹果风格界面实例
Flex3界面布局中文教程 Canvas layout 容器 1 Absolute模式 1 constraint-based模式: 2 ControlBar layout 容器 4 ApplicationControlBar 容器 6 DividedBox, HDividedBox 和VDividedBox 布局 7...
flex图形界面模板 flash flex Fusioncharts.swc
flex实现的qq界面,具体实现通信可以使用消息服务,实现实时和留言比较简单了
里边包含4个工具,Flex3样式:可以图形化调整样式,自动生成CSS代码,相当方便。有俩个FLEX2图形计算工具。还有一个是用FLEX做的简单涂鸦版。都是好东西,就不多介绍了,觉得好的话别忘了顶下。
Flex 登录界面 开发经验分享 希望会帮助正在学习flex的初学人员
在网络技术快速发展的今天,flex越来越重要,通过这个你能学到登陆界面的制作
在该 Test Drive 中,您将创建一个 Flex 应用程序,它将检索、显示和修改数据库记录(请参阅图 1)。Flex 应用程序不会直接连接到远程数据库。而是将它连接到以您的首选 Web 语言(PHP、ColdFusion、Java 或任何其他...
我自己写了一个东西,保存在上面,一个框架而已,不值5分里面没有jar包,没有数据库,跑不起来,用cairngorm开发框架