56張圖詳細分解Flash CS6中對齊面板的使用

Flash CS6的“對齊面板”用於舞臺中對象的對齊、分佈、匹配大小、間隔等操作。就是下圖這個東東:

wKioL1m5GumRlsciAAA1-eD3n1Q749.jpg

它是動畫製作過程中用於“排兵佈陣”的好幫手。教學中發現學生對“對齊面板”的瞭解經常是初淺的,只有模模糊糊的一個概念,不能把握其真正的精髓。因此,決定使用比較形象的圖來分解這些操作,讓學生對把握其精髓,好“排兵佈陣”。(真是應了一句網絡語:不作不死!圖解共截了56張圖,很辛苦的。。。。。。)

一、先看操作選項

從上圖的“對齊面板”截圖可知,對齊的設置包含:

  1. 對齊:左對齊、居中中齊、右對齊、頂對齊、垂直中齊、底對齊;

  2. 分佈:頂部分佈、垂直居中分佈、底部分佈、左側分佈、垂直居中分佈、右側分佈;

  3. 匹配大小:匹配寬度、匹配高度、匹配寬和高;

  4. 間隔:垂直平均間隔、水平平均間隔;

  5. “與舞臺對齊”複選框:選中表示參照舞臺進行設置,沒選中則形狀或對象的對齊與舞臺無關,只是各個形狀或對象之間的相對關係。

二、對齊

1.左對齊

(1)當“與舞臺對齊”被選中

以下圖爲例:

wKioL1m5HDCTNHj3AACBegeSDAA897.jpg

點擊“左對齊”,則長方形、五邊形、圓的左邊框線對齊舞臺左邊框線,效果如下:

wKioL1m5HGWynM83AABWy5WhePA614.jpg

(2)當“與舞臺對齊”沒被選中

以下圖爲例:

wKioL1m5HJ_RGe4hAAB3XBV0500759.jpg

點擊“左對齊”,則五邊形、圓左邊框線對齊長方形左邊框線,效果如下:

wKiom1m5HOSzwqlxAABeKEfXN-E028.jpg

2.居中中齊

(1)當“與舞臺對齊”被選中

以下圖爲例:

wKioL1m5HQGDtOO0AACIiRhExkg787.jpg

點擊“居中中齊”,則長方形、五邊形、圓寬度中點的垂直線對齊舞臺水平中點的垂直線,效果如下:

wKiom1m5HUPSWwATAABiQXv4jcI338.jpg

(2)“與舞臺對齊”沒被選中

以下圖爲例:

wKioL1m5HUHT6DdSAACh_BdsJ5k289.jpg

點擊“居中中齊”,則長方形、五邊形、圓寬度中點的垂直線對齊長方形左邊框線與圓右邊框線間距的中點的垂直線,效果如下:

wKioL1m5HVrhm9BCAAB-k8D0WKs629.jpg

3.右對齊

(1)“與舞臺對齊”被選中

以下圖爲例:

wKioL1m5Ha7yFcNcAACFSJxH--0817.jpg

點擊“右對齊”,則長方形、五邊形、圓的右邊框線對齊舞臺右邊框,效果如下:

wKioL1m5HdLDJn5BAABekdMhcOI738.jpg

(2)“與舞臺對齊”沒被選中

以下圖爲例:

wKiom1m5HiTDtTNDAAB44SxW2SQ914.jpg

點擊“右對齊”,則長方形、五邊形的右邊框線對齊圓的右邊框線,效果如下:

wKiom1m5HkmhZZUKAABjQyfMLoE522.jpg

4.頂對齊

(1)“與舞臺對齊”被選中

以下圖爲例:

wKioL1m5HlOjb8FvAAB-gAkGStg352.jpg

點擊“頂對齊”,則圓、長方形、五邊形上邊框對齊舞臺上邊框,效果如下:

wKioL1m5HnKiBDi6AABkImLXzYc385.jpg

(2)“與舞臺對齊”沒被選中

以下圖爲例:

wKiom1m5HsOR7sQtAAB5TsH06nc556.jpg

點擊“頂對齊”,則長方形、五邊形上邊框對齊圓上邊框,效果如下:

wKiom1m5HtrSsdl0AABiwzXiwic491.jpg

5.垂直中齊

(1)“與舞臺對齊”被選中

以下圖爲例:

wKiom1m5Hw2gm0QgAACd_ZOJUEI760.jpg

點擊“垂直中齊”,則圓、長方形、五邊形的高度中點水平線對齊舞臺高度中點水平線,效果如下:

wKioL1m5HwWyQOFgAABzO1IXU7c547.jpg

(2)“與舞臺對齊”沒被選中

以下圖爲例:

wKioL1m5HzKyuwbjAAC89KKSLj0492.jpg

點擊“垂直中齊”,則圓、長方形、五邊形高度中點的水平線對齊圓上邊框線與五邊形下邊框線間距的中點的水平線,效果如下:

wKioL1m5H07hz3HeAAB3Itwludk443.jpg

6.底對齊

(1)“與舞臺對齊”被選中

以下圖爲例:

wKiom1m5H6_DmflvAACWzzQt6Po426.jpg

點擊“底對齊”,則圓、長方形、五邊形的下邊框對齊舞臺的下邊框線,效果如下:

wKiom1m5H8mg1WibAABwcgVrm0E599.jpg

(2)“與舞臺對齊”沒被選中

以下圖爲例:

wKioL1m5H8XBS3ylAACDm1TKEp0997.jpg

點擊“底對齊”,則圓、長方形的下邊框線對齊五邊形的下邊框線,效果如下:

wKioL1m5H-Gg3ABAAAB3knF2CEg308.jpg

三、分佈

1.頂部分佈

(1)“與舞臺對齊”被選中

以下圖爲例:

wKiom1m5IGTBbpUoAAClC5a1TSY629.jpg

點擊“頂部分佈”,則:

A、最上對象(指y軸座標最小的)上邊框線對齊舞臺上邊框線,最下對象(指y軸座標最大的)下邊框線對齊舞臺下邊框線;

B、分佈的起始線是舞臺上邊框線,終止線是最下對象上邊框線;

C、計算起始與終止的間距s=y-y1y代表舞臺高度,y1代表最下對象高度);

D、計算對象間的分佈間距f=s/(n-1),其中n是要分佈的對象個數(包含最上對象與最下對象);

E、計算最上對象與最下對象之間各對象的y軸值=m*f,其中m代表中間對象中各y軸值的從1開始從小到大的排序序號(即在中間的對象中y軸值最小的爲1,次小的爲2,依次類推)

F、分佈對象各自的x軸值不變。

上圖:五邊形爲最上對象,五邊形上邊框線對齊舞臺上邊框線;長方形爲最下對象,長方形下邊框線對齊舞臺下邊框線;舞臺高度400px,長方形高度100px,則s=400px-100px=300pxf=300px/(3-1)=150px,圓的y軸座標值=1*150px=150px,各自對象的x軸不變。

效果如下:

wKioL1m5ILuhDvArAACNbcNPcXs502.jpg

(2)“與舞臺對齊”沒被選中

以下圖爲例:

wKiom1m5IQmS7PFLAACHlTJ3zX8845.jpg

點擊“頂部分佈”,則:

A、最上對象y軸座標爲y1,最下對象y軸座標爲y2,這兩對象y軸值不變;

B、計算分佈的起始與終止間距s=y2-y1

C、計算對象間的分佈間距f=s/(n-1),其中n是要分佈的對象個數

D、計算最上對象與最下對象之間各對象的y軸值=m*f,其中m代表中間對象中各y軸值的從1開始從小到大的排序序號(即在中間的對象中y軸值最小的爲1,次小的爲2,依次類推)

E、分佈對象各自的x軸值不變。

如上圖:圓y軸值最小,是最上對象,y軸值不變,長方形y軸值最大,是最下對象,y2=280pxy1=100pxs=280px-100px=180pxf=180px/(3-1)=90px,五邊形的y軸值=100px+90px=190px,各個對象的x軸值不變。效果如下:

wKiom1m5IWyRlVZiAABvfROdAHQ392.jpg

2.垂直居中分佈

(1)“與舞臺對齊”被選中

以下圖爲例:

wKioL1m5IYLjidHuAACwxelmz1I444.jpg

點擊“垂直居中分佈”,則:

A、最上對象(y軸加高度一半的值最小)上邊框線對齊舞臺上邊框線,最下對象(y軸加高度一半的值最大)下邊框線對齊舞臺下邊框線;

B、計算分佈的起始與終止間距s=y1-y2,其中y1=舞臺高度-最下對象高度/2y2=最上對象的高度/2

C、計算對象間的分佈間距f=s/(n-1),其中n是要分佈的對象個數;

D、計算最上對象與最下對象之間各對象的y軸值=m*f+y2-對象高度/2,其中m代表中間對象中各y軸值的從1開始從小到大的排序序號(即在中間的對象中y軸值最小的爲1,次小的爲2,依次類推)

E、分佈對象各自的x軸值不變。

如上圖:圓爲最上對象,方爲最下對象,y1=400px-100px/2=350pxy2=60px/2=30pxs=350px-30px=320pxh=320px/(3-1)=160px,五邊形的y軸值=1*160px+30px-70px/2=155px,各對象x軸值不變。效果如下:

wKiom1m5IkajAD8aAABwguqVhi4911.jpg

(2)“與舞臺對齊”沒被選中

以下圖爲例:

wKiom1m5InaDZmOvAACWdkAJpwE832.jpg

點擊“垂直居中分佈”,則:

A、y1表示最上對象(y軸加高度一半的值最小)y軸座標,y2表示最下對象(y軸加高度一半的值最大)y軸座標,最上對象與最下對象y軸不變;

B、計算分佈的起始與終止間距s=(y2+最下對象的高度/2)-(y1+最上對象的高度/2)

C、計算對象間的分佈間距f=s/(n-1),其中n是要分佈的對象個數;

D、計算最上對象與最下對象之間各對象的y軸值=m*f+(y1+最上對象的高度/2)-對象高度/2,其中m代表中間對象中各y軸值的從1開始從小到大的排序序號(即在中間的對象中y軸值最小的爲1,次小的爲2,依次類推)

E、分佈對象各自的x軸值不變。

如上圖:y1=100pxy2=280pxs=(280px+100px/2)-(100px+60px/2)=330px-130px=200pxf=200px/(3-1)=100px,五邊形的y軸座標=1*100px+(100px+60px/2)-70px/2=100px+130px-35px=195px效果如下:

wKioL1m5Ip_QGQ2KAACAe870Tbw846.jpg

3.底部分佈

(1)“與舞臺對齊”被選中

以下圖爲例:

wKiom1m5IxORTLZnAAB28rQGJ1Y689.jpg

點擊“底部分佈”,則:

A、最上對象y軸加高度值最小)上邊框線對齊舞臺上邊框,最下對象y軸加高度值最大)下邊框線對齊舞臺下邊框;

B、計算分佈的起始與終止間距s=舞臺高度-最上對象高度,起始於是最上對象下邊框,終止於舞臺下邊框;

C、計算對象間的分佈間距f=s/(n-1),其中n是要分佈的對象個數;

D、計算最上對象與最下對象之間各對象的y軸值=m*f+h-yh,其中m代表中間對象中各y軸值的從1開始從小到大的排序序號(即在中間的對象中y軸值最小的爲1,次小的爲2,依次類推),h代表最上對象的高度,yh代表當前對象的高度;

E、分佈對象各自的x軸值不變。

如上圖:s=400px-60px=340pxf=340px/(3-1)=170px,五邊形的y軸值=1*170px+60px-70px=160px,各自對象的x軸值不變。效果如下:

wKioL1m5Iz_wEXOGAABqmpx1A3E578.jpg

(2)“與舞臺對齊”被沒選中

以下圖爲例:

wKioL1m5I2aSvv-PAACGJcqJPss219.jpg

點擊“底部分佈”,則:

A、最上對象y軸加高度值最小)與最下對象y軸加高度值最大)y軸值不變,最上對象y軸加高度值最小)y軸值爲y1,最下對象y軸加高度值最大)y軸值爲y2

B、計算分佈的起始與終止間距s=(y2+h2)-(y1+h1),其中h2是最下對象的高度,h1是最上對象的高度,起始於是最上對象下邊框,終止於最下對象下邊框;

C、計算對象間的分佈間距f=s/(n-1),其中n是要分佈的對象個數;

D、計算最上對象與最下對象之間各對象的y軸值=m*f+y1+h1-yh,其中m代表中間對象中各y軸值的從1開始從小到大的排序序號(即在中間的對象中y軸值最小的爲1,次小的爲2,依次類推),yh代表當前對象的高度;

E、分佈對象各自的x軸值不變。

如下圖:y1=60pxh1=60pxy2=280pxh2=100pxs=(280px+100px)-(60px+60px)=260pxf=260px/(3-1)=130px,五邊形的y軸值=1*130px+60px+60px-70px=180px,各自對象的x軸值不變。效果如下:

wKiom1m5I-jwBcnDAABu3dXdTxU433.jpg

4.左側分佈

(1)“與舞臺對齊”被選中

以下圖爲例:

wKioL1m5I_Xjvdr9AABWODyLQFE511.jpg

點擊“左側分佈”,則

A、最左側對象(x軸值最小)的左邊框線對齊舞臺左邊框線,最右側對象(x軸值最大)的右邊框線對齊舞臺右邊框線;

B、計算分佈的起始與終止間距s=w-w1,其中w是舞臺寬度,w1是最右側對象的寬度,起始於舞臺左側邊框線,終止於最右側對象左邊框線;

C、計算對象間的分佈間距f=s/(n-1),其中n是要分佈的對象個數;

D、計算最左側對象與最右側對象之間各對象的x軸值=m*f,其中m代表中間對象中各x軸值的從1開始從小到大的排序序號(即在中間的對象中x軸值最小的爲1,次小的爲2,依次類推);

E、分佈對象各自的y軸值不變。

如上圖:w=550pxw1=60pxs=550px-60px=490pxf=490px/(3-1)=245px,五邊形的x軸值=1*245px=245px,各自對象的y軸值不變。效果如下:

wKiom1m5JGLh3ZrXAABXquA7yks730.jpg

(2)“與舞臺對齊”沒被選中

以下圖爲例:

wKiom1m5JNXyu_P4AABZytfwp9o025.jpg

點擊“左側分佈”,則:

A、最左側對象、最右側對象的x軸值不變,最左側對象的x軸值爲x1,最右側對象的x軸值爲x2

B、計算分佈的起始與終止間距s=x2-x1,起始於最左側左邊框線,終止於最右側對象左邊框線;

C、計算對象間的分佈間距f=s/(n-1),其中n是要分佈的對象個數;

D、計算最左側對象與最右側對象之間各對象的x軸值=m*f+x1,其中m代表中間對象中各x軸值的從1開始從小到大的排序序號(即在中間的對象中x軸值最小的爲1,次小的爲2,依次類推);

E、分佈對象各自的y軸值不變。

如下圖:x1=90pxx2=400pxs=400px-90px=310pxf=310px/(3-1)=155px,五邊形的x軸值=1*155px+90px=245px,各自對象的y軸值不變。效果如下:

wKioL1m5Jbuj6H8AAABXuJy4NPE768.jpg

5.水平居中分佈

(1)“與舞臺對齊”被選中

以下圖爲例:

wKioL1m5Ji7yaaBVAABitVK_Vbc087.jpg

點擊“水平居中分佈”,則:

A、最左側對象x軸加寬度一半的值最小)左邊框對齊舞臺左邊框線,最右側對象x軸加寬度一半的值最大)右邊框線對齊舞臺右邊框線,w1代表最左側對象寬度,w2代表最右側對象的寬度,w代表舞臺寬度;

B、計算分佈的起始與終止間距s=w-w1/2-w2/2,起始於最左側寬度中點垂直線,終止於最右側寬度中點垂直線;

C、計算對象間的分佈間距f=s/(n-1),其中n是要分佈的對象個數;

D、計算最左側對象與最右側對象之間各對象的x軸值=m*f+w1/2-wn/2,其中m代表中間對象中各x軸值的從1開始從小到大的排序序號(即在中間的對象中x軸值最小的爲1,次小的爲2,依次類推),wn代表當前對象的寬度;

E、分佈對象各自的y軸值不變。

如上圖:w1=100pxw2=60pxw=550pxs=550px-100px/2-60px/2=470pxf=470px/(3-1)=235px,五邊形的x軸值=1*235px+100px/2-70px/2=250px。效果如下:

wKiom1m5JpziKTDOAABXWYhD56E645.jpg

(2)“與舞臺對齊”沒被選中

以下圖爲例:

wKiom1m5J-zyXVhEAAB45z37EbQ310.jpg

點擊“水平居中分佈”,則:

A、最左側對象x軸加寬度一半的值最小)、最右側對象x軸加寬度一半的值最大)x軸不變,最左側對象x軸加寬度一半的值最小)x軸值爲x1,最右側對象x軸加寬度一半的值最大)x軸值爲x2

B、計算分佈的起始與終止間距s=(x2+w2/2)-(x1+w1/2),其中w2是最右側對象的寬度,w1是最左側對象的寬度,起始於最左側寬度中點垂直線,終止於最右側寬度中點垂直線;

C、計算對象間的分佈間距f=s/(n-1),其中n是要分佈的對象個數;

D、計算最左側對象與最右側對象之間各對象的x軸值=m*f+x1+w1/2-wn/2,其中m代表中間對象中各x軸值的從1開始從小到大的排序序號(即在中間的對象中x軸值最小的爲1,次小的爲2,依次類推),wn代表當前對象的寬度;

E、分佈對象各自的y軸值不變。

如上圖:x1=50pxw1=100pxx2=470pxw2=60pxs=(470px+60px/2)-(50px+100px/2)=400pxf=400px/(3-1)=200px,五邊形x軸的值=1*200px+50px+100px/2-70px/2=230px,效果如下:

wKioL1m5KFih_o9xAABaFDjqJSo241.jpg

6.右側分佈

(1)“與舞臺對齊”被選中

以下圖爲例:

wKioL1m5KImBf5TEAABfcM5D6qw922.jpg

點擊“右側分佈”,則:

A、最左側對象x軸加寬度的值最小)左邊框線對齊舞臺左邊框線,最右側對象x軸加寬度的值最大)右邊框線對齊舞臺右邊框線,最左側對象的寬度爲w1,舞臺的寬度爲w

B、計算分佈的起始與終止間距s=w-w1,起始於最左側對象的右邊框線,終止於舞臺的右邊框線;

C、計算對象間的分佈間距f=s/(n-1),其中n是要分佈的對象個數;

D、計算最左側對象與最右側對象之間各對象的x軸值=m*f+w1-wn,其中m代表中間對象中各x軸值的從1開始從小到大的排序序號(即在中間的對象中x軸值最小的爲1,次小的爲2,依次類推),wn代表當前對象的寬度;

E、分佈對象各自的y軸值不變。

如下圖:w=550pxw1=100pxs=550px-100px=450pxf=450px/(3-1)=225px,則五邊形x軸值=1*225px+100px-70px=255px,各個對象的y軸值不變。效果如下:

wKiom1m5KPmj5R7XAABWzK5Jb5o894.jpg

(2)“與舞臺對齊”沒被選中

以下圖爲例:

wKioL1m5KPuD8krtAAB3oYckeQM102.jpg

點擊“右側分佈”,則:

A、最左側對象x軸加寬度的值最小)、最右側對象x軸加寬度的值最大)x軸值不變,最左側對象的x軸值爲x1,寬度爲w1,最右側對象的x軸值爲x2,寬度爲w2

B、計算分佈的起始與終止間距s=(x2+w2)-(x1+w1),起始於最左側對象的右邊框線,終止於最右側對像的右邊框線;

C、計算對象間的分佈間距f=s/(n-1),其中n是要分佈的對象個數;

D、計算最左側對象與最右側對象之間各對象的x軸值=m*f+x1+w1-wn,其中m代表中間對象中各x軸值的從1開始從小到大的排序序號(即在中間的對象中x軸值最小的爲1,次小的爲2,依次類推),wn代表當前對象的寬度;

E、分佈對象各自的y軸值不變。

如下圖:x1=50pxw1=100pxx2=400pxw2=60pxs=(400px+60px)-(50px+100px)=310pxf=310px/(3-1)=155px,則五邊形x軸值=1*155px+50px+100px-70px=235px,各個對象的y軸值不變。效果如下:

wKioL1m5KUPwB2yOAABcfQ87s94761.jpg

四、匹配大小

1.當“與舞臺對齊”被選中

(1)點擊“匹配寬度”,被選中的所有對象寬度會設置成與舞臺的寬度一樣;

(2)點擊“匹配高度”,被選中的所有對象高度會設置成與舞臺的高度一樣;

(3)點擊“匹配寬高”,被選中的所有對象寬高會同時設置成與舞臺的寬高;

2.當“與舞臺對齊”沒被選中

(1)點擊“匹配寬度”,被選中的所有對象寬度會設置成與選中的對象中寬度最大的對象的寬度;

(2)點擊“匹配高度”,被選中的所有對象高度會設置成與選中的對象中高度最大的對象的高度;

(3)點擊“匹配寬高”,被選中的所有對象寬度會設置成與選中的對象中寬度最大的對象的寬度,同時,被選中的所有對象高度會設置成與選中的對象中高度最大的對象的高度;

五、間隔

1.垂直平均間隔

(1)“與舞臺對齊”被選中

A、最上對象上邊框線對齊舞臺上邊框線,最下對象下邊框線對齊舞臺下邊框線;

B、兩者中間的對象,每個對象的上邊框線與相臨前一個對象的下邊框線的間隔都是一樣的;

如下圖:

wKiom1m5KoeTJvfsAABUnELr9Ek078.jpg

點擊“垂直平均間隔”後,效果如下:

wKiom1m5KqnyDqCtAACEKZ__5eQ072.jpg

(2)“與舞臺對齊”沒有被選中

A、最上對象、最下對象不動;

B、兩者中間的對象,每個對象的上邊框線與相臨前一個對象的下邊框線的間隔都是一樣的;

如下圖:

wKiom1m5KuahAVmXAABqsN6okq4114.jpg

點擊“垂直平均間隔”,效果如下:

wKioL1m5KuCz0mfzAABwqdBoq8A969.jpg

2.水平平均間隔

(1)“與舞臺對齊”被選中

A、最左對象左邊框線對齊舞臺左邊框線,最右對象右邊框線對齊舞臺右邊框線;

B、兩者中間的對象,每個對象的左邊框線與相臨左側的前一個對象的右邊框線的間隔都是一樣的;

如下圖:

wKiom1m5K2eSRa23AABcSUfvwDQ980.jpg

點擊“水平平均間隔”,效果如下:

wKioL1m5K1Wjdy7YAABuk4SCDYc868.jpg

(2)“與舞臺對齊”沒被選中

A、最左對象、最右對象位置不變;

B、兩者中間的對象,每個對象的左邊框線與相臨左側的前一個對象的右邊框線的間隔都是一樣的;

如下圖:

wKiom1m5K7fRDF_rAABcgwpe0Mk973.jpg

點擊“水平平均間隔”,效果如下:

wKioL1m5K6bA6vGqAABy5l7ScVY477.jpg


2017年9月18日上午10時修改

致歉:因文字描述不當,重新修改的分佈操作中的一些文字描述,向大家深表歉意!黃色部分爲修改的部分。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章