`
wangangie28
  • 浏览: 48060 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

形状补间制作摇曳的烛光动画

阅读更多

本例讲解用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
分享到:
评论

相关推荐

    怎么用flash形状补间绘制摇曳的蜡烛.docx

    在本文档中,我们将探讨如何使用Flash的形状补间动画技术来绘制摇曳的蜡烛。Flash是一款强大的矢量图形编辑软件,常用于创建动画、交互式内容和网页元素。形状补间是Flash中的一种关键帧动画技术,允许用户通过在...

    html5 3D蜡烛烛光动画特效

    接下来,我们来分析这个3D蜡烛烛光动画的组成部分: 1. **场景(Scene)**:这是3D世界的容器,所有的对象、灯光和相机都会被添加到场景中。在`index.html`中,开发者会创建一个Three.js的Scene实例。 2. **几何体...

    flash制作烛光闪动

    反复使用F6插入关键帧,创建更多补间形状,并持续调整,以实现烛火摇曳的效果。 本教程适合有一定Flash基础的学习者,特别是对选择工具和颜色渐变不熟悉的新手。过程中可能遇到的难点包括形状变形、颜色填充和动画...

    flash实验报告总.pdf

    实验名称:动作补间动画 - 烛光摇曳 实验目的:制作逐帧动画 实验过程: 1. 在图层 1 用矩形工具和椭圆工具画出烛身 2. 新建一层,在图层 2 用椭圆工具画出火苗,用选择工具变形 3. 在图层 2 逐帧插入关键帧,...

    flash烛光源文件.rar

    为了使效果更逼真,开发者可能会使用补间动画来创建火焰的摇曳效果。此外,烛光的阴影和光线投射也非常重要,这部分可能涉及到ActionScript编程,通过计算和改变舞台上的光照效果来实现。 ActionScript是Flash中的...

    FLash教案-基础动画

    这种动画方式适合表现细腻的动作变化,例如“摇曳的烛光”案例中,通过调整烛光的形状和大小,模拟火焰摇摆的效果。 创建逐帧动画有多种方法: 1. **导入静态图片**:将jpg、png等格式的静态图片导入,建立连续的帧...

    基于three黑夜中的烛光特效.zip

    这个特效模拟了黑夜中摇曳的烛光效果,为网页增添了一种神秘而温馨的氛围。 【描述】提到的效果代码具有高度的实用性,可以无缝融入各种网页设计,为用户提供引人入胜的视觉体验。同时,由于代码结构清晰,易于理解...

    HTML5+CSS3实现非常有创意的生日蛋糕动画.zip

    在这个生日蛋糕动画中,`<canvas>`元素可能是用来绘制蛋糕的基本形状、火焰、烛光等元素的关键。开发者可以使用JavaScript与HTML5的Canvas API结合,通过编程方式控制这些元素的运动和交互,实现动态效果。 CSS3则...

    网页模板——纯css3实现超逼真的蜡烛点燃燃烧动画特效源码.zip

    在`@keyframes`中,开发者可以设定动画在不同时间点上的样式,比如蜡烛火焰的形状、颜色以及燃烧速度等。通过调整这些参数,可以创造出逼真的动态效果。 除此之外,源码可能还包含了对蜡烛主体、烛芯、火焰等元素的...

    基于three黑夜中的烛光特效

    在本项目中,“基于three黑夜中的烛光特效”是一个利用Three.js库创建的3D交互式场景,主要展示了在木质纹理地板上摇曳的烛光效果。Three.js是JavaScript的一个库,专门用于在Web浏览器中进行3D图形编程。这个特效...

    基于three黑夜中的烛光特效特效代码

    在本项目中,"基于three黑夜中的烛光特效特效代码"是一个使用Three.js库创建的3D场景,它模拟了在黑暗环境中一根蜡烛燃烧的效果。Three.js是JavaScript的一个库,用于在Web浏览器中创建和展示3D图形,无需用户安装...

    幻灯片模板蜡烛PPT模板.ppt

    3. **动画效果**:“AnimatAnimated ed Candles”可能指的是蜡烛的动态效果,如火焰摇曳、蜡烛点燃或熄灭的过程,这些可以通过PowerPoint的动画功能实现。 4. **字体选择**:“SF Font”可能是指模板中使用的特定...

    unity火焰特效插件

    Unity的火焰特效插件可能包含预设的粒子系统、材质、脚本和动画,这些都可以帮助开发者快速地创建出各种各样的火焰效果,无论是熊熊燃烧的大火还是微弱摇曳的烛光。 首先,让我们深入了解一下Unity的粒子系统。粒子...

Global site tag (gtag.js) - Google Analytics