下面小编为大家带来Flash AS实现的一个水波效果动画（共含5篇），希望能帮助大家!同时，但愿您也能像本文投稿人“加多宝牌小丸子”一样，积极向本站投稿分享好文章。
主要使用了遮罩和beginGradientFill来实现,对机器要求比较高,机器不是很好的朋友慎狂点...
点击查看Flash:
/UploadPic/-7/200778135930565.swf
主要代码如下:
var WaveArray:Array = new Array;
var rel_btn:MovieClip = this.loader.btn;
this.createEmptyMovieClip(“gradient_mc”, 3);
gradient_mc.cacheAsBitmap = true;
mc.cacheAsBitmap = true;
onMouseDown = function () {
new Wave(WaveArray);
};
onEnterFrame = draw;
function draw() {
with (gradient_mc) {
clear();
spreadMethod = “pad”;
interpolati;
fillType = “radial”;
colors = [0x00FFFF, 0xFFFFFF, 0x00FFFF];
var wal:Number = WaveArray.length;
for (var i:Number = 0; i
alphas = [0, WaveArray.A, 0];
var t:Number = WaveArray.R-10;
ratios = [t>0 ? t : 0, WaveArray.R, WaveArray.R+10];
focalPointRatio = 0;
matrix = {matrixType:“box”, x:WaveArray.X-550, y:WaveArray.Y-400, w:550*2, h:400*2, r:180*Math.PI};
beginGradientFill(fillType, colors, alphas, ratios, matrix, spreadMethod, interpolationMethod, focalPointRatio);
moveTo(0, 0);
lineTo(0, 400);
lineTo(550, 400);
lineTo(550, 0);
lineTo(0, 0);
endFill();
}
}
mc.setMask(gradient_mc);
}
wave.as 中的代码如下：///////////////////////////////////////////www.25swf.com
//////code by 25swf
//////tinsgao@126.com
//////.11.23
////////////////////////////////////////////////////////////////////
import flash.geom.Point;
class Wave {
///////////////////////////field/////////////////////////
private var m_alpha:Number = 100;
private var m_ratio:Number = 0;
private var m_point:Point;
private var rel_array:Array;
private var m_iner:Number;
////////////////////////////attribute////////////////////
function get A() {
return m_alpha;
}
function get R() {
return m_ratio;
}
function get X() {
return m_point.x;
}
function get Y() {
return m_point.y;
}
/////////////////////////////////////////////////////////
function Wave(_array:Array) {
this.rel_array = _array;
_array.push(this);
m_point = new Point(_root._xmouse, _root._ymouse);
this.m_iner = setInterval(function (_rel) {
_rel.m_alpha--;
_rel.m_ratio+=2;
if (_rel.m_alpha<=1) {
_rel.Del();
clearInterval(_rel.m_iner);
}
}, 50, this);
}
function Del() {
for (var a in rel_array) {
if (rel_array[a] == this) {
rel_array.splice(a, 1);
}
}
delete this;
}
}
这篇文章主要介绍了一个全屏的加载动画效果实现, 主要依赖于文中所提到的Snap.svg动画库,需要的朋友可以参考下
如果您曾经访问过 Nicolas Zezuka 和 Active Theory 的出色的设计网站，你可能已经注意到在显示新内容之前动感的页面加载动画了，这种风格的动画效果最近非常流行，因此这篇文章想给你带来一些启示。
这个效果的核心是让一个形状在页面窗口中动画显示并有展示活动的指示。当新内容被加载时，形状将以动画显示返回显示的页面。我们将使用 Snap.svg 动画库来实现，因为这个库让我们能够创建复杂的形状和有趣的变形转换效果。
在线演示
需要注意的是，这里的示例只是提供一种思路，动态内容加载是模拟的。另外没有做降级处理，动画和伪元素可能在某些浏览器无法正常工作。
温馨提示：为保证最佳的效果，请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。
我们显示遮罩的方式是，定义一个 SVG 路径动画：
我们定义的初始路径在页面中是看不到的，开始和结果路径分别定义在 data-opening 和 data-closing 属性中。正如你所看到的，我们使用的是小型的 viewBox，但我们舒展绘图窗口的宽度和高度为100%，而不是保持长宽比。如果我们没有定义一个闭合的路径，我们将动画回到初始路径。
请注意，我们也可以添加多个路径（用分号隔开），它允许 SVG 绘制你将在第一演示中看到的步骤明智的动画。 我们设置叠加划分到一个固定的位置，覆盖了整个页面，并通过给 ::before 和 ::after 伪元素添加样式来实现加载提示效果。
JavaScript. Code复制内容到剪贴板
.pageload-overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
visibility: hidden;
}
.pageload-overlay.show {
visibility: visible;
}
.pageload-overlay svg {
position: absolute;
top: 0;
left: 0;
}
.pageload-overlay svg path {
fill: #fff;
}
我们在这里使用 visibility，因为使用这些固定的风格定位与指针以及 SVG 的事件可能在移动端有些问题，所以我们通过定位和操纵父 DIV 来代替，
你可能已经注意到，圆形动画也从一个路径到另一个路径变换来实现（当然有其他的实现方式，例如缩放） ，但我们使用以下值来确定圆是响应式（ Rseponsive）的：
XML/HTML Code复制内容到剪贴板
width=“100%”height=“100%”viewBox=“0 0 80 60”preserveAspectRatio=“xMidYMid slice”
使用 slice 将保持纵横比，但这样整个页面显示区域都可以被 viewBox 覆盖。我们的示例创建13种效果，但正如你所看到的，可能性是无止境的。我们真的很希望你能获得启发。
渐变
大家不知有没有研究过FLASH的形变功能,十分之强大,可以说是神奇!做一个简单的圆形形变就可以实现出复杂的动画效果,二话不说,先看看我做的这个效果先:其实做法很简单，只是用到了一个技术点而已，
一个简单的圆形渐变实现复杂的动画效果...
，
如下：
1、先在场景中画一个圆，然后去其填充，将边线条改为虚线；
2、在30贞（随便你在哪一贞）处插入一个关键贞，将线条转换为填充（最关键的一步）；
3、做形变动画；
OK！大功告成！是不是觉得超简单叻！有兴趣的话试试看吧
1、启动PowerPoint，新建一演示文稿，并取好名保存好。
2、在幻灯片中输入相应的字符，然后用“绘图”工具栏中的“箭头”按钮在幻灯片中画出若干个箭头，并填充上不同的色彩。
3、将希望从左(右)移动移动到右(左)的箭头，定位在幻灯片右(左)外侧，让箭头尾部位于幻灯片边缘。
4、选中其中某个箭头(如第一个自左向右移动的箭头)，执行“幻灯片放映自定义动画”命令，展开“自定义动画”任务窗格，
5、按其中的“添加”效果按钮，在随后出现的下拉列表中，选择“进入→进入”选项，然后在任务窗格中，将“方向”设置为“自左侧”、“速度”设置为“中速”(根据实际需要设置。
6、再双击相应的动画条，打开“飞入”对话框，切换到“计时”标签下，将“重复”选项设置为“直到幻灯片末尾”，确定返回。
7、再依次选中其他箭头，依照上面的操作设置好动画。
注意：①后面箭头的动画，除了完成上述设置外，请在任务窗格中将“开始”选项设置为“之后”(全部设置完成)。
②如果左、右箭头交替设置则效果更佳。
8、按下F5功能，看看放映的效果。
跟随|鼠标
先看效果因为全是as编写的，所以我就不放源文件了，只要把as代码复制到flash里的第一帧就可以了
Stage.scaleMode = “noScale”
Stage.align = “TL”
for (i=1; i<=4; i++) {
_root.createEmptyMovieClip(“point”+i, 0-i);//新建MC
//mc的x轴，y轴
_root[“point”+i]._x = Stage.width/2;
_root[“point”+i]._y = Stage.height/2;
//鼠标划过的效果
_root[“point”+i].onMouseMove = function() {
this._x = _root._xmouse+(Math.random()*70)-35;
this._y = _root._ymouse+(Math.random()*70)-35;
};
}
//设定一个颜色组
hexColors = new Array(“0xCC00FF”, “0xCC33FF”, “0xCC66FF”, “0xCC99FF”, “0xCCCCFF”, “0xCCFFFF”);
//鼠标划过时新建mc，并随机填充颜色和随机设alpha值
this.onMouseMove = function() {
i++;
this.createEmptyMovieClip(“shape”+i, i *10);
with (this[“shape”+i]) {
beginFill(hexColors[Math.floor(Math.random()*hexColors.length)], (Math.random()*40)+60);
//执行画线程序
moveTo(_root.point1._x, _root.point1._y);
curveTo(_root.point2._x, _root.point2._y, _root.point3._x, _root.point3._y);
curveTo(_root.point4._x, _root.point4._y, _root.point1._x, _root.point1._y);
endFill();
}
//复制当前mc，设X，Y轴，alpha值，并填充颜色，做为阴影，
this[“shape”+i].duplicateMovieClip(“shadow”+i, (10*i)-1);
this[“shadow”+i]._x = this[“shape”+i]._x -6;
this[“shadow”+i]._y = this[“shape”+i]._y + 6;
this[“shadow”+i]._alpha = 60;
this.grey = new Color(this[“shadow”+i]);
this.grey.setRGB(“0x999999”);
};
只做了简单的解释，适合有as基础的朋友学习
Stage.scaleMode = “noScale”;
Stage.align = “TL”;
for (i=1; i<=4; i++) {
_root.createEmptyMovieClip(“point”+i, 0-i);
//新建MC
//mc的x轴，y轴
_root[“point”+i]._x = Stage.width/2;
_root[“point”+i]._y = Stage.height/2;
//鼠标划过的效果
_root[“point”+i].onMouseMove = function() {
this._x = _root._xmouse+(Math.random()*70)-35;
this._y = _root._ymouse+(Math.random()*70)-35;
};
}
//设定一个颜色组
hexColors = new Array(“0xCC00FF”, “0xCC33FF”, “0xCC66FF”, “0xCC99FF”, “0xCCCCFF”, “0xCCFFFF”);
//鼠标划过时新建mc，并随机填充颜色和随机设alpha值
this.onMouseMove = function() {
i++;
this.createEmptyMovieClip(“shape”+i, i*10);
with (this[“shape”+i]) {
beginFill(hexColors[Math.floor(Math.random()*hexColors.length)], (Math.random()*40)+60);
//执行画线程序
moveTo(_root.point1._x, _root.point1._y);
curveTo(_root.point2._x, _root.point2._y, _root.point3._x, _root.point3._y);
curveTo(_root.point4._x, _root.point4._y, _root.point1._x, _root.point1._y);
endFill();
}
//复制当前mc，设X，Y轴，alpha值，并填充颜色，做为阴影。
this[“shape”+i].duplicateMovieClip(“shadow”+i, (10*i)-1);
this[“shadow”+i]._x = this[“shape”+i]._x-6;
this[“shadow”+i]._y = this[“shape”+i]._y+6;
this[“shadow”+i]._alpha = 60;
this.grey = new Color(this[“shadow”+i]);
this.grey.setRGB(“0x999999”);
};
//加了一段删除的
var ii:Number = 6;
function del() {
if (_root[“shape”+ii]) {
_root[“shape”+ii].removeMovieClip();
_root[“shadow”+ii].removeMovieClip();
ii++;
}
}
setInterval(del, 10);
效果如下：
原来的其实更好看,越改越不好看了
import mx.transitions.Tween;
import mx.transitions.easing.*;
var i:Number = 0;
var mcname:Number = 0;
var x:Number = _xmouse, y:Number = _ymouse;
var rgb:Array = new Array(“0”, “1”, “2”, “3”, “4”, “5”, “6”, “7”, “8”, “9”, “A”, “B”, “C”, “D”, “E”, “F”);
var mousemove:Object = new Object();
mousemove.onMouseMove = function() {
fline();
};
function fline() {
var a:Number = Math.floor(Math.random()*16);
var b:Number = Math.floor(Math.random()*16);
var c:Number = Math.floor(Math.random()*16);
var d:Number = Math.floor(Math.random()*16);
var e:Number = Math.floor(Math.random()*16);
var f:Number = Math.floor(Math.random()*16);
var g:Number = Math.floor(Math.random()*6);
this.createEmptyMovieClip(“line”+i, i);
mycolor = new Color(this[“line”+i]);
mycolor.setRGB(“0x”+rgb[a]+rgb[b]+rgb[c]+rgb[d]+rgb[e]+rgb[f]);
with (this[“line”+i]) {
lineStyle(g, 0x0000, 100);
moveTo(x, y);
lineTo(_xmouse, _ymouse);
}
x = _xmouse;
y = _ymouse;
mcname_mc = this[“line”+i];
i++;
}
setInterval(enterframes, 10);
function enterframes() {
if (_root[“line”+mcname]) {
fdown(_root[“line”+mcname]);
mcname++;
}
}
function fdown(mc_mc:MovieClip) {
var i:Number = mc_mc._y;
down = new Tween(mc_mc, “_y”, Elastic.easeIn, i, i+200, 1, true);
down.onMotionStopped = function() {
mc_mc.removeMovieClip();
};
}
Mouse.addListener(mousemove);
原来的:
import mx.transitions.Tween;
import mx.transitions.easing.*;
var i:Number = 0;
var mcname:Number = 0;
var x:Number = _xmouse, y:Number = _ymouse;
var mousemove:Object = new Object();
mousemove.onMouseMove = function() {
fline();
};
function fline() {
var a:Number = Math.random()*5;
var b:Number = Math.random()*100;
this.createEmptyMovieClip(“line”+i, i);
with (this[“line”+i]) {
lineStyle(1, 0x0000, 100);
moveTo(x, y);
lineTo(_xmouse, _ymouse);
}
x = _xmouse;
y = _ymouse;
mcname_mc = this[“line”+i];
i++;
}
setInterval(enterframes, 10);
function enterframes() {
if (_root[“line”+mcname]) {
fdown(_root[“line”+mcname]);
mcname++;
}
}
function fdown(mc_mc:MovieClip) {
var i:Number = mc_mc._y;
down = new Tween(mc_mc, “_y”, Elastic.easeIn, i, i+200, 1, true);
down.onMotionStopped = function() {
mc_mc.removeMovieClip();
};
}
Mouse.addListener(mousemove);
效果如下：
★ 水波卖牛阅读答案
★ 动画策划书
★ 动画个人简历
