使用 Text Layout Framework

Flash Player 10 以及更新的版本,Adobe AIR 1.5 以及更新的版本

Text Layout Framework 的概觀

Text Layout Framework (TLF) 是可延伸的 ActionScript 元件庫。TLF 是在 Adobe® Flash® Player 10 與 Adobe® AIR® 1.5 的文字引擎上所建立。TLF 會在網站上提供創新印刷樣式的進階印刷和文字版面功能。此架構可與 Adobe® Flex® 或 Adobe® Flash® Professional 搭配使用。開發人員可以使用或擴充現有的組件,或者他們可以使用架構來建立自己的文字組件。

TLF 包括下列功能:
  • 雙向文字、垂直文字以及超過 30 種書寫文字,包括阿拉伯文、希伯來文、中文、日文、韓文、泰文、寮文、越南文等等

  • 在多欄與連結的容器之間選取、編輯和排列文字。

  • 東亞印刷樣式的垂直文字、直排內橫排 (垂直文字中的水平) 以及對齊

  • 豐富的印刷控制項,包括字距微調、連字、印刷大小寫、數字大小寫、數字寛度以及選擇性連字號

  • 剪下、複製、貼上、還原和標準鍵盤與滑鼠手勢,以進行編輯

  • 豐富的開發人員 API,以操作文字內容、版面及標記,並建立自訂文字組件

  • 可靠清單支援包括自訂標記與編號格式

  • 內嵌影像與定位規則

TLF 是一個 ActionScript 3.0 元件庫,架構於 Flash Player 10 引進的 Flash 文字引擎 (FTE) 之上。FTE 可以透過 flash.text.engine 套件加以存取,而此套件屬於 Flash Player 10 應用程式設計介面 (API) 的一部分。

不過,Flash Player API 只提供對文字引擎的低階存取,這表示部分工作可能需要相當大量的程式碼。TLF 會將低階程式碼封裝至較簡單的 API。TLF 也提供概念性的架構,以便將 FTE 定義的基本建構區塊組織到較易於使用的系統中。

與 FTE 不同的是,Flash Player 並未內建 TLF。而是完全以 ActionScript 3.0 寫成的獨立元件庫。因為這是可擴充的架構,因此可針對特定環境加以自訂。Flash Professional 和 Flex SDK 都包括根據 TLF 架構的組件。

支援複雜文字

TLF 提供複雜文字的支援。複雜文字的支援包括顯示和編輯由右到左文字的功能。TLF 也提供顯示和編輯由左到右和由右到左文字的功能,如阿拉伯文與希伯來文。此架構不僅支援中文、日文和韓文的垂直文字版面,還支援直排內橫排 (TCY 元素)。TCY 元素是內嵌至垂直連續文字內的水平文字區塊。下列是支援的文字:

  • 拉丁文 (英文、西班牙文、法文、越南文等)

  • 希臘文、斯拉夫文、亞美尼亞文、喬治亞文及衣索比亞文

  • 阿拉伯文與希伯來文

  • 漢字表意字和假名 (中文、日文和韓文) 以及韓文 Johab (韓文)

  • 泰文、寮文和高棉文

  • 梵文、孟加拉文、果魯穆奇文、馬來亞拉姆文、特拉古文、坦米爾文、古吉拉特文、歐利亞文、坎那達文和藏文

  • 提非納文、爨文、卻洛奇文、加拿大原住民統一語音節、德瑟列特文、蕭伯納文、范文、塔加拉族文、哈努諾文、布錫語、塔班瓦語

在 Flash Professional 與 Flex 中使用 Text Layout Framework

您可以直接使用 TLF 類別在 Flash 中建立自訂組件。此外,Flash Professional CS5 提供一個新的類別 fl.text.TLFTextField,以封裝 TLF 功能。在 ActionScript 中,請使用 TLFTextField 類別來建立使用 TLF 進階文字顯示功能的文字欄位。建立 TLFTextField 物件的方法與您使用 TextField 類別來建立文字欄位的方法相同。接著使用 textFlow 屬性,從 TLF 類別指定進階格式。

您也可以在 Flash Professional 中使用文字工具,在舞台上建立 TLFTextField 實體。然後就可以使用 ActionScript 的 TLF 類別來控制文字欄位內容的格式與版面。如需詳細資訊,請參閱「適用於 Adobe Flash Platform 的 ActionScript 3.0 參考」中的 TLFTextField

如果您是使用 Flex,請使用 TLF 類別。如需詳細資訊,請參閱使用 Text Layout Framework

使用 Text Layout Framework

如果您是使用 Flex 或是建立自訂文字組件,請使用 TLF 類別。TLF 是一個 ActionScript 3.0 元件庫,完全包含在 textLayout.swc 元件庫中。TLF 元件庫大約包含 100 個 ActionScript 3.0 類別和介面,並組織成 10 個套件。這些套件是 flashx.textLayout 套件的子套件。

Text Layout Framework 類別

TLF 類別可以區分為三個種類:
  • 資料結構與格式化類別

  • 顯示類別

  • 使用者互動類別

資料結構與格式化類別

下列套件包含 TLF 的資料結構與格式化類別:

TLF 的主要資料結構是文字流排階層,這是在元素套件中所定義。在此結構內,您可以使用格式套件將樣式和特質指定給連續文字。也可以使用轉換套件,控制文字如何匯入和匯出資料結構。

顯示類別

下列套件包含 TLF 的顯示類別: 在這些套件中的類別可協助 Flash Player 顯示文字。factory 套件提供簡單的方式來顯示靜態文字。容器套件包含的類別和介面可定義動態文字的顯示容器。撰寫套件會定義用來在容器中定位和顯示動態文字的技術。

使用者互動類別

下列套件包含 TLF 的使用者互動類別: 您可以使用編輯和作業套件定義的類別,來編輯資料結構中儲存的文字。事件套件包含事件處理類別。

使用 Text Layout Framework 建立文字的一般步驟

下列步驟說明使用「文字版面」格式建立文字的一般程序:

  1. 將格式化的文字匯入 TLF 資料結構。如需詳細資訊,請參閱使用 TLF 組織文字使用 TLF 格式化文字

  2. 為文字建立一或多個連結的顯示物件容器。如需詳細資訊,請參閱使用 TLF 管理文字容器

  3. 將資料結構中的文字與容器關聯,並設定編輯和捲動選項。如需詳細資訊,請參閱使用 TLF 啟用文字選取範圍、編輯和還原

  4. 建立事件處理常式以重新排列文字,來回應調整大小 (或其他) 事件。如需詳細資訊,請參閱使用 TLF 處理事件

Text Layout Framework 範例:新聞版面

下列範例示範如何使用 TLF 來配置簡單的新聞頁面。此頁面包含一個大型標題、一個副標題和一個多欄的內文區段:

package 
{ 
    import flash.display.Sprite; 
    import flash.display.StageAlign; 
    import flash.display.StageScaleMode; 
    import flash.events.Event; 
    import flash.geom.Rectangle; 
     
    import flashx.textLayout.compose.StandardFlowComposer; 
    import flashx.textLayout.container.ContainerController; 
    import flashx.textLayout.container.ScrollPolicy; 
    import flashx.textLayout.conversion.TextConverter; 
    import flashx.textLayout.elements.TextFlow; 
    import flashx.textLayout.formats.TextLayoutFormat; 
     
    public class TLFNewsLayout extends Sprite 
    { 
        private var hTextFlow:TextFlow; 
        private var headContainer:Sprite; 
        private var headlineController:ContainerController; 
        private var hContainerFormat:TextLayoutFormat; 
         
        private var bTextFlow:TextFlow; 
        private var bodyTextContainer:Sprite; 
        private var bodyController:ContainerController; 
        private var bodyTextContainerFormat:TextLayoutFormat; 
         
        private const headlineMarkup:String = "<flow:TextFlow xmlns:flow='http://ns.adobe.com/textLayout/2008'><flow:p textAlign='center'><flow:span fontFamily='Helvetica' fontSize='18'>TLF News Layout Example</flow:span><flow:br/><flow:span fontFamily='Helvetica' fontSize='14'>This example formats text like a newspaper page with a headline, a subtitle, and multiple columns</flow:span></flow:p></flow:TextFlow>"; 
         
        private const bodyMarkup:String = "<flow:TextFlow xmlns:flow='http://ns.adobe.com/textLayout/2008' fontSize='12' textIndent='10' marginBottom='15' paddingTop='4' paddingLeft='4'><flow:p marginBottom='inherit'><flow:span>There are many </flow:span><flow:span fontStyle='italic'>such</flow:span><flow:span> lime-kilns in that tract of country, for the purpose of burning the white marble which composes a large part of the substance of the hills. Some of them, built years ago, and long deserted, with weeds growing in the vacant round of the interior, which is open to the sky, and grass and wild-flowers rooting themselves into the chinks of the stones, look already like relics of antiquity, and may yet be overspread with the lichens of centuries to come. Others, where the lime-burner still feeds his daily and nightlong fire, afford points of interest to the wanderer among the hills, who seats himself on a log of wood or a fragment of marble, to hold a chat with the solitary man. It is a lonesome, and, when the character is inclined to thought, may be an intensely thoughtful occupation; as it proved in the case of Ethan Brand, who had mused to such strange purpose, in days gone by, while the fire in this very kiln was burning.</flow:span></flow:p><flow:p marginBottom='inherit'><flow:span>The man who now watched the fire was of a different order, and troubled himself with no thoughts save the very few that were requisite to his business. At frequent intervals, he flung back the clashing weight of the iron door, and, turning his face from the insufferable glare, thrust in huge logs of oak, or stirred the immense brands with a long pole. Within the furnace were seen the curling and riotous flames, and the burning marble, almost molten with the intensity of heat; while without, the reflection of the fire quivered on the dark intricacy of the surrounding forest, and showed in the foreground a bright and ruddy little picture of the hut, the spring beside its door, the athletic and coal-begrimed figure of the lime-burner, and the half-frightened child, shrinking into the protection of his father's shadow. And when again the iron door was closed, then reappeared the tender light of the half-full moon, which vainly strove to trace out the indistinct shapes of the neighboring mountains; and, in the upper sky, there was a flitting congregation of clouds, still faintly tinged with the rosy sunset, though thus far down into the valley the sunshine had vanished long and long ago.</flow:span></flow:p></flow:TextFlow>"; 
         
        public function TLFNewsLayout() 
        {      
            //wait for stage to exist 
            addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);     
        } 
         
        private function onAddedToStage(evtObj:Event):void 
        { 
            removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage); 
            stage.scaleMode = StageScaleMode.NO_SCALE; 
            stage.align = StageAlign.TOP_LEFT; 
             
            // Headline text flow and flow composer 
            hTextFlow = TextConverter.importToFlow(headlineMarkup, TextConverter.TEXT_LAYOUT_FORMAT); 
             
            // initialize the headline container and controller objects 
            headContainer = new Sprite(); 
            headlineController = new ContainerController(headContainer); 
            headlineController.verticalScrollPolicy = ScrollPolicy.OFF; 
            hContainerFormat = new TextLayoutFormat(); 
            hContainerFormat.paddingTop = 4; 
            hContainerFormat.paddingRight = 4; 
            hContainerFormat.paddingBottom = 4; 
            hContainerFormat.paddingLeft = 4; 
             
            headlineController.format = hContainerFormat; 
            hTextFlow.flowComposer.addController(headlineController); 
            addChild(headContainer); 
            stage.addEventListener(flash.events.Event.RESIZE, resizeHandler); 
             
            // Body text TextFlow and flow composer 
            bTextFlow = TextConverter.importToFlow(bodyMarkup, TextConverter.TEXT_LAYOUT_FORMAT); 
             
            // The body text container is below, and has three columns 
            bodyTextContainer = new Sprite(); 
            bodyController = new ContainerController(bodyTextContainer); 
            bodyTextContainerFormat = new TextLayoutFormat(); 
            bodyTextContainerFormat.columnCount = 3; 
            bodyTextContainerFormat.columnGap = 30; 
             
            bodyController.format = bodyTextContainerFormat; 
            bTextFlow.flowComposer.addController(bodyController); 
            addChild(bodyTextContainer); 
            resizeHandler(null); 
        } 
         
        private function resizeHandler(event:Event):void 
        { 
            const verticalGap:Number = 25; 
            const stagePadding:Number = 16; 
            var stageWidth:Number = stage.stageWidth - stagePadding; 
            var stageHeight:Number = stage.stageHeight - stagePadding; 
            var headlineWidth:Number = stageWidth; 
            var headlineContainerHeight:Number = stageHeight; 
             
            // Initial compose to get height of headline after resize 
            headlineController.setCompositionSize(headlineWidth, 
headlineContainerHeight); 
            hTextFlow.flowComposer.compose(); 
            var rect:Rectangle = headlineController.getContentBounds(); 
            headlineContainerHeight = rect.height; 
             
            // Resize and place headline text container 
            // Call setCompositionSize() again with updated headline height 
            headlineController.setCompositionSize(headlineWidth, headlineContainerHeight ); 
            headlineController.container.x = stagePadding / 2; 
            headlineController.container.y = stagePadding / 2; 
            hTextFlow.flowComposer.updateAllControllers(); 
             
            // Resize and place body text container 
            var bodyContainerHeight:Number = (stageHeight - verticalGap - headlineContainerHeight); 
            bodyController.format = bodyTextContainerFormat; 
            bodyController.setCompositionSize(stageWidth, bodyContainerHeight ); 
            bodyController.container.x = (stagePadding/2); 
            bodyController.container.y = (stagePadding/2) + headlineContainerHeight + verticalGap; 
            bTextFlow.flowComposer.updateAllControllers(); 
        } 
    } 
} 

TLFNewsLayout 類別使用兩個文字容器。一個容器顯示標題與副標題,而另一個則顯示三欄內文。為了簡潔起見,文字當作 TLF 標記文字,以硬式編碼的方式寫入範例。headlineMarkup 變數包含標題和副標題,bodyMarkup 變數則包含內文。如需 TLF 標記的詳細資訊,請參閱使用 TLF 組織文字

在經過一些初始化後,onAddedToStage() 函數會將標題文字匯入 TextFlow 物件,這是 TLF 的主要資料結構:
hTextFlow = TextConverter.importToFlow(headlineMarkup, TextConverter.TEXT_LAYOUT_FORMAT); 
接下來,會為容器建立 Sprite 物件,並且會建立控制器並與容器相關聯:
headContainer = new Sprite(); 
headlineController = new ContainerController(headContainer);
會將控制器初始化以設定格式化、捲動及其他選項。控制器包含定義文字排入之容器邊界的幾何。TextLayoutFormat 物件包含格式化選項:
hContainerFormat = new TextLayoutFormat();

控制器會指定給流排撰寫器,而且函數會將容器新增至顯示清單。容器實際的撰寫和顯示則委託給 resizeHandler() 方法。會執行相同的步驟順序以初始化內文 TextFlow 物件。

resizeHandler() 方法會測量可供顯示容器的空間,然後依此調整容器的大小。初始呼叫 compose() 方法以計算標題容器的適當高度。然後,resizeHandler() 方法就可以使用 updateAllControllers() 方法來置入和顯示標題容器。最後,resizeHandler() 方法會使用標題容器的大小來決定內文容器的位置。

使用 TLF 組織文字

TLF 會使用階層式樹狀結構來代表文字。樹狀結構中的每個節點都是元素套件中所定義的類別實體。例如,樹狀結構的根節點永遠是 TextFlow 類別實體。TextFlow 類別代表整個文字內文。內文是文字與其他元素的集合,視為一個單位或流排。單一內文可能需要一個以上的直欄或文字容器來顯示。

與根節點不同的是,其餘的元素並不是嚴格的 XHTML 元素。下圖顯示架構的階層:

TextFlow 階層

Text Layout Framework 標記

瞭解 TLF 的結構也有助於處理 TLF 標記。TLF 標記是文字的 XML 表示法,這是 TLF 的一部分。雖然此架構也支援其他 XML 格式,但是 TLF 標記的獨特之處在於特別以 TextFlow 階層的結構為基礎。如果您使用此標記格式從 TextFlow 匯出 XML,則 XML 匯出時會具有此完整的階層。

「TLF 標記」在 TextFlow 階層中提供文字最高真實度的呈現。標記語言為每個 TextFlow 階層的基本元素提供標記,而且也為 TextLayoutFormat 類別中的所有可用格式化屬性提供特質。

下表包含可用於 TLF 標記中的標籤。

元素

說明

子系

類別

textflow

標記的根元素。

div、p

TextFlow

div

TextFlow 內的區段。可包含一組段落。

div、p

DivElement

p

段落。可包含以下表格列中所列的任何元素。

a, tcy, span, img, tab, br, g

ParagraphElement

a

連結。

tcy, span, img, tab, br, g

LinkElement

tcy

水平連續文字 (用於垂直 TextFlow 中)。

a, span, img, tab, br, g

TCYElement

span

段落內的連續文字。

 

SpanElement

img

段落中的影像。

 

InlineGraphicElement

tab

定位字元。

 

TabElement

br

換行字元。用於在段落中結束一行;文字會延續到下一行,但保持在同一個段落。

 

BreakElement

linkNormalFormat

定義正常狀態下的連結格式屬性。

 

TextLayoutFormat

linkActiveFormat

當滑鼠落在連結上時,定義用於作用中狀態下的連結格式屬性。

 

TextLayoutFormat

linkHoverFormat

當滑鼠在連結的邊緣之內 (或上方) 時,定義用於懸浮狀態下的連結格式屬性。

 

TextLayoutFormat

li

清單項目元素。必須在清單元素內。

div, li, list

ListItemElement

list

清單。清單可以是巢狀,或與另一個清單相鄰。清單項目可套用不同的標籤或編號配置。

div, li, list, p

ListElement

g

群組項目。用於將項目群組在一個段落中。可讓您將元素巢狀在段落層級之下。

a, tcy, span, img, tab, br, g

SubParagraphGroupElement

使用 TLF 格式化文字

flashx.textLayout.formats 套件包含的介面和類別,可讓您指定格式給文字流排階層樹狀結構中的任一個 FlowElement。套用格式的方法有兩種。您可以個別指定特定格式,或使用一個特殊格式物件來同時指定一組格式。

ITextLayoutFormat 介面包含可以套用至 FlowElement 的所有格式。部分格式會套用至整個文字容器或文字段落,但不會以此類推地套用至個別字元。例如,格式如對齊和定位停駐點會套用至整個段落,但不會套用至個別字元。

使用屬性指定 FlowElement 的格式

您可以透過屬性指定,設定任何 FlowElement 的格式。FlowElement 類別實作 ITextLayoutFormat 介面,因此 FlowElement 類別的所有子類別都必須也實作該介面。

例如,在下列程式碼中,會說明如何指定個別格式給 ParagraphElement 實體。

var p:ParagraphElement = new ParagraphElement(); 
p.fontSize = 18; 
p.fontFamily = "Arial";

使用 TextLayoutFormat 類別指定 FlowElement 的格式

您可以使用 TextLayoutFormat 類別,將格式套用至 FlowElement。這個類別可用來建立含有您想要之所有格式值的特殊格式物件。之後,就可以將該物件指定給任何 FlowElement 物件的 format 屬性。TextLayoutFormat 和 FlowElement 都實作 ITextLayoutFormat 介面。這種安排會確保這兩個類別都包含相同的格式屬性。

如需詳細資訊,請參閱「適用於 Adobe Flash Platform 的 ActionScript 3.0 參考」中的 TextLayoutFormat

格式繼承

透過文字流程階層繼承格式。如果您將 TextLayoutFormat 實體指定給具有子系的 FlowElement 實體,則該架構會起始「重疊顯示」程序。在重疊顯示期間,架構會遞迴地檢查階層中每個繼承該 FlowElement 的節點。然後決定是否將繼承值指定給每個格式屬性。在重疊顯示期間,會套用下列規則:

  1. 屬性值只能繼承自直系祖系 (有時稱為父系)。

  2. 只有在屬性還沒有值 (也就是值為 undefined) 時,才會繼承屬性值。

  3. 某些特質在未定義時並不會繼承值,除非該特質的值設為「inherit」或常數 flashx.textLayout.formats.FormatValue.INHERIT

例如,如果您在 TextFlow 層級設定 fontSize 值,則該設定會套用至 TextFlow 中的所有元素。換句話說,值會往下重疊顯示文字流排階層。不過,您可以直接指定新的值給指定元素,即可覆寫該元素中的值。另舉一個反例,如果您在 TextFlow 層級設定 backgroundColor 值,則 TextFlow 的子系並不會繼承該值。backgroundColor 屬性在重疊顯示期間並不會從父系繼承。您可以將每個子系的 backgroundColor 屬性設為 flashx.textLayout.formats.FormatValue.INHERIT,就可以覆寫此行為。

如需詳細資訊,請參閱「適用於 Adobe Flash Platform 的 ActionScript 3.0 參考」中的 TextLayoutFormat

使用 TLF 匯入和匯出文字

flashx.textLayout.conversion 中的 TextConverter 類別。* 套件可讓您在 TLF 匯入或匯出文字。如果計劃在執行階段載入文字,而不是將文字編譯至 SWF 檔案,請使用這個類別。您也可以使用這個類別,將儲存在 TextFlow 實體中的文字匯出至 String 或 XML 物件。

匯入和匯出都是十分簡單的程序。您可以呼叫 export() 方法或 importToFlow() 方法,這兩種方法都是 TextConverter 類別的一部分。兩種方法都是靜態的,這表示您是呼叫 TextConverter 類別的方法,而不是呼叫 TextConverter 類別實體的方法。

在 flashx.textLayout.conversion 套件中的類別,為您選擇儲存文字的位置提供相當大的彈性。例如,如果您將文字儲存至資料庫中,就可以將文字匯出至架構來顯示文字。 您可以使用 flashx.textLayout.edit 套件中的類別來變更文字,並將變更的文字匯回您的資料庫。

如需詳細資訊,請參閱「適用於 Adobe Flash Platform 的 ActionScript 3.0 參考」中的 flashx.textLayout.conversion

使用 TLF 管理文字容器

將文字儲存在 TLF 資料結構後,Flash Player 即可顯示它。儲存在流排階層中的文字必須轉換為 Flash Player 可以顯示的格式。TLF 提供兩種方式,讓您從流排建立顯示物件。第一個較簡單的方式適用於顯示靜態文字。第二個較複雜的方式可讓您建立可以選取和編輯的動態文字。不論是哪一種方式,文字最終都會轉換為 TextLine 類別的實體,而該類別是 Flash Player 10 中 flash.text.engine 套件的一部分。

建立靜態文字

簡單方式使用的是 TextFlowTextLineFactory 類別 (位於 flashx.textLayout.factory 套件)。這個方式除了簡單之外,其優點是記憶體使用量少於 FlowComposer 方式。這種方式適合用於使用者不需要編輯、選取或捲動的靜態文字。

如需詳細資訊,請參閱「適用於 Adobe Flash Platform 的 ActionScript 3.0 參考」中的 TextFlowTextLineFactory

建立動態文字與容器

如果想對於文字的顯示擁有比 TextFlowTextLineFactory 提供的控制更多,可以使用流排撰寫器。例如,使用流排撰寫器時,使用者可以選取和編輯文字。如需詳細資訊,請參閱使用 TLF 啟用文字選取範圍、編輯和還原

流排撰寫器是 flashx.textLayout.compose 套件中 StandardFlowComposer 類別的實體。流排撰寫器可管理如何將 TextFlow 轉換為 TextLine 實體,以及管理如何將那些 TextLine 實體放入一或多個容器。

檢視完整大小的圖形
IFlowComposer 可能沒有任何 ContainerController,也可能有多個 ContainerController。

每個 TextFlow 實體都會有實作 IFlowComposer 介面的對應物件。此 IFlowComposer 物件可透過 TextFlow.flowComposer 屬性加以存取。您可以透過此屬性呼叫由 IFlowComposer 介面定義的方法。這些方法可讓您將此文字與一或多個容器關聯,並準備要在容器中顯示的文字。

容器是 Sprite 類別的實體,而該類別是 DisplayObjectContainer 類別的子類別。這兩個類別都是 Flash Player 顯示清單 API 的一部分。容器是用於 TextLineFactory 類別中矩形邊界的進階型態。與矩形邊界類似,容器會定義 TextLine 實體顯示的區域。與矩形邊界不同的是,容器有對應的「控制器」物件。控制器會管理一個容器或一組容器的捲動、撰寫、連結、格式化和事件處理。每個容器都有對應的控制器物件,該物件是 flashx.textLayout.container 套件中 ContainerController 類別的實體。

若要顯示文字,請建立控制器物件以管理容器,並將它與流排撰寫器關聯。讓容器產生關聯之後,撰寫文字以供顯示。所以,容器有兩個狀態:撰寫和顯示。撰寫是將文字從文字流排階層轉換為 TextLine 實體,並計算這些實體是否放得進容器的程序。顯示則是更新 Flash Player 顯示清單的程序。

如需詳細資訊,請參閱「適用於 Adobe Flash Platform 的 ActionScript 3.0 參考」中的 IFlowComposerStandardFlowComposerContainerController

使用 TLF 啟用文字選取範圍、編輯和還原

選取或編輯文字的功能是控制於文字流排層級。TextFlow 類別的每個實體都有一個相關聯的互動管理員。您可以透過 TextFlow 物件的 TextFlow.interactionManager 屬性來存取物件的互動管理員。若要啟用文字選取,請將 SelectionManager 類別的實體指定給 interactionManager 屬性。若要同時啟用文字選取和編輯,請指定 EditManager 類別的實體,而非指定 SelectionManager 類別的實體。若要啟用還原操作,請建立 UndoManager 類別的實體,然後在呼叫 EditManager 的建構函式時傳遞為引數。UndoManager 類別會維護使用者最近編輯活動的操作記錄,並讓使用者還原或重做特定編輯。這三個類別都是編輯套件的一部分。

如需詳細資訊,請參閱「適用於 Adobe Flash Platform 的 ActionScript 3.0 參考」中的 SelectionManagerEditManagerUndoManager

使用 TLF 處理事件

TextFlow 物件會在許多情況下傳送事件,包括:
  • 當文字或版面變更時

  • 作業開始之前和作業完成之後

  • FlowElement 物件的狀態變更時

  • 撰寫作業完成時

如需詳細資訊,請參閱「適用於 Adobe Flash Platform 的 ActionScript 3.0 參考」中的 flashx.textLayout.events

將影像定位在文字內部

若要將 InlineGraphicElement 定位在文字內部,可以使用下列屬性:
  • InlineGraphicElement 類別的 float 屬性

  • FlowElement 的 clearFloats 屬性

float 屬性可控制圖形與圖形周圍文字的位置。clearFloats 屬性可控制段落元素相對於 float 的位置。

若要將影像位置控制在文字元素內部,可使用 float 屬性。下例範例會新增影像到段落,並將該影像靠左對齊,使文字圍繞在右側:
<flow:p paragraphSpaceAfter="15" >Images in a flow are a good thing. For example, here is a float. It should show on the left: <flow:img float="left" height="50" width="19" source="../assets/bulldog.jpg"></flow:img> Don't you agree? Another sentence here. Another sentence here. Another sentence here. Another sentence here. Another sentence here. Another sentence here. Another sentence here. Another sentence here.</flow:p>

float 屬性的有效值為 “left”、“right”、“start”、“end” 及 “none”。Float 類別可定義這些常數。預設值為 “none”。

當您想調整一般會圍繞在影像周圍之後續段落的開始位置時,clearFloats 屬性就很有用。例如,假設您有一個比第一個段落大的影像。為確保第二個段落會在影像後面開始,請設定 clearFloats 屬性。

下列範例使用較第一個段落文字高的影像。為使第二個段落在文字區塊中的影像之後開始,此範例將第二個段落的 clearFloats 屬性設為 “end”。
<flow:p paragraphSpaceAfter="15" >Here is another float, it should show up on the right: <flow:img float="right" height="50" elementHeight="200" width="19" source="../assets/bulldog.jpg"></flow:img>We'll add another paragraph that should clear past it.</flow:p><flow:p clearFloats="end" >This should appear after the previous float on the right.</flow:p>

clearFloats 屬性的有效值為 “left”、“right”、“end”、“start”、“none” 及 “both”。ClearFloats 類別可定義這些常數。您也可將 clearFloats 屬性設為 “inherit”,它是 FormatValue 類別所定義的常數。預設值為 “none”。

使用項目清單

您可使用 ListElement 與 ListItemElement 類別,將項目清單新增至您的文字控制項。項目清單可以是巢狀的,也可以使用不同的項目符號 (或標記) 與自動編號自訂項目清單。

若要在文字流排中建立清單,請使用 <list> 標記。然後針對清單中的每個清單項目,在 <list> 標記中使用 <li> 標記。您可以使用 ListMarkerFormat 類別來自訂項目符號的外觀。

下列範例會建立簡易的清單:
<flow:list paddingRight="24" paddingLeft="24"> 
    <flow:li>Item 1</flow:li> 
    <flow:li>Item 2</flow:li> 
    <flow:li>Item 3</flow:li> 
</flow:list>
您可在其他清單中巢狀清單,如下列範例所示:
<flow:list paddingRight="24" paddingLeft="24"> 
    <flow:li>Item 1</flow:li> 
    <flow:list paddingRight="24" paddingLeft="24"> 
        <flow:li>Item 1a</flow:li> 
        <flow:li>Item 1b</flow:li> 
        <flow:li>Item 1c</flow:li> 
    </flow:list> 
    <flow:li>Item 2</flow:li> 
    <flow:li>Item 3</flow:li> 
</flow:list>
若要自訂清單中的標記類型,請使用 ListElement 的 listStyleType 屬性。此屬性可以是 ListStyleType 類別定義的任何值 (例如 checkcircledecimal 以及 box)。下列範例會建立含有多種標記類型與自訂計數器遞增量的清單:
<flow:list paddingRight="24" paddingLeft="24" listStyleType="upperAlpha">     <flow:li>upperAlpha item</flow:li>     <flow:li>another</flow:li> </flow:list> <flow:list paddingRight="24" paddingLeft="24" listStyleType="lowerAlpha">     <flow:li>lowerAlpha item</flow:li>     <flow:li>another</flow:li> </flow:list> <flow:list paddingRight="24" paddingLeft="24" listStyleType="upperRoman">     <flow:li>upperRoman item</flow:li>     <flow:li>another</flow:li> </flow:list> <flow:list paddingRight="24" paddingLeft="24" listStyleType="lowerRoman">     <flow:listMarkerFormat>         <!-- Increments the list by 2s rather than 1s. -->         <flow:ListMarkerFormat counterIncrement="ordered 2"/>     </flow:listMarkerFormat>     <flow:li>lowerRoman item</flow:li>     <flow:li>another</flow:li> </flow:list>

您可使用 ListMarkerFormat 類別來定義計數器。除定義計數器的遞增量之外,您也可使用 counterReset 屬性重設計數器加以自訂。

您可使用 ListMarkerFormat 的 beforeContentafterContent 屬性,進一步自訂清單中的標記外觀。這些屬性會套用至顯示於標記內容前後的內容。

下列範例會在標記之前新增 “XX” 字串,並在標記之後新增 “YY” 字串:
<flow:list listStyleType="upperRoman" paddingLeft="36" paddingRight="24"> 
    <flow:listMarkerFormat> 
        <flow:ListMarkerFormat fontSize="16" 
            beforeContent="XX" 
            afterContent="YY" 
            counterIncrement="ordered -1"/> 
        </flow:listMarkerFormat> 
    <flow:li>Item 1</flow:li> 
    <flow:li>Item 2</flow:li> 
    <flow:li>Item 3</flow:li> 
</flow:list>
content 屬性本身可定義進一步的標記格式自訂內容。下列範例顯示依順序排列的大寫羅馬數字標記:
<flow:list listStyleType="disc"  paddingLeft="96" paddingRight="24"> 
    <flow:listMarkerFormat> 
        <flow:ListMarkerFormat fontSize="16" 
            beforeContent="Section " 
            content="counters(ordered,&quot;*&quot;,upperRoman)" 
            afterContent=": "/> 
    </flow:listMarkerFormat> 
    <flow:li>Item 1</li> 
    <flow:li>Item 2</li> 
    <flow:li>Item 3</li> 
</flow:list>

如先前的範例所示,content 屬性也可插入字尾 (顯示於標記之後、afterContent 之前的字串)。若要在提供流排的 XML 內容時插入此字串,請將字串括在 &quote; HTML 實體中,而不是使用引號 ("<string>")。

在 TLF 中使用邊框距離

每個 FlowElement 均支援邊框距離屬性,使用此屬性可控制每個元素內容區域的位置,以及內容區域之間的空間。

元素的總寬度是其內容寬度加上 paddingLeftpaddingRight 屬性的和。元素的總高度是其內容高度加上 paddingToppaddingBottom 屬性的和。

邊框距離是邊框與內容之間的空間。邊框距離屬性為 paddingBottompaddingToppaddingLeft 以及 paddingRight。邊框距離可套用至下列元素:
  • div

  • img

  • li

  • list

  • p

邊框距離屬性不可套用至範圍元素。

下列範例可設定 TextFlow 上的邊框距離屬性:
<flow:TextFlow version="2.0.0" xmlns:flow="http://ns.adobe.com/textLayout/2008" fontSize="14" textIndent="15" paddingTop="4" paddingLeft="4" fontFamily="Times New Roman">

邊框距離屬性的有效值為數字、百分比、“auto” 或 “inherit”。預設值為 “auto”,顧名思義為一個自動計算的值,除 ListElement 以外的所有元素都將設為 0。對於 ListElement 而言,除了使用 listAutoPadding 屬性值的清單起始端之外,“auto” 均為 0。listAutoPadding 的預設值為 40,提供清單預設的縮排值。

預設不會繼承邊框距離屬性。“auto” 與 “inherit” 值均為 FormatValue 類別定義的常數。

邊框距離屬性可以是負值。