会员登录/控制面版您的位置: 首页 >> 网页制作 >> Flash >> 特别应用 >> Flash广告播放器开发

Flash广告播放器开发

阅览次数:
文章来源: zjs35blog
原文作者: zjs35
整理日期: 2006-03-27
发表评论

字体大小:
小
中
大

　　很多网站都使用了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文件，输入相关数据，如下所示：

<?xml version="1.0" encoding="gb2312"?>
<info baseURL="mypic/" delayTime="8">
<picName id="0" Name="pic1.jpg"><![CDATA[<a href="http://www.macromedia.com" target="_blank" class="message">信息技术教育第1期</a>]]></picName>
<picName id="1" Name="pic2.jpg"><![CDATA[<a href="http://www.macromedia.com" target="_blank" class="message">信息技术教育第2期</a>]]></picName>
<picName id="2" Name="pic3.jpg"><![CDATA[<a href="http://www.macromedia.com" target="_blank" class="message">第3张图片</a>]]></picName>
<picName id="3" Name="pic4.jpg"><![CDATA[<a href="http://www.macromedia.com" target="_blank" class="message">第4张图片</a>]]></picName>
</info>

　　同样保存为myinfo.xml文件。
编写播放器的类库
　　播放器要载入多种外部文件，因此，编写自己的一个加载类库是一种好的解决方法，首先建立一个抽象加载类，定义属性、方法及事件，其它的具体加载类都继承此抽象加载类。
1、抽象加载类

import mx.utils.Delegate;
import mx.events.EventDispatcher;
class fc.load.AbstractLoad {
  private var dispatchEvent:Function;
  public var addEventListener:Function;
  public var removeEventListener:Function;
  private var loadObject:Object;
  private var loadID:Number;
  function getBytesLoaded() {
    return loadObject.getBytesLoaded();
  }
  function getBytesTotal() {
    return loadObject.getBytesTotal();
  }
  private function checkProgress() {
    var perLoaded:Number = Math.floor(getBytesLoaded()/getBytesTotal()*100);
    dispatchEvent({type:"onProgress", value:perLoaded});
    endLoad(perLoaded);
  }

private function startLoad() {
    EventDispatcher.initialize(this);
    loadID = setInterval(Delegate.create(this, checkProgress), 30);
    dispatchEvent({type:"onProgress", value:0});
  }
  private function endLoad(perLoaded) {
    if (perLoaded>=100) {
      dispatchEvent({type:"onComplete", value:loadObject});
      clearInterval(loadID);
    }
  }
}

2、加载xml的类

import fc.load.AbstractLoad;
import mx.utils.Delegate;
class fc.load.Xml extends AbstractLoad {
  private var loadObject:XML;
  function Xml() {
    loadObject = new XML();
    loadObject.ignoreWhite = true;
    System.useCodepage = true;
  }
  public function load(url:String) {
    loadObject.load(url);
    startLoad();
  }
}

3、加载css的类

import fc.load.AbstractLoad;
import mx.utils.Delegate;
class fc.load.Css extends AbstractLoad {
  private var loadObject:TextField.StyleSheet;
  function Css() {
    loadObject = new TextField.StyleSheet();
  }
  public function load(url:String) {
    loadObject.load(url);
    startLoad();
  }
}

4、加载影片的类

import fc.load.AbstractLoad;
class fc.load.Movie extends AbstractLoad {
  private var loadObject:MovieClip;
  function Movie(mc) {
    //装载影片等的影片剪辑
    loadObject = mc;
  }
  public function load(url:String) {
    loadObject.loadMovie(url);
    startLoad();
  }
  public function unload() {
    loadObject.unloadMovie();
  }
}

5、编写loading类

class Loading {
  var _path:MovieClip;
  function Loading(p) {
    _path = p;
  }
  function create(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;
  }
  function clear() {
    _path.loading.removeTextField();
  }
}

制作广告播放器
　　图层介绍如下：
　　在"background"图层中，放置广告播放器的背景；
　　在"label"图层中，设置帧标签，方便帧的跳转；
　　在"as"图层中，放置相应的加载、播放代码等，主要包含四个空白关键帧，第2帧用于加载xml文件，并把其中的数据保存一个对象中。第10帧加载css文件，同样把信息保存在一个对象中，第20帧主要是与播放相关的代码，如载入广告文件，切换效果等。
2、编写加载xml文件的代码：

stop();
import fc.load.*
import mx.utils.Delegate;
var pic = new Object();
//保存图片信息的对象
var xmlData = new Xml();
xmlData.load("myinfo.xml");
xmlData.addEventListener("onComplete", Delegate.create(this, loadComplete));
xmlData.addEventListener("onProgress", Delegate.create(this, loadPorgress));
function loadComplete(obj) {
  var readxml = obj.value.firstChild;
  pic.path = readxml.attributes.baseURL;
  //图片路径
  pic.time = readxml.attributes.delayTime;
  //图片延迟出现时间
  pic.list = [];
  for (var i = 0; i<readxml.childNodes.length; i++) {
    pic.list[i] = new Object();
    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);
  }
  delete xmlData;
  gotoAndPlay("css");
}
function loadPorgress(obj) {
  //trace("loading");
}

3、编写加载css文件的代码

stop();
import fc.load.Css;
import mx.utils.Delegate;
var style = new Object();
var cssData:Css = new Css();
cssData.load("styles.css");
cssData.addEventListener("onComplete", Delegate.create(this, loadComplete));
cssData.addEventListener("onProgress", Delegate.create(this, loadPorgress));
function loadComplete(obj) {
  style = obj.value;
  gotoAndStop("pic");
  delete cssData;
}
function loadPorgress(obj) {
  //loading
}
4、编写载入广告等代码
stop();
import fc.load.Movie;
import mx.utils.Delegate;
import mx.transitions.*;
import mx.transitions.easing.*;
var myTransitionManager:TransitionManager;
var index:Number = 0;
var time:Number = 0;
var _timeID:Number = 0;
var alpha = 10;
var showText = true;
init();
//加载外部jpg文件
function init() {
  var picData:Movie = new Movie(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));
}
//加载完成函数
function loadComplete(obj) {
  picmc.onEnterFrame = function() {
    if (this._width != 0) {
      delete this.onEnterFrame;
//添加过渡效果
      var myTransitionManager:TransitionManager = new TransitionManager(picmc);
      myTransitionManager.startTransition({type:PixelDissolve, direction:Transition.IN, duration:0.5, easing:None.easeNone, xSections:20, ySections:20});
      var myListener:Object = new Object();
      myListener.allTransitionsInDone = function(eventObj:Object) {
        setText();
      };
      myTransitionManager.addEventListener("allTransitionsInDone", myListener);
    }
  };
}
function loadPorgress(obj) {
}
//设置广告说明文字
function setText() {
  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;
    var str = 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);
}
//文字背景
function createBg(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();
}
//每张广告展示的时间设置
function delayFunc() {
  var temptime = pic.time-time;
  showTime.text = temptime+"s";
  if (time>=pic.time) {
    clearInterval(_timeID);
    time = 0;
    //消失
    var myTransitionManager:TransitionManager = new TransitionManager(picmc);
    myTransitionManager.startTransition({type:PixelDissolve, direction:Transition.OUT, duration:0.5, easing:None.easeNone, xSections:20, ySections:20});
    var myListener:Object = new Object();
    myListener.allTransitionsOutDone = function(eventObj:Object) {
      index++;
      if (index>=pic.list.length) {
        index = 0;
      }
      init();
    };
    myTransitionManager.addEventListener("allTransitionsOutDone", myListener);
  }
  time++;
}

　　本广告播放器使用自已编写的加载类，方便以后的加载操作。使用系统提供的过渡类，轻松制作多样的过渡效果。因此，开发项目时，如果能建立自己的类库，一定能事半功倍。

上一篇:深入理解sizeof
下一篇:Photoshop调色，制作阿宝色彩的练习

相关文章

热点文章

Flash广告播放器开发