在近几年,广告行业新兴了一种更加有创意的广告模式Playable Ads。Playable广告是指一种可以让用户直接试玩产品的广告模式,引导用户参与到广告中设计的交互行为中,最终的展示形态类似于一个精简的H5小游戏页面。这种新型广告模式对用户有吸引力,点击率和下载转化率相比传统广告形式有大幅提高。短板是它在制作环节上是相对复杂的,通常需要程序员进行代码开发完成广告项目制作。本文设计与实现的Playable广告制作工具,可以让设计师直接编辑广告项目批量生产,从而释放程序员的开发人力。在搜集众多试玩广告线上真实案例后,本文总结出了试玩广告的共通性并尝试借此谋求一种解决方案实现高效的制作生产。在载体的选择上,不能选择高成本的H5游戏来开发制作广告项目,而是选择以视频为载体作为替代方案,以多个视频的切换来代表游戏剧情内多场景的切换。在广告内容方面,本文总结出了一种特定的树形数据结构来描述。可以理解为,一个完整的广告项目除了元数据外,内容由场景列表组成,场景的跳转即为游戏剧情的推动。每个场景内包含多个控件,例如操作按钮,视频背景等,这些控件都具有自身特殊的各种属性信息。以这样的容器、场景、控件组合的大致思路通过构建特定格式的描述数据来模拟出广告内容实现编辑功能,并且通过一套渲染算法解析项目的描述数据实现渲染,转化为最终的web页面展示形态。本系统可以划分成广告项目管理、广告内容制作、展示渲染、文件处理服务四个主要部分。用户项目管理是本系统的前置业务功能,用于为每个用户建立项目仓库,管理自己的Playable项目。广告内容编辑是本系统的核心模块,需要为用户提供在线编辑制作的能力,包括场景构建,场景内控件素材组织,多媒体设置和交互设置等。在用户编辑完成生成项目数据后,需要将数据解析成正确的展示情况和预期的交互效果,能够实时为用户提供成品效果预览且导出成可用项目。最后,对导出的项目要做合适的素材压缩,满足素材大小规模限制后上线投放。在前端展示和用户操作上,系统选择使用React框架完成工作台页面和广告内容渲染,另外为了方便数据结构的处理,在前端还添加了Type Script语言。前端处理完的广告数据通过HTTP请求发送给后端Node.js处理。在后端Node.js中集成了Koa框架实现HTTP的请求和响应,集成了Type ORM框架实现了和Mysql数据库的连接与存储。本文研究的Playable交互视频广告制作系统,大幅提高了Playable广告的制作效率和质量,降低复杂的互动广告的制作门槛和成本。最终让更多广告主可以尝试选择互动试玩广告的形式投放自己的产品广告,获得比传统广告形式更好的回报效果。