 |
 |
题 目:Flash广告播放器研发
很多网站都使用了swf格式的flash广告，如何让这些广告更有序的出现，网站建设者们都使用了flash广告播放器，其表现形式也很丰富，但里面所含的技术大同小异。Flash广告播放器播放的广告经常需要更换，因此，使用外部文档导入到广告播放器是一种可行的方法。这些外部文档包括swf、jpg等格式的广告文档、组织数据的xml文档和用来格式化文本的css文档等，这样，更换广告，改变文本的格式就变得很方便。：
准备播放器的素材
创建目录，用于保存相关文档，以播放jpg格式的图片为例，首先准备几张图片，统一放在一个名为"mypic"的目录下，分别命名为1.jpg到n.jpg。
编写外部数据文档
1、编写css文档，新建一个txt文档，输入播放器中的文本格式内容，如字体颜色等。如下所示：
.message{
color:#FFFFFF;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
}
将上面写好的文档保存，把文档名改为styles.css。
2、编写xml文档，新建一个txt文档，输入相关数据，如下所示：
<?xmlversion="1.0"encoding="gb2312"?>
<infobaseURL="mypic/"delayTime="8">
<picNameid="0"Name="pic1.jpg"><![CDATA[<ahref="http://www.macromedia.com"target="_blank"class="message">信息技术教育第1期</a>]]></picName>
<picNameid="1"Name="pic2.jpg"><![CDATA[<ahref="http://www.macromedia.com"target="_blank"class="message">信息技术教育第2期</a>]]></picName>
<picNameid="2"Name="pic3.jpg"><![CDATA[<ahref="http://www.macromedia.com"target="_blank"class="message">第3张图片</a>]]></picName>
<picNameid="3"Name="pic4.jpg"><![CDATA[<ahref="http://www.macromedia.com"target="_blank"class="message">第4张图片</a>]]></picName>
</info>
同样保存为myinfo.xml文档。
编写播放器的类库
播放器要载入多种外部文档，因此，编写自己的一个加载类库是一种好的解决方法，首先建立一个抽象加载类，定义属性、方法及事件，其他的具体加载类都继承此抽象加载类。
1、抽象加载类
importmx.utils.Delegate;
importmx.events.EventDispatcher;
classfc.load.AbstractLoad{
privatevardispatchEvent:Function;
publicvaraddEventListener:Function;
publicvarremoveEventListener:Function;
privatevarloadObject:Object;
privatevarloadID:Number;
functiongetBytesLoaded(){
returnloadObject.getBytesLoaded();
}
functiongetBytesTotal(){
returnloadObject.getBytesTotal();
}
privatefunctioncheckProgress(){
varperLoaded:Number=Math.floor(getBytesLoaded()/getBytesTotal()*100);
dispatchEvent({type:"onProgress",value:perLoaded});
endLoad(perLoaded);
}
privatefunctionstartLoad(){
EventDispatcher.initialize(this);
loadID=setInterval(Delegate.create(this,checkProgress),30);
dispatchEvent({type:"onProgress",value:0});
}
privatefunctionendLoad(perLoaded){
if(perLoaded>=100){
dispatchEvent({type:"onComplete",value:loadObject});
clearInterval(loadID);
}
}
}
2、加载xml的类
importfc.load.AbstractLoad;
importmx.utils.Delegate;
classfc.load.XmlextendsAbstractLoad{
privatevarloadObject:XML;
functionXml(){
loadObject=newXML();
loadObject.ignoreWhite=true;
System.useCodepage=true;
}
publicfunctionload(url:String){
loadObject.load(url);
startLoad();
}
}
3、加载css的类
importfc.load.AbstractLoad;
importmx.utils.Delegate;
classfc.load.CssextendsAbstractLoad{
privatevarloadObject:TextField.StyleSheet;
functionCss(){
loadObject=newTextField.StyleSheet();
}
publicfunctionload(url:String){
loadObject.load(url);
startLoad();
}
}
4、加载影片的类
importfc.load.AbstractLoad;
classfc.load.MovieextendsAbstractLoad{
privatevarloadObject:MovieClip;
functionMovie(mc){
//装载影片等的影片剪辑
loadObject=mc;
}
publicfunctionload(url:String){
loadObject.loadMovie(url);
startLoad();
}
publicfunctionunload(){
loadObject.unloadMovie();
}
}
5、编写loading类
classLoading{
var_path:MovieClip;
functionLoading(p){
_path=p;
}
functioncreate(value){
_path.createTextField("loading",_path.getNextHighestDepth(),0,0,0,0);
_path.loading.autoSize=true;
_path.loading.text="loading..." value "%";
_path.loading._x=(200-_path.loading._width)/2;
_path.loading._y=(233-_path.loading._height)/2;
}
functionclear(){
_path.loading.removeTextField();
}
}
制作广告播放器
图层介绍如下：
在"background"图层中，放置广告播放器的背景；
在"label"图层中，配置帧标签，方便帧的跳转；
在"as"图层中，放置相应的加载、播放代码等，主要包含四个空白关键帧，第2帧用于加载xml文档，并把其中的数据保存一个对象中。第10帧加载css文档，同样把信息保存在一个对象中，第20帧主要是和播放相关的代码，如载入广告文档，转换效果等。
2、编写加载xml文档的代码：
stop();
importfc.load.*
importmx.utils.Delegate;
varpic=newObject();
//保存图片信息的对象
varxmlData=newXml();
xmlData.load("myinfo.xml");
xmlData.addEventListener("onComplete",Delegate.create(this,loadComplete));
xmlData.addEventListener("onProgress",Delegate.create(this,loadPorgress));
functionloadComplete(obj){
varreadxml=obj.value.firstChild;
pic.path=readxml.attributes.baseURL;
//图片路径
pic.time=readxml.attributes.delayTime;
//图片延迟出现时间
pic.list=[];
for(vari=0;i<readxml.childNodes.length;i ){
pic.list[i]=newObject();
pic.list[i].id=readxml.childNodes[i].attributes.id;
//索引读取
pic.list[i].name=readxml.childNodes[i].attributes.Name;
//图片名读取
pic.list[i].info=readxml.childNodes[i].firstChild;
//文字信息
//trace(pic.path pic.list[i].name);
}
deletexmlData;
gotoAndPlay("css");
}
functionloadPorgress(obj){
//trace("loading");
}
3、编写加载css文档的代码
stop();
importfc.load.Css;
importmx.utils.Delegate;
varstyle=newObject();
varcssData:Css=newCss();
cssData.load("styles.css");
cssData.addEventListener("onComplete",Delegate.create(this,loadComplete));
cssData.addEventListener("onProgress",Delegate.create(this,loadPorgress));
functionloadComplete(obj){
style=obj.value;
gotoAndStop("pic");
deletecssData;
}
functionloadPorgress(obj){
//loading
}
4、编写载入广告等代码
stop();
importfc.load.Movie;
importmx.utils.Delegate;
importmx.transitions.*;
importmx.transitions.easing.*;
varmyTransitionManager:TransitionManager;
varindex:Number=0;
vartime:Number=0;
var_timeID:Number=0;
varalpha=10;
varshowText=true;
init();
//加载外部jpg文档
functioninit(){
varpicData:Movie=newMovie(this.createEmptyMovieClip("picmc",1));
picData.load(pic.path pic.list[index].name);
picData.addEventListener("onComplete",Delegate.create(this,loadComplete));
picData.addEventListener("onProgress",Delegate.create(this,loadPorgress));
}
//加载完成函数
functionloadComplete(obj){
picmc.onEnterFrame=function(){
if(this._width!=0){
deletethis.onEnterFrame;
//添加过渡效果
varmyTransitionManager:TransitionManager=newTransitionManager(picmc);
myTransitionManager.startTransition({type:PixelDissolve,direction:Transition.IN,duration:0.5,easing:None.easeNone,xSections:20,ySections:20});
varmyListener:Object=newObject();
myListener.allTransitionsInDone=function(eventObj:Object){
setText();
};
myTransitionManager.addEventListener("allTransitionsInDone",myListener);
}
};
}
functionloadPorgress(obj){
}
//配置广告说明文字
functionsetText(){
this.createEmptyMovieClip("textmc",2);
textmc.createEmptyMovieClip("mc",2);
createBg(textmc.mc,0,233,200,20);
textmc.createTextField("showInfo",1,0,0,0,0);
with(textmc){
showInfo.wordWrap=false;
showInfo.html=true;
showInfo.autoSize=true;
showInfo.styleSheet=style;
showInfo.htmlText=pic.list[index].info;
varstr=showInfo.text;
showInfo.text=str;
showInfo._x=(200-showInfo._width)/2;
showInfo._y=233;
}
this.createTextField("showTime",3,0,0,0,0);
showTime.autoSize=true;
showTime.text=pic.time "s";
_timeID=setInterval(this,"delayFunc",1000);
}
//文字背景
functioncreateBg(mc,sx,sy,w,h){
mc.beginFill(0x333333,40);
//mc.lineStyle(1);
mc.moveTo(sx,sy);
mc.lineTo(sx w,sy);
mc.lineTo(sx w,sy h);
mc.lineTo(sx,sy h);
mc.lineTo(sx,sy);
mc.endFill();
}
//每张广告展示的时间配置
functiondelayFunc(){
vartemptime=pic.time-time;
showTime.text=temptime "s";
if(time>=pic.time){
clearInterval(_timeID);
time=0;
//消失
varmyTransitionManager:TransitionManager=newTransitionManager(picmc);
myTransitionManager.startTransition({type:PixelDissolve,direction:Transition.OUT,duration:0.5,easing:None.easeNone,xSections:20,ySections:20});
varmyListener:Object=newObject();
myListener.allTransitionsOutDone=function(eventObj:Object){
index ;
if(index>=pic.list.length){
index=0;
}
init();
};
myTransitionManager.addEventListener("allTransitionsOutDone",myListener);
}
time ;
}本广告播放器使用自已编写的加载类，方便以后的加载操作。使用系统提供的过渡类，轻松制作多样的过渡效果。因此，研发项目时，假如能建立自己的类库，一定能事半功倍。