| 网站首页 | Photoshop资源 | Photoshop学院 | Photoshop展示 | 设计素材 | 设计学院 | 数码学院 | 返回总部 | 
您现在的位置： Photoshop资源站 >> 设计学院 >> 动画设计 >> Flash >> Flash MX >> 正文
  Flash MX实战精选:网站导航           ★★★ 【字体：小 大】
Flash MX实战精选:网站导航
作者：佚名    教程来源：不详    点击数：    更新时间：2007-8-15    

通过制作简单的Flash片头动画，掌握制作Flash Website的技巧和方法。有关知识 控制背景音乐的开关，3D效果的按钮制作，导引线的设置， tell target命令的应用。

　　制作过程

　　步骤1：打开Flash，建立一个新文件。按Ctrl+M键，设置帧速度：18fps，大小：450px*300px，背景颜色：白色(#FFFFFF)。

　　步骤2：从菜单栏中选择插入>添加组件（Insert>New Symbol），在出现的对话框中选按钮(Button)，命名为bu-logo1，用绘图工具制作一个logo，如图1所示。


图1 制作按钮


　　步骤3：制作电影片断pic-logo，将已做好的按钮bu-logo1导入pic-logo中，按F6将第2帧也设为关键帧。两个关键帧的Actions都设置为stop。

　　导入一段音效作为背景音效。

　　在属性面板将第1帧中的sound设置为：

effect：custom；sync：start；loops：1000

　　按钮bu-logo1的Actions：

on (release) {

    gotoAndStop (2)：

}

当鼠标（放开）

跳至并停止帧(2)



　　在属性面板将第2帧中的sound设置为：

effect：none；sync：stop；loops： 0

按钮bu-logo1的Actions：

on (release) {

    gotoAndStop (1)：

}

当鼠标（放开）

跳至并停止帧(1)



　　这样，电影开始，背景音乐循环播放，按下按钮bu-logo1后，音乐停止。再次按下按钮，背景音乐又开始播放。如图2所示。


图2 制作背景音效电影片断


　　步骤4：新建图像（Graphic），命名为pic-bu1，绘制3D效果的按钮图形，如图3所示。


图3 3D效果图像


　　步骤5：新建按钮，并将其命名为bu-bu1，将库中的pic-bu1拖入Up帧，选中Down帧，按F5插入帧。新建一层，在Over帧插入关键帧，使用椭圆工具绘制一个圆，并用放射渐变填充，使按钮在滑过状态时产生朦胧效果，如图4所示。


图4 制作3D效果按钮


　　步骤6：回到场景中，新建logo层，将电影片断pic-logo1拖放到场景中间。在第10帧处建立关键帧，将pic-logo1放置在场景上方并缩小： 在第25帧处建立关键帧，将pic-logo1放置在场景右上方，并且在Frame面板中将关键帧设置为移动渐变(Motion)，使电影播放时产生pic-logo1由场景中间逐渐移动到上方，再右上方的效果。如图5所示：


图5 产生移动渐变


　　步骤7：新建daoying层，绘制一条弧形线段，在此层上点右键，从下拉菜单中选properties，在出现的Layer Properties面板中将类型选为导引线(guide)，如图6所示。

　　步骤8：新建6个层，分别命名为1，2，3，4，5，6 层，分别在6个层的第10帧处建立关键帧，分别放置按钮bu-bu1，均匀分布6个按钮，并和导引线对齐，如图7所示。

　　步骤9：分别将1，2，3，4，5，6 层和daoying引导层的第40帧选中，按F6建立关键帧，再返回到第10帧，调整按钮bu-bu1的位置，将按钮拖动到场景外部，并和导引层daoying对齐， 将1，2，3，4，5，6层分别在Frame面板中设置为移动渐变(Motion)， 并将属性设置为guided。如图8所示。

　　这样，从电影第10帧处开始，按钮沿着引导线由场景外滑动到场景中，并成弧形排列。


图6 设置导引层



图7 将按钮与导引线对齐



图8 引导层


　　步骤10：新建电影片断mv-t2，在工作区内沿中心点画一个椭圆，用墨水瓶工具将线段颜色填充为#ff9900，线段粗细设为8px：在Color Mixer面板设置放射渐变填充，将alpha设置为60%左右的半透明。

　　按F6将第2帧设置为关键帧，改变Color Mixer面板的填充色再对椭圆进行填充。

　　将两个关键帧的Actions都设为stop。如图9所示。

　　步骤11：新建电影片断flower，绘制一朵花，对齐工作区中心点.分别在第300，301，600帧处设置关键帧。在301帧处改变flower的颜色。

　　将第1，301关键帧的标签分别命名为a，b，在属性面板设置移动渐变(motion)：旋转(rotate)设置为顺时针一次，如图10所示。


图9 制作电影片断mv-t2



图10 设置电影片断flower的Frame


　　第300，600处关键帧的Actions分别设置为：

 gotoAndPlay ("a")：

gotoAndPlay ("b")： 

跳至并播放标签”a”

跳至并播放标签”b”



　　步骤12：新建电影片断mv-text，建立7个关键帧。Actions都设置为停止(stop)，在七个关键帧处分别写一些描述性文字。如图11所示。

　　提示：我们想要做的效果是：当场景中鼠标滑过按钮bu-bu1时，产生对网站栏目的介绍。


图11 栏目介绍


　　步骤13：回到场景中，新建三个层，分别命名为t2，flower和text.在第40帧处建立关键帧，将电影片断放置mv-t2，flower和mv-text分别在置在相应层并安排好合适位置，并在第40帧处设置Actions为停止(stop)，不要让电影循环播放。

　　在Instance面板将三个电影片断mv-t2，flower和mv-text分别命名为t2，flower，text，如图12所示。


图12 给电影片断命名


　　步骤14：分别在1，2，3，4，5，6层的第40帧处设置6个按钮的Actions：

on (press， release， rollOver) {

    tellTarget ("/t2") {

        gotoAndStop (2)：

    }

    tellTarget ("/flower") {

        gotoAndPlay (301)：

    }

    tellTarget ("/text") {

        gotoAndStop (2)：

    }

}

on (rollOut) {

    tellTarget ("/t2") {

        gotoAndStop (1)：

    }

    tellTarget ("/flower") {

        gotoAndPlay (1)：

}

    tellTarget ("/text") {

        gotoAndStop (1)：

    }

}

当鼠标（按下，放开，滑过）

告知目标(“/t2”)

跳至并停止帧(2)

告知目标(“/flower”)

跳至并播放帧(301)

告知目标(“/text”)

跳至并停止帧(2)

当鼠标（滑出）

告知目标(“/t2”)

跳至并停止帧(1)

告知目标(“/flower”)

跳至并播放帧(1)

告知目标(“/text”)

跳至并停止帧(1)



on (press， release， rollOver) {

    tellTarget ("/text") {

        gotoAndStop (7)：

    }

    tellTarget ("/flower") {

        gotoAndPlay (301)：

    }

    tellTarget ("/t2") {

        gotoAndStop (2)：

    }

}

on (rollOut) {

    tellTarget ("/text") {

        gotoAndStop (1)：

    }

    tellTarget ("/flower") {

        gotoAndPlay (1)：

    }

    tellTarget ("/t2") {

        gotoAndStop (1)：

    }

}

当鼠标（按下，放开，滑过）

告知目标(“/text”)

跳至并停止帧(7)

告知目标(“/flower”)

跳至并播放帧(301)

告知目标(“/t2”)

跳至并停止帧(2)

当鼠标(滑出)

告知目标(“/text”)

跳至并停止帧(1)

告知目标(“/flower”)

跳至并播放帧(1)

告知目标(“/t2”)

跳至并停止帧(1)



　　好了，按Ctrl+Enter测试一下电影效果。

教程录入：onegreen    责任编辑：onegreen 
  • 上一篇教程：

  • 下一篇教程：
    • 　
    【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】
    最新热点 最新推荐 相关文章
    FrontPage 2003教程 用FrontPage2003轻
    Flash 电影字幕显示效果
    Flash 泡泡文字效果
    体验Adobe Flash CS3新特性
    Flash中作毛笔写字动画效果
    Flash遮罩特效实例--百叶窗效果
    Flash绘精致矢量图—逼真土豆
    Flash 扫描显示文字的效果
    Adobe flash cs3 ActionScript 3.0入门
    Flash特效动画制作：飞舞的螺炫
    Powered by：onegreen.org 站长：onegreen〖粤ICP备06090975号〗