Flex Development

Posts Tagged ‘alpha text without embedding’

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