Flash基础入门:Flash中的注册点和中心点
Vivian 2018-05-30 来源 : 阅读 3168 评论 0

摘要:本次的Flash基础入门,用一句话概括注册点和中心点的作用,那就是:注册点用来定位,中心点用来变形。当然,这句话不是非常准确,只是暂时先这么理解,下面会详细讲解。希望对大家学习Flash基础入门有所帮助。

    本次的Flash基础入门,用一句话概括注册点和中心点的作用,那就是:注册点用来定位,中心点用来变形。当然,这句话不是非常准确,只是暂时先这么理解,下面会详细讲解。希望对大家学习Flash基础入门有所帮助。

认识注册点

每个元件都有一个注册点。在元件编辑窗口、或在舞台中选中一个元件实例时,可以看到元件上有一个“十”字型的标记,这就是注册点了,如图所示。其他类型的元素,例如形状、位图、文本等也有注册点,但不可见,并且始终位于这些元素的左上角。

 

   Flash基础入门:Flash中的注册点和中心点             Flash基础入门:Flash中的注册点和中心点

 

    在舞台中选中一个元件实例                               元件编辑窗口

 

元素的定位

 

既然说注册点主要的作用是用来定位,那么我们就要首先了解Flash中的元素是如何定位的。


Flash Player要显示一个元素,首先要定位它,即计算它在舞台中的坐标。Flash Player按下面的方法来计算一个元素在舞台中的位置:

 

          X = x + Δx

          Y = y + Δy

 

其中,X、Y表示元素的绝对坐标(或称为舞台坐标、全局坐标);x、y为元素相对于其父元素的坐标(或相对坐标、局部坐标);Δx和Δy为其父元素在舞台中的坐标。

 

这类似于文件系统中的绝对路径和相对路径:一个文件的绝对路径是由它相对于它的父文件夹的相对路径与该父文件夹相对于根目录的绝对路径所组成的。(有点拗口^ ^)

 

当将一个元素直接添加到舞台上时,例如直接在舞台上绘制图形,它的相对坐标和绝对坐标是相同的。因为它的父元素就是舞台。而当元素位于元件内部时,在Flash属性面板中显示的元素坐标其实是它与元件的相对坐标。Flash Player在定位时,需要先计算它的绝对坐标,然后才能将其绘制到舞台的指定位置。

 

坐标的确定

 

我们知道,在普通的直角坐标系中,一个点的坐标用它与横轴和纵轴的距离来表示(这里我们仅将讨论范围限定在第一象限中,其他象限可由第一象限以某种方式对称得到),其中与纵轴的距离称为横坐标,与横轴的距离称为纵坐标。

 

例如点(x, y)表示该点距离横轴y个单位、距离纵轴x个单位。

Flash基础入门:Flash中的注册点和中心点

在Flash中也是一样,元素的坐标是其与参照系的横、纵轴的距离。不同的是,在Flash中横轴仍然是自左向右方向,但纵轴却是自上向下的方向,即坐标原点位于参照系的左上角。大部分计算机显示系统都采用这种方式,例如Windows的显示器屏幕、浏览器中的内容区域等。如下图

Flash基础入门:Flash中的注册点和中心点

注意:坐标系如何选取不是最重要的,只要选定了一种坐标系并确定坐标原点,就能据此确定其中任何一点的位置。

 

现在,我们有了坐标系,也为坐标指定了其数学意义,是否可以说现在就能够计算元素的坐标了呢?

 

但是,稍微等一下,这里还有一个问题。在普通坐标系中,我们讨论的是点,点是没有大小的,所以当说到一个点的坐标时,实际情况与我们的直观感觉是一致的。但在Flash中,我们讨论的是几何图形,一个几何图形和一个点有本质差别,几何图形具有大小(或面积),如何能够确定一个几何图形的坐标呢?

 

这就要靠注册点来完成了。注册点是一个元素的坐标“基准点”,或称为参照点。元素的坐标就是它的注册点在当前参照系中的坐标。

 

例如,将元件实例添加到舞台时,以元件注册点相对于舞台左上角的距离作为元件的坐标。当元件坐标为(0,0)时表示元件的注册点位于舞台左上角,而坐标为(50, 50)时表示元件的注册点位于距离舞台左侧和顶部各50像素的位置,如下图所示。其中白色区域是舞台,灰色区域为剪贴板区域。

 

 Flash基础入门:Flash中的注册点和中心点Flash基础入门:Flash中的注册点和中心点

 

当坐标分别为(0,0)和(50,50)时元件相对于舞台的位置

 

对于元件内部的元素来说,参照系发生了变化——坐标原点变成了元件的注册点,而不再是舞台的左上角。

 

元件所包含的每个子元素也有自己的注册点,它们在元件内的坐标就是它们的注册点相对于元件注册点的坐标,如下图所示。

 

      Flash基础入门:Flash中的注册点和中心点        Flash基础入门:Flash中的注册点和中心点

 

元件中的每个元素都有自己的注册点和中心点


注意:图中矩形和圆形的注册点位于它们的左上角,且是隐藏的,图中显示的“十”字型图标是元件自身的注册点。

 

当Flash Player要定位元件中的元素时(例如这里的矩形和圆形),首先定位元件,获得元件的坐标,然后根据元件的子元素相对于元件的坐标来计算它们相对于舞台的坐标。

 

改变定位的基准点

 

默认是以元素的注册点作为基准点来计算元素的坐标的,但可以改变这种设置。

 

在信息面板中,可以选择是以注册点还是中心点来作为元素的基准点。在下面左图中,信息面板中X、Y坐标的左侧小图标显示为,表示此时以注册点为基准点。点击此小图标,信息面板变为右图的样式,小图标变为了,同时X和Y坐标的值也发生了变化,表明此时是以中心点为基准点。

 

 Flash基础入门:Flash中的注册点和中心点              Flash基础入门:Flash中的注册点和中心点

 

   以注册点为基准点时的坐标                   以中心点为基准点时的坐标

 

改变元素的基准点时,元素在舞台上的实际位置不会改变,改变的只是元素的坐标。Flash不会移动元素来适应新的基准点,而是以新的基准点来重新计算元素的坐标。

 

除元件外,在形状、位图、文本等元素的信息面板中,都有这里介绍的2种坐标参考方式。对于这些类型的元素来说,它们的注册点总是在左上角,中心点总是在其几何中心(例如圆形的几何中心是圆心、矩形的几何中心则是其对角线的交点,等等)。

 

提示:尝试改变元素的基准点,并在舞台中来回移动元素,或者在信息面板中指定坐标值来观察效果,可以更好地理解本文的内容。

 

中心点

 

任何可以通过变形工具进行变形的元素,都有一个中心点。用变形工具选中元素时,在元素中以一个小圆圈的图标表示它的中心点。

 

当创建一个元素时(图形、位图、文本等),中心点默认在其几何中心。可以使用变形工具选中该元素,然后拖动它的中心点图标,以改变中心点位置。

 

虽然像前面所说的那样,可以在信息面板中将元素的中心点指定为坐标参照点,但中心点的主要作用仍然是作为元素变形时的参照点。在对元素进行拉伸、旋转等变形操作时,元素的各个部分以中心点为基准进行变化。以旋转为例,对上图中的2种不同的情况按顺时针旋转一定角度后,分别得到下面两种结果:

 

   

           Flash基础入门:Flash中的注册点和中心点Flash基础入门:Flash中的注册点和中心点

                    中心点位置不同时旋转的效果也不同

 

为了看得更清楚,我特意在正在旋转时进行截图,这样就能同时看到旋转前(以浅色显示)和旋转后(以正常颜色显示)的状态了。

 

可以将元素想象成在中心点钉了一根钉子,元素旋转时将绕着钉子旋转。

 

注意:利用变形工具改变“形状”元素的中心点,其效果总是暂时的,一旦取消选择,中心点又会回到其几何中心的位置。相比之下,改变元件的中心点的效果则是永久的。

 

AS3中的参照点

 

在AS3中为影片剪辑或按钮元件设置坐标时(图形元件无法通过AS3访问),总是以元件的注册点为参照点来放置元件,而不管在信息面板中为该元件指定了哪种参考方式。通过代码创建的实例也是一样。

 

一个例子

 

说了这么多,我们以一个简单例子来作为总结。假设在一个射击游戏中,玩家位于屏幕左侧,敌人在右侧,从玩家发出的子弹沿着一条水平线从左至右移动。程序会在每次移动后对子弹进行检测,如果子弹已经到达了敌人的位置,则表示敌人被击中了,如图所示。这里假设子弹和敌人两个元件的注册点都位于左上角,在图中以“十”字型标识。

 

 Flash基础入门:Flash中的注册点和中心点

 

在每次移动子弹后,检查其x坐标是否大于等于敌人的x坐标,结果为true表示子弹“击中”了敌人(当然,可以使用AS3的hitTestObject()或hitTestPoint()来检测,但为了说明问题,这里使用“手动”的方式):

 

if (bullet.x >= enemy.x) {

    // hit the enemy

}

 

这种检测方法并不严谨,会导致与玩家实际观测到的结果不一致,考虑下面这种临界情况:

Flash基础入门:Flash中的注册点和中心点

显然,此时子弹已经击中了敌人,但因为子弹的坐标仍然小于敌人的坐标,所以上面的检测代码返回false。(图中的子弹距离敌人的头部还有少许的距离,但我们在这里规定子弹到达敌人的左边缘时即表示击中,而不考虑此处是否具有有效的像素)

 

为了修正检测方法,我们必须考虑注册点的影响,由于子弹的注册点在左侧,而我们想要实现的效果是当子弹右侧接触敌人时就表示命中,而子弹右侧边缘的坐标等于其实际坐标加上子弹的宽度,即:

 

bullet.x + widthOfBullet

 

通常,元素的宽度可以用其width属性来获得,因此修正后的检测方法为:

 

if (bullet.x + bullet.width >= enemy.x) {

    // hit the enemy

}

 

这样就能始终返回正确的结果了。

思考题:如果子弹和敌人的注册点都位于元件的几何中心,此时的检测方法应该是怎样的?

很简单,不是吗?如果你理解了注册点的含义的话。^ ^

本文由职坐标整理并发布,了解更多内容,请关注职坐标常用软件Flash频道!


本文由 @Vivian 发布于职坐标。未经许可,禁止转载。
喜欢 | 2 不喜欢 | 0
看完这篇文章有何感觉?已经有2人表态,100%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程