注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

无限风光

牡丹故里 美丽独特 多骄如画 明天更好

 
 
 

日志

 
 
关于我

人生乐事,坚持学习,结交诚友,快乐自己。传递友谊,借鉴学习,丰富智慧,。交遍四海友, 感情多富有。 访尽天下博, 精神多快活。

网易考拉推荐

Flash制作播放条-学习笔记  

2013-02-06 21:49:27|  分类: FLASH制作常识 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

Flash制作播放条-学习笔记 - 无限风光学习收藏 - 无限风光学习收藏的博屋

视频教程:硅谷动力土豆视频专辑播放器、、
1、作品介绍 [0102]
播放进度控制条在主场景中共有5个图层:代码、滑块、遮罩、影片、播放条层。
测试1 - 火力光波 - 火力光波的博客
2、元件制作
(1)停止按钮 [030405]
①新建文档→保存为:播放条→舞台大小等(默认)→插入/新建元件→停止按钮/影片剪辑→确定
②矩形工具→绘制矩形→注册点对齐左上角→填充渐变颜色→填充交界线→图层1改为底色层
测试1 - 火力光波 - 火力光波的博客
③新建玻璃光层→绘制矩形→填充渐变颜色→变形旋转→调节透明度
测试1 - 火力光波 - 火力光波的博客 
④新建图标层(放在玻璃光层下面)→矩形工具→绘制矩形→填充白色
测试1 - 火力光波 - 火力光波的博客   
⑤在玻璃光层第3帧处插入帧→在图标层第2、第3帧处处插入关键帧→在混色器中调暗一些→同样地调整底色层
⑥新建代码层→右击第1帧/动作→输入代码:stop():→保存
测试1 - 火力光波 - 火力光波的博客  
(2)播放按钮 [06]
①右击库中“停止按钮”→选择“直接复制”→输入“播放按钮”/影片剪辑→确定
②双击库中“播放按钮”→选择图标层修改图标→修改第2、3帧→保存
测试1 - 火力光波 - 火力光波的博客
(3)进度条 [07]
①插入菜单/新建元件→进度条/影片剪辑→确定→矩形工具→用绘制对象绘制矩形→注册点对齐左上角→
  →填充渐变颜色→复制→图层1改为底色层
②新建填充层→粘贴到当前位置→上下压缩→调整渐变颜色
③新建玻璃光层→复制粘贴玻璃光色→调整高度
测试1 - 火力光波 - 火力光波的博客  
(4)滑块 [08]
①插入菜单/新建元件→滑块/影片剪辑→确定→绘制圆角矩形→注册点对齐左上角→填充渐变颜色→图层1改为底色层
②新建玻璃光层→复制粘贴玻璃光色→保存
测试1 - 火力光波 - 火力光波的博客 
(5)底部 [09]
在库中直接复制停止按钮→输入“底部”/影片剪辑→确定→保留玻璃光层、底色层的第1帧,其它删除→保存
测试1 - 火力光波 - 火力光波的博客 
(6)影片 [10]
①插入菜单/新建元件→MTV/影片剪辑→确定→文件菜单/导入/导入到舞台→选择文件/打开→图层1改为动画层
测试1 - 火力光波 - 火力光波的博客 
②新建音乐层→从外部库中拖入音乐→打开属性面板→同步改为数据流→编辑封套→保存
测试1 - 火力光波 - 火力光波的博客 
3、布置场景 [111213]
①返回场景1→图层1改为影片层→从库中拖入MTV→调整大小、位置
②新建遮罩层→绘制矩形→右键菜单选择遮罩层
③新建播放条层→从库中拖入停止按钮、播放按钮、底部、进度条→全部选中→对齐→微调
④新建滑块层→从库中拖入滑块→调整大小、位置
⑤选中如下对象→打开属性面板→分别输入括号中的实例名称→保存
   停止按钮(tz_mc)、播放按钮(ks_mc)、暂停按钮(zt_mc)、滑块(hk_mc)、进度条(jdt_mc)、影片(yp_mc)
⑥新建代码层→右击第一帧/动作→输入代码(请见下篇日志)
测试1 - 火力光波 - 火力光波的博客

4、添加代码
(1)添加滑块代码 [1415161718192021]
hk_mc.onPress=function(){      //当鼠标按下时滑块拖动范围
    startDrag("hk_mc", false, jdt_mc._x, jdt_mc._y-2, jdt_mc._x+jdt_mc._width-hk_mc._width, jdt_mc._y-2);
    //拖动"滑块"目标,不固定,起始点xy坐标,结束点xy坐标。
};
hk_mc.onRelease=function(){   
    stopDrag();                //当鼠标释放时滑块停止拖动
    yp_mc.gotoAndPlay(int(yp_mc._totalframes*(hk_mc._x-jdt_mc._x)/(jdt_mc._width-hk_mc._width)));
    //当鼠标释放时影片播放
    //trace(int(yp_mc._totalframes*(hk_mc._x-jdt_mc._x)/(jdt_mc._width-hk_mc._width)));
    //测试(取整数(影片总帧数*(滑块x坐标-进度条x坐标)/(进度条宽度-滑块宽度)))
};
this.onEnterFrame=function(){  //重复调用函数 滑块随影片播放而移动
    hk_mc._x = jdt_mc._x+(jdt_mc._width-hk_mc._width)*yp_mc._currentframe/yp_mc._totalframes; 
    //滑块x坐标=进度条x坐标+(进度条宽度-滑块宽度)*影片当前播放的帧数/影片总帧数
};
(2)声明布尔变量 [2223]
var td:Boolean = true;     //声明布尔变量 起始位置为真
hk_mc.onPress = function() {
 td=false;          //当拖动时为假  
 startDrag("hk_mc", false, jdt_mc._x, jdt_mc._y-2, jdt_mc._x+jdt_mc._width-hk_mc._width, jdt_mc._y-2);
};
hk_mc.onRelease = function() {
 td=true;           //当松开时为真
 stopDrag();
 yp_mc.gotoAndPlay(int(yp_mc._totalframes*(hk_mc._x-jdt_mc._x)/(jdt_mc._width-hk_mc._width)));
        //trace(int(yp_mc._totalframes*(hk_mc._x-jdt_mc._x)/(jdt_mc._width-hk_mc._width)));
};
 this.onEnterFrame = function() {
 if (td) {          //如果为真 滑块随影片播放而移动
 hk_mc._x = jdt_mc._x+(jdt_mc._width-hk_mc._width)*yp_mc._currentframe/yp_mc._totalframes;
 }
};
(3)添加按钮代码 [24]
//停止按钮
tz_mc.onRollOut=function(){    //当鼠标移出时转到第1帧
      tz_mc.gotoAndstop(1);
};
tz_mc.onRollOver=function(){   //当鼠标移入时转到第2帧 
      tz_mc.gotoAndstop(2);
};
tz_mc.onPress=function(){      //当鼠标按下时转到第3帧 
      tz_mc.gotoAndstop(3);
};
tz_mc.onRelease=function(){    //当鼠标释放时转到第1帧影片停止
      tz_mc.gotoAndstop(1);
      yp_mc.stop();
};
//播放按钮
ks_mc.onRollOut=function(){   //当鼠标移出时转到第1帧
      ks_mc.gotoAndstop(1);
};
ks_mc.onRollOver=function(){  //当鼠标移入时转到第2帧
      ks_mc.gotoAndstop(2);
};
ks_mc.onPress=function(){     //当鼠标按下时转到第3帧
      ks_mc.gotoAndstop(3);
};
ks_mc.onRelease=function(){   //当鼠标释放时转到第1帧影片播放
      ks_mc.gotoAndstop(1);
      yp_mc.play();
};
5、改进版代码 [25262728293031]
var td:Boolean = true;
//声明布尔变量
var hkgd:Number = jdt_mc._y-(hk_mc._height-jdt_mc._height)/2;
//滑块顶端和底端的y坐标
var hkz:Number = jdt_mc._x;
//滑块在左端的x坐标
var hky:Number = jdt_mc._x+jdt_mc._width-hk_mc._width;
//滑块在右端的x坐标
var jdtzc:Number = jdt_mc._width-hk_mc._width;
//滑块水平活动的长度
hk_mc.onPress = function() {
 td = false;
 startDrag(this, false, hkz, hkgd, hky, hkgd);
 //滑块的拖动,不固定,起始点xy坐标,结束点xy坐标。
};
hk_mc.onRelease = function() {
 td = true;
 stopDrag();
 //滑块的停止
 yp_mc.gotoAndPlay(int(yp_mc._totalframes*(hk_mc._x-jdt_mc._x)/jdtzc));
 //计算当前播放头的位置,公式:取整数(影片总帧数*(滑块x坐标-进度条x坐标)/滑块水平活动的长度)
};
this.onEnterFrame = function() {
//重复调用函数
 if (td) {
  hk_mc._x = jdt_mc._x+jdtzc*yp_mc._currentframe/yp_mc._totalframes;
  //公式:滑块x坐标=进度条x坐标+滑块水平活动的长度*影片当前播放的帧数/影片总帧数
 }
};
tz_mc.onRollOut = function() {
 tz_mc.gotoAndstop(1);
 //当鼠标移出时转到第1帧
};
tz_mc.onRollOver = function() {
 tz_mc.gotoAndstop(2);
 //当鼠标移入时转到第2帧 
};
tz_mc.onPress = function() {
 tz_mc.gotoAndstop(3);
 //当鼠标按下时转到第3帧
};
tz_mc.onRelease = function() {
 tz_mc.gotoAndstop(1);
 yp_mc.stop();
 //当鼠标释放时转到第1帧影片停止
};
ks_mc.onRollOut = function() {
 ks_mc.gotoAndstop(1);
 //当鼠标移出时转到第1帧
};
ks_mc.onRollOver = function() {
 ks_mc.gotoAndstop(2);
 //当鼠标移入时转到第2帧
};
ks_mc.onPress = function() {
 ks_mc.gotoAndstop(3);
 //当鼠标按下时转到第3帧
};
ks_mc.onRelease = function() {
 ks_mc.gotoAndstop(1);
 yp_mc.play();
 //当鼠标释放时转到第1帧影片播放
};
6、完善版代码 [32333435]
修改两个问题:
①鼠标按住滑块拖到外面松开,滑块不随鼠标移动而移动。
②鼠标按住滑块拖动时,影片画面随之变动。
var td:Boolean = true;
//声明布尔变量
var hkgd:Number = jdt_mc._y-(hk_mc._height-jdt_mc._height)/2;
//滑块顶端和底端的y坐标
var hkz:Number = jdt_mc._x;
//滑块在左端的x坐标
var hky:Number = jdt_mc._x+jdt_mc._width-hk_mc._width;
//滑块在右端的x坐标
var jdtzc:Number = jdt_mc._width-hk_mc._width;
//滑块水平活动的长度
hk_mc.onPress = function() {
 //滑块拖动的范围
 td = false;
 startDrag(this, false, hkz, hkgd, hky, hkgd);
 //滑块的拖动,不固定,起始点xy坐标,结束点xy坐标。
};
hk_mc.onRelease = function() {
 yp_mc.gotoAndPlay(int(yp_mc._totalframes*(hk_mc._x-jdt_mc._x)/jdtzc));
 //计算当前播放头的位置,公式:取整数(影片总帧数*(滑块x坐标-进度条x坐标)/滑块水平活动的长度)
 td = true;
 stopDrag();
 //滑块停止拖动
};
hk_mc.onReleaseOutside = function() {
 //鼠标按住滑块拖到外面松开,滑块不随鼠标移动而移动。
 yp_mc.gotoAndPlay(int(yp_mc._totalframes*(hk_mc._x-jdt_mc._x)/jdtzc));
 //计算当前播放头的位置,公式:取整数(影片总帧数*(滑块x坐标-进度条x坐标)/滑块水平活动的长度)
 td = true;
 stopDrag();
 //滑块停止拖动
}; /**/
onEnterFrame = function() {
 //重复调用函数
 if (td) {
  hk_mc._x = jdt_mc._x+jdtzc*yp_mc._currentframe/yp_mc._totalframes;
  //公式:滑块x坐标=进度条x坐标+滑块水平活动的长度*影片当前播放的帧数/影片总帧数
 } else{
  yp_mc.gotoAndPlay(int(yp_mc._totalframes*(hk_mc._x-jdt_mc._x)/jdtzc));
 //计算当前播放头的位置,公式:取整数(影片总帧数*(滑块x坐标-进度条x坐标)/滑块水平活动的长度)
 }
};
tz_mc.onRollOut = function() {
 tz_mc.gotoAndstop(1);
 //当鼠标移出时转到第1帧
};
tz_mc.onRollOver = function() {
 tz_mc.gotoAndstop(2);
 //当鼠标移入时转到第2帧 
};
tz_mc.onPress = function() {
 tz_mc.gotoAndstop(3);
 //当鼠标按下时转到第3帧
};
tz_mc.onRelease = function() {
 tz_mc.gotoAndstop(1);
 yp_mc.stop();
 //当鼠标释放时转到第1帧影片停止
};
ks_mc.onRollOut = function() {
 ks_mc.gotoAndstop(1);
 //当鼠标移出时转到第1帧
};
ks_mc.onRollOver = function() {
 ks_mc.gotoAndstop(2);
 //当鼠标移入时转到第2帧
};
ks_mc.onPress = function() {
 ks_mc.gotoAndstop(3);
 //当鼠标按下时转到第3帧
};
ks_mc.onRelease = function() {
 ks_mc.gotoAndstop(1);
 yp_mc.play();
 //当鼠标释放时转到第1帧影片播放
};
7、播放条的应用
(1)将播放条做成元件 [
3637]
①插入菜单/新建元件→完整播放条/影片剪辑→确定→图层1改为对象层→返回场景1复制播放条→粘贴到对象层第1帧→对齐左上角;测试2 - 火力光波 - 火力光波的博客
②新建代码层→返回场景1打开代码层复制全部代码→右击新建的代码层第1帧/动作→粘贴代码;
③将代码中的“yp_mc”修改为:“_parent.yp_mc”。
测试2 - 火力光波 - 火力光波的博客
④返回场景1→删除代码层、滑块层→选择播放条层→从库中拖入完整播放条→控制菜单/测试影片。
测试2 - 火力光波 - 火力光波的博客
以上,是播放条控制主场景下的影片剪辑,其方法可综合如下。
①新建文档→图层1改为影片层→插入菜单/新建元件→MTV/影片剪辑→确定
②文件菜单/导入/导入到舞台→选择MTV文件/打开→图层1改为动画层
③新建音乐层→从外部库中拖入音乐→打开属性面板→同步改为数据流→编辑封套→保存
Flash制作播放条-学习笔记2 - 火力光波 - 火力光波的博客
④返回场景1→从库中拖入MTV→调整大小、位置
⑤新建遮罩层→绘制矩形→右键菜单选择遮罩层
⑥新建播放条层(放在最上面)→从外部库拖入完整播放条→控制菜单/测试影片。
Flash制作播放条-学习笔记2 - 火力光波 - 火力光波的博客
双击播放条进入元件→右击代码层第1帧→选择动作→可打开如下代码
Flash制作播放条-学习笔记2 - 火力光波 - 火力光波的博客
播放条最终代码
var td:Boolean = true;
//声明布尔变量
var hkgd:Number = jdt_mc._y-(hk_mc._height-jdt_mc._height)/2;
//滑块顶端和底端的y坐标
var hkz:Number = jdt_mc._x;
//滑块在左端的x坐标
var hky:Number = jdt_mc._x+jdt_mc._width-hk_mc._width;
//滑块在右端的x坐标
var jdtzc:Number = jdt_mc._width-hk_mc._width;
//进度条的长度或滑块水平活动的范围
hk_mc.onPress = function() {
 //鼠标按下滑块拖动的范围
 td = false;
 //当拖动时为假
 startDrag(this, false, hkz, hkgd, hky, hkgd);
 //拖动滑块,不固定,起始点xy坐标,结束点xy坐标。
};
hk_mc.onRelease = function() {
 //鼠标松开滑块停止拖动
 td = true;
 //当松开时为真
 stopDrag();
 //滑块停止拖动
};
hk_mc.onReleaseOutside = function() {
 //鼠标按住滑块拖到外面松开,滑块不随鼠标移动而移动。
 td = true;
 //当拖到外面松开时为真
 stopDrag();
 //滑块停止拖动
};
onEnterFrame = function () {
 //重复调用函数
 if (td) {
  //如果为真 滑块随影片播放而移动
  hk_mc._x = jdt_mc._x+jdtzc*_parent.yp_mc._currentframe/_parent.yp_mc._totalframes;
  //公式:滑块当前x坐标=进度条x坐标+滑块水平活动的长度*影片当前播放的帧数/影片总帧数
 } else {
  //否则,影片随滑块的位置而播放
  _parent.yp_mc.gotoAndPlay(int(_parent.yp_mc._totalframes*(hk_mc._x-jdt_mc._x)/jdtzc));
  //公式:播放头的当前位置=取整数(影片总帧数*(滑块x坐标-进度条x坐标)/滑块水平活动的长度)
 }
};
tz_mc.onRollOut = function() {
 tz_mc.gotoAndstop(1);
 //当鼠标移出时转到第1帧
};
tz_mc.onRollOver = function() {
 tz_mc.gotoAndstop(2);
 //当鼠标移入时转到第2帧 
};
tz_mc.onPress = function() {
 tz_mc.gotoAndstop(3);
 //当鼠标按下时转到第3帧
};
tz_mc.onRelease = function() {
 tz_mc.gotoAndstop(1);
 _parent.yp_mc.stop();
 //当鼠标释放时转到第1帧影片停止
};
ks_mc.onRollOut = function() {
 ks_mc.gotoAndstop(1);
 //当鼠标移出时转到第1帧
};
ks_mc.onRollOver = function() {
 ks_mc.gotoAndstop(2);
 //当鼠标移入时转到第2帧
};
ks_mc.onPress = function() {
 ks_mc.gotoAndstop(3);
 //当鼠标按下时转到第3帧
};
ks_mc.onRelease = function() {
 ks_mc.gotoAndstop(1);
 _parent.yp_mc.play();
 //当鼠标释放时转到第1帧影片播放
};
以上代码是用来控制主场景下的影片剪辑,如删除代码中的“yp_mc.”,还可应用到直接控制主场景。
源文件下载:http://163.fm/QK7M2PW   提取码:Nt3Ej891
(2)播放条直接控制主场景时间轴
  [383940]  
①在主场景制作一个MTV;
②新建播放条层(放在最上面)→从外部库中拖入完整播放条→调整舞台大小→对齐→修改播放条外观;
测试2 - 火力光波 - 火力光波的博客
③双击播放条→选择代码层/动作→删除代码中的“yp_mc.”→控制菜单/测试影片。
测试2 - 火力光波 - 火力光波的博客

源文件下载:http://163.fm/N2dZD4H   提取码:JjLWD2iQ

( 笔记1   笔记2 )

  评论这张
 
阅读(569)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017