分享

全Flash网站制作剖析(二)

 惊讶空间 2011-09-26
全Flash网站制作剖析(二)
2008-05-16 09:58
三、实例制作剖析

  一般制作流程:

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

  1、本实例网站结构规划

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

  子栏目About:Feiying is、Member、Relationship、Contact Us

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

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

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

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

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

  主场景安排:

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

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

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

  在子文件的装载方面主要用到:LoadMovieNumUnloadMovieNum两个控制函数,请参阅前文重要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面板里选择windows mode:Transparent Windowless, 如图。

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

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

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多