flash四格广告[土豆背景广告]
一月 9, 2010 4 : 05 下午 此格有 42 个脚印
即时获得麻球游戏开发的最新消息，关注游戏开发者热门讨论，请各位开发者申请加入麻球官方群：121304476
也可以follow catfly围脖：t.sina.com.cn/iscat

这种四格广告需要实现如下功能：
1. 在xml文件中设定缩略图的广告位置，position＝0为随机位置，position＝1~4的数字，则指定为左，右，下左，下右位置；
2. 在xml文件中设定鼠标经过广告缩略图加载对应的大.swf广告，和对应的点击链接；

先看看这个四格广告的效果：

来分析下制作这个广告的关键点吧。

所有的广告信息都要读取xml文件中的数据，至于怎么加载xml文件和读取里面的数据，这里不介绍了，可以网上查一下，我别的文章中也有讲，xml是这样写的。


<tudouAD>
<ad position="0" swf="http://at-img4.tdimg.com/sales/material/2009/1217/1261049163572.swf" link="http://trace.t2cn.com/trace/trace.shtml?method=redirect&ad=3173&child=-1&digest=-611590182975335631"/>
<ad position="0" swf="http://at-img2.tdimg.com/sales/material/2009/1219/1261154841164.swf" link="http://adrs.sdo.com/ADRefererSystem/adjump.aspx?SndaADID=00-xc-td-1129-03&RedirectUrl=http%3a%2f%2fxc.sdo.com"/>
<ad position="0" swf="http://at-img4.tdimg.com/sales/material/2009/1217/1261049214586.swf" link="http://adrs.sdo.com/ADRefererSystem/adjump.aspx?SndaADID=09-83-08-ss-td-01&RedirectUrl=http%3a%2f%2fact.ss.sdo.com%2fproject%2f0802%2findex.htm"/>
<ad position="0" swf="http://at-img3.tdimg.com/sales/material/2009/1217/1261049239088.swf" link="http://www.shumenol.com/?stat=242248"/>
</tudouAD>

获得xml中的广告数据后，我们要根据其中的position值，来分成广告位置编号。也就是说要把1-4号广告分别安排了1-4号广告位置去。
这里有两种情况
1) 1-4号广告随机安排到1-4号中的某一个位置去
2) 1-4号广告全部或部分安排到指定的1-4号中的某个位置去

我这么实现的，来看看代码


//生成广告位置编号
//xml配置文件中的position值为>0的数值时，表示此广告为指定位置
//position值为0时，表示此广告为随机位置
private function creatPositionArr():void{
        for(var i:uint=0;i<xmlPositionArr.length;i++){
                if(xmlPositionArr[i]>0){
                        positionArr[i] = xmlPositionArr[i]-1;
                        dataArr.splice(dataArr.indexOf(positionArr[i]),1);
                }else{
                        var arrIndex:uint = Math.random()*dataArr.length;

                        positionArr[i] = dataArr[arrIndex];
                        dataArr.splice(arrIndex,1);
                }
        }
}

各广告有了位置编号后，就要按照各自的位置生成广告缩略图了，我这里通过两层循环来把广告编号对应到广告位置编号，代码如下。


//产生广告的小图
//根据广告位置编号记录，设置此号广告的小图到对应位置上去
private function creatThumb():void{
	for(var i:uint=0;i<positionArr.length;i++){
		for(var k:uint=0;k<positionArr.length;k++){
			if(i == positionArr[k]){
				//trace(k);
				swfNumArr.push(k);
				var adThumb:Sprite = new Sprite();
				var pic:Bitmap  = new Config.picClassArr[k]() as Bitmap;
				adThumb.addChild(pic);
				addChild(adThumb);
				adThumb.x = 5 + i%2 * 740;
				adThumb.y = int(i/2)* 225 + 5;
			}
		}
	}
}

成功生成广告缩略图后，再给它们填加鼠标经过和离开事件。


//添加鼠标经过广告小图事件，以及此事件对应的函数
//根据此广告位置上广告序号的记录加载与显示对应广告大swf
private function addThumbEvent(thumbMc:Sprite):void{
	for(var i:uint=0;i<thumbMc.numChildren;i++){
		var ch:Sprite = thumbMc.getChildAt(i) as Sprite;
		ch.buttonMode = true;
		ch.addEventListener(MouseEvent.MOUSE_OVER,thumbOver);
		ch.addEventListener(MouseEvent.MOUSE_OUT,thumbOut);
	}
}

当鼠标经过某一个广告缩图时，就加载并显示出它对应的大.swf文件。


private function thumbOver(e:MouseEvent):void{
	var ch:Sprite = e.target as Sprite;
	var chNum:Number = ch.parent.getChildIndex(ch);
	NowThumbNum = chNum;
	showSwfState = true;

       //隐藏上一个大.swf对象，记录当前大.swf对象
	hideSwfContent();
	var swfContent:Sprite = swfContentArr[chNum];
	nowSwfContent = swfContent;

	//得出鼠标经过的缩略图的广告序号，根据广告序号获得广告大swf地址
	var swfNum:Number = fourThumb.getSwfNumArr()[chNum];
	nowSwfNum = swfNum;
	var swfUrl:String = getADInfo.getAd(swfNum)["swf"];

	//如果广告大swf容器中没有子对象，即加载大swf文件，已经加载过不重复加载
	if(swfContent.numChildren < 1){
		//在每个大.swf对象下面垫一个黑色背景
                var contrentBg:Sprite = makeArea(Config.adWidth,Config.adHeight,1);
		swfContent.addChild(contrentBg);

		var loader:MovieLoader = new MovieLoader();
		loader.loadMovie(swfUrl);
		swfContent.addChild(loader);
		loader.contentLoaderInfo.addEventListener(Event.COMPLETE,swfLoadComplete)
		loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressHandler);
	}else{
		swfContent.visible = true;
		showSwf(NowThumbNum);

		loadMc.visible = false;
	}
}

既然有大.swf，那就也需要给它们添加鼠标经过与点击事件，而离开事件，我使用了MOUSE_LEAVE事件。
鼠标经过大.swf对象时，取消上一次mouseOver大.swf对象地未能执行完的动作，
点击则进行广告统计与跳转到广告链接页面，
MOUSE_LEAVE则返回四格缩略图画面。


addEventListener(Event.ADDED_TO_STAGE, addToStageFunc);
private function addToStageFunc(e:Event):void{
	//trace("ADDED_TO_STAGE");
	stage.addEventListener(Event.MOUSE_LEAVE,swfContentOut);
}

//产生所有广告大swf容器
//添加广告大swf容器上的鼠标经过与点击事件
private function creatSwfContent():void{
	for(var i:uint=0;i<fourThumb.getSwfNumArr().length;i++){
		var swfContent:Sprite = new Sprite();
		swfContentArr.push(swfContent);
		swfContentMc.addChild(swfContent);
		swfContent.buttonMode = true;
		swfContent.mouseChildren = false;
		//swfContent.addEventListener(MouseEvent.MOUSE_OUT,swfContentOut);

		swfContent.addEventListener(MouseEvent.MOUSE_OVER,swfContentOver);
		swfContent.addEventListener(MouseEvent.CLICK,swfContentClick);
	}
}

上面是这个四格广告的关键代码编写分析，完全的项目文件可以到这里下载

猫推拼盘
Category菜谱: Cat Flash【Flash日志】 tutorial【教程】 实战
Tag鱼片:

Leave a Reply