Flash广告播放器开发与应用
时间：2010-11-16 来源：ayan2006
很多网站都使用了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++;
} 本广告播放器使用自已编写的加载类，方便以后的加载操作。使用系统提供的过渡类，轻松制作多样的过渡效果。因此，开发项目时，如果能建立自己的类库，一定能事半功倍。 极酷SevenColorPlayer网页播放器(炫彩广告版) http://www.89525.net/FlvPlayer/SevenColorPlayer/
准备播放器的素材
创建目录，用于保存相关文件，以播放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++;
} 本广告播放器使用自已编写的加载类，方便以后的加载操作。使用系统提供的过渡类，轻松制作多样的过渡效果。因此，开发项目时，如果能建立自己的类库，一定能事半功倍。 极酷SevenColorPlayer网页播放器(炫彩广告版) http://www.89525.net/FlvPlayer/SevenColorPlayer/
功能说明:
* 2010-11-11 新增功能：支持自行开启或关闭前置flash广告，支持自行开启或关闭视频广告，支持自行开启或关闭暂停广告，支持自行开启或关闭文字广告；
* 2010-11-11 新增功能：支持自定义倒计时时间值；
* 2010-11-11 新增功能：支持分享模式 [即： 复制视频地址 / 复制论坛代码 / 复制网页代码]； [演示]
1. 这是一款强憾的播放器，支持前置flash广告，支持视频广告，支持暂停广告，同时也支持文字广告；
2. 支持开启或关闭视频广告、暂停广告功能； 支持自动播放或点击播放；
3. 支持显示视频文字说明信息；
4. 支持flv,mp4,mov视频格式播放；
5. 进度条色彩可换，含蓝色，橙色，绿色，红色等；
6. 支持跨域名调用Flv视频文件；
7. 播放器文件本身大小40Kb左右；
8. 支持LOGO图标显示或隐藏；
9. 支持全屏播放；
10.视频文件自适应播放器大小；
11.播放器大小自由设置；
12.可与ASP/PHP/JSP/.net完美结合，实现播放器调用调用数据库中的视频地址。
相关阅读 更多 +
排行榜 更多 +
