专注于互联网--专注于架构

最新标签
网站地图
文章索引
Rss订阅

首页 »Flash教程 » flash效果:Flash 电影字幕显示效果 »正文

flash效果:Flash 电影字幕显示效果

来源: 发布时间:星期五, 2009年1月23日 浏览:410次 评论:0
  本例将要实现是星球大战开场时那种字幕显示效果而实时创建影片剪辑并使用随机和影片剪辑Drawing Method(绘画思路方法)绘制星空背景则是本节重点主要影片结构如下图所示

  

  图1 影片结构

  从上面这个图片中可以看到这个例子结构还是比较简单整个影片除去个黑色背景的外只需要两个图层——用来放置要显示字幕第1层和用来“铺星星”作背景第2层因此整个制作过程可以大致划分为字幕制作和背景制作两大部分

  字幕制作相对比较简单所以就不多说了这里简要提下“星空”背景制作原理在这个例子中用到星空背景将不是用绘图工具点点画出来静态背景而是使用ActionScript动态生成动态背景每次运行时对应 N颗星星会随机产生N组横坐标、纵坐标值再加上每颗星星大小亮度也是随机所以每次铺出来背景绝对是不

  在制作过程中主要使用了Free Transform工具部分功能并利用Math.random生指定范围内随机数字公式实时创建影片剪辑以及部分绘画思路方法使用最终播放效果如图2所示要实现这效果具体制作过程如下

  

  图2 星球大战开场文字最终效果图

  .制作字幕效果

  1.新建个电影在属性面板中设置其尺寸为550pxX400px,选择种颜色(本例为#000000)作为背景色

  2.双击时间线上“图层1”并将其改为“caption”主要用于旋置文字图形元件在工具箱中选取文本工具并在属性面板中设置文字颜色、字体和大小本例设置文本颜色为#CCCC00大小为40字体为Times New Roman,当然也可以设置为其它属性设定好后点击舞台并写上字幕文字如图3所示

  

  图3 在舞台上输入文字

  3.接下来该是给文字添加点透视效果时候了选中写好字幕文字按两下Ctrl+B将文字分离成为色块这是变形要求其对象必须是色块从工具箱中选取任意变形工具 然后从选项面板中扭曲按钮 将分离后文本能过调整 4个角上手柄使整个变形框成梯形效果如图4所示

  

  图4 调整手柄

  4.变形完毕后选择“插入/转换为元件”菜单命令将变形后字幕转换为图形元件并为其命名为“caption”

  选中字幕后选择按“Ctrl+T”打开Transfrom(变形)面板调整缩放比例数值使第行字大小和未进行透视变形前差不多如图5所示

  

  图5 变形面板

  5.将字幕元件拖动到舞台下方边缘的外如图6所示:

  

  图6 拖动字幕

  6.点击时间线上第200帧按F6插入个关键帧选中第200帧上字幕元件使用Transform(变形)面板将其缩小后将其拖到舞台中上方如图7所示

  

  图7 缩小字幕元件

  7.右击第1帧在弹出快捷菜单上选择“创建补间动画”将第1到第200帧转化为运动中间帧动画按Enter键看动画效果时候你会发现整个字幕运动过程前半部分相对后面结束部分速度要慢所以需要对运动速度进行些调整选中第1帧在属性面板中将其中简易选项设为某个正值如图8示如此字幕运动后半部分就会放慢速度了

  

  图8 属性面板

   2.制作背景

  1.新建图层并为其命名为“stars”然后将这个图层拖动到字幕层“caption”下面打开Actions(动作)面板选中stars图层帧后在Actions面板中输入以下代码(注释号“//”后内容可不输)

iMax = 400;
//星星总数
sClipName = "starbg";
//背景影片剪辑名字
iStarSizeMax = 2;
//星星大小(最大值)
iStarSizeMin = 1;
//星星大小(最小值)
iStarAlphaMax = 100;
//星星透明度(最大值)
iStarAlphaMin = 80;
//星星透明度(最小值)
this.createEmptyMovieClip(sClipName, 0);
//创建个空白背景影片剪辑
for (i=1; i<=iMax; i) {
iStarX = Stage.width*Math.random;
//星星X轴坐标
iStarY = Stage.height*Math.random;
//星星Y轴坐标
iStarSize = (iStarSizeMax-iStarSizeMin)*Math.random+iStarSizeMin;
//星星大小
iStarAlpha = (iStarAlphaMax-iStarAlphaMin)*Math.random+iStarAlphaMin;
//星星透明度
iStarColor = 0xffffff;
//星星颜色
with (this[sClipName]) {
lineStyle(iStarSize, iStarColor, iStarAlpha);
//设定画星星画笔大小颜色透明度
moveTo(iStarX-1, iStarY);
//将画笔移动到要绘制星星位置
lineTo(iStarX, iStarY);
//绘制条从点(iStarX-1,iStarY)到点(iStarX,iStarY)的间长度为个像素直线
}
}
  详解:

  第1行到第12行是些简单变量声明其中变量iMax值就是背景上将出现星星个数sClipName是用来绘制星空背景影片剪辑(也就是图1-93表识为2层)名字第5到第8行两个变量对应是星星最大尺寸和最小尺寸iStarSizeMax最好不要太大这个值越大效果越差第9到第12行所确定是星星透明度最大值和最小值而这个透明度反映出来效果就是星星亮度

  第13行createEmptyMovieClip思路方法是Flash MX中新东西具体语法是:

myMovieClip.createEmptyMovieClip (instanceName, depth)  其作用是在myMovieClip中创建个名为instanceName空白影片剪辑(空白=什么都没有)它在myMovieClip中深度为depth这也就是说要引用这个新影片剪辑可以使用myMovieClip.instanceName或myMovieClip[instanceName]这两种语法在本例中myMovieClip参数位置上写是this对象即当前影片剪辑所以这第13行意思就是在当前影片剪辑中创建个名字为sClipName(这个变量值是“starbg”)空白影片剪辑其放置深度为1

  第15行到最后是个for循环它是绘制星星主要第16到33行是循环主体其中第16到23行使用同条随机数公式来随机设定每颗星星大小、透明度为下面绘制过程作准备这条用来获得给定范围内随机数公式是:(最大值 — 最小值)× 随机数 + 最小值注意这条公式中所使用随机数必须是返回0和1的间(包括0)随机数随机Flash MX中随机Math.random就符合这个要求

  再回头来看看这第16和18行似乎跟上面公式不样嘛!乍看的下这两行似乎是不但是如果当上面那条公式中最小值等于0时公式会变形为:最大值 × 随机数这样就和16、18行很符合了iStarX和iStarY变量分别代表是星星在舞台上横坐标和纵坐标所以这里分别用舞台宽(Stage.width)和高(Stage.height)乘以随机来得到舞台的内某组横、纵坐标值而iStarSize和iStarAlpha分别表示了星星大小和透明度这两条使用就是标准随机数公式了iStarColor用以表示星星颜色(其实也是可以改用随机公式来确定)这里使用0xffffff即纯白色

  第26到33行是真正动笔绘制时候首先第26行用了个with语句这条语句始现于Flash 5具体语法为:

with (object) {
statement(s);
}
  使用这条语句可以让你在两个花括号间直接设置对象object属性而不需要在每个属性前面再加上object引用例如要设置影片剪辑mc_x属性可以写成:

mc._x=100;  而使用with语句就可以写成:

with (mc) {
_x=100;
}
  使用with语句可以将某对象属性设定或思路方法都集中在从而使实现更加结构化清晰化当然象上面例子这种只设置单个或少数属性情况下with语句好处是比较难体现

  中with语句object参数是this[sClipName]即第13行创建新影片剪辑starbg所以下面花括号中操作都是针对starbg进行第27到32行用是Flash MX中新添功能Drawing Method(绘图思路方法)中 3条——lineStyle、moveTo和lineTo思路方法

  lineStyle具体语法如下:

myMovieClip.lineStyle ([thickness[,rgb[,alpha]]])  myMovieClip是要进行设置影片剪辑名字参数thicknessrgbalpha分别表示线粗度16进制形式颜色值和透明度如果什么参数也不给那么屏幕将画不出任何线

  moveTo具体语法如下:

myMovieClip.moveTo (x,y)  将画笔移动到坐标为(x,y)点上这条语句只负责移动画笔并不实际进行任何绘图操作

  lineTo具体语法如下:

myMovieClip.lineTo (x,y)  在画笔当前所在位置和参数所指定坐标(x,y)的间画条直线例如当前画笔在坐标为(0,0)点上执行条lineTo(10,10)的后就会在(0,0)到(10,10)的间出现条直线注意这个思路方法的前定要先lineStyle思路方法设置好线属性否则你将画不出任何东西



  2.到了这里整个例子可以说是基本上完成了但为了能让字幕有点点消失在黑色星空的中效果再给它添加个“帘子”新建图层并为其命名为“shade”按Sht+F9键打开“混色器”面板将填充样式改为“线型渐变”后指定两个黑色指针并将其中Alpha值设定为0%即完全透明如图9所示

  

  图9 设置“混色器”面板

  3.从工具箱中选取“矩形”工具在属性面板中设定边框色为无色填充色为上面设定线性渐变点击第200帧在shade上画个渐变矩形色块大小应比下面caption层上字幕尺寸略大从工具箱中选取“填充变形”工具 然后点击渐变色块调整手柄将渐变方向改为透明部分朝下调整渐变方向效果如图如图10所示

  

  图10 调整渐变方向

  4.保存影片按“Ctrl+Enter”预览就可以看到漂亮“星球大战”开场文字



0

相关文章

读者评论

发表评论

  • 昵称:
  • 内容: