多图版互动式图片课件制作

软件先锋 2015-11-05 00:00网络整理点击: 标签:

小李想制作互动式《红楼梦之人物性格分析》幻灯片课件,课件分为开始界面和多图式内容界面。点击开始界面中的“开始”按钮,就会进入到内容界面。在内容幻灯片中,当鼠标悬停在图片上时,图片位置便会出现文本说明,同时幻灯片左边会出现详细文本解释。当点击图片时,图片放大;点击图片中的人物会弹出相应窗口。如果图片被点击过,会在文本说明上打上“√”(图1)。这样的互动效果在PPT中实现不容易,利用Articulate Storyline 2制作,就比较简单了。

1521A-DTHDKJ-1

1. 开始界面的制作

新建项目后双击无标题幻灯片,再插入一张空白幻灯片,设置好背景色。在第一张幻灯片中插入所需要的图片、文本、开始按钮及四个装饰性矩形,分别设置好它们的样式及进入、退出时的动画,这些操作和PPT中都是相类似的;在时间线上拖动调整对象的左、右两边,安排各对象出现的先后顺序;在时间线最上方合适位置右击,选择“在播放指针处创建时间点”,创建一个时间点。交互效果的设置需要新建3个触发器并按表1进行设置:

表1

表1

这样,开始界面幻灯片就编辑完成了(图2)。

1521A-DTHDKJ-2

小提示:

可在时间线上通过拖动来调整层次关系。

2. 制作主界面幻灯片

切换到第二张空白幻灯片,在它上面插入四幅人物合成图并调整好各自的位置;插入四个矩形,输入相应文字说明,调整矩形与各图片大小一致,并将每个矩形覆盖到各图片上,将各个矩形的初始状态设置为隐藏;插入四个互动对象处控件下的热点矩形,调整热点矩形与各图片大小一致,并将每个热点矩形覆盖到各文字矩形上;插入四个“√”图形,并将它们放置到热点矩形上的合适位置,也将它们的初始状态设置为隐藏,图层分别命名为标记1、标记2、标记3、标记4;在右侧点击底层图层处的新建图层按钮,增加4个图层,分别命名为十二金钗、各位公子、……在每个图层上利用文本框在幻灯片的左侧添加相应的详细文本解释(图3)。

1521A-DTHDKJ-3

在进行交互设计前,先切换到故事视图,新建一个场景,接下来再切换到“1.2无标题幻灯片”界面。点击右侧触发器处的“管理项目变量”按钮,新建4个变量,名称分别为m1、m2、m3、m4,类型均为“真/假判断题”,值均为“假”。

对于热点矩形的交互设置,我们以第1个热点矩形为例(选定它),需要新增3个触发器并按表2进行设置:

表2

表2

当然,其它热点矩形的交互设置与之类似。

不要选定任何对象,新增触发器,操作为更改状态,在对象上为矩形1,目标状态为正常,时间为时间轴开始,对象为1.2无标题幻灯片,点击“显示条件”按钮,新增条件,列表选“变量”,如果选“m1”,运算符选“==等于”,类型选“值”,值选“真”;当然,其它文本矩形、“√”图形的显示设置与之类似(图4)。

1521A-DTHDKJ-4

3. 制作分场景幻灯片

切换到故事视图,选择“2 无标题场景”,根据图片中的人物需要,插入若干张空白(用来显示图片中某个人物的性格分析)。双击“2.1无标题幻灯片”,插入与“1.2无标题幻灯片”中相同的四幅人物合成图并调整好各自的位置。以图片1为例,在图片1上所需人物的合适位置插入若干个热点矩形,在合适位置插入一个按钮,文本为“关闭”,插入一个矩形缩放区域,调整好大小,一定要将热点矩形、“关闭”按钮等包含其中,在时间线上调整每个对象出现的先后顺序并在时间线最上方合适位置创建一个时间点。

对于利用变量来控制文本矩形、“√”图形的显示及单个人物窗口显示设置需要新增4个触发器并按表3进行设置:

表3

表3

当然,其他的热点矩形的触发器设置与之类似(图5)。

1521A-DTHDKJ-5

对于用来显示人物性格分析的新插入空白幻灯片的编辑,以“2.2无标题幻灯片”为例,打开它,设置好背景颜色,在里面插入林黛玉图片及判词(图6)。

1521A-DTHDKJ-6

再建立其他图片对应的场景,场景里面幻灯片的设置与上述类似,在这里就不一一赘述了。

切换到故事视图,将场景1设置为启动场景,选择相应幻灯片,在右侧将幻灯片属性中导航控件中的勾选全部去掉。点击“播放器”按钮,在弹出窗口的功能选项卡中,将资源、菜单之类的勾选全部去掉。

最后,点击“发布”按钮进行发布就可以了。