基于增强现实技术的校园智能应用系统宣传片的制作

李文霞，司占军，白瑞丰

(天津科技大学包装与印刷工程学院，天津 300222)

0 引言

增强现实(Augmented Reality，AR)是在虚拟现实的基础上发展起来的新技术，将计算机生成的虚拟物体、场景叠加到真实场景中，从而实现对现实增强的目的［1-2］。产品宣传是当代经济发展、商品销售流通的重要环节。作为时代的产物，产品宣传片逐渐占据主流地位，通过在各种媒体上投放广告、参加展览会、在网络上播放等渠道，给客户以生动美观的视听感受。

应用增强现实技术的产品宣传不仅可以最大限度使人们了解产品功能和特性，而且在可交互的产品宣传上展现真实效果。如果将增强现实技术应用在不可交互的产品宣传片中，则可极大程度上构造出目前无法实现的物体和场景，以传达概念信息和未来感，是概念产品宣传展示的极佳方式，具有很大的商业空间和应用范围［3-4］。

以增强现实技术为效果实现工具，制作“校园智能应用系统”概念宣传片。运用增强现实技术中的无交互虚实叠加方法［5］，将构想出的未来校园智能应用系统的虚拟界面及动画场景，叠合在真实拍摄的场景中，达到模拟未来校园概念生活的目的，为观看者带来逼真的未来校园智能应用系统生活场景，以达到宣传未来概念系统，传达理念，展示企业形象和研发实力的作用。

1 实验部分

1.1 设计框架

整个设计思路框架如图1所示，首先编写宣传片剧情脚本，从学生早起、饮食、社交、图书馆借阅、班车候车、上课学习等双人多场景展现未来校园智能应用系统的功能，情景贴近真实生活，又具有未来概念之感。然后根据剧情脚本，设计各场景中出现的校园智能应用的界面样式，并构思功能动画样式。界面美观易懂，人性化十足，便于主角使用和观看者理解。再对现实场景通过定位拍摄方式进行拍摄，避免跟踪失败带来的真实场景与虚拟场景配合的不协调。最后将实景与制作的虚境分别合成，再整体合成一个多样式多方面的校园智能应用系统并发布成宣传片。

图1 设计框架图

1.2 开发环境

目前基于增强现实技术的产品宣传片的制作涉及的软件较多。在综合考虑目前成熟的各类技术实现方式以及开发成本和开发周期后，为保证实现过程简便易行，宣传片流畅且效果引人入胜，本次设计利用了美编功能强大的Adobe Photoshop和Adobe Illustrator软件建立起智能系统的平面设计样图;然后将分切模块导入动画效果实现好、操作简便、发布流畅、兼容性好的Adobe Flash中［6］，完成界面功能展现动画，与拍摄好的现实场景在Adobe Premiere Pro中相结合;3DS Max设计制作的三维系统界面与现实实际拍摄的场景相叠加，达到展现未来概念校园智能系统的效果。

1.3 设计思路

1.3.1 内容结构划分

该宣传片以未来校园生活为主体，每个画面都是学生们日常生活中的熟悉场景，但各场景中都出现了概念性的未来设计，如自动智能起床闹钟墙，可当作屏幕查看新闻、天气、课表等信息。剧情时间轴如图2所示。从主角起床开始，用一天的生活画面来展现智能应用系统的强大功能与便捷性。剧情经设计涉及信息获得、饮食点餐、图书查询与阅读、视频通话、教育教学等多方面。然后再根据各个场景所需内容，设计分剧本脚本，以虚拟场景与真实场景叠加的镜头作为主题内容，将剧情向之前和之后延伸，设计出连接剧情的镜头画面，这样以增强现实画面为内容主题，避免本末倒置。剧情前后延展，确保宣传片整体结构衔接流畅，节奏自然。

图2 剧情时间轴

1.3.2 前期准备

(1)准备具有良好录像功能和高像素的尼康D3200单反相机作为拍摄工具，为了固定拍摄以获得稳定影像便于编辑，准备好三脚架。

(2)虚实场景的叠加需要上层视频信号，部分颜色区域透明，采用绿幕键控透过的方式，购买大量绿色大幅纸张和充足胶带，以便布置绿幕。

(3)由于各环节设计与编辑需同时打开多个软件配合，所以选择高性能计算机，准备有AMD A8四核处理器、6G内存，以及2G独显以确保设计制作过程流畅。

(4)调试需要用到的软件，如3DS Max、Adobe Photoshop、Adobe Illustrator、Adobe Flash、Adobe Premiere Pro的导入、编辑、导出功能，确保软件运行正常。

1.4 产品宣传片制作

1.4.1 素材处理

打开Adobe Photoshop CS6对素材图片进行统一的大小处理，并调节图片颜色亮暗。选用“裁剪工具”将图片水印部分和大小不合适的部分裁切掉。需要注意的是，由于对图片直接进行曲线调亮会降低图像的质量，所以对所有图片选择无损失调亮的方法，将图片复制一层，将复制后的图层的图层选项设置为“滤色”，这样两张叠加在一起的图片显示的增亮效果就比直接曲线调亮更清晰，更自然。

制作中，由于Illustrator编辑的是矢量曲线文件，所以制作成虚拟场景动画时清晰度较高，而Photoshop存储的PNG格式图片在Illustrator中无法实现透明，默认为白色背景，十分不美观。故在对素材进行加工后，转移编辑软件时，需用Photoshop存储为PSB中间过渡格式文件。然后将PSB格式文件拖入Illustrator中便可实现透明效果，用于版面的设计编辑。

在制作虚拟场景时，视频素材段需要依照虚拟场景所需进行适当剪辑和格式转换，制作素材视频，导入格式工厂中，实现视频格式的转换。再对众多素材进行大小、明暗和格式的调整，把所有素材分虚拟场景分类进行整理，等待在Adobe Flash和Adobe Premiere Pro中进行设计及动态制作。

1.4.2 智能应用系统界面设计

(1)在Adobe Illustrator CS6中完成各界面的排版，应用切片工具，将版面各部分切片导出，整理在一个文件夹内待用。

(2)根据预先设计好的各界面工作动作，在Adobe Flash CS5中制作运动动画，确保各动画转换之间留有一至两秒的停顿。完成界面动画编辑后，生成SWF格式文件进行动画预览，根据各模块运动的效果和响应时间，再做微量调整。最后发布生成AVI格式影片，用于在Adobe Premiere Pro CS5中与真实场景合成。

(3)利用3DS Max制作汽车模型和汽车圆底平台，添加绿色背景，便于后期虚实场景合成时的背景去除。制作原地旋转动画，生成MOV格式视频文件待用［7-9］。

(4)根据分场景中设计的系统方案，设定界面尺寸和宽高比，在设计界面样式和动画变化的同时，记录界面中各模块的位置以及所占比例，用于之后拍摄阶段能够迅速找好定位点和触摸点，便于加强画面的真实性。同时界面动画变化动作之间需留有足够暂停时间，便于在后期合成叠加时有足够的剪辑空间来控制动画节奏，配合演员动作。

1.4.3 实景拍摄

选择阴天时拍摄外景，晴天强光无直射情况下拍摄室内镜头。在阴天拍摄外景不会产生过多的影子，以此增加虚实叠加时的真实感。由于虚拟系统界面多为浅色调，或是纯白色，为了避免虚拟场景与真实场景在叠加时的光线差距不大，所以尽量选择无直射强光角度进行实景拍摄。另一方面还要注意演员着装颜色要与幕布颜色明显区分，以便叠加时透过部分完好透明，避免透过有用视频信息［10］。

图3 绿幕铺设

按照预先设计的剧情脚本及分镜头脚本，在校园内进行拍摄，按照设计的尺寸在需要叠加的真实场景上贴上绿色纸张，在绿色纸张上用尺子划出网格划痕，便于演员定位虚拟场景中动画模块的位置。然后演员按照剧情脚本对绿色纸张进行虚拟操作，如图3所示。在演员对虚拟场景进行模拟操作之后，需要拍摄情节过度场景，重点把握拍摄时间，保证场景之间光线差距不大。

1.4.4 虚实叠合

虚拟场景界面及动画、实景场景拍摄完成后，将二者导入到Adobe Premiere Pro中进行剪辑与叠加，所应用的是软件视频特效中的“键控”特效。具体操作为演员在绿色或蓝色背景的演播室中表演，运用色键(Color Key)技术［11］，把演员的图像从绿色或蓝色背景中抠出来，然后实时地或在后期制作过程中把它与背景进行合成，形成全新的视觉效果。

(1)将Adobe Flash CS5生成的AVI格式文件、3DS Max生成的MOV格式文件、视频补充素材文件、图片文件、真实场景所拍摄的MOV格式文件导入Adobe Premiere Pro CS5素材库中，按照剧情脚本，将素材拖入时间轨道中，分配图层上下关系，导入背景音乐，进行分场景合成。

(2)将真实场景的视频文件置于上层，在视频特效中选择“键控”特效中的色度值，用吸管选取视频中绿色纸张位置的绿色部分，适当选取相似度，观察绿色通透程度，在色度键相似性为17%的设置下，调整该视频层下层的虚拟场景动画大小，使虚拟场景透过上层真实场景可见［11］。

(3)将“扭转”特效应用于位于下层的虚拟场景视频中，然后通过边角固定特效，对虚拟场景动画进行形状改变，以与真实场景透过的轮廓匹配。预览演员动作位置与模块动作起始终止位置是否一致，再做微调。

(4)主题宣传片分场景叠合成后，填补剧情过渡场景，增加转场效果、字幕以及片头片尾Flash，渲染调试整体宣传片的流畅性和影片美感［12］。如图4为合成后的部分效果图。至此，应用增强现实技术的“校园智能应用系统”产品宣传片制作完成，导出为当前主流视频格式MPEG、AVI、MOV、RMVB等。

图4 合成效果图

2 结果与分析

根据具体场景实际情况，选择配合对象，或将虚拟场景间隙时间拉长剪辑配合真实场景，或是拉长真实场景人物动作间隙配合虚拟界面内容，将每一帧都精确到最佳时机，配合背景音乐，最终完成了虚拟界面的设计制作、现场场景的拍摄以及虚拟场景叠合制作［13］。在设计与制作过程中遇到了很多问题，现对整个制作过程中遇到的主要问题、解决的方法和技巧做如下总结。

(1)Flash导出问题。

Adobe Flash CS5在导出时会出现Flash特效显示不全，甚至播放卡顿困难的现象［14］。经过反复尝试和查阅资料，重新对发布设置进行了修改，在ActionScript3.0高级设置中将默认连接修改为“合并到代码”，并在导出后，用格式工厂做了二次转码，最终解决特效失效和卡顿的问题。

(2)绿幕颜色与场景搭配问题。

色度键键控特效是通过抓取某颜色及其预支详尽色相的颜色，进行通透，也就意味着若想让透过的部分边缘完整平滑，拍摄时的绿幕和其他真实场景颜色区分很大，且绿幕铺制时边缘整齐。

3 结束语

利用增强现实技术制作产品宣传片是一项十分严密而又繁琐的工作，需要强大的模型、动画塑造制作技术和经验丰富、计算完善的拍摄技术［15］。本设计对增强现实产品宣传片进行了模拟与尝试，由于技术条件的限制，要真正实现增强现实技术在产品宣传中的应用还有很多工作要做。

(1)虚拟物体要脱离展现载体，比如脱离桌面、墙面、广告牌等已有载体，真正打造一个独立存在，并且可以独立运动的三维模型，同时具有更加美观的外形和符合物理运算规律的运动。

(2)现实场景有更加丰富的拍摄方式，应该有更多的视角和移动效果，不仅仅是静态定点定位拍摄，而是虚实叠加的镜头有拉远拉近，特写全景等丰富画面，这就需要计算精密的跟随技术和根据虚拟物体形象设置的准确拍摄角度，其背后的运算工作和经验积累还很多。

总而言之，当前是增强现实技术发展的高速阶段。随着网络和微计算机技术的成熟，增强现实技术在产品宣传上的应用必将普及。电视直播和展会展示对增强现实技术的应用在我国有很大的发展空间，同时产品宣传片的发展还将带动社会经济和人民生活水平的提高。

［1］吴帆，张亮.增强现实技术原理及其在电视中的应用［J］.电视技术，2013，37(2):40-43，47.

［2］柳祖国，李世其，李作清.增强现实技术的研究进展及应用［J］.系统仿真学报，2003，15(2):222-225.

［3］徐灵.增强现实广告技术的创新扩散研究［D］.长沙:湖南大学，2012.

［4］毕盈盈.混合现实技术在数字化产品展示设计中的应用［D］.杭州:中国美术学院，2012.

［5］黄有群，姬永成，李丹.基于ARToolKit工具的增强现实交互操作研究［J］.计算机与现代化，2008(9):97-100.

［6］胡海，赵育山，乔奇臻.Adobe Flash CS3 Professional标准培训教材［M］.北京:人民邮电出版社，2008.

［7］刘庆伟.基于VRML的虚拟校园研究与实现［D］.西安:西安建筑科技大学，2007.

［8］李芳，肖洪，杨波，等.三维数字校园的设计与实现［J］.系统仿真技术，2010，6(1):71-75.

［9］Hu Weihua，Ke Chuying，Wang Guorong.Research of virtual campus environment study using VRML［C］//Proceedings of the 1st International Conference on Technologies for E-Learning and Digital Entertainment.2006:581-584.

［10］Adobe公司.Adobe Premiere Pro CS5经典教程［M］.许伟民，袁鹏飞译.北京:人民邮电出版社，2011.

［11］李桐鹏，王文霞.色键技术与照明［J］.中国有线电视，2003(22):90-91.

［12］杜岳波.关于动画转场中形变艺术的研究［D］.北京:北京服装学院，2012.

［13］Iqbal M，Hashmi M S J.Design and analysis of a virtual factory layout［J］.Journal of Materials Processing Technology，2001，118(1-3):403-410.

［14］Adobe公司.Adobe Flash CS5中文版经典教程［M］.陈宗斌译.北京:人民邮电出版社，2010.

［15］姚皓韵，李培铣.论增强现实技术对电视视觉语言的丰富［J］.现代传播，2012，34(9):149-150.