Flash Player Text Engine Examples For Flex 4 (Gumbo)

14 Sep
2008
Delicious

flexles Flash Player Text Engine Examples For Flex 4 (Gumbo)

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>
Incoming Search Terms :flash text engine , flex 4 text , flash text engine example , flex text engine , flash 10 text engine , flash text engine tutorial , flex 4 text engine , as3 text engine , flash player 10 text engine , flex 4 text effects

Share this story with a friend !
Join SherifAbdou's Rss Feed Stumble This Article! Add this to your Delicious Bookmarks! Digg this story ! Add this story to Reddit ! Tweet This Brush


7 Responses to Flash Player Text Engine Examples For Flex 4 (Gumbo)

Avatar

jim hayesNo Gravatar

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!

Avatar

SherifNo Gravatar

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.

Avatar

jim hayesNo Gravatar

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!

Avatar

jim hayesNo Gravatar

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…

Avatar

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 [...]

Avatar

Mr WindowsNo Gravatar

October 27th, 2008 at 7:58 am

Прикольно! :)

Avatar

Rob McCardleNo Gravatar

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

Comment Form