论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

字体效果:制作气泡吹散的文字效果

文章类别:div+css | 发表日期:2011-3-5 8:57:35

  有朋友问我的《爱有来生 独自等待》一贴中标题字的效果时怎样实现的?下面我就来简述一下制作方法,供大家参考。先看最后效果:


1、Flash版本要9.0以上的,新建一个AS3.0的文件,场景默认大小了。场景图层1,导入一张图片做背景,全居中,上锁。添加图层2,选中第一帧,选择文字工具,字号96(可自定),字型这里是汉仪雪峰体,颜色自定,在场景中打上文字,选中文字右键---分离两次;调整一下字间距,放到合适的地方,再选中所有文字,右键---转换为元件---图形。将图层1、2延长帧至250帧。如图1。

1.jpg


2、添加图层3,选中第一帧,选择矩形工具,笔触无,颜色任意,关闭对象绘制,在场景中画一长方形,大小刚好覆盖所有文字。如图2。 选中图层3,右键---遮罩层,如图3。上锁。

2.jpg


3.jpg


3、先将图层3的“显示轮廓”点下去,回到图层2,在50帧上插入关键帧,再到第1帧,选中文字,属性面板上将颜色面板改为“Alph  0%”,1到50帧间创建动画补间,上锁图层2,除去图层3“显示轮廓”。

4、选中图层3,解锁,在145帧上插入关键帧,然后用向右方向键将矩形向右移动至露出第一个字“初”,如图4;在150帧上插入关键帧,用向右方向键将矩形向右移动至露出第二个字“恋”;155帧上插入关键帧,用向右方向键将矩形向右移动至露出第三个字“的”;以此类推,直至165帧上将文字全部露出。将145至150、155、160、165间创建形状补间,上锁。

4.jpg


5、插入图层4,在140帧上插入关键帧,选择椭圆工具,笔触无,颜色粉到白(从左至右),也可根据标题的颜色自定,类型放射状,按住Shift键,画一个5*5的正圆。将场景比例放大到800%,用渐变变形工具稍调整一下颜色,再选中小圆,右键--转换为元件---影片剪辑,名为“yuan”;140帧上选中该园点编辑--清除。再新建一个影片剪辑元件,名为“yuan1”,进入编辑区内,图层1上将影片剪辑“yuan”拖入,水平、垂直中齐,属性面板上将实例名改为“mc”;添加图层2, 选中第一帧,打开动作面板,输入如下语句:
var _X = Math.random()*10 - 5;
var _Y = Math.random()*10 - 5;
var _A =  1.0;
var _S = Math.random() * 10 -5;

this.addEventListener(Event.ENTER_FRAME,run);

function run(e:Event):void {
        mc.x +=_X;
        mc.y +=_Y;
        mc.alpha = _A;
        mc.scaleX =  _S;
        mc.scaleY =  _S;
        _A  -= 0.025;

        if (_A<0) {
                this.removeEventListener(Event.ENTER_FRAME,run);
                mc.alpha = -1;
        }
}
记住输入法一定要在英文状态下输入语句。ok,回场景。

6、再次新建一个名为"A"的影片剪辑元件,编辑区内,图层1第一帧上,选择文字工具,静态文本,输入法英文状态下,类型“Arial Black”,字号100,颜色白,输入一个大写“A”字。选中“A”字,右键“分离”,水平、垂直中齐,上锁;将窗口调为800%,添加图层2,选中第一帧,将“yuan1”影片剪辑有序的拖入,直至全部覆盖“A”字,约有100多个小圆,再将图层1删除,如图5,这是放大800倍时的状态。回场景。

5.jpg


7、场景图层4第140帧上拖入影片剪辑“A”,位置在文字“初”字左边稍离开一点的距离,属性面板宽高比为40*38.7, 如图6,在145帧上插入关键帧,将“A”移动到文字“初”所在位置,如图7, 如果想找到“初”的位置,可将图层3遮罩层的锁打开,这样方便对齐。在140与145帧间创建动画补间,再选中第145帧,右键复制帧,图层4上锁。添加图层5,在第145帧位置上粘贴帧,再到150处插入关键帧,用向右方向键右移至文字“恋”上,如图8,145、150两帧间创建动画补间,图层5上锁。添加图层6,重复前面的过程直至将文字全部替换,如图9-1, 时间轴上如图9所示。

6.jpg


7.jpg


8.jpg


9-1.jpg


9.jpg


8、测试吧就会看到这一富有情趣和浪漫的标题效果,有兴趣的朋友还可以继续添加内容以至做个完整的作品。祝大家都成功!
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058