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

本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文連線，否則保留追究法律責任的權利。