Flex实现 WebQQ那白云草地主题，云朵飘！

其实在 skin里非常容易实现，不过没有用 flash 的 帧来实现，

只用计数器，不知耗性能如何，有兴趣谁去测试回头转告下哈！

看图先吧：

 

ApplicationSkin1.mxml

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

<!--

    ADOBE SYSTEMS INCORPORATED
    Copyright 2008 Adobe Systems Incorporated
    All Rights Reserved.

    NOTICE: Adobe permits you to use, modify, and distribute this file
    in accordance with the terms of the license agreement accompanying it.

-->

<!--- The default skin class for the Spark Application component. 
        
      @langversion 3.0
      @playerversion Flash 10
      @playerversion AIR 1.5
      @productversion Flex 4
-->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
    alpha.disabled="0.5" creationComplete="onStart()" >

    <fx:Metadata>
    <![CDATA[ 
    /** 
     * A strongly typed property that references the component to which this skin is applied.
     */
        [HostComponent("spark.components.WindowedApplication")]
    ]]>
    </fx:Metadata> 
    
    <fx:Script>
        <![CDATA[
            import flash.utils.Timer;
            
            private var ticker:Timer;
            
            public function onStart():void
            {
                if(movingCloud.left<contentGroup.width+580)
                {
                    movingCloud.left +=0.5;
                }
                else
                {
                    movingCloud.left = -580;
                }
                ticker=new Timer(40, 1);
                ticker.addEventListener(TimerEvent.TIMER_COMPLETE, onTimerComplete);
                ticker.start();
            }
            public function onTimerComplete(event:TimerEvent):void
            {
                onStart();
            } 
            
        ]]>
    </fx:Script>

    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
        <s:State name="normalAndInactive" />
        <s:State name="normalWithControlBar" />
        <s:State name="disabledWithControlBar" />
        <s:State name="disabledAndInactive" />
    </s:states>
    
    <!-- fill -->
    <!--- 
        A rectangle with a solid color fill that forms the background of the application.
        The color of the fill is set to the Application's backgroundColor property.
    -->
    <s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0"  >
        <s:fill>
           <!-- <s:SolidColor color="{getStyle('backgroundColor')}" />-->
            <s:BitmapFill source="@Embed(source='assets/img/cloud.jpg')"  smooth="true" />            
        </s:fill>
    </s:Rect>
    
    <s:Group width="100%" height="100%" minWidth="0" minHeight="0" top="-10"  left="-580" >
        <s:BitmapImage id="movingCloud" source="assets/img/cloud1.png" smooth="true" />
    </s:Group>
        
    <s:Group left="0" right="0" top="0" bottom="0">
        <s:layout>
            <s:VerticalLayout gap="0" horizontalAlign="justify" />
        </s:layout>
        
        <!--- 
            Application Control Bar
        -->
        <s:Group id="topGroup" minWidth="0" minHeight="0"
                    includeIn="normalWithControlBar, disabledWithControlBar" >

            <!-- layer 0: control bar highlight -->
            <s:Rect left="0" right="0" top="0" bottom="1" >
               <s:stroke>
                    <s:LinearGradientStroke rotation="90" weight="1">
                        <s:GradientEntry color="0xFFFFFF" />
                        <s:GradientEntry color="0xD8D8D8" />
                    </s:LinearGradientStroke>
               </s:stroke>
            </s:Rect>

            <!-- layer 1: control bar fill -->
            <s:Rect left="1" right="1" top="1" bottom="2" >
               <s:fill>
                    <s:LinearGradient rotation="90">
                        <s:GradientEntry color="0xEDEDED" />
                        <s:GradientEntry color="0xCDCDCD" />
                    </s:LinearGradient>
               </s:fill>
            </s:Rect>

            <!-- layer 2: control bar divider line -->
            <s:Rect left="0" right="0" bottom="0" height="1" alpha="0.55">
                <s:fill>
                    <s:SolidColor color="0x000000" />
                </s:fill>
            </s:Rect>

            <!-- layer 3: control bar -->
            <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
                <s:layout>
                    <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
                </s:layout>
            </s:Group>
        </s:Group>

        <!--- 
            @copy spark.components.SkinnableContainer#contentGroup
        -->
        <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />
        
    </s:Group>

</s:Skin>

贴就贴完整点吧，虽然简单

工程文件：

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                       xmlns:s="library://ns.adobe.com/flex/spark"
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       xmlns:views="views.*" skinClass="ApplicationSkin1">
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
    <!--<views:vApps x="0" y="0">
    </views:vApps>-->

</s:WindowedApplication>