百变时钟

Director创意设计小制作 ­1 ­ 实验指导 1 1. 实 实验 验一 百 百变 变时 时钟 钟 一、实验目的 1. 掌握 Director 作品的开发步骤 2. 学习演员的导入和创建 3. 掌握剧本设置以及精灵属性的设置 4. 掌握行为库的使用，以及行为脚本和影片脚本的编写 5. 学会 Director 作品的发布

二、实验环境 1. Windows XP 2. Director MX 2004 简体中文或者英文版

三、实验内容及指导 本实验将制作一个可以整点报时的时钟，而且钟面具有换肤功能。通过本次实验，可以 使大家完整地了解 Director 电影（作品）的开发过程。实验中，不仅要导入现成的素材， 还要亲手绘制矢量图形（时分秒的指针）；进行剧本设置以及精灵属性的设置；同时要掌握 行为库的使用，并学习帧脚本、精灵脚本和影片脚本的编写；最后还要将作品发布出来。实 验最终运行效果如图所示：

图1 百变时钟运行效果 1. 准备演员

解析： 本实验需要导入一些现成的素材， 包括25张图片、 3个GIF动画。 另外， 还需要用Director 的矢量形状绘图工具绘制 3 个矢量演员，用作时针、分针和秒针。 参考步骤： （1）启动 Director MX 2004，执行“文件→新建→影片”命令，新建一个 Director 电影。执行“窗口→面板设置→default”命令，重置 Director的工作环境。 （2）执行“修改→影片→属性”命令，打开属性检查器中的“影片”选项卡，设置舞Director创意设计小制作 ­2 ­ 台大小为 200×200。 （3）执行“编辑→属性→精灵”命令，打开“精灵参数”对话框，设置精灵长度为 10 帧。 （4）单击演员表中的“演员表显示方式”按钮，切换到缩略图显示方式。

图2 以缩略图方式显示演员 （5）在演员表中单击要导入演员的位置，这里选择第 1 个演员位置。执行“文件→导

入”命令（或） ，打开“Import Files into Internal”对话框，同时选中25 张时 钟图片（ “clock1.png”～“clock25.png” ），采用“Standard Import”方式导入到演员表 中。在导入过程中会出现“Image Options”对话框，如图所示进行设置，单击“确定”按 钮将图片导入到演员表的第 1到第 25 号位置。

图3 批量导入图片素材 （6）右击演员表的第 28号位置，通过快捷菜单导入3 个 GIF 动画，在导入过程中会出

现“选择格式”对话框，如图所示进行设置，单击“确定”按钮将 GIF动画导入到演员表的 第 28 到第 30 号位置。

图4 导入GIF动画Director创意设计小制作 

­3 ­ （7）绘制时针：选择演员表的第 31 号位置，单击 Director 工具栏的“矢量绘图窗口” 按钮 ，进入矢量形状绘图窗口。利用钢笔、填充椭圆和颜色工具绘制红色的时针，首先 用钢笔工具画出封闭的菱形指针，再用填充椭圆工具画出圆形，并用光标（黑箭头）工具调 整指针和圆的位置，利用“中心点”工具设置时针的旋转中心（圆心处） ，在演员名称框中 命名矢量演员为“sz” 。如图所示。绘制完毕，关闭矢量形状绘图窗口，此时矢量演员“sz” 出现在演员表的第 31号位置处。

图5 绘制矢量图形（时针） （8）绘制分针：在演员表中右击刚创建的矢量演员“sz” ，执行快捷菜单中的“复制演

员”命令，右击演员表的第 32 号位置，执行“粘贴”命令，得到新的矢量演员。双击该新 演员， 进入矢量形状绘图窗口， 设置填充颜色为蓝色， 在演员名称框中命名矢量演员为 “fz” 。 关闭矢量形状绘图窗口，此时矢量演员“fz”出现在演员表的第 32 号位置处。 （9）绘制秒针：同理，在演员表第 33号位置创建黄色的秒针，命名为“mz” 。 此时，演员表内容如图所示：

图6 导入和创建演员后的演员表 2. 设置剧本

解析：Director创意设计小制作 ­4 ­ 剧本用来编排演员的出场时间以及它们在舞台上的先后顺序。 将演员表中的演员拖放到 剧本窗口的通道中以形成精灵， 所谓精灵就是演员在剧本中扮演的角色。通道号较小的精灵 位于舞台的后部，通道号较大的精灵位于舞台的前部。 提示：为了构建时钟外观，需要在剧本窗口的通道中，自上而下依次编排各精灵如下： 钟面、时针、分针、秒针。 参考步骤： （1）设置钟面：将演员表中的演员“clock25”拖放到剧本窗口第 1 通道的第 1 帧至第 10 帧处形成精灵，同时在舞台上显示该精灵。在剧本窗口中，单击选中该精灵的全体帧（不 能只选其中某一帧） ，在属性检查器面板中设置精灵属性如下： 中心点位置 X:100,Y:100；宽度 W:200,高度 H:200；墨水(Ink):Copy；混合度 (Blend):100% （2）设置时针：将演员表中的演员“sz”拖放到剧本窗口第 2 通道的第 1 帧至第 10 帧处形成精灵，同时在舞台上显示时针。在剧本窗口中，单击选中时针精灵的全体帧，在属 性检查器面板中设置精灵属性如下： 中心点位置 X:100,Y:100；宽度W:10,高度 H:55；墨水(Ink):Background Transparent； 混合度(Blend):100% （3）设置分针：将演员表中的演员“fz”拖放到剧本窗口第 3 通道的第 1 帧至第 10 帧处形成精灵，同时在舞台上显示分针。在剧本窗口中，单击选中分针精灵的全体帧，在属 性检查器面板中设置精灵属性如下： 中心点位置 X:100,Y:100；宽度W:10,高度 H:65；墨水(Ink):Background Transparent； 混合度(Blend):100% （4）设置秒针：将演员表中的演员“mz”拖放到剧本窗口第 4 通道的第 1 帧至第 10 帧处形成精灵，同时在舞台上显示秒针。在剧本窗口中，单击选中秒针精灵的全体帧，在属 性检查器面板中设置精灵属性如下： 中心点位置 X:100,Y:100；宽度W:10,高度 H:78；墨水(Ink):Background Transparent； 混合度(Blend):100% （5）设置报时动画：将演员表中的演员“bs1”拖放到剧本窗口第 6 通道的第 1 帧至第 10 帧处形成精灵。报时动画只有在整点才会出现，所以需要设置其初始状态为不可见。选 中精灵“bs1” ，在属性检查器面板中设置精灵属性如下： 中心点位置 X:100,Y:100；宽度 W:0,高度 H:0；墨水(Ink):Transparent；混合度 (Blend):100%。 剧本设置完成时的效果如图所示：

图7 剧本窗口 3. 添加交互

解析： 交互是多媒体作品的显著特征之一。Director 通过使用行为库、编制行为脚本和影片脚 本等方法来为作品添加交互。 参考步骤： （1）设置时针的行为：单击库面板的“库列表”按钮，从中选择“控件”行为库，如Director创意设计小制作 ­5 ­ 图所示：

图8 库面板的使用 将“控件”行为库中的“仿时钟”行为拖放到演员表的第 36 号位置，形成行为脚本演

员。将此行为演员“仿时钟”拖放到剧本窗口的精灵“sz”中，在随后弹出的行为参数设置 对话框中选择“Hour hand”项,为时针添加行为。如图所示：

图9 设置行为参数 （2）设置分针的行为：将演员表的行为演员“仿时钟”拖放到剧本窗口的精灵“fz”

中，在随后弹出的行为参数设置对话框中选择“Minute hand”项,为分针添加行为。 （3）设置秒针的行为：将演员表的行为演员“仿时钟”拖放到剧本窗口的精灵“mz” 中，在随后弹出的行为参数设置对话框中选择“Second hand”项,为秒针添加行为。 （4）编写钟面换肤的行为脚本：右击剧本或舞台中的钟面精灵“clock25” ，选择快捷 菜单中的“脚本”命令，在随后出现的脚本窗口中，编写脚本如下： on mouseUp me sprite(1).memberNum=random(25) sprite(1).width=200 sprite(1).height=200 end 在脚本窗口的演员名称框中输入“changeclock” ，创建此行为脚本演员。 （5）编写帧脚本：双击脚本通道第 10帧，在随后出现的脚本窗口中，编写脚本如下： on exitFrame me go the frame end 在脚本窗口的演员名称框中输入“gotheframe” ，创建此帧脚本演员。 （6）编写 startmovie事件的影片脚本：startmovie事件发生在电影预载入演员完毕准备 播放第 1 帧时，可以用来进行影片的初始化工作。选择演员表第 38 号演员位置（或其他空

闲的位置） ，单击工具栏中的“脚本窗口”按钮 ，在随后出现的影片脚本窗口中，编写脚 本如下：Director创意设计小制作 ­6 ­ on startmovie sprite(6).ink=1 ­­为第6号通道的精灵设置透明墨水效果 sprite(6).width=0 ­­第6号通道的精灵在初始时不可见 sprite(6).height=0 set the itemDelimiter to ":" ­­将字符串分隔符设为冒号，用于分离并获取时分秒信息 end 在脚本窗口的演员名称框中输入“startmovie” ，创建此影片脚本演员。 （7）编写 idle 事件的影片脚本：idle 事件在影片空闲时触发，常用来处理一些周期性 事务流程。选择演员表第 39 号演员位置（或其他空闲的位置） ，单击工具栏中的 “脚本窗口”

按钮 ，在随后出现的影片脚本窗口中，编写脚本如下： on idle if value(item 2 of the long time)=59 and value(item 3 of the long time)=59 then sprite(6).memberNum=random(3)+27 ­­随机选择用于整点报时的动画 end if if value(item 2 of the long time)=0 and value(item 3 of the long time)<=5 then sprite(6).width=100 ­­整点报时动画显示5秒 sprite(6).height=120 else sprite(6).width=0 ­­显示5秒后，报时动画消失 sprite(6).height=0 end if end 在脚本窗口的演员名称框中输入“idle” ，创建此影片脚本演员。 上述代码中使用了Director 系统变量 the long time，它能以“时:分:秒”形式返回当前的 系统时间。item 2 of the long time以字符串形式返回“分”的信息，通过函数 value的转换 变为数值，就可以与其他数值进行比较了。第 1 个 IF 语句的作用是，当时间到达 59 分 59 秒时，从演员表中序号为 28 到 30 的3 个动画演员中随机选择 1个用作整点报时动画。第2 个 IF 语句的作用是，整点报时动画持续5 秒，报时后自动消失。 经过上述操作后，剧本窗口以及演员表的内容如图所示：