• 续flash全站实例2 - [flash]

    2009-05-25

    版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
    http://2yue22.blogbus.com/logs/39947090.html

    四章  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"。


    收藏到:Del.icio.us




    引用地址: