显示:
焦点图必然是一个动态的,所以我做的是用xml来保存图片信息,首先从外部来加载这个xml .
xml内容如下:
<?xml version="1.0" encoding="utf-8"?>
<jake length="4">
<image>
<imgurl>http://www.51as.com/img/1.jpg</imgurl>
<title>51as.com半岁了</title>
<url>http://www.51as.com/blog/xiaoming/200.html</url>
</image>
<image>
<imgurl>http://www.51as.com/img/2.jpg</imgurl>
<title>友吧一期优化完成</title>
<url>http://www.friends8.com/</url>
</image>
<image>
<imgurl>http://www.51as.com/img/3.jpg</imgurl>
<title>祝贺riabook全新上线</title>
<url>http://www.riabook.cn/</url>
</image>
<image>
<imgurl>http://www.51as.com/img/4.jpg</imgurl>
<title>感谢大家</title>
<url>http://www.51as.com/</url>
</image>
</jake>
加载xml 需要用到 URLLoader 如果你对URLLoader 不是很了解,可以现看看这篇文章 AS3教程与后台的交互
第一个类:document class
show.as
--------------------------------------------show.as 代码开始-----------------------
package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.IOErrorEvent;
import flash.events.SecurityErrorEvent;
import jake.PointIMG;
public class show extends Sprite
{
private var arrList:Array = new Array();
public function show():void
{
//xml地址
var xmlUrl:String = "http://www.51as.com/img/show.xml?d="+Math.random().toString();
//实例一个urlload对象来获得xml
var loadXML:URLLoader=new URLLoader();
var myRequest:URLRequest = new URLRequest(xmlUrl);
//加入事件监听
loadXML.addEventListener(Event.COMPLETE,loadComplete);
loadXML.addEventListener(IOErrorEvent.IO_ERROR,io_err);
loadXML.addEventListener(SecurityErrorEvent.SECURITY_ERROR,security_err);
//发送请求
loadXML.load(myRequest);
}
private function io_err(e:IOErrorEvent):void
{
trace("错误");
}
private function security_err(e:SecurityErrorEvent):void
{
trace("安全沙箱错误");
}
//成功接受到xml数据
private function loadComplete(e:Event):void
{
//将接受数据实例成一个xml
var strxml:XML =new XML( e.target.data) ;
//<jake length="4">
var max:int = strxml.@length ;
for(var i:int=0;i<max;i++)
{
/*<image>
<imgurl>http://www.51as.com/img/1.jpg</imgurl>
<title>51as.com半岁了</title>
<url>http://www.51as.com/blog/xiaoming/200.html</url>
</image>*/
arrList[i]={title:strxml.image[i].title,url:strxml.image[i].url,imgurl:strxml.image[i].imgurl}
}
//实例PointIMG对象
var pointimg:PointIMG = new PointIMG(this.arrList);
//加入到 display list
this.addChild(pointimg);
}
}
}
--------------------------------------------show.as 结束------------------------
PointIMG.as 焦点图的核心类,主要功能的实现都在里面
--------------------------------PointIMG 开始----------------------------
package jake
{
import flash.display.Sprite;
import flash.display.Loader;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.events.Event;
import flash.net.URLRequest;
import flash.events.MouseEvent;
import flash.external.*;
import flash.geom.Point;
import flash.utils.Timer;
import flash.events.TimerEvent;
public class PointIMG extends Sprite
{
//存放xml数据的数组
private var _arrlist:Array=new Array();
//初始化用到的一个计数变量
private var _count:int=0;
//存放Bitmap的数组
private var _arrBp:Array = new Array();
//当前显示的Bitmap对象
private var _Bp:Bitmap = new Bitmap();
//记录当前是第几张图片
private var _currentrul:int = 0;
//图片像素化的计时器
private var t:Timer = new Timer(100);
//图片轮换的计时器
private var c:Timer = new Timer(1000*5);
//图片像素化的百分比
private var _pt:Number=0;
//要变换的图片
private var _next:BitmapData;
//构造函数
public function PointIMG(arr:Array):void
{
this._arrlist = arr;
//载入图片
loadBitmap();
//给像素变换计时器加入监听
t.addEventListener(TimerEvent.TIMER,timerRun);
c.addEventListener(TimerEvent.TIMER,changeImg);
}
private function loadBitmap():void
{
var ld:Loader = new Loader();
ld.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
var req:URLRequest = new URLRequest(this._arrlist[this._count].imgurl);
ld.load(req);
}
private function completeHandler(e:Event):void {
var loader:Loader = Loader(e.target.loader);
var image:Bitmap = Bitmap(loader.content);
//把图片加入存放的数组
this._arrBp.push(image);
//建立一个按钮
this.cretaShow(this._count);
this._count++;
if(this._count<this._arrlist.length)
{
//继续加载下一张图片
this.loadBitmap();
}
else
{
//初始化一下轮换的计时器
c.start();
}
}
private function changeImg(e:TimerEvent):void
{
pixel(this._arrBp[++this._currentrul<this._arrBp.length?this._currentrul:(0,this._currentrul=0)]);
}
private function cretaShow(current:int):void
{
if(current==0)
{
var spbp:Sprite = new Sprite();
this._Bp =new Bitmap(this._arrBp[current].bitmapData.clone());
spbp.addChild(this._Bp);
spbp.buttonMode = true;
spbp.addEventListener(MouseEvent.CLICK,bpClick);
this.addChild(spbp);
}
var IB:ImgButton = new ImgButton(current);
IB.addEventListener(MouseEvent.CLICK,IBclick);
IB.x = stage.stageWidth-(30*(this._arrlist.length-current));
IB.y = 170;
IB.buttonMode = true;
this.addChild(IB);
}
private function bpClick(e:MouseEvent):void
{
trace(this._arrlist[this._currentrul].url);
flash.net.navigateToURL(new URLRequest(this._arrlist[this._currentrul].url),"_blank");
}
private function IBclick(e:MouseEvent):void
{
if(this._arrBp.length==this._arrlist.length)
{
pixel( this._arrBp[e.currentTarget.ButtonId] );
this._currentrul = e.currentTarget.ButtonId;
c.stop();
c.start();
}
}
private function pixel(n:Bitmap):void
{
_next = n.bitmapData.clone();
_pt=0
t.start();
}
private function timerRun(e:TimerEvent):void
{
var p:Point=new Point(0,0);
var n:Number = ((this._Bp.width*this._Bp.height)/100)*_pt;
_pt+=10;
this._Bp.bitmapData.pixelDissolve(this._next,this._Bp.bitmapData.rect,p,0,n);
if(n>=(this._Bp.width*this._Bp.height))
{
t.stop();
}
}
}
}
--------------------------------PointIMG 结束-----------------------------
ImgButton 这个类就是焦点图里的带有数字的按钮
-------------------------------------ImgButton 开始 ------------------------------
package jake
{
import flash.display.Sprite;
import flash.filters.*;
import flash.text.TextField;
import flash.text.TextFormat;
public class ImgButton extends Sprite
{
private var _Num:int;
public function ImgButton(buttonNum:int):void
{
var ds:DropShadowFilter = new DropShadowFilter();
this.filters=[ds];
this._Num = buttonNum;
this.graphics.lineStyle(0,0x000000);
this.graphics.beginFill(0xffffff);
this.graphics.drawRect(0,0,20,20);
this.graphics.endFill();
var tf:TextField = new TextField();
var tformat:TextFormat = new TextFormat();
tformat.bold = true;
tf.text = (this._Num+1).toString();
tf.defaultTextFormat = tformat;
tf.x=5;
tf.y=3;
tf.selectable =false;
this.addChild(tf);
}
public function get ButtonId():int
{
return this._Num;
}
}
}
-----------------------------------ImgButton 结束 ------------------------------------
我第一次写焦点图,开源出来希望对大家有帮助,更希望大家提出对代码的看法.这其实就是开源的意义,开放代码通过听取他人的建议并进行改善,所以开源是一种提高自己代码能力的极佳方式.对于我来说还有一点就是因为要把代码公之于众,所以代码不能随便,中国人好面子嘛,对自己也是一个好处:严格要求自己!
Flash焦点图教程这篇教程只是其中一个,下一篇将是用缓动来做一个缓动的焦点图,有兴趣请大家继续51as,如果对这篇教程有建议或者意见可以去我的blog留言
PS广告一下:希望更多的朋友来51as分享学习as的经验,51as的投稿功能我已经在开发ing, 但现在如果你看到一篇好的文章,或者是你自己写的学习经验或者教程,愿意拿到51as来分享滴话,请加我msn: as3@live.cn 或者邮件到这个地址也行!!51as的成长全仰仗大家了!!
[文章热度:]
上一页：AS3与后台交互
下一页：AS3最in的写法
