音乐播放界面-音乐控制

.

• 知识目标：

1、了解APP产品中的界面设计和图标设计。

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

.

• 能力目标：

1、能够用PS软件设计APP界面。

2、能够完成整体的APP页面的动效制作。

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

.

• 课程重难点：

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

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

.

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

概况：1、照片在PS软件中大小的处理。

2、照片在软件中制作成影片剪辑元件，点击进去，添加圆形遮罩，照片转换成图片，制作旋转动画。

3、用图形工具绘制按钮，按钮的两种状态，未点击状态和移入后的状态。

4、界面文字的输入。

教学内容：

利用影片剪辑来控制声音

（一）导入声音素材

点击【文件】|【导入】|【导入到库】菜单命令，在弹出的【导入到库】对话框中，找到你要导入的声音文件，选中后点击打开按钮，将声音导入到库。

（二）制作声音影片剪辑元件：

（1）点击【插入】|【新建元件】菜单命令，在弹出的新建元件对话中，名称输入“声音”、行为选【影片剪辑】，确定。

（2）选中“图层1”的第1帧，打开属性面板，在声音设置的对话框中，选择你导入的声音件，并在同步选项中选择数据流。

（3）把声音文件在时间轴上展开。

（4）回到场景，把“声音”影片剪辑元件提到舞台，此时声音影片剪辑元件在舞台只看到一个注册点，用黑箭头工具点击注册点，（选中声音元件）打开属性面板，在属性面板中输入实例名“yinyue”。

（三）制作声音控制元件

（1）点击【插入】|【新建元件】菜单命令，在弹出的新建元件对话中，名称输入“播放和暂停”、行为选【影片剪辑】，确定。

（2）把“图层1”命名为“按钮”，在此图层的第1帧中，执行【窗口】|【其它面板】|【公共库】|【按钮】菜单命令。提进一个按钮，用来控制“播放”。

（3）给播放按钮添加命令：

on (release) {

gotoAndStop(3);

_root.yinyue.play();

}

（4）在按钮图层的第3帧中插入空白关键帧，在此空白关键帧中，执行【窗口】|【其它面板】|【公共库】|【按钮】菜单命令。提进一个按钮，用来控制“暂停”，并在第4帧中按F5插入普通帧。

（5）给暂停按钮添加命令：

on (release) {

gotoAndStop(1);

_root.yinyue.stop();

}

（5）添加图层二，命名为“AS”在“AS”图层的第2帧和第4帧分别输入命令：stop();此时的时间轴面板如图3所示：

（四）场景组装

（1）回到场景，从库里把“播放和暂停”元件提进舞台，放到适当的位置。选中“播放和暂停”元件，打开属性面板，在属性面板中输入实例名“yinyue”。

（2）在公用库中提入一个按钮用来控制“停止”，点击“停止”按钮，打开动作面板，添加命令：

on (release) {

_root.yinyue.gotoAndStop(1);

_root.play.gotoAndStop(1);

}

（3）添加图层二，在“图层二”的第1帧输入命令：_root.yinyue.stop();

观看视频讲解：

.

作业：

  参考以下图片，用按钮控制影片剪辑的方式控制音乐的播放和停止，同时控制动画的停止和播放。

图