Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Text Layout Framework

Compatible Flash Builder 4. Cliquer pour en savoir plus sur les compatibilités.Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Par d.exter (Denis exter), le 17 janvier 2010

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Présentation

TLF est une librairie Actionscript extensible, qui utilise les capacités du Flash player 10. Elle a été développée en collaboration avec l’équipe d’Indesign, des spécialistes de la typographie et de la mise en page. Cette librairie, permet de faire bien plus de chose que ne le permet HTML & CSS.

Cette librairie est déjà utilisé dans des applications AIR par le New York times (http://timesreader.nytimes.com/timesreader/) et le Boston Globe (http://www.boston.com/bostonglobe/reader/). Ces deux applications montrent bien l’utilisation de cette librairie avec du texte sur plusieurs colonnes et la gestion du redimensionnement par exemple. Vous pouvez également voir une démo à l’adresse suivante :

http://labs.adobe.com/technologies/textlayout/demos/

Cette librairie a été construite au sommet du nouveau moteur de texte du Flash Player 10 et de AIR 1.5. Elle fournit un support de haute qualité, typographiquement riche, de mise en page avec sélection, edition, copier coller, annulation des modifications, et XML pour styler le texte dynamiquement.

Cette librairie est écrite en actionscript 3.0 et n’a aucune dépendance avec Flash CS4 professionnel, Flex ou autres programmes.

TLF est une librairie pour les développeur qui travail avec Flash, flex builder, ou autres programmes qui supportent l’actionscript. Elle peut être utilisée pour mettre en page du texte visuellement et donne accès à des fonctionnalités typographiques avancées.

Les fonctionnalités de la librairie sont les suivantes :

Languages internationnaux

Support pour le texte bidirectionnel, vertical et support de plus de 30 écritures incluant l’arabe, l’hébreux, le chinois, le japonais, le koréen,le thai, le laocien, le vietnamien, le bengalai, le tamil, et encore bien d’autres.

Controles typographiques riches

   •	Fonctions OpenType 
   •	Kerning qui est le processus d'ajout ou la soustraction d'espace entre les paires de caractères spécifique
   •	Tracking qui est le processus d'espacement entre les caractères du texte sélectionné ou un bloc entier de texte
   •	Décalage de la ligne de base
   •	Traits d’union
   •	Marges du haut et du bas (espaces avant et après)

Typographie de l’asie de l’est

   •	Justifier d’Asie de l’est
   •	Texte vertical
   •	Texte horizontal dans le text vertical –Tate-Chu-Yoko (TCY)

Disposition des textes

   •	Colonnes multiples
   •	Les textes peuvent traverser les containers liés
   •	Arrêts de tabulations
   •	Graphiques intégrés - images (png, jpegs), SWFs, ou tout lecteur instantané DisplayObject
   •	Liens hypertextes

Support de rendus

   •	Transparence
   •	Dispositifs et polices de caractères embarquées
   •	Support Anti-aliasing pour les polices embarquées
   •	Nouveau format de font embarquées (DefineFont4), qui fournit un support typographique,un  support international et réduit la taille de la police.

Edition

   •	Sélection, édition, couper, copier & coller
   •	Gestion standard du clavier et de la souris pour l’édition (ctrl/cmd home/end, double click etc.)
   •	Mode de sélection – permet de traiter le texte en lecture seule, lecture-sélection ou lecture-écriture
   •	Operation d’annulation ( undo and redo)

Riche API pour développeur

   •	Mise en page de texte – format nativement basé sur XML pour l’importation et l’exportation
   •	Modèles de contenu de texte & manipulation API
   •	Mesures & placement —alignement des objets avec les compositions de textes
   •	Evénements – notification du défilement, opérations d’éditions, composition and sélection
   •	Opérations d’édition – Insértion/Suppression de texte, changement de format, creation de liens, etc…
   •	Défilement personalisable
   •	Liens hypertexts extensibles (clique de la souris et passage de la souris au-dessus)
   •	Ajout de souligenements, surlignement, etc…

La librairie fonctionne avec le Flash player 10, Flex, AIR 1.5 ou Flash CS4.

Installation

Dans ce tutoriel, nous allons voir comment utiliser cette librairie, et l’intégrer dans un projet Flex, avec Flash Builder. Pour les utilisateurs de Flash vous trouverez quelques renseignements dans la conversation au sujet de ce tutoriel.

Il vous faut donc :

- Flash Builder (http://labs.adobe.com/technologies/flashbuilder4/)

Pour les utilisateurs de Flash Builder la librairie est déjà intégrée dans le SDK, mais pour les utilisateur de Flex Builder 3, il faut télécharger la librairie (http://labs.adobe.com/downloads/textlayout.html) et copier textLayout_core.swc, textLayout_edit.swc & textLayout_conversion.swc dans le répertoire /libs de votre projet Flex.

Pour les utilisateurs de Flash CS4, il faut également télécharger la librairie pour flash CS4 (http://labs.adobe.com/downloads/textlayout.html) et installer le .MXP qui se trouve dans le fichier .zip.

Par contre, TLF a été intégrée directement dans Flash CS5. Plus besoin donc de l'installer si vous avez cette version de Flash.
Lilive - le 25/05/2010

Je ne m’étendrais pas plus sur les deux dernières utilisations, car le tutoriel porte sur Flash Builder, veuillez donc vous reporter à la documentation de Adobe.

Mise en application: Editeur de texte

Nous allons tout d’abord créer un nouveau projet sous Flash builder, pour ce faire, cliquer sur :

- Fichier –> Nouveau –> Projet Flex

- Nommer le TLF

- Sélectionner Application web

- Cliquez sur Terminer.

Le projet est ainsi créer.

Comme exemple, nous allons créer un éditeur de Texte personnalisé, nous allons donc créer un nouveau package :

- Fichier –> Nouveau –> Package

- Fichier –> Nouveau –> Composant MXML

- Nommer le CustomEditeur

- Sélectionné Basé sur : spark.components.Panel

 
<?xml version="1.0" encoding="utf-8"?>
<s:Panel name="CustomEditor"
		 xmlns:fx="http://ns.adobe.com/mxml/2009"
		 xmlns:s="library://ns.adobe.com/flex/spark"
		 xmlns:mx="library://ns.adobe.com/flex/halo"
		 title="Texte Editeur personalisé" minWidth="600">
	<s:layout>
		<s:VerticalLayout gap="0" />
	</s:layout>
</s:Panel>

Nous allons maintenant créer une barre d’outil qui contiendra les éléments permettant le formattage de notre texte, à savoir, une liste déroulante pour la sélection des polices de caractères, une liste déroulante pour la taille de la police, un bouton pour mettre en gras du texte, un autre pour mettre du texte en italique, un supplémentaire pour tracer du texte, et enfin un dernier pour souligner du texte. Nous allons également mettre un élément qui permettra à l’utilisateur de sélectionner la couleur du texte, ainsi qu’une barre de boutons permettant de définir l’alignement du texte (à gauche, centrer, à droite, ou justifier).

 
<mx:ControlBar width="100%" cornerRadius="0">
		<mx:ToolBar width="100%" horizontalGap="5">
			<s:DropDownList id="ddlFont"
							width="150"
							change="ddlFont_changeHandler(event);">
				<s:dataProvider>
					<s:ArrayList source="[Arial,Verdana,Times New Roman,Trebuchet MS]" />
				</s:dataProvider>
			</s:DropDownList>
			<s:DropDownList id="ddlSize"
							width="60"
							change="ddlSize_changeHandler(event);">
				<s:dataProvider>
					<s:ArrayList source="[8,10,12,14,16,24,36,72]" />
				</s:dataProvider>
			</s:DropDownList>
			<s:ToggleButton id="btnBold"
							label="B"
							fontWeight="bold"
							width="30"
							click="btnBold_clickHandler(event);" />
			<s:ToggleButton id="btnItalic"
							label="I"
							fontStyle="italic"
							width="30"
							click="btnItalic_clickHandler(event);" />
			<s:ToggleButton id="btnUnderline"
							label="U" 
							textDecoration="underline"
							width="30"
							click="btnUnderline_clickHandler(event);" />
			<s:ToggleButton id="btnLine"
							label="S"
							lineThrough="true"
							width="30"
							click="btnLine_clickHandler(event);" />
			<mx:ColorPicker id="cpColor"
							change="cpColor_changeHandler(event);" />
			<s:ButtonBar id="txtAlignBB"
						 arrowKeysWrapFocus="true"
						 labelField="label"
						 width="120"
						 change="txtAlignBB_changeHandler(event);">
				<s:dataProvider>
					<s:ArrayList>
						<fx:Object label="L" value="{TextAlign.LEFT}" />
						<fx:Object label="C" value="{TextAlign.CENTER}" />
						<fx:Object label="R" value="{TextAlign.RIGHT}" />
						<fx:Object label="J" value="{TextAlign.JUSTIFY}" />
					</s:ArrayList>
				</s:dataProvider>
			</s:ButtonBar>
		</mx:ToolBar>
	</mx:ControlBar>

Nous allons finalement placer notre « textFlow » dans un champs de texte, dans lequel nous placerons du texte pour notre démonstration :

<s:TextArea id="txtEditor"
				focusEnabled="false"
				width="100%" height="100%"
				minHeight="200"
				selectionChange="txtEditor_selectionChangeHandler(event);">
		<s:textFlow>
			<s:TextFlow paragraphSpaceBefore="20">
				<s:p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</s:p>
				<s:p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</s:p>
				<s:p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</s:p>
				<s:p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</s:p>
			</s:TextFlow>
		</s:textFlow>
	</s:TextArea>

Nous allons maintenant importer toutes les librairies utiles à notre code :

import flash.text.engine.FontPosture;
import flash.text.engine.FontWeight;
import flashx.textLayout.formats.TextAlign;
import flashx.textLayout.formats.TextDecoration;
import flashx.textLayout.formats.TextLayoutFormat;
import mx.events.ColorPickerEvent;
import mx.events.FlexEvent;
import spark.events.IndexChangeEvent;

Il ne nous reste plus qu’à coder les différentes fonctions qui permettront de mettre en forme notre texte, lorsque l’utilisateur cliquera sur l’un ou l’autre des boutons ou listes déroulantes. Nous allons commencer par la fonction permettant de définir la police de caractères , mais auparavant, je voudrais juste définir 2 propriétés importantes du textArea, qui vont être utilisée dans toutes nos fonctions, il s’agit de :

- selectionAnchorPosition: qui retourne la position d'ancrage de la sélection texte actuel

- selectionActivePosition: qui retourne la position active

                        protected function ddlFont_changeHandler(evt:IndexChangeEvent):void {
				var txtLayFmt:TextLayoutFormat = txtEditor.getFormatOfRange(null,
				      txtEditor.selectionAnchorPosition,
				      txtEditor.selectionActivePosition);
				txtLayFmt.fontFamily = ddlFont.selectedItem;
				txtEditor.setFormatOfRange(txtLayFmt,
				      txtEditor.selectionAnchorPosition,
				      txtEditor.selectionActivePosition);
				txtEditor.setFocus();
			}

La fonction suivante définira la taille de la police de caractères pour la sélection en cour :

                       protected function ddlSize_changeHandler(evt:IndexChangeEvent):void {
				var txtLayFmt:TextLayoutFormat = txtEditor.getFormatOfRange(null,
				      txtEditor.selectionAnchorPosition,
				      txtEditor.selectionActivePosition);
				txtLayFmt.fontSize = ddlSize.selectedItem;
				txtEditor.setFormatOfRange(txtLayFmt,
				     txtEditor.selectionAnchorPosition,
				     txtEditor.selectionActivePosition);
				txtEditor.setFocus();
			}

De même pour mettre du texte en gras :

                       protected function btnBold_clickHandler(evt:MouseEvent):void {
				var txtLayFmt:TextLayoutFormat = txtEditor.getFormatOfRange(null,
					txtEditor.selectionAnchorPosition,
					txtEditor.selectionActivePosition);
				txtLayFmt.fontWeight = (txtLayFmt.fontWeight == FontWeight.BOLD) ? FontWeight.NORMAL : FontWeight.BOLD;
				txtEditor.setFormatOfRange(txtLayFmt,
					txtEditor.selectionAnchorPosition,
					txtEditor.selectionActivePosition);
				txtEditor.setFocus();
			}

Puis en italique :

                        protected function btnItalic_clickHandler(evt:MouseEvent):void {
				var txtLayFmt:TextLayoutFormat = txtEditor.getFormatOfRange(null,
					txtEditor.selectionAnchorPosition,
					txtEditor.selectionActivePosition);
				txtLayFmt.fontStyle = (txtLayFmt.fontStyle == FontPosture.ITALIC) ? FontPosture.NORMAL : FontPosture.ITALIC;
				txtEditor.setFormatOfRange(txtLayFmt,
					txtEditor.selectionAnchorPosition,
					txtEditor.selectionActivePosition);
				txtEditor.setFocus();
			}

La fonction pour souligner du texte :

                        protected function btnUnderline_clickHandler(evt:MouseEvent):void {
				var txtLayFmt:TextLayoutFormat = txtEditor.getFormatOfRange(null,
					txtEditor.selectionAnchorPosition,
					txtEditor.selectionActivePosition);
				txtLayFmt.textDecoration = (txtLayFmt.fontStyle == TextDecoration.UNDERLINE) ? TextDecoration.NONE : TextDecoration.UNDERLINE;
				txtEditor.setFormatOfRange(txtLayFmt,
					txtEditor.selectionAnchorPosition,
					txtEditor.selectionActivePosition);
				txtEditor.setFocus();
			}

Et finalement pour tracer du texte :

                         protected function btnLine_clickHandler(evt:MouseEvent):void {
				var txtLayFmt:TextLayoutFormat = txtEditor.getFormatOfRange(null,
					txtEditor.selectionAnchorPosition,
					txtEditor.selectionActivePosition);
				txtLayFmt.lineThrough = btnLine.selected;
				txtEditor.setFormatOfRange(txtLayFmt,
					txtEditor.selectionAnchorPosition,
					txtEditor.selectionActivePosition);
				txtEditor.setFocus();
			}

Voici maintenant la fonction du sélecteur de couleurs :

                        protected function cpColor_changeHandler(evt:ColorPickerEvent):void {
				var txtLayFmt:TextLayoutFormat = txtEditor.getFormatOfRange(null,
					txtEditor.selectionAnchorPosition,
					txtEditor.selectionActivePosition);
				txtLayFmt.color = cpColor.selectedColor;
				txtEditor.setFormatOfRange(txtLayFmt,
					txtEditor.selectionAnchorPosition,
					txtEditor.selectionActivePosition);
				txtEditor.setFocus();
			}

Et finalement, la fonction de la barre de boutons concernant l’alignement du texte :

                        protected function txtAlignBB_changeHandler(evt:IndexChangeEvent):void {
				if (txtAlignBB.selectedItem) {
					var txtLayFmt:TextLayoutFormat = txtEditor.getFormatOfRange(null,
						txtEditor.selectionAnchorPosition,
						txtEditor.selectionActivePosition);
					txtLayFmt.textAlign = txtAlignBB.selectedItem.value;
					txtEditor.setFormatOfRange(txtLayFmt,
						txtEditor.selectionAnchorPosition,
						txtEditor.selectionActivePosition);
					txtEditor.setFocus();
				}
			}

Et il ne nous reste plus qu’à créer la fonction qui ajuste notre barre d’outil en fonction de la sélection effectuée sur notre texte.

                       protected function txtEditor_selectionChangeHandler(evt:FlexEvent):void {
				var txtLayFmt:TextLayoutFormat = txtEditor.getFormatOfRange(null,
				txtEditor.selectionAnchorPosition,
				txtEditor.selectionActivePosition);
				ddlFont.selectedItem = txtLayFmt.fontFamily;
				ddlSize.selectedItem = txtLayFmt.fontSize;
				btnBold.selected = (txtLayFmt.fontWeight == FontWeight.BOLD);
				btnItalic.selected = (txtLayFmt.fontStyle == FontPosture.ITALIC);
				btnUnderline.selected = (txtLayFmt.textDecoration == TextDecoration.UNDERLINE);
				cpColor.selectedColor = txtLayFmt.color;
				btnLine.selected = txtLayFmt.lineThrough;
 
				switch (txtLayFmt.textAlign) {
					case TextAlign.LEFT:
						txtAlignBB.selectedIndex = 0;
						break;
					case TextAlign.CENTER:
						txtAlignBB.selectedIndex = 1;
						break;
					case TextAlign.RIGHT:
						txtAlignBB.selectedIndex = 2;
						break;
					case TextAlign.JUSTIFY:
						txtAlignBB.selectedIndex = 3;
						break;
					default:
						txtAlignBB.selectedIndex = -1;
						break;
				}
			}

Il ne reste plus qu'ensuite à appeler notre composant depuis notre page principale :

 
<?xml version="1.0" encoding="utf-8"?>
<s:Application name="customEditor sample"
			   xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/halo"
			   xmlns:comps="comps.*">
	<s:layout>
		<s:VerticalLayout paddingLeft="20" paddingRight="20"
						  paddingTop="20" paddingBottom="20" />
	</s:layout>
 
	<comps:CustomEditeur id="customEditor" />
 
</s:Application>

Ceci est un bref aperçu de ce que l’on peut faire avec cette librairie, j’espère que cela vous aura donner envie d’en savoir plus et de l’explorer plus en profondeur.

Je joint le fichier du projet:

text_layout_framework.zip