婚礼卡片教程

本次教程将和大家一起制作一个AR婚礼卡片,可以让亲朋好友们不用抱着重重的相册就能欣赏新人们的甜蜜合照,温馨又炫酷。


【准备】

本次案例的婚礼卡片场景由三张无交互的图片+一段透明视频+一段音乐视频组成:

1、扫描到即呈现第一张图片,点击图片即可切换到下一张,以此类推;

2、透明视频和音乐视频从头至尾循环播放。

展示效果可在APP的推荐项目名“RAVVAR”下扫描识别图进行查看。

【新建项目】

登录云平台,创建一个新的项目(如已有项目,则此步骤跳过;为什么要创建项目?);


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


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


【新建场景】

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


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

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

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


【编辑素材属性】

识别图将出现在三维编辑框的中心,右侧功能栏暂时无法操作;


先上传图片素材;小技巧:如果素材内容数量多,那么可以在主页【我的素材】下、先将内容全部上传完成;本教程中将由编辑器内部来上传:在左下方素材栏中找到图片,点击列表条内的【+】进行添加;

点击图片缩略图,将图片素材添加到编辑器页面上(识别图上);通过旋转、缩放和移动按钮,或者对象属性栏的数值调整图片的位置和大小(为了最后的呈现效果,最好将所有的图片素材都调整成一排);


同样的方法上传透明视频到用户素材库,调整视频位置和大小;上传音乐素材;


至此,本场景所需素材,就全部加载、调整完毕了。


【添加交互功能】  

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

初始扫描图片时,先出现图片image-1,另外两张图片image-2、image-3为隐藏,因而在左侧交互功能中选择【显示/隐藏】,触发时机为“扫描识别到” 


之后的交互逻辑为“点击image-1,image-1隐藏,image-2显示”

①image-1隐藏:


②image-2显示:

同理,设置“点击image-2,image-2隐藏,image-3显示”、“点击image-3,image-3隐藏,image-1显示”的两组交互。


设置两个视频的播放交互,需要用到【AR视频】功能(为了使视频播放的功能更流畅,可以设置成为“点击图片,播放视频”)。

①透明视频:

②背景音乐:


最后,在右侧的功能列表和场景结构内检查展示信息和交互功能后,点击【保存】,完成请柬场景的创建。


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


【场景查看】

场景在RAVVAR中的呈现效果,如下

【附:音频转视频方法】

使用“狸窝”并按照如下参数进行转换。