alpha & rotation issue for textArea with htmlText

September 28, 2009 at 10:01 AM | In Adobe, Flex / AS, Programming | 6 Comments
Tags: , , , , , , , , ,

I had been playing with this for one of a project requirement.

Description of scenario:

  • Embedded fonts ‘Times New Roman’ both, using default font manager (Batik) as well as AFE
  • The application consists of two text area components
  • For 1st textarea, I am setting text using ‘text’ property and setting font family, size and color using setStyle().
  • For second, I am providing text related information via ‘htmlText’ property.
  • Using a slider I should be able to change alpha value of both textArea components.

Behavioral problems:

  • When I change value using slider, the alpha effect is applied and visible for 1st textarea, but in case of second, alpha value gets applied but text has no visible impact of alpha.
  • When I rotate both textArea components using, 1st gets rotated, but not second. In case of both textareas, I am referring and using embedded font only. (font family ‘TNR’ in example)

I expect both textAreas behave identical.

As far as I know and received primary feedback from a famous flexer guy, my code is right. If I consider this, there is definitely a limitation / bug in flex SDK. Hence I suggested a new task in SDK.

Here is a code I had written to simulate the SDK limitation / bug:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
	<mx:Style>
		@font-face
		{
			src: url('/assets/fonts/times-new-roman.ttf');
			fontFamily: "TNR";
			font-weight:normal;
			font-style:normal;

			advancedAntiAliasing: true;
		}
	</mx:Style>
	<mx:Script>
		<![CDATA[
			import mx.events.SliderEvent;

			private function init():void
			{
				basicTxt.text = "This is a sample text!";
			}

			private function onChange(event:SliderEvent):void
			{
				basicTxt.alpha = event.value;
				htmlTxt.alpha = event.value;
			}

			private function doRotate(event:MouseEvent):void
			{
				basicTxt.rotation = 20;
				htmlTxt.rotation = 20;
			}
		]]>
	</mx:Script>
	<mx:VBox width="100%" height="100%">
		<mx:HBox width="70%" height="50%">
			<mx:TextArea id="basicTxt" width="80%" backgroundColor="blue" fontSize="36" height="100%" fontFamily="TNR"/>
			<mx:TextArea id="htmlTxt" width="80%" backgroundColor="blue" height="100%">
			<mx:htmlText>
					<![CDATA[<TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="TNR" SIZE="36" COLOR="#000000" LETTERSPACING="0" KERNING="0">This is a sample text!</FONT></P></TEXTFORMAT>]]>
				</mx:htmlText>
			</mx:TextArea>
		</mx:HBox>
		<mx:HSlider minimum="0" maximum="1" value="1" change="onChange(event)" />
		<mx:Button label="Rotate" click="doRotate(event)" />
	</mx:VBox>
</mx:Application>

I will appreciate if anyone can give some ideas / pointers to work around.

6 Comments »

RSS feed for comments on this post. TrackBack URI

  1. I have a similar issue to this with ‘addedEffect’ and a mx:sequence containing a pause and fade in effect. The scroll bar fades in correctly, however the text is completely unaffected.

    Comment by Michael — October 9, 2009 #

    Reply

  2. Hi Harit,

    I think I know how to work around that issue. The problem is that the second text is not using your font, instead is using the times new roman from your system.

    This is what is happening: Flex only accepts one type of font in each TextArea, this is, only accepts embed or system fonts. And when you use html text Flex doesn’t identify what type of font you want to use. To work around this, just add this line in your init function and it will start working:

    htmlTxt.setStyle(“fontFamily”, “TNR”);

    When you do this, the TextArea will assume the usage of embed fonts. It doesn’t need to be the same font you use in the html tags, it can be any font as long is a embed font.

    Check this example based on yours:

    @font-face
    {
    src: url(‘/assets/fonts/times-new-roman.ttf’);
    fontFamily: “TNR”;
    font-weight:normal;
    font-style:normal;

    advancedAntiAliasing: true;
    }
    @font-face
    {
    src: url(‘/assets/fonts/55HER___0.ttf’);
    fontFamily: “Helv”;
    font-weight:normal;
    font-style:normal;

    advancedAntiAliasing: true;
    }

    <![CDATA[This is a sample text!]]>

    This will show both texts as times new roman.

    P.S.: Download a font from a free site that you don’t have in your system and that is visually different from all others for these experiments, it will help you a lot

    Comment by Veiga — October 26, 2009 #

    Reply

    • Correct me if I’m wrong, but I think you can do that, the setStyle() will only set the default font when no font is defined, the fonts you define in the html tags will define the fonts to show as long as all fonts are embedded, so you can use multiple fonts families in one line.

      This is kind of new to me, I’m still trying to understand all the secrets of the flex fonts since my new function in my job is all about fonts in flex.

      Comment by Veiga — October 26, 2009 #

      Reply

  3. Oh, sorry, the example above is not complete, wordpress ate the tags…

    The example I was trying to write was:

    Embed another font:

    @font-face
    {
    src: url(‘/assets/fonts/55HER___0.ttf’);
    fontFamily: “Helv”;
    font-weight:normal;
    font-style:normal;

    advancedAntiAliasing: true;
    }

    And use this init():

    private function init():void
    {
    basicTxt.text = “This is a sample text!”;
    htmlTxt.setStyle(“fontFamily”, “Helv”);
    }

    And maintain the FONT FACE=”TNR” in the htmltext

    Comment by Veiga — October 26, 2009 #

    Reply

  4. Hi Harish,

    I faced a similar issue. After some googling, I found following link which explains this
    http://forums.adobe.com/message/2273428

    Comment by Mahesh Kokadwar — November 11, 2009 #

    Reply

    • @Mahesh, @Veiga
      Thanks a ton! Both of you are right!

      Comment by haritkothari — December 5, 2009 #

      Reply

Leave a comment

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <pre> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Blog at WordPress.com. | Theme: Pool by Borja Fernandez.
Entries and comments feeds.