第二问:如何实现放大镜效果

      DirectorFAQ 2004-11-26 16:15:00
问题分析
要实现放大镜效果,我们可以使用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()函数将原始图片复制到新建的位图上,这样就实现了放大效果了。
制作步骤
  • (1)首先我们将素材导入到演员表中,如图2.1所示,分别命名为“放大镜上的圆”,“放大镜遮板”,“放大镜底图”,“放大层”,其作用在下面会详细说明。然后导入原始的图片,一张美洲的地图。

    图片如下:

    图2.1 放大镜素材

  • (2)下面我们开始编写放大镜行为,首先我们定义需要使用的变量
    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
    

    到这里,这个行为就编写完成了。
  • (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 完成效果图


     源文件下载
  • 标签集:TAGS:
    回复Comments() 点击Count()
    喜欢就顶一下

    回复Comments

    {commentauthor}
    {commentauthor}
    {commenttime}
    {commentnum}
    {commentcontent}
    作者:
    {commentrecontent}