<?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; ProgressBar</title>
	<atom:link href="http://blog.minidx.com/tag/progressbar/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>Flex中如何利用barColor样式设置ProgressBar内小块颜色的例子</title>
		<link>http://blog.minidx.com/2009/07/01/2676.html</link>
		<comments>http://blog.minidx.com/2009/07/01/2676.html#comments</comments>
		<pubDate>Wed, 01 Jul 2009 14:10:46 +0000</pubDate>
		<dc:creator>Minidxer</dc:creator>
				<category><![CDATA[ProgressBar]]></category>
		<category><![CDATA[barColor]]></category>

		<guid isPermaLink="false">http://blog.minidx.com/?p=2676</guid>
		<description><![CDATA[接下来的例子演示了Flex中如何利用barColor样式，设置ProgressBar内小块颜色。
让我们先来看一下Demo（可以点击这里察看源代码）：









下面是完整代码(或点击这里察看)：
Download: main.mxml&#60;?xml version=&#34;1.0&#34; encoding=&#34;utf-8&#34;?&#62;
&#60;mx:Application&#160;name=&#34;ProgressBar_barColor_test&#34;
&#160; &#160; &#160; &#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:ApplicationControlBar&#160;dock=&#34;true&#34;&#62;
&#160; &#160; &#160; &#160; &#60;mx:Form&#160;styleName=&#34;plain&#34;&#62;
&#160; &#160; &#160; &#160; &#160; &#160; &#60;mx:FormItem&#160;label=&#34;barColor:&#34;&#62;
&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#60;mx:ColorPicker&#160;id=&#34;colorPicker&#34;
&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; selectedColor=&#34;red&#34;&#160;/&#62;
&#160; &#160; &#160; &#160; [...]]]></description>
		<wfw:commentRss>http://blog.minidx.com/2009/07/01/2676.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Flex中如何通过setProgress()函数手动设置进度条ProgressBar进度的例子</title>
		<link>http://blog.minidx.com/2009/04/06/2350.html</link>
		<comments>http://blog.minidx.com/2009/04/06/2350.html#comments</comments>
		<pubDate>Mon, 06 Apr 2009 11:31:54 +0000</pubDate>
		<dc:creator>Minidxer</dc:creator>
				<category><![CDATA[ProgressBar]]></category>
		<category><![CDATA[setProgress()]]></category>

		<guid isPermaLink="false">http://blog.minidx.com/?p=2350</guid>
		<description><![CDATA[接下来的例子演示了Flex中如何通过setProgress()函数，手动设置进度条ProgressBar进度。注：这个例子对于很多浏览器并不能正常工作，有兴趣地可以参考：http://bugs.adobe.com/jira/browse/SDK-16752
让我们先来看一下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, progressBar.maximum);
&#160; &#160; &#160; &#160; &#160; &#160; }
&#160; &#160; [...]]]></description>
		<wfw:commentRss>http://blog.minidx.com/2009/04/06/2350.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Flex中如何在ProgressBar中使用嵌入字体的例子</title>
		<link>http://blog.minidx.com/2009/03/28/2320.html</link>
		<comments>http://blog.minidx.com/2009/03/28/2320.html#comments</comments>
		<pubDate>Sat, 28 Mar 2009 05:39:18 +0000</pubDate>
		<dc:creator>Minidxer</dc:creator>
				<category><![CDATA[ProgressBar]]></category>
		<category><![CDATA[fontWeight]]></category>

		<guid isPermaLink="false">http://blog.minidx.com/?p=2320</guid>
		<description><![CDATA[在之前的Flex中如何通过trackColors样式设置进度条ProgressBar轨迹颜色的例子中，我们了解了如何设置进度条ProgressBar轨迹颜色，接下来的例子演示了Flex中如何在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:Style&#62;
&#160; &#160; &#160; &#160; @font-face {
&#160; &#160; &#160; &#160; &#160; &#160; src: local(&#34;Base 02&#34;);
&#160; &#160; &#160; &#160; &#160; &#160; fontFamily: EmbeddedBase02;
&#160; &#160; &#160; &#160; }
&#160; &#160; &#60;/mx:Style&#62;
&#160;
&#160; &#160; &#60;mx:Script&#62;
&#160; &#160; &#160; &#160; &#60;![CDATA[
&#160; &#160; &#160; &#160; &#160; [...]]]></description>
		<wfw:commentRss>http://blog.minidx.com/2009/03/28/2320.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Flex中如何通过trackColors样式设置进度条ProgressBar轨迹颜色的例子</title>
		<link>http://blog.minidx.com/2009/03/26/2313.html</link>
		<comments>http://blog.minidx.com/2009/03/26/2313.html#comments</comments>
		<pubDate>Thu, 26 Mar 2009 00:43:36 +0000</pubDate>
		<dc:creator>Minidxer</dc:creator>
				<category><![CDATA[ProgressBar]]></category>
		<category><![CDATA[barColor]]></category>
		<category><![CDATA[trackColors]]></category>
		<category><![CDATA[trackHeight]]></category>

		<guid isPermaLink="false">http://blog.minidx.com/?p=2313</guid>
		<description><![CDATA[接下来的例子演示了Flex中如何通过trackColors样式，设置进度条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; private function progressBar_initialize():void {
&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; progressBar.setProgress(76, 100);
&#160; &#160; &#160; &#160; &#160; &#160; }
&#160; &#160; &#160; &#160; ]]&#62;
&#160; &#160; &#60;/mx:Script&#62;
&#160;
&#160; &#160; &#60;mx:ProgressBar&#160;id=&#34;progressBar&#34;
&#160; [...]]]></description>
		<wfw:commentRss>http://blog.minidx.com/2009/03/26/2313.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<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>
	</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/26 queries in 0.302 seconds using disk
Object Caching 402/775 objects using disk

Served from: blog.minidx.com @ 2012-02-09 21:15:21 -->
