注册本站  论坛  繁體中文

电脑技巧
手机 | MP3 | MP4 | 显卡 | 主板 | 显示器 | 光存储 | 笔记本 | 网络设备 | 移动存储 | 数码相机
键鼠 | CPU | 音箱 | GPS | 电视 | 服务器 | 投影机 | 机箱电源 | 品牌电脑 | 办公打印 |
| 网站首页 | Cisco | Windows | Linux | Java | Dotnet | Oracle | 网页设计 | 平面设计 | 安全 | 软件应用 | 电脑维修 | 办公维修 |
您现在的位置: 电脑技巧 >> 网页设计 >> Flash >> 制作实例 >> 网页设计正文

Flash入门教程:滚动字幕动画的制作

文章来源:不详 作者:佚名 更新时间:2007-12-29 0:41:00 【 】 【加入收藏
  在Flash中图层与图层之间的关系不仅是上面图层挡住下面的图层,而且还是互相制约的,其中遮罩层与被遮罩层的关系就是这样的。这里通过一个简单的例子“滚动字幕”,来加以说明。

做动画之前,我们先来看一下遮罩的原理:遮罩层的对象形状就是被遮罩层的可见区域。说白了,遮罩层好比黑夜中的一支手电筒,照在哪儿哪儿就显现,照不到的地方我们就看不到。明白了这一点,在实际操作中,我们可以利用遮罩实现很多精美的动画效果。

本实例如图所示,一段优美的诗文从舞台的右侧缓缓进入,到达舞台合适位置时自动消失。

p>

下面就来介绍具体的做法。
(1)启动Flash8,新建Flash文档,在时间轴上将图层1改名为“背景”,如图2所示:

Flash入门教程:滚动字幕动画的制作_网页教学网webjx.com整理
图2


(2)选择菜单栏“文件→导入→导入到舞台”命令,找到我们事先准备好的图片,将其导入到舞台。如图3所示:

Flash入门教程:滚动字幕动画的制作_网页教学网webjx.com整理
图3

由于图片有些大,我们可以在对齐面板中单击相对于舞台按钮,然后选择匹配大小中的匹配宽和高Flash入门教程:滚动字幕动画的制作_网页教学网webjx.com整理,再选择对齐中的Flash入门教程:滚动字幕动画的制作_网页教学网webjx.com整理Flash入门教程:滚动字幕动画的制作_网页教学网webjx.com整理。此时背景层已经完成,将其加锁。

(3)新建图层2,命名为“文字”。此时时间轴如图4所示:

Flash入门教程:滚动字幕动画的制作_网页教学网webjx.com整理
图4

p>

(4)选择工具栏中文字工具Flash入门教程:滚动字幕动画的制作_网页教学网webjx.com整理,在舞台上单击输入文字,此时文字的属性面板如图5所示。文字输入之后,单击工具栏中的选择图标,选中文字后把它移至舞台的右侧。如图6所示:

Flash入门教程:滚动字幕动画的制作_网页教学网webjx.com整理
图5

Flash入门教程:滚动字幕动画的制作_网页教学网webjx.com整理
图6

(5)在背景层第168帧处单击右键,插入帧。在文字层第84帧单击右键,插入关键帧。把舞台上的文字移到舞台中,移动文字的同时按住Shift键可以水平移动。此时舞台上显示如图7:

Flash入门教程:滚动字幕动画的制作_网页教学网webjx.com整理
图7

p>

(6)选择文字层1-84帧之间任意一帧,单击右键创建补间动画。在该层第168帧单击右键插入关键帧。把文字继续向左移(要同时按住Shift键来拖移文字,注意和前一位置的关系,文字整体应在前一位置的左侧)至如图8所示位置,在84-168帧之间任意一帧,单击右键创建补间动画。

Flash入门教程:滚动字幕动画的制作_网页教学网webjx.com整理
图8

此时时间轴如图9:

Flash入门教程:滚动字幕动画的制作_网页教学网webjx.com整理
图9

p>

(7)把文字层加锁,新建图层3,命名为“遮罩”层。选择工具栏中矩形工具Flash入门教程:滚动字幕动画的制作_网页教学网webjx.com整理 ,笔触色设为无,填充色任意色,在舞台上画一矩形,矩形的大小应和文字整体大小相同(不能小于文字整体,否则遮不住的),可以先在舞台右侧文字之上画矩形,然后把其移到舞台中。如下图10,图11所示。

Flash入门教程:滚动字幕动画的制作_网页教学网webjx.com整理
图10

Flash入门教程:滚动字幕动画的制作_网页教学网webjx.com整理

Flash入门教程:滚动字幕动画的制作_网页教学网webjx.com整理
图11

p>

注意:我们之前在第(7)步中文字层中168帧时文字必须在此时的遮罩矩形的左侧,只有这样,才能不被透出来。

(8)选择遮罩层,单击右键,选择遮罩层。如图12所示:

Flash入门教程:滚动字幕动画的制作_网页教学网webjx.com整理
图12

(9)此时,动画基本完成。保存并按下Ctrl+Enter键,测试动画效果!

  • 上一篇网页设计:

  • 下一篇网页设计:
  • 最 新 热 门
     Flash教程:if条件语句的用法
     Flash教程:测试AS代码的执行速度
     Flash教程:trace()的使用
     实现在AJAX下的前进、后退功能
     创建吸引访问者的网站内容的14种方法
     LBS功能:图片的自适应实现代码
     LBS增加引用地址和永久地址点击复制功能
     学习CSS布局网页的一些实例
     CSS学习者:2008年不要作浮躁的人
     网页设计制作之改进超级链接效果
    最 新 推 荐
     Flash动画制作小野人玩摇滚实例
     Flash入门教程:滚动字幕动画的制作
     Flash制作交互动画星座查询器
     Flash教程:制作天空中流星划过特效
     Flash教程:制作文字波动视觉特效
     Flash教程:制作有趣的星座查询器
     Flash教程:用鼠标控制图片移动效果动画
     用Flash引导线制作爱心图案动画
     再谈用Flash引导线制作爱心图案动画
     Flash教程:引导线制作爱心图案动画
    相 关 文 章

    Flash教程:if条件语句的用法
    Flash教程:测试AS代码的执行速度
    Flash教程:trace()的使用
    Javascript代码在网页中简单应用的几个示例
    Flash动画制作小野人玩摇滚实例
    Flash AS 教程:多种图片切换效果
    Flash AS教程:填色游戏的制作
    Flash逐帧和补间制作小野人摇滚动画
    Flash制作交互动画星座查询器
    flash教程:使用拆分数字和文字的函数

    | 设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明 | 网站公告

     

    Copyright 2006-2008 pcjx.com All Rights Reserved
    电脑技巧 版权所有 粤ICP备06059145号 地图
    本网站所有内容未经许可不得转载或做其他使用