 |
|
| |
|
|
|||||||||||||||||||||||||||
|
《循序渐进——Flash MX基础与技巧》网上教程 网站导航 实例说明 这是动态生成按钮的网站导航实例，通过Actions>Browser/Network>loadVariables来实现对外部文本的读取，根据读取的数据利用Actions>Movie Clip Control>duplicateMovieClip();语句动态生成导航按钮。按钮可打开文本中指定的窗口，这样就实现了导航功能。 有关知识 切割图像、载入变量、复制电影片断 、取得地址、告诉目标、取值函数、在HTML中使用框架等。 制作过程 一、背景图片的制作 背景图片可以由Adobe Photoshop，Macromedia Fireworks等各种平面设计软件完成，当然图片的内容也要根据网站的实际内容来确定。这里的关键是对图片的分割，以Photoshop为例作如下处理。 步骤1：用Photoshop打开一图片文件。 步骤2：添加新参考线。选择菜单“视图>新参考线”，打开参考线对话框，选择垂直，位置120 px，然后“视图>所定参考线”。这个步骤是为了精确分割背景图片，如图23-26所示。 图23-26 面性参考线使分割很精确 步骤3：对图片进行切割。选择切片工具（按k键），沿参考线将背景图分成两部分，如图23-27所示。 图23-27 沿参考线用切割工具切割把图像分成两块 步骤4：输出图像。选择“文件>保存为Web格式”，在对话框中选择JPEG格式然后确定。如图23-28所示。 图23-28 选择不同的压缩格式和压缩比得到不同的效果 在接下来的存储对话框中保存类型栏选择image only（仅限图像）。这样Photoshop会自动新建一个images目录按一定的命名规则把分割的图片存储其中。 二、动态导航按钮的制作 步骤1：新建一个120X440的fla文件，背景使用刚分割的背景图片左侧的部分（即1_01.jpg）。 步骤2：新建一个名叫buttonok的电影片断。这个电影片断由两个层，txt层放一个动态文本框，在属性面板将它命名为mytext，如图23-29所示。 图23-29 给文本框起名，这样程序才能访问控制它 button层放一个button，可从公共按钮库中选一个拖放，点选button在上面添加Action如下：
步骤3：把这个电影片断拖拽到主场景上，这样就生成了电影片断的一个实例，在属性面板给这个实例起名叫b0，使它可被访问 ，如图23-30所示。 图23-30 命名后，b0可被程序访问控制 步骤4：在主场景action层第一帧添加Action如下：
接着主场景action层最后一帧添加Action如下：
步骤5：在主场景中增加sound层，添加背景音乐。 步骤6：按Ctrl+Enter，输出成SWF文件。 三、网页制作 这个实例采用了左右框架结构，左框架导航，右框架显示内容。而页面的增删带来的SWF中按钮的增减则由readme.txt来控制。 readme.txt或的代码如下： total=2&url1=01.htm&url2=02.htm& &name1=Book&&name2=ReadMe&& 注：readme.txt中的变量之间用&隔开即可。其中total是须添加按钮数。namei是按钮名，urli是按钮指向的网页地址。 网页的框架结构。使用左右框架格式，左框架指定宽度120。Index.htm代码及结构，如图23-31所示。 图23-31 框架结构默认打开的页面左侧是nav.htm，右侧为0.htm 如果不熟悉HTML，可在Dreamweaver或FrontPage制作相关页面。如图23-32所示。 图23-32 用FrontPage在nav.htm中插入SWF，并制作相应页面 四、测试页面 在光盘的“动态导行”文件夹中找到 index.htm，点击后可在浏览器中打开做好的动态导行的SWF及网页。源程序名为“动态导航.fla”。 修改readme.txt中的值，看看会有什么变化。 |
||||||||
|
|
