Flex4/AS3.0自定義VideoPlayer組件皮膚,實現Flash視頻播放器

要求

• 必備知識

  本文要求基本瞭解 Adobe Flex編程知識。

• 開發環境

  Flash Builder4/Flash Player11

• 演示地址

  演示地址 資料下載

 

 

Adobe Flash Player是一種普遍使用的、專有的多媒體程序播放器。它最初由Macromedia編寫，在Macromedia被Adobe收購後由Adobe繼續開發並分發。Adobe Flash Player 最初設計目的爲播放2維向量動畫，但至此以後成爲適合開發創造豐富型互聯網應用程序、流視頻音頻的工具。Flash Player使用向量圖形的技術來最小化文件的大小以及創造節省網絡帶寬和下載時間的文件。所以Flash 成爲嵌入網頁中的小遊戲、動畫以及圖形用戶界面經常使用的格式。總而言之Flash Player是目前網站處理豐富型互聯網應用程序、流視頻音頻的的主流工具。

而Flex 是一個高效、免費的開源框架，可用於構建具備表現力的 Web應用程序，這些應用程序利用Adobe Flash Player和Adobe AIR, 運行時跨瀏覽器、桌面和操做系統實現一致的部署。因此Flex是目前構建豐富型互聯網應用程序的首選。廢話很少少! 直接上程序截圖和代碼。

 

播放器截圖:

 

製做過程簡介:

• 在設計模式下拖入VideoPlayer組件後,右鍵建立組件皮膚:

  

 

• 分別定義皮膚部件:

<?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"
               xmlns:fb="http://ns.adobe.com/flashbuilder/2009" 
             alpha.disabledStates="0.5"  
             chromeColor.fullScreenStates="0xCCCCCC">
    <!-- 
    alpha透明度值
    0xCCCCCC在fullScreenStates A chrome color 意味着咱們忽視了chromeColor的屬性 -->

    <!-- host component
                   主機組件-->
    <fx:Metadata>
        [HostComponent("spark.components.VideoPlayer")]
    </fx:Metadata>
    
    <fx:Script fb:purpose="styling">
        <![CDATA[
            /* Define the skin elements that should not be colorized.
            定義了皮膚元素不該該被彩色化*/
            static private const exclusions:Array = ["videoDisplay", "playPauseButton", "scrubBar", 
                                                     "currentTimeDisplay", "timeDivider", "durationDisplay", 
                                                     "volumeBar", "fullScreenButton"];
            
            /**
             * @private
             */
            override protected function initializationComplete():void
            {
                useChromeColor = true;
                super.initializationComplete();
            }
            
            /**
             * @private
             */
            override public function get colorizeExclusions():Array 
            {
                return exclusions;
            }
            
            /**
             * @private
             */
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
            {
                dropShadow.visible = getStyle("dropShadowVisible");
                
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
        ]]>

    </fx:Script>
    
    <!-- states -->
    <s:states>
        <s:State name="uninitialized" stateGroups="uninitializedStates, normalStates" />
        <s:State name="loading" stateGroups="loadingStates, normalStates" />
        <s:State name="ready" stateGroups="readyStates, normalStates" />
        <s:State name="playing" stateGroups="playingStates, normalStates" />
        <s:State name="paused" stateGroups="pausedStates, normalStates" />
        <s:State name="buffering" stateGroups="bufferingStates, normalStates" />
        <s:State name="playbackError" stateGroups="playbackErrorStates, normalStates" />
        <s:State name="disabled" stateGroups="disabledStates, normalStates"/>
        <s:State name="uninitializedAndFullScreen" stateGroups="uninitializedStates, fullScreenStates" />
        <s:State name="loadingAndFullScreen" stateGroups="loadingStates, fullScreenStates" />
        <s:State name="readyAndFullScreen" stateGroups="readyStates, fullScreenStates" />
        <s:State name="playingAndFullScreen" stateGroups="playingStates, fullScreenStates" />
        <s:State name="pausedAndFullScreen" stateGroups="pausedStates, fullScreenStates" />
        <s:State name="bufferingAndFullScreen" stateGroups="bufferingStates, fullScreenStates" />
        <s:State name="playbackErrorAndFullScreen" stateGroups="playbackErrorStates, fullScreenStates" />
        <s:State name="disabledAndFullScreen" stateGroups="disabledStates, fullScreenStates"/>
    </s:states>
    
    <!-- drop shadow 陰影-->
    <!--- @private
    此類一般用於優化投影。若是要對其邊緣位於像素邊界上的 rectangularly-shaped 對象應用投影，則應使用此類
    blurX  水平模糊量
    blurY  垂直模糊量
    alpha  透明度
    distance  陰影的偏移距離，以像素爲單位。
    angle    斜角的角度。
    color   光暈顏色。
    excludeFrom  從對應的屬性中刪除該組件
    -->
    <s:RectangularDropShadow 
        id="dropShadow"
        blurX="17" 
        blurY="17"  
        alpha="0.32" 
        distance="4" 
        angle="90"
        color="#131313" 
        left="0"
        top="0"
        right="0"
        bottom="0" 
        excludeFrom="fullScreenStates"/>
    
    <!--- Video and player controls are clipped if they exceed the size of the 
          component, but the drop shadow above is not clipped and sizes to the component.
          We also set verticalScrollPosition so that when we do clip, rather than clipping  
          off the bottom first, we clip off the top fist.  This is so the player controls 
          are still visible when we start clipping.
        視頻和播放器控件在超過組件的大小被剪切，
    但上方的下拉陰影未裁剪和尺寸的組件。
    咱們還設置verticalScrollPosition的，
    這樣，當咱們作剪輯，而不是先剪切斷底，
    咱們剪掉頂部拳頭。這是爲了讓玩家控制仍然可見，
    當咱們開始裁剪。-->
    
    <!-- clipAndEnableScrolling  若是是true，則將超出範圍的children裁掉不顯示出來 
    -->
    <s:Group id="clippedGroup" clipAndEnableScrolling="true" left="0" top="0" right="0" bottom="0" 
             verticalScrollPosition="{Math.max(0, 184-clippedGroup.height)}">
    
        <!-- 有用於視頻和控制的最小尺寸。若是咱們去下面，咱們被剪切。 -->
        <s:Group minWidth="263" minHeight="184" left="0" right="0" top="0" bottom="0">
            
            <!-- background when the videoDisplay doesn't fill its whole spot 
            背景時，當VideoDisplay沒有填充整個點-->
            <s:Rect bottom="0" left="0" right="0" top="0">
                <s:fill>
                    <!--藍色背景-->
                    <s:SolidColor color="0x000000" />
                </s:fill>
            </s:Rect>
            
            <!--- @copy spark.components.VideoPlayer#videoDisplay
            bottom 距離下邊24像素控制面板的高度是24像素-->
            <s:VideoDisplay 
                id="videoDisplay" 
                bottom="50" 
                left="0" 
                right="0"
                top="0" 
                bottom.fullScreenStates="0" />
            
            <!-- video player controls
            bottom.fullScreenStates全屏時距離下邊是150像素
            控制面板-->
            <s:Group left="0" right="0" height="50" bottom="0" bottom.fullScreenStates="150">
                
                
                
                
                <!-- actual controls with a maxWidth in non-fullScreen mode 在非全屏模式了maxWidth實際控制 -->
                <!--- @copy spark.components.VideoPlayer#playerControls
                組件區域控制面板-->
                <s:Group 
                    bottom="0"
                    top="0"
                    horizontalCenter="0"
                    left="0"
                    right="0"
                    maxWidth.fullScreenStates="755"
                    id="playerControls"  >
                    
                    
                    
                    
                    <s:Rect bottom="0" left="0" right="0" top="0"
                            >
                        <s:fill>
                            <!--灰色背景-->
                            <s:SolidColor color="0x444953" />
                        </s:fill>
                    </s:Rect>
                    
                    
                    
                    <!--- @copy spark.components.VideoPlayer#playPauseButton
                    到這裏建立外觀聲明
                    playPauseButton:ToggleButtonBase  暫停/播放組件
                    focusIn 顯示對象得到焦點後調度。  事件
                    focusOut 顯示對象失去焦點後調度。 事件
                    -->
                    <s:Group width="50" height="50" left="0" bottom="0">
                        <s:ToggleButton 
                            id="playPauseButton" 
                            verticalCenter="0"
                            horizontalCenter="0"
                            skinClass="skins.PlayPauseButtonSkin" 
                           
                            layoutDirection="ltr"
                            focusIn="event.target.depth=1" focusOut="event.target.depth=0" />
                    </s:Group>
                   
                    <!-- scrub bar + currentTime/duration in a HorizontalLayout
                    scrub bar+ currentTime的/持續時間在一個HorizontalLayout-->
                    <s:Group left="50" right="100" height="50" bottom="0">
                        <s:layout>
                            <s:HorizontalLayout verticalAlign="middle" gap="1" />
                        </s:layout>
                        

                        <!--- @copy spark.components.VideoPlayer#scrubBar -->
                        <s:ScrubBar id="scrubBar"
                                    left="0"
                                    right="0"
                                    liveDragging="true"
                                    width="100%"
                                      skinClass="skins.ScrubBarSkin"
                                    />
                        
                        <!-- spacer 墊片-->
                        <s:Rect width="8" height="1" />
                        
                        <!--- @copy spark.components.VideoPlayer#currentTimeDisplay
                        可選外觀部件，用於顯示 codecurrentTime 的當前值。 -->
                        <s:Label id="currentTimeDisplay" color="0xFFFFFF"
                                 fontFamily="微軟雅黑" fontSize="13"
                                 fontWeight="bold"
                                 verticalAlign="middle"/>
                        
                        <!--- @private -->
                        <s:Label id="timeDivider" text="/" color="0xFFFFFF" verticalAlign="middle"
                                 />
                        
                        <!--- @copy spark.components.VideoPlayer#durationDisplay
                        要顯示 duration 的可選外觀部件。-->
                        <s:Label id="durationDisplay" 
                                 color="0xFFFFFF"
                                 fontFamily="微軟雅黑" fontSize="13"
                                 fontWeight="bold"
                                 verticalAlign="middle"/>
                        
                      
                    </s:Group>
                 
                    <!--- @copy spark.components.VideoPlayer#volumeBar
                    音量按鈕-->
                    <s:Group right="50" height="50" width="50">
                        <s:VolumeBar id="volumeBar" snapInterval=".01" stepSize=".01" liveDragging="true"
                                 horizontalCenter="0"
                                 verticalCenter="0"
                                layoutDirection="ltr"
                                skinClass="skins.VolumeBarSkin"
                                focusIn="event.target.depth=1" focusOut="event.target.depth=0"
                                />
                    </s:Group>
                        <!--- @copy spark.components.VideoPlayer#fullScreenButton 
                        全屏按鈕-->
                        <s:Group  width="50" height="50" right="0">
                            <s:Button id="fullScreenButton" right="0" bottom="0" label="Fullscreen" 
                                    skinClass="skins.FullScreenButtonSkin"
                                  
                                    focusIn="event.target.depth=1" focusOut="event.target.depth=0"
                                    verticalCenter="0"
                                    horizontalCenter="0"
                                    />
                        </s:Group>
                            
            
                </s:Group>
                
            </s:Group>
            
           
    
        </s:Group>
    </s:Group>
</s:SparkSkin>

 

部件的外觀定義和步驟一中建立VideoPlayer皮膚相似,這裏就很少介紹了。

在文章的開始出我提供了參考手冊,和皮膚中的圖片，能夠動手試試啊！！

做者: Li-Cheng

出處: http://www.cnblogs.com/Li-Cheng/p/3560390.html

本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。