adidas网站动画效果如何做?
时间:2008-11-10
来源:互联网
http://www.adidas.com/cn/homepage.asp
这个动画采用的是什么技术?想研究一下,动画下载下来却不是网上看到的那样
[ 本帖最后由 网上飘 于 2008-11-10 14:25 编辑 ]
这个动画采用的是什么技术?想研究一下,动画下载下来却不是网上看到的那样
[ 本帖最后由 网上飘 于 2008-11-10 14:25 编辑 ]
作者: 网上飘 发布时间: 2008-11-10
和这个有点类似
http://www.hubltd.com/
只不过adi的那个对象,onRollOver的时候会展开,宽度高度会发生变化而已~
至于你说的技术是指flash所用到一些主要方法吗?
xml+pic,tween类(自定义的缓冲),Point类等
我上面提供的那个网址,以前也是论坛里有人询问的效果~因为我之前模仿过,如果有需要的话,我可以提供源文件 ,不过要晚上去了,源文件在家里
因为之前有网友在论坛里提出http://www.hubltd.com/这个图片效果的原理,所以我在博客里做了一个模仿的效果,因为只是简单的模仿,代码效率也懒得去优化了,所以也没有在论坛里贴出来,只是简单在博客里写了点
首先要说明的是,原网站的特效是swf+xml的,我这不是,因为我比较懒!:)
如果有需要的话,可以自己修改,原理都是一样的
http://www.hubltd.com/
只不过adi的那个对象,onRollOver的时候会展开,宽度高度会发生变化而已~
至于你说的技术是指flash所用到一些主要方法吗?
xml+pic,tween类(自定义的缓冲),Point类等
我上面提供的那个网址,以前也是论坛里有人询问的效果~因为我之前模仿过,如果有需要的话,我可以提供源文件 ,不过要晚上去了,源文件在家里

因为之前有网友在论坛里提出http://www.hubltd.com/这个图片效果的原理,所以我在博客里做了一个模仿的效果,因为只是简单的模仿,代码效率也懒得去优化了,所以也没有在论坛里贴出来,只是简单在博客里写了点
首先要说明的是,原网站的特效是swf+xml的,我这不是,因为我比较懒!:)
如果有需要的话,可以自己修改,原理都是一样的
复制内容到剪贴板
var dx:Number = 10;
var dy:Number = 10;
var mc_num:Number = 8;//场景中放8个命名为mc1...mc8的影片剪辑,这里你改为xml的时候,就根据图片的数目来定义了
for (var i:Number = 1; i<=mc_num; i++) {
var tempMC:MovieClip = this["mc"+i];
tempMC.orgX = tempMC._x;
tempMC.orgY = tempMC._y;
tempMC.go = false;
tempMC.onRollOver = function() {
mymove(this);
};
tempMC.onRollOut = function() {
delete this.onMouseMove;
huifu(this);
};
tempMC.onEnterFrame = function (){
if(this.go){
this._x += (this.orgX-this._x)/10;
this._y += (this.orgY-this._y)/10;
if(Math.abs(this._x-this.orgX)<0.5){
this.go =false;
}
}
}
}
function huifu(obj) {
for (var a:Number = 1; a<=mc_num; a++) {
var tempmc = this["mc"+a];
if (tempmc != this) {
tempmc.go = true;
}
}
}
function mymove(obj) {
obj.onMouseMove = function() {
for (var k:Number = 1; k<=mc_num; k++) {
var otherMC:MovieClip = this._parent["mc"+k];
otherMC.id = k;
if (otherMC != this) {
var myWidth:Number = this._width/2;
var myHeight:Number = this._height/2;
var mypoint:Point = new Point(this._x, this._y);
var mousepoint:Point = new Point(_xmouse, _ymouse);
var distanceBetween:Number = Point.distance(mypoint, mousepoint);
if (otherMC._x<=this._x) {
otherMC.X = -1;
} else {
otherMC.X = 1;
}
if (otherMC._y<=this._y) {
otherMC.Y = -1;
} else {
otherMC.Y = 1;
}
var p1 = {x:_xmouse, y:_ymouse};
var p2 = {x:this._x, y:this._y};
var myrotation = angle(p1, p2);
var yiX:Number = Math.abs(distanceBetween*Math.cos(myrotation));
var yiY:Number = Math.abs(distanceBetween*Math.sin(myrotation));
var disx:Number = Math.abs((myWidth-yiX)*dx/myWidth);
var disy:Number = Math.abs((myHeight-yiY)*dy/myHeight);
otherMC._x = otherMC.orgX+otherMC.X*disx;
otherMC._y = otherMC.orgY+otherMC.Y*disy;
}
}
};
}
function angle(p1, p2) {
var disx = p1.x-p2.x;
var disy = p1.y-p2.y;
var ro = Math.atan2(disy, disx);
return ro;
}
代码:
import flash.geom.Point;var dx:Number = 10;
var dy:Number = 10;
var mc_num:Number = 8;//场景中放8个命名为mc1...mc8的影片剪辑,这里你改为xml的时候,就根据图片的数目来定义了
for (var i:Number = 1; i<=mc_num; i++) {
var tempMC:MovieClip = this["mc"+i];
tempMC.orgX = tempMC._x;
tempMC.orgY = tempMC._y;
tempMC.go = false;
tempMC.onRollOver = function() {
mymove(this);
};
tempMC.onRollOut = function() {
delete this.onMouseMove;
huifu(this);
};
tempMC.onEnterFrame = function (){
if(this.go){
this._x += (this.orgX-this._x)/10;
this._y += (this.orgY-this._y)/10;
if(Math.abs(this._x-this.orgX)<0.5){
this.go =false;
}
}
}
}
function huifu(obj) {
for (var a:Number = 1; a<=mc_num; a++) {
var tempmc = this["mc"+a];
if (tempmc != this) {
tempmc.go = true;
}
}
}
function mymove(obj) {
obj.onMouseMove = function() {
for (var k:Number = 1; k<=mc_num; k++) {
var otherMC:MovieClip = this._parent["mc"+k];
otherMC.id = k;
if (otherMC != this) {
var myWidth:Number = this._width/2;
var myHeight:Number = this._height/2;
var mypoint:Point = new Point(this._x, this._y);
var mousepoint:Point = new Point(_xmouse, _ymouse);
var distanceBetween:Number = Point.distance(mypoint, mousepoint);
if (otherMC._x<=this._x) {
otherMC.X = -1;
} else {
otherMC.X = 1;
}
if (otherMC._y<=this._y) {
otherMC.Y = -1;
} else {
otherMC.Y = 1;
}
var p1 = {x:_xmouse, y:_ymouse};
var p2 = {x:this._x, y:this._y};
var myrotation = angle(p1, p2);
var yiX:Number = Math.abs(distanceBetween*Math.cos(myrotation));
var yiY:Number = Math.abs(distanceBetween*Math.sin(myrotation));
var disx:Number = Math.abs((myWidth-yiX)*dx/myWidth);
var disy:Number = Math.abs((myHeight-yiY)*dy/myHeight);
otherMC._x = otherMC.orgX+otherMC.X*disx;
otherMC._y = otherMC.orgY+otherMC.Y*disy;
}
}
};
}
function angle(p1, p2) {
var disx = p1.x-p2.x;
var disy = p1.y-p2.y;
var ro = Math.atan2(disy, disx);
return ro;
}
作者: libins 发布时间: 2008-11-10
谢谢libins,我研究一下
作者: 网上飘 发布时间: 2008-11-10
我把http://www.adidas.com/cn/homepage.asp这个页面的文件按目录重组了一下,却无法正常浏览动画里面内容,能帮我看看是怎么回事吗?
flash站.rar
flash站.rar
作者: 网上飘 发布时间: 2008-11-10
跪求源文件,刚刚给斑竹发了求助短信息
作者: mzdxopt 发布时间: 2010-11-23
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读:74
-
如何安装mysql8.0
阅读:31
-
Word快速设置标题样式步骤详解
阅读:28
-
20+道必知必会的Vue面试题(附答案解析)
阅读:37
-
HTML如何制作表单
阅读:22
-
百词斩可以改天数吗?当然可以,4个步骤轻松修改天数!
阅读:31
-
ET文件格式和XLS格式文件之间如何转化?
阅读:24
-
react和vue的区别及优缺点是什么
阅读:121
-
支付宝人脸识别如何关闭?
阅读:21
-
腾讯微云怎么修改照片或视频备份路径?
阅读:28