<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>中文Flex例子 &#187; 进度条</title>
	<atom:link href="http://blog.minidx.com/tag/%e8%bf%9b%e5%ba%a6%e6%9d%a1/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.minidx.com</link>
	<description>中文Adobe Flex例子,Flex实例教程,RIA资源,全文检索技术,算法和数据结构</description>
	<lastBuildDate>Thu, 31 Mar 2011 03:22:33 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.5</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>利用位图制作高性能加载矩阵型进度条</title>
		<link>http://blog.minidx.com/2009/02/22/2164.html</link>
		<comments>http://blog.minidx.com/2009/02/22/2164.html#comments</comments>
		<pubDate>Sun, 22 Feb 2009 13:26:07 +0000</pubDate>
		<dc:creator>Minidxer</dc:creator>
				<category><![CDATA[Adobe其他]]></category>
		<category><![CDATA[ProgressBar]]></category>
		<category><![CDATA[位图]]></category>
		<category><![CDATA[进度条]]></category>

		<guid isPermaLink="false">http://blog.minidx.com/2009/02/22/2164.html</guid>
		<description><![CDATA[本文作者：auzn&#160; 首发英文版：How to Create a Bitmap(Matrix Graphics) Progress Bar in Flex
通常使用百分比或进度条即可表示处理进度,但有些场合,例如文件分为多个大小相同的块,并对这些块进行处理,这时使用矩阵图形表示文件块的处理是最直观的了.下面我们就来制作这样一个例子.
我们可以先看看程序图片或运行Demo观察(单击切换效果).

 Demo &#124; Download Full Project









程序是这样构思的:将单个的小图标封装为类,再由相应的管理类控制这些图标对象,使其在不同状态下转换.
首先准备素材——小图标.
我们可以使用FLASH CS3制作图标.
新建文件KUI.fla,并在库中新建名为”Cel l”的MovieClip.

之后我们在工作区中画好以下图形:

加上高亮:

好了,图标的一个状态出来了,我们可以将其命名为”default”.
再添加影片帧,增加几种状态:
蓝色状态:”start”

绿色状态:”success”

黄色状态:”warning”

红色状态:”error”

防止影片自动播放,我们还要在第一帧加上”stop();”语句.
根据状态名,将每帧写好帧标签:

之后,在库面板中找到Cell影片剪辑,右键导出为SWC文件:

好了,图标的工作结束,我们打开Flex Builder 3,新建KMatrix项目:

完成后,再新建文件夹lib,将之前的Cell.swc移动到lib中:

打开项目的属性面板,点击ActionScript Build Path,切换到Library path,单击Add SWC按钮,在弹出的面板中选择之前在Flash CS3中导出的Cell.swc:

OK后如图:

这样我们就把资源加入到项目中了,接下来进入编程阶段:
建立文件夹com/kingnare/controls,并在controls中新建类MyMatrix:

由MyMatrix类控制其内部的多个Cell对象.
代码如下(查看文件):
package com.kingnare.controls
{
import flash.display.Sprite;
public class MyMatrix extends Sprite
{
private var list:Array;
private var maxWidth:uint;
private var maxHeight:uint;
private var _columnNum:uint;
private var _hDis:uint;
private var _vDis:uint;
public function MyMatrix()
{
super();
_hDis = 1;
_vDis = 1;
_columnNum = 50;
maxWidth = 1;
maxHeight = 1;
}
private [...]]]></description>
		<wfw:commentRss>http://blog.minidx.com/2009/02/22/2164.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Flex中如何利用ProgressBar.labelPlacement属性在一个进度条(progress)中指定标签位置的例子</title>
		<link>http://blog.minidx.com/2008/07/19/1093.html</link>
		<comments>http://blog.minidx.com/2008/07/19/1093.html#comments</comments>
		<pubDate>Sat, 19 Jul 2008 06:03:33 +0000</pubDate>
		<dc:creator>Minidxer</dc:creator>
				<category><![CDATA[Flex]]></category>
		<category><![CDATA[ProgressBar]]></category>
		<category><![CDATA[ProgressBar.labelPlacement]]></category>
		<category><![CDATA[进度条]]></category>

		<guid isPermaLink="false">http://blog.minidx.com/2008/07/19/1093.html</guid>
		<description><![CDATA[接下来的例子演示了Flex中如何利用ProgressBar.labelPlacement属性,在一个进度条(progress)中指定标签位置。
让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：









下面是完整代码(或点击这里察看)：
Download: main.mxml&#60;?xml version=&#34;1.0&#34; encoding=&#34;utf-8&#34;?&#62;
&#60;mx:Application&#160;xmlns:mx=&#34;http://www.adobe.com/2006/mxml&#34;
&#160; &#160; &#160; &#160; layout=&#34;vertical&#34;
&#160; &#160; &#160; &#160; verticalAlign=&#34;middle&#34;
&#160; &#160; &#160; &#160; backgroundColor=&#34;white&#34;&#62;
&#160;
&#160; &#160; &#60;mx:Label&#160;text=&#34;ProgressBar.labelPlacement&#34; /&#62;
&#160; &#160; &#60;mx:HBox&#62;
&#160; &#160; &#160; &#160; &#60;mx:VBox&#62;
&#160; &#160; &#160; &#160; &#160; &#160; &#60;mx:RadioButtonGroup&#160;id=&#34;rbg&#34; /&#62;
&#160; &#160; &#160; &#160; &#160; &#160; &#60;mx:RadioButton&#160;label=&#34;left&#34; group=&#34;{rbg}&#34; /&#62;
&#160; &#160; &#160; &#160; &#160; &#160; &#60;mx:RadioButton&#160;label=&#34;center&#34; group=&#34;{rbg}&#34; /&#62;
&#160; &#160; &#160; &#160; &#160; &#160; &#60;mx:RadioButton&#160;label=&#34;right&#34; [...]]]></description>
		<wfw:commentRss>http://blog.minidx.com/2008/07/19/1093.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Flex中如何通过labelPlacement属性设置进度条控件(ProgressBar)标签的位置的例子</title>
		<link>http://blog.minidx.com/2008/07/17/1087.html</link>
		<comments>http://blog.minidx.com/2008/07/17/1087.html#comments</comments>
		<pubDate>Thu, 17 Jul 2008 12:29:19 +0000</pubDate>
		<dc:creator>Minidxer</dc:creator>
				<category><![CDATA[Flex]]></category>
		<category><![CDATA[conversion]]></category>
		<category><![CDATA[labelPlacement]]></category>
		<category><![CDATA[mode]]></category>
		<category><![CDATA[source]]></category>
		<category><![CDATA[进度条]]></category>

		<guid isPermaLink="false">http://blog.minidx.com/2008/07/17/1087.html</guid>
		<description><![CDATA[接下来的例子演示了Flex中如何通过labelPlacement属性，设置进度条控件(ProgressBar)标签的位置。本例中实际上还演示了如何利用进度条的bytesLoaded和bytesTotal属性，在“polled”模式下显示FLV文件被载入多少。
让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：









下面是完整代码(或点击这里察看)：
Download: main.mxml&#60;?xml version=&#34;1.0&#34; encoding=&#34;utf-8&#34;?&#62;
&#60;mx:Application&#160;xmlns:mx=&#34;http://www.adobe.com/2006/mxml&#34; layout=&#34;vertical&#34; verticalAlign=&#34;middle&#34; backgroundColor=&#34;white&#34;&#62;
&#160;
&#160; &#160; &#60;mx:VideoDisplay&#160;id=&#34;videoDisplay&#34;
&#160; &#160; &#160; &#160; &#160; &#160; source=&#34;http://blog.minidx.com/ext/water.flv&#34;
&#160; &#160; &#160; &#160; &#160; &#160; playheadUpdate=&#34;playheadTime.setProgress(videoDisplay.playheadTime, videoDisplay.totalTime)&#34;
&#160; &#160; &#160; &#160; &#160; &#160; minWidth=&#34;160&#34;
&#160; &#160; &#160; &#160; &#160; &#160; minHeight=&#34;120&#34;&#160; /&#62;
&#160;
&#160; &#160; &#60;mx:ProgressBar&#160;id=&#34;progressBar&#34;
&#160; &#160; &#160; &#160; &#160; &#160; width=&#34;{videoDisplay.width}&#34;
&#160; &#160; &#160; &#160; &#160; &#160; mode=&#34;polled&#34;
&#160; &#160; &#160; &#160; &#160; &#160; [...]]]></description>
		<wfw:commentRss>http://blog.minidx.com/2008/07/17/1087.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Flex中如何利用mx.effects SoundEffect类和ProgressBar类的completeEffect样式在进度条（ProgressBar）最后完成时播放一个声音效果的例子</title>
		<link>http://blog.minidx.com/2008/07/01/1024.html</link>
		<comments>http://blog.minidx.com/2008/07/01/1024.html#comments</comments>
		<pubDate>Tue, 01 Jul 2008 11:21:06 +0000</pubDate>
		<dc:creator>Minidxer</dc:creator>
				<category><![CDATA[Flex]]></category>
		<category><![CDATA[complete]]></category>
		<category><![CDATA[completeEffect]]></category>
		<category><![CDATA[ProgressBar]]></category>
		<category><![CDATA[SoundEffect]]></category>
		<category><![CDATA[进度条]]></category>

		<guid isPermaLink="false">http://blog.minidx.com/2008/07/01/1024.html</guid>
		<description><![CDATA[在前面的Flex中设置进度条(ProgressBar)完成时效果的例子中，我们了解了如何给进度条（ProgressBar）设置一个完成（100%）时效果。接下来的例子则演示了Flex中如何利用mx.effects SoundEffect类和ProgressBar类的completeEffect样式，在进度条（ProgressBar）最后完成时播放一个声音效果。
让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：









下面是完整代码(或点击这里察看)：
Download: main.mxml&#60;?xml version=&#34;1.0&#34; encoding=&#34;utf-8&#34;?&#62;
&#60;mx:Application&#160;xmlns:mx=&#34;http://www.adobe.com/2006/mxml&#34;
&#160; &#160; &#160; &#160; layout=&#34;vertical&#34;
&#160; &#160; &#160; &#160; verticalAlign=&#34;middle&#34;
&#160; &#160; &#160; &#160; backgroundColor=&#34;white&#34;&#62;
&#160;
&#160; &#160; &#60;mx:Script&#62;
&#160; &#160; &#160; &#160; &#60;![CDATA[
&#160; &#160; &#160; &#160; &#160; &#160; import mx.events.SliderEvent;
&#160;
&#160; &#160; &#160; &#160; &#160; &#160; private function slider_change(evt:SliderEvent):void {
&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; progressBar.setProgress(evt.value, slider.maximum);
&#160; &#160; &#160; &#160; &#160; &#160; }
&#160; [...]]]></description>
		<wfw:commentRss>http://blog.minidx.com/2008/07/01/1024.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Flex的进度条（ProgressBar）控件中如何设置进度轨迹条和标签间竖直间隔间距的例子</title>
		<link>http://blog.minidx.com/2008/05/06/828.html</link>
		<comments>http://blog.minidx.com/2008/05/06/828.html#comments</comments>
		<pubDate>Tue, 06 May 2008 11:23:38 +0000</pubDate>
		<dc:creator>Minidxer</dc:creator>
				<category><![CDATA[Flex]]></category>
		<category><![CDATA[ProgressBar]]></category>
		<category><![CDATA[verticalGap]]></category>
		<category><![CDATA[进度条]]></category>

		<guid isPermaLink="false">http://blog.minidx.com/2008/05/06/828.html</guid>
		<description><![CDATA[接下来的例子演示了Flex的进度条（ProgressBar）控件中，如何通过设置verticalGap样式，来设定进度轨迹条和标签间竖直间隔间距。
让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：









下面是完整代码(或点击这里查看)：
Download: main.mxml&#60;?xml version=&#34;1.0&#34; encoding=&#34;utf-8&#34;?&#62;
&#60;mx:Application&#160;xmlns:mx=&#34;http://www.adobe.com/2006/mxml&#34;
&#160; &#160; &#160; &#160; layout=&#34;vertical&#34;
&#160; &#160; &#160; &#160; verticalAlign=&#34;top&#34;
&#160; &#160; &#160; &#160; backgroundColor=&#34;white&#34;
&#160; &#160; &#160; &#160; creationComplete=&#34;init();&#34;&#62;
&#160;
&#160; &#160; &#60;mx:Script&#62;
&#160; &#160; &#160; &#160; &#60;![CDATA[
&#160; &#160; &#160; &#160; &#160; &#160; import mx.events.SliderEvent;
&#160;
&#160; &#160; &#160; &#160; &#160; &#160; private function init():void {
&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; slider.value = progressBar.getStyle(&#34;verticalGap&#34;);
&#160; &#160; &#160; [...]]]></description>
		<wfw:commentRss>http://blog.minidx.com/2008/05/06/828.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using disk
Page Caching using disk (enhanced)
Database Caching 2/23 queries in 0.187 seconds using disk
Object Caching 427/806 objects using disk

Served from: blog.minidx.com @ 2012-02-10 01:42:50 -->
