自定义Flex的loading启动加载画面.docx
- 文档编号:6194222
- 上传时间:2023-01-04
- 格式:DOCX
- 页数:15
- 大小:22.68KB
自定义Flex的loading启动加载画面.docx
《自定义Flex的loading启动加载画面.docx》由会员分享,可在线阅读,更多相关《自定义Flex的loading启动加载画面.docx(15页珍藏版)》请在冰豆网上搜索。
自定义Flex的loading启动加载画面
想起当年学flash的时候,最先学的就是做loading,哈哈,成天做loading,那几行代码和那几个步骤全都背下来了。
自从来到了高级的Flex时代,loading全都自动生成了真是方便,但天天看Flex的Loading画面难免会有点审美疲劳
,
所以花了点时间研究了一下怎么自己画Flex的loading画面。
点此演示
时间关系,我只简单的画了一下, 这里是fla ,其实你想怎么画都可以
主要代码:
自定义的Preloader:
package
{
importflash.display.MovieClip;
importflash.display.Sprite;
importflash.events.Event;
importflash.events.ProgressEvent;
importmx.events.FlexEvent;
importmx.preloaders.IPreloaderDisplay;
importmx.preloaders.Preloader;
publicclassnPreloaderextendsSpriteimplementsIPreloaderDisplay
{
[Embed(source="mc.swf",symbol="loader_mc")]
privatevarLoaderMC:
Class;
privatevar_loader_mc:
MovieClip
privatevar_preloader:
Preloader;
publicfunctionnPreloader()
{
super();
this._loader_mc=newLoaderMC()
this.addChild(this._loader_mc);
this._loader_mc.gotoAndStop(50)
}
publicfunctiongetbackgroundAlpha():
Number
{
return0;
}
publicfunctionsetbackgroundAlpha(value:
Number):
void
{
}
publicfunctiongetbackgroundColor():
uint
{
return0;
}
publicfunctionsetbackgroundColor(value:
uint):
void
{
}
publicfunctiongetbackgroundImage():
Object
{
returnnull;
}
publicfunctionsetbackgroundImage(value:
Object):
void
{
}
publicfunctiongetbackgroundSize():
String
{
returnnull;
}
publicfunctionsetbackgroundSize(value:
String):
void
{
}
publicfunctionsetpreloader(obj:
Sprite):
void
{
_preloader=objasPreloader;
_preloader.addEventListener(ProgressEvent.PROGRESS,progressEventHandler);
_preloader.addEventListener(FlexEvent.INIT_COMPLETE,initCompleteEventHandler);
}
publicfunctiongetstageHeight():
Number
{
return0;
}
publicfunctionsetstageHeight(value:
Number):
void
{
}
publicfunctiongetstageWidth():
Number
{
return0;
}
publicfunctionsetstageWidth(value:
Number):
void
{
}
publicfunctioninitialize():
void
{
_loader_mc.x=stage.stageWidth/2-_loader_mc.width/2;
_loader_mc.y=stage.stageHeight/2-_loader_mc.height/2;
}
privatefunctionprogressEventHandler(eo:
ProgressEvent):
void
{
_loader_mc.gotoAndStop(Math.round((eo.bytesLoaded/eo.bytesTotal)*100))
_loader_mc.show_txt.text=Math.round((eo.bytesLoaded/eo.bytesTotal)*100)+"%"
}
privatefunctioninitCompleteEventHandler(eo:
FlexEvent):
void{
dispatchEvent(newEvent(Event.COMPLETE));
}
}
}
主文件:
xmlversion="1.0"encoding="utf-8"?
>
Applicationpreloader="nPreloader"creationComplete="init()"layout="vertical"xmlns: mx="> Script> [CDATA[ [Embed(source="1.mp3")] privatevar_file: Class; ]]> Script> Buttonlabel="Button"/> ComboBox> ComboBox> Panelwidth="250"height="200"layout="absolute"> Labeltext="我们是Flex组件,hoho"fontSize="15"/> Panel> Application> 在Flex中设置进度条(ProgressBar)完成时效果的例子 [2008-03-1702: 18: 48|发布: N神 ] 字体大小: 大 | 中 | 小 下面的实例演示了如何设置进度条(ProgressBar)完成(100%)时的效果 效果演示: 点这里显示/隐藏媒体 doc/flex/ProgressBar_effects/main.swf 完整代码: xmlversion="1.0"encoding="utf-8"? > Applicationxmlns: mx=" layout="vertical" verticalAlign="middle" backgroundColor="white"> Script> [CDATA[ privatevartimer: Timer; privatefunctioninit(): void{ timer=newTimer(10); timer.addEventListener(TimerEvent.TIMER,timer_timer); } privatefunctiontimer_timer(evt: TimerEvent): void{ progressBar.setProgress(progressBar.value+1,100); } privatefunctionprogressBar_complete(evt: Event): void{ timer.stop(); } privatefunctionresetProgressBar(): void{ progressBar.setProgress(0,100); progressBar.scaleX=1.0;//100% progressBar.scaleY=1.0;//100% progressBar.alpha=1.0;//100% } privatefunctionplayProgressBar(): void{ resetProgressBar(); timer.start(); } ]]> Script> Parallelid="progressBar_completeEffect"> FadealphaTo="0.0"/> ZoomzoomHeightTo="0"/> Parallel> ApplicationControlBardock="true"> Buttonlabel="Play" click="playProgressBar();"/> Buttonlabel="Reset" click="resetProgressBar();"/> ApplicationControlBar> ProgressBarid="progressBar" complete="progressBar_complete(event);" completeEffect="{progressBar_completeEffect}" mode="manual" labelPlacement="center" width="80%" height="60%" creationComplete="init();"/> Application> Flex中在表单(Form组件)上填加动画效果(Effect) [2008-03-1300: 57: 14|发布: N神 ] 字体大小: 大 | 中 | 小 下面的实例中,有一个表格(Form),这个Form有一个高级模式,当选择高级模式后会出现更多额外的文本框给用户填写。 就像下边演示中看到的一样,当你点击"ToggleForm"按钮时额外的文本框会显示或者隐藏 先看演示: 点这里显示/隐藏媒体 doc/flex/Effects_on_a_Form/main.swf 同样再加一个弹性效果: ) 点这里显示/隐藏媒体 doc/flex/Effects_on_a_Form/main2.swf 首先我们建立了一个privatebindable变量叫做"advanced"当点击"Toggle"按钮时这个值就会改变。 FormItem的visible和includeInLayout属性就绑定到这个advanced值上,前者负责显示和隐藏,后者负责计算位置,可以看一下文档: ) 要注意的是Effect是放在FormItem中的。 完整代码在下边: xmlversion="1.0"encoding="utf-8"? > Application xmlns: mx=" > Script> [CDATA[ importmx.effects.easing.Bounce; importmx.controls.Alert; [Bindable]privatevaradvanced: Boolean=false; privatefunctiononClick(): void { //onlytoggleifnotplaying if(! ef_move.isPlaying) { advanced=! advanced; } } ]]> Script> --thisisthemoveeffectIamusing--> Move id="ef_move" easingFunction="Bounce.easeOut" /> Panel title="FormExample" width="300" height="350" > Form width="100%" height="100%" > FormItem> Button label="ToggleForm" click="onClick()" width="140" /> FormItem> FormItem label="FirstName: " moveEffect="ef_move" > TextInput/> FormItem> FormItem label="LastName: " moveEffect="ef_move" visible="{advanced}" includeInLayout="{advanced}" showEffect="Fade" > TextInput/> FormItem> FormItem label="Email: " moveEffect="ef_move" > TextInput/> FormItem> FormItem label="Address1: " visible="{advanced}" includeInLayout="{advanced}" showEffect="Fade" moveEffect="ef_move" > TextInput/> FormItem> FormItem label="Address2: " visible="{advanced}" includeInLayout="{advanced}" showEffect="Fade" moveEffect="ef_move" > TextInput/> FormItem> FormItem label="Address3: " visible="{advanced}" includeInLayout="{advanced}" showEffect="Fade" moveEffect="ef_move" > TextInput/> FormItem> FormItem label="Password: " moveEffect="ef_move" > TextInputdisplayAsPassword="true"/> FormItem> FormItem moveEffect="ef_move" > Button label="SendInfo! " click="Alert.show('Ihopeyoulikemyexample! ');" /> FormItem> Form> Panel> Application> 加不加弹性效果区别就在于: 如果你想加个easing效果(Back,Bounce,Elastic,etc),只要指定Move的easingFunction就可以了。 Script> [CDATA[ importmx.effects.easing.Bounce; ]]> Script> Moveid="ef_move"easingFunction="Bounce.easeOut"/> 在Flex中当组件的visible值改变时引发一个动画效果(Effect) [2008-03-1101: 10: 31|发布: N神 ] 字体大小: 大 | 中 | 小 下面的实例演示了怎样使用hideEffect和showEffect属性,使得当组件的visible属性改变时引发一个动画效果。 先看演示: 鼠标点击hide和show按钮来隐藏和显示Panel 点这里显示/隐藏媒体 doc/flex/Panel_showEffect/main.swf 或者再加一个弹性效果 点这里显示/隐藏媒体 doc/flex/Panel_showEffect/main2.swf 完整代码在下边: xmlversion="1.0"encoding="utf-8"? > Applicationxmlns: mx=" layout="vertical" verticalAlign="middle" backgroundColor="white"> Zoomid="zoom"/> ApplicationControlBardock="true"> Buttonlabel="hide" click="panel.visible=false;" enabled="{panel.visible}"/> Buttonlabel="show" click="panel.visible=true;" enabled="{! panel.visible}"/> ApplicationControlBar> Panelid="panel" title="title" status="status" showEffect="{zoom}" hideEffect="{zoom}" width="100%" height="100%"> ControlBar> Labeltext="controlbar"/> ControlBar> Panel> Application> 查看MXML 如果你想加个easing效果(Back,Bounce,Elastic,etc),只要指定Zoom的easingFunction就可以了,像上边第2个演示那样,只要加上下边的代码就可以了 Script> [CDATA[ importmx.effects.easing.Bounce; ]]> Script> Zoomid="zoom"easingFunction="Bounce.easeOut"/> 在Flex中使用FileReference类下载文件 [2008-03-1004: 04: 33|发布: N神 ] 字体大小: 大 | 中 | 小 下面的实例演示了Flex中的FileReference类的基本用法,允许用户从服务器上下载一个文件。 这个例子也演示了你可以在DataGrid组件中显示数据提示(datatips),只要把datagridcolumn的showDataTips属性设置为true,然后把column的dataTipField设置一个值就行了。 在下边的演示中,当用户点击按钮的时候会下载一个zip文件,然后你可以把鼠标移到DataGrid组件的Type列上,来看额外的Event信息。 先看演示: 点这里显示/隐藏媒体 doc/flex/FileReference_download_test/main.swf 该演示的代码: xmlversion="1.0"encoding="utf-8"? > Applicationxmlns: mx="layout="vertical"verticalAlign="middle"backgroundColor="white"creationComplete="init();"> Script> [CDATA[ importmx.controls.Alert; importmx.collections.ArrayCollection; import.FileReference; [Bindable] [Embed('assets/disk.png')] privatevardiskIcon: Class; [Bindable] private
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 自定义 Flex loading 启动 加载 画面