Flash交互式动画创作 - 综述.ppt

Flash交互式动画创作,2011-8-3,Flash交互式动画网站实例,主要内容,Flash交互式动画网站概述Flash交互式网站制作过程Flash交互式动画网站实例,Flash交互式动画网站,全Flash网站和单个Flash作品制作的区别1、文件结构不同单个Flash作品的场景、动画过程及内容都在一个文件内，而全Flash网站的文件由若干个文件构成，并且可以随发展的需要继续扩展。全Flash网站的文件动画分别在各自的对应文件内。通过Action的导入和跳转控制实现动画效果，由于同时可以加载多个SWF文件，它们将重叠在一起显示在屏幕上。2、制作思路不同单个Flash作品的制作一般都在一个独立的文件内，计划好动画效果随时间线的变化或场景的交替变化即可。全Flash网站制作则更需要整体的把握，通过不同文件的切换和控制来实现全Flash网站的动态效果，要求制作者有明确的思路和良好的制作习惯。3、文件播放流程不同单个Flash作品通常需要将所有的文件做在一个文件内，在观看效果是必须等文件基本下载完毕才开始播放。但全Flash网站是通过若干个文件结合在一起，在时间流上更符合Flash软件产品的特性。文件可以做的比较小，通过陆续载入其它文件更适合Internet的传播，这样同时避免了访问者因等待时间过长而放弃浏览。,Flash交互式网站概述,在学习制作Flash网站之前，首先需要对Flash网站的一些基本知识有所了解。这些知识包括Flash网站的应用范围及常见类型，Flash网站的基本制作流程等等。了解了这些知识可以在制作Flash网站时更有针对性地进行工作，并更有效地达到制作网站的目的。,Flash交互式动画网站概述,使用Flash制作的网站基本以动画和图形为主，文字内容并不是很多。从这个意义上来说，使用Flash制作网站的方法比较适用在以展示动画和图片内容为主要目的的网站上。如企业品牌推广网站动画游戏网站艺术和产品展示网站个人网站,Flash交互式动画网站概述,企业品牌推广网站顾名思义，这类网站的目的以推广企业品牌为主。,Flash交互式动画网站概述,动画游戏网站这类网站主要以发布Flash动画和提供Flash在线游戏等内容为主。,Flash交互式动画网站概述,艺术和产品展示网站这类网站往往需要展示大量的图片信息，而文字信息相对要少一些。因此，在构建网站时，如何能更方便地更新各种图片信息是需要首先解决的问题。并且，由于图片内容较多，应当建立一种清晰明确的调用并显示图片的方法，使浏览者不会在对大量图片的浏览过程中迷失方向。对于艺术性的展示网站来说，由于其内容本身的艺术性比较高，要求网站在整体设计上也要保持较高的艺术品位。,Flash交互式动画网站概述,个人网站对于个人网站来说，由于网站中的内容不会太多，结构也不太复杂，非常适合使用Flash来制作。这类网站的制作一般没有特定的章法可循，主要是根据个人喜好或工作业务需求来表达一些个性化的东西。网站中通常也需要加入一些可以与浏览者进行简单交流的功能，诸如留言板、发送邮件、在线涂鸦等。,http:/www.o-dear-,Flash交互式网站概述,Flash交互式网站制作流程构建制作组确定网站的主题和风格网站结构规划网页布局设计Flash场景规划素材准备分工制作合并整合网页发布,网站前期规划,确定网站的主题和风格主题和风格趋向性分析网站市场定位分析网站的用户群例如：以服装为主的企业网站，根据该企业的服装风格大众化、休闲、时尚，应当为网站选择一种能够反映服装特点、体现时尚元素的风格。,网站前期规划,确定网站的主题和风格网站的配色根据主题和风格确定网站配色寻找搭配方案的技巧和经验颜色与文本网站的配色经验与技巧1、忌“花”：色彩不要过多2、冷暖搭配要谨慎3、网站各界面色彩统一4、不要用“花”背景,网站的配色,色相环,12色相环,网站的配色,色彩的心理感觉：不同的颜色会给浏览者不同的心理感受。近似色,近似色,网站的配色,互补色,互补色,互补色是色环中的直接位置相对的颜色。如果使色彩强烈突出的话，选择对比色比较好。,网站的配色,分离补色,分离补色由两到三种颜色组成。一种颜色的补色在色环的另一面。,网站的配色,组色,组色是色环上距离相等的任意三种颜色。当组色被用作一个色彩主题时，会对浏览者造成紧张的情绪。因为三种颜色形成对比。,网站的配色,暖色,暖色由红色调组成。比如红色、橙色和黄色。它们给选择的颜色赋予温暖、舒适和活力，它们也产生了一种色彩向浏览者显示或移动，并从页面中突出出来的可视化效果。,网站的配色,冷色,冷色来自于蓝色色调。譬如蓝色、青色和绿色。这些颜色将对色彩主题起到冷静的作用，它们看起来有一种从浏览者身上收回来的效果，于是它们用作页面的背景比较好。,网站的配色,1、基本色、辅助色和强调色,网站的配色,色彩的对比色彩对比是指各种色彩在界面内形成的面积、形状、位置以及色相、明度、纯度之间的差异，使网页出现不同的变化和心理感受。色彩的调和两种或两种以上色彩和谐搭配在一起，会产生调和、统一的效果，是人们追求视觉得到统一、舒适、达到心理平衡的手段。,网站的配色-搭配实例,1、儿童类网站,网站的配色-搭配实例,2、男性特征的网站,网站的配色-搭配实例,3、体现华丽高贵特色的网站,网站的配色-搭配实例,4、青年人网站,网站的配色-搭配实例,5、服装服饰类,Flash交互式动画网页,网站结构规划网站结构：能够合理、正确的表达网站的基本内容及其子内容之间的层次关系，站在用户的角度考虑，使得用户在网站中浏览时可以方便地获取各部分信息。合理的网站栏目结构主要表现在下面几个方面：通过主页可以到达任何一个一级栏目首页、二级栏目首页以及最终内容页面通过任何一个网页可以返回上一级栏目页面并逐级返回主页主栏目清晰并且全站统一通过任何一个网页可以进入任何一个一级栏目首页,网站结构规划实例,Flash交互式动画网页,网页布局设计,Flash交互式动画网页,网页布局设计1.“同”字形布局：所谓“同”字形结构，就是整个页面布局类似“同”字，页面顶部是主导航栏，下面左右两侧是二级导航条、登录区、搜索区等，中间是主内容区，如http:/www.china-。2.“国”字形布局：它是在“同”字形布局上演化而来的，它在保留“同”字形的同时，在页面的下方增加一横条状的菜单或广告，如。3.“匡”字形布局：这种布局结构去掉了“国”字形布局的右边的边框部分，给主内容区释放了更多空间，内容虽看起来比较多，但布局整齐又不过于拥挤，适合一些下载类和贺卡类站点使用，如。4.“三”字形布局：一般应用在简洁明快的艺术性网页布局，这种布局一般采用简单的图片和线条代替拥挤的文字，给浏览者以强烈的视觉冲击，如。5.“川”字形布局：整个页面在垂直方向分为三列，网站的内容按栏目分布在这三列，最大限度地突出主页的索引功能，一般适用在栏目较多的网站里，如。,“同”字形布局,“国”字形布局,“匡”字形布局,“三”字形布局,“川”字形布局,Flash交互式动画网站概述,Flash场景规划Flash网站场景概念Flash场景是构成整个网站画面内容的文字、图像和动画的总和。全网站由主场景、子场景、次子场景等构成。场景的层次关系由网站的结构所决定如：网站主页可以看成是主场景，主场景中的文字链接跳转到的下一级网页则是子场景。,Flash交互式网站-场景规划,场景规划的原则场景的层次结构一般由网站的结构决定通常将网站的首页设为主场景主场景一般包括导航信息将二级、三级链接的网页设为子场景、次子场景子场景及次子场景一般为网站的内容信息，如文字说明、图片、动画等主场景和子场景的舞台通常为一样大小主场景及子场景应一般包含相同的导航信息，使得上级场景应能自如的跳转到其下级子场景，反之依然,Flash交互式网站-素材准备,素材用来丰富网站内容，表现主题，烘托场景，用于组建场景内容的各种文字、图片、动画、声音等元件素材的选择与网站的风格一致体现各部分场景的主题图文并茂,Flash交互式动画网站,分工制作根据前期的场景规划，在指定的舞台位置上添加网页内容合并整合首页和全部下级子页面制作完成后，就可以将其整合成一个完整的网站，并进行发布。整合的过程主要是通过在首页文件中添加相应的ActionScript代码来实现。最后，将首页影片发布为HTML格式的网页文件，实现了首页在网页中的显示。在整合网站之前，首先需要确保首页文件及子页面文件以及所有需要调用的外部文件都位于同一文件夹目录下。接下来，将通过修改首页文件并发布一个新的SWF文件来实现网站的整合。,Flash交互式动画网站-网站发布,首页影片文件制作完成后，就可以发布网站了。发布网站的过程实际上就是将首页发布为HTML文件和SWF文件的过程。其具体发布过程如下：,Flash交互式动画网站-常用技术,1、重要ActionScript代码控制该代码是实现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的位置、大小和旋转角度等属性。,Flash交互式动画网站-常用技术,参数说明层次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时，就会出现不必要的麻烦。,Flash交互式动画网站-常用技术,unloadMovieNum(level)unloadMovieNum(level/target)功能说明：从FlashPlayer中删除已加载的影片。参数说明：同上,Flash交互式动画网站-常用技术,loadVariables(url,level/target,variables)功能说明：从外部文件中（例如文本文件，或由CGI脚本、ActiveServerPage(ASP)、PHP或Perl脚本生成的文本）读取数据，并设置FlashPlayer级别或目标影片剪辑中变量的值。参数说明：url变量所处位置的绝对或相对URLlevel指定FlashPlayer中接收这些变量的级别的整数。Target指向接收所加载变量的影片剪辑的目标路径。variables可选参数，指定发送变量所使用的HTTP方法（GET/POST），如果没有则省略此参数。,Flash交互式动画网站-常用技术,gotoAndPlay(scene,frame)功能说明：转到指定场景中指定的帧并从该帧开始播放。如果未指定场景，则播放头将转到当前场景中的指定帧。参数说明：scene转到的场景的名称。frame转到的帧的编号或标签。,Flash交互式动画网站-常用技术,2、Loading的制作考虑到网络传输的速度，如果首页文件比较大，在它被完全导入以前设计一个Loading引导浏览者耐心等待是非常有必要的。同时设计得好的loading在某些时候还可以为网站起一定的铺垫作用。一般的做法是先将loading做成一个MC，在场景的最后位置设置标签如end，通过ifFrameLoaded来判断是否已经下载完毕，如果已经下载完毕则通过gotoAndPlay控制整个Flash的播放。以一个Loading文件为例，在场景里加入插MC，ifFrameLoaded(end)gotoAndPlay(开始播放的地方);,Flash交互式动画网站-常用技术,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,网站结构规划,红线部分构成主场景（舞台），每个子栏目在首页里仅保留名称，属性为按钮。蓝线部分内容为次场景（演员），可以将次场景内容做在一个文件内，同时也可以做成若干个独立文件，根据需要导入到主场景（舞台）内。,首页场景index.swf的制作,首页场景主要内容包括：长宽比例、背景、栏目导航按钮、网站名称等“首页”信息。,首页场景index.swf的制作,蓝色线条部分为网站名称、版权等固定信息区，通常所在位置为Flash动画的边缘位置。橙色线条内容为网站栏目导航按钮，通常也是固定在某个区域。按钮可以根据需要做成静态或动态效果，甚至可以做成一个包含MC变化的Button。绿色线条部分为主场景导入子文件的演示区域。在子文件的装载方面主要用到:LoadMovieNum、UnloadMovieNum两个控制函数以子栏目Cartoon的制作为例。主场景文件index中有一个按钮Cartoon，当我们点击Cartoon按钮时希望导入cartoon文件夹下的200208.swf文件。所以我们在场景内选择Cartoon按钮，添加Action代码：on(release)loadMovieNum(cartoon/200208.swf,1);unloadMovieNum(2);注意这里我们设置level为1。,次场景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，依次类推。,二级次场景（200208_frog01200208_frog05)制作,这里的二级次场景是与上级关联的内容，是本例中三级结构中的最后一级。该级主要为全Flash网站具体内容部分，可以是详细的图片、文字、动画内容。这里需要连接的是具体图片为内容，但同样需要做成与主场景比例同等的swf文件。例如：,二级次场景（200208_frog01200208_frog05)制作,注意要在场景最后一帧处加入停止ActionScript代码:stop();这样可以停止场景动画的循环动作。完整导入到主场景内的效果,About中的文本导入,查看本例的About子栏目，在文件index.fla里设置About按钮的action：on(release)loadMovieNum(aboutus.swf,1);unloadMovieNum(2);在aboutus.fla文件中做好显示文本的文本框，文本框属性设置为多行（Multiline）,Var:aboutus（注意这个变量名）。为文本框所在的帧加ActionScript代码：loadVariables(“about.txt”,“”);在aboutus.swf文件所属目录下编写一个纯文本文件about.txt（文本起什么名字不重要），文本开头为“aboutus=”，“”后面写上正式的文本内容。,About中的文本导入,注意事项,1、注意所有子文件的长、宽属性全Flash网站从画面层次来看，可以把每个子场景看做为一个层文件，子文件是在背景的长宽范围内出现。为了方便定位，我们可以让子文件与主场景保持统一的长宽比例，这样非常便于版面安排。否则就必须用setProperty语句小心控制它们的位置。,注意事项,2、发布文件时注意将html选项发布为透明模式需要将每个子文件发布为透明模式的原因是不能让子文件带有背景底色，由于子文件的长宽比例与主场景基本是一致的，如果子文件带有底色，就会遮盖主场景的内容。设置方法：在发布设置里勾选html选项，在html面板里选择windowsmode:TransparentWindowless,如下所示：,注意事项,2、发布文件时注意将html选项发布为透明模式,注意事项,3、使用文本导入时，注意文本文件开头的内容必须是“与文本框属性中Var定义名相同的字符串=正文”。另外需要导入文本的swf文件与被导入的txt文本文件最好在同一目录内。4、注意仔细检查文件之间的调用是否正确，避免出现“死链接”。,Flash交互式动画网站-制作实例2,制作一个关于服装公司的网站,网站风格定位,由于该网站是以服装为主的企业网站，根据该企业的服装风格大众化、休闲、时尚，应当为网站选择一种能够反映服装特点、体现时尚元素的风格。,网站结构规划和布局设计,制作首页,制作首页,放置导航菜单的其他三项,下级子页面的制作,本网站的下级子页面包括4个页面，即“公司简介”、“最新动态”、“产品信息”和“联系方式”页面。这4个下级子页面将分别制作，并发布为单独的SWF文件about.swf、news.swf、product.swf和contact.swf。,制作“公司简介”页面,在制作各下级子页面时，需要将各页面的Flash影片的舞台大小设置为与首