FW制作片头文字渐显渐隐动画

渐显|渐隐

 本实例模仿了一些影片片头的文字一行行显现,并且亮度、颜色不断改变的动画效果。这里,我们综合应用了渐层色、文字遮罩和动画等多种技巧,制作了李白的“将进酒”诗句从右到左逐行显示,亮度不断变幻的效果。

  完成效果如下:

  具体制作步骤如下:

  1) 创建一个新文档,宽为450像素,高为300像素,背景色为黑色。

  2) 在文档窗口中使用文本工具书写“将进酒”三个字,颜色为黄色,字号为36,其他设置如图1所示。


  图1 “将进酒“字体设置

   3) 再用文本工具书写侠客行的诗词内容,注意行文顺序从右到左,颜色为紫色,字号为16,其他设置如图2所示。


  图2 诗词内容的字体设置

   4) 选择工具箱中的缩放工具调整诗词内容的对象大小,使其刚好整齐地安全排列在画布上,调整后地文字如图3所示。


  图3 调整文字后的文字排列

  5) 同时选中两个文字对象,执行“修改”菜单下的“组合”命令,将它们组合成组。

   6) 用矩形工具绘制一个宽450像素,高与诗词对象相同的矩形。

  7) 打开“填充”面板,将填充方式设置为“线型”,单击“编辑”按钮,设置渐变色彩为白-深灰-深灰-白,如图4所示。


  图4 填充效果设置

   8) 选中矩形对象,将其移动到如图5所示的位置。


   图5 移动矩形对象

   9) 为矩形添加动画效果,动画的参数设置如图6所示,如果弹出警告框询问用户是否添加新的帧,只要选择“确定’即可。


  图6 为矩形添加动画效果

   10) 选中文字对象组,执行剪切操作,将文字对象组贴到剪贴板上。
11) 选择矩形对象,执行“修改”菜单的“蒙版”子菜单下的“粘贴为蒙版”命令。这时,我们可以从“层”面板中看到,文字对象组已变成遮罩并与矩形对象建立了链接,如图7所示。


   图7 将文字对象作为矩形的遮罩

   12)到这一步,我们已经完成了整个动画的制作,用户可以播放预览一下这种酷炫的文字动画效果。图8显示了动画第24帧的图像。
   图8 动画第24帧图像

时间: 2024-08-30 04:29:23

FW制作片头文字渐显渐隐动画的相关文章

JavaScript让网页出现渐隐渐显背景颜色的方法_javascript技巧

本文实例讲述了JavaScript让网页出现渐隐渐显背景颜色的方法.分享给大家供大家参考.具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>javascript渐隐渐显的背景颜色</title> <style fprolloverstyle>A:hover

jquery简单实现带渐显效果的选项卡菜单代码_jquery

本文实例讲述了jquery简单实现带渐显效果的选项卡菜单代码.分享给大家供大家参考.具体如下: 带渐显效果的选项卡菜单,使用了jQuery共同完成的效果,鼠标点击选项卡之后,出现渐变(淡入淡出效果),让网页看上去更生动. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-cha-style-tab-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T

jQuery实现带渐显效果的人物多级关系图代码_jquery

本文实例讲述了jQuery实现带渐显效果的人物多级关系图.分享给大家供大家参考.具体如下: 这里演示jQuery实现带渐显效果的人物多级关系图,setQuestPose:function中的n代表共几个对象 r代表周长 i代表第几个对象 w代表外面对象的宽带 h代表外面对象的高度 d代表其实角度,测试时请注意,如果右下角提示有错误,请重新刷新页面即可. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-show-gxt-style-d

一个简单的js渐显(fadeIn)渐隐(fadeOut)类_javascript技巧

要兼容IE(element.style.filter = 'alpha(opacity=value)')和非IE(element.style.opacity=value)就可以了.另,还要注意,非IEopaciy的值是0~1之间,IE是1-100.   下面,贴代码: 复制代码 代码如下: /** * @projectDescription 动画(渐显.渐隐)类 * /** * @projectDescription KINGKIT UI * @date 2010-6-1 * @author K

JavaScript让网页出现渐隐渐显背景颜色的方法

  这篇文章主要介绍了JavaScript让网页出现渐隐渐显背景颜色的方法,涉及javascript操作样式的相关技巧,非常具有实用价值,希望本文所述对大家的javascript程序设计有所帮助. 本文实例讲述了JavaScript让网页出现渐隐渐显背景颜色的方法.分享给大家供大家参考.具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <html> <head&

jquery渐隐渐显的图片幻灯闪烁切换实现方法_jquery

本文实例讲述了jquery渐隐渐显的图片幻灯闪烁切换实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/

Fireworks制作钟摆式公告牌摇摆动画

今天我们用Fireworks制作一个钟摆式的公告牌. 先参阅一下效果图. 1.新建一个文件,画布背景颜色选取白色.同时将画布大小设置稍大些. 2.使用Fwmx2004的矢量工具,绘制圆角矩形,自选一种纹理效果填充,如图. 3.输入文字. 4.在圆角矩形右.左上角绘制小圆形,如图所示. 5.添加辅助形,找到该圆角矩形的中心点位置,如图. 6.在中心点上方垂直辅助线上绘制渐变效果的小圆形,以及两根斜直线段,复选该圆形及斜直线对角,组合并移至最后,使用钢笔工具,分别在两个白色小圆形上绘制曲线.如图.

Photoshop制作星光闪烁的磨砂字体动画教程

  Photoshop制作星光闪烁的磨砂字体动画教程          教程主要使用Photoshop制作星光闪烁的磨砂字体动画教程,前几天的动态文字教程,有同学反映操作有难度,今天来一篇比较容易上手的.很多新手不理解的动画原理方面,作者也特意挑出来讲,生动贴切,通俗易懂,一学即会.素材跟源文件都给备好了,就等涨姿势了. 打开PS,新建一个文档.文档大小我选用600px*800px.新建成功后,选用渐变工具,沿着画笔的对角线画出一个直线渐变背景.色值从#0a485a过渡到#1180a0. 这里的

JS特效:用鼠标事件实现图片的渐显效果

js|渐显|鼠标|特效 把这个内容放在<head>和</head>之间<script language="JavaScript" type="text/JavaScript"> <!-- function MM_openBrWindow(theURL,winName,features) { //v2.0 window.open(theURL,winName,features); } //--> </script&