音乐播放界面-动画控制

.

• 知识目标：

1、了解APP产品中的界面动画设计。

2、了解APP企业产品中按钮动效和图形动效的作用。

.

• 能力目标：

1、能够运用各类设计软件设计APP界面的音乐播放界面。

2、能够完成整体的APP各类动效制作。

3、能够运用按钮控制音乐的播放和停止。

.

• 课程重难点：

1、重点：整体的APP页面的动效制作。

2、难点：按钮控制音乐触发命令的编写方式。

• 课程概况、教学主要内容：

课程概况：

1、音乐的格式转换方式。

2、音频的剪辑方式。

3、音乐的导入

4、按钮的自身播放、停止图片的切换控制。

5、声音的播放和停止的命令添加方式。

教学内容：

播放、暂停、停止三个按钮控制音乐播放（播放、暂停按钮合二为一）

1、首先，将音乐导入库。然后，在库中右击音乐文件——链接，勾选“为动作脚本导出”和“在第一帧导出”复选项，在设置标识符为“moonlight shadow.mp3”。

2、从公用库中拖入两个个按钮到主场景中，将两个按钮分别命名为play_btn、stop_btn，锁定该图层。

3、新建一个图层，从公用库中拖入一个按钮，将这个按钮命名为pause_btn，并把它拖放到play_btn的位置。

3、在时间轴面板插入图层命名为“AS”层，在“AS”层写下如下代码：

var mymusic=new Sound();//创建一个新的声音对象mymusic

mymusic.attachSound("moonlight shadow.mp3");//将声音对象myumusic与库中的音乐moonlight shadow.mp3进行链接

pause_btn._visible=false;//隐藏暂停按钮

play_btn.onPress=function(){//当点击play_btn按钮时，执行大括号内的命令

mymusic.start(t);//从t处开始播放

pause_btn._visible=true;//显示暂停按钮

play_btn._visible=false;//隐藏播放按钮

}

pause_btn.onPress=function(){

t=mymusic.position/1000;//获取音乐播放的位置并赋值给变量t

mymusic.stop();//停止播放

pause_btn._visible=false;

play_btn._visible=true;

}

stop_btn.onPress=function(){

mymusic.stop();

t=0;//清除变量

play_btn._visible=true;

pause_btn._visible=false;

}

//至此完成，按ctrl+enter测试。

//在上述代码后加入如下代码，实现当音乐播放完毕后，回到初始状态。

mymusic.onSoundComplete=function(){//音乐播放完毕之后执行大括号内的命令

t=0;

play_btn._visible=true;

pause_btn._visible=false;

}

把播放和暂停真正做到一个按钮上。

从公用库拖入两个按钮到舞台，分别命名为pla_pau_btn、stop_btn。在第一帧写下如下代码

mymusic=new Sound();

mymusic.attachSound("a");

i=1;

pla_pau_btn.onPress=function(){

if (i==1) {//如果变量i等于1执行下面的动作

mymusic.start(t);//音乐播放

i= 0;//赋0给变量i

} else {//否则执行下面的动作

t=mymusic.position/1000;

mymusic.stop();//音乐停止

i=1;//赋予1给变量i

}

}

stop_btn.onPress=function(){

mymusic.stop();

t=0;

i=1;

}

.

一、音频处理方式：

1、音乐的格式转换方式。

2、音频的剪辑方式。

3、音乐的导入

.

.

二、声音控制和命令的添加：

1、按钮的自身播放、停止图片的切换控制。

2、声音的播放和停止的命令添加方式。