flash怎么做烟花

发布网友发布时间：2022-04-22 01:44

共2个回答

懂视网时间：2022-04-20 15:54

这次给大家带来用H5制作烟花粒子特效的制作方法，怎么用H5制作特效？H5制作烟花粒子特效的流程，H5制作烟花粒子特效的注意事项有哪些，一起来看一下。

<!DOCTYPE html>
<html >
<head>
 <meta charset="UTF-8">
 <title>Canvas烟花粒子特效制作</title>
<meta name="keywords" content=" Canvas烟花粒子特效制作" />
<meta name="description" content=" Canvas烟花粒子特效制作" />
 <link rel="stylesheet" href="css/style.css">
</head>
 
<body>
 <canvas id="canvas">Canvas is not supported by your browser.</canvas>
 <script src="js/index.js"></script>
</body>
</html>
 
Css部分：
* { margin: 0; padding: 0; }
html, body { height: 100%; }
body {
 background: #000;
}
 
canvas {
 display: block;
 cursor: crosshair;
}

相信看了这些案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

相关阅读：

HTML里无法显示背景颜色的解决方法

怎么优化HTML网页

Js获取获取样式的常见方式

热心网友时间：2022-04-20 13:02

首先绘制一个烟花。Ctrl+F8新建一个图片元件，取名烟花。N键调出线条工具如图拉出两条线。
flash遮罩实例——烟花
2

V键改为选择工具，如图拖动线条逐步改变成满意的形状，使其成为烟花的一根线条。填充上颜色，因为将来是作为遮罩层，所以，颜色随意。
flash遮罩实例——烟花
3

选中后按住Alt键复制多个，改变大小、弧度，最后形成一个完整的烟花。
flash遮罩实例——烟花
4

新建一个图片元件，取名彩遮罩。O键调出椭圆工具，按住shift键画出一个正圆，颜色如图设置。
flash遮罩实例——烟花
5

打开库面板，可以用Ctrl+L键打开。选中彩遮罩，右键——直接复制，复制出5个，分别改名：黄、蓝、绿、玫红遮罩。
flash遮罩实例——烟花
6

双击红遮罩，进入编辑，将颜色如图改变，注意中心透明。
flash遮罩实例——烟花
7

其余遮罩颜色如图。真正操作时这些彩色渐变是放在被遮罩层使用。
flash遮罩实例——烟花
flash遮罩实例——烟花
END

二、制作烟花动画

Ctrl+F8新建一个影片剪辑元件，我为它取名烟花组合。前面空出三帧，后面会放入声音，空几帧，造成先有声音，后出烟花的效果。第四帧F6掺入关键帧，放入玫红遮罩。
flash遮罩实例——烟花

新建图层2，同样在第四帧插入关键帧，放入烟花元件。
flash遮罩实例——烟花

图层1第25帧插入关键帧，Q键调出变形工具，按住shift键将玫红遮罩变形框向外拖动，使该元件同比例放大。相反，图层2第25帧插入关键帧，将烟花元件缩小。随后，回到第四帧，为每一层创建补间动画。
flash遮罩实例——烟花

图层2，第26帧F7插入空白关键帧。选中4——25帧，按住Alt键拖动复制到第31帧，使31——52帧出现同样动画。同样，重复刚才的动作，使图层2出现三个烟花由小变大的动画。如图。
flash遮罩实例——烟花

图层1同上处理。随后Ctrl+F3调出属性面板，选中第31帧，点“交换”按钮，在出现的交换元件面板中选择绿遮罩元件，同样将每一组动画的前一帧与最后帧换成相同的遮罩。这里第三组元件我换成了彩遮罩。至此，完成了一个烟花组合。
flash遮罩实例——烟花

图层2右键——遮罩层，将图层2、1改成遮罩与被遮罩关系。
flash遮罩实例——烟花

同样，我们用另外三个遮罩，完成另一种色彩的烟花组合。这里，我复制了一个烟花元件，将每一根线条稍作扭曲，产生断续感。并且将帧数加长，使场景中的烟花渐续绽放。
flash遮罩实例——烟花