|
2.1 - 2.2 Flash5中的浮動(dòng)面板
Flash5.0在浮動(dòng)面板這一塊兒已經(jīng)和Fireworks以及Dreamweaver做的非常接近了，很多的朋友不會(huì)使用Flash5.0，但是憑借以前學(xué)習(xí)過(guò)Fireworks和Dreamweaver的經(jīng)驗(yàn)，很快就掌握了Flash5.0的特點(diǎn)，對(duì)于普通的浮動(dòng)面板這一塊，這三劍客軟件做的是非常的神似，這種界面的布置似乎已經(jīng)成為了Macromedia公司的一種模式。方便的快捷鍵按鈕置于窗口的右下角，通過(guò)點(diǎn)擊就可以達(dá)到開(kāi)啟的目的，方便了設(shè)計(jì)人員的使用。統(tǒng)一的結(jié)構(gòu)也使得這三個(gè)軟件擁有了一批忠實(shí)的用戶。另外，F(xiàn)lash5.0和Fireworks還有Dreamweaver的色盤(pán)面板完全相同，有效增加了這三個(gè)軟件之間的勾通。相互間使用也不會(huì)產(chǎn)生色差了。
圖2-1 Flash5與Fireworks4的浮動(dòng)面板按鈕
在第一章我們了解到了浮動(dòng)面板可以通過(guò)用戶的拖拽產(chǎn)生自定義的組合，也可以通過(guò)Window|Save Panel Layout命令來(lái)保存設(shè)置。
2.1 Info(信息)面板
點(diǎn)擊主菜單Window｜Panels｜Info命令，可以打開(kāi)Info面板，Info面板是設(shè)置組件的坐標(biāo)以及寬度和高度等屬性的面板，通過(guò)對(duì)Info面板的了解，也可以使你了解到物體的各種相關(guān)信息和鼠標(biāo)的當(dāng)前信息等等。
2.1.1 物體名稱信息
圖2-2 Info面板
在圖2-2的信息當(dāng)中，Info面板的最上方有一個(gè)Clock Pencil字符，這表示現(xiàn)在所編輯的這個(gè)符號(hào)的名稱是Clock Pencil，如果我們使用文字工具在編輯區(qū)內(nèi)添加文字，你可以在圖2-3中觀察到它的變化。
圖2-3 Info面板中的表頭信息
你不必?fù)?dān)心調(diào)整錯(cuò)了，因?yàn)槟憧梢酝ㄟ^(guò)面板上方的物體信息查明現(xiàn)在正在調(diào)整的物體。
2.1.2 物體的坐標(biāo)
物體的坐標(biāo)是通過(guò)對(duì)X和Y輸入框的顯示而得知的，在Info面板中可以對(duì)物體的坐標(biāo)進(jìn)行設(shè)定。
步驟一、從Common Library共享庫(kù)面板的Movie Clip項(xiàng)目里，拖出一個(gè)飛機(jī)的電影剪輯符號(hào)到場(chǎng)景。如圖2-4所示。
圖2-4 Common Library共享庫(kù)面板中的符號(hào)
步驟二、打開(kāi)Info信息面板，方法是通過(guò)右下角的Show Info按鈕。
圖2-5 Info面板的快捷按鈕
步驟三、在打開(kāi)的Info面板中的X和Y輸入框中輸入兩個(gè)“0”。條件是飛機(jī)此時(shí)為被選取狀態(tài)。如圖2-6所示，你可以看到飛機(jī)的頂點(diǎn)和場(chǎng)景的頂點(diǎn)相對(duì)齊，這就是Info面板的最大用處，它對(duì)物體的坐標(biāo)設(shè)定非常的直觀。
圖2-6 Info面板中對(duì)物體的坐標(biāo)設(shè)定
2.1.3 物體的寬度和高度信息
我想通過(guò)對(duì)物體的坐標(biāo)設(shè)定，下面的W和H輸入框就非常明確了，沒(méi)錯(cuò)，這是用來(lái)輸入物體高度和寬度的。W代表的是Width寬度設(shè)定，H代表的是Height高度的設(shè)定。通過(guò)手動(dòng)我們可以達(dá)到學(xué)習(xí)的目的。
步驟一、在W輸入框內(nèi)填寫(xiě)物體的寬度為300。
步驟二、在H輸入框內(nèi)填寫(xiě)物體的高度為300。
步驟三、你可以在發(fā)現(xiàn)物體變成了一個(gè)非常正規(guī)的正方形。如圖2-7所示。
圖2-7 Info面板中的寬度和高度設(shè)定
2.1.4 物體的色彩信息
物體的色彩信息在Info面板的左下角可以體現(xiàn)，一般來(lái)說(shuō)群組的物體色彩值為真彩，想更了解一些關(guān)于色彩的信息，跟我動(dòng)手吧。
步驟一、依然是在這個(gè)飛機(jī)的符號(hào)上進(jìn)行，雙擊物體進(jìn)入Movie Clip電影剪輯的編輯區(qū)。
步驟二、你可以看到圖層信息內(nèi)飛機(jī)的各個(gè)圖層都是處于鎖定狀態(tài)的。用鼠標(biāo)在鎖子上單擊，可以對(duì)圖層解鎖，不然圖層將為不可編輯狀態(tài)。如圖2-8所示。
圖2-8 圖層的鎖定狀態(tài)
步驟三、將圖層中的鎖全解開(kāi)之后，我們用選取工具指向符號(hào)中的色彩時(shí)，可以發(fā)現(xiàn)Info 面板中的信息不再是255了，而是表現(xiàn)出了具體的色彩值。如圖2-9所示。
圖2-9 Info面板中的色彩值
步驟四、信息中的A表示色彩中的透明度，當(dāng)為100時(shí)為全不透明，為0時(shí)表示全透明。
2.1.5 鼠標(biāo)的坐標(biāo)信息
在Info面板的右下角顯示的是鼠標(biāo)的坐標(biāo)，通常我們并不會(huì)對(duì)鼠標(biāo)的坐標(biāo)如何的重視，但是事實(shí)證明Flash5在Info面板中加入鼠標(biāo)坐標(biāo)的顯示是有道理的。在對(duì)物體進(jìn)行調(diào)整時(shí)，特別是在對(duì)非常細(xì)致的物體進(jìn)行編輯時(shí)，鼠標(biāo)坐標(biāo)顯得尤為重要。
2.1.6 物體的坐標(biāo)對(duì)齊方式
在對(duì)物體進(jìn)行坐標(biāo)設(shè)定時(shí)有一個(gè)非常重要的工具就是圖2-10中的這九個(gè)小方格，對(duì)它的設(shè)定直接影響到了物體的坐標(biāo)對(duì)齊方式。
圖2-10 物體的坐標(biāo)對(duì)齊方式
點(diǎn)擊左上角的小方格表示以物體的左上角對(duì)齊設(shè)定的X和Y坐標(biāo)，如果中間的小方格為黑色狀態(tài)的話，表示以物體的中心為坐標(biāo)的對(duì)齊點(diǎn)。
2.1.7 場(chǎng)景和Movie Clip的不同之處
當(dāng)然還有一個(gè)重要的概念，就是在Movie Clip電影剪輯和場(chǎng)景中的坐標(biāo)并不是相同的，打開(kāi)主菜單View|Ruler命令顯示標(biāo)尺，就可以觀察到兩者的區(qū)別�？梢酝ㄟ^(guò)對(duì)兩者的觀察達(dá)到學(xué)習(xí)的目的。
圖2-11 場(chǎng)景和Movie Clip坐標(biāo)的區(qū)別
場(chǎng)景中的X和Y坐標(biāo)的0坐標(biāo)是在電影的左上角，而Movie Clip的X和Y坐標(biāo)是在編輯區(qū)的最中心，這也是初學(xué)者應(yīng)該多加注意的地方。
2.2 Transform（調(diào)整）面板
Transform面板是用來(lái)對(duì)物體進(jìn)行各種變形控制的，另外它還可以對(duì)物體進(jìn)行復(fù)制，通用的功能一般是對(duì)物體或是符號(hào)進(jìn)行傾斜和拉伸，學(xué)習(xí)Transform面板的使用會(huì)增加對(duì)物體形變的控制。其實(shí)在動(dòng)畫(huà)的制作過(guò)程中，形變控制是使用相當(dāng)多的。另外由于在Transform面板中擁有一個(gè)復(fù)制按鈕，所以很多對(duì)物體和符號(hào)的復(fù)制也是通過(guò)Transform面板來(lái)實(shí)現(xiàn)的，在本節(jié)的最后將會(huì)帶給讀者一個(gè)動(dòng)畫(huà)實(shí)例，相信通過(guò)實(shí)例可以增進(jìn)對(duì)此面板的認(rèn)識(shí)。
圖2-12 Transform面板
2.2.1 Transform面板中對(duì)物體的拉伸調(diào)整
在Transform面板中的第一行，記錄了現(xiàn)在編輯物體與物體原始狀態(tài)的大小比例關(guān)系，通過(guò)填寫(xiě)數(shù)字達(dá)到對(duì)物體的拉伸是一件很簡(jiǎn)單的事情。
步驟一、在Common Library共享庫(kù)面板中打開(kāi)一個(gè)老鼠的圖像，
步驟二、打開(kāi)Transform面板，并且在最上方的垂直拉伸和水平拉伸的輸入框內(nèi)填寫(xiě)數(shù)字分別為200和100，如圖2-13所示。
圖2-13 物體的拉伸效果
步驟三、拉伸后的物體呈現(xiàn)的比例明顯與原始物體成比例的拉伸。在最右邊的Constrain勾選框是用來(lái)約束物體的。如果勾選則表示物體會(huì)按原始的高度和寬度比例進(jìn)行拉伸。
2.2.2 Transform面板中對(duì)物體的傾斜
在Transform面板中的Rotate選框是用來(lái)對(duì)物體進(jìn)行傾斜設(shè)定的，在輸入框內(nèi)填寫(xiě)相應(yīng)的角度物體會(huì)自動(dòng)的傾斜。另外，很多情況下此工具是配合主菜單Modify|Transform|Edit Center編輯中心點(diǎn)命令共同使用的。
步驟一、選取物體，使用主菜單Modify|Transform|Edit Center命令，你會(huì)看到以物體的中心有一個(gè)小十字，將小十字移到物體的底端中心，如圖2-14所示。
圖2-14 編輯物體的中心點(diǎn)
步驟二、然后打開(kāi)Transform面板，在Rotate項(xiàng)目中輸入數(shù)字30，然后按最下方的加號(hào)。如圖2-15所示。
圖2-15 對(duì)物體進(jìn)行復(fù)制
步驟三、這樣你可以發(fā)現(xiàn)物體以底端為中心傾斜30度方向復(fù)制了一個(gè)物體。
2.2.3 Transform面板中對(duì)物體的變形
Transform面板帶給我們太多的喜悅，在Skew選框中還可以對(duì)物體進(jìn)行變形調(diào)整，具體的做法與Rotate項(xiàng)類似。而且可以很方便的制作出文字的變形效果。
圖2-16 文字的傾斜
2.2.4 Transform面板中對(duì)物體的復(fù)位
如果你對(duì)物體的形變效果不是很滿意，還可以通過(guò)使用右下角的Reset按鈕來(lái)使物體恢復(fù)成原如狀態(tài)。
2.2.5 Transform面板的應(yīng)用實(shí)例
帶大家來(lái)制作一個(gè)轉(zhuǎn)動(dòng)的齒輪，使大家對(duì)Transform面板的使用更加深刻。
步驟一、選擇Insert面板中的New Symbol建立一個(gè)新的符號(hào)，選擇Graphic圖像符號(hào)，用默認(rèn)的名稱即可。
步驟二、在圖像的編輯區(qū)內(nèi)用方形工具繪制一個(gè)長(zhǎng)方形的長(zhǎng)條，要求是沒(méi)有邊緣。可以在工具欄上找到此設(shè)置。如圖2-17所示。
圖2-17 繪制一個(gè)沒(méi)有邊緣的矩形
步驟三、使物體被選取，打開(kāi)Transform面板，在Rotate項(xiàng)中輸入數(shù)字15，然后按復(fù)制鍵。按11下。使物體為15度時(shí)便復(fù)制一個(gè)物體，共復(fù)制了11個(gè)。
步驟四、繪制一個(gè)圓形，色彩與矩形相同，大小選擇比矩形的高度稍稍小些，然后將圓形物體放置在矩形中間，如果大小不好控制的話，可以使用Info面板來(lái)設(shè)置。呈2-18圖模式。
圖2-18 制作第一個(gè)齒輪
步驟五、選取物體后，用主菜單Modify|Group命令對(duì)物體進(jìn)行群組功能。
步驟六、然后在時(shí)間軸面板單擊第十幀，按F6鍵插入一個(gè)關(guān)鍵幀，在第一幀處打開(kāi)Frame面板，將Tweening選為Motion，將Rotate設(shè)置為CWW，在times框中輸入數(shù)值1。如2-19圖模式設(shè)置。
圖2-19 對(duì)齒輪做Motion動(dòng)畫(huà)
步驟七、你可以在第一幀按Enter鍵測(cè)試一下效果，齒轉(zhuǎn)在轉(zhuǎn)動(dòng)。然后按照上述辦法制作一個(gè)比這個(gè)齒轉(zhuǎn)小一號(hào)的齒輪，有一個(gè)要點(diǎn)比較重要，這個(gè)小具輪的矩形寬度和大齒輪的一樣，它使用30度的復(fù)制效果，也是建立一個(gè)同樣的Motion動(dòng)畫(huà)，只是Frame面板中的Rotate項(xiàng)為CW，動(dòng)畫(huà)的總長(zhǎng)度為15幀。
步驟八、然后新建一個(gè)Movie Clip電影剪輯，打開(kāi)Library庫(kù)面板，將兩個(gè)圖像按下圖導(dǎo)入到電影剪輯當(dāng)中。并且將電影剪輯的增加到30幀，
步驟九、將電影剪輯拖入場(chǎng)景，然后按Ctrl+Enter鍵測(cè)試。
出處：藍(lán)色理想
責(zé)任編輯：藍(lán)色
上一頁(yè) 下一頁(yè) 2.3 - 2.7 Flash 浮動(dòng)面板
◎進(jìn)入論壇Flash專欄版塊參加討論
|
第 1 頁(yè) FLASH 5 教程 — Flash 浮動(dòng)面板
第 2 頁(yè) 
