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 >