XXXX年3月27日制作交互式切换广告.docx

现在网站最流行的交互广告制作，无私奉出

2012年3月27日星期二
1.新建文件，设置文档的大小为“389*154像素”，帧频为25，背景色为#cccccc。

2.新建影片剪辑元件“pic1”，在场景中绘制一个大小为“389*154”的无笔触、填充色为白色的矩形。

3.新建影片剪辑元件“pic2”，在场景中绘制一个大小为“389*154”的无笔触、填充色为白色的矩形。

4.新建影片剪辑元件“mc”，将影片剪辑 “pic1”拖入场景中并覆盖场景，在“属性”面板中命名元件实例为“a”。

5.新建图层2，将元件“pic2”拖入场景中并覆盖场景，在“属性”面板中命名元件实例为“b”，在第10帧~第50帧插入关键帧，第10帧~第50帧之间创建动画补间动画。

6.选择图层2的第50帧中的元件实例，在“属性”面板中设置颜色模式为“Alpha”，值为0%。

7.切换到“滤镜”面板，为元件实例添加“模糊”，滤镜，设置滤镜参数如图所示。

8.新建按钮元件“cmd”，在“弹起”帧中绘制一个如图所示的灰色矩形，在“指针经过”帧插入关键帧后，将填充颜色更改为红色。

9.双击“库”面板中的“mc”元件图标进入编辑区，在图层2上方新建图层3、图层4、图层5，分别绘制一个白色到透明色的从左到右的线性渐变的矩形、创建4个“cmd”按钮元件实例以及输入静态文本。
（图层3中绘制矩形，图层4中创建元件实例，图层5中输入静态文本）
图层3中绘制矩形

在图层4上，把按钮“cmd”元件拖到图层3绘制的矩形中，分别为图层4的4个按钮设置实例名称，从左到右为“cmd1，cmd2，cmd3，cmd4”。

图层5中输入静态文本1/2/3/4

10.新建图层6，按F9打开“动作”面板，添加脚本语句“stop（）：”让动画停止，然后添加脚本，定义变量“i”和“j”。

定义对象“urlr”为URLRquest类对象，用于保存URL地址信息。

定义对象“loader1”和“loader2”为“loader”类对象，用于动态加载图片。

自定义函数“loadandplay()”，在函数过程中添加脚本，脚本在对象“loader1”中加载图片并显示图片。

在函数过程中加载入第一幅图片后，更改URL地址，在“loader2”对象中加载另一幅图片，并显示在场景中。

在函数末尾让动画跳转到第2帧播放，并将变量i的值赋给变量j，函数定义完后，调用函数“loadandplay();”。
为按钮元件实例“cmd1”添加鼠标指向事件帧听及事件响应函数，在函数中设置变量“i=1”，并调用函数“loadandplay();”。
为按钮元件实例“cmd2、cmd3、cmd4”添加鼠标指向事件帧听，在事件响应函数中赋值变量“i”为2、3、4，并调用函数“loadandplay();”。

总代码如下：
stop();
var i=1;
var j=2;
var urlr:URLRequest=new URLRequest();
var loader1:Loader=new Loader();
var loader2:Loader=new Loader();
function loadandplay() {
urlr.url="pic/"+i+".jpg";
loader1.load(urlr);
a.addChild(loader1);
urlr.url="pic/"+j+".jpg";
loader2.load(urlr);
b.addChild(loader2);
gotoAndPlay(2);
j=i;
}
loadandplay();
cmd1.addEventListener(MouseEvent.MOUSE_OVER,goto1);
function goto1(evt) {
i=1;
loadandplay();
}
cmd2.addEventListener(MouseEvent.MOUSE_OVER,goto2);
function goto2(evt) {
i=2;
loadandplay();
}
cmd3.addEventListener(MouseEvent.MOUSE_OVER,goto3);
function goto3(evt) {
i=3;
loadandplay();
}
cmd4.addEventListener(MouseEvent.MOUSE_OVER,goto4);
function goto4(evt) {
i=4;
loadandplay();
}

11.在个图层中的第90帧插入帧，并将图层6的第90帧转换为关键帧。

12.选择图层6的第90帧，打开“动作”面板，在其中添加脚本，让变量“i”自加，使动画中图片自动切换。

代码如下:
i++;
if (i>4) {
i=1;
}
loadandplay();
13.单击“场景1”标签，回到主场景，将影片剪辑元件“mc”拖动到场景中并居中对齐与场景。保存文件，将素材文件夹“pic”放置到源文件保存的位置，测试动画效果。