I was looking to keep a particular file’s size at a bare minimum, yet I needed to be able to utilize alpha values on text and it was my understanding, before having read a couple of posts on some Actionscript forums, that in order to use alpha values on text, the font used for that text must be embedded in the swf.
The corresponding Actionscript forums dealt, of course, with Actionscript and not Flex. So, I wanted to see, first off, if the same method would work in Flex as in Actionscript. Second, I wanted to create a sample so that anyone could actually see it done and have the relevant mxml file to work with.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" viewSourceURL="srcview/index.html"> <mx:Style> TextArea { cornerRadius: 5; } Application { backgroundColor: #FFFFFF; } </mx:Style> <mx:Script> <![CDATA[ public function init():void { mainPanel.blendMode = BlendMode.LAYER; } ]]> </mx:Script> <mx:Panel id="mainPanel" x="10" y="10" width="363" height="310" layout="absolute" title="Text with alpha without embedding font"> <mx:Label x="10" y="10" text="This Label has an alpha value of .25" alpha=".25"/> <mx:Text x="15" y="67" text="This Text field has an alpha value of .5" width="195" height="66" alpha=".5"/> <mx:TextArea x="10" y="141" text="This Text Area has an alpha value of .75" alpha=".75"/> </mx:Panel> </mx:Application> |
Notice the line in the init() function “mainPanel.blendMode = BlendMode.LAYER;”. This line is what enables the alpha values on the whatever text components are added as children to that mainPanel without having to embed the font. That single line is all that is required.
Example: dm_alpha_test.swf
Flex Project: dm_alpha_text.zip
I prefer this solution than embedding fonts and adding 0, 0 blur filters to Flex components.
You can also adjust the blendMode property of the Application to apply this to all the text.
This post should be more visible in the web! I’ve found your site after tons of Googling for a solution!
To my understanding, the latest version of Flex resolves the issue of needing embedded fonts for these types of things. It’s one of the reasons I was waiting for the latest version to come out. But I’m not totally sure of this. Perhaps you might know better?
Unfortunately, I haven’t been working with Flex much lately and this site’s visibility will likely reflect the fact that it doesn’t have a lot content. I’m saving up for the Adobe Creative Master Suite, which includes the latest Flex (Flash Builder), so until then, I don’t think I’ll have much new up here to where the site will gain much visibility.