通过

了解这项简单的技术,以制作醒目的横幅广告,这些横幅广告从容器中跳出并进入网页。

在日益成熟的市场中,在线广告比以往任何时候都更能吸引网站访问者的注意力。近年来,由于Flash,从动画GIF标语迁移到Flash’出色的交互性,灵活性和高质量的图像再现。

尽管这有助于保持用户的兴趣和点击率,但随着用户变得不敏感,他们越来越难以通过广告参与。

脱颖而出的一种方法是打破常规:利用完整的浏览器窗口来吸引访问者,让您的广告设计摆脱旗帜的局限’s imagination.

在本教程中,我们’我们将研究如何实现这种效果,避免的陷阱以及如何将特殊广告部署到网页上。本教程基于的视频使用了iStockPhoto的图像;如果你’d想自己重新制作视频,可以从以下地方购买 http://tinyurl.com/67pjja。完成项目的演示版本(可以下载) 这里)可通过Web服务器而不是传统的Web浏览器工作。

01.打开网站模板(您可以下载该模板) 这里)在您的浏览器中–我使用Firefox,但是任何最新的浏览器都可以。您’ll see we’我们已经在顶部准备好容纳横幅广告的区域。这个模板非常基础,但是我们’在实践中将用它来测试和说明效果。

02.在HTML代码中,您’会看到一个div标签,可以将横幅广告代码粘贴到其中。该div绝对通过CSS定位,并显示在页面模板HTML中的内容之后。它’重要的是要掌握Z索引的规则以及Z空间中出现的位置部分地由代码年代决定。因此,标语代码位于末尾,以确保其位于所有其他内容之上。

03.打开Flash并创建一个新的ActionScript 2.0 Flash电影。将帧速率设置为30fps,然后将电影’的尺寸为860-x-524像素。

04.选择文件> Import >导入视频。找到FinalMovie。 mov文件,然后选择要导入的文件。单击继续以从部署选项列表中进行选择。我们’要在时间轴上嵌入视频,因此选择在SWF中嵌入视频并在时间轴上播放。

05.通过单击继续,在下一个屏幕上接受默认值。在下一个屏幕上,选择“视频”选项卡,并确保选中“编码Alpha”。视频已通过嵌入式Alpha通道保存以播放电影’背景透明;这对于使我们的内容显示在下面的网站上至关重要。单击继续,然后单击完成。

06.视频现在已嵌入时间轴中,但是’的位置不正确。将X和Y都设置为0,以使视频与画布对齐。选择控制>测试电影以获取效果的预览。您’会看到我们有一个标语大小的沙色盒子。照片从中生长出来,分成不同的平面,以3D方式移动,然后返回横幅。

07.最初,只有横幅对用户可见。在用户将鼠标移至横幅上方之前,我们需要阻止视频播放,因此让’s创建一个位于横幅上方的按钮,并监视该事件。单击“新建图层”按钮,然后使用“矩形”工具绘制一个覆盖横幅的矩形。

08.双击矩形,然后选择“修改”>转换为符号。选择“按钮”作为类型,并为其命名。双击新按钮,然后在时间轴中将关键帧添加到‘hit’通过选择它,然后按F6进入状态。选择‘up’状态,然后按Delete。返回主时间轴。

09.给您的按钮指定一个实例名称‘myBtn’通过单击它,然后键入‘myBtn’进入“属性”面板。添加一个新层并为其命名‘Actions’. We’重新添加将停止播放电影的代码,并将mouseover事件分配给按钮。

10.在“动作”图层的第1帧上,按F6键添加关键帧。再次选择第1帧,然后调出“动作”面板(窗口>动作)。在面板中输入以下代码:stop(); myBtn.onRollOver = function():Void {play(); };测试影片以检查鼠标悬停代码是否正常运行。

11.通过添加新层并插入文本和图形来修饰横幅区域。在这里,我们’将添加一个问题来迫使用户将鼠标移到广告上。完成后,我们’准备好在我们的网页上测试影片,因此保存文件,然后选择“文件”进行发布>发布设置。确保同时选中SWF和HTML,然后单击“发布”。

12.在HTML编辑器中,打开Flash生成的页面。复制标签内的内容,并将其粘贴到我们网站模板上的容器中。该模板已经在顶部包含了必需的AC_ RunActiveContent.js。保存模板,然后在浏览器中对其进行测试。

13.标语效果很好,但是由于它位于网页的顶部,因此会干扰导航栏。它’选择链接是不可能的。我们’将使用jQuery JavaScript库(请参见“提示框”)解决该问题,以减小横幅容器的大小,直到用户将其移到横幅上。在模板的开头部分键入以下代码:$(document).ready(function(){makeSmall();});函数makeBig(){$(“#bannercontainer”).css(“height”,”524px”); }函数makeSmall(){$(“#bannercontainer”).css(“height”,”65px”); }

14.我们需要让Flash触发makeBig函数’刚刚在视频开始播放时添加了,并在视频开始播放时添加了makeSmall函数’完成。通过按F6将关键帧添加到动作层的第2帧。在“动作”面板中键入以下代码:getURL(“javascript:makeBig();”);在影片的最后一帧中添加另一个关键帧,并添加以下代码:getURL(“javascript:makeSmall();”);

15.再次发布电影,这次您’当横幅广告未显示时,您会看到可以访问导航 ’t播放视频。要结束此项目,可以将click事件添加到我们在步骤08中创建的按钮。添加声音也将有助于吸引用户,尽管您应该提供“静音”按钮。

山姆·汉普顿·史密斯

WHO: With over ten years’Sam Hampton-Smith曾以印刷为基础的图形设计师和Web开发人员的经验,于2001年成立了设计工作室。Sam带着妻子和三个孩子住在苏格兰。除了担任专职设计师外,他还教图形学生,定期为杂志撰写和插图,特别是喜欢排版。
联系: http://hampton-smith.com
软件: Adobe Flash,Adobe Dreamweaver
完成时间: 2小时
 

下载项目文件

可以下载本教程的所有文件 这里 (需要注册)。

小费

jQuery是一个非常有用的JavaScript库,它允许以最少的编码将复杂的交互性添加到Web页面。查找有关其强大功能的更多信息,并从以下位置免费下载 http://jquery.com.

注意: 当您通过我们网站上的链接进行购买时,我们可能会赚取佣金,而无需您支付任何额外费用。这不会影响我们的编辑独立性。 了解更多.

继续阅读...