- 浏览: 44458 次
- 性别:
- 来自: 天津
最新评论
本例讲解用Flash的形状补间打造摇曳的烛光效果,教程通过实例详细说明了形状补间的运用。对本文感兴趣的朋友快提交作业吧~~
形状补间动画关键帧上元素的要求:一是必须是矢量图,二是必须是形状状态。选中关键帧上的物体时显麻点状态,在属面板里显示"形状"。
如果使用图形元件、按钮、文字、对象绘制等,则必先"打散"再变形。形状补间动画可以实现两个图形之间颜色、形状、大小、位置的相互变化。下面通过制作摇曳的烛光进行形状补间动画的练习。先看效果演示:
新建文档,背景色黑色,其他默认。
[1b]一、制作光圈元件[/1b]
1、点插入—新建元件,影片剪辑,名"光圈"。
2、笔触色禁止,填充色放射状,三个色标:左FFFF00 Alpha100%,中FFFF6E Alpha77%,右FFFFCC Alpha0%,用椭圆工具画个圆,全居中。
3、第15、第30帧加上关键帧,点中第15帧,再点修改—变形—缩放和旋转,缩放150。
4、在图层一上点一下,这样整个图层都被选中了(时间轴为黑色了),再在属性面板里"补间",选择"形状"。
释放下鼠标,时间帧面板的背景色变为淡绿色,在起始帧和结束帧之间有一个长长的实线箭头,表示形状补间动画创建好了。
[1b]二、蜡烛元件制作[/1b]
新建元件,影片剪辑,名"蜡烛" 。
1、第1层,画烛身。禁止填充色, 笔触色CF8453,点椭圆工具,在属性面板里设置实线,大小2。
画一个椭圆,选中圆按住ALT或者 CTRL拖出两个摆放好,再用直线画上两条线。
删掉多余的线条。
放射状填充: F5B778、 F29437、 D74D1F、 923107。色标的摆放如图,用颜色桶填充后,再用填充变形工具调整颜色的位置。
放射状填充:F29C48、F4C402、F2912F、F29437、D74D1F、923107。填充后,再用填充变形工具如果调整颜色的位置。
线性填充:D74D1F、F29437、D14B26。
删除多余的线条,用笔刷工具,颜色8C4F26,刷烛芯。
延长到30帧,图层上锁。
2、新建图层
画火苗。笔触色禁止,填充色线性:左FFFF99 Alpha100%,右FFFF1B Alpha30%,画椭圆,整调形状。第30帧插入关键帧,创建形状补间动画。第5帧插入关键帧,用选择工具(黑箭头工具)调整形状,注意不能调整太过,以免变形不规则,第9帧插入关键帧,继续调整。以此类推,第 13,17,22,26帧都插入关键帧做调整,可以根据自己的感觉去调整,觉得怎么自然就怎么去调,可以只做火苗伸长和压缩,做成上下窜动,也可以再加上左右摆动。
我做的仅供参考,相信大家做的更好。
3、新建图层
点第1帧,从库中把光圈拖入摆放好,用变形工具适当压扁,在属性面板里”颜色”里Alpha设置为50%。
现在回到场景中,从库里把蜡烛元件拖到场景中,摆放好, Ctrl+Enter 测试,另存为*.fla,导出影片*.swf。
[1b]有兴趣的进一步做扩展练习[/1b]
简单提示下:新建一个影片剪辑元件,用上面做好的蜡烛元件做心形运动。再新建一个影片剪辑元件,把上面心形运动的元件拖入场景中,增加图层2写代码:
第1帧上:
var i = 0;
第2帧上:
if (i
第3帧上:
gotoAndPlay(2);
本文转自:http://www.5uflash.com/flashjiaocheng/Flashdonghuajiaocheng/3581.html
发表评论
-
fms 2.0A星寻路
2010-04-09 14:19 590[url=http://creativecommons.org ... -
基于SharedObject做的房间列表和房间及flex源码
2010-04-09 14:19 753基于SharedObject做的房间列表和房间及flex源码 ... -
基于SharedObject做的房间列表和房间及flex源码
2010-04-09 14:18 654基于SharedObject做的房间列表和房间及flex源码 ... -
用flex做的 多服务器 im 及 源码
2010-04-09 14:18 683用GridFlash做多个server 客户端可以链接到任何一 ... -
用flex做的 多服务器 im 及 源码
2010-04-09 14:18 792用GridFlash做多个server 客户端可以链接到任何一 ... -
as3开发的doom
2010-04-09 12:09 561国外的朋友用flex(as3)(作者说是完成开源的开发环境)开 ... -
flash as3调用摄像头
2010-04-09 12:08 971用as3调用摄像头,代码 ... -
flash as3调用摄像头
2010-04-09 12:08 775用as3调用摄像头,代码 ... -
AS3排版类
2010-04-09 12:08 652在製作全Flash的網站的時候, 最常遇到的問題就是版面大小的 ... -
AS3排版类
2010-04-09 12:08 549在製作全Flash的網站的時候, 最常遇到的問題就是版面大小的 ... -
flash cs3测试和发布影片问题
2010-04-08 11:42 666问: 按ctrl+Enter后有导出进度条,但就是没导出影片. ... -
Flash CS3(SWF9) 影片格式反编译的工具ActionScript Viewer 6.0
2010-04-08 11:41 1458全球首个支持 Flash CS3(SWF9) 影片格式反编译的 ... -
Flash CS3也能调试以前的Flash Remoting
2010-04-08 11:41 602用Flash 8调试Flash Remoting程序的话,只需 ... -
Flash CS3也能调试以前的Flash Remoting
2010-04-08 11:41 707用Flash 8调试Flash Remoting程序的话,只需 ... -
flash cs3 组件-Liquid Components
2010-04-08 11:41 555Didier Brun的Liquid Components / ... -
漫画绘制技法大放送(上)
2010-04-08 10:01 488网络收集整理(jundark) [1b]一、人体基本结构[/1 ... -
flash动画形变讨论二:低头
2010-04-08 10:01 553上次说了基本的形变,现在说下提示点,提示点是控制图形变化的基本 ... -
卡通娃娃360度转身动画
2010-04-08 10:01 561超人表情原创大赛正如火如荼的进行中,对于初哥可能就望钱兴叹了, ... -
指针随鼠标移动的flash卡通时钟
2010-04-08 10:00 530。先看下时钟效果: var fnum:Number = ... -
动画人物运动规律与节奏
2010-04-08 10:00 650本文转自:h ...
相关推荐
怎么用flash形状补间绘制摇曳的蜡烛.docx
flash中是一只摇曳的烛光,这个案例非常简单,适合初学者。
摇曳的烛光永恒的母爱.docx
【插件简介】 Bendio是一个After Effects插件,使用起来非常简单,用于弯曲层,能够将其他层作为弯曲的父层。它使用起来既快速又简单,它可以与任何类型的光栅和矢量图层一起使用。v1.0.1版本更新:修复了裁剪问题. ...
纯CSS3实现日落水面光影摇曳动画特效源码.zip
第4章 基础动画 案例10-摇曳的烛光 逐帧动画 4.1 时间轴和帧 4.2 创建逐帧动画
flickering火光摇曳_正态分布的前世今生
利用分形算法,模拟出具有动画效果的分形树
DraggableFlipView An Android View library that flips while dragging. The reason why I made this library is that I wanted to display simple information without leaving the screen. ...
采用递归算法编程实现下列分形树 提供界面允许用户输入分形树迭代次数,由程序绘制树形分形体并动态显示分形树生长过程,并且实现分形树的摇曳显示
摇动树叶的MATLAB动画实验探讨.pdf
摇曳在时光中的女人花
行业分类-设备装置-摇曳震荡收纸台.zip
视觉传感器在航空无人机导航和定位任务中应用越来越广泛。针对无人机位置参数估计问题,提出了一种基于SURF特征的图像配准算法,该算法能够适应航空序列图像的旋转、尺度变换及噪声干扰,实现无人机位置的精确估计。...
ae摆动脚本 快捷实现摆动动画效果 AutoSway 脚本可以制作风吹自由摇曳摆动MG动画,且完全符合重力学 包含两种模式:图层模式,木偶工具模式
大数据-算法-一类流固耦合问题的数值算法及风场中摇曳树木的物理仿真.pdf
摘要:Flash源码,其它应用,Flash素材 夏季草坪,Flash小草花朵动画素材,小草在随风摆动,花儿在摇曳,用Flash来实现一幅大自然的美妙乐章。看似简单的动画,其实有时候实现起来并不是简单的事,在这个Flash片段内,...
#资源达人分享计划#