《flash网站实例教程(原创-野渡)》由会员分享，可在线阅读，更多相关《flash网站实例教程(原创-野渡)（9页珍藏版）》请在金锄头文库上搜索。
1、本文档由 维维大豆 整理提供精品文档整理2011年9月21号Flash网站实例教程（原创野渡）QQ：78955179 Email： Homepage：http:/202.113.13.68/site/woohey2001/设计思想：在这里逗号我将详细的介绍另外一个FlashMX网站的制作逗号它是完全使用FlashMX构建的。从网站的前期规划到素材的准备逗号从素材的准备到网站的真正制作都紧紧的和前面（以前有些教程）的内容连结起来了。在网站制作的制作中逗号能使用到精确loading、声音的控制、各种动画特效的使用、使用loadMovie装载外部SWF文件、滚动新闻文本等等。设计步骤：一、前期规划1
2、.风格在前面介绍过在网页制作之前逗号先要定义网站的风格逗号决定你的网站的主题。主题的选择对今后的发展方向有决定性的影响逗号考虑好做什么内容就尽量努力做出特色。很多朋友在建站初期总是喜欢在网页里堆积大量感兴趣的内容逗号但个人的精力总是有限的逗号因为无力维护而导致站点更新缓慢、内容匮乏逗号与其这样逗号不如选定一个主题做出自己的风格逗号不求大而全逗号但求小而精。事实上逗号很多的网站成功之处就在于此。这里制作的这个实例逗号属于个人主页性质逗号仅仅用于学习逗号所以也没怎么特意的去准备逗号既然是用于学习FlashMX逗号我们就干脆定为一种学习Flash性质的网页好了。网站的名称为“绿韵”（因为我喜欢绿色）
3、逗号以大自然的绿色为主题。网站的总体颜色这里选择为深绿色“#006633”逗号体现一种和平、宁静和回归自然的感觉。当然这是因为笔者自己所喜欢才这样定义的。您可以根据自己的喜好逗号再加上我们前面介绍过得一点色彩学以及多浏览网络上各种网站得出的经验来定义您自己的特色。2.内容定义完网站的风格逗号就应该按网站的风格来制做网站逗号网页的内容也要为这个风格服务。这个实例中逗号我们网站的内容全部围绕Flash逗号包含Flash动画欣赏、Flash源文件下载、Flash技术文章、Flash网站链接等等。3.布局网站的布局我们也选择最为大众化的“T”结构布局。在前面的内容中说过逗号所谓“T”结构逗号就是指页面
4、顶部为横条网站标志加广告条逗号下方左面主菜单逗号右面显示内容的布局逗号由于菜单条背景较深逗号整体效果类似英文字母“T”,这样的布局页面结构清晰逗号主次分明逗号缺点是规矩呆板逗号没有特点。这里仅仅作示范用途逗号所以还是大众化一点。二、素材准备1.LOGO前面介绍过逗号网站标志被称为LOGO。网站的LOGO就好像一个人的名片一样逗号一个成功的人士决不能容忍一个制作粗糙的名片逗号当然一个好的网站也需要一个设计精良的标志来在浩瀚的Internet中确立自己的形象。一个优秀的LOGO逗号特别是具有动态效果的LOGO比文字更能吸引人们的注意力。LOGO主要通过三个途径选择其内容：a.代表性的人物逗号动物形
5、象；b.设计专业的代表性标志；c.网站的名称逗号利用文字的变形组合逗号字体变换来形成。这里逗号我最常见的第三种途径逗号通过文字的变化变形来设计。仅仅是很随意的把笔者自己的网络ID（woohey野渡）给改成了一个标记逗号如图7-2-1所示。它是Flash制作出来的一个动态的标记。两只海鸟组成字母“W”逗号太阳及其光晕代表两个“O”字母逗号航海者和它小船组成“H”字母逗号船帆上加上了另外两个字母“EY”。整体代表一种在网络海洋冲浪的感觉。也许您会觉得这个LOGO没什么意思逗号不够精致逗号笔者并不是平面设计的高手逗号所以只是作一下示范而已逗号起抛砖引玉的作用。还有就是LOGO有一定的标准尺寸逗号我们
6、可以根据要求制定如8831px的等等。图7-2-12. 素材图片网站制作中不可避免的要使用到图片。您可以从外面买素材光盘逗号然后找出适合自己风格的精美图片逗号加入网站中。当然也可以在网络上去找逗号下载精美的图片。笔者在这里提供两个素材网站：素材屋：http:/；网页制作大宝库：http:/。这里我们找了几张与自然有关的绿色图片逗号以符合网站的风格和特色逗号使整体能保持一致。在后面的制作中我们会看到的逗号这里就不再贴出来了逗号节约空间。准备图片时逗号要注意图片的格式和体积。当然您还可能要用到其它的工具来进行加工逗号如Fireworks、Photoshop等等。对于Flash来说图片的格式很重要逗
7、号如果有矢量图片最好了逗号它和Flash的格式一致逗号放大缩小的时候不会变形逗号产生锯齿或模糊不清逗号不过矢量图片毕竟很少逗号效果没有其它格式的图片好。图片的体积也不宜过大逗号能减小体积就要尽量减小逗号使我们的网页适合于网络传播。3. 音效素材Flash网页的一个它的特点是它具有网络多媒体的效果逗号不仅有动画逗号而且还有很好的音效。它在声音的处理方面的功能也是相当的强。在Flash中加入声音不仅能很大的提高您的网页的效果也能提高网站吸引力逗号增大浏览量。因此逗号我们不能埋没的Flash的闪光点逗号决定在网页中加入一定的音效。Flash中的音效也应根据不同的用途选择不同的声音文件。我们在Flas
8、h网站制作中一般会使用到背景音效、按钮音效和特殊的音效。背景音效一般应选择体积较小、播放时间不能太长、适合循环的音效。按钮音效则更应该体积小逗号时间短逗号仅仅有个声音就可以了。还有其它的特殊音效应根据使用场合的不同而使用不同的声音文件。在这个实例中逗号我们选择了一些短小的按钮音效以及合适的背景音效逗号另外还有一些用于开场动画的特殊音效。声音文件的来源很多逗号除了自己录制以外逗号可以在Flash自带的声音库中选择音效逗号还可以从购买的光盘里等到逗号再或者去网络上下载。在很多的Flash网站中有专门用于Flash制作的各种音效下载逗号如闪吧：逗号闪客帝国：http:/61.156.17.126/
9、等等。三、制作步骤好了逗号前期的工作做完以后逗号我们就可以开始真正的制作了。Flash网站的制作周期一般不会很短逗号可能持续好几天逗号甚至几十天也难说在制作中能可能会发现那个地方做的不够精致而重新制作是很有可能的逗号像这个实例的首页逗号笔者就做了四五天逗号还是不够精致。所以您要有个心里准备逗号话又说回来逗号您也不要因为这个儿退缩了逗号精益求精嘛：）好逗号下面我们就开始制作我们的这个实例吧。1. 首先当然是新建一个文件啦。我们要让最终的网页在浏览器中能占满逗号所以选择文件的大小为780450象素。背景颜色依然为深绿色“#006633”逗号帧频默认逗号12fps。图7-2-2新建文件2. 在我们的
10、Flash文件中导入我们要用到的图片和声音文件逗号如背景图片、背景音乐等等。制作好我们要用到的一些MovieClip、按钮等等逗号在liabrary中建立相应的文件夹进行管理逗号如图逗号我们建立了对应框架、按钮、按钮音效、图标、图片和声音六个文件夹逗号这样有助于我们管理和制作。图library3. 接下来的三个步骤我们要来制造预载Preloading。它的作用和制作我们在第四节中曾经详细介绍过逗号如果有些内容讲的不清楚逗号您可以回去看看逗号回忆一下。这里我们要做精确的预载。选择windowscene或按快捷键ShiftF2打开场景Scene面板逗号新加入一个场景main逗号并把以前那个场景命名
11、为preloader逗号并把preloader场景拖到main场景之前逗号如图7-2-3。图7-2-3 Scene面板4. 在preloader场景中建立三个层：textfield、text和action逗号分别来放置动态文本框、静态文本和脚本指令逗号让这三个层均占两帧。在text层中逗号我们加入如图7-2-4的文字逗号它们包括了网站的标记、网站的地址、网站的一些其它信息。最下面的文字是预载的数据逗号包括已下载字节、总字节、已下载时间、还需下载时间等等逗号这些我们在前面都已经介绍过了。还有别忘了放入loadmc动画逗号它的制作见图2-4-7逗号把它放到主场景中逗号在属性面板中命名实例为：loa
12、dmc。排列好了之后逗号在textfield层中加入七个动态文本TextField逗号如图2-7-4中的虚线框逗号分别用来输出下载百分比、已下载字节、总字节、已下载帧数、总帧数、已下载时间以及还需下载时间这七个数据。在属性面板分别设定变量名为：percent、loadb、totalb、loadf、totalf、timeused和timeleft。5. 预载的最后一步就是在Action层中加入脚本了。这里我们使用第四节中的方法逗号来制造图2-7-4 预载画面这个预载。在第一帧和第二帧分别插入关键帧逗号在第一个关键帧加入如下脚本并加上帧标签loading：loadb = _root.getByte
13、sLoaded();totalb = _root.getBytesTotal();pre = int(loadb/totalb)*100);loadmc.gotoAndPlay(pre);percent = int(pre)+%;loadf = _root._framesloaded;totalf = _root._totalframes;timeused = int(getTimer()/1000);timeleft = int(int(totalb-loadb)/loadb*timeused);第二帧中加入脚本：if (loadb = totalb) gotoAndPlay(main, 1
14、); else gotoAndPlay(loading);它们的意义和作用我们在第四节中都介绍过逗号是在动画没有下载完的时候形成循环逗号检测下载的状况逗号并输出到几个文本框中。您如果有不明白的地方逗号请自己回去看看。6. 下面就是主场景的开场动画了逗号这一部分使用到的各种效果将会很多逗号我们在下面的制作中将一一说明。我们先来看一下开场动画后的最终画面吧逗号这有助于我们理解开场动画的制作过程逗号如图2-7-5所示。上面的是banner逗号左边是按钮组成的导航条逗号右边的两个小框分别用于输出网站新闻以及状态信息逗号中间的则是主画面逗号它是根据浏览者的选择来装载不同的外部.swf文件逗号这里的是一个
15、带水滴（闪亮的是水滴）的绿芽。最下面是声音控制开关、时间信息以及版权信息。这里的各个部分我们最好预先决定好尺寸逗号这样才能更规范逗号比如我们中间部分定为480300px逗号那以后就以这个尺寸来制造要装载的swf文件就行了。图7-2-5 最终画面7. 从上面的画面我们已经知道我们这个实例的最终画面了吧。心里有个谱了逗号就可以来“描绘”我们的网页了逗号我们下面就开始制作。首先我们在主场景中建立五个文件层夹逗号便于我们后面的制作、管理逗号它们分别为first、second、button、以及third逗号另外逗号我们还需要action和sound层来放置脚本和声音逗号如图7-2-6所示。我们做这些并不是多余的逗号等您做完了就能知道这样做的好处了逗号它即便于制作逗号修改起来也很方便逗号很快就能找到要修改的内容。图7-2-6 层的管理8. 在first层文件夹中建议back层逗号来放置背景图片。这里我们的背景图片是黑色石头纹的背景图片。放置好了之后逗号我们按F8快捷键逗号把它转换成symbol逗号命名为back。在第1、4、6、7帧和第9
