多功能音乐相册的制作原理与过程

    

    作前准备：

    1.准备十四张规格为550*400的做相册的图片和一个动态的蝴蝶透明图片，经过制图软件（ps、fw）处理后，保存到指定的文件夹待用。

    2.准备十五首缓冲效果较好的mp3歌曲地址，保存到指定的文件夹待用。

　　制作步骤

    1.启动FLASH8 软件。

    2.确立文档属性 设置动画尺寸为550*400，背景颜色深绿，其它默认,点击确定，进入场景1。 如图1所示：

图1

    3.导入素材到库

    首先，将准备好的图片素材导入库中，并将其转换为图形元件01－15，待用。

    （一）点击切换相册

    1.创建按钮元件

    选择“插入－新建元件”，创建一个名为“三角”的按钮元件，点击确定，进入元件编辑区。就一个图层。

    选择图层1第2帧（指针经过）插入空白关键帧，画一个规格约为50*58的无边线的三角形，垂直中齐，偏右。颜色随意。如图2所示：

 

图2

在第4帧（点击）插入关键帧，用矩形工具在舞台拖一个无边线的矩形，规格275*400，颜色随意。全居中。如图3所示：

 

图3

    2.创建影片剪辑元件

    选择“插入－新建元件”，建立一个名为“点选”的影片剪辑元件，点击确定，进入元件编辑区。添加三个图层，共四个图层。自下而上命名为照片、按钮、边框、as。

    （1）选择照片图层第一帧，从库中拖出01图形元件到舞台，规格550*400，全居中。如图4所示：

 

 图4

同理同种方法，在第2－14帧插入空白关键帧，分别依次完成02－14图形元件的操作。

    （2）选按钮图层第一帧，从库中拖出“三角”按钮元件到舞台，规格275*400，左对齐－垂直中齐。如图5所示：

 

图5

点击该按钮，按f9，打开动作面板，在as编辑区输入，如下指令语句：

on (release) {
 play();

}

再从库中拖出“三角”按钮元件到舞台，规格275*400，右对齐－垂直中齐，如图6所示：

 

图6

点击该按钮，按f9，打开动作面板，在as编辑区输入，如下指令语句：

on (release) {
 prevFrame();

}

在第14帧插入帧。上锁。

    （3）选择边框图层第一帧，导入或制作一个边框，规格为550*400，全居中。在第14帧插入帧。上锁。如图7所示：

 

图7

    （4）选择as图层第一帧，按f9，打开动作面板，在as编辑区输入，如下帧语句：

stop();
var music:Sound = new Sound();
music.loadSound('http://guzhengqu./gz110301/mp3/lx0912/liwei_mzrq-6pingju.mp3', true);
music.onSoundComplete = function() { music.start();};
_sound.onSoundComplete = function()
{_sound.start(0, 999);}
my_sound.loadSound(sound, false);

红色部分为你准备好的第一首mp3音乐地址。

右键该帧－复制帧，再依次右键第2－14帧－粘贴帧。打开动作面板在as编辑区将语句中的红色部分换成你准备好的第2－14首m[3音乐地址。上锁。

    （5）该环节完成后的时间轴，如图8所示：

 

图8

    （二）仿翻页切换相册

    1.创建按钮元件

    选择“插入－新建元件”，创建一个名为“蝴蝶”的按钮元件，点击确定，进入元件编辑区。就一个图层。

    选择图层1第一帧（弹起），从库中拖出“蝴蝶”动态图片中的影片剪辑到舞台，设置其规格为50*57，全居中。如图9示：

 

图9

在第2帧(指针经过）插入关键帧，将该实例规格放大为60*67，并改变一下颜色，全居中。在第4帧（点击）插入帧。如图10所示：

 

图10

  2.建影片剪辑元件

    （1）选择“插入－新建元件”，建立一个名为“翻页”的影片剪辑元件，点击确定，进入元件编辑区。就一个图层。

    选择图层1第1帧，用矩形工具在舞台拖一个规格为550*400的，无边线的天蓝色矩形，全居中，并将其转换为图形元件。用任意变形工具点击该实例，将其注册点移到左中处，如图11所示：

 

图11

点击该实例，在属性面板设置其Alpha为60％ 。在第5帧插入关键帧，此时该实例注册点仍然在左中，然后用鼠标将该矩形拖到，如图12所示：

 

图12

点击该实例，在属性面板设置其Alpha为30％。在第10帧插入关键帧，此时该实例注册点仍然在左中，然后，在将该实例拖到，如图13所示：

 

图13

此时该实例的注册点已在右中。点击该实例，在属性面板设置其Alpha为0％。创建这两个区域间的动画补间。点击第10帧，按f9，打开动作面板，在as编辑区输入该帧的停止命令：stop();   该环节完成后的时间轴，如图14所示：

 

图14

    （2）选择“插入－新建元件”，建立一个名为“幻灯”的影片剪辑元件，点击确定，进入元件编辑区。添加两个图层，共三个图层。自下而上命名为照片、翻页、边框。

    A.选择照片图层第一帧，从库中拖出“01”图形元件到舞台，规格为550*400，全居中，如图15所示：

图15

同理同种方法在第51、101、151、201、251、301、351、401、451、501、551、601、651帧插入空白关键帧关键帧，然后分别依次在各帧完成“02－14”图形元件的操作。在第700帧插入帧。上锁。

    B.选择翻页图层第一帧，从库中拖出“翻页”影片剪辑元件到舞台，全居中，如图16所示：

 

图16

在第11帧插入空白关键帧，用鼠标将第1－11帧刮黑，右键刮黑处－复制帧；然后分别依次右键第51、101、151、201、251、301、351、401、451、501、551、601、651帧－粘贴帧，在第700帧插入帧。上锁。

    C.选择边框图层第一帧，导入或制作一个边框，规格为550*400，全居中，在第700帧插入帧。上锁。如图17所示：

 

图17

    D.本环节完成后的首尾时间轴，如图18所示：

 

 

图18

   4.编辑制作场景 返回场景1，添加三个图层，共四个图层。自下而上分别命名为相册、按钮、as1和as2。

    （1）选择相册图层第一帧，从库中拖出“点选”影片剪辑元件到舞台，规格550*400，全居中。如图19所示：

图19

点击该实例，在属性面板填写其实例名称为：Movie_Clip  。

在第2帧插入空白关键帧，从库中拖出“幻灯”影片剪辑元件到舞台，规格550*400，全居中。如图20所示：

图20

点击该实例，在属性面板填写其实例名称为：Movie_Clip  。上锁。

    （2）选择按钮图层第一帧，从库中拖出“蝴蝶”按钮元件到舞台，将其放置在舞台的左下角。如图21所示：

 

图21

点击该按钮，按f9，打开动作面板，在as编辑区输入，如下指令语句：

on (release) {
 gotoAndStop(2);

}

在第2帧插入关键帧，按f9，打开动作面板，在as编辑区输入，如下指令语句：

on (release) {
 gotoAndStop(1);

}

锁定该图层。

    （3）选择as1图层第一帧，按f9，打开动作面板，在as编辑区输入，如下帧语句：

stop();
var music:Sound = new Sound();
music.loadSound('迎客松', true);
music.onSoundComplete = function() { music.start();};
_sound.onSoundComplete = function()
{_sound.start(0, 999);}
my_sound.loadSound(sound, false);

在第2帧插入空白关键帧，点击该帧，按f9，打开动作面板，在as编辑区输入，如下帧语句：

stop();
var music:Sound = new Sound();
music.loadSound('http://ecourse./jp_xiaoji/2009/mzdsxhzgts/edit/uploadfile/200903/20090329155411838.mp3', true);
music.onSoundComplete = function() { music.start();};
_sound.onSoundComplete = function()
{_sound.start(0, 999);}
my_sound.loadSound(sound, false);

红色部分为你准备好的第15首mp3有效地址。

锁定该图层

    （3）选择as2图层第一帧，按f9，打开动作面板，在as编辑区输入，如下帧语句：

stop();
fscommand('allowscale',false);
var mc_menu:ContextMenu=new ContextMenu();
mc_menu.customItems.push(new ContextMenuItem('yks_BlueShine',GotoBlueShine));
this.menu=mc_menu;
function GotoBlueShine()
{
 };
var MouseListener:Object=new Object();
MouseListener.onMouseWheel=function(delta)
{
 with(Movie_Clip)
 {
  var omx=_xmouse,omy=_ymouse;
  _xscale+=delta;
  _yscale+=delta;
  _x-=omx*delta/100;
  _y-=omy*delta/100;
 }
};
var OriginMusX:Number ,OriginMusY:Number ;
var MousePress:Boolean;
MouseListener.onMouseDown = function()
{
 MousePress=true;
 OriginMusX=_xmouse;
 OriginMusY=_ymouse;
}
MouseListener.onMouseUp = function()
{
 MousePress=false;
}
MouseListener.onMouseMove = function()
{
 trace(_xmouse);
 if(MousePress)
 {
  Movie_Clip._x+=_xmouse-OriginMusX;
  Movie_Clip._y+=_ymouse-OriginMusY;
  OriginMusX=_xmouse;
  OriginMusY=_ymouse;
 }
}
Mouse.addListener(MouseListener);

右键第1帧－复制帧，再右键第2帧－粘贴帧。上锁。

 

    5.本作业完成后时间轴显示如图22所示：

 

图22

　　6.测试存盘

    *说明：

    1.本教程中歌曲均为外部加载，可省略大量的空间，但歌曲地址容易失效。

    2,场景中的as1图层的脚本为加载外部歌曲的语句；as2图层的脚本为实例移动缩放的语句。

    3,在制作中你还可以添加滚动、触摸相册等。

   

最终效果显示：

http://hsb345./domName/hsb345/201151610273271517.swf

<=''>

<=''> 

全屏下载

 

祝你成功！

 

进入更多教程