全Flash网站制作实例（二）_技术的足迹

第四章 about.swf
如果前面的音乐播放器部分中Flash+XML看懂的话，这部分就很简单了，最终效果图如下：

About.swf主要包括一个about_mc,时间轴如下图：

图层一和图层二中两个补间是面板展开的效果，大家可以按自己的喜好做。主要是AS代码部分，读取about.xml中信息并显示。
为了方便格式化数据，把每一行的两个动态文本（left_txt与right_txt）做成一个item_mc，通过attachMovie来显示数据，其中about.xml文件如下：

About.xml：
<?xml version="1.0" encoding="UTF-8"?>
<about>
<item att="name">csdeny</item>
<item att="sex">male</item>
<item att="birth">January 19st, 1984</item>
<item att="nationality">Chinese</item>
<item att="location">Hefei. Anhui, China</item>
<item att=""></item>
<item att="E-mail">csdeny@gmail.com</item>
<item att="OpenQQ">17397251</item>
<item att=""></item>
<item att="interests">internet, design..</item>
</about>

Tips：图中的空行在xml中用 <item att=""></item>表示。

AS代码如下：

stop();
var my_xml=new XML(); //代码与上面播放器相似，不再解释
my_xml.ignoreWhite=true;
my_xml.onLoad=function(success){
if(success){
loadtxt();
}
}
my_xml.load("xml/about.xml");
//loadtxt()
function loadtxt(){
var e=my_xml.firstChild.childNodes;
var count=e.length;
for(var i=0;i<count;i++){
var item=this.attachMovie("item_mc","item"+i,this.getNextHighestDepth());
item._x=135;
item._y=80+14*i;
item.left_txt.text=e.attributes.att;
if(e.firstChild==undefined){
item.right_txt.text="";
}else{
item.right_txt.text=e.firstChild;;
}
}
}

第五章 news.swf
首先看下效果图：
这个和前面的很相似，所以不仔细说了。

这部分也是flash+xml完成的，和前面about.swf基本相似，不同点是，在动态文本news_txt中显示的文字要通过StyleSheet类格式化，另外有两个控制文本scroll的按钮up_btn与down_btn

时间轴如下：

下面三层都是面板展开效果，news.xml文件如下：

<?xml version="1.0" encoding="UTF-8"?>
<news>
<item title="完成了!" date="2006-07-02">完成works部分，基本上网站是完成了，有空的话再加个背景切换效果吧.做完了总要总结下的，除了contact部分使用asp外，绝大部分都用Flash+XML完成，鉴于个人网站的更新速度，已经能满足需要了.但整体上配色不好，布局老套，除了Loading比较有新意外（这还是参考一个广告的），都比较陈旧，看来有好的创意还真难啊</item>
<item title="播放器完成" date="2006-07-01">播放器部分制作完成，效果还不错</item>
<item title="开始制作播放器" date="2006-07-01">今天开始做播放器部分，昨天把留言的后台代码写了，可是在iis下运行错误，怀疑iis装的有问题，等会用netbox试下.</item>
<item title="about和news部分完成" date="2006-06-31">今天完成网站的about和news部分，采用XML作为数据源.另外加了个loading,采用的是一个广告的构思，效果还不错，赫赫</item>
<item title="网站开始动工!" date="2006-06-30">今天把显示器修好了，花了30RMB,晚上开始做这个网站，基本上把框架做出来了，发现色彩好难配</item>
</news>

AS代码如下：

import TextField.StyleSheet;
stop();
news_txt.wordWrap=true;                     //设置自动换行
news_txt.html=true;                                //允许使用部分html标记
news_txt.multiline=true;                         //设置为多行
var my_styleSheet:StyleSheet = new StyleSheet();            //定义一个StyleSheet，可以参看帮助
my_styleSheet.setStyle(".title",{color:’#FFFFFF’,fontSize:9,textAlign:"left"});
my_styleSheet.setStyle(".date",{color:’#FFFFFF’,fontSize:6,textAlign:"right",fontFamily:"04b_08"});
my_styleSheet.setStyle(".content",{color:’#244131’,fontSize:9,textAlign:"left"});
var news_xml=new XML();
news_xml.ignoreWhite=true;
news_xml.onLoad=function(success){
if(success){
loadnews();
}
}
news_xml.load("xml/news.xml");
//loadtxt()
function loadnews(){
news_txt.styleSheet = my_styleSheet;                 //设置news_txt的样式
var e=news_xml.firstChild.childNodes;
var count=e.length;
for(var i=0;i<count;i++){
news_txt.htmlText+="<.title>"+e.attributes.title+"</.title>";
news_txt.htmlText+="<.date>"+e.attributes.date+"</.date>";
news_txt.htmlText+="<.content>"+e.firstChild+"</.content><br>";
}
}
//
drag_mc.up_btn.onPress=function(){               //文本向上滚动
news_txt.scroll--;
}
drag_mc.down_btn.onPress=function(){                //文本向下滚动
news_txt.scroll++;
}

第六章 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.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"。

原文件下载地址:http://mail.ustc.edu.cn/~bxl009/web.rar
注：因为空间不支持ASP,请不要测试留言模块.

作者：发布时间：2009年04月23日点击数：【收藏】【打印文章】

上一篇：全Flash网站制作实例（一）_技术的足迹　　下一篇：弹性+固宽布局_技术的足迹

动易雅虎

推荐阅读

全Flash网站制作实例（二）_技术的足迹

作者：发布时间：2009年04月23日点击数：【收藏】【打印文章】

查看本文的所有评论 >>网友评论