要求

    • 必备知识

      本文要求基本了解 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 PlayerAdobe 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
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

Flex4/AS3.0自定义VideoPlayer组件皮肤,实现Flash视频播放器的更多相关文章

  1. AS3.0 自定义右键菜单类

    AS3.0 自定义右键菜单类: /** * 自定义右键菜单类 * 自定义菜单项不得超过15个,每个标题必须至少包含一个可见字符. * 标题字符不能超过100个,并且开头的空白字符会被忽略. * 与任何 ...

  2. vue.js2.0 自定义组件初体验

    理解 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况 ...

  3. vue2.0 自定义 弹窗(MessageBox)组件

    组件模板 src/components/MessageBox/index.vue <!-- 自定义 MessageBox 组件 --> <template> <div c ...

  4. vue2.0 自定义 饼状图 (Echarts)组件

    1.自定义  图表  组件 Echarts.vue <!-- 自定义 echart 组件 --> <template> <div> <!-- echart表格 ...

  5. vue3系列:vue3.0自定义弹框组件V3Popup|vue3.x手机端弹框组件

    基于Vue3.0开发的轻量级手机端弹框组件V3Popup. 之前有分享一个vue2.x移动端弹框组件,今天给大家带来的是Vue3实现自定义弹框组件. V3Popup 基于vue3.x实现的移动端弹出框 ...

  6. vue3系列:vue3.0自定义全局弹层V3Layer|vue3.x pc桌面端弹窗组件

    基于Vue3.0开发PC桌面端自定义对话框组件V3Layer. 前两天有分享一个vue3.0移动端弹出层组件,今天分享的是最新开发的vue3.0版pc端弹窗组件. V3Layer 一款使用vue3.0 ...

  7. vue3系列:vue3.0自定义虚拟滚动条V3Scroll|vue3模拟滚动条组件

    基于Vue3.0构建PC桌面端自定义美化滚动条组件V3Scroll. 前段时间有分享一个Vue3 PC网页端弹窗组件,今天带来最新开发的Vue3.0版虚拟滚动条组件. V3Scroll 使用vue3. ...

  8. [转]Flash、Flex、AS3.0框架及类库资源收集之十全大补

    原文地址:http://www.d5power.com/portal.php?mod=view&aid=27 APIs.Libs.Components1.as3ebaylibhttp://co ...

  9. 从0到1搭建一款Vue可配置视频播放器组件(Npm已发布)

    前言 话不多说,这篇文章主要讲述如何从0到1搭建一款适用于Vue.js的自定义配置视频播放器.我们平时在PC端网站上观看视频时,会看到有很多丰富样式的视频播放器,而我们自己写的video标签样式却是那 ...

随机推荐

  1. php访问mysql工具类

    本文转载自:http://www.cnblogs.com/lida/archive/2011/02/18/1958211.html <?php class mysql { private $db ...

  2. SVN分支的合并和同步

    使用svn几年了,一直对分支和合并敬而远之,一来是因为分支的管理不该我操心,二来即使涉及到分支的管理,也不敢贸然使用合并功能,生怕合并出了问题对团队造成不良影响,最主要的原因是,自己对分支的目的和合并 ...

  3. ACL权限设置使用

    acl操作 # 查看操作的分区支不支持acldumpe2fs -h /dev/sda2 | grep aclDefault mount options: user xattr acl 代表支持acl如 ...

  4. 访问public

    public(C# 参考) public 关键字是类型和类型成员的访问修饰符. 公共访问是允许的最高访问级别. 对访问公共成员没有限制,如下例所示: class SampleClass { publi ...

  5. go与c++链接示例

    go lang与c/c++的链接示例: foo.hpp //foo.hpp #ifndef _FOO_HPP_ #define _FOO_HPP_ template<typename T> ...

  6. 斑马打印机网卡ZebraNet配置(有线)

    实图: 抽象图: 说明: 1.并口,用于连接斑马打印机一端 2.网络连接状态指示灯 3.打印状态指示灯 4.测试按钮,在连接打印机的情况下,按下此键,会打印出网卡信息. 5.网线接口 按下测试按钮之后 ...

  7. JAVA 静态成员 static

    static关键字 一.作用:是一个修饰符,用于修饰成员(成员变量,成员方法)1.被static 修饰后的成员变量只有一份2.当成员被static修饰之后,多了一种访问方式,除了可以被对象调用之外还可 ...

  8. CSS根据屏幕分辨率应用相应样式

    当屏幕尺寸小于1200px时,应用下面的CSS样式 @media screen and (max-width: 1200px) { /*当屏幕尺寸小于1200px时,应用下面的CSS样式*/ .ind ...

  9. 通过位运算生成ID

    public static void main(String[] args) { long serverId = 65535; System.out.println("ServerId:&q ...

  10. ios6和ios7禁止屏幕旋转

    ios6和ios7禁止屏幕旋转 - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOr ...