使用ChatGPT和Midjourney创作全新的Storyline测验模板!
目录
- 介绍
- 利用人工智能工具进行界面设计
- 使用Mid-Journey生成界面设计
- 创作Articulate Storyline中的问题界面
- 界面设计师的作用
- 利用人工智能进行奖励设计
- 使用Chat GPT编写JavaScript代码
- 制作自定义动画
- 使用Dali 2生成插图
- 制作与人物互动的场景
- 提升用户体验:随机显示不同的奖励效果
- 向AI询问随机显示多个图片的方法
- 在Articulate Storyline中实现随机效果
- 总结
- FAQ
介绍
近期,像Chat GPT和Dali这样的开放AI解决方案正在引起很大的关注。我对目前在Articulate Storyline开发过程中利用这些工具的能力很感兴趣,看看我们能否提高工作流程,无论是在视觉设计还是自定义交互编程方面,都能更高效地完成。对于这个项目,我的要求是在Articulate Storyline中创建一个新的选择题界面,并加入一些互动奖励页面,用户在通过测验后可以进入这个页面。我希望尽可能多地利用AI来完成这项工作,不仅包括界面设计任务,还包括我可能需要编写的任何代码。让我们看看如何完成这些任务。
利用人工智能工具进行界面设计
在目前的情况下,我们最好的AI工具用于生成用户界面概念艺术的是Mid-Journey。我之前看到最新的4版发布的不同示例中所展示的令人印象深刻的作品,因此我首先尝试使用Dali 2生成此类型的提示,但它们并没有给我想要的惊艳效果。
因此,我进入了Mid-Journey的免费测试服务器,要求AI为我的项目创建一个漂亮而简约的测验问题界面,这就是它给我的设计。这些设计看起来非常出色,当然我并不打算对我的测验使用自然主题,显然AI非常强烈地将美与自然关联在一起。因此,我细化了我的搜索要求,这一次我要求一个现代而简洁的用户界面,并提供我计划在项目中使用的配色方案。几秒钟后,它给出了这个结果。
现在,这些结果看起来非常酷和现代,四个选项中,我非常喜欢右下方的设计,因为Mid-Journey也为我们提供了一个可以用于显示正确答案的配色方案的想法。对我来说,如何在Articulate Storyline中重现这个设计是相当明显的,我们可以使用圆形渐变提交按钮,并使用这些圆形图标作为视觉提示,以示用户选择的答案。
经过在Articulate Storyline中的一些努力,我们的测验问题界面现在已经可以使用了。你可以看到这里的预览效果,我在预览中添加了一个滚动面板遮罩,以为答案选择添加了一些额外的动画。通过在幻灯片区域旁边放置Mid-Journey原始图像的副本,我可以轻松地提取出颜色配色的十六进制代码,总之,我完全可以看出Mid-Journey特别适合在Articulate Storyline项目中的界面设计过程中提供一些灵感,特别是因为它可能可以创建我们可能需要的其他类型的幻灯片布局。但在将仍然只是初步概念的设计转化为结构化且易于访问的产品方面,设计师的技能仍然是百分之百必要的。
现在,让我们考虑一下我们可以为通过测验的用户创建的奖励,这可能无法仅使用Articulate Storyline的设计工具来开发。
利用人工智能进行奖励设计
我对此的设想是,我们给用户一个可以通过点击屏幕任何部分来控制的烟花效果。为了在Storyline 360中实现这一点,我们需要编写自己的JavaScript函数,而AI可以帮助我们实现这一目标,因为Chat GPT的最新版本能够根据我们提出的问题提供完整的JavaScript代码。
首先,我请求Chat GPT为我编写一些代码,使得用户在点击鼠标时能够在他们点击的地方显示一张照片,并在三秒后消失。它提供的答案包含了我们所需的JavaScript函数,以及我们需要在项目的HTML文件的HTML窗口内部包含的一行HTML代码。为了测试这个答案,我已经设置了一个简单的HTML5项目,不在Articulate Storyline中,如你所见,它连接到一个外部的CSS和JavaScript文件中。让我们将代码复制粘贴到JS文件中,image标签粘贴到HTML文件中,并在与HTML文件中的document body中包含的第一个script标签下方添加,引用了一张烟花的照片,并将其放置在与代码中写的相同名称的根文件夹中。
现在,让我们在浏览器中加载它并查看结果。如你所见,我们已经取得了非常有希望的开始,此刻我立即想到的是,图像的确在我点击的地方生成了,但在左上角,而不是我希望的正中央。由于Chat GPT具有对话功能,我可以返回并提出进一步的问题,例如,如果我希望图像显示在用户点击鼠标的位置的中心,会怎么样呢?
Chat GPT已经更新了它最初给出的答案,添加了左边和顶部位置样式的更改,这意味着图像将出现在我点击的地方的正中心。让我们试试吧!
我对此结果非常满意。当然,我不只是想向用户显示一个静态的烟花照片,因此我接下来在After Effects中打开,并创建了这个简单的烟花爆炸动画。有很多在YouTube上可以学习类似操作的教程,但在这里我只是用了一个CC粒子世界图层,以一些鲜艳的蓝色颜色在屏幕上发生爆炸。我将其发布为一个动画GIF,并将其放入了项目文件夹以替换我的原始JPEG,并确保在HTML和JS文件中更新图像路径。此时,我还将body标签的背景颜色样式从白色改为黑色,以便我们能够更清楚地看到最终产品会是什么样子。
在这一点上,我还更改了在两秒超时后替换烟花的图像源而不是更改其显示值的方法,这是因为即使在它被隐藏时,动画GIF的时间线将继续播放。因此,下次显示时,它很可能不会从第一帧开始播放动画。为了解决这个问题,我们可以将图像源更改为其他内容,然后在单击事件发生时将其更改回来。因此,我创建了一个空的空白GIF文件,用于烟花不显示时更改。
我们还可以通过在点击事件中使用额外的if语句和开关来防止用户在上一个动画结束之前创建新的烟花。该开关将根据动画是否已经结束而切换打开或关闭。
此时,我开始思考如何在我的Articulate Storyline项目中将所有这些元素结合在一起。我需要一个新的幻灯片和一张夜空图片,这在Articulate的内容库中很容易找到。我想,将这个情景变成一些人仰望天空并观赏烟花的场景将会很酷。让我们看看我们是否可以再次使用AI来实现这个目标,在Photoshop中,我安装了来自Adobe Marketplace的Stability插件,它允许我连接到Dali 2的API,在Photoshop内执行我的工作。我会请求AI为我创作一个人们仰望夜空的矢量风格插图。
我对所收到的结果非常满意,在Photoshop中进行了一些进一步调整,就如我对我的Articulate Storyline项目想要的结果。现在,我认为在我的Articulate Storyline项目中,我希望确保烟花显示在用户点击夜空图像上时才会触发。对于常常观看我的视频的观众来说,他们会知道我们经常使用辅助功能alt文本值来执行此类任务,因为这是目前唯一一种我们可以为幻灯片对象分配自定义属性并在之后的JavaScript中进行引用的方法。因此,我回到了Chat GPT,并提出了另一个问题,即除了在浏览器窗口的任何地方单击之外,如果用户单击具有以下属性的div元素,会发生什么?我给出了具体的属性,就如在HTML代码中查看时写的那样。
Chat GPT能够更新它的答案,再次包括一个事件监听器,它针对我要求它寻找的带属性的图像。
现在,在Articulate Storyline中的执行JavaScript触发情况下添加了这个代码,到达这一步,我认为我们的小实验已经完全准备好了,所以让我们再次在浏览器中查看从开始到结尾的结果。
我对Chat GPT能够以最基本的指令来实现我们想要的任何目标感到非常印象深刻,特别是当我们开始包含特定于Articulate Storyline的指令时,例如我们在已发布的项目文件中生成的可访问性alt文本值。如果你对查看我们在本视频中创建的项目感兴趣,可以在Discover e-learning的网站上下载。
谢谢你的陪伴,希望很快能再次见到你,在另一个视频中。
FAQ
问题1:是否可以在Articulate Storyline中使用不同的图片生成随机的烟花效果?
是的,通过在代码中创建一个图片数组,并使用Chat GPT生成的JavaScript代码,在每次点击鼠标时随机选择数组中的一张图片。
问题2:我是否需要具备编程知识才能使用这些人工智能工具?
不需要具备编程知识。Chat GPT和Dali等工具旨在为非技术人员提供简单易用的界面,并生成所需的代码和图像。
问题3:我是否可以将生成的代码应用于其他项目?
是的,生成的代码可以应用于任何支持JavaScript的项目,只需稍作修改即可。
问题4:是否有其他人工智能工具可供尝试?
是的,市场上有许多其他人工智能工具可供尝试,这些工具可以根据您的需求生成设计、代码和其他创意元素。
问题5:我能否在我的Articulate Storyline项目中添加其他人物角色?
是的,您可以在您的项目中添加其他人物角色,只需向AI描述您想要的角色,然后使用生成的插图进行设计。
问题6:我如何确保生成的代码和设计元素符合版权法规定?
在使用AI工具生成设计元素和代码时,建议您查看每个工具的使用条款和权限,以确保您符合版权法规定。根据需要,您可能需要从合适的来源获得授权或版权许可。
问题7:人工智能工具是否适用于所有类型的Articulate Storyline项目?
是的,人工智能工具可以适用于各种类型的Articulate Storyline项目。无论您的项目是什么类型,这些工具都可以提供灵感和创意元素。
问题8:如果我对AI生成的设计不满意,是否可以进行修改?
是的,如果您对AI生成的设计结果不满意,您可以与工具的开发者进行交流,以获取更多的支持和修改建议。