电影海报场景教程

本教程将较全面的介绍如何制作“多个按钮点击切换显示图片/视频”的方法;这种形式经常被运用在杂志广告/宣传册/产品介绍等地方。

【准备】

本次案例的场景由三张按钮图片+三张显示图片+一个模型组成:

1、扫描到时显示三个按钮图片;

2、点击三个按钮图片,切换出现三张显示图片(同一时间只存在一张显示图片);

3、点击其中一张图片,将显示模型;

4、背景音乐持续播放。

【要点】

1、图片的切换由显示/隐藏交互功能来实现,显示和隐藏为两种不同的操作结果,所以同一个触发动作下的切换需要由两个交互功能来实现(一个显示,一个隐藏);

2、本教程中,需要展示的所有素材都不设置动态加载,以避免切换过程中的不流畅等问题;

3、本教程所使用的素材内容较多,可提前在“我的素材”页面下,将图片上传至素材库、以待使用;

4、背景音乐需要先作为素材添加,然后通过“音乐控制”功能来实现。

【新建项目】

登录云平台,创建一个新的项目(如已有项目,则此步骤跳过):

点击下方导航栏的【+】号,在弹出的项目信息页面输入相关信息:

项目封面图将出现在APP端的项目列表内,请尽量选择横版图片;点击保存,项目创建完成。

【新建场景】

在主页最上方有两个新建按钮,我们选择【编辑器新建】;

系统将自动跳转到编辑器的页面,首先需要输入场景的基本信息:

1)项目选择刚刚新建的项目;2)名字任意输入;3)上传一张图片作为识别图;

添加完成后,进入编辑器。

【编辑素材属性】

先上传图片素材:在左下方素材栏中找到图片,点击列表条内的【+】依次添加;

点击图片缩略图,将图片素材添加到编辑器页面上(识别图上);同理添加模型和音乐;通过旋转、缩放和移动按钮,或者对象属性栏的数值调整图片的位置和大小;修改对应素材名,以作区分(本例中,按钮图片名对应为“A、B、C”,其点击后出现的图片名对应为“A1、B1、C1”,模型名“model_1”)。

【添加交互功能】

素材全部上传完后,可以开始添加交互功能了。为了实现我们“图片点击切换”的目的,需要用到【显示/隐藏】的功能。

初始扫描图片时,先出现三张按钮图片(A,B,C),因而在左侧交互功能中选择【显示/隐藏】,功能设置对象为“A1,A2,A3,model_1”,触发时机为“扫描识别到”。

首先设置图片A1的交互:点击图片A1,出现模型、自动播放模型动画;在左侧交互功能中选择【显示/隐藏】,显示对象为模型model_1,隐藏对象为A1,触发时机为“A1被点击”

①model_1显示:

②A1隐藏:

之后设置图片的切换交互逻辑:“点击A,A1显示,B1/C1/model_1隐藏”

①A1显示:

②B1/C1/model_1隐藏:

同理,设置“点击B,A1/C1/model_1隐藏,B1显示”、“点击C,A1/B1/model_1隐藏,C1显示”的两组交互。

背景音乐播放,选择“音乐控制”交互:


最后,在右侧的功能列表和场景结构内检查展示信息和交互功能后;

点击【保存】,完成场景的创建。

左上角返回按钮,返回后台主页,即可查看项目二维码跟识别图,使用DarCreator APP可以查看最终效果。

【更多拓展】

1、对切换后的图片可以依需设置多种交互功能,需要注意的是,“打开网页”这种会跳转到外部浏览器的功能,在返回扫描后,将重新开始识别、不会和之前暂停的界面一样;