Web Design Resources & Tutorials to help you design the best website!

So the New Flash Player 10 will be coming out with a Text Engine that is a significant improvement over what we have right now as of Player 9. There are around 32 new classes that you have so far, give or take a few. The Example that I have provided is pretty simple and the explanations are within the source code. All I am doing for all is choosing a font that I want, and choosing a couple of formatting styles. The Text has some sort of rotation in all 4 styles. Now If you don’t have the fonts that I used then you are probably going to see a different style. So make sure that you have these fonts : Times Roman, Geneva, Webdings, and Verdana or you can just copy and paste the code in Flex Builder and change it to whatever fonts you want to use.
Click Here for the Example Make Sure you are running Flash Player 10.
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="library:adobe/flex/halo" xmlns="http://ns.adobe.com/mxml/2009" xmlns:ns="library:adobe/flex/gumbo" xmlns:local="*" backgroundColor="0xFFFFFF" creationComplete="createElements()" layout="absolute"> <Script> <![CDATA[ import flash.display.Sprite; import flash.text.engine.*; import mx.events.*; import mx.core.*; private function createElements():void { var myContainer:UIComponent = new UIComponent(); var myHolder:FlexSprite = new FlexSprite(); /* This is for the Font we want to show the Text as */ var myFontDescription:FontDescription = new FontDescription(); myFontDescription.fontName="Times Roman";// hopefully you have it myFontDescription.fontWeight=FontWeight.BOLD; //we make it bold /* Now THe Element will show us the text and use the font we made */ var myElementFormatUp:ElementFormat = new ElementFormat(myFontDescription); myElementFormatUp.fontSize=40; myElementFormatUp.kerning = Kerning.ON; myElementFormatUp.color=0xFF000FF; myElementFormatUp.alpha=.8; myElementFormatUp.ligatureLevel=LigatureLevel.EXOTIC; myElementFormatUp.digitCase=DigitCase.LINING; var mySite:String="VadexFX.com"; var myTextBlock:TextBlock = new TextBlock(); var myTextElement:TextElement = new TextElement(mySite,myElementFormatUp); myTextBlock.content=myTextElement; var myFirstLine:TextLine = myTextBlock.createTextLine(null,500); myFirstLine.x=25; myFirstLine.y=35; myHolder.addChild(myFirstLine); myFontDescription = new FontDescription(); myFontDescription.fontName="Geneva";// hopefully you have it myFontDescription.fontWeight=FontWeight.BOLD; //we make it bold var myElementFormatDown:ElementFormat = new ElementFormat(myFontDescription); myElementFormatDown.fontSize=40; myElementFormatDown.kerning = Kerning.ON; myElementFormatDown.color=0x0000FF; myElementFormatDown.alpha=.3; myElementFormatDown.ligatureLevel=LigatureLevel.EXOTIC; myElementFormatDown.digitCase=DigitCase.LINING; myElementFormatDown.textRotation =TextRotation.ROTATE_180; myTextElement = new TextElement(mySite,myElementFormatDown); myTextBlock.content=myTextElement; var mySecondLine:TextLine = myTextBlock.createTextLine(null,500); mySecondLine.x=25; mySecondLine.y=45; myHolder.addChild(mySecondLine); myFontDescription = new FontDescription(); myFontDescription.fontName="Webdings";// hopefully you have it myFontDescription.fontWeight=FontWeight.BOLD; //we make it bold var myElementFormatSide:ElementFormat = new ElementFormat(myFontDescription); myElementFormatSide.fontSize=40; myElementFormatSide.kerning = Kerning.ON; myElementFormatSide.color=0x0000FF; myElementFormatSide.alpha=.8; myElementFormatSide.ligatureLevel=LigatureLevel.EXOTIC; myElementFormatSide.digitCase=DigitCase.LINING; myElementFormatSide.textRotation =TextRotation.ROTATE_90; myTextElement= new TextElement(mySite,myElementFormatSide); myTextBlock.content=myTextElement; var myThirdLine:TextLine = myTextBlock.createTextLine(null,500); myThirdLine.x=500; myThirdLine.y=45; myHolder.addChild(myThirdLine); myFontDescription = new FontDescription(); myFontDescription.fontName="Verdana";// hopefully you have it myFontDescription.fontWeight=FontWeight.BOLD; //we make it bold var myElementFormatLast:ElementFormat = new ElementFormat(myFontDescription); myElementFormatLast.fontSize=40; myElementFormatLast.kerning = Kerning.OFF; myElementFormatLast.color=0x0000FF; myElementFormatLast.alpha=.8; myElementFormatLast.typographicCase=TypographicCase.TITLE; myElementFormatLast.ligatureLevel=LigatureLevel.NONE; myElementFormatLast.textRotation =TextRotation.ROTATE_270; myTextElement= new TextElement(mySite,myElementFormatLast); myTextBlock.content=myTextElement; var myFourthLine:TextLine = myTextBlock.createTextLine(null,500); myFourthLine.x=300; myFourthLine.y=200; myHolder.addChild(myFourthLine); myContainer.addChild(myHolder); addChild(myContainer); } ]]> </Script> </mx:Application>

7 Responses to Flash Player Text Engine Examples For Flex 4 (Gumbo)
jim hayes
September 14th, 2008 at 3:01 pm
So where you are using rotate_90 for rotation, do you expect (or see?) all the letters to appear on top of each other?
That’s what I get, using player 10,0,0,525 in internet explorer on XP.
I’d put this down to pre-alpha code (or my own ignorance), but I’m not entirely sure now!
Sherif
September 14th, 2008 at 3:05 pm
The difference between rotate 90 and rotate 270 is where the letters are facing. Notice the 2 text’s that are on their side, one “C” faces upwards and one “C” faces downward. I tried getting the letters to stack on top of one another but had no luck.
jim hayes
September 14th, 2008 at 3:09 pm
Apologies, just updated player to 10,0,0,602 and it now appears as expected.
Thanks for example!
jim hayes
September 14th, 2008 at 3:13 pm
What I was seeing was them all directly stacked on top of each other in the z index (e.g. at the same x,y coords).
Now it works ok, I presume there’s a line direction property , but I’ve not been looking at the text for a few weeks now. I may fire up flex builder and have a play with the latest SDK…
localToGlobal » Blog Archive » news review -> 38th week of 2008
September 19th, 2008 at 9:20 am
[...] Flash Player Text Engine Examples For Flex 4 (Gumbo) | Flex & AIR [...]
Mr Windows
October 27th, 2008 at 7:58 am
Прикольно!
Rob McCardle
May 26th, 2009 at 2:38 pm
Hi Sherif, thanks for the useful article. I've written a little round up called "Flash Player 10 AS3 Text Layout Engine Dynamic Selectable Embedded TTF’s" clearing a few things up and linked to you…
http://www.robmccardle.com/wp/?p=59
Demo & source there – hope this is useful to someone,
Cheers,
Rob
http://www.robmccardle.com