flash的坐标系详解

【一、前期设置】

我们在舞台上做如下设计：

1、用矩形工具，在舞台上绘制一个无边框的矩形

2、用选择工具单击该矩形，看其属性面板

 

【二、具体讲解】

在属性面板内给出了这个矩形的很多参数。本节课我们只研究“位置和大小”内的X：和Y:

在冒号后面跟着的数字 就是该矩形的x坐标和y坐标。这两个坐标是用来定位的。

1、数学课内的坐标回顾：

就和我们在数学课上学习的坐标系一个道理。在平面直角坐标系（以下简称坐标系）内，任何一个点

都具备x坐标（横坐标）和y坐标（纵坐标）。求取某一个点的横纵坐标的方法是：

过该点引x轴（或y轴）的垂线，垂足在x轴（或y轴）上。垂足和原点之间的距离就是x坐标（或y坐标）

2、flash内的坐标

跟数学课上的道理完全一样，flash软件舞台上也存在着坐标系。因为flash是一种二维动画制作软件，所以，flash的坐标系就是平面直角坐标系

【题外话】：从flashCS4之后，如果你建立AS3的文档，flash还可以模拟三维效果，此时的坐标系就会多出一个轴--z轴。

 

不过，flash的三维是假三维，与3DsMax创作的真三维有着本质的区别。而且，只有{影片剪辑元件和TLF文本}才拥有三维坐标系（图示的是影片剪辑的）。而且，一旦转成三维坐标系，在属性面板内是通过调节“3D定位和查看”来更改xyz数据的（用鼠标在 舞台上直接拖动也可以调节三维坐标，囧），“位置和大小”处于只读状态。

看到了这里，想必你很鸡冻吧，是滴，AS3不仅在编程功能上更强劲，在flash创作上也有着天翻地覆的新特性，是AS2的文件不具备的。

言归正传，我们来看图一：

①坐标系的原点

在flash主场景内，坐标系的原点位于整个舞台的左上角【在元件内部却又不同，文章后面会详解】

②横轴和纵轴

xy轴的位置与数学课上的也一样，但是，y轴的方向与数学课内的完全相反：

数学课上，y轴是越向上，数字越大；但是flash的y轴是越向下，数字越大！

之所以这样设置，是为了让位于舞台内的元件的坐标都是正值

③对象的x、y坐标

众所周知，只有点才具有x、y坐标（以下简称为xy值），但是flash内研究点的情况比较少，多数情况下要研究面。比如本例的矩形。那么，这个矩形的属性面板内的xy值（x坐标和y坐标分别是 60和49）是哪一个点的坐标值呢？

答案是矩形对象左上角的那个点。

因此，属性面板的X:60是如下计算出来滴：

矩形左上角的这个点，向x轴引垂线，垂足与坐标系原点之间的距离等于60个像素

同理，属性面板的Y:49是如下计算出来滴：

矩形左上角的这个点，向y轴引垂线，垂足与坐标系原点之间的距离等于49个像素

这是标准的换算方式，其实我们可以想的更简单一些，看我在图上做的辅助线：

x值可以如下求出：

矩形左上角的这个点，向y轴引垂线，垂线的长度就是60个像素

同理，y值可以如下求出：

矩形左上角的这个点，向x轴引垂线，垂线的长度就是49个像素

由求解过程可知，矩形对象越向右，x值越大；越向下，y值越大

【三、补充说明】

上面我用的是“形状”【属性面板内最上面标注着】对象来说明的。如果“形状”被转换成了元件（包括影片剪辑元件、按钮元件和图形元件），那么进入元件内部后，我们会发现属性面板内的坐标值发生了改变，这就是元件内部的坐标。

1、现在我们将舞台上的矩形用选择工具单击选中，按F8键，会弹出下图的对话框：

 

2、在“类型”里选择“影片剪辑”（其他两种的情况完全一样，不再赘述）

3、“对齐：”这里很重要

共有九个点，默认选择的是第三行第二列的点。这个被选中的点就是元件内部的坐标系原点！

看到这里，有的盆友可能会想到，元件内部会有9个坐标系原点么？那么元件内部对象的xy值是相对于哪一个原点来说的呢？

答案是：元件内部的原点仅有一个。之所以出现9个点的原因是这个矩形形状对象的对齐方式。呵呵

，看不懂吧，别急，接着往下看你就懂了

4、我们一切按照默认的设置，直接点“确定”，画面变成下图：

 

大家可以回到主场景下再分别绘制8个矩形，然后重复上述步骤，将“对齐”的点选择另外8个，依次看一下，就会发现规律。这里不再赘述

5、使用选择工具在4的基础上直接双击舞台上的矩形（现在不再是“形状”，而是“影片剪辑”了）

，就又会看到十字架。这个十字架就是元件内部的原点

 

由图示可知，元件内部的坐标系和主场景内的坐标系，在本质上都是一样的。唯一的区别就是坐标系的原点位置不同。主场景的舞台位置是固定的，于是选择了舞台左上角为原点；但是元件内部其实是一个无限大的二维空间（上图感受不出来），我们使用下面的手段即可验证该结论：

6、打开库面板，双击“元件 1”前面的图标【不能双击“元件 1”这三个字，囧】

 

此时，你再看舞台，就再也找不到刚才的舞台了，整个舞台是无限大的

因此，flash就在元件内部加入了十字架来代表原点。由于舞台无限大，这个十字架的位置说白了，放在哪里都是一样的。所以，十字架的本质是一个相对的概念，其位置是受放入内部的第一个对象的位置所影响的【在转换成元件的时候“对齐”那里】。(⊙o⊙)…真尼玛的难表述，这里只能意会了，本人表述能力有限，囧。

一旦对象被加入了元件内部，原点的位置就固定不变了。所以，原点仅此一个。

7、如此一来，在转换成元件的时候“对齐”那里选择的九个点，其实就是这个对象与原点的位置。

我们可以用选择工具移动元件内部的对象的位置，来改变这个“对齐”

来自http://wyfftell.blog.163.com/blog/static/431455292013113521871/