0%

H5可玩广告制作之投机取巧篇

H5可玩广告作为广告创意界的新宠,点击率和转化率相对传统视频和图片广告来说高了不少,但同时其制作周期长、成本高的缺点也使得众多广告商对它又爱又恨。今天我们来介绍一种投机取巧快速制作H5广告的方法。

友情提醒:抄袭大法虽好,但也要尊重原创和版权哦。

我们都知道,H5可玩广告通常使用图片素材+js脚本的方式来实现,它的动画一般是使用简单的变形或序列帧或骨骼动画来实现。既然这样,对于简单的动画甚至是序列帧,我们是否可以提取出其中的图片素材来进行替换呢?

事实上,市面上已经有一些付费产品提供这种服务了。但既然原理如此简单,我们不如自己动手丰衣足食吧。

我在Appannie上找了一个使用简单动画的H5可玩广告:

我们通过浏览器的开发者工具获取这个广告的html代码:

将代码复制到编辑器里面,浏览一下,我们发现有很多以

1
data:image/png;base64

开头的代码。稍微对技术有所了解的同学应该知道,这其实是一张图片的base64编码,比如我的logo,用站长工具也能转换成相应的base64编码:

将第一段图片的base64编码放进来,还原成图片:

所以,我们不妨试着将这个现成的H5广告中的图片都扒出来看看:

接下来,用自己的图片的base64编码替换原有的图片的base64编码,我们就能获得自己的H5广告啦!

你也可以使用这个工具,更便捷地分析和替换图片。 为了网站安全,就不提供上传html文件进行替换的功能了。​ 演示如下: