多语言展示
当前在线:1139今日阅读:84今日分享:32

AS3基础教程-第3课-舞台坐标系

本节课详解flashIDE内的坐标系,以及对象的x坐标和y坐标
工具/原料

flashCS6

一、建立flash文档+界面设计
1

请新建一个AS3.0的flash文档

2

我们在舞台上做如下设计:1、用矩形工具,保证不是“对象绘制”的前提下,在舞台上绘制一个无边框的矩形2、用选择工具单击该矩形,看其属性面板

二、坐标系详解
1

在属性面板内给出了这个矩形的很多参数。本节课我们只研究“位置和大小”内的X:和Y:在冒号后面跟着的数字 就是该矩形的x坐标和y坐标。这两个坐标是用来定位的。

2

数学课内的坐标回顾:就和我们在数学课上学习的坐标系一个道理。在平面直角坐标系(以下简称坐标系)内,任何一个点都具备x坐标(横坐标)和y坐标(纵坐标)。求取某一个点的横纵坐标的方法是:过该点引x轴(或y轴)的垂线,垂足在x轴(或y轴)上。垂足和原点之间的距离就是x坐标(或y坐标)

3

flash内的坐标跟数学课上的道理完全一样,flash软件舞台上也存在着坐标系。因为flash是一种二维动画制作软件,所以,flash的坐标系就是平面直角坐标系【题外话】:从flashCS4之后,如果你建立AS3的文档,flash还可以模拟三维效果,此时的坐标系就会多出一个轴--z轴。不过,flash的三维是假三维,与3DsMax创作的真三维有着本质的区别。而且,只有{影片剪辑元件和TLF文本}才拥有三维坐标系(图示的是影片剪辑的)。而且,一旦转成三维坐标系,在属性面板内是通过调节“3D定位和查看”来更改xyz数据的(用鼠标在 舞台上直接拖动也可以调节三维坐标),“位置和大小”处于只读状态。看到了这里,想必你很鸡冻吧,是滴,AS3不仅在编程功能上更强劲,在flash创作上也有着天翻地覆的新特性,是AS2的文件不具备的。

三、对象的xy坐标
1

言归正传,我们来看本节课的第一张图:①坐标系的原点在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值越大

2

上面我用的是“形状”【属性面板内最上面标注着】对象来说明的。如果“形状”被转换成了元件(包括影片剪辑元件、按钮元件和图形元件),那么进入元件内部后,我们会发现属性面板内的坐标值发生了改变,这就是元件内部的坐标。①现在我们将舞台上的矩形用选择工具单击选中,按F8键,会弹出下图的对话框。②在“类型”里选择“影片剪辑”(其他两种的情况完全一样,不再赘述)③“对齐:”这里很重要共有九个点,默认选择的是第三行第二列的点。这个被选中的点就是元件内部的坐标系原点!看到这里,有的盆友可能会想到,元件内部会有9个坐标系原点么?那么元件内部对象的xy值是相对于哪一个原点来说的呢?答案是:元件内部的原点仅有一个。之所以出现9个点的原因是这个矩形形状对象的对齐方式。呵呵

3

看不懂吧,别急,接着往下看你就懂了。我们一切按照默认的设置,直接点“确定”,画面变成下图。大家可以回到主场景下再分别绘制8个矩形,然后重复上述步骤,将“对齐”的点选择另外8个,依次看一下,就会发现规律。这里不再赘述

4

使用选择工具直接双击舞台上的矩形(现在不再是“形状”,而是“影片剪辑”了),就又会看到十字架。这个十字架就是元件内部的原点(下图)

5

由图示可知,元件内部的坐标系和主场景内的坐标系,在本质上都是一样的。唯一的区别就是坐标系的原点位置不同。主场景的舞台位置是固定的,于是选择了舞台左上角为原点;但是元件内部其实是一个无限大的二维空间(上图感受不出来),我们使用下面的手段即可验证该结论:此时,你再看舞台,就再也找不到刚才的舞台了,整个舞台是无限大的因此,flash就在元件内部加入了十字架来代表原点。由于舞台无限大,这个十字架的位置说白了,放在哪里都是一样的。所以,十字架的本质是一个相对的概念,其位置是受放入内部的第一个对象的位置所影响的【在转换成元件的时候“对齐”那里】。(⊙o⊙)…真尼玛的难表述,这里只能意会了,本人表述能力有限,囧。一旦对象被加入了元件内部,原点的位置就固定不变了。所以,原点仅此一个。

6

如此一来,在转换成元件的时候“对齐”那里选择的九个点,其实就是这个对象与原点的位置。我们可以用选择工具移动元件内部的对象的位置,来改变这个“对齐”

注意事项

截图在帖子中,造成的不便请谅解

推荐信息