夏日博客

A-A+

flash制作简易的播放器

2015年09月17日 前端设计 暂无评论 阅读 12 views 次

很早之前的一个教程了，感觉这个 flash 实例的制作思路还不错，所以就粘贴出来了，新手可以尝试下在最新版的 flash 环境下如何进行制作简易的播放器。

这是利用 flash 组件制作的播放器，歌曲外调，调用提一个 xml 文件，在修改的时候也方便。

在原文件目录下放入无数首mp3，默认名称为1.mp3,2.mp3........，这里的名称和歌曲数目大家可以自己修改XML文件。思路如下：

歌曲列表用一外部XML文件来记录，便于修改。开始的时候定义一XML对象，并载入外部XML文件，载入后再将歌曲列表提取出来放入一数组中。接着用attachMovie()方法将MediaController和MediaDisplay组件载入舞台，然后设置各自的参数，并将二者相关联（Media.associateController()或者Media.associateDisplay()方法都行）当一首歌曲播放完后，触发MediaDisplay的complete事件，在此事件中我将MediaController和MediaDisplay组件卸载并重新载入MediaController和MediaDisplay组件（使用attachMovie()方法）并给一新的实例名，并设置MediaDisplay组件的播放内容为下一首歌曲，如此往复来播放所有的歌曲。

制作步骤：

1.新建一个FLASH文档，设置舞台大小：220*70。

2.将组件MediaController和MediaDisplay拖入舞台，然后从舞台上删除。这样做的目的是将这两个组件载入库中，为接下来用attachMovie()方法将MediaController和MediaDisplay组件载入舞台做好准备。

3.新建一层，命名为function。在该层的第一帧上输入如下AS代码：

  1. function init(){  
  2.  flagNum = 1;  
  3.  //播放歌曲的标示  
  4.  mp3Num = 0;  
  5.  attachController();  
  6. };  
  7. //将MediaController和MediaDisplay组件载入舞台并初始化  
  8. function attachController(){  
  9. //将MediaDisplay组件载入舞台并给定义实例名 "mp3Container" + flagNum  
  10.   _root.attachMovie("MediaDisplay","mp3Container" + flagNum,2);  
  11.   //设置组件初始参数  
  12.   with(_root["mp3Container" + flagNum]){  
  13.    _x = 250;  
  14.    _y = 0;  
  15.    setMedia(myArray[mp3Num],"MP3");  
  16. }  
  17. //将MediaController组件载入舞台并给定义实例名 "mp3Controller" + flagNum  
  18. _root.attachMovie("MediaController","mp3Controller" + flagNum,1);  
  19. //设置组件初始参数  
  20. with(_root["mp3Controller" + flagNum]){  
  21.     _x = 0;  
  22.     _y = 0;  
  23.    activePlayControl = false;  
  24.    controllerPolicy = "on";  
  25.    //将MediaController和MediaDisplay组件相关联  
  26.    associateDisplay(_root["mp3Container" + flagNum]);  
  27.   };  
  28. };  
  29. function playNext(){  
  30. //将MediaController和MediaDisplay组件从舞台上删除  
  31.     _root["mp3Controller" + flagNum].removeMovieClip();  
  32.     _root["mp3Container" + flagNum].removeMovieClip();  
  33.     flagNum += 1;  
  34.     mp3Num += 1;  
  35.     //如果播放到歌曲的最后一首，将mp3Num = 0，意为将从头开始播放  
  36.     if(mp3Num == mp3Total) mp3Num = 0;  
  37.     //重新载入MediaController和MediaDisplay组件，并给一新的实例名  
  38.        attachController();  
  39.        //因为每播放完一首歌曲后MediaController和MediaDisplay组件从舞台上被卸载  
  40.        //然后又重新载入MediaController和MediaDisplay组件并给了另外一个实例名  
  41.        //所以要重新向注册的监听器广播事情  
  42.      _root["mp3Container" + flagNum].addEventListener("complete", myListener);  
  43. };  

4.新建一层，命名为action,在该层第一帧输入一下AS代码：

  1. stop();  
  2. //数组myArray用来存储 载入的XML文档中的歌曲名称  
  3. var myArray = new Array();  
  4. //歌曲的总数  
  5. var mp3Total:Number;  
  6. var myXml = new XML();  
  7. myXml.ignoreWhite = true;  
  8. myXml.load("mp3list.xml");  
  9. myXml.onLoad = function() {  
  10.  var e = myXml.firstChild.childNodes;  
  11.  mp3Total = e.length;  
  12.  for (var i = 0; i<mp3Total; i++) {  
  13.   myArray.push(e.attributes["title"]);  
  14.  }  
  15.  init();  
  16.  _root["mp3Container"+flagNum].addEventListener("complete", myListener);  
  17. };  
  18. var myListener = new Object();  
  19. myListener.complete = function(eventObject) {  
  20.  playNext();  
  21. };  

5.保存文件，Ctrl+Enter测试影片并输出SWF文件。测试影片时会有错误提示，不用担心，这是由于没有生成XML文档的缘故。

6.创建XML文档：

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mp3Lists>  
  3.   <item title="1.mp3" />  
  4.   <item title="2.mp3" />  
  5. </mp3Lists>  

将该文件保存在与原SWF文件相同的文件夹中，命名为mp3list.xml。

7.在原文件目录下放入无数首mp3，默认名称为1.mp3,2.mp3........，这里的名称和歌曲数目大家可以自己修改XML文件。

到此为止，一个连放多首MP3的播放器就可以使用了，打开SWF文件，你将会听到优美动听的音乐，同时看到播放进度显示等MP3播放器常有的功能。注意：要想让这个播放器用于你的网站上，必须把SWF文件和XML以及两首MP3文件上传到你的网站的同一个文件夹中。

注意必须用7.0版以上的播放器播放。

标签：

给我留言