`
sealbird
  • 浏览: 583871 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

[2011-04] Flex里自定义进度条ProgressBar样式皮肤

    博客分类:
  • Flex
阅读更多
2011-01-29 11:08trackbar是整个的条

<?xml version="1.0" encoding="utf-8"?>

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
             minHeight="13" >

    <fx:Script>
        override protected function initializationComplete():void
        {
            useChromeColor = true;
            super.initializationComplete();
        }
    </fx:Script>
        
    <!-- layer 1: border -->
    <s:Rect left="0" right="0" top="0" bottom="0" width="199"
            topLeftRadiusX="6" topLeftRadiusY="6" topRightRadiusX="6" topRightRadiusY="6"
            bottomLeftRadiusX="6" bottomLeftRadiusY="6" bottomRightRadiusX="6" bottomRightRadiusY="6">
        <s:stroke>
            <s:LinearGradientStroke rotation="90">
                <s:GradientEntry color="0xFFFFFF" 
                               alpha=".12" />
                <s:GradientEntry color="0xFFFFFF" 
                               alpha="0.8" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
    
    <!-- layer 2: inner border -->
    <s:Rect left="1" right="1" top="1" bottom="1" 
            topLeftRadiusX="6" topLeftRadiusY="6" topRightRadiusX="6" topRightRadiusY="6"
            bottomLeftRadiusX="6" bottomLeftRadiusY="6" bottomRightRadiusX="6" bottomRightRadiusY="6">
        <s:stroke>
            <s:SolidColorStroke color="0x939393" alpha="1" />
        </s:stroke>
    </s:Rect>
    
    <!-- layer 3: fill -->
    <s:Rect left="2" right="2" top="2" bottom="2" 
            topLeftRadiusX="6" topLeftRadiusY="6" topRightRadiusX="6" topRightRadiusY="6"
            bottomLeftRadiusX="6" bottomLeftRadiusY="6" bottomRightRadiusX="6" bottomRightRadiusY="6">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xeeeeee" 
                               alpha="1" />
                <s:GradientEntry color="0xeeeeee" 
                               alpha="1" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    
    <!-- layer 4: inner shadow -->
    <s:Rect left="2" top="2" bottom="2" width="1" >
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.12" />
        </s:fill>
    </s:Rect>
    <s:Rect right="2" top="2" bottom="2" width="1" >
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.12" />
        </s:fill>
    </s:Rect>
    <s:Rect left="3" top="2" right="3" height="1" >
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.12" />
        </s:fill>
    </s:Rect>
    
</s:SparkSkin>

bar是当前进度条

<?xml version="1.0" encoding="utf-8"?>


<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" >

    <fx:Script>
        override protected function initializationComplete():void
        {
            useChromeColor = true;
            super.initializationComplete();
        }
    </fx:Script>
    
    <!-- layer 1: fill -->
    <s:Rect left="2" right="2" top="2" bottom="2" 
            topLeftRadiusX="6" topLeftRadiusY="6" topRightRadiusX="6" topRightRadiusY="6"
            bottomLeftRadiusX="6" bottomLeftRadiusY="6" bottomRightRadiusX="6" bottomRightRadiusY="6">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x154c87" 
                               alpha="1" />
                <s:GradientEntry color="0x154c87" 
                               alpha="1" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    
    <!-- layer 2: border -->
    <s:Rect left="2" right="2" top="2" bottom="2" 
            topLeftRadiusX="6" topLeftRadiusY="6" topRightRadiusX="6" topRightRadiusY="6"
            bottomLeftRadiusX="6" bottomLeftRadiusY="6" bottomRightRadiusX="6" bottomRightRadiusY="6">
        <s:stroke>
            <s:LinearGradientStroke rotation="90">
                <s:GradientEntry color="0x154c87" 
                               alpha=".9" />
                <s:GradientEntry color="0x154c87" 
                               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="0xffffff" alpha="0.55" />
        </s:fill>
    </s:Rect>
    
</s:SparkSkin>

 

用的时候

pbar = new ProgressBar();

pbar.setStyle("trackSkin",CustomProgressBarTrackSkin);
pbar.setStyle("barSkin",CustomProgressBarSkin);

当然也可以

    <mx:ProgressBar barSkin="skins.CustomProgressSkin"
                     trackSkin="skins.CustomProgressBarTrackSkin"/>

 

效果如图:

分享到:
评论
1 楼 小卒…… 2011-07-25  
什么啊!怎么没啥效果,版主做出的样子是啥样的?

相关推荐

    Flex 4 进度条的皮肤

    - 在主应用MXML文件中,导入自定义进度条皮肤类。 - 创建一个`ProgressBar`实例,并将其`skinClass`属性设置为自定义皮肤类的全限定名。 例如: ```xml import custom.skins.CustomProgressBarSkin; &lt;s:...

    Flex3自定义的加载进度条

    创建完自定义进度条后,你可以像使用任何其他Flex组件一样在应用程序中导入并使用它。将其添加到主容器中,设置相关属性,如初始值、最大值等,然后在加载数据时启动进度条。 7. **优化和调试** 为了确保自定义...

    flex3自定义DownloadProgressBar

    本文将围绕“flex3自定义DownloadProgressBar”这一主题展开,讲解如何在Flex3中创建一个定制化的下载进度条组件,并探讨相关的编程技术和实践。 一、自定义组件基础 在Flex中,自定义组件是通过继承已有的...

    Flex进度条小例子

    4. **样式和外观**:Flex允许自定义组件的外观,包括进度条。可以修改颜色、宽度、填充样式等。例如,改变进度条的颜色: ```xml &lt;s:ProgressBar id="myProgressBar" maximum="100" value="{someValue}"&gt; ...

    Flex自定义加载条(小起)

    在本文中,我们将深入探讨如何在Flex环境中自定义加载条,即进度条组件。Flex是一种基于ActionScript 3.0的开源框架,用于构建富互联网应用程序(RIA)。它提供了丰富的UI组件库,其中包括标准的进度条组件,但有时...

    Flex进度条示例源码

    Flex允许自定义组件样式,包括进度条的颜色、宽度、高度等。这可以通过CSS或直接在MXML中设置属性完成。例如: ```xml &lt;mx:ProgressBar id="myProgressBar" mode="determinate" width="100%" height="20" ...

    progressbar

    在FLEX中,`ProgressBar`类是用来创建进度条的。这个类提供了多种样式和功能,以适应不同的应用场景。例如,你可以设置进度条为垂直或水平布局,还可以自定义颜色、样式和动画效果。在创建`ProgressBar`时,通常需要...

    as 3.0 进度条(附带源码)

    在本文中,我们将深入探讨如何在ActionScript 3.0中创建一个自定义的进度条组件,这与提供的"as 3.0 进度条(附带源码)"资源紧密相关。ActionScript 3.0是Adobe Flash Professional中的编程语言,用于创建交互式富...

    Flex multiple file uploader (Flex多文件上传范例)

    最后,为了实现文件上传进度的显示,Flex提供了进度条组件(ProgressBar),可以绑定到FileReference的upload事件,根据上传进度更新进度条的状态。在PHP端,可以通过调整响应信息来反馈文件上传的状态,以便Flex...

    Flex多文件上传源码

    5. **样式和皮肤**:描述中提到“界面很漂亮”,这可能是因为源码中应用了自定义的样式和皮肤。Flex允许开发者自定义组件的外观,使其与整体应用风格保持一致。 6. **后端交互**:Flex应用通常需要与服务器进行数据...

    Flex 超炫 MP3播放器

    9. **皮肤定制**:Flex允许开发者自定义组件的外观,通过CSS样式或自定义组件皮肤,MP3播放器可以拥有独特的设计风格。 10. **部署与兼容性**:由于Flex应用基于Flash Player,所以它们可以在大部分Web浏览器上运行...

    Flex 3 组件实例与应用(2009版)

    ProgressBar组件显示进度条,用来表示任务完成的百分比。 ##### 12. **Spacer** Spacer组件主要用于填充空白空间,调整布局。 ##### 13. **TabBar** TabBar组件提供了标签栏的功能,可以在不同页面之间切换。 #...

    Flex UI组件使用全集

    - **ProgressBar**: 进度条组件,常用于显示任务完成状态。 - **Spacer**: 用于布局中的空白区域。 - **TabBar**: 套装式标签栏组件。 - **TileList**: 网格状布局的列表组件。 - **Tree**: 展示层级关系数据的树形...

    FLex loading源码

    这些类可能会扩展Flex的基础组件,如`mx.controls.ProgressBar`,并添加特定的功能或样式。 5. **FLA与SWF**:未命名-1.fla是一个Flash Authoring Environment(Animate CC的前身)的工作文件,包含了所有的图形、...

    customized-music-menu-:我创建了自定义的音乐菜单我创建了自定义的音乐菜单

    6. **样式设计**:使用CSS(层叠样式表)对音乐菜单进行美化,包括颜色、布局、过渡效果等。例如: ```css .music-menu { display: flex; flex-direction: column; align-items: center; } .button { ...

    Flex3.5 mx.controls源文件包

    `mx.controls`库是Flex框架的核心部分,包含了一系列预定义的用户界面元素,如按钮、文本框、列表、滑块、进度条等。这些控件为开发者提供了丰富的交互性和视觉效果,同时简化了UI开发过程。在Flex3.5中,`mx....

    CircularProgressBar

    "CircularProgressBar"允许开发者自定义其颜色、大小和样式,以适应不同的应用场景和品牌需求。 "自定义圆环的前景色"意味着你可以根据自己的设计需求调整进度条填充的颜色,通常是代表已完成的部分。这通常用于...

    MP3Player播放器

    通过定义自定义皮肤和应用CSS样式,我们可以改变按钮、滑块等组件的颜色、形状和动画效果。 总的来说,MP3Player播放器是一个集成了Flex技术、ActionScript编程和音频处理的综合项目。开发者需要掌握Flex的基本概念...

    使用 ACTIONSCRIPT 3.0组件 (AS3组件帮助文档)

    - **ProgressBar 组件**:用于显示进度条。 - **RadioButton 组件**:用于创建单选按钮。 - **ScrollPane 组件**:用于创建可滚动的内容区域。 - **Slider 组件**:用于让用户调节数值。 - **TextArea 组件**:用于...

Global site tag (gtag.js) - Google Analytics