Facebook Twitter

Multicolumn Text on the Fly with New AS3 TLF Text Classes in Flash CS5. We show how to use the new AS3 text layout classes: TextFlow, ContainerController, TextLayoutFormat, and properties like TextFlow.flowComposer to lay out and format text programmatically.

Multicolumn Text on the Fly with New AS3 TLF Text Classes in Flash CS5

In our example, the number of columns in the layout can be changed on the fly by dragging a slider. Click the screenshot to open Flash movie. Download Download all source files corresponding to this effect: Below, we comment on the code and the new AS3 classes used to create the effect. The Runtime Shared Library (RSL) for TLF Text When you compile the fla file in the zip package, textcols.fla, you will notice a file called textLayout_1.0.0.595.swz (about 150 KB) appearing alongside the swf file. Automatic Preloader If you look at the default Publish Settings in a Flash CS5 fla file, you will notice under Flash ->ActionScript 3 Settings, a swf preloader file (loading_animation.swf) listed with a local path to it.

Code and Comments For simplicity, we placed the code on the MainTimeline. Str2=" FlexLayouts. Spark layouts with Flex 4. As with most other features of the new Spark architecture, the new layouts are in fact based on the already powerful MX layout system. Flex 3 developers will feel at home with the general execution flow, APIs, and layout logic.

However, there are also a number of additions and changes that are driven by the Spark goal of more modular design. Common characteristics For the developer working in MXML, not much has changed. Properties such as width, height, minWidth, explicitWidth, and percentWidth as well as their syntax and semantics have not changed. The component developer will find familiar elements as well. Components still have their default size calculated when their measure() method is called. Notable changes Perhaps the most obvious layout difference is that in Spark the layouts have been separated from the containers! Layout logic is abstracted in separate classes inheriting from the LayoutBase class. Improvements and new features. Flex Layout – Types de Containers (Canvas, Form, Box, Grid …)

Chaque type de conteneur présent dans le framework Flex a un ensemble de règles qui définissent la manière dont il arrange ses children.

Flex Layout – Types de Containers (Canvas, Form, Box, Grid …)

Flex utilise ces règles pour mesurer l’espace disponible pour les enfants, et pour décider où les enfants sont positionnés. Un conteneur VBox, par exemple, arrange ses children de manière verticale, en plaçant chaque item par ligne. De manière similaire, un conteneur HBox arrange ses enfants de manières horizontale. Chaque conteneur a été conçu pour un usage spécifique. Savoir quand utiliser un conteneur en particulier est crucial lorsque vous voulez développer une application. Diagramme de classe de composants conteneurs: Les différents types de containers Flex: Application: Ce container spécial est la racine d’une application Flex. Flex 4 and the Text Layout Framework. One of my favorite things about Flex 4 is that it now includes the Text Layout Framework (TLF) as the basis of many Spark text components such as RichText, RichEditableText, TextArea, and TextInput as well as any other components that utilize any of these as part of another component, such as the ComboBox, which includes a TextInput control for example.

Flex 4 and the Text Layout Framework

You now have fine-grained control over text and text flow and can do some really amazing things with your UIs. This framework is extensive and I recently took some time to go through it all while building samples for Tour de Flex. I’d like to share some information I gathered while doing so. The Text Layout Framework is included in Flex 4 via the textLayout.swc. This swc contains three combined SWC’s including: • textLayout_core • textLayout_conversion • textLayout_edit The textLayout_core component is the main component for the framework and handles storage and display of text.

Model View flashx.textLayout.factory. Controller For instance: