最近上网看到这样一个效果:
当一段FLASH动画播放完毕后(或者点击一个FLASH按钮),整个IE窗口振动了一下,呵呵,感觉此效果很是震撼,于是便研究了一下,并且做了出来,不敢独享,拿出来共享之
效果实例:
http://www.gtma.cn/fm/jc/shake.html预备工作:
1、Dreamweaver或者其他的网页编辑工具(记事本也行,不过推荐Dreamweaver,本教程将以Dreamweaver作为范本讲解)
2、FLASH(废话……)
开始制作:
·Dreamweaver篇
1、首先打开Dreamweaver,新建一个Html文件,并且切入到代码编辑模式
2、在<head></head>段时间插入以下代码:
function shake_xy(n) { if (self.moveBy) { for (i = 10; i > 0; i--) { for (j = n; j > 0; j--) { self.moveBy(0,i); self.moveBy(i,0); self.moveBy(0,-i); self.moveBy(-i,0); } } } } function shake_x(n) { if (self.moveBy) { for (i = 10; i > 0; i--) { for (j = n; j > 0; j--) { self.moveBy(i,0); self.moveBy(-i,0); } } } } function shake_y(n) { if (self.moveBy) { for (i = 10; i > 0; i--) { for (j = n; j > 0; j--) { self.moveBy(0,i); self.moveBy(0,-i); } } } } </SCRIPT> |
|
※到上面步骤Dreamweaver部分已经完结,若你想现在就直接在IE中看看效果,可以将<body>改为:
<body onLoad="shake_xy(5)"> |
|
此时按下F12预览已经可以在IE中看到效果了(注重:此时只能在IE中看,其他核心的浏览器不支持这个动作,当然,IE的外壳程序(如MYIE2等等)也不能看,因为程序的框架关系,MOVETO不能将MYIE2的FROM进行位移动作,因此这个效果只能用IE看,若你的浏览器是MYIE2,并且设置了默认,你可以在开始菜单/桌面上打开一个IE,然后点击文件-打开-浏览,打开你保存的这个页面,也可以看到效果,多次刷新可以多次看到效果)
【注重!这里※这一个操作步骤只是给你直接在IE中看看效果,若要结合FLASH的动画出现振动,而不使IE一出现就振动,请将<body>段还原为初始状态,也就是说※这一步不进行操作】
※※※注重将这个文件保存为shake.htm※※※
·FLASH篇
这里相对于Dreamweaver就要简单多了,整个FLASH就一句getURL的AS,至于在哪里加,就看你自己认为用在哪里合适了(比如一个小人向屏幕打一拳头,整个IE振一下,就可以将这个getURL加在这个小人的这一拳头的最后一帧)
1、首先制作好你的FLASH动画(当然,若懒得做,将这个getURL加在第一帧也可以看到效果,就是这样和上面将<body>改为<body onLoad="shake_xy(5)">效果一样了,呵呵,没什么意义),我的是两个字合在一起窗口出现振动,这是我的图层安排,起个抛砖引玉的作用:
最后一帧的AS是: getURL("javascript :shake_xy(5)"); //调用网页中的AS(因为是将这个FLASH嵌入到网页中了,所以这样写) stop(); |
|
※※※注重将这个文件保存为shake.fla并且导出一个shake.swf,并且尽量避免在FLASH直接按下Ctrl+Enter进行测试,因为当前地没有JS可以调用,可能导致假死※※※ ·融合篇
现在就是说说怎样将两者融合(这里是为了照顾新人和阿菜,老鸟看了不要B4就好):
1、用Dreamweaver打开刚刚用Dreamweaver做的shake.htm,并且切换到设计模式
点击插入栏的FLASH(菜单的插入-媒体-FLASH)
在弹出的窗口中选择刚刚保存的那个shake.swf
导入到Dreamweaver后如图:
OK!大功告成!保存预览吧!
附上源文以及教程包:
下载源文&教程包