仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 784|回复: 7
打印 上一主题 下一主题

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

[复制链接]
莫相离 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 22:42:55 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

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

  本例效果演示


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

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

  2、在主场景中的第一帧上增加以下代码
  1. //猎取两头图片的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通道是附加在图像上的信息 - 允许图像以不同的方式渲染。
再见西城 该用户已被删除
5#
发表于 2015-3-1 21:09:14 | 只看该作者
时间期限本身就是一个优点,因为它可以让你确定一个祯率。电视每秒刷新屏幕30次,电影每秒刷新屏幕24次。Flash的祯率是可变的。
透明 该用户已被删除
6#
发表于 2015-3-11 01:53:09 | 只看该作者
专业的建筑动画、产品动画、角色动画、flash动画、游戏美工等全方位服务的创意动漫公司。十年专业的动漫制作经验,为政府、企业等制作出无数优秀的创意动画设计产品。
第二个灵魂 该用户已被删除
7#
发表于 2015-3-17 19:12:07 | 只看该作者
还有,艺术上的优势——各异的风格;创作手法独特;独立性和原创性;拓展出新的表达空间;
分手快乐 该用户已被删除
8#
发表于 2015-3-24 23:13:12 | 只看该作者
单纯的做动画而言,flash动画与传统动画有很多差别,这里会为你介绍什么是flash与flash与传统动画相比具有的优点和缺点,而进一步了解flash动画
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-5-3 14:35

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表