用Flash MX製作彈出Windows視窗

來源:互聯網
上載者:User

  微軟公司的風格似乎並不是墨守成規的,但是不知道為什麼Windows介面總是沒有什麼變化。從Windows 3.x到Windows 9x,再到現在的Windows 2000和Windows XP看來看去總是那個樣子,想自己改變一下也很麻煩……沒有辦法,既然我們擁有Flash這個好用的工具,為什麼不充分利用呢?所以我們用Flash類比一個來過過癮。不過,怎麼好像還是換湯不換藥呢?當然了,我只是示範一下,這是一個Demo版的,其他的事情如功能的實現、介面的風格和作用就要靠你們大家Do It Yourself了。

  不過我們今天的這個Flash作品既然是個簡單的示範版本,那咱們就一切從簡吧,還是那句話,當我們在製作Flash的時候,還是先理清楚設計思路的好,養成良好的習慣嘛!

  圖1

  製作思路:有一個工具列在介面的下端;工具列的左端是“開始”按鈕,點擊後有菜單彈出;而組成這個菜單的應該又是一個一個的按鈕,當滑鼠移到其上面時,又向右彈出相應的菜單。相信大家對Windows介面已經不會很陌生了,那麼就開始吧。

  工具列及開始按鈕

  1、用矩形工具在情境上畫一個不帶邊框的長條,長度最好和情境的寬度一致,將其移至情境下方;取這個層的名字為“工具列”;

  2、建立一層,名字為“開始按鈕”,用矩形工具和文本工具做出帶有“start”字樣的小矩形,位置在工具列的左端(如圖1),然後將其轉為Button,名字為“startm”。

  向上彈出的菜單

  1、建立一層,名字為“快顯功能表”,所有層都在第二幀加上主要畫面格。回到“快顯功能表”圖層,對第二幀進行操作;

  2、畫一個大小合適的矩形,然後使用“linear Gradint”填色在矩形的頂端製作一個細長的矩形,在其上寫“My Windows”的字樣(如圖2)。將這個圖層全部選中,逆時針旋轉90°,放到“Start”按鈕的上端。將其轉為Movie Clip,名字為“Pop-up”;

  圖2

  3、對“Pop-up”進行操作,我們將原來第一層的名字改為“菜單背景”,建立兩層,分別為“菜單文字”和“功能表按鈕”。用文字工具在“菜單文字”層中寫上一些選項文字;然後用矩形工具做一個空白按鈕,名字為“mbt”,Over幀填上較深的顏色(相對於快顯功能表的背景顏色)。在“功能表按鈕”一層中拖出相應個數的“mbt”,將它們排列整齊(如圖3)。

  圖3

  向右快顯功能表

  和第二步類似,相應的在“Pop-up”這個MC中再建立一層,名字為“程式菜單”,所有層都在第二幀加上主要畫面格,對“程式菜單”的第二幀進行操作。畫一個合適大小的矩形,將其轉為MC,名字為“Progam”參照第二步的3,做好向右快顯功能表(如圖4)。

  如果還有子功能表,以此類推。

  圖4

  相應的Action

  1、 回到情境,在其第一幀寫Action:

  Stop();

  2、Start按鈕的Action:

  //滑鼠點擊,彈出開始菜單

  on (release) {

  gotoAndStop (2);

  }

  3、對MC:pop-up進行操作,其第一幀的Action:

  stop();

  4、位置在Programs上的按鈕的Action:

  //滑鼠在其上面,彈出對應菜單

  on (rollOver) {

  gotoAndStop (2);

  }

  大家可以看到,實際上這個例子的Action非常簡單,只是用到了“跳轉”這樣的指令,實際上應用Action不需要很複雜就可以達到理想的效果;當然,這個例子只是寫出了一個菜單彈出的效果,但是以此類推不難做出所有的菜單彈出,這樣的例子在網站導航經常會用到。實際應用中只需要在按鈕上加入以下Action指令就可以了:

  //當滑鼠點擊,獲得指定URL並讓主情境回到初始狀態

  on (release) {

  getURL ("your URL");

  _root.gotoAndStop(1);

  }

  當然,我們作的這個簡單的Flash也有一定的不足,比如在菜單的外面點擊並不會使菜單消失。要實現這樣的效果也並不是不可以,不過今天我的工作就是使大家能夠簡單地瞭解Flash MX的製作快顯視窗的簡單方法,所以呢,象這些問題還是留給大家自己去想吧!

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.