Hi
Im evaluating the flash cs4 IDE for my company for its new text layout RTL feature.
Ive been tring to implement a simple RTL text component with no success.
The only reason i am tring flash CS4 is for its RTL feature.
Please can someone give me a simple one liner example for implementing RTL in a TextLayout component (using actionscript 3 with flash CS4 - no flex!).
Thnx
Dotan
At this point I'd recommend not using the flash cs4 component that was posted last November. Better would be to get the weekly build from labs and then directly add textLayout.swc to your project as a library. All of the examples in the actionscript directory (included with the build) can be built with Flash CS4 and do not use Flex.
I'd recommend the ImportMarkup.as example. Modify the markup to include RTL content and add an EditManager. Add direction="rtl" to the TextFlow element. Sorry its not one line.
There are known problems in FlashPlayer 10 with the IMEs and various languages. Check the release notes for details. Player team is working on adding IME support in the player.
Hope that helps,
Richard
Ive done it!
I got it to go RTL in one line +/-.
For all you out thare googling it here is a simple way:
1. add a TextLayout component the stage (lets name it myTextLayout).
2. in actionscript 3:
myTextLayout.xmlText="<?xml version=\"1.0\" encoding=\"utf-8\"?>"+
"<flow:TextFlow xmlns:flow=\"http://ns.adobe.com/textLayout/2008\" >"+
"<flow:p direction=\"rtl\">אחת two שלוש</flow:p>"+
"</flow:TextFlow>";
This works like a charm!
I have some more questions:
1. how do i access the "p" node (from the example above) with actionscript. is there a getElementById for this.
2. whare can i the API Reference for the XML (what kind of elements are there, what do thay do and what properties thay have).
thanx
dotan
Note this all applies to more recent builds than the original Flash CS4 extension.
There is a TextFlow.getElementByID function.
Docs are available here:
http://livedocs.adobe.com/flex/gumbo/langref/
I couldn't find a doc with the complete list of tags though it must be posted somewhere. This should be useful to other folks as long as they get past the subject of the post.
Here's a list and the class they map to.
| TextFlow | TextFlow |
| div | DivElement |
| p | ParagraphElement |
| tcy | TCYElement |
| a | LinkElement |
| img | InlineGraphicElement |
| br | BreakElement |
| tab | TabElement |
| span | SpanElement |
| format | TextLayoutFormat |
| linkNormalFormat | TextLayoutFormat |
| linkHoverFormat | TextLayoutFormat |
| linkActiveFormat | TextLayoutFormat |
For the suported attributes check out the TextLayoutFormat class. Also id and styleName are supported.
Note that format elements may only be a child of a TextFlow and need to have an id property. To refer to a named format use format="idname" on a element. The link*Format tags are for specifying how LinkElements appear in different states. They cascade to children when specified on parent elements.
Richard
Hi
Im reevaluating the flash CS4 IDE for my company for its new RTL feature.
Last time it didnt work properly so we decided to countinue with CS3.
I want to try once more to see if i can implement a simple RTL text component (with dynamic code control over the text content).
1. Can it be done with Flash CS4?
2. Should i use the TextLayout component or TextBlock?
3. Can you give step by step instarctions on how to do it or point me to a tutorial please?
We will decide to upgrade all our Flash CS3 accounts to Flash CS4 accounts if we can get RTL support in flash.
Thnx
Dotan
I'm sure there are a million ways to do this better - I don't claim to be an AS3 expert. But I am also evaluating this for use with RTL languages and I got Arabic to work w/Flash CS4 in AS3. I pulled this chunk of code out of my implementation that seems to work:
package com.foo{
import flash.display.MovieClip;
import flashx.textLayout.container.ContainerController;
import flashx.textLayout.elements.*;
import flashx.textLayout.formats.*;
public class Main extends MovieClip{
public function Main(){
var textFlow:TextFlow = new TextFlow();
textFlow.textAlign = TextAlign.RIGHT;
var containerController:ContainerController = new ContainerController(this,400,400);
containerController.verticalAlign = flashx.textLayout.formats.VerticalAlign.MIDDLE;
textFlow.flowComposer.addController(containerController);
var paragraphElement:ParagraphElement= new ParagraphElement();
paragraphElement.direction = flashx.textLayout.formats.Direction.RTL;
paragraphElement.fontSize = 36;
var spanElementTarget:SpanElement = new SpanElement();
spanElementTarget.text = "السّلام عليكم.";
paragraphElement.addChild(spanElementTarget);
textFlow.addChild(paragraphElement)
textFlow.flowComposer.updateAllControllers();
}
}
}
Note the period in the Arabic phrase appears correctly on the left in my rendered swf even though it appears here on the right.
I'm using the textLayout.swc from the Flex SDK 4.0.0.10485. My swc is dated 9/22/2009. This may not work if you have an older one.
-Tim
Also recomend to set textFlow.language="ar".
Thanks Richard... good point.
Your swc is fairly old - recommend getting a newer one. The latest builds are stable and near to shipping code.
Can I ask a stupid question? Where can I get the latest build? The Text Layout Framework section of the Adobe Open Source site says this is bundled with the Flex SDK and I think I have the lastest copy of that. The Adobe Labs version looks like it is from 2008. Clearly I am missing something.
-Tim
Latest swcs are available from this page.
http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4
Not as easy to find as it should be.
Richard
I'm trying to implement a bidi RTL TextField (flash.text.TextField) with no luck.
I tried 2 approaches:
Is there a way to access the text inside a TextLayout component with AS3?
If not, can you help me fill the empty functions for my TextField implementation?
My implementation:
package
{
import flash.display.MovieClip;
import flashx.textLayout.edit.EditManager;
import flashx.textLayout.formats.Direction;
import flashx.textLayout.container.DisplayObjectContainerController;
import flashx.textLayout.container.IContainerController;
import flashx.textLayout.elements.Configuration;
import flashx.textLayout.elements.ParagraphElement;
import flashx.textLayout.elements.SpanElement;
import flashx.textLayout.elements.TextFlow;
import flashx.textLayout.formats.CharacterFormat;
import flashx.textLayout.formats.ParagraphFormat;
import flashx.textLayout.formats.JustificationRule;
import flashx.textLayout.formats.TextAlign;
import flash.text.engine.FontPosture;
import flash.text.engine.Kerning;
public dynamic class MyTextField extends MovieClip
{
private var mainSpan:SpanElement;
private var textFlow:TextFlow;
private var paraFormat:ParagraphFormat;
private var charFormat:CharacterFormat;
private var config:Configuration;
public function MyTextField(twidth:Number=-1,theight:Number=1)
{
if (twidth == -1) twidth = this.width;
if (theight == -1) theight = this.height;
config = new Configuration();
charFormat = new CharacterFormat();
charFormat.color = 0x000000;
paraFormat = new ParagraphFormat();
charFormat.fontFamily = "Arial";
charFormat.fontSize = 12;
charFormat.kerning = Kerning.ON;
paraFormat.direction = Direction.RTL;
config.textFlowInitialCharacterFormat = charFormat;
config.textFlowInitialParagraphFormat = paraFormat;
textFlow = new TextFlow(config);
textFlow.interactionManager = new EditManager();
var p:ParagraphElement = new ParagraphElement();
mainSpan = new SpanElement();
mainSpan.text = "one two three";
p.addChild(mainSpan);
textFlow.addChild(p);
textFlow.flowComposer.addController(new DisplayObjectContainerController(this, twidth, theight));
textFlow.flowComposer.updateAllContainers();
}
public function set text(t:String) {
mainSpan.text = t;
textFlow.flowComposer.updateAllContainers();
}
public function get text():String {
return mainSpan.text;
}
public function set color(obj:Object) {
}
public function set direction(dir:String) {
}
public function set fontFamily(s:String) {
}
public function set fontSize(n:int) {
}
public function set maxChars(n:int) {
}
public function set multiline(b:Boolean) {
}
public function set selectable(selectable:Boolean) {
}
public function set type(str:String) {
//DYNAMIC or INPUT.
}
}
}
Please help I am really eating grind stones with this.
Is there a way to access the text inside a TextLayout component with AS3?
Sure. I'm not sure if this helps, but you could access the text inside the simple example I posted above with something like this:
var leaf:SpanElement = SpanElement(textFlow.getFirstLeaf());
trace(leaf.text);
while(leaf = SpanElement(leaf.getNextLeaf()))
trace(leaf.text);
I found that as well, in my wrapper class:
public function set text(t:String) {
mainSpan.text = t;
textFlow.flowComposer.updateAllContainers();
}
public function get text():String {
return mainSpan.text;
}
What i need is the other wrapper function so i will have basic "TextField" functionality.
The function i need:
public function set color(obj:Object) {
}
public function set direction(dir:String) {
}
public function set fontFamily(s:String) {
}
public function set fontSize(n:int) {
}
public function set maxChars(n:int) {
}
public function set multiline(b:Boolean) {
}
public function set selectable(selectable:Boolean) {
}
public function set type(str:String) {
//DYNAMIC or INPUT.
}
Or if you can tell me how to access the text inside a CS4 TextLayout component which i initiated with the CS4 IDE (drag and droped from the component panel and initialized with the new TextLayout component menu).
thanx
Dotan
The download you suggested http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4
Any other url?
thanks,
Hi
A year as passed since my original post and CS5 came out.
I was not able to get RTL text working with CS4 properly and now i am tring once more with CS5.
I am tring to get the new TLF Text to display RTL text with no succses yet....
I couldent find a direction propertie in the TLF Text properties.
In the Flash CS5 new features the folowing spec was announced:
"New text capabilities via the Text Layout Framework (TLF) — Get unprecedented text control and creativity with projects created in Flash. Advanced styling and layout, including right to left text, columns, and threaded text blocks, let you work with text in Flash like never before."
My question is:
How do i get the new CS5 TLF Text to work as a RTL text field (including input)?
It's initially hidden. I'm not entirely familiar with the Flash CS5 UI, so it took me a little while to find it.
1. Drag out a rectangle with the text tool.
2. In the Properties panel, choose TLF Text
3. In the top right menu of the Properties panel, choose Show Right-to-Left Options
4. Now in the Paragraph section you'll have a Direction control which you can set to Right to Left.
North America
Europe, Middle East and Africa
Asia Pacific
Copyright © 2012 Adobe Systems Incorporated. All rights reserved.
Use of this website signifies your agreement to the Terms of Use and Online Privacy Policy (updated 07-14-2009).