问题分析
要实现放大镜效果,我们可以使用copypixels()函数:
这个函数将源图片(sourceImageobject)中坐标为sourcerect的区域拷贝到imageObject中坐标为destinationRect或destinationQuad的区域,这样只要sourcerect和destinationrect或者destinationquad的区域大小不一样,我们就可以实现放大、缩小的功能。
重点思路
仔细研究copypixels()函数的语法,我们首先需要确定要放大的原始图片(sourceImageObject)、要放大的区域(sourceRect)以及放大或缩小的倍数,destinationRect可以根据sourceRect和放大缩小的倍数计算出来。
这样,我们就可以根据其原理制作放大镜了,新建一个位图演员,然后根据鼠标点确定放大区域和预设的放大倍数,用copypixels()函数将原始图片复制到新建的位图上,这样就实现了放大效果了。
制作步骤
(1)首先我们将素材导入到演员表中,如图2.1所示,分别命名为“放大镜上的圆”,“放大镜遮板”,“放大镜底图”,“放大层”,其作用在下面会详细说明。然后导入原始的图片,一张美洲的地图。
图片如下:
图2.1 放大镜素材
(2)下面我们开始编写放大镜行为,首先我们定义需要使用的变量
该命令返回的列表用于生成行为参数对话框,在该对话框中我们可定义行为中的参数。下面我们编写放大函数PressZoom()和复原函数UnZoom():
这样,放大镜行为最核心的部分就基本完成,下面来编写触发事件行为:
到这里,这个行为就编写完成了。
(3)打开剪辑室,将美洲地图放在第一通道,把演员“放大层”放在第20通道(不一定非要放在第20通道,但要求在其它演员之上),如图2.2所示。
图片如下:
图2.2 剪辑室中放置精灵
(4)然后在帧剧本通道加入Hold on Current Frame行为,给要实现放大效果的精灵即sprite(1)附上上面编写的行为,并设置参数,如图2.3所示。设置放大倍数为2,放大图所在的通道为20,然后点击ok确定按钮。
图片如下:
图2.3 行为参数设置窗口
完成效果
运行程序,在舞台上点击鼠标,观察放大镜效果,如图2.4所示:
图片如下:
图2.4 完成效果图
源文件下载
要实现放大镜效果,我们可以使用copypixels()函数:
imageObject.copyPixels(sourceImageObject, destinationRect, sourceRect) imageObject.copyPixels(sourceImageObject, destinationQuad, sourceRect)
这个函数将源图片(sourceImageobject)中坐标为sourcerect的区域拷贝到imageObject中坐标为destinationRect或destinationQuad的区域,这样只要sourcerect和destinationrect或者destinationquad的区域大小不一样,我们就可以实现放大、缩小的功能。
重点思路
仔细研究copypixels()函数的语法,我们首先需要确定要放大的原始图片(sourceImageObject)、要放大的区域(sourceRect)以及放大或缩小的倍数,destinationRect可以根据sourceRect和放大缩小的倍数计算出来。
这样,我们就可以根据其原理制作放大镜了,新建一个位图演员,然后根据鼠标点确定放大区域和预设的放大倍数,用copypixels()函数将原始图片复制到新建的位图上,这样就实现了放大效果了。
制作步骤
图片如下:
property psprite --自己 property pZoomRate --放大倍数 property pMemberMag --放大镜图片 property pMemberMagMask --镜片部分的掩码图片 property pMemberMagFull --放大镜的全图 property pZoomMember --放置放大图片的演员 property pSouRect --需要放大区域的矩形 property pSourPic --原始角色的图片 property pZoomX --放大点的x坐标 property pZoomY --放大点的y坐标 property pZoomSprite --放置需要放大图片的sprite property pZoomSpriteNum 然后用getPropertyDescriptionList函数来生成行为参数对话框 on getPropertyDescriptionList me mylist =[#pZoomRate:[#comment:"放大倍数",#format: #integer,#default:2 ],\ --设置放大倍数 #pMemberMag:[#comment:"放大镜图片成员",#format: #member,#default:"放大镜上的圆"],\ --对应演员表中的“放大镜上的圆” #pMemberMagMask:[#comment:"放大镜掩码图片",#format: #member,#default:"放大镜遮板"],\ --对应演员表中的“放大镜遮板” #pMemberMagFull:[#comment:"放大镜底图",#format: #member,#default:"放大镜底图"],\ --对应演员表中的“放大镜底图” #pZoomMember:[#comment: "显示放大图的演员",#format: #member,#default:"放大层"],\ --对应演员表中的“放大层” #pZoomSpriteNum:[#comment:"放大图所在的通道",#format: #integer,#default:20]] --设置放大层所在的通道号 return mylist end getPropertyDescriptionList
该命令返回的列表用于生成行为参数对话框,在该对话框中我们可定义行为中的参数。下面我们编写放大函数PressZoom()和复原函数UnZoom():
on ProcessZoom me cursor(200) --隐藏光标 pSourStagePic=(the Stage).image --将舞台图像保存在pSourStagePic中 pZoomPoint=the clickloc --将当前鼠标的位置保存在pZoomPoint pZoomX=(pMemberMag.image.width+pZoomRate)/pZoomRate pZoomY=(pMemberMag.image.Height+pZoomRate)/pZoomRate pSouRect=rect(pZoompoint-point(pZoomx,pZoomY)/2,pZoomPoint+point(pZoomX,pZoomY)/2) --设置需要放大的区域,其大小为放大镜显示区域大小除以放大倍数,位置在当前鼠标点 tmpSouPic=pMemberMag.image.duplicate() tmpSouPic.copypixels(pSourStagePic,tmpSouPic.rect,pSouRect) --从pSourStagePic中复制pSouRect区域的图像到tmpSouPic中,并放大到tmpSouPic.rect tmpSouPic.copypixels(pMemberMagMask.image,tmpSouPic.rect,tmpSouPic.rect,[ink:3]) --注意此处放大镜遮板的作用,其圆圈周围都是黑色 tmpAllPic = pMemberMagFull.image.duplicate() tmpAllPic.copypixels(tmpSouPic,tmpSouPic.rect,tmpSouPic.rect,[#ink:1]) --ink 1效果为透明效果,此处是将tmpSouPic中的图片原大小保存在tmpAllPic中,然后加上了透明 --效果,实质是复制了放大镜中的圆形区域 pZoomSprite.member.image=tmpAllPic --将tmpAllPic中保存的图像附给pZoomSprite的演员 pZoomSprite.locH=pZoomPoint.locH pZoomSprite.locV=pZoomPoint.locV --设置pZoomSprite的位置 pZoomSprite.visible=TRUE --设置pZoomSprite为可见 updatestage end on UnZoom me,aSprite pZoomSprite.Visible=FALSE --设置pZoomSprite为不可见 cursor(0) --将光标设置为箭头 end
这样,放大镜行为最核心的部分就基本完成,下面来编写触发事件行为:
on BeginSprite me --初始化 pSprite = sprite(me.spriteNum) pZoomSprite =sprite(pZoomSpriteNum) --pSprite为要放大图片精灵,pZoomSprite为显示放大图片效果的精灵 pZoomSprite.visible=FALSE --将pZoomSprite设置为不可见 end on mouseenter me cursor(302) --当鼠标滑入时,将光标换成放大光标 end on mouseleave me cursor(0) --当鼠标滑出时,将光标换成正常箭头光标 end on MouseDown me ProcessZoom me --按下鼠标时,调用放大效果函数ProcessZoom(),实现图片的放大效果 end on MouseUp me unZoom(me,pSprite) cursor(302) --在要放大图片区域内释放鼠标时,调用复原函数unZoom(),然后将光标换成放大光标 end on MouseUpOutSide me unZoom(me,pSprite) cursor(0) --在要放大图片区域外释放鼠标时,调用复原函数unZoom(),然后将光标换成箭头光标 end
到这里,这个行为就编写完成了。
图片如下:
图片如下:
完成效果
运行程序,在舞台上点击鼠标,观察放大镜效果,如图2.4所示:
图片如下:
源文件下载
回复Comments
作者:
{commentrecontent}