打造你的音乐万年历(上)

数码时尚

  Flash MX 2004的推出给网页制作带来了翻天覆地的变化,打造更酷、更炫的网站成了每一位站长最终追求的目标,这次我们就结合Flash Components、XML、ASP等几种技术,给大家在网站上制作一个可以动态添加音乐的万年历。

  准备工作

  从网上下载两个组件:AudioSetComponent和CALENDAR Component(各大网页、Flash制作资源站一般都有提供),也可以直接从http://www.52flash.net/temp/component.rar处下载。

  首先,将下载到的两个组件进行安装,其方法是用Extension Manager打开需要安装的组件,然后会出现安装许可协议,点击Accept就可以安装了。完成后安装的组件会出现在对话框中(图1)。

  按照上面的方法把另外一个组件也安装好并重新启动你的Flash MX 2004,在组件对话框中查看是否已经加载了它们(图2),今后我们将从此处调用这两个组件。

  制作过程

  一、万年历的制作

  新建一个Flash文档,调整大小为152×255,并新建一个MC,名称为“万年历”。然后从组件对话框中将组件拖至MC中,并设置组件的参数(图3)。

  图3的参数分别是日期显示方框的尺寸、间隔距离、主体色彩、边框以及字体色彩、字体、字号,大家也可以根据自己的喜好设置。

  打开库面板双击组件,可以发现场景中只有一帧,打开动作面板查看这一帧的AS(Action Script,动作脚本),找到星期与月份的数组语句:

  dow=new Array("S","M","T","W","T","F","S");

  this.montharray = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");

  将其中的名称改为相应的中文:

  dow=new Array("日","一","二","三","四","五","六");

  this.montharray = new Array("一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月");

  然后将先前创建的MC拖入场景中调整位置,并在上方加入“音乐万年历”的字样,接着发布出来看一看效果。在发布时大家要注意一下,发布时的设置要改为如图4所示,因为这个组件在某些版本的播放器中可能会出错误,所以得将发布时的播放器版本选为6,将AS版本选为AS 1.0。

  此时选择上方年旁边的加减号可以改变年,选择下边月份旁边的加减号可以改变月,这样就可以实现很方便的年月查询了,还免去了复杂的AS编写,是不是很简单?

  二、音乐播放器的制作

  接下来再做音乐播放器。

  按“Ctrl+F8”组合键新建名为“音乐播放器”的MC,将安装的AudioSetComponent中的第三个播放组件Xmlmp3playSC拖入MC中,然后将MC拖放进场景,调整好位置,再看一下效果(图5)。

  这时是不是已经将音乐的播放按钮加上了?不过细心的读者可能会发现这样直接加入似乎很难与日历的风格协调一致,给人两张脸的感觉,因此现在我们就进行播放按钮风格的修改。

  按“Ctrl+L”组合键打开库面板,双击AudioSetComponen,然后打开Xmlmp3playSC Assets,所有的按钮都放在这里,将这些按钮改成自己喜欢的风格就行了。

  到现在为止我们的万年历+播放器界面就做好了,但是现在这个东东还不可以播放音乐,要让它播放音乐就得搞懂这个音乐播放器的原理,查看它的AS可以看到如下代码:

  AudioXml = new XML();

  AudioXml.ignoreWhite = true;

  AudioXml.onLoad = LoadXmlFile;

  AudioXml.load(playListPath);

  function LoadXmlFile(success) {

  if (success) {

  aPath = new Array();

  asongTitle = new Array();

  aAudio = new Array();

  aAudio = this.firstChild.childNodes;

  AudioTotal = aAudio.length;

  for (i=0;i<AudioTotal; i++) {

  if (aAudio[i].nodeName == "AudioProps") {

  aPath.push(aAudio[i].attributes.path);

  asongTitle.push(aAudio[i].attributes.songTitle);

  }

  }

  AudioPath = aPath[0];

  tAuthor = asongTitle[0];

  AudioActual = 1;

  tCount = AudioActual+" Of "+AudioTotal;

  tText = "Xml Loaded";

  } else {

  tText = "Xml not loaded";

  }

  }

  它是通过一个XML的文档将音乐文件随机调用的,所以我们必须新建一个XML文档,同时组件中已经给了我们XML文档的格式:

  xml archive example:

  <?xml version="1.0" encoding= "UTF-8" ?>

  <audioFiles>

  <AudioProps path ="TomorrowComesToday.mp3" songTitle = "Gorillaz - Tomorrow Comes Today"/>

  <AudioProps path ="SlowCountry.mp3" songTitle = "Gorillaz - Slow Country"/>

  <AudioProps path ="Punk.mp3" songTitle = "Gorillaz - Punk"/>

  </audioFiles>

  如果懂XML的朋友也可以根据上面函数中的结点以及数组定义自己写出XML语句,最终的格式肯定都是一样的!

  提示:保存XML文件时一定要选择“UTF-8”编码,否则汉字的歌名就会显示出乱码,这也是一些网友外部调用XML中的汉字时出现乱码的原因。

  现在给这个XML文件取名为music.xml,这时还需要将动画组件调用的XML指定到这个文件上,再打开插入的组件,在属性对话框中设置Play List为“music.xml”,Stream为“false”,Status为“点击播放”。

  好了,现在只要把你的歌曲地址以及标题填入XML文档中相应的位置即可。以下代码是笔者的XML文档:

  <?xml version="1.0" encoding= "UTF-8" ?>

  <audioFiles>

  <AudioProps path ="001.mp3" songTitle = "上上签 - 周华健"/>

  <AudioProps path ="002.mp3" songTitle = "那个傻瓜爱过你 - 赵传"/>

  <AudioProps path ="003.mp3" songTitle = "一生有你 - 水木年华"/>

  </audioFiles>

  现在我们的音乐万年历基本已做完了,但是一些读者可能会问,这样不是很不方便吗?每次添加音乐都得修改XML文档,能不能直接让它自动添加呀?回答是肯定的,下次让我们用ASP技术来自动向这个XML列表添加音乐。