Articulate Storyline精彩演示课件实例讲解Articulate Storyline 中文高级教程（一）变量，页面图层和triggers的设置为这个数学游戏课程增添了不少乐趣，该课程只有3个页面：一个介绍页面，12个选择题和一个结果页面，通过正确随机的问题来使猴子吃到香蕉。

下面我们将详细讲解该游戏课件的制作步骤。

演示课件下载地址：/share/home?uk=3792968303课件名称：猴子吃香蕉-九九乘法口诀游戏(数字2-5) 密码：见文p33.1.从题库中插入第一个选择题；2.对第一选择题进行背景层的制作；3.对第一个选择题进行字体、字号及其颜色、位置的调整；4.对选择题的反馈页面（正确页面、错误页面）进行设计；5.在第一个选择题中定义变量并插入变量，调整变量位置及其大小，同时设置幻灯片的属性；6.使用触发器向导建立触发器；7.复制10个这样的选择题；8.依次修改这10个选择题的问题，重新设置变量等；9.最后添加声音效果；10.设置猴子爬树的触发器；11.添加结果页面，添加触发器及图层；12.预视该选择题，测验其正确性并进行适当调整。

制作介绍页面首先然我们来浏览一下该课件的story view视图：在课件的story view视图中，可以看到课件只有一个场景，在这个场景中有三个幻灯片。

分别为：介绍、选择问题、结果三个幻灯片。

下面开始介绍页面的制作：1．首先建立一个400×600的幻灯片页面。

2.在建立的第一个幻灯片中置入三个图像：香蕉树图像及两幅猴子的图像。

图像1 图像2 图像3提示：a.图像的分辨率一般为72dpi即可，但要确保图像清晰、色彩饱和、颜色纯正。

b.图像的格式一般为PNG后缀的格式文件，使用PS （photoshop）软件处理图像时，要把图片（猴子）的底色去除掉使其变成透明背景，并保持图像的边缘清晰、光滑。

这样置入的图像才会实现透明背景的显示效果。

c.正确进行图像的编辑处理是保证画面质量优美的关键之一。

3.在置入图像后，我们便可以输入文本了。

可以根据要求来设计字体及其色彩，并给每一种文本设置必要的动画项。

设置后的效果如图：提示：1.在编辑文字时，为避免画面文字太多影响其编辑效果，可以在时间轴把暂时不需要的物件的眼睛图标关闭掉。

2．有时，通过文本框直接输入汉字时可能会输不上汉字，此时可以事先在记事本上输入需要的文字，然后拷贝该文字至storyline的文本框中，此做法将大大提高文字输入及编辑的速度。

4.当文本及其图像均置入幻灯片之后，我们再来进行幻灯片上物件出现先后顺序及时间长短的调整设置，这一步至为重要。

时间轴上的物件调整层次及出现的先后顺序如下图所示：第一画面从上述设置中可以看到，介绍页面分为两个连续的画面显示，实现此类效果我们可以进行时间上调整而达到。

这个过程需要反复调整已达到最佳显示效果。

介绍页面中的第一画面如图介绍页面中的第二画面如图提示：1.当介绍页面的音乐已经确定好后，可以先置入背景音乐，根据音乐的效果来调整物件在幻灯片上出现顺序及时间长短，以实现动画与音乐的同步，达到音频与视频的整体协调统一。

2.动画的执行时间长短也要进行适当的调整，动画的调整时间有五种速度选项。

（较快，快，中，慢，较慢）5.打开幻灯片的属性设置选择项；我们来设置该幻灯片的后期的播放导航设置为：只能进行“Next”的控制。

设置该选择项使得后期在发布课程后，在该幻灯片的导航按钮中只能出现“向后继续”按钮，而不会出现“向前返回”的按钮。

这是实现课程只能向前播放而不能后退的关键设置。

至此，介绍页面已经制作完成，制作完成后的页面可以预视其效果，反复预视多次并进行微小的调整，已达到最佳播放效果。

下面进行选择题的制作，也是本教程的重点内容。

制作选择题我们注意到，在该游戏课程中的数学小问题每次总是随机出现的，并没有固定的先后顺序，因此在制作选择题时，只能是选择从题库中插入选择题而不能在幻灯片独立制作。

为实现制作步骤的简明、高效，在制作选择题时，我们分这样几个步骤来进行：13.从题库中插入第一个选择题；14.对第一选择题进行背景层的制作；15.对第一个选择题进行字体、字号及其颜色、位置的调整；16.对选择题的反馈页面（正确页面、错误页面）进行设计；17.在第一个选择题中定义变量并插入变量，调整变量位置及其大小，同时设置幻灯片的属性；18.使用触发器向导建立触发器；19.复制10个这样的选择题；20.依次修改这10个选择题的问题，重新设置变量等；21.最后添加声音效果；22.在问题幻灯片的主层设置猴子爬树的触发器；23.预视该选择题，测验其正确性并进行适当调整。

下面，我们将按上述步骤进行详细的讲解：1. 从题库中插入第一个选择题；选择insert>New slide>Quizzing>Draw From Bank点击insert按钮后出现如下对话框；在上述选择题库中选择Click to View the question bank选项，在随后的画面中选择Graded题型的问答题；在出现的问题面板中选择单项选择题作为要插入的题型；在出现的单项选择问题面板中输入第一个选择题；在把第一个选择题保存并关闭后，进入了题库的面板中；双击该选择题，进入选择题普通视图下。

此时，在题库中仅有一个单项选择题。

双击该单项选择题，可进入该问题幻灯片中（也即普通视图模式下），此时可进行编辑处理幻灯中的物件了。

2.对第一选择题进行背景层的制作；在插入第一个选择题后，我们先不用急于调整选择题的字体、字号、颜色及其位置。

我们先着手进行第一个幻灯片的背景层的设置。

只有在背景层设置好之后，才能进行选择题字体、位置等的设置。

因为在该选择题库中将会添加12个选择题，但12个选择题所使用的背景通用，因此，我们使用主版页面来设置背景。

点击View选项卡，选择Slide Master,进入主版页中；打开主版页的示意图如下：此时的主版页面（一般选择其中的问题主版页）是空白页面（我们已事先删除了缺省的内容）；我们置入香蕉树、爬树状态的猴子、演示板面及其小鸟的图片。

通过图片置入按钮置入所需图片.此时的主版页面如下图所示（注意猴子的初始位置）：背景层设置后，从主版页返回到第一个选择题的幻灯片中（选择关闭主版页即可返回当前的幻灯片），3.对第一个选择题进行字体、字号及其颜色、位置的调整；在此幻灯片中来设置选择题的字体、字好、颜色及其位置。

并在相关区域添加相应的说明文字。

说明性的文本。

因为在后期要添加变量，因而留出适当空格在演示板中调整选择题的字体、字号、颜色及位置。

红色按钮代表正确的答案。

猴子的初始位置4．对选择题的反馈页面（正确页面、错误页面）进行设计；A.对正确反馈页面的设计时，首先要删除正确反馈页面中的所有缺省内容，因为当答案正确时，并不出现反馈的任何内容，因此答案正确时的反馈页面将没有任何画面内容。

虽然正确的反馈页面没有内容，但其正确反馈的触发器中有一些触发器需要建立：当正确反馈页面的时间轴结束时，进入下一个问题。

当正确反馈页面的时间轴开始时，给变量Variable1增加1。

(这是统计答对的题目)这两项表明：当正确反馈页面的时间轴开始时，计算变量Variable3=5- Variable1。

（还差答对几个问题就可完成任务）因为答对题目后，页面会马上发生跳转，因而正确页面的反馈时间轴很短，如图设置（约0.5秒）：在正确时间轴上有0.5秒的声音效果。

B. 对错误反馈页面的设计时，首先要删除错误反馈页面中的大部分缺省内容（可以保留“继续”按钮以便使用），因为当答案错误时，要出现反馈的内容此时需要编辑该反馈页面。

反馈页面的内容及设置如下图：1.黑色透明背景图的设置：（有动画设置体现慢慢变暗效果）此为t7.png的图片，注意文件的后缀。

要保持透明背景一般选用此格式。

该图也有进入时的动画效果。

以下就是错误图层中的一些内容。

2.“继续“按钮的触发器内容如右图所示：点击时隐藏错误页面反馈图层；并跳转到下一问题。

5. 在第一个选择题中定义变量并插入变量，调整变量位置及其大小，同时设置幻灯片的属性；此数值框中的数值为变量Variable1此数值框中的数值为变量Variable3此数值框中的数值为变量Variable2变量的初始值为：在该问题幻灯片的主图层上的触发器如下图所示：设置数值为Variable3设置数值为Variable2设置数值为Variable1当Variable1为5也即答对5个问题时，游戏结束。

（当点击提交按钮时）当Variable1不为5且可答问题为0时，游戏结束。

（当点击提交按钮时）变量Variable2减去1为剩余的问题个数。

（当点击提交按钮时）主图层的属性设置如下：回答问题时的一些设置：7.在问题幻灯片中复制这样12个选择题，并在每一个选择题中修改选择题，数值输入框的对应变量。

注意：再次访问该幻灯片的设置应选为“reset initial state”，这样再次打开该课件时的变量将会重新初始化，不会保留上次退出时的变量，避免出现统计时出现负数的情况。

必须回答问题后，才能执行“提交”命令。

回答问题时，只能有一次机会。

选择随机性，以使每次打开课件时的问题的顺序都不一样。

包含问题库中的所有12个问题。

复制12个选择题后，文本输入变量将会增加到36个变量。

需要对每一个变量重新设置数值。

（如同设置第一个选择题时的方法一样）设置爬树猴子的触发器，因为猴子实现爬树的动作同答对问题密切相关，每答对一题先上爬一节，因而猴子的爬树动作可在问题幻灯片的主层的模板中设置。

打开问题幻灯片的主层的模板：先来看一下猴子的状态设置：一共有六种状态，初始状态就是Normal状态，step1对应爬高一节后状态，step2对应爬高2节后状态；step3对应爬高3节后状态，step4对应爬高4节后状态；step5对应爬高5节后状态；猴子的初始位置。

上图为爬高1节后的状态效果；上图为爬高2节后的状态效果；如此等等6种状态的设置。

猴子的状态设置好后，就可以设置猴子实现状态改变的触发器了。

如果答对1个问题，改变猴子的状态为step1如果答对2个问题，改变猴子的状态为step2如果答对3个问题，改变猴子的状态为step3如果答对4个问题，改变猴子的状态为step4在问题幻灯片主层的模板中设置如上的触发器。

猴子的第5种状态可有可无。

该例中省略了第5种状态，因为实现第5种状态就完成任务并实现页面跳转了。

该触发器只能加载在主层的模板中，因为猴子实现爬树的动作同单个选择题是没有任何关系的。

只有答对题时才能实现爬高，而不管你答对了哪一道题目。

这是实现猴子爬树的关键。

问题幻灯片主层的模板总揽图如下：8.创建结果页面如下：主页面如下图：主图层面板触发器如下：如果变量Variable1为5，也即答对5个问题，跳转到图层2。