- 浏览: 48046 次
- 性别:
- 来自: 天津
-
最新评论
本例讲解用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 621[url=http://creativecommons.org ... -
基于SharedObject做的房间列表和房间及flex源码
2010-04-09 14:19 784基于SharedObject做的房间列表和房间及flex源码 ... -
基于SharedObject做的房间列表和房间及flex源码
2010-04-09 14:18 696基于SharedObject做的房间列表和房间及flex源码 ... -
用flex做的 多服务器 im 及 源码
2010-04-09 14:18 719用GridFlash做多个server 客户端可以链接到任何一 ... -
用flex做的 多服务器 im 及 源码
2010-04-09 14:18 832用GridFlash做多个server 客户端可以链接到任何一 ... -
as3开发的doom
2010-04-09 12:09 598国外的朋友用flex(as3)(作者说是完成开源的开发环境)开 ... -
flash as3调用摄像头
2010-04-09 12:08 1016用as3调用摄像头,代码 ... -
flash as3调用摄像头
2010-04-09 12:08 806用as3调用摄像头,代码 ... -
AS3排版类
2010-04-09 12:08 677在製作全Flash的網站的時候, 最常遇到的問題就是版面大小的 ... -
AS3排版类
2010-04-09 12:08 568在製作全Flash的網站的時候, 最常遇到的問題就是版面大小的 ... -
flash cs3测试和发布影片问题
2010-04-08 11:42 710问: 按ctrl+Enter后有导出进度条,但就是没导出影片. ... -
Flash CS3(SWF9) 影片格式反编译的工具ActionScript Viewer 6.0
2010-04-08 11:41 1507全球首个支持 Flash CS3(SWF9) 影片格式反编译的 ... -
Flash CS3也能调试以前的Flash Remoting
2010-04-08 11:41 643用Flash 8调试Flash Remoting程序的话,只需 ... -
Flash CS3也能调试以前的Flash Remoting
2010-04-08 11:41 748用Flash 8调试Flash Remoting程序的话,只需 ... -
flash cs3 组件-Liquid Components
2010-04-08 11:41 580Didier Brun的Liquid Components / ... -
漫画绘制技法大放送(上)
2010-04-08 10:01 514网络收集整理(jundark) [1b]一、人体基本结构[/1 ... -
flash动画形变讨论二:低头
2010-04-08 10:01 594上次说了基本的形变,现在说下提示点,提示点是控制图形变化的基本 ... -
卡通娃娃360度转身动画
2010-04-08 10:01 595超人表情原创大赛正如火如荼的进行中,对于初哥可能就望钱兴叹了, ... -
指针随鼠标移动的flash卡通时钟
2010-04-08 10:00 561。先看下时钟效果: var fnum:Number = ... -
动画人物运动规律与节奏
2010-04-08 10:00 693本文转自:h ...
相关推荐
在本文档中,我们将探讨如何使用Flash的形状补间动画技术来绘制摇曳的蜡烛。Flash是一款强大的矢量图形编辑软件,常用于创建动画、交互式内容和网页元素。形状补间是Flash中的一种关键帧动画技术,允许用户通过在...
接下来,我们来分析这个3D蜡烛烛光动画的组成部分: 1. **场景(Scene)**:这是3D世界的容器,所有的对象、灯光和相机都会被添加到场景中。在`index.html`中,开发者会创建一个Three.js的Scene实例。 2. **几何体...
反复使用F6插入关键帧,创建更多补间形状,并持续调整,以实现烛火摇曳的效果。 本教程适合有一定Flash基础的学习者,特别是对选择工具和颜色渐变不熟悉的新手。过程中可能遇到的难点包括形状变形、颜色填充和动画...
实验名称:动作补间动画 - 烛光摇曳 实验目的:制作逐帧动画 实验过程: 1. 在图层 1 用矩形工具和椭圆工具画出烛身 2. 新建一层,在图层 2 用椭圆工具画出火苗,用选择工具变形 3. 在图层 2 逐帧插入关键帧,...
为了使效果更逼真,开发者可能会使用补间动画来创建火焰的摇曳效果。此外,烛光的阴影和光线投射也非常重要,这部分可能涉及到ActionScript编程,通过计算和改变舞台上的光照效果来实现。 ActionScript是Flash中的...
这种动画方式适合表现细腻的动作变化,例如“摇曳的烛光”案例中,通过调整烛光的形状和大小,模拟火焰摇摆的效果。 创建逐帧动画有多种方法: 1. **导入静态图片**:将jpg、png等格式的静态图片导入,建立连续的帧...
这个特效模拟了黑夜中摇曳的烛光效果,为网页增添了一种神秘而温馨的氛围。 【描述】提到的效果代码具有高度的实用性,可以无缝融入各种网页设计,为用户提供引人入胜的视觉体验。同时,由于代码结构清晰,易于理解...
在这个生日蛋糕动画中,`<canvas>`元素可能是用来绘制蛋糕的基本形状、火焰、烛光等元素的关键。开发者可以使用JavaScript与HTML5的Canvas API结合,通过编程方式控制这些元素的运动和交互,实现动态效果。 CSS3则...
在`@keyframes`中,开发者可以设定动画在不同时间点上的样式,比如蜡烛火焰的形状、颜色以及燃烧速度等。通过调整这些参数,可以创造出逼真的动态效果。 除此之外,源码可能还包含了对蜡烛主体、烛芯、火焰等元素的...
在本项目中,“基于three黑夜中的烛光特效”是一个利用Three.js库创建的3D交互式场景,主要展示了在木质纹理地板上摇曳的烛光效果。Three.js是JavaScript的一个库,专门用于在Web浏览器中进行3D图形编程。这个特效...
在本项目中,"基于three黑夜中的烛光特效特效代码"是一个使用Three.js库创建的3D场景,它模拟了在黑暗环境中一根蜡烛燃烧的效果。Three.js是JavaScript的一个库,用于在Web浏览器中创建和展示3D图形,无需用户安装...
3. **动画效果**:“AnimatAnimated ed Candles”可能指的是蜡烛的动态效果,如火焰摇曳、蜡烛点燃或熄灭的过程,这些可以通过PowerPoint的动画功能实现。 4. **字体选择**:“SF Font”可能是指模板中使用的特定...
Unity的火焰特效插件可能包含预设的粒子系统、材质、脚本和动画,这些都可以帮助开发者快速地创建出各种各样的火焰效果,无论是熊熊燃烧的大火还是微弱摇曳的烛光。 首先,让我们深入了解一下Unity的粒子系统。粒子...