2012-08-03 47 views
0

我已经通过从flex的progressBar扩展来创建了自定义progressBar。我想通过使用flex的Image在自定义progressBar中插入一个gif图像,但没有任何事情发生。将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); 
     } 

    } 
} 
+0

你可以添加一些代码......正是你尝试过什么...... – 2012-08-03 09:24:39

+0

新增:)谢谢 – 2012-08-06 02:25:09

回答

1

有对进度的皮肤性质。您可以将自定义外观组件应用于它。 下面的示例可以帮助您将皮肤添加到自定义progressbar类。

类名称: - CustomProgressBar.as

package 
{ 
    import mx.controls.ProgressBar; 

    public class CustomProgressBar extends ProgressBar 

    { 
     public function CustomProgressBar() 
     { 
      super(); 
      this.setStyle("trackSkin", CustomProgressBarTrackSkin); 
     } 
    } 
} 

在你的skinClass您可以添加哪些会得到您的显示进度条上的图像。 CustomProgressBarTrackSkin.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等等

这可能会帮助你...