flash的座標系詳解

【一、前期設置】
我們在舞臺上做如下設計:
1、用矩形工具,在舞臺上繪製一個無邊框的矩形
2、用選擇工具單擊該矩形,看其屬性面板
第一課補充:flash的座標系詳解 - 網雨霏霏 - 網雨霏霏-電腦軟件(Flash)天地
 
【二、具體講解】
在屬性面板內給出了這個矩形的很多參數。本節課我們只研究“位置和大小”內的X:和Y:
在冒號後面跟着的數字 就是該矩形的x座標和y座標。這兩個座標是用來定位的。

1、數學課內的座標回顧:
就和我們在數學課上學習的座標系一個道理。在平面直角座標系(以下簡稱座標系)內,任何一個點

都具備x座標(橫座標)和y座標(縱座標)。求取某一個點的橫縱座標的方法是:
過該點引x軸(或y軸)的垂線,垂足在x軸(或y軸)上。垂足和原點之間的距離就是x座標(或y座標)

2、flash內的座標
跟數學課上的道理完全一樣,flash軟件舞臺上也存在着座標系。因爲flash是一種二維動畫製作軟件,所以,flash的座標系就是平面直角座標系

【題外話】:從flashCS4之後,如果你建立AS3的文檔,flash還可以模擬三維效果,此時的座標系就會多出一個軸--z軸。
第一課補充:flash的座標系詳解 - 網雨霏霏 - 網雨霏霏-電腦軟件(Flash)天地
 
不過,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鍵,會彈出下圖的對話框:
第一課補充:flash的座標系詳解 - 網雨霏霏 - 網雨霏霏-電腦軟件(Flash)天地
 
2、在“類型”裏選擇“影片剪輯”(其他兩種的情況完全一樣,不再贅述)
3、“對齊:”這裏很重要
共有九個點,默認選擇的是第三行第二列的點。這個被選中的點就是元件內部的座標系原點!
看到這裏,有的盆友可能會想到,元件內部會有9個座標系原點麼?那麼元件內部對象的xy值是相對於哪一個原點來說的呢?
答案是:元件內部的原點僅有一個。之所以出現9個點的原因是這個矩形形狀對象的對齊方式。呵呵

,看不懂吧,別急,接着往下看你就懂了
4、我們一切按照默認的設置,直接點“確定”,畫面變成下圖:
第一課補充:flash的座標系詳解 - 網雨霏霏 - 網雨霏霏-電腦軟件(Flash)天地
 
大家可以回到主場景下再分別繪製8個矩形,然後重複上述步驟,將“對齊”的點選擇另外8個,依次看一下,就會發現規律。這裏不再贅述
5、使用選擇工具在4的基礎上直接雙擊舞臺上的矩形(現在不再是“形狀”,而是“影片剪輯”了)

,就又會看到十字架。這個十字架就是元件內部的原點
第一課補充:flash的座標系詳解 - 網雨霏霏 - 網雨霏霏-電腦軟件(Flash)天地
 
由圖示可知,元件內部的座標系和主場景內的座標系,在本質上都是一樣的。唯一的區別就是座標系的原點位置不同。主場景的舞臺位置是固定的,於是選擇了舞臺左上角爲原點;但是元件內部其實是一個無限大的二維空間(上圖感受不出來),我們使用下面的手段即可驗證該結論:
6、打開庫面板,雙擊“元件 1”前面的圖標【不能雙擊“元件 1”這三個字,囧】
第一課補充:flash的座標系詳解 - 網雨霏霏 - 網雨霏霏-電腦軟件(Flash)天地
 
此時,你再看舞臺,就再也找不到剛纔的舞臺了,整個舞臺是無限大的
因此,flash就在元件內部加入了十字架來代表原點。由於舞臺無限大,這個十字架的位置說白了,放在哪裏都是一樣的。所以,十字架的本質是一個相對的概念,其位置是受放入內部的第一個對象的位置所影響的【在轉換成元件的時候“對齊”那裏】。(⊙o⊙)…真尼瑪的難表述,這裏只能意會了,本人表述能力有限,囧。
一旦對象被加入了元件內部,原點的位置就固定不變了。所以,原點僅此一個。
7、如此一來,在轉換成元件的時候“對齊”那裏選擇的九個點,其實就是這個對象與原點的位置。

我們可以用選擇工具移動元件內部的對象的位置,來改變這個“對齊”

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

發佈了28 篇原創文章 · 獲贊 6 · 訪問量 14萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章