我通过扩展flex的progressBar创建了一个自定义的progress Bar。我想使用flex的图像在自定义进度栏中插入一张gif图像,但什么也没发生。
我需要实现任何flex接口吗?请提供建议。
谢谢
package com
{
import mx.controls.Image;
import mx.controls.Label;
import mx.controls.ProgressBar;
import mx.core.mx_internal;
use namespace mx_internal;
public class CustomProgressBar extends ProgressBar
{
[Embed("resource/images/running_animated_gif.gif")]
[Bindable]
public var runningGif:Class;
public function CustomProgressBar()
{
super();
}
override protected function createChildren():void
{
super.createChildren();
var gifImage:Image = new Image();
gifImage.source = runningGif
addChild(gifImage);
}
}
}
ProgressBar有皮肤属性。您可以将自定义蒙皮组件应用于它。下面的示例可以帮助您将皮肤添加到自定义进度条类中。
类名:-CustomProgressBar.as
package
{
import mx.controls.ProgressBar;
public class CustomProgressBar extends ProgressBar
{
public function CustomProgressBar()
{
super();
this.setStyle("trackSkin", CustomProgressBarTrackSkin);
}
}
}
在您的皮肤类中,您可以添加将显示在进度栏上的图像。自定义进度条TrackSkin.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin name="CustomProgressBarSkin"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" >
<fx:Script>
<![CDATA[
override protected function initializationComplete():void {
useChromeColor = true;
super.initializationComplete();
}
]]>
</fx:Script>
<!-- layer 1: fill -->
<s:Rect left="2" right="2" top="2" bottom="2" >
<s:fill>
<s:BitmapFill source="@Embed('resource/images/running_animated_gif.gif')" fillMode="repeat" />
</s:fill>
</s:Rect>
<!-- layer 2: border -->
<s:Rect left="2" right="2" top="2" bottom="2" >
<s:stroke>
<s:LinearGradientStroke rotation="90">
<s:GradientEntry color="0xFFFFFF" alpha="0.9" />
<s:GradientEntry color="0xFFFFFF" alpha="0.5" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- layer 3: right edge -->
<s:Rect right="1" top="2" bottom="2" width="1" >
<s:fill>
<s:SolidColor color="0x000000" alpha="0.55" />
</s:fill>
</s:Rect>
</s:SparkSkin>
以同样的方式,你可以为不同的皮肤创建不同的类,例如barSkin等…
这可能会帮助你。。。