资源描述：
《原创教程---全Flash网站制作实例》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。
原创教程---全Flash网站制作实例作者：csdeny 类型:闪吧BBS 来源:闪吧 考虑到个人网站的更新速度，除了留言模块采用Flash+ASP+Access外，其他部分都使用Flash+XML构建。留言模块比较简单，大家如果要看功能比较全的留言本制作教程，可以从网上找，很多的（我说过我很懒的）。第一次写这么长的教程，不准备把制作步骤一步一步写出来，这样太机械，看完后也不知所云，我会把每个模块预计的目标，自己的想法，和实现步骤重点写出来，这样我想对您会更有帮助：）工具：Flash8(AS2.0)Tips：这个网站使用了不少AS2.0的内置类，相关语言不清楚的话可参考Flash8的帮助文档。第一章：模块划分基本上个人网站只有About,News,Works,Contact几个模块（其实大部分模块的实现方式很类似的），因为使用MovieClipLoader类来动态加载，所以我们的swf包括about.swf,news.swf,works.swf,contact.swf以及放置导航条，背景效果和音乐播放器的main.swf,最后还有一个index.swf用来载入main.swf的。Tips：当然结构是看个人喜好的，你可以把背景效果和播放器都做成单独的swf。第二章：index.swf Index.swf主要是加载main.swf并包括一个loading效果的（这个loading效果是我最满意的部分，是受一个广告的启发，虽然实现很简单），这个loading在后面的模块中也经常使用，所以把它做成一个单独的MC(loading_mc);Index.swf的背景是一个渐变，这是为了不使在loading的时候画面不要过于简单，我使用的是一个色系的颜色，上面深（＃009288），下面浅（＃A8D4D1)，大家不必拘泥，用你们喜欢的颜色就可以了。重点是loading_mc的制作，下面是loading_mc的预览图：其实就是一个标尺的样子，右边有个动态文本显示加载的百分率，并且其y值随之上升到相应高度的位置（呵呵，简单吧，不过效果很不错，现在大部分loading制作时显示百分率的文本位置都是固定的，这个创意为整个网站增色不少的）制作过程：左边的那个标尺不用说了吧，使用极细直线来作，右边的动态文本命名为loading_txt，字体使用04b_08，大小为6下面就是AS代码部分了，在主场景第一帧写代码：fscommand("fullscreen", true); //全屏fscommand("allowscale", false); //不许缩放var my_mcl=new MovieClipLoader(); //定义一个MCL了，不熟悉此类的看帮助文档var mcllistener=new Object(); //定义一个侦听器对象var container=this.createEmptyMovieClip("container", this.getNextHighestDepth());//container用于装加载的main.swfmcllistener.onLoadStart=function(){loading_mc._visible=true;loading_mc.loading_txt.text="00.00";}//我的方法是改变loading_mc的_visible来控制它的显隐，当然也可以用其他方法，不 //过这个来得简单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;}//loaded是加载的百分比，因为我的标尺高度是50px,所以loading_txt的y值应为50-//loaded/2mcllistener.onLoadComplete=function(){loading_mc._visible=false;}//加载完成后，loading_mc隐藏mcllistener.onLoadInit = function(target){target._x=0;target._y=0;}my_mcl.addListener(mcllistener);//为my_mcl添加侦听器my_mcl.loadClip("main.swf",container);//加载main.swf到container中上面的代码不麻烦吧，基本上只涉及MCL类和MC的坐标控制：）好，下面开始main.swf的制作了。第三章：main.swfMain.swf里面的内容很多，因为有很多东西是后来加的，所以大家在制作中可以把部分提取出来制作成单独的swf下面是main.swf的视图： 可以看到，主要有四个MC部分：背景效果的bg_mc,顶部的top_mc,音乐播放器的music_mc和导航栏的menu_mc,下面分别介绍：1> bg_mc:Bg_mc的底色采用和前面index.swf中底色一致，不过渐变色方向相反，以后加上颜色更深些的top_mc会使页面丰富起来，大家可以用自己喜欢的色系来配色：）然后我这里使用了一个图片来使背景更丰富，原图如下： 这里我们要进行些处理，在PS(或其他你熟悉的图像处理软件)中把图片中的汉字擦除，擦干净就行，然后把它导入到舞台中新的一层，移至右下角，按F8转为MC,在此MC的“混合”模式里选“变暗”（见下图），好了，图片和背景很好的融合到一起了（简单吧，不需要抠图的）接着，就是在Flash中做那个"独自撑起生命的暖色..."的文字效果了，这是个细致活，要耐心点：原来的文字是”毕业了..."我把这三个字去了，破坏了原有的平衡，这样就得把所有的字重新排列。我的想法是重读的字词用大号字显示，所以”独“，”撑“，”暖色“我用36px加粗黑体，其他的字用18px加粗黑体（全部为透明度80%的白色，全白会有些刺眼），每个字一层，便于作动态效果，另外每个字的位置也很重要，我的排列方式如下图： 我当初的想法是从后往前摆，"生命的"与"暖色"上沿基本对齐，"起"与"暖色"的下沿基本对齐，"撑"的下沿对齐"起"的½处，"自"与"撑"下沿对齐，"独"上沿与"自"1/2处对齐。当然这是见仁见智的，只要自己觉得好看就可以了：）剩下的就是为每个字做透明度渐变的效果了，这个相信大家都会做，我就不说了，可以参看源文件。为了使背景更有动感，我还放了个motion_mc,其实就是无限复制效果，效果图如下：这个MC的制作方法网上有很多，不详细讲了，就是先做一个由引导线引导的半径变大，透明度下降的ball_mc(可以调下缓动为负值，表示先慢后快），然后用Ball_mc.duplicateMovieClip("ball"+i,this.getNextHighestDepth());this["ball"+i]._x=ball._x+random(50)-100;this["ball"+i]._y=ball._y+random(40);this["ball"+i]._alpha=random(30)+70;this["ball"+i]._width=random(10)+10;this["ball"+i]._height=this["ball"+i]._width; 来制作，上面的代码很好懂，就不解释了：）Bg_mc就说完了，其实大家可以把它做成一个单独的swf动态加载，还可以作很多背景效果，随即加载其中一个效果...2> top_mc:这个mc的内容很少，只是起一个装饰的作用，如下图：就是一个矩形色块（＃#244131），然后是站点名，你可以给它作些动态效果，然后要为这个MC添加投影滤镜，使有立体效果，参数入下图：3> menu_mc本来做的时候准备把menu_mc做成读取外部XML动态生成的，以方便添加栏目，但后来考虑的个人网站的更新速度实在没必要，就做成静态的了，不过Flash+XML后面的很多模块都用到了，想学习flash+xml的读者可以直接跳到后面Menu_mc完全加载后的显示如下：当然动态效果大家可以根据自己的喜好做，这方面也没什么说的我的结构是menu_mc包括about_mc，news_mc，works_mc，contact_mc，每个mc里都包含一个menu_btn在每个mc（比如about_mc)的最后一帧写代码： stop(); //停止menu_btn.onRelease=function(){_root.loadswf("about.swf",262,150);//这个是调用root上的自定义函数loadswf,这个函数下面 //会详细介绍}Tops：在编程中，路径是一个很重要的概念，特别是在很多swf嵌套的时候，很多错误都是路径引起的，所以尽量少使用_root之类的绝对路径，多用相对路径，比如我上面的代码就可以写成this._parent._parent.loadswf("about.swf",262,150);如果你自己都不清楚自己要引用的是哪个路径的话，教你个好办法：在你所要引用的路径的帧上写varpath=this;这样要引用这个路径就可以用path.loadswf(...);了：）下面是main.swf主时间轴上第一帧的代码,其中主要是自定义函数loadswf()this._lockroot = true; //这是为了让所有的_root都指向它fscommand("fullscreen", true);fscommand("allowscale", false);loading_mc._visible=false; //在这里也放置了前面制作的loading_mc//loadswf()function loadswf(url:String,hx:Number,hy:Number){ //自定义函数loadswf，hx为_x值，hy为_y值if(container!=undefined){ //如果在加载前，已经加载了另一个swf的话，需先my_mcl.unloadClip(container); //卸载它}var my_mcl=new MovieClipLoader(); //这个和前面的代码很相似，规范点的话，应该把var mcllistener=new Object(); //它进行封装的var container=this.createEmptyMovieClip("container", 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._x=hx; //定义加载的target的x和y坐标target._y=hy;}my_mcl.addListener(mcllistener);my_mcl.loadClip(url,container);}4> music_mc这里制作的是一个功能较全面的音乐播放器，通过动态加载music.xml来实现的，这里我们首次结合了flash和xml，下面先看下这个music.xml文件：Music.xml: Tips：如果xml文件中有中文，必须把编码格式设为UTF-8或gb2312，否则flash中显示为乱码。方法是在记事本输完上述代码后，选择“另存为”，在编码格式中选UTF-8，如下图： 下面我们先看下我们要做的music播放器的效果图：这是没展开时的样子这是展开后没播放时的样子 这是正在播放的样子我们可以看到，第一个图的"music"是个动态文本num_txt，在没有音乐播放时显示"music"，在有音乐播放时和前面做的loading效果一致，显示播放进度，并改变其x坐标；并且第一个图的标尺上我做了一个隐形按钮control_btn，点击(press)时音乐面板展开(当然利用mc的事件可以不需要用隐形按钮的，另外我使用的时onPress事件，可以改成onMouseOver时展开，onMouseOut时回收，依自己的喜好而定）。再看下第二张图，中间上面有"1"...."6"的实际上是一个MC（select_mc),这个MC主要包括一个动态文本(select_txt)和一个按钮（rec_btn)，flash从music.xml中读取信息，通过attachMovie把select_mc排列起来，点击每个select_mc后，会传递相应的变量给自定义的函数soundid，函数soundid负责播放音乐。在第三张图中可以看到，在中间还有个动态文本name_txt，当播放时显示音乐名称，就是music.xml中每个item的属性name的值（你可以做成滚动歌词的），并且在暂停，停止...会显示控制信息。最下面的就是控制菜单了，依次时播放(start_btn)，步进（step_btn），步退（back_btn)，停止(stop_btn)，暂停(pause_btn)和一个音量控制条，滑块为sound_mc上面所说的只要细心就行了，下面就是编程了，可能对新手来说有点难，不过不要泄气，遇到不懂的多看看flash的帮助文档。首先是通过control_btn来控制control_mc的显隐的：num_txt.text="music"; //num_txt默认时显示"music"control_mc._visible=false; //control-mc默认隐藏var vis=0; //这是一个开关变量，通过它来控制control_mc的显隐control_btn.onPress=function(){ //这段程序不难理解吧if(vis==0){ control_mc._visible=true;vis=1;}else if(vis==1){control_mc._visible=false;vis=0;}}下面这些代码就是比较重要的了：var music_xml=new XML(); //定义xml对象var music=new Array(); //定义一个数组对象，实质上是一个对象数组，就是说它的每var count:Number=0; //个数组元素都是一个对象music_xml.ignoreWhite=true; //忽略空白music_xml.onLoad=function(success){ if(success){parse(); //parse()是一个自定义函数，在加载成功时调用 }}music_xml.load("xml/music.xml"); //加载xml文件，onLoad事件最好写在load的前面//parse()//在后面的制作中多次使用flash+xml,且xml的格式基本一致，所以按编程规范来说，应该自定义一//个类来实现，或把这段代码抽象，进行代码公用，不过我没这么做，那样对没有OOP经验的人来//说理解起来有点麻烦function parse(){var e=music_xml.firstChild.childNodes; count=e.length; for(var i=0;i=mysound.getBytesTotal()){name_txt.text=name;mysound.setVolume(int((this._parent._x-95)*2));mysound.start();delete this.onEnterFrame;}else{name_txt.text="loading...";}}}//start_btn.onRelease=function(){ //播放if(soundbool==false){soundid(music[mid-1].url,music[mid-1].name);}else if(soundbool==true){mysound.start(position);name_txt.text=music[mid-1].name;}}stop_btn.onRelease=function(){ //停止mysound.stop();name_txt.text="stop";} step_btn.onRelease=function(){ //步进if(mid1){mid--;soundid(music[mid-1].url,music[mid-1].name);}}pause_btn.onRelease=function(){ //暂停position=mysound.position/1000;mysound.stop();name_txt.text="pause";soundbool=true;}sound_mc.sound_btn.onPress=function(){ //音量的滑块滑动sound_mc.startDrag(false,95,2.3,145,2.3);}sound_mc.sound_btn.onRelease=sound_mc.sound_btn.onReleaseOutside=function(){sound_mc.stopDrag();var t=int((this._parent._x-95)*2);mysound.setVolume(t);}_root.music_mc.onEnterFrame=function(){var f=(mysound.position/mysound.duration)*100;if(isNaN(f)){_root.music_mc.num_txt.text="music";//不播放时显示"music" }else{_root.music_mc.num_txt.text=f.toString().slice(0,5);//播放时显示播放进度，并设置_root.music_mc.num_txt._x=50.7+f/2; //num_txt的坐标}}好了，现在main.swf的内容说完了，下面是每个分栏目的swf了第四章 about.swf如果前面的音乐播放器部分中Flash+XML看懂的话，这部分就很简单了，最终效果图如下：About.swf主要包括一个about_mc,时间轴如下图： 图层一和图层二中两个补间是面板展开的效果，大家可以按自己的喜好做。主要是AS代码部分，读取about.xml中信息并显示。为了方便格式化数据，把每一行的两个动态文本（left_txt与right_txt）做成一个item_mc，通过attachMovie来显示数据，其中about.xml文件如下：About.xml：csdenymaleJanuary 19st, 1984ChineseHefei. Anhui, Chinacsdeny@gmail.com17397251internet, design..Tips：图中的空行在xml中用表示。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完成works部分，基本上网站是完成了，有空的话再加个背景切换效果吧.做完了总要总结下的，除了contact部分使用asp外，绝大部分都用Flash+XML完成，鉴于个人网站的更新速度，已经能满足需要了.但整体上配色不好，布局老套，除了Loading比较有新意外（这还是参考一个广告的），都比较陈旧，看来有好的创意还真难啊播放器部分制作完成，效果还不错今天开始做播放器部分，昨天把留言的后台代码写了，可是在iis下运行错误，怀疑iis装的有问题，等会用netbox试下.今天完成网站的about和news部分，采用XML作为数据源.另外加了个loading,采用的是一个广告的构思，效果还不错，赫赫今天把显示器修好了，花了30RMB,晚上开始做这个网站，基本上把框架做出来了，发现色彩好难配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"+e.attributes.title+"";news_txt.htmlText+="<.date>"+e.attributes.date+"";news_txt.htmlText+="<.content>"+e.firstChild+"
";}}//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文件结构相似，都如下： 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
