Flash打造精美特色音乐播放器

  在电脑上听音乐,除了用现成的播放器软件,大家也可以自己动手用FLASH MX 2004来制作一款有特色的音乐播放器。文章末尾提供原文件供大家下载参考。

  制作要领: Flash 中影片剪辑的控制、音量大小的调节,声音平衡的调节,动态文本显示数据。 

  完成效果:

点击这里放大全屏观看效果

  制作步骤:

  一、创建背景图像

  1 .启动 Flash MX 2004 软件,在向导中选择 Create New 下的“ Flash 文档”,创建一个默认宽为 550px 、高为 400px 、背景色白色、帧频 12fps 的文件。

  2 .利用铅笔工具、椭圆工具、线条工具等各种绘图工具绘制场景及收音机(也可以从网上或是其它动画出提取素材。

  二、绘制收音机的播放按钮并添加动作

  1 .新建六个按钮元件,分别绘制控制收音机播放的各个按钮。

 

  2 .利分别给这几个按钮加上命令:

  ①“最前”按钮上的命令

  用鼠标单击“最前”按钮将其选中,然后打开“动作”面板,在右方动作命令行中输入:

  on (release) { //当鼠标释放的时候
   gotoAndStop(1); //播放头指向第1帧,并停止播放.
  }

  ② “快退”按钮上的命令

  用鼠标单击“最前”按钮将其选中,然后打开“动作”面板,在右方动作命令行中输入:

  on(release ) {
   gotoAndplay(_currentframe-50);
  }

  ③ 播放

  用鼠标单击“播放”按钮将其选中,然后打开“动作”面板,在右方动作命令行中输入:

  on(release ) {
   play();
  }

  ④ 停止

  on(release ) {
   stop(); // 播放头停止播放
  }

  ⑤ 快进

  on(release ) {
   gotoAndplay(_currentframe+50);
  }

   ⑥ 最后

  on(release ) {
   gotoAndStop(_root._totalframes);// 播放头指向最后 1 帧 , 并停止
  }

  三.制作长度与进度显示框

  1 .添加文本显示框

  点击“窗口”“其他面板”、“公用库”、“按钮”,打开“ Knobs & Faders ”文件夹里的 "Knobs & faders parts" 文件夹,找到电影剪辑“ input box ”,将其从“公用库”中拖拽到自己的库中,将电影剪辑改名为“长度”,再拖拽一个“ input box ”,改名为“进度”。 

  2 .修改文本显示框

  双击“库”里的“长度”电影剪辑,选中图层 3 ( layer 3 ),再点一下场景中的文本框,打开“属性面板”,将“输入文本”改为“动态文本”,将变量改为 cd ,按“字符”按钮,弹出“字符选项”面板,选中“无字符”,点确定。

  利用同样的方法修改“进度”电影剪辑,只是变量为 jd ,其它都一样设置。

  3 .建立“文本”电影剪辑:

  按下 Ctrl+F8 新建一个影片剪辑元件,起名为“文本”,分别将“长度”和“进度”两个电影剪辑拖拽到“文本”电影剪辑的工作区里排列好,用箭头工具点击“长度”电影剪辑,到“属性面板”中设置“实例名”为: changdu ,同样方法设置“进度”电影剪辑“实例名”为: jindu 。

  4 .给“文本”电影剪辑加动作:

  回到场景中,新建一层,起名为“进度条”将电影剪辑“文本”从库中拖拽到场景中的“按钮”图层上,再用箭头工具在场景中点击一下电影剪辑“文本”,在“属性面板”中设置“实例名”为 wenben 并将下列 AS 命令复制到“动作面板”中。

  // 影片时间长度计算与显示

  onClipEvent (load) {//MC 加载时动作
   s1 = int(_root._totalframes/12) ;// 影片长度
   fen1 = String(int( s1 / 60 )); // 算出分钟数取整数后,转换成字符串
   miao1 = String( int(s1 % 60 ));// 算出秒数取整数够,转换成字符串
   if (length(fen1) == 1) { // 分钟的数字长度为 1 时
    fen1 = "0"+fen1+" ” ";// 前面加零
   }else{ // 否则
    fen1 = fen1+"”";
   }

   if (length(miao1) == 1) {// 秒的数字长度为 1 时
    miao1 = "0"+miao1+" ' ";// 前面加零
   }else{// 否则
    miao1 = miao1+"'";
   }

   _root.wenben.changdu.cd = fen1 + miao1;
  }

  // 影片时间进度计算与显示(脚本解释参考以上代码)

  onClipEvent (enterFrame) {// 以 MC 的帧频不断触发
   s2 = int(_root._currentframe/12);
   fen2 = String(int( s2 / 60 ));
   miao2 = String(int( s2 % 60 ));
   if (length(fen2) == 1) {
    fen2 = "0"+fen2+"”";
   }else{
    fen2 = fen2+"”";
   }
   if (length(miao2) == 1) { 
    miao2 = "0"+miao2+"'";
   }else{
    miao2 = miao2+"'";
   }
   _root.wenben.jindu.jd = fen2 + miao2;
  }

  四.绘制并制作控制音量与平衡的按钮

  1 .找出“音量”元件:

  (提示:可以自己做也可以直接用公用库里的,读者可以打开源文件的库直接拖入。)

  点击“窗口” → “其他面板” → “公用库” → “按钮”,打开“ Knobs & Faders ”文件夹,找到电影剪辑“ fader - mixer ”,将其从“公用库”中拖拽到自己的库中的“音乐”文件夹内,将电影剪辑“ fader - mixer ”改名为“音量”,再双击文件夹“ knob & fader parts ”名称,改名为“音量控制”,再双击该文件夹图标,打开改文件夹,将影片剪辑“ fader ”改名为“音量手柄”,将按钮元件“ fader button ”改名为“音量按钮”,将影片剪辑“ fader details ”改名为音量刻盘,将影片剪辑“ fader shadow ”改名为“音量阴影”。

  (注意:双击文件夹名称是改名,双击文件夹图标是打开文件夹。另外,当从“公用库”向“库”拖拽影片剪辑时,要在“库”的白色区域内释放鼠标,不要在灰色区域内释放。)。

  2 .修改“音量”元件:

  在“库”面板中双击影片剪辑“音量”,用箭头工具框选“音量手柄”和“音量刻盘”,点击“修改”、“变形”、“逆时针旋转 90 度”,用箭头工具单击影片剪辑“音量手柄”,到“属性面板”中设置实例名: shoubing  。将手柄移动到刻盘的中心位置。   在“动作面板”中输入一下 AS 代码,把原来里面的脚本语句覆盖掉。

  onClipEvent (load) {// 影片剪辑加载时触发以下代码
   chushi_kepan = _x-50; // 确定刻盘初始位置在场景中的 X 坐标值
   zuo = _x-50; // 确定手柄在场景中最左边的限值
   you = _x+50; // 确定手柄在场景中最右边的限值
   ding = _y; // 确定手柄在场景中最上边的限值
   di = _y; // 确定手柄在场景中最下边的限值
   wls = new Sound();// 创建声音播放对象 wls
   wls.attachSound("wls");// 将库中标识符为 "wls" 的声音附加给 wls
   zdyl = 100;// 确定最大音量值
   dqyl = zdyl/2;// 确定当前音量值
   wls.setVolume(dqyl);// 给声音对象设置当前音量
  }

  onClipEvent (enterFrame) {// 与帧频同步触发以下代码
  // 由于刻盘长度为 100 像素,声音限值也是 100 ,当前位置减刻盘初始位置就是当前音量值。
   dqyl = Math.ceil(_root.yinliang.shoubing._x-_root.yinliang.shoubing.chushi_kepan);
   wls.setVolume(dqyl);// 对声音对象 WLS 设置当前音量
  }

  再用鼠标双击工作区中的影片剪辑“音量手柄”,露出按钮,给按钮添加以下按钮动作,把原来里面的脚本语句覆盖掉。

  on (press) {// 鼠标按下
   startDrag("", false, zuo, ding, you, di);// 在限定的区域中拖拽
  }

  on (release) {// 鼠标释放
   stopDrag();// 停止拖拽
  }

  3 .设置声音元件:

  选择菜单中的“文件” →“导入”→“库”,将准备好的音乐导入进来, 在“库”中单击声音元件 12.MP3 ,点鼠标右键,弹出菜单选择“链接”,弹出“链接属性”对话框,将“链接”里的“为动作脚本导出”与“在第一帧导出”打上勾,然后在“标识符“处输入: wls   ,点“确定”。

  4 .场景布置:

  回到场景中,新建一层,命名为“音量大小与平衡”,将影片剪辑“音量”托拽到主场景,到“属性面板”给影片剪辑“音量”起一个实例名: yinliang  ,调整好摆放位置即可。

  5 .用同样的方法制作一个控制音量平衡的手柄,代码如下:

  onClipEvent (load) {// 影片剪辑加载时
   chushi_x = _x; // 确定手柄在场景中的 X 初始坐标值
   zuo = _x-50; // 确定手柄在场景中最左边的限值
   you = _x+50; // 确定手柄在场景中最右边的限值
   ding = _y; // 确定手柄在场景中最上边的限值
   di = _y; // 确定手柄在场景中最下边的限值
   wls = new Sound();// 创建声音播放对象 wls
   wls.attachSound("wls");// 将库中标识符为 "wls" 的声音附加给 wls
   kpbs =2;// 刻盘倍数,手柄初始在刻盘中间,左右限值为 50 ,乘上刻盘倍数,可使得左右限值为 100 
  }

  onClipEvent (enterFrame) {// 与帧频同步触发
    // 计算当前平衡值,在 100 ,- 100 之间
   dqph = Math.floor((_root.pingheng.shoubing._x-_root.pingheng.shoubing.chushi_x ) * kpbs);
   wls.setPan(dqph);// 设置声音对象 wls 的当前平衡
  }

  五.整合场景并测试

  1.添加音乐层

  将所有元件与对象摆放在合适的位置后,新建一层,命名为“音乐”,在下方“属性”框的声音下拉单中选中刚才导入的音乐,设置“同步”内容为“数据流”,然后延长帧直到音乐播放完为止,再延长其它层的帧与音乐层的帧数相同。

  2.加上 stop 动作

  为了使音乐在开始处于未播放状态,选中音乐层第一帧,在“动作面板”中加入: stop(); 命令。

  3.测试

  现在按下 Ctrl+ 回车进行测试吧!怎么样,一个漂亮的音乐迷你播放机就出来了,大家利用这种方法可以制作MTV、课件以及播放器哦! 点击这里下载源文件

时间: 2024-12-07 05:08:53

Flash打造精美特色音乐播放器的相关文章

利用flash快速制作mp3音乐播放器

    制作说明:     一.准备工作         1.选择背景         背景可以是图片(JPG格式),使用的是可公开链接的图片网址.如果使用新浪相册的图片网址请务必阅读(四).         背景还可以是FLASH动画(SWF格式),使用的是SWF网址.            下面介绍几个可取得SWF网址的网页            花草素材120款     FLASH素材-四千余款     FLASH素材-英雄素材三千款            FLASH素材-透明边框300 

PS打造一枚简约音乐播放器

  用PS中的矢量形状以及图层样式打造精致的音乐播放器组件. 界面设计一定要保持简约,保证原汁原味的内容,一眼即知的操作方式. 音乐组件 通过本文,你将学习到:如何使用PS图层样式添加流畅精致的质感;如何打造细腻的渐变,让组件看起来栩栩如生;如何设计交互性优秀的组件按钮. 教程中完成的组件是灰度图像,可以在这里下载源文件 01.创建一个容器图层 圆角矩形,半径6px. 图层样式 渐变叠加 线性 90度 从#F9F9FA(顶部)到#EFEFEF(底部), 添加白色的内阴影,距离2px 02.添加投

2015音乐播放器排行榜

  1.酷狗音乐播放器: http://www.xpgod.com/soft/75.html (KuGou播放器)是国内最大的P2P音乐共享平台,采用了P2P的先进构架设计研发,为用户设计了高传输效果的文件下载功能,通过它能实现P2P数据分享传输;系统天堂为您提供最新版的酷狗音乐播放器2015官方下载. 2.酷我音乐盒:http://www.xpgod.com/soft/5506.html 酷我音乐盒是全球第一家集音乐的发现.获取和欣赏于一体的一站式个性化音乐服务平台.它运用世界最新的技术,为用

Android 使用Vitamio打造自己的万能播放器(8)——细节优化_Android

前言 成功的产品往往在细节之处也做到极致,产品和项目从使用的角度来看最大的区别我认为也就是细节的处理上.开播视频的目标是产品,前面7篇文章高歌猛进,添加了很多的功能,也该停下来休整一下,优化一下,也欢迎交流反馈做得不周到的地方.由于开源,大家也可以按照自己的喜好来添加修改不同的功能和细节. 系列 1.Android 使用Vitamio打造自己的万能播放器(1)--准备 2.Android 使用Vitamio打造自己的万能播放器(2)-- 手势控制亮度.音量.缩放 3.Android 使用Vita

Android 使用Vitamio打造自己的万能播放器(5)——在线播放(播放优酷视频)_Android

 前言 为了保证每周一篇的进度,又由于Vitamio新版本没有发布, 决定推迟本地播放的一些功能(截图.视频时间.尺寸等),跳过直接写在线播放部分的章节.从Vitamio的介绍可以看得出,其支持http.m3u8等多种网络协议,本章将编写播放优酷视频的例子. 系列 1.Android使用Vitamio打造自己的万能播放器(1)--准备 2.Android使用Vitamio打造自己的Android万能播放器(2)-- 手势控制亮度.音量.缩放 3.Android使用Vitamio打造自己的Andr

咪咕音乐播放器如何播放MV

  咪咕音乐播放器提供免费的高清音乐MV播放服务.包括最新发布的音乐MV.最热门的明星采访.最私密的独家新闻发布等多种优质的MV服务.在曲库首页精彩MV专栏,客户可以观看到咪咕音乐为客户准备的高清正版MV及演唱会.歌友会等其它精彩视频,让客户在听到歌曲的同时也能享受到视觉盛宴. 观看曲库中的MV需要具备条件: 客户必须拥有一台可以正常使用且已接入国际互联网的电脑,并在电脑上安装Flash Player插件.

as3 音乐播放器带控制播放进度

点击进度条音乐从鼠标点击处开始播放 制作过程: 1.新建FLASH CS3文档,保存名为"控制播放进度",保存在存有音乐的文件夹内.设置文档大小:252×114像素,帧频:24fps. 2.第一层名为"播放器背景",在该层画一个播放器背景. 3.新建图层,名为"播放进度框",画一个无边框的圆角矩形,边角半径为8,宽202高6,填充颜色为#006600,使其垂直水平于舞台. 4.新建图层,名为"播放进度背景",画一个无边框的圆角

jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器

最近在论坛中看到了很多实用html5开发视频播放,音乐播放的功能,大部分都在寻找答案.因此我就在这里做一个demo,供大家相互学习.html5开发越来越流行了,而对于视频这一块也是必不可少的一部分.如何让你的网站占据优势,就要看你的功能和用户体验了.html5对video还是做了很多优惠的东西,我们使用起来很得心应手. 在过去 flash 是网页上最好的解决视频的方法,截至到目前还算是主流,像那些优酷之类的视频网站.虾米那样的在线音乐网站,仍然使用 flash 来提供播放服务.但是这种状况将会随

什么样数字音乐播放器才是目前最便捷的跨平台播放器

目前两大智能终端系统的对决已趋于白热化,但对于用户来说这其实代表了更多的可选择空间,而各大厂则其实更是纷纷于两大移动平台推出了自己的产品.这一点在目前的数字音乐领域最为明显.但目前数字音乐领域存在着多家不同的音乐播放器,甚至是同一家播放器也推出了多版本的音乐播放器. 什么样数字音乐播放器才是目前最便捷的跨平台播放器呢?下面就给大家简单分析下优秀播放器的几个重点要素. 第一:安全 众所周知的原因,安卓手机具备很多不安全的因素,各种木马.乱扣费借着客户端在手机上大行其道,吸引流量.扣话费,等等暗箱操