Flash MX 2004新特性執行個體學習五

   執行個體六、Text Enhancements

　　一、涉及特性

　　在執行個體中，主要涉及在Flash MX 2004中引用和顯示外部的css檔案和html檔案。這些都是在Flash MX 2004中才有的新特性，應用也非常方便。本執行個體在Flash MX 2004中的操作非常簡單，不過這正從側面反映了它的功能強大。

　　二、製作過程

　　1、建立一個檔案，命名為sample.css。其內容如下： 　　

　　headline {

　　 font-family: Arial,Helvetica,sans-serif;

　　 font-size: 16px;

　　 font-weight: bold;

　　 display: block;

　　}

　　subheadline {

　　 font-family: Arial,Helvetica,sans-serif;

　　 font-size: 13px;

　　 font-weight: bold;

　　 display: block;

　　}

　　mainBody {

　　 font-family: Arial,Helvetica,sans-serif;

　　 font-size: 10px;

　　 display: block;

　　}

　　biline {

　　 font-family: Arial,Helvetica,sans-serif;

　　 font-size: 11px;

　　 font-style: italic;

　　 display: inline;

　　}

　　A {

　　 font-family: Arial,Helvetica,sans-serif;

　　 color:cccccc;

　　 font-size: 10px;

　　 display: inline;

　　 text-decoration:underline;

　　}

　　上面的css檔案中，中括弧裡面的是對應的屬性。比如font-family是字元集，font-size是字型大小，display是字型的顯示方式，等等。只要有簡單的網頁製作知識就應該可以看懂的。

　　2、建立一個檔案，命名為sample.html，其內容如下： 　　

　　 Giant Sea Lion Spotted

　　 Citizens scared, amazed 　　

　　Today - Our City A giant sea lion was spotted today rampaging around the city's main square, scaring thousands of innocent people just out for a daily stroll in the beautiful downtown district.

　　No injuries were reported after the animal's two-hour assault of the shopping district famous for it's sea lion purses and shoes, also known as the "sea lion district". Witnesses said the creature came out of the ocean near the Burger King at 42nd and 1st Avenue, startling many and stalling traffic.

　　"The animal caused nearly four million dollars of damage to the neighborhood," said Joseph Valente, owner of "Sea Lions R' Us" at 43rd and 2nd. Onlookers to the scene said that the sea lion appeared ornery, but otherwise in good spirits.

　　Officials are uncertain as to when, if ever, the sea lion may return.Click here for more. 　　

　　這個檔案的內容是應用了前面所建立的css格式的html檔案。（嚴格來說，此檔案更像是一個xml檔案。）

    3、將一個名為sample.jpg的圖片放到跟第一、二步所建立的檔案的同一目錄中。

　　4、建立一個Flash MX 2004的檔案，儲存在跟前面所建立的檔案所在的目錄中。

　　5、用文本工具在情境中拉一個文本輸入框，命名為content。在屬性面板上設定如1所示。

　　6、在TimeLine中建立一個圖層，命名為Action，在此層的Action面板上面增加如下語句：　　

　　/* Copyright 2003 Macromedia, Inc. All rights reserved.

　　The following is Sample Code and is subject to all restrictions

　　on such code as contained in the End User License Agreement

　　accompanying this product.

　　*/ 　　

　　var ss:TextField.StyleSheet = new TextField.StyleSheet(); //注釋1

　　ss.load("sample.css"); //注釋2

　　content.styleSheet = ss; //注釋3

　　content.multiline= true;

　　content.wordWrap = true;

　　content.html = true; 　　

　　story = new XML(); //注釋4

　　story.ignoreWhite = true;

　　story.load("sample.html"); //注釋5

　　story.onLoad = function () { //注釋6

　　 content.htmlText = story;

　　}

　　    注釋1：定義一個變數ss，它的類型為TextField.StyleSheet。

　　　　注釋2：讀取sample.css檔案的內容到ss中。這裡要注意所有檔案的儲存路徑要一致。

　　　　注釋3：設定文字框content的幾個屬性。

　　　　注釋4：建立一個xml對象。

　　　　注釋5：讀入sample.html檔案的內容到story中。

　　　　注釋6：設定story的onLoad函數，函數的內容為設定content的htmlText為story。

　　三、實際用途

　　從執行個體的製作過程中可以看到，以前在Flash中一行一行地調整文字顯示效果的時候再也不會出現。Flash MX 2004中操作HTML檔案非常靈活，修改顯示效果也很方便，只要改一下相應的檔案內容就可以了。這在用Flash來做比較多的文字顯示處理的情境中非常有用。