如何做一个纯FLASH的网站

如何做一个纯FLASH的网站,第1张

经过一段时间的Flash学习之后,很多朋友开始对那些全Flash网站的制作发生兴趣。全Flash网站基本以图形和动画为主,所以比较适合做那些文字内容不太多,以平面、动画效果为主的应用。如:企业品牌推广、特定网上广告、网络游戏、个性网站等。

制作全Flash网站和制作html网站类似,事先应先在纸上画出结构关系图,包括:网站的主题、要用什么样的元素、哪些元素需要重复使用、元素之间的联系、元素如何运动、用什么风格的音乐、整个网站可以分成几个逻辑块、各个逻辑块间的联系如何、以及你是否打算用Flash建构全站或是只用其做网站的前期部分等等,都应在考虑范围之内。

实现全Flash网站效果多种多样,但基本原理是相同的:将主场景作为一个"舞台",这个舞台提供标准的长宽比例和整个的版面结构,“演员”就是网站子栏目的具体内容,根据子栏目的内容结构可能会再派生出更多的子栏目。主场景作为"舞台"基础,基本保持自身的内容不变,其它"演员"身份的的子类、次子类内容根据需要被导入到主场景内。

从技术方面讲,如果你已经掌握了不少单个Flash作品的制作方法,再多了解一些swf文件之间的调用方法,制作全Flash网站并不会太复杂。

参考流程:网站结构规划—>Flash场景规划—>素材准备—>分别制作—>整体整合

一、全Flash网站和单个Flash作品制作的区别

二、常用技术

1、重要ActionScript代码控制

2、Loading的制作

3、文本导入

三、实例制作剖析

1、本实例网站结构规划

2、首页场景index.swf的制作

3、次场景Cartoon(200208.swf)的制作

4、二级次场景(200208_frog01~200208_frog05)制作

5、About中的文本导入

四、注意事项

以上我们通过实例剖析的方式大略介绍了全Flash网站的基本制作方法,希望给喜欢Flash的朋友们一点实实在在的帮助,期望不久以后能看到大家做出的精彩Flash网站!本文Flash网站实例源文件下载

一、全Flash网站和单个Flash作品制作的区别

1、文件结构不同

单个Flash作品的场景、动画过程及内容都在一个文件内,而全Flash网站的文件由若干个文件构成,并且可以随发展的需要继续扩展。全Flash网站的文件动画分别在各自的对应文件内。通过Action的导入和跳转控制实现动画效果,由于同时可以加载多个SWF文件,它们将重叠在一起显示在屏幕上。

2、制作思路不同

单个Flash作品的制作一般都在一个独立的文件内,计划好动画效果随时间线的变化或场景的交替变化即可。全Flash网站制作则更需要整体的把握,通过不同文件的切换和控制来实现全Flash网站的动态效果,要求制作者有明确的思路和良好的制作习惯。

3、文件播放流程不同

单个Flash作品通常需要将所以的文件做在一个文件内,在观看效果是必须等文件基本下载完毕才开始播放。但全Flash网站是通过若干个文件结合在一起,在时间流上更符合Flash软件产品的特性。文件可以做的比较小,通过陆续载入其它文件更适合Internet的传播,这样同时避免了访问者因等待时间过长而放弃浏览。

二、常用技术

1、重要ActionScript代码控制

这是全Flash网站实现的关键,尤其是Flash MX新增了很多功能强大的命令,关于这部分,请大家可以参看看看其它的资料,这里只介绍部分制作全Flash网站需要使用的比较重要的ActionScript函数。

loadMovieNum("url",level[, variables])

loadMovie("url",level/target[, variables])

功能说明:

在播放原来加载的影片的同时将SWF或JPEG文件加载进来。

参数说明:

url 要加载的 SWF 或 JPEG 文件的绝对或相对 URL,不能包含文件夹或磁盘驱动器说明。

level 把swf文件以层的形式载入到Movie里,若载入0层,则载入的swf文件将取代当前播放的Movie,。2层高于1层。

Target 可用路径拾取器取得并替换目标MC,载入的电影将拥有目标MC的位置、大小和旋转角度等属性。(个人认为用Target好些,在控制载入.swf位置时比较方便)

variables 可选参数,指定发送变量所使用的 HTTP 方法(GET/POST),如果没有则省略此参数。

层次Level:Flash允许同时运行多个SWF文件,Flash一旦载入一个SWF文件,则占据了一个"层次",系统默认的是_Flash0或_Level0,之后的Movie则按顺序放在level0---level16000里。第一个载入的SWF文件为_Flash0或_Level0,第二个如果加载到第一层时的称为_Flash1或_Level1,依此类推。注意前提是前面载入的文件没有退出,否则冲掉第一个SWF文件,第一个文件也从内存中退出。

注意:如果你将外部的Movie加载到Leve0层或者Level0里,那么,原始的Movie就会被暂时取代,要再用时还得重新Load一次,也就是说,一个Level在一个时间里只能有一个Movie存在。在使用LoadMovie和UnLoadMovie时必须特别注意Level之间的关系,否则,当你希望在一个时间里只播放一个Movie而Unload掉前一个Movie时,就会出现不必要的麻烦。

unloadMovieNum(level)

unloadMovie[Num](level/"target")

功能说明: 从 Flash Player 中删除已加载的影片。

参数说明: 同上

loadVariables ("url" ,level/"target" [, variables])

功能说明:

从外部文件中(例如文本文件,或由 CGI 脚本、Active Server Page (ASP)、PHP 或 Perl 脚本生成的文本)读取数据,并设置 Flash Player 级别或目标影片剪辑中变量的值。

参数说明:

url 变量所处位置的绝对或相对 URL

level 指定 Flash Player 中接收这些变量的级别的整数。

Target 指向接收所加载变量的影片剪辑的目标路径。

variables 可选参数,指定发送变量所使用的 HTTP 方法(GET/POST),如果没有则省略此参数。

gotoAndPlay(scene, frame)

功能说明:

转到指定场景中指定的帧并从该帧开始播放。如果未指定场景,则播放头将转到当前场景中的指定帧。

参数说明:

scene 转到的场景的名称。

frame 转到的帧的编号或标签。

2、Loading的制作

考虑到网络传输的速度,如果index.swf文件比较大,在它被完全导入以前设计一个Loading引导浏览者耐心等待是非常有必要的。同时设计得好的loading在某些时候还可以为网站起一定的铺垫作用。

一般的做法是先将loading做成一个MC,在场景的最后位置设置标签如end,通过ifFrameLoaded来判断是否已经下载完毕,如果已经下载完毕则通过gotoAndPlay控制整个Flash的播放。

以一个Loading文件为例,在场景里加入插入MC,

ifFrameLoaded("end"){

gotoAndPlay("开始播放的地方")

}

3、文本导入

在我们制作全Flash网站的过程中经常遇到一定量的文字内容需要体现,文本的内容表现与上面介绍的流程是一样的,不同的地方体现最后的表现效果和处理手法还是有些不同。

方法一、文本图形法

如果文本内容不多,有希望将文本内容做的比较有动态效果,可以采用此法。将需要文本做成若干个Flash的元件,在相应的位置安排好。文本图形法的文件载入与上面介绍的处理手法比较类似,原理都差不多。具体动态效果就有待大家自己去考虑,这里就不多介绍。

方法二、直接导入法

文本导入法可以将独立的.txt文本文件,通过loadVariables导入到Flash文件内,修改时只需要修改txt文本内容就可以实现Flash相关文件的修改,非常方便。

在文本框属性中设置Var:变量名(注意这个变量名)。

为文本框所在的帧添加ActionScript代码:

loadVariables("变量名.txt","")

编写一个纯文本文件.txt(文件名随意),文本开头为“变量名=”,“=”后面写上正式的文本内容。

三、实例制作剖析

一般制作流程:

网站结构规划—>Flash场景规划—>素材准备—>分别制作—>整体整合

1、本实例网站结构规划

网站栏目:News、About、E-mail、Gallery、Cartoon、Animation

子栏目About:Feiyingis、Member、Relationship、ContactUs

红线部分构成主场景(舞台),每个子栏目在首页里仅保留名称,属性为按钮。

蓝线部分内容为次场景(演员),可以将次场景内容做在一个文件内,同时也可以做成若干个独立文件,根据需要导入到主场景(舞台)内。

2、首页场景index.swf的制作

全Flash网站由主场景、子场景、次子场景……构成。

和制作html网站类似,一般我们会制作一个主场景index.swf,主要内容包括:长宽比例、背景、栏目导航按钮、网站名称等“首页”信息。最后发布成一个html文件,或者自己做一个html页面,内容就是一个表格,里面写上index.swf的嵌入代码即可。

主场景安排:

蓝色线条部分为网站名称、版权等固定信息区,通常所在位置为Flash动画的边缘位置。

橙色线条内容为网站栏目导航按钮,通常也是固定在某个区域。按钮可以根据需要做成静态或动态效果,甚至可以做成一个包含MC变化的Button。

绿色线条部分为主场景导入子文件的演示区域。

在子文件的装载方面主要用到:LoadMovieNum、UnloadMovieNum两个控制函数,请参阅前文重要ActionScript代码控制。

这里我们以子栏目Cartoon的制作为例。主场景文件index中有一个按钮Cartoon,当我们点击Cartoon按钮时希望导入cartoon文件夹下的200208.swf文件。所以我们在场景内选择Cartoon按钮,添加Action代码:

on(release){

loadMovieNum("cartoon/200208.swf",1)

unloadMovieNum(2)

}

注意这里我们设置level为1。

3、次场景200208.swf的制作

现在确定Cartoon子栏目需要导入的文件200208.swf,该文件计划包含5个子文件。所以200208.swf文件的界面只包含用于导入5个独立子文件的5个图形按钮和一个标题。

200208.swf

从图上大家可以看到,200208.swf文件包含5个属性为button的小图标,分别为Bu_2_frog01到Bu_2_frog05。我们需要的效果是:点击它们则分别导入相应文件200208_frog01.swf到200208_frog05.swf文件。

我们在场景内选择Bu_2_frog01,为这个按钮添加ActionScript:

on(release){

loadMovieNum("cartoon/200208_frog01.swf",2)

}

点击Bu_2_frog02,为这个按钮添加ActionScript:

on(release){

loadMovieNum("cartoon/200208_frog02.swf",2)

}

……

依次将5个button分别设置好相对应的action以便调用相应的文件。

注意:这里我们设置level为2,是为了保留并区别主场景1而设置的导入的层次数,如果需要导入下一级的层数,则层数增加为3,依次类推。

4、二级次场景(200208_frog01~200208_frog05)制作

这里的二级次场景是与上级关联的内容,是本例中三级结构中的最后一级。该级主要为全Flash网站具体内容部分,可以是详细的图片、文字、动画内容。这里需要连接的是具体图片为内容,但同样需要做成与主场景比例同等的swf文件。例如:

200208_frog01

200208_frog02

该场景是最底层场景,为主体内容显示部分,具体动画效果大家可以根据需要做更深入。注意要在场景最后一帧处加入停止ActionScript代码:stop()这样可以停止场景动画的循环动作。

完整导入到主场景内的效果

5、About中的文本导入

查看本例的About子栏目,在文件index.fla里设置About按钮的action:

on(release){

loadMovieNum("aboutus.swf",1)

unloadMovieNum(2)

}

在aboutus.fla文件中做好显示文本的文本框,文本框属性设置为多行(Multiline),Var:aboutus(注意这个变量名)。

为文本框所在的帧加ActionScript代码:

loadVariables("aboutus.txt","")

在aboutus.swf文件所属目录下编写一个纯文本文件about.txt,文本开头为“aboutus=”,“=”后面写上正式的文本内容。

将文本文件完整导入到主场景内的效果

四、注意事项

1、注意所有子文件的长、宽属性

全Flash网站从画面层次来看,非常类似Photoshop的层结构,我们可以把每个子场景看做为一个层文件,子文件是在背景的长宽范围内出现。为了方便定位,我们可以让子文件与主场景保持统一的长宽比例,这样非常便于版面安排。否则就必须用setProperty语句小心控制它们的位置。

2、发布文件时注意将html选项发布为透明模式

需要将每个子文件发布为透明模式的原因是不能让子文件带有背景底色,由于子文件的长宽比例与主场景基本是一致的,如果子文件带有底色,就会遮盖主场景的内容。

设置方法:在发布设置里勾选html选项,在html面板里选择windowsmode:TransparentWindowless,如图。

3、使用文本导入时,注意文本文件开头的内容必须是“与文本框属性中Var定义名相同的字符串=正文”。另外需要导入文本的swf文件与被导入的txt文本文件最好在同一目录内。

4、注意仔细检查文件之间的调用是否正确,避免出现“死链接”。

初级前端

主要学习三个部分:HTML,CSS,JavaScript

一、html + css部分:

这部分特别简单,到网上搜资料,书籍视频非常多。css中盒子模型,流动,block,inline,层叠,样式优先级等这些自学起来也是非常容易。最后再深入了解下浏览器差异性,ie9以下兼容简单了解就行了,ie9以下浏览器被淘汰掉是趋势,低版本没必要浪费大量时间去学习兼容主流浏览器,google chrome浏览器、firefox浏览器、safari浏览器、opera浏览器即可。浏览器差异内容很多,建议在实践中多多积累。

二、JavaScript部分。

1.基础学习:

难点,也是重点,要学的内容实在很多,如果没有其他编程语言的基础的话,学起来可能要费些力,有很多比较抽象的概念,必须要深入理解,比如闭包、原型、面向对象、封装等,要理解透彻。看书是必不可少的,找一本优秀的js书从头到尾,反复研究学习,第一遍可以快速翻阅,大体知道了解概念即可,第二三遍就需要深入学习了。另外,js面向对象编程必须要学习,非常重要,个人推荐一本书, Stoyan Stefanov著,凌杰译的《javascript面向对象指南》。边学边练,实践出真知。

针对那些有条件的人来说,很多小伙伴更喜欢的是自学。但是一个人自学毕竟力量是有限的,为了让想学习的人可以更好的学习,给大家推荐一个裙,前面是6 1 1,中间是肆 二 8,最后面就是壹 四 二,这里有很多想学习的人和你一起交流,也有大牛每天晚上免费教学,想要学习的人都可以加入我们,但是我们只欢迎想学习的人,不是来学习,随便看看的就不要进了。

2.jQuery学习:

这些基础知识掌握好之后,还需要学jQuery,这是一个非常优秀的Javascript库,大型开发必备。它简化了Javascript的复杂操作,消除了Javascript跨平台兼容问题,提供了大量实用方法,有良好的文档和帮助手册,是一个非常成熟的Javascript库。慕课网学习视频幕课网。学习方法也很简单,照着产品文档做几个页面就行了,不用面面俱到,以后遇到问题查文档就行了。

大概流程就是这样,如下图所示:

3.进阶学习:

有了以上知识,对于大多数小型网站,你应该已经可以写出能够工作的代码了。但要想成为更专业的前端,你还需继续努力。更高的要求大概还有四方面:易维护,可测试,高性能,低流量(移动端)。

中高级前端

1.工具学习习:大型项目中,前端代码构建已经不是简单的压缩一下了,依赖管理、模块合并、各种编译步步不可缺少,需要学会使用grunt、gulp等前端构建工具,要学习的还有:包管理器bower、npm,代码优化CSS Lint、JSHint、JSLint,CSS预处理器less、sass,代码管理及版本控制svn、Git,web框架/服务器Node、Express,代码规范、HTML模块化、css模块化。

2.布局框架学习如Bootstrap。

3.新技术html5学习。

4.js框架学习,requireJS、 AngularJS等,往前端架构师靠近。

5.nodejs学习。

到招聘网站,参考任聘要求,准没错,举例如下:

1.精通html和css,能制作符合W3C标准的静态页面;

2.精通JavaScript编程,对面向对象编程思想有深刻理解;

3.精通主流Javascript库/框架jQuery;

4.理解并掌握JavaScript语言核心技术DOM、BOM有Javascript性能优化经验;

5.对浏览器兼容性有深入的研究,精通各种浏览器问题 ;

6.了解Backbone.js、AngularJs等MVC框架并有实际项目开发经验;

7.了解http://asp.net等服务器后台技术和拥有一定的C#编程能力者优先;

8.对交互体验、可用性、用户体验有一定程度的理解;

9.有良好的责任心和团队合作能力、能承受较大的压力;

自己动手搜索下吧,确定目标和方向,以上是个人路线,仅供参考。


欢迎分享,转载请注明来源:夏雨云

原文地址:https://www.xiayuyun.com/zonghe/60144.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-02-27
下一篇2023-02-27

发表评论

登录后才能评论

评论列表(0条)

    保存