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

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