alpha

Posts Tagged ‘alpha’

Blend modes

December 4th, 2008 | Author: David

It wasn’t long into my Flex adventures that I’d discovered the blendMode property of UIComponents and became unspeakably delighted, as blend modes were a key feature lacking in the Juce SDK I’d previously worked with. To my dismay, it took a while before I became sufficiently accustomed with the Flex SDK that I could see the blend modes in action.

As it stands, I finally recently found a blog post on Flex blend modes by Andrew Trice, yet it’s still a bit more complicated an example than I would have felt comfortable with in my initial Flex endeavors. I think beginners might find this one a bit easier to chew on and regardless, there can never be too many examples when one is trying to learn something new.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="640" height="400"
	viewSourceURL="srcview/index.html">
 
	<mx:Image width="100%" height="100%" source="dm_blendmode.jpg"
		mouseFocusEnabled="false" mouseEnabled="false" mouseChildren="false"/>
 
	<mx:HSlider id="alphaSelection" minimum="0" maximum="1" x="298" y="246" liveDragging="true"/>
	<mx:ComboBox selectedIndex="10" id="blendModeSelection"
		change="gradient.blendMode=blendModeSelection.selectedLabel" x="298" y="272">
	      <mx:ArrayCollection>
	         <mx:String>add</mx:String>
	         <mx:String>alpha</mx:String>
	         <mx:String>darken</mx:String>
	         <mx:String>difference</mx:String>
	         <mx:String>erase</mx:String>
	         <mx:String>hardlight</mx:String>
	         <mx:String>invert</mx:String>
	         <mx:String>layer</mx:String>
	         <mx:String>lighten</mx:String>
	         <mx:String>multiply</mx:String>
	         <mx:String>normal</mx:String>
	         <mx:String>overlay</mx:String>
	         <mx:String>screen</mx:String>
	         <mx:String>subtract</mx:String>
	      </mx:ArrayCollection>
	</mx:ComboBox>
	<mx:TextArea width="276" height="107" x="182" y="131">
		<mx:text>There is white-black gradient layer above all of these lower graphic layers. The alpha and blendMode widgets below control the respective alpha and blendMode properties of that layer and adjusting them will illustrate the effects of the blendModes.</mx:text>
	</mx:TextArea>
	<mx:Label x="254" y="250" text="alpha"/>
	<mx:Label x="224" y="276" text="blendMode"/>
 
	<mx:Image width="100%" height="100%" source="dm_blendmode_gradient.jpg"
		alpha="{alphaSelection.value}" blendMode="multiply"
		mouseFocusEnabled="false" mouseEnabled="false" mouseChildren="false" id="gradient"/>
 
</mx:Application>

Example: dm_blendmode.swf
Flex Project: dm_blendmode.zip

Posted in Examples | Tags: alpha, blend modes, blendMode, level:beginner | No Comments »

Text with alpha without embedding fonts

October 15th, 2008 | Author: David

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.

<?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

Posted in Examples | Tags: alpha, alpha text without embedding, embed, font, level:beginner, text | No Comments »

Flex Development

Posts Tagged ‘alpha’

Blend modes

Text with alpha without embedding fonts