1. 人物布局的设定

　　打开Articulate Storyline 3，新建一个项目。在“故事视图”状态，双击“无标题场景”幻灯片进入编辑窗口。选择“设计”选项卡，点击“文章大小”，在弹出窗口的“文章大小”处选择“自定义”，将“锁定纵横比”前面的勾选去掉，设定宽度为1400，高度为700，右击设置好它的背景。
　　利用“插入”选项卡中的“图片”，插入所需要的人物图片。全部选定图片，选择“格式”选项卡，点击“图片样式”中的示例设置好图片样式，将它们的大小调整一致，并在各自对应时间线上双击更改时间线名称，将时间线名称更改为对应的人物名称。将图片紧邻排列，利用对齐工具将图片顶端对齐（图2）。

2. 添加图层及设置动画

　　在窗口右侧幻灯片层处点击“新建层”，新层命名为“人物1介绍”，双击此图层，在弹出的窗口勾选“隐藏基础层中的对象”。切换到基础层，选中层中的所有图片，复制，再切换到新建的“人物1介绍”层，粘贴。在图片的右侧，画出一个矩形，调整好高度与图片等高，根据人物简介内容调整好宽度，设置好它的填充色及边框，置于底层，右击它，选择“编辑文本”，输入所需要的简介内容（图3）。
　　接下来，选定这个矩形，选择“动画”选项卡，点击“添加动作路径→线条”；再点击“路径选项→右侧”，利用鼠标拖动动画的起点（即绿色箭头）到图片的右侧，使图片将这个矩形遮挡；再拖动动画的终點（即红色箭头），使矩形与原矩形重合。这样，最右侧图片的简介动画就设置完成了（图4）。

　　接着，再新建图层，命名为“人物2介绍”，双击此图层，在弹出的窗口勾选“隐藏基础层中的对象”，将“人物1介绍”中的所有图片及矩形复制、粘贴到新建图层，删除原有动画；矩形移动到紧邻最右侧图片的左侧，在矩形中输入右数第二个人物的简介，将矩形与最右侧图片组合；选择“动画”选项卡，点击“添加动作路径→线条”，再点击“路径选项→右侧”，向右拖动动画的终点到合适位置。为了操作说明，将组合置于了顶层（实际应将其置于底层）（图5）。
　　再新建层，命名为“人物3介绍”，双击此图层，在弹出的窗口勾选“隐藏基础层中的对象”，将“人物2介绍”中的所有图片及矩形复制、粘贴到新建图层，删除原有动画及组合；将矩形移动到从右数第2张图片的左侧，在矩形中输入右数第三个人物的简介，将矩形与从右侧数两张图片组合；添加路径动画，方向向右，拖动动画的终点到合适位置（图6）。
　　同理，以此类推，新建图层，勾选“隐藏基础层中的对象”，粘贴图片，删除原有动画，移动矩形，输入简介，重新组合，插入动画，设置动画方向。具体步骤这里就不一一赘述了。

3. 添加互动效果

　　切换到基础层，选中最右边的图片，在窗口右侧的“触发器”面板，点击“新建触发器”，在弹出窗口的操作处选择“显示图层”，图层处选择“人物1介绍”。这样，当点击最右侧图片时，就会显示“人物1介绍”这个图层的图片及动画效果。同理，选择其他图片来设置需要显示的图层（图7）。
　　接下来，切换到其他图层，同样选定相应图片，新增显示图层的触发器，这样各个图层之间就能相互切换，从而显示不同人物的简介了（图8）。

4. 发布作品

　　点击“播放器”按钮，在弹出窗口的功能选项卡中，将资源、菜单之类的勾选全部去掉。最后，点击“发布”按钮，在弹出的窗口选择Web选项卡，输入标题，设置好发布文件夹，发布就可以了。