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