XML+MovieClipLoader实现多图动态载入添加分页
21视频教程网3月28日整理
第六章 works.swf
这个又是一个难点,其中包括缓冲菜单的制作
下面先看下预览图:
这个是works.swf刚加载完成时的效果,左边是一个缓冲菜单。
这个是选择了菜单中某个栏目后,加载相应的XML,并把数据显示在右侧上。
这个是选择右侧某个按钮后加载相应图片的效果。
好了,开始说制作方法。
由于面板展开效果和前面的类似,所以不说了,先说左侧缓冲菜单的制作方法吧。
1> 缓冲菜单menu_mc
先用文字工具写出菜单项,做一个隐形按钮,在每个菜单项上放一个,命名为menu1_btn,menu2_btn,....menu4_btn。再做一个Alpha为30%#FFFFFF的园角矩形,和隐形按钮大小一致,并转为menuover_mc,然后再menu_mc第一帧中写代码:
var speed:Number=0; //定义speed变量
menuover_mc.onEnterFrame=function(){
this._y+=(speed-this._y)/3; //这是缓动公式,speed就是最终的目标值
}
menu1_btn.onRollOver=function(){ //根据每个隐形按钮的y坐标定义speed的值
speed=0;
}
menu2_btn.onRollOver=function(){
speed=21;
}
menu3_btn.onRollOver=function(){
speed=42;
}
menu4_btn.onRollOver=function(){
speed=63;
}
2> 其他部分的制作
选择左侧的栏目后,右侧会根据该栏目下的数量attachMovie相应数量的pic_mc,每个pic_mc里有个动态文本picnum_txt显示其ID值,这部分和音乐播放器中的很相似。
XML文件结构相似,都如下:
<?xml version="1.0" encoding="UTF-8"?>
<graphics>
<item url="pic\444713327.jpg" />
<item url="pic\444713825.jpg" />
</graphics>
AS代码如下:
stop();
loading_mc._visible=false; //这个loading和以前做的是一样的,用来加载图片或swf的
var works_xml=new XML();
works_xml.ignoreWhite=true;
menu_mc.menu1_btn.onRelease=function(){ //这下面是定义左侧导航菜单的onRelease事件
works_xml.onLoad=function(success){
if(success){
imageparse();
}
}
works_xml.load("xml/photo.xml");
}
menu_mc.menu2_btn.onRelease=function(){
works_xml.onLoad=function(success){
if(success){
imageparse();
}
}
works_xml.load("xml/website.xml");
}
menu_mc.menu3_btn.onRelease=function(){
works_xml.onLoad=function(success){
if(success){
imageparse();
}
}
works_xml.load("xml/graphics.xml");
}
menu_mc.menu4_btn.onRelease=function(){
works_xml.onLoad=function(success){
if(success){
imageparse();
}
}
works_xml.load("xml/flash.xml");
}
//
function imageparse(){ //自定义函数imageparse()
var j=0;
while(this["pic"+j]!=undefined){ //这个是删除前一个栏目所留下的pic1......
this["pic"+j].removeMovieClip();
j++;
}
var e=works_xml.firstChild.childNodes;
var count=e.length;
for(var i=0;i<count;i++){
var mypic=this.attachMovie("pic_mc","pic"+i,this.getNextHighestDepth());
mypic.url=e[i].attributes.url;
mypic._x=547+23.3*(i%5); //为每个mypic定义坐标
mypic._y=60+23.3*int(i/5);
mypic.picnum_txt.text=(i<9)?("0"+(i+1)).toString()i+1);
mypic.picnum_btn.onRelease=function(){ //定义onRelease事件
showimage(this._parent.url); //调用函数showimage(...)
}
}
}
//
function showimage(url){ //自定义函数showimage()
if(image_mc!=undefined){ //删除前一个image_mc
image_mcl.unloadClip(image_mc);
}
var image_mcl=new MovieClipLoader(); //下面的代码和第一章中的相似,不再解释
var mcllistener=new Object();
var image_mc=this.createEmptyMovieClip("image_mc", this.getNextHighestDepth());
mcllistener.onLoadStart=function(){
loading_mc._visible=true;
loading_mc.loading_txt.text="00.00";
}
mcllistener.onLoadProgress=function(target, bytesLoaded, bytesTotal){
var loaded=100*bytesLoaded/bytesTotal;
loading_mc.loading_txt.text=loaded.toString().slice(0,5);
loading_mc.loading_txt._y=50-loaded/2;
}
mcllistener.onLoadComplete=function(){
loading_mc._visible=false;
}
mcllistener.onLoadInit = function(target){
target._width=410;
target._height=300;
target._x=100;
target._y=40;
}
image_mcl.addListener(mcllistener);
image_mcl.loadClip(url,image_mc);
}
第七章 contact.swf
这是一个功能很少的留言功能,使用Flash+ASP+Access,网上很多功能齐全的Flash留言本,所以我不详细介绍了,只简单说下Flash与ASP通信的问题:
Flash向ASP传递变量通过LoadVars类,ASP端通过Request.Form("变量名")或Request.QueryString ("变量名")来接收变量,前者是flash端以post的方式发送,后者是以get方式发送,区别可以找看帮助文档。
比如我的提交留言按钮是ok_btn,则代码如下:
ok_btn.onRelease=function(){
var my_lv=new LoadVars();
my_lv.title=title_mc.input_txt.text;
my_lv.name=name_mc.input_txt.text;
my_lv.content=word_mc.word_txt.text;
my_lv.onLoad=function(success){
gotoAndStop(2);
if(success){
if(my_lv.returnword=="ok"){
returnword_txt.text="thank you for your word!";
}else{
returnword_txt.text="sorry, connect database error!";
}
}else{
returnword_txt.text="sorry, pages error!";
}
}
my_lv.sendAndLoad("leaveword.asp",my_lv,"post");
}
Tips:在使用LoadVars类时即使只需send也用sendAndLoad方法。另外很多人在做这方面的东西时,按Ctrl+Enter却看不到效果,很简单,因为asp页面没有被解释执行,所以要在flash中测试的话,需写服务器脚本页面的全称,比如这个就应该写"http://127.0.0.1/leaveword.asp"。
第八章 总结
写完了总是要总结下的,这篇教程写的很简略,大家可以对着源文件看,写的太详细的话,估计没几十张纸都写不来。
其实这个网站有很多可以改进和需要改进的地方,不过因为考研的原因,还是等考完后再继续完善吧。
我是一个喜欢分享的人,我会把我所知道的东西和大家分享,同样也希望大家对于别人的请教能认真对待,让大家共同进步.
Thanks
}
Flash AS教程
Word教程网 | Excel教程网 | Dreamweaver教程网 | Fireworks教程网 | PPT教程网 | FLASH教程网 | PS教程网 |
HTML教程网 | DIV CSS教程网 | FLASH AS教程网 | ACCESS教程网 | SQL SERVER教程网 | C语言教程网 | JAVASCRIPT教程网 |
ASP教程网 | ASP.NET教程网 | CorelDraw教程网 |