莫相离 发表于 2015-1-15 22:42:55

动画教程之Flash静态缓冲图片导航制造详解

与位图图形相比,矢量图形需要的内存和存储空间小很多,因为它们是以数学公式而不是大型数据集来表示的。位图图形之所以更大,是因为图像中的每个像素都需要一组单独的数据来表示。
<P>  缓冲公式在制造殊效中十分有效,出名的三星导航菜单就用到了此公式。如今很多网站出尽风头,个中缓冲导航是其一年夜亮点。本文以一德国网站的导航为例,详解缓冲导航的制造。这个效果是我和溶剂配合完成的,他供应坐标的算法,我供应缩放的算法。

  本例效果演示


鼠标划过的部分图片会变年夜
  制造思绪

[*]图片缩放把持
使用缓冲公式设置图片的缩放比例,假如鼠标滑过某图片,缩小1.8倍。假如别的图片的序号与此图片的序号相差1,就是此图片双方的图片,缩小1.4倍,别的的为原始巨细。
[*]图片坐标把持
当某图片缩小时,相邻的图片的坐标即是此图片的坐标加上这两张图片的宽度的一半,完成图片无间距分列。
[*]线条和笔墨把持
线条用画线函数完成,笔墨的坐标和缩放比例与对应的图片不异。
  制造历程
  1、启动Flash,新建一个影片,设置影片巨细为600px*200px。
  筹办好如图中的素材,图片的实例名分离为zjs0到zjs4,笔墨的实例名分离为z0到z4。
  把两头的图片坐标设为(300,130),选中全体的图片,按CTRL+K修改分列面板,设置为顶部对齐,使图片的y坐标不异,图片的x坐标经由过程AS来把持。用一样的办法使方字的y坐标不异,并调剂好笔墨和图片的间距。

  2、在主场景中的第一帧上增加以下代码
//猎取两头图片的x坐标for(vari=0;i<5;i++){this["zjs"+i].n=i;//每一个图片MC下界说一个变量this["zjs"+i].onRollOver=function(){control=true;//鼠标滑过图片时为真};this["zjs"+i].onRollOut=function(){control=false;//鼠标移出图片时为假};}onEnterFrame=function(){for(vark=0;k<5;k++){this["z"+k]._x=this["zjs"+k]._x;//申明笔墨的x坐标即是本应图片的x坐标this["z"+k]._xscale=this["zjs"+k]._xscale;this["z"+k]._yscale=this["zjs"+k]._yscale;//申明笔墨的缩放比例与图片不异}if(control){mouse_in();}else{mouse_out();}//前提真或假时挪用函数};//坐标设置函数functionsetX(){for(vark=-2;k<3;k++){this["zjs"+(k+2)]._x=myx+this["zjs"+2]._width*k;//以两头图片为准无间距分列}for(vark=Number(temp1)+1;k<5;k++){//temp1为缩放比例最年夜的图片下的变量值varmc1=this["zjs"+k];varmc2=this["zjs"+(k-1)];//此图片右侧的别的图片mc1._x=mc2._x+(mc2._width+mc1._width)/2-1;//设置这些图片的x坐标,1为打消图片间的清闲}for(vark=Number(temp1)-1;k>-1;k--){varmc1=this["zjs"+k];varmc2=this["zjs"+(k+1)];mc1._x=mc2._x-(mc2._width+mc1._width)/2+1;}//缩放比例最年夜的图片的右边的图片的x坐标设置myLine();//图片下方的线条}//比例缩放函数functionmove_scale(x,obj){speed=(x-obj._xscale)*.65+speed*0.6;obj._xscale+=speed;obj._yscale+=speed;//缓冲公式,x为图片的缩放比例,obj为MC}//鼠标滑过图片时,图片的缩放、x坐标设置函数functionmouse_in(){for(vari=0;i<5;i++){varmc=this["zjs"+i];//取得实例名if(mc.hitTest(_xmouse,_ymouse,true)){move_scale(180,mc);//假如鼠标位于图片的上方,图片缩小1.8倍temp1=mc.n;//把此图片下的变量赋给变量temp1}elseif(Math.abs(mc.n-temp1)==1){move_scale(140,mc);//两侧的图片比例缩小1.4倍}else{move_scale(100,mc);//别的的图片为原始巨细}}setX();//设置图片的x坐标}//鼠标移出图片时,图片的缩放、x坐标设置函数functionmouse_out(){for(vari=0;i<5;i++){move_scale(100,this["zjs"+i]);//缩放比例为1,恢回复始巨细}setX();//坐标回复}//线条函数functionmyLine(){createEmptyMovieClip("line",1);//创立一个空影片with(line){lineStyle(0.1,0xff9933,100);moveTo(zjs0._x-zjs0._width/2,zjs0._y+10);lineTo(zjs4._x+zjs4._width/2,zjs4._y+10);//图片下方程度的直线moveTo(zjs0._x-zjs0._width/2,zjs0._y+5);lineTo(zjs0._x-zjs0._width/2,zjs0._y+15);//右侧垂直的直线moveTo(zjs4._x+zjs4._width/2,zjs4._y+5);lineTo(zjs4._x+zjs4._width/2,zjs4._y+15);//右边垂直的直线}}

  按CTRL+ENTER测试,本例制造完成。把握道理后,加上好的创意,信任你能做出更好的殊效。

“fla”是Flash的原始档,只能用对应版本或更高版本的Flash打开编辑。

再现理想 发表于 2015-1-17 18:26:25

Flash插件的最新版本允许设计者控制Box之外的元素和把Flash元素放在HTML或其它元素上面或下面,这就为交互性打开了一个崭新的世界。

深爱那片海 发表于 2015-1-26 21:32:00

在与制作传统动画相比较的同时,flash具有便捷、节省人力财力,节约时间、推广方便的许多优势。但与此同时它也具有一点的缺点。

冷月葬花魂 发表于 2015-2-11 03:43:57

Flash也支持alpha通道,这会使设计者高兴。没有太多的技术性,alpha通道是附加在图像上的信息 - 允许图像以不同的方式渲染。

再见西城 发表于 2015-3-1 21:09:14

时间期限本身就是一个优点,因为它可以让你确定一个祯率。电视每秒刷新屏幕30次,电影每秒刷新屏幕24次。Flash的祯率是可变的。

透明 发表于 2015-3-11 01:53:09

专业的建筑动画、产品动画、角色动画、flash动画、游戏美工等全方位服务的创意动漫公司。十年专业的动漫制作经验,为政府、企业等制作出无数优秀的创意动画设计产品。

第二个灵魂 发表于 2015-3-17 19:12:07

还有,艺术上的优势——各异的风格;创作手法独特;独立性和原创性;拓展出新的表达空间;

分手快乐 发表于 2015-3-24 23:13:12

单纯的做动画而言,flash动画与传统动画有很多差别,这里会为你介绍什么是flash与flash与传统动画相比具有的优点和缺点,而进一步了解flash动画
页: [1]
查看完整版本: 动画教程之Flash静态缓冲图片导航制造详解