<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Ian Serlin &#187; Adobe Flex</title>
	<atom:link href="http://ianserlin.com/index.php/category/adobe-flex/feed/" rel="self" type="application/rss+xml" />
	<link>http://ianserlin.com</link>
	<description>identifying pain points and creating chaos since 1984</description>
	<lastBuildDate>Fri, 08 Jan 2010 00:18:42 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>How to play YuMe video ads in Adobe Flex/AS3</title>
		<link>http://ianserlin.com/index.php/2009/12/30/how-to-play-yume-video-ads-in-adobe-flexas3/</link>
		<comments>http://ianserlin.com/index.php/2009/12/30/how-to-play-yume-video-ads-in-adobe-flexas3/#comments</comments>
		<pubDate>Thu, 31 Dec 2009 03:52:56 +0000</pubDate>
		<dc:creator>Ian Serlin</dc:creator>
				<category><![CDATA[Actionscript 3]]></category>
		<category><![CDATA[Adobe Flex]]></category>
		<category><![CDATA[problem solution]]></category>
		<category><![CDATA[goose hunt]]></category>
		<category><![CDATA[video advertising]]></category>
		<category><![CDATA[yume]]></category>

		<guid isPermaLink="false">http://ianserlin.com/?p=4</guid>
		<description><![CDATA[Problem
Compared to a lot of other Internet video advertising services, YuMe has a pretty low barrier to entry because they don&#8217;t limit who can join as a publisher based on your current visitor volume or anything like that: simply sign-up and get access to the SDK. On the other hand, the documentation you receive along [...]]]></description>
			<content:encoded><![CDATA[<h2>Problem</h2>
<p>Compared to a lot of other Internet video advertising services, <a title="YuMe Video Advertising Service" href="http://yume.com/">YuMe</a> has a pretty low barrier to entry because they don&#8217;t limit who can join as a publisher based on your current visitor volume or anything like that: simply sign-up and get access to the SDK. On the other hand, the documentation you receive along with the SDK is so convoluted that it turns what should be a 5 minute job into a goose hunt. What&#8217;s a goose hunt? Exactly, but once you understand what&#8217;s going on it&#8217;s pretty sweet.</p>
<h2>Solution</h2>
<p>I&#8217;ve created a simple Flex wrapper around the YuMe video player to get you up and running quickly. You&#8217;ll need to <a title="YuMe Publisher Sign-up" href="http://yume.com/publishers/form.php" target="_blank">signup with YuMe</a> to get access to the SDK and their required library swfs.</p>
<p>Feel free to add and improve upon the code or post your own wrapper and link to it in the comments!</p>
<h3>YuMeVideoAd.mxml</h3>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
</pre></td><td class="code"><pre class="mxml" style="font-family:monospace;"><span style="color: #000000;">&lt;?xml version=<span style="color: #ff0000;">&quot;1.0&quot;</span> encoding=<span style="color: #ff0000;">&quot;utf-8&quot;</span>?<span style="color: #7400FF;">&gt;</span></span>
<span style="color: #000000;"><span style="color: #7400FF;">&lt;mx:Canvas</span> xmlns:mx=<span style="color: #ff0000;">&quot;http://www.adobe.com/2006/mxml&quot;</span><span style="color: #7400FF;">&gt;</span></span>
&nbsp;
	<span style="color: #000000;"><span style="color: #7400FF;">&lt;mx:Metadata</span><span style="color: #7400FF;">&gt;</span></span>
		[Event(name=&quot;ad_completed&quot;, type=&quot;flash.events.Event&quot;)]
		[Event(name=&quot;ad_absent&quot;, type=&quot;flash.events.Event&quot;)]
		[Event(name=&quot;ad_error&quot;, type=&quot;flash.events.Event&quot;)]
	<span style="color: #000000;"><span style="color: #7400FF;">&lt;/mx:Metadata</span><span style="color: #7400FF;">&gt;</span></span>
	<span style="color: #339933;">&lt;mx:Script&gt;</span>
<span style="color: #339933;">		&lt;![CDATA[</span>
<span style="color: #339933;">			import mx.controls.SWFLoader;</span>
<span style="color: #339933;">			import mx.core.FlexMovieClip;</span>
&nbsp;
<span style="color: #339933;">			// Possible ad types</span>
<span style="color: #339933;">			public static const BEFORE_CONTENT:String 		= &quot;before_content&quot;;</span>
<span style="color: #339933;">			public static const DURING_CONTENT:String 		= &quot;during_content&quot;;</span>
<span style="color: #339933;">			public static const AFTER_CONTENT:String		= &quot;after_content&quot;;</span>
&nbsp;
<span style="color: #339933;">			/**</span>
<span style="color: #339933;">			 * URL to where you are hosting &quot;yume_player_4x3.swf&quot;</span>
<span style="color: #339933;">			 */</span>
<span style="color: #339933;">			public static var yume_player_swf_url:String 	= &quot;yume_player_4x3.swf&quot;;</span>
&nbsp;
<span style="color: #339933;">			/**</span>
<span style="color: #339933;">			 * URL to where you are hosting &quot;yume_ad_library.swf&quot;</span>
<span style="color: #339933;">			 */</span>
<span style="color: #339933;">			public static var yume_library_swf_url:String	= &quot;yume_ad_library.swf&quot;;</span>
&nbsp;
<span style="color: #339933;">			/**</span>
<span style="color: #339933;">			 * URL to where you are hosting any specific CSS associated with the YuMe ads you are displaying.</span>
<span style="color: #339933;">			 */</span>
<span style="color: #339933;">			public var yume_css_url:String 					= &quot;&quot;;</span>
&nbsp;
<span style="color: #339933;">			public var ad_width:Number 	= 480;</span>
<span style="color: #339933;">			public var ad_height:Number = 360;</span>
&nbsp;
<span style="color: #339933;">			/**</span>
<span style="color: #339933;">			 * The type of ad to play in this player the next time startAd() is called,</span>
<span style="color: #339933;">			 * valid values are: &quot;before_content&quot;, &quot;during_content&quot;, &quot;after_content&quot;</span>
<span style="color: #339933;">			 */</span>
<span style="color: #339933;">			public function set ad_type( value:String ):void {</span>
<span style="color: #339933;">				// set ad type</span>
<span style="color: #339933;">				yume_params.ad_type = value;</span>
<span style="color: #339933;">				regeneratePlaylistURL();</span>
<span style="color: #339933;">			}</span>
&nbsp;
<span style="color: #339933;">			/**</span>
<span style="color: #339933;">			 * Help YuMe target the video ad by passing tags related to the content this ad will be shown with.</span>
<span style="color: #339933;">			 */</span>
<span style="color: #339933;">			public function set tags( value:String ):void {</span>
<span style="color: #339933;">				_tags = value;</span>
<span style="color: #339933;">				regeneratePlaylistURL();</span>
<span style="color: #339933;">			}</span>
&nbsp;
<span style="color: #339933;">			/**</span>
<span style="color: #339933;">			 * Help YuMe target the video ad by passing the title of the content this ad will be shown with.</span>
<span style="color: #339933;">			 */</span>
<span style="color: #339933;">			public function set title( value:String ):void {</span>
<span style="color: #339933;">				_title = value;</span>
<span style="color: #339933;">				regeneratePlaylistURL();</span>
<span style="color: #339933;">			}</span>
&nbsp;
<span style="color: #339933;">			/**</span>
<span style="color: #339933;">			 * Help YuMe target the video ad by passing the duration of the content this ad will be shown with.</span>
<span style="color: #339933;">			 */</span>
<span style="color: #339933;">			public function set duration( value:Number ):void {</span>
<span style="color: #339933;">				_duration = value;</span>
<span style="color: #339933;">				regeneratePlaylistURL();</span>
<span style="color: #339933;">			}</span>
&nbsp;
<span style="color: #339933;">			/**</span>
<span style="color: #339933;">			 * Help YuMe advertisers target your company's content by giving them a way to identify you.</span>
<span style="color: #339933;">			 */</span>
<span style="color: #339933;">			public function set channel( value:String ):void {</span>
<span style="color: #339933;">				_channel = value;</span>
<span style="color: #339933;">				regeneratePlaylistURL();</span>
<span style="color: #339933;">			}</span>
&nbsp;
<span style="color: #339933;">			/**</span>
<span style="color: #339933;">			 * Any YuMe specific errors caught by the YuMe player.</span>
<span style="color: #339933;">			 * You should check this value if you catch an &quot;ad_error&quot; event.</span>
<span style="color: #339933;">			 */</span>
<span style="color: #339933;">			public function get errors():String {</span>
<span style="color: #339933;">				return _yume ? _yume.error_string : null;</span>
<span style="color: #339933;">			}</span>
&nbsp;
<span style="color: #339933;">			/**</span>
<span style="color: #339933;">			 * The object the YuMe interface will be loaded into and accessible through.</span>
<span style="color: #339933;">			 */</span>
<span style="color: #339933;">			private var _yume:Object;</span>
&nbsp;
<span style="color: #339933;">			/**</span>
<span style="color: #339933;">			 * The actual visual component the YuMe video will be loaded into.</span>
<span style="color: #339933;">			 */</span>
<span style="color: #339933;">			private var _yume_mc:MovieClip = new MovieClip();</span>
&nbsp;
<span style="color: #339933;">			/**</span>
<span style="color: #339933;">			 * True if the yume swfs have been successfully loaded and initialized, false otherwise.</span>
<span style="color: #339933;">			 */</span>
<span style="color: #339933;">			private var _yume_ready:Boolean = false;</span>
&nbsp;
<span style="color: #339933;">			/**</span>
<span style="color: #339933;">			 * True if there has been a request to play a YuMe ad. This allows the containing application</span>
<span style="color: #339933;">			 * to initialize and immediately request ad playback without having to worry about asynchronous</span>
<span style="color: #339933;">			 * load times and have the ad begin playing as soon as it's loaded. </span>
<span style="color: #339933;">			 */</span>
<span style="color: #339933;">			private var _start_requested:Boolean = false;</span>
&nbsp;
<span style="color: #339933;">			/**</span>
<span style="color: #339933;">			 * Your YuMe API key, given to you by YuMe when you're approved. Below is the test key.</span>
<span style="color: #339933;">			 */</span>
<span style="color: #339933;">			private var _yume_api_key:String = &quot;88ElOFHxAh&quot;;</span>
&nbsp;
<span style="color: #339933;">			/**</span>
<span style="color: #339933;">			 * Any tags associated with the current content being monetized.</span>
<span style="color: #339933;">			 */</span>
<span style="color: #339933;">			private var _tags:String = &quot;&quot;;</span>
&nbsp;
<span style="color: #339933;">			/**</span>
<span style="color: #339933;">			 * The title of the current content being monetized.</span>
<span style="color: #339933;">			 */</span>
<span style="color: #339933;">			private var _title:String = &quot;&quot;;</span>
&nbsp;
<span style="color: #339933;">			/**</span>
<span style="color: #339933;">			 * The duration of the current content being monetized.</span>
<span style="color: #339933;">			 */</span>
<span style="color: #339933;">			private var _duration:Number = 30;</span>
&nbsp;
<span style="color: #339933;">			/**</span>
<span style="color: #339933;">			 * The name of the YuMe channel you want to create for advertisers to target.</span>
<span style="color: #339933;">			 */</span>
<span style="color: #339933;">			private var _channel:String = &quot;your-company&quot;;</span>
&nbsp;
<span style="color: #339933;">			public var yume_params:Object = {</span>
<span style="color: #339933;">				parent_mc: 				_yume_mc,</span>
<span style="color: #339933;">				ad_type: 				BEFORE_CONTENT,</span>
<span style="color: #339933;">				yume_url:				yume_player_swf_url,</span>
<span style="color: #339933;">				yume_library_swf_url:	yume_library_swf_url,</span>
<span style="color: #339933;">				// this is the test playlist from the YuMe setup documentation</span>
<span style="color: #339933;">				playlist:				&quot;http://shadow01.yumenetworks.com/dynamic_preroll_playlist.fmil?domain=88ElOFHxAh&quot;,</span>
<span style="color: #339933;">				update_interval: 		1000,</span>
<span style="color: #339933;">				ad_volume:				100,</span>
<span style="color: #339933;">				normalscreen_x:			0,</span>
<span style="color: #339933;">				normalscreen_y:			0,</span>
<span style="color: #339933;">				normalscreen_width:		ad_width,</span>
<span style="color: #339933;">				normalscreen_height:	ad_height,</span>
<span style="color: #339933;">				fullscreen_x:			0,</span>
<span style="color: #339933;">				fullscreen_y:			0,</span>
<span style="color: #339933;">				fullscreen_width:		ad_width,</span>
<span style="color: #339933;">				fullscreen_height:		ad_height,</span>
<span style="color: #339933;">				yume_leader_slot:		true,</span>
<span style="color: #339933;">				css_url:				yume_css_url</span>
<span style="color: #339933;">			};</span>
&nbsp;
<span style="color: #339933;">			private function regeneratePlaylistURL():void {</span>
<span style="color: #339933;">				// set playlist url</span>
<span style="color: #339933;">				var playlist_type:String = &quot;&quot;;</span>
<span style="color: #339933;">				if( yume_params.ad_type == &quot;during_content&quot; ){</span>
<span style="color: #339933;">					playlist_type = &quot;dynamic_midroll_playlist.fmil&quot;;</span>
<span style="color: #339933;">				}else if( yume_params.ad_type == &quot;after_content&quot; ){</span>
<span style="color: #339933;">					playlist_type = &quot;dynamic_postroll_playlist.fmil&quot;;</span>
<span style="color: #339933;">				}else{</span>
<span style="color: #339933;">					playlist_type = &quot;dynamic_preroll_playlist.fmil&quot;;	</span>
<span style="color: #339933;">				}</span>
<span style="color: #339933;">				yume_params.playlist = &quot;http://shadow01.yumenetworks.com/&quot; + playlist_type </span>
<span style="color: #339933;">					+ &quot;?channel=&quot; + encodeURIComponent( _channel )</span>
<span style="color: #339933;">                                        + &quot;&amp;domain=&quot; + _yume_api_key </span>
<span style="color: #339933;">					+ &quot;&amp;title=&quot; + encodeURIComponent( _title ) </span>
<span style="color: #339933;">					+ &quot;&amp;tags=&quot; + encodeURIComponent( _tags ) </span>
<span style="color: #339933;">					+ &quot;&amp;duration=&quot; + _duration;	</span>
<span style="color: #339933;">			}</span>
&nbsp;
<span style="color: #339933;">			private function init():void {</span>
<span style="color: #339933;">				Security.allowDomain( &quot;*&quot; );</span>
<span style="color: #339933;">				Security.allowInsecureDomain( &quot;*&quot; );</span>
<span style="color: #339933;">				yume_holder.addChild( _yume_mc );</span>
<span style="color: #339933;">				var loader:SWFLoader = new SWFLoader();</span>
<span style="color: #339933;">				loader.addEventListener( Event.COMPLETE, handleLoaderComplete );</span>
<span style="color: #339933;">				loader.load( yume_library_swf_url );</span>
<span style="color: #339933;">			}</span>
&nbsp;
<span style="color: #339933;">			private function handleLoaderComplete( e:Event ):void {</span>
<span style="color: #339933;">				_yume 			= e.target.content.yume_ad;</span>
<span style="color: #339933;">				setupListeners( _yume as IEventDispatcher );</span>
<span style="color: #339933;">				_yume_ready = true;</span>
<span style="color: #339933;">				if( _start_requested ){</span>
<span style="color: #339933;">					startAd();</span>
<span style="color: #339933;">				}</span>
<span style="color: #339933;">			}</span>
&nbsp;
<span style="color: #339933;">			public function startAd():void {</span>
<span style="color: #339933;">				if( _yume_ready ){</span>
<span style="color: #339933;">					yume_params.normalscreen_width 	= this.width;</span>
<span style="color: #339933;">					yume_params.normalscreen_height 	= this.height;</span>
<span style="color: #339933;">					_yume.start_ad( yume_params );</span>
<span style="color: #339933;">					_start_requested = false;</span>
<span style="color: #339933;">				}else{</span>
<span style="color: #339933;">					_start_requested = true;</span>
<span style="color: #339933;">				}</span>
<span style="color: #339933;">			}</span>
&nbsp;
<span style="color: #339933;">			// ================= YUME AD LISTENER IMPLEMENTATION ==============</span>
<span style="color: #339933;">			private function setupListeners( target:IEventDispatcher ):void {</span>
<span style="color: #339933;">				target.addEventListener( &quot;ad_present&quot;, ad_present );</span>
<span style="color: #339933;">				target.addEventListener( &quot;ad_absent&quot;, ad_absent );</span>
<span style="color: #339933;">				target.addEventListener( &quot;ad_playing&quot;, ad_playing );</span>
<span style="color: #339933;">				target.addEventListener( &quot;ad_completed&quot;, ad_completed );</span>
<span style="color: #339933;">				target.addEventListener( &quot;ad_closed&quot;, ad_closed );</span>
<span style="color: #339933;">				target.addEventListener( &quot;image_closed&quot;, image_closed );</span>
<span style="color: #339933;">				target.addEventListener( &quot;ad_reopened&quot;, ad_reopened );</span>
<span style="color: #339933;">				target.addEventListener( &quot;ad_clicked2site&quot;, ad_clicked2site );</span>
<span style="color: #339933;">				target.addEventListener( &quot;ad_clicked2video&quot;, ad_clicked2video );</span>
<span style="color: #339933;">				target.addEventListener( &quot;pip_video_playing&quot;, pip_video_playing );</span>
<span style="color: #339933;">				target.addEventListener( &quot;pip_video_completed&quot;, pip_video_completed ); </span>
<span style="color: #339933;">				target.addEventListener( &quot;ad_error&quot;, ad_error );</span>
<span style="color: #339933;">			}</span>
&nbsp;
<span style="color: #339933;">			private function ad_absent( e:Event ):void {</span>
<span style="color: #339933;">				// bubble</span>
<span style="color: #339933;">				dispatchEvent( e );</span>
<span style="color: #339933;">			}</span>
&nbsp;
<span style="color: #339933;">			private function ad_error( e:Event ):void {</span>
<span style="color: #339933;">				// bubble</span>
<span style="color: #339933;">				dispatchEvent( e );</span>
<span style="color: #339933;">			}</span>
&nbsp;
<span style="color: #339933;">			private function ad_completed( e:Event ):void {</span>
<span style="color: #339933;">				// bubble</span>
<span style="color: #339933;">				dispatchEvent( e );</span>
<span style="color: #339933;">			}</span>
&nbsp;
<span style="color: #339933;">			private function ad_playing( e:Event ):void {</span>
<span style="color: #339933;">				trace( e );</span>
<span style="color: #339933;">				// displays the number of seconds left in the ad for the user if it can be determined</span>
<span style="color: #339933;">				if( _yume.get_duration() &gt; 0 ){</span>
<span style="color: #339933;">					var seconds_left:int = Math.round( _yume.get_duration() - _yume.get_time() );</span>
<span style="color: #339933;">					info.text = &quot;Sponsor: &quot; + ( seconds_left &gt;= 0 ? seconds_left : '' ) </span>
<span style="color: #339933;">						+ &quot; second&quot; + ( seconds_left != 1 ? 's' : '' ) + &quot; remaining&quot;;</span>
<span style="color: #339933;">				}</span>
<span style="color: #339933;">			}</span>
&nbsp;
<span style="color: #339933;">			private function ad_present( e:Event ):void {</span>
<span style="color: #339933;">				trace( e );</span>
<span style="color: #339933;">			}</span>
&nbsp;
<span style="color: #339933;">			private function image_closed( e:Event ):void {</span>
<span style="color: #339933;">				trace( e );</span>
<span style="color: #339933;">			}</span>
&nbsp;
<span style="color: #339933;">			private function ad_closed( e:Event ):void {</span>
<span style="color: #339933;">				trace( e );</span>
<span style="color: #339933;">			}</span>
&nbsp;
<span style="color: #339933;">			private function ad_reopened( e:Event ):void {</span>
<span style="color: #339933;">				trace( e );</span>
<span style="color: #339933;">			}</span>
&nbsp;
<span style="color: #339933;">			private function ad_clicked2site( e:Event ):void {</span>
<span style="color: #339933;">				trace( e );</span>
<span style="color: #339933;">			}</span>
&nbsp;
<span style="color: #339933;">			private function ad_clicked2video( e:Event ):void {</span>
<span style="color: #339933;">				trace( e );</span>
<span style="color: #339933;">			}</span>
&nbsp;
<span style="color: #339933;">			private function pip_video_playing( e:Event ):void {</span>
<span style="color: #339933;">				trace( e );</span>
<span style="color: #339933;">			}</span>
&nbsp;
<span style="color: #339933;">			private function pip_video_completed( e:Event ):void {</span>
<span style="color: #339933;">				trace( e );</span>
<span style="color: #339933;">			}		</span>
&nbsp;
<span style="color: #339933;">		]]&gt;</span>
<span style="color: #339933;">	&lt;/mx:Script&gt;</span>
&nbsp;
	<span style="color: #000000;"><span style="color: #808080; font-style: italic;">&lt;!-- just a holder for the video ad --&gt;</span></span>
	<span style="color: #000000;"><span style="color: #7400FF;">&lt;mx:UIComponent</span> id=<span style="color: #ff0000;">&quot;yume_holder&quot;</span> width=<span style="color: #ff0000;">&quot;100%&quot;</span> height=<span style="color: #ff0000;">&quot;100%&quot;</span> creationComplete=<span style="color: #ff0000;">&quot;init()&quot;</span><span style="color: #7400FF;">/&gt;</span></span>
&nbsp;
	<span style="color: #000000;"><span style="color: #808080; font-style: italic;">&lt;!-- displays the seconds countdown --&gt;</span></span>
	<span style="color: #000000;"><span style="color: #7400FF;">&lt;mx:HBox</span> backgroundColor=<span style="color: #ff0000;">&quot;#323232&quot;</span> backgroundAlpha=<span style="color: #ff0000;">&quot;0.5&quot;</span> width=<span style="color: #ff0000;">&quot;100%&quot;</span> top=<span style="color: #ff0000;">&quot;0&quot;</span> paddingLeft=<span style="color: #ff0000;">&quot;10&quot;</span><span style="color: #7400FF;">&gt;</span></span>
		<span style="color: #000000;"><span style="color: #7400FF;">&lt;mx:Label</span> id=<span style="color: #ff0000;">&quot;info&quot;</span> fontSize=<span style="color: #ff0000;">&quot;10&quot;</span> color=<span style="color: #ff0000;">&quot;#FFFFFF&quot;</span><span style="color: #7400FF;">/&gt;</span></span>
	<span style="color: #000000;"><span style="color: #7400FF;">&lt;/mx:HBox</span><span style="color: #7400FF;">&gt;</span></span>
&nbsp;
<span style="color: #000000;"><span style="color: #7400FF;">&lt;/mx:Canvas</span><span style="color: #7400FF;">&gt;</span></span></pre></td></tr></table></div>

<p><strong>Edit [2010/01/05]</strong><br />
If you are monetizing live streaming content and plan to play midrolls you can add a playlist_midroll property to the YuMe parameters to pre-fetch midrolls:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript3" style="font-family:monospace;">yume_params.playlist_midroll = <span style="color: #990000;">&quot;http://shadow01.yumenetworks.com/dynamic_midroll_playlist.fmil&quot;</span>
                                       <span style="color: #000000; font-weight: bold;">+</span> <span style="color: #990000;">&quot;?domain=&quot;</span> <span style="color: #000000; font-weight: bold;">+</span> _yume_api_key
                                       <span style="color: #000000; font-weight: bold;">+</span> <span style="color: #990000;">&quot;&amp;title=&quot;</span> <span style="color: #000000; font-weight: bold;">+</span> <span style="color: #004993;">encodeURIComponent</span><span style="color: #000000;">&#40;</span> _title <span style="color: #000000;">&#41;</span>
                                       <span style="color: #000000; font-weight: bold;">+</span> <span style="color: #990000;">&quot;&amp;tags=&quot;</span> <span style="color: #000000; font-weight: bold;">+</span> <span style="color: #004993;">encodeURIComponent</span><span style="color: #000000;">&#40;</span> _tags <span style="color: #000000;">&#41;</span>
                                       <span style="color: #000000; font-weight: bold;">+</span> <span style="color: #990000;">&quot;&amp;duration=&quot;</span> <span style="color: #000000; font-weight: bold;">+</span> _duration;</pre></div></div>

<p>Then when you&#8217;re ready to play a midroll set the ad_type to DURING_CONTENT and call startAd() again to immediately play the cached midroll advertisement.</p>
<h2>Gotchas</h2>
<p>I only need in-stream video playback and don&#8217;t support accompanying banners so I only bubble &#8220;ad_completed&#8221;, &#8220;ad_absent&#8221; and &#8220;ad_error&#8221; events, catching any other YuMe events you are interested in should be pretty self-explanatory.</p>
<p>Also, YuMe notes that there are some ad units that do not broadcast their duration.  An example of this might be a preroll that a user can interact with (pause, switch ad flv&#8217;s, etc).  Because of this, they recommend that instead of a countdown timer, customers display a message like &#8220;Your content will resume after this advertisement.&#8221;</p>
<p>If you are running the example via the Flash/Flex Builder IDE and YuMe happens to send you back a powerroll to display you might see a variety of Security Errors thrown, according to YuMe support this apparently doesn&#8217;t happen in production.</p>
<p><em>Special thanks to David Lea of YuMe support for his quick, clear responses.</em></p>
]]></content:encoded>
			<wfw:commentRss>http://ianserlin.com/index.php/2009/12/30/how-to-play-yume-video-ads-in-adobe-flexas3/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Loading and modifying dynamic bitmap data in ActionScript 3/Flex 3</title>
		<link>http://ianserlin.com/index.php/2009/12/30/loading-and-modifying-dynamic-bitmap-data-in-actionscript-3flex-3/</link>
		<comments>http://ianserlin.com/index.php/2009/12/30/loading-and-modifying-dynamic-bitmap-data-in-actionscript-3flex-3/#comments</comments>
		<pubDate>Thu, 31 Dec 2009 00:56:43 +0000</pubDate>
		<dc:creator>Ian Serlin</dc:creator>
				<category><![CDATA[Actionscript 3]]></category>
		<category><![CDATA[Adobe Flex]]></category>
		<category><![CDATA[problem solution]]></category>
		<category><![CDATA[bitmap]]></category>
		<category><![CDATA[image]]></category>
		<category><![CDATA[loader]]></category>
		<category><![CDATA[security error]]></category>

		<guid isPermaLink="false">http://ianserlin.com/?p=151</guid>
		<description><![CDATA[If you are loading images dynamically using a Flex 3 Image control and attempting to manipulate the actual bitmap data, say for instance to draw a reflection or auto-center an image, you might have encountered the following runtime exception: &#8220;SecurityError: Error #2123: Security sandbox violation: Loader.content: &#8230; No policy files granted access.&#8221;
This has to do [...]]]></description>
			<content:encoded><![CDATA[<p>If you are loading images dynamically using a Flex 3 Image control and attempting to manipulate the actual bitmap data, say for instance to draw a reflection or auto-center an image, you might have encountered the following runtime exception: &#8220;SecurityError: Error #2123: Security sandbox violation: Loader.content: &#8230; No policy files granted access.&#8221;</p>
<p>This has to do with Flash Player security settings, but thankfully there is a way around this silliness if you check into the docs, but you&#8217;ll have to access the Flex private APIs in order to do so.</p>
<h2>Problem</h2>
<p>You want to manipulate dynamically loaded bitmap data.</p>
<h2>Solution</h2>
<p>The following class, which is a drop-in replacement for the Flex 3 image class handles setting the appropriate permissions on the Image class&#8217;s internal Loader for you and also turns on smoothing by default just for convenience.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>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
</pre></td><td class="code"><pre class="actionscript3" style="font-family:monospace;"><span style="color: #9900cc; font-weight: bold;">package</span> components
<span style="color: #000000;">&#123;</span>
	<span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.display</span>.<span style="color: #004993;">Bitmap</span>;
	<span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.display</span>.<span style="color: #004993;">Loader</span>;
	<span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.events</span>.<span style="color: #004993;">Event</span>;
	<span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.system</span>.<span style="color: #004993;">LoaderContext</span>;
&nbsp;
	<span style="color: #0033ff; font-weight: bold;">import</span> mx.controls.Image;
	<span style="color: #0033ff; font-weight: bold;">import</span> mx.core.mx_internal;
&nbsp;
        use <span style="color: #004993;">namespace</span> mx_internal;
&nbsp;
	<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #9900cc; font-weight: bold;">class</span> PolicyCheckingImage extends Image
	<span style="color: #000000;">&#123;</span>
		<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> PolicyCheckingImage<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>
		<span style="color: #000000;">&#123;</span>
			<span style="color: #0033ff; font-weight: bold;">super</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>;
			<span style="color: #0033ff; font-weight: bold;">this</span>.loaderContext = <span style="color: #0033ff; font-weight: bold;">new</span> <span style="color: #004993;">LoaderContext</span><span style="color: #000000;">&#40;</span> <span style="color: #0033ff; font-weight: bold;">true</span> <span style="color: #000000;">&#41;</span>;
		<span style="color: #000000;">&#125;</span>
&nbsp;
	<span style="color: #3f5fbf;">/**
         * @private
         */</span>
        override mx_internal <span style="color: #339966; font-weight: bold;">function</span> contentLoaderInfo_completeEventHandler<span style="color: #000000;">&#40;</span>event<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Event</span><span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span> <span style="color: #000000;">&#123;</span>
            <span style="color: #6699cc; font-weight: bold;">var</span> smoothLoader<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Loader</span> = event.<span style="color: #004993;">target</span>.<span style="color: #004993;">loader</span> <span style="color: #0033ff; font-weight: bold;">as</span> <span style="color: #004993;">Loader</span>;
            <span style="color: #6699cc; font-weight: bold;">var</span> smoothImage<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Bitmap</span> = smoothLoader.<span style="color: #004993;">content</span> <span style="color: #0033ff; font-weight: bold;">as</span> <span style="color: #004993;">Bitmap</span>;
            smoothImage.<span style="color: #004993;">smoothing</span> = <span style="color: #0033ff; font-weight: bold;">true</span>;
&nbsp;
            <span style="color: #0033ff; font-weight: bold;">super</span>.contentLoaderInfo_completeEventHandler<span style="color: #000000;">&#40;</span>event<span style="color: #000000;">&#41;</span>;
        <span style="color: #000000;">&#125;</span>
&nbsp;
&nbsp;
	<span style="color: #000000;">&#125;</span>
<span style="color: #000000;">&#125;</span></pre></td></tr></table></div>

<p>There are obviously fancier things to do with loaded images, but I&#8217;m sure you can find a good reflection implementation elsewhere. My hope is that this saves you a few minutes of time.</p>
<p>If you have bad ass Image classes or the above doesn&#8217;t solve your problem in some instances write it up and let me know in the comments!</p>
]]></content:encoded>
			<wfw:commentRss>http://ianserlin.com/index.php/2009/12/30/loading-and-modifying-dynamic-bitmap-data-in-actionscript-3flex-3/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Adding Facebook / Twitter / MySpace / Digg / Reddit / Bitly share functionality to your ActionScript 3/Flex application</title>
		<link>http://ianserlin.com/index.php/2009/12/18/adding-facebook-twitter-myspace-digg-reddit-bitly-share-functionality-to-your-actionscript-3flex-application/</link>
		<comments>http://ianserlin.com/index.php/2009/12/18/adding-facebook-twitter-myspace-digg-reddit-bitly-share-functionality-to-your-actionscript-3flex-application/#comments</comments>
		<pubDate>Fri, 18 Dec 2009 10:23:11 +0000</pubDate>
		<dc:creator>Ian Serlin</dc:creator>
				<category><![CDATA[Actionscript 3]]></category>
		<category><![CDATA[Adobe Flex]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Social networking]]></category>
		<category><![CDATA[bitly]]></category>
		<category><![CDATA[digg]]></category>
		<category><![CDATA[facebook]]></category>
		<category><![CDATA[myspace]]></category>
		<category><![CDATA[reddit]]></category>
		<category><![CDATA[share]]></category>
		<category><![CDATA[twitter]]></category>

		<guid isPermaLink="false">http://ianserlin.com/?p=94</guid>
		<description><![CDATA[I&#8217;m not sure that I need to write anything about the importance of including social sharing tools in any project destined for more than a few people to use, but in case you think I do, here goes:  
If you make something that peoples reputations could benefit from being associated with and that thing [...]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;m not sure that I need to write anything about the importance of including social sharing tools in any project destined for more than a few people to use, but in case you think I do, here goes:  </p>
<p>If you make something that peoples reputations could benefit from being associated with and that thing is easy to share, people will share it&#8230; and more people will use it.
</p>
<h2>Problem</h2>
<p>There are many different social sharing APIs and you&#8217;d like to integrate some of these into your Flash/Flex project. Unfortunately, wrangling everything together isn&#8217;t as easy as it is in Javascript as long as tools like <a href="http://sharethis.com" target="_blank">ShareThis</a> and <a href="http://addthis.com" target="_blank">AddThis</a> continue to treat Flash apps as second class citizens.</p>
<h2>Solution</h2>
<p>The Share class let&#8217;s you initialize the title, description and custom tweet text associated with your content and then easily launch the share pages for Twitter, Facebook, MySpace, Digg and Reddit pre-populated with your specified text. As an added bonus, when you initialize the Share class it will contact <a href="http://bit.ly" target="_blank" title="Shorten, Share and track your links">bitly</a> to create a bitly url you can use for the current page your swf is embedded on.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
</pre></td><td class="code"><pre class="actionscript3" style="font-family:monospace;"><span style="color: #9900cc; font-weight: bold;">package</span> <span style="color: #000000;">&#123;</span>
&nbsp;
	<span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.errors</span>.<span style="color: #004993;">IllegalOperationError</span>;
	<span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.events</span>.<span style="color: #004993;">Event</span>;
	<span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.events</span>.<span style="color: #004993;">HTTPStatusEvent</span>;
	<span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.events</span>.<span style="color: #004993;">IOErrorEvent</span>;
	<span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.events</span>.<span style="color: #004993;">SecurityErrorEvent</span>;
	<span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.net</span>.<span style="color: #004993;">URLLoader</span>;
	<span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.net</span>.<span style="color: #004993;">URLRequest</span>;
	<span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.net</span>.<span style="color: #004993;">navigateToURL</span>;
	<span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.external</span>.<span style="color: #004993;">ExternalInterface</span>;
&nbsp;
	<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #9900cc; font-weight: bold;">class</span> Share <span style="color: #000000;">&#123;</span> 
&nbsp;
		<span style="color: #0033ff; font-weight: bold;">public</span> static const BITLY_USERNAME<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">String</span> 	= <span style="color: #990000;">&quot;&quot;</span>;
		<span style="color: #0033ff; font-weight: bold;">public</span> static const BITLY_API_KEY<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">String</span>	= <span style="color: #990000;">&quot;&quot;</span>;
&nbsp;
		<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #6699cc; font-weight: bold;">var</span> title<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">String</span> 		= <span style="color: #990000;">&quot;&quot;</span>;
		<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #6699cc; font-weight: bold;">var</span> <span style="color: #004993;">description</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">String</span> 	= <span style="color: #990000;">&quot;&quot;</span>;
		<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #6699cc; font-weight: bold;">var</span> tweet_text<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">String</span>	= <span style="color: #990000;">&quot;&quot;</span>;
&nbsp;
		<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #6699cc; font-weight: bold;">var</span> bitlyURL<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">String</span>;
&nbsp;
		<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #6699cc; font-weight: bold;">var</span> _window_location<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">String</span>;
&nbsp;
&nbsp;
		<span style="color: #3f5fbf;">/**
		 * The Singleton instance of the ShareManager to use when accessing properties and methods of the ShareManager.
		 */</span>		
		<span style="color: #0033ff; font-weight: bold;">public</span> static const instance<span style="color: #000000; font-weight: bold;">:</span>Share = <span style="color: #0033ff; font-weight: bold;">new</span> Share<span style="color: #000000;">&#40;</span> ShareSingletonLock <span style="color: #000000;">&#41;</span>;
&nbsp;
		<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> Share<span style="color: #000000;">&#40;</span> <span style="color: #004993;">lock</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Class</span> <span style="color: #000000;">&#41;</span><span style="color: #000000;">&#123;</span>
			<span style="color: #0033ff; font-weight: bold;">if</span><span style="color: #000000;">&#40;</span> <span style="color: #004993;">lock</span> <span style="color: #000000; font-weight: bold;">!</span>= ShareSingletonLock <span style="color: #000000;">&#41;</span><span style="color: #000000;">&#123;</span>
				<span style="color: #0033ff; font-weight: bold;">throw</span> <span style="color: #0033ff; font-weight: bold;">new</span> <span style="color: #004993;">IllegalOperationError</span><span style="color: #000000;">&#40;</span> <span style="color: #990000;">&quot;ShareManager is a Singleton, please use the static instance method instead.&quot;</span> <span style="color: #000000;">&#41;</span>;
			<span style="color: #000000;">&#125;</span><span style="color: #0033ff; font-weight: bold;">else</span><span style="color: #000000;">&#123;</span>
				_window_location = <span style="color: #004993;">ExternalInterface</span>.<span style="color: #004993;">call</span><span style="color: #000000;">&#40;</span> <span style="color: #990000;">&quot;function () { return window.location.href.toString().toLowerCase(); }&quot;</span> <span style="color: #000000;">&#41;</span>;
				<span style="color: #0033ff; font-weight: bold;">if</span><span style="color: #000000;">&#40;</span> _window_location <span style="color: #000000; font-weight: bold;">!</span>= <span style="color: #990000;">&quot;&quot;</span> <span style="color: #000000;">&#41;</span><span style="color: #000000;">&#123;</span>
					<span style="color: #0033ff; font-weight: bold;">try</span><span style="color: #000000;">&#123;</span>
						getBitlyURL<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>;
					<span style="color: #000000;">&#125;</span><span style="color: #0033ff; font-weight: bold;">catch</span><span style="color: #000000;">&#40;</span> e<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Error</span> <span style="color: #000000;">&#41;</span><span style="color: #000000;">&#123;</span>
						<span style="color: #004993;">trace</span><span style="color: #000000;">&#40;</span> <span style="color: #990000;">&quot;ShareManager::Constructor &gt; error getting bitly url: &quot;</span> <span style="color: #000000; font-weight: bold;">+</span> getBitlyURL<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#41;</span>;
					<span style="color: #000000;">&#125;</span>
				<span style="color: #000000;">&#125;</span>
			<span style="color: #000000;">&#125;</span>
		<span style="color: #000000;">&#125;</span>
&nbsp;
		<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> <span style="color: #004993;">init</span><span style="color: #000000;">&#40;</span> title<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">String</span>, <span style="color: #004993;">description</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">String</span>, tweet_text<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">String</span> <span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span> <span style="color: #000000;">&#123;</span>
			<span style="color: #0033ff; font-weight: bold;">this</span>.title			= title;
			<span style="color: #0033ff; font-weight: bold;">this</span>.<span style="color: #004993;">description</span>	= <span style="color: #004993;">description</span>;
			<span style="color: #0033ff; font-weight: bold;">this</span>.tweet_text		= tweet_text;
		<span style="color: #000000;">&#125;</span>
&nbsp;
		<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> getBitlyURL<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span> <span style="color: #000000;">&#123;</span>
			<span style="color: #6699cc; font-weight: bold;">var</span> bitly_api<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">String</span>	= <span style="color: #990000;">&quot;http://api.bit.ly/shorten?version=2.0.1&amp;longUrl=&quot;</span>;
			bitly_api 				<span style="color: #000000; font-weight: bold;">+</span>= <span style="color: #004993;">encodeURIComponent</span><span style="color: #000000;">&#40;</span> _window_location <span style="color: #000000;">&#41;</span>;
			bitly_api 				<span style="color: #000000; font-weight: bold;">+</span>= <span style="color: #990000;">&quot;&amp;login=&quot;</span> <span style="color: #000000; font-weight: bold;">+</span> BITLY_USERNAME;
			bitly_api 				<span style="color: #000000; font-weight: bold;">+</span>= <span style="color: #990000;">&quot;&amp;apiKey=&quot;</span> <span style="color: #000000; font-weight: bold;">+</span> BITLY_API_KEY;
&nbsp;
			<span style="color: #6699cc; font-weight: bold;">var</span> <span style="color: #004993;">loader</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">URLLoader</span> = <span style="color: #0033ff; font-weight: bold;">new</span> <span style="color: #004993;">URLLoader</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>;
			<span style="color: #004993;">loader</span>.<span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span> <span style="color: #004993;">Event</span>.<span style="color: #004993;">COMPLETE</span>, handleBitlyComplete <span style="color: #000000;">&#41;</span>;
			<span style="color: #004993;">loader</span>.<span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span> <span style="color: #004993;">HTTPStatusEvent</span>.<span style="color: #004993;">HTTP_STATUS</span>, handleBitlyStatus <span style="color: #000000;">&#41;</span>;
			<span style="color: #004993;">loader</span>.<span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span> <span style="color: #004993;">IOErrorEvent</span>.<span style="color: #004993;">IO_ERROR</span>, handleBitlyError <span style="color: #000000;">&#41;</span>;
			<span style="color: #004993;">loader</span>.<span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span> <span style="color: #004993;">SecurityErrorEvent</span>.<span style="color: #004993;">SECURITY_ERROR</span>, handleBitlyError <span style="color: #000000;">&#41;</span>;
			<span style="color: #004993;">loader</span>.<span style="color: #004993;">load</span><span style="color: #000000;">&#40;</span> <span style="color: #0033ff; font-weight: bold;">new</span> <span style="color: #004993;">URLRequest</span><span style="color: #000000;">&#40;</span> bitly_api <span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#41;</span>;
		<span style="color: #000000;">&#125;</span>
&nbsp;
		<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> handleBitlyComplete<span style="color: #000000;">&#40;</span> e<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Event</span> <span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span> <span style="color: #000000;">&#123;</span>
			<span style="color: #004993;">trace</span><span style="color: #000000;">&#40;</span> <span style="color: #990000;">'BITLY url load complete: '</span> <span style="color: #000000; font-weight: bold;">+</span> e <span style="color: #000000;">&#41;</span>;
			<span style="color: #6699cc; font-weight: bold;">var</span> <span style="color: #004993;">loader</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">URLLoader</span> = e.<span style="color: #004993;">target</span> <span style="color: #0033ff; font-weight: bold;">as</span> <span style="color: #004993;">URLLoader</span>;
			<span style="color: #0033ff; font-weight: bold;">try</span><span style="color: #000000;">&#123;</span>
				<span style="color: #6699cc; font-weight: bold;">var</span> response<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Object</span> = <span style="color: #004993;">ExternalInterface</span>.<span style="color: #004993;">call</span><span style="color: #000000;">&#40;</span><span style="color: #990000;">&quot;function(){return &quot;</span> <span style="color: #000000; font-weight: bold;">+</span> <span style="color: #000000;">&#40;</span> <span style="color: #004993;">loader</span>.<span style="color: #004993;">data</span> <span style="color: #0033ff; font-weight: bold;">as</span> <span style="color: #004993;">String</span> <span style="color: #000000;">&#41;</span> <span style="color: #000000; font-weight: bold;">+</span> <span style="color: #990000;">&quot;}&quot;</span><span style="color: #000000;">&#41;</span>;
				<span style="color: #0033ff; font-weight: bold;">if</span><span style="color: #000000;">&#40;</span> response.statusCode == <span style="color: #990000;">&quot;OK&quot;</span> <span style="color: #000000; font-weight: bold;">&amp;&amp;</span> response.results<span style="color: #000000;">&#91;</span> _window_location <span style="color: #000000;">&#93;</span> <span style="color: #000000; font-weight: bold;">!</span>= <span style="color: #0033ff; font-weight: bold;">null</span> <span style="color: #000000; font-weight: bold;">&amp;&amp;</span> response.results<span style="color: #000000;">&#91;</span> _window_location <span style="color: #000000;">&#93;</span>.errorCode == <span style="color: #0033ff; font-weight: bold;">null</span> <span style="color: #000000;">&#41;</span><span style="color: #000000;">&#123;</span>
					bitlyURL = response.results<span style="color: #000000;">&#91;</span> _window_location<span style="color: #000000;">&#93;</span>.shortUrl;
					<span style="color: #004993;">trace</span><span style="color: #000000;">&#40;</span> <span style="color: #990000;">'Set BITLY url to: '</span> <span style="color: #000000; font-weight: bold;">+</span> bitlyURL <span style="color: #000000;">&#41;</span>;
				<span style="color: #000000;">&#125;</span>
			<span style="color: #000000;">&#125;</span><span style="color: #0033ff; font-weight: bold;">catch</span><span style="color: #000000;">&#40;</span> e<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Error</span> <span style="color: #000000;">&#41;</span><span style="color: #000000;">&#123;</span>
				<span style="color: #004993;">trace</span><span style="color: #000000;">&#40;</span> <span style="color: #990000;">&quot;Error decoding BITLY response (&quot;</span> <span style="color: #000000; font-weight: bold;">+</span> <span style="color: #004993;">loader</span>.<span style="color: #004993;">data</span> <span style="color: #000000; font-weight: bold;">+</span> <span style="color: #990000;">&quot;): &quot;</span> <span style="color: #000000; font-weight: bold;">+</span> e <span style="color: #000000;">&#41;</span>;
			<span style="color: #000000;">&#125;</span>
		<span style="color: #000000;">&#125;</span>
&nbsp;
		<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> handleBitlyStatus<span style="color: #000000;">&#40;</span> e<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">HTTPStatusEvent</span> <span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span> <span style="color: #000000;">&#123;</span>
			<span style="color: #004993;">trace</span><span style="color: #000000;">&#40;</span> <span style="color: #990000;">'BITLY status: '</span> <span style="color: #000000; font-weight: bold;">+</span> e <span style="color: #000000;">&#41;</span>;	
		<span style="color: #000000;">&#125;</span>
&nbsp;
		<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> handleBitlyError<span style="color: #000000;">&#40;</span> e<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Event</span> <span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span> <span style="color: #000000;">&#123;</span>
			<span style="color: #004993;">trace</span><span style="color: #000000;">&#40;</span> <span style="color: #990000;">'Getting BITLY url failed with error: '</span> <span style="color: #000000; font-weight: bold;">+</span> e <span style="color: #000000;">&#41;</span>;
		<span style="color: #000000;">&#125;</span>
&nbsp;
		<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> <span style="color: #0033ff; font-weight: bold;">get</span> redditURL<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">String</span> <span style="color: #000000;">&#123;</span>
			<span style="color: #0033ff; font-weight: bold;">return</span> <span style="color: #990000;">'http://www.reddit.com/submit?url='</span> <span style="color: #000000; font-weight: bold;">+</span> <span style="color: #004993;">encodeURIComponent</span><span style="color: #000000;">&#40;</span> _window_location <span style="color: #000000;">&#41;</span> <span style="color: #000000; font-weight: bold;">+</span> <span style="color: #990000;">&quot;&amp;title=&quot;</span> <span style="color: #000000; font-weight: bold;">+</span> <span style="color: #004993;">encodeURIComponent</span><span style="color: #000000;">&#40;</span> title <span style="color: #000000;">&#41;</span>;
		<span style="color: #000000;">&#125;</span>
&nbsp;
		<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> openReddit<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span> <span style="color: #000000;">&#123;</span>
			<span style="color: #004993;">navigateToURL</span><span style="color: #000000;">&#40;</span> <span style="color: #0033ff; font-weight: bold;">new</span> <span style="color: #004993;">URLRequest</span><span style="color: #000000;">&#40;</span> redditURL <span style="color: #000000;">&#41;</span>, <span style="color: #990000;">'_blank'</span> <span style="color: #000000;">&#41;</span>;
		<span style="color: #000000;">&#125;</span>
&nbsp;
		<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> <span style="color: #0033ff; font-weight: bold;">get</span> diggURL<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">String</span> <span style="color: #000000;">&#123;</span>
			<span style="color: #6699cc; font-weight: bold;">var</span> <span style="color: #004993;">url</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">String</span> = <span style="color: #990000;">&quot;http://digg.com/submit?url=&quot;</span> <span style="color: #000000; font-weight: bold;">+</span> <span style="color: #004993;">encodeURIComponent</span><span style="color: #000000;">&#40;</span> _window_location <span style="color: #000000;">&#41;</span>;
			<span style="color: #004993;">url</span> <span style="color: #000000; font-weight: bold;">+</span>= <span style="color: #990000;">&quot;&amp;title=&quot;</span>    <span style="color: #000000; font-weight: bold;">+</span> <span style="color: #004993;">encodeURIComponent</span><span style="color: #000000;">&#40;</span> title <span style="color: #000000;">&#41;</span>;
			<span style="color: #004993;">url</span> <span style="color: #000000; font-weight: bold;">+</span>= <span style="color: #990000;">&quot;&amp;bodytext=&quot;</span> <span style="color: #000000; font-weight: bold;">+</span> <span style="color: #004993;">encodeURIComponent</span><span style="color: #000000;">&#40;</span> <span style="color: #004993;">description</span> <span style="color: #000000;">&#41;</span>;
			<span style="color: #004993;">url</span> <span style="color: #000000; font-weight: bold;">+</span>= <span style="color: #990000;">&quot;&amp;media=video&quot;</span>;
			<span style="color: #0033ff; font-weight: bold;">return</span> <span style="color: #004993;">url</span>;
		<span style="color: #000000;">&#125;</span>
&nbsp;
		<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> openDigg<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span> <span style="color: #000000;">&#123;</span>
			<span style="color: #004993;">navigateToURL</span><span style="color: #000000;">&#40;</span> <span style="color: #0033ff; font-weight: bold;">new</span> <span style="color: #004993;">URLRequest</span><span style="color: #000000;">&#40;</span> diggURL <span style="color: #000000;">&#41;</span>, <span style="color: #990000;">'_blank'</span> <span style="color: #000000;">&#41;</span>;
		<span style="color: #000000;">&#125;</span>
&nbsp;
		<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> <span style="color: #0033ff; font-weight: bold;">get</span> twitterURL<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">String</span> <span style="color: #000000;">&#123;</span>
			<span style="color: #6699cc; font-weight: bold;">var</span> url_for_tweet<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">String</span>  	= bitlyURL <span style="color: #000000; font-weight: bold;">?</span> bitlyURL <span style="color: #000000; font-weight: bold;">:</span> _window_location;
			<span style="color: #6699cc; font-weight: bold;">var</span> twitter_status<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">String</span> 	= <span style="color: #004993;">encodeURIComponent</span><span style="color: #000000;">&#40;</span> tweet_text <span style="color: #000000;">&#41;</span>;
			<span style="color: #0033ff; font-weight: bold;">return</span> <span style="color: #990000;">&quot;http://twitter.com/home/?status=&quot;</span> <span style="color: #000000; font-weight: bold;">+</span> twitter_status;
		<span style="color: #000000;">&#125;</span>
&nbsp;
		<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> openTwitter<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span> <span style="color: #000000;">&#123;</span>
			<span style="color: #004993;">navigateToURL</span><span style="color: #000000;">&#40;</span> <span style="color: #0033ff; font-weight: bold;">new</span> <span style="color: #004993;">URLRequest</span><span style="color: #000000;">&#40;</span> twitterURL <span style="color: #000000;">&#41;</span>, <span style="color: #990000;">'_blank'</span> <span style="color: #000000;">&#41;</span>;
		<span style="color: #000000;">&#125;</span>
&nbsp;
		<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> <span style="color: #0033ff; font-weight: bold;">get</span> mySpaceURL<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">String</span> <span style="color: #000000;">&#123;</span>
			<span style="color: #6699cc; font-weight: bold;">var</span> <span style="color: #004993;">url</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">String</span> = <span style="color: #990000;">&quot;http://www.myspace.com/index.cfm?fuseaction=postto&quot;</span>;
			<span style="color: #004993;">url</span> <span style="color: #000000; font-weight: bold;">+</span>= <span style="color: #990000;">&quot;&amp;t=&quot;</span> <span style="color: #000000; font-weight: bold;">+</span> <span style="color: #004993;">encodeURIComponent</span><span style="color: #000000;">&#40;</span> title <span style="color: #000000;">&#41;</span>;
			<span style="color: #004993;">url</span> <span style="color: #000000; font-weight: bold;">+</span>= <span style="color: #990000;">&quot;&amp;c=&quot;</span> <span style="color: #000000; font-weight: bold;">+</span> <span style="color: #004993;">encodeURIComponent</span><span style="color: #000000;">&#40;</span> <span style="color: #004993;">description</span> <span style="color: #000000;">&#41;</span>;
			<span style="color: #004993;">url</span> <span style="color: #000000; font-weight: bold;">+</span>= <span style="color: #990000;">&quot;&amp;u=&quot;</span> <span style="color: #000000; font-weight: bold;">+</span> <span style="color: #004993;">encodeURIComponent</span><span style="color: #000000;">&#40;</span> _window_location <span style="color: #000000;">&#41;</span>;
			<span style="color: #004993;">url</span> <span style="color: #000000; font-weight: bold;">+</span>= <span style="color: #990000;">&quot;&amp;r=close&quot;</span>;
			<span style="color: #0033ff; font-weight: bold;">return</span> <span style="color: #004993;">url</span>;
		<span style="color: #000000;">&#125;</span>
&nbsp;
		<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> openMySpace<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span> <span style="color: #000000;">&#123;</span>
			<span style="color: #004993;">navigateToURL</span><span style="color: #000000;">&#40;</span> <span style="color: #0033ff; font-weight: bold;">new</span> <span style="color: #004993;">URLRequest</span><span style="color: #000000;">&#40;</span> mySpaceURL <span style="color: #000000;">&#41;</span>, <span style="color: #990000;">'_blank'</span> <span style="color: #000000;">&#41;</span>;
		<span style="color: #000000;">&#125;</span>
&nbsp;
		<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> <span style="color: #0033ff; font-weight: bold;">get</span> facebookURL<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">String</span> <span style="color: #000000;">&#123;</span>
			<span style="color: #6699cc; font-weight: bold;">var</span> <span style="color: #004993;">url</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">String</span> = <span style="color: #990000;">&quot;http://www.facebook.com/share.php?src=bm&amp;v=4&amp;i=1254383639&quot;</span>;
			<span style="color: #004993;">url</span> <span style="color: #000000; font-weight: bold;">+</span>= <span style="color: #990000;">&quot;&amp;u=&quot;</span> <span style="color: #000000; font-weight: bold;">+</span> <span style="color: #004993;">encodeURIComponent</span><span style="color: #000000;">&#40;</span> _window_location <span style="color: #000000;">&#41;</span>;
			<span style="color: #004993;">url</span> <span style="color: #000000; font-weight: bold;">+</span>= <span style="color: #990000;">&quot;&amp;t=&quot;</span> <span style="color: #000000; font-weight: bold;">+</span> <span style="color: #004993;">encodeURIComponent</span><span style="color: #000000;">&#40;</span> title <span style="color: #000000;">&#41;</span>;
			<span style="color: #0033ff; font-weight: bold;">return</span> <span style="color: #004993;">url</span>;
		<span style="color: #000000;">&#125;</span>
&nbsp;
		<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> openFacebook<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span> <span style="color: #000000;">&#123;</span>
			<span style="color: #004993;">navigateToURL</span><span style="color: #000000;">&#40;</span> <span style="color: #0033ff; font-weight: bold;">new</span> <span style="color: #004993;">URLRequest</span><span style="color: #000000;">&#40;</span> facebookURL <span style="color: #000000;">&#41;</span>, <span style="color: #990000;">'_blank'</span> <span style="color: #000000;">&#41;</span>;
		<span style="color: #000000;">&#125;</span>
&nbsp;
	<span style="color: #000000;">&#125;</span>
<span style="color: #000000;">&#125;</span>
&nbsp;
<span style="color: #9900cc; font-weight: bold;">class</span> ShareSingletonLock <span style="color: #000000;">&#123;</span><span style="color: #000000;">&#125;</span></pre></td></tr></table></div>

<p>If you&#8217;ve created your own sharing API or you improve the above write it up and let me know in the comments!</p>
]]></content:encoded>
			<wfw:commentRss>http://ianserlin.com/index.php/2009/12/18/adding-facebook-twitter-myspace-digg-reddit-bitly-share-functionality-to-your-actionscript-3flex-application/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Disabling rollout behavior of a selected item in a Flex 4 List</title>
		<link>http://ianserlin.com/index.php/2009/12/15/disabling-rollout-behavior-of-a-selected-item-in-a-flex-4-list/</link>
		<comments>http://ianserlin.com/index.php/2009/12/15/disabling-rollout-behavior-of-a-selected-item-in-a-flex-4-list/#comments</comments>
		<pubDate>Tue, 15 Dec 2009 10:24:28 +0000</pubDate>
		<dc:creator>Ian Serlin</dc:creator>
				<category><![CDATA[Actionscript 3]]></category>
		<category><![CDATA[Adobe Flex]]></category>
		<category><![CDATA[problem solution]]></category>
		<category><![CDATA[flex4]]></category>
		<category><![CDATA[list]]></category>

		<guid isPermaLink="false">http://ianserlin.com/?p=31</guid>
		<description><![CDATA[Problem
You want a selected item in a Flex 4 List control to keep its highlighting even when a mouse rollout event occurs. By default Flex 4 Lists will execute the rollout behavior even on a selected item which can have unexpected consequences such as deselecting an item.
Solution
There&#8217;s no built-in option at the time of this [...]]]></description>
			<content:encoded><![CDATA[<h2>Problem</h2>
<p>You want a selected item in a Flex 4 List control to keep its highlighting even when a mouse rollout event occurs. By default Flex 4 Lists will execute the rollout behavior even on a selected item which can have unexpected consequences such as deselecting an item.</p>
<h2>Solution</h2>
<p>There&#8217;s no built-in option at the time of this writing to disable this behavior, so here is an extended Flex 4 item renderer to block this default behavior if the current item renderer catching the rollout event is in its &#8217;selected&#8217; state.</p>
<h3>NonDeselectingItemRenderer.as</h3>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
</pre></td><td class="code"><pre class="actionscript3" style="font-family:monospace;"><span style="color: #9900cc; font-weight: bold;">package</span> components.supportClasses <span style="color: #000000;">&#123;</span>
&nbsp;
	<span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.events</span>.<span style="color: #004993;">MouseEvent</span>;
&nbsp;
	<span style="color: #0033ff; font-weight: bold;">import</span> spark.components.supportClasses.ItemRenderer;
&nbsp;
	<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #9900cc; font-weight: bold;">class</span> NonDeselectingItemRenderer extends ItemRenderer <span style="color: #000000;">&#123;</span>
		<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> NonDeselectingItemRenderer<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>
		<span style="color: #000000;">&#123;</span>
			<span style="color: #0033ff; font-weight: bold;">super</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>;
		<span style="color: #000000;">&#125;</span>
&nbsp;
		override <span style="color: #0033ff; font-weight: bold;">protected</span> <span style="color: #339966; font-weight: bold;">function</span> itemRenderer_rollOutHandler<span style="color: #000000;">&#40;</span>event<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">MouseEvent</span><span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span> <span style="color: #000000;">&#123;</span>
			<span style="color: #0033ff; font-weight: bold;">if</span><span style="color: #000000;">&#40;</span> <span style="color: #0033ff; font-weight: bold;">super</span>.currentState <span style="color: #000000; font-weight: bold;">!</span>= <span style="color: #990000;">&quot;selected&quot;</span> <span style="color: #000000;">&#41;</span><span style="color: #000000;">&#123;</span>
				<span style="color: #0033ff; font-weight: bold;">super</span>.itemRenderer_rollOutHandler<span style="color: #000000;">&#40;</span> event <span style="color: #000000;">&#41;</span>;
			<span style="color: #000000;">&#125;</span>
		<span style="color: #000000;">&#125;</span>
	<span style="color: #000000;">&#125;</span>
<span style="color: #000000;">&#125;</span></pre></td></tr></table></div>

]]></content:encoded>
			<wfw:commentRss>http://ianserlin.com/index.php/2009/12/15/disabling-rollout-behavior-of-a-selected-item-in-a-flex-4-list/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Disabling keyboard shortcuts in Flex 4 Lists</title>
		<link>http://ianserlin.com/index.php/2009/11/29/disabling-keyboard-shortcuts-in-flex-4-lists/</link>
		<comments>http://ianserlin.com/index.php/2009/11/29/disabling-keyboard-shortcuts-in-flex-4-lists/#comments</comments>
		<pubDate>Sun, 29 Nov 2009 08:25:51 +0000</pubDate>
		<dc:creator>Ian Serlin</dc:creator>
				<category><![CDATA[Actionscript 3]]></category>
		<category><![CDATA[Adobe Flex]]></category>
		<category><![CDATA[problem solution]]></category>
		<category><![CDATA[flex4]]></category>
		<category><![CDATA[keyboard]]></category>
		<category><![CDATA[lists]]></category>

		<guid isPermaLink="false">http://ianserlin.com/?p=23</guid>
		<description><![CDATA[Problem
Flex 4 Lists pack a lot of awesome, especially compared to Flex 3 Lists. One of the new (AFAIK) built-in features are keyboard shortcuts for navigating through items in the list including enabling the ability to easily live search through items in the list&#8217;s dataProvider. For the Event Planner of vokle.com I needed to show [...]]]></description>
			<content:encoded><![CDATA[<h2>Problem</h2>
<p>Flex 4 Lists pack a lot of awesome, especially compared to Flex 3 Lists. One of the new (AFAIK) built-in features are keyboard shortcuts for navigating through items in the list including enabling the ability to easily live search through items in the list&#8217;s dataProvider. For the <a title="Create live online events" href="http://vokle.com/planner" target="_blank">Event Planner</a> of vokle.com I needed to show in-place forms for editing the events represented by the list including updating titles, descriptions, etc. In this instance the Flex 4 keyboard listeners were wreaking havoc on the user&#8217;s ability to simply type in the form.</p>
<h2>Solution</h2>
<p>At the time of this writing there is not a built-in option to disable the keyboard navigation in Flex 4 Lists, so here is a custom class that gives you that ability.</p>
<h3>KeyShortcutsToggleList.as</h3>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
</pre></td><td class="code"><pre class="actionscript3" style="font-family:monospace;"><span style="color: #9900cc; font-weight: bold;">package</span> <span style="color: #000000;">&#123;</span>
&nbsp;
	<span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.events</span>.<span style="color: #004993;">KeyboardEvent</span>;
&nbsp;
	<span style="color: #0033ff; font-weight: bold;">import</span> spark.components.List;
&nbsp;
	<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #9900cc; font-weight: bold;">class</span> KeyShortcutsToggleList extends List <span style="color: #000000;">&#123;</span>
&nbsp;
		<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #6699cc; font-weight: bold;">var</span> allowKeyboardNavigation<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Boolean</span> = <span style="color: #0033ff; font-weight: bold;">false</span>;
&nbsp;
		override <span style="color: #0033ff; font-weight: bold;">protected</span> <span style="color: #339966; font-weight: bold;">function</span> keyDownHandler<span style="color: #000000;">&#40;</span>event<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">KeyboardEvent</span><span style="color: #000000;">&#41;</span> <span style="color: #000000; font-weight: bold;">:</span> <span style="color: #0033ff; font-weight: bold;">void</span> <span style="color: #000000;">&#123;</span>
			<span style="color: #0033ff; font-weight: bold;">if</span><span style="color: #000000;">&#40;</span> allowKeyboardNavigation <span style="color: #000000;">&#41;</span><span style="color: #000000;">&#123;</span>
				<span style="color: #0033ff; font-weight: bold;">super</span>.keyDownHandler<span style="color: #000000;">&#40;</span> event <span style="color: #000000;">&#41;</span>;
			<span style="color: #000000;">&#125;</span>
		<span style="color: #000000;">&#125;</span>
&nbsp;
		override <span style="color: #0033ff; font-weight: bold;">protected</span> <span style="color: #339966; font-weight: bold;">function</span> keyUpHandler<span style="color: #000000;">&#40;</span>event<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">KeyboardEvent</span><span style="color: #000000;">&#41;</span> <span style="color: #000000; font-weight: bold;">:</span> <span style="color: #0033ff; font-weight: bold;">void</span> <span style="color: #000000;">&#123;</span>
			<span style="color: #0033ff; font-weight: bold;">if</span><span style="color: #000000;">&#40;</span> allowKeyboardNavigation <span style="color: #000000;">&#41;</span><span style="color: #000000;">&#123;</span>
				<span style="color: #0033ff; font-weight: bold;">super</span>.keyUpHandler<span style="color: #000000;">&#40;</span> event <span style="color: #000000;">&#41;</span>;
			<span style="color: #000000;">&#125;</span>
		<span style="color: #000000;">&#125;</span>
	<span style="color: #000000;">&#125;</span>
<span style="color: #000000;">&#125;</span></pre></td></tr></table></div>

<p>If you come up with any other cool Flex 4 List hacks or a better way to solve this problem write a post and link to it in the comments!</p>
]]></content:encoded>
			<wfw:commentRss>http://ianserlin.com/index.php/2009/11/29/disabling-keyboard-shortcuts-in-flex-4-lists/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Displaying the remaining characters available for a Flex 4 TextInput or TextArea</title>
		<link>http://ianserlin.com/index.php/2009/11/27/displaying-the-remaining-characters-available-for-a-flex-4-textinput-or-textarea/</link>
		<comments>http://ianserlin.com/index.php/2009/11/27/displaying-the-remaining-characters-available-for-a-flex-4-textinput-or-textarea/#comments</comments>
		<pubDate>Fri, 27 Nov 2009 09:23:25 +0000</pubDate>
		<dc:creator>Ian Serlin</dc:creator>
				<category><![CDATA[Adobe Flex]]></category>
		<category><![CDATA[problem solution]]></category>
		<category><![CDATA[flex4]]></category>
		<category><![CDATA[label]]></category>
		<category><![CDATA[textarea]]></category>
		<category><![CDATA[textinput]]></category>

		<guid isPermaLink="false">http://ianserlin.com/?p=35</guid>
		<description><![CDATA[Problem
There are many instances where I need to allow a user to enter free-form text but the amount of text they can enter is limited to a certain number of characters, obviously it is good user experience design to provide feedback to the user on how many characters they have left available to enter so [...]]]></description>
			<content:encoded><![CDATA[<h2>Problem</h2>
<p>There are many instances where I need to allow a user to enter free-form text but the amount of text they can enter is limited to a certain number of characters, obviously it is good user experience design to provide feedback to the user on how many characters they have left available to enter so they can plan accordingly. Twitter anyone?</p>
<h2>Solution</h2>
<p>The following component takes any target derived from SkinnableTextBase and attaches an event listener to the KeyboardEvent.KEY_UP event. It calculates the available characters left by inspecting the maxChars property of the target input you register with it. To cancel watching of a target so the component can be garbage collected properly call dispose(), to reset the display call reset(). Easy peasy but nice to have one component to do this for you and in Flex 4 you can target the styling of the character count down display using regular CSS selectors.</p>
<h3>CharacterCountDown.mxml</h3>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
</pre></td><td class="code"><pre class="mxml" style="font-family:monospace;"><span style="color: #000000;">&lt;?xml version=<span style="color: #ff0000;">&quot;1.0&quot;</span> encoding=<span style="color: #ff0000;">&quot;utf-8&quot;</span>?<span style="color: #7400FF;">&gt;</span></span>
<span style="color: #000000;"><span style="color: #7400FF;">&lt;s:Label</span> xmlns:fx=<span style="color: #ff0000;">&quot;http://ns.adobe.com/mxml/2009&quot;</span> </span>
<span style="color: #000000;">		 xmlns:s=<span style="color: #ff0000;">&quot;library://ns.adobe.com/flex/spark&quot;</span> </span>
<span style="color: #000000;">		 xmlns:mx=<span style="color: #ff0000;">&quot;library://ns.adobe.com/flex/halo&quot;</span></span>
<span style="color: #000000;">		 fontSize=<span style="color: #ff0000;">&quot;14&quot;</span></span>
<span style="color: #000000;">		 fontWeight=<span style="color: #ff0000;">&quot;bold&quot;</span></span>
<span style="color: #000000;">		 right=<span style="color: #ff0000;">&quot;0&quot;</span> bottom=<span style="color: #ff0000;">&quot;0&quot;</span></span>
<span style="color: #000000;">		 addedToStage=<span style="color: #ff0000;">&quot;reset()&quot;</span><span style="color: #7400FF;">&gt;</span></span>
&nbsp;
	<span style="color: #000000;"><span style="color: #7400FF;">&lt;fx:Script</span><span style="color: #7400FF;">&gt;</span></span>
		<span style="color: #000000;">&lt;!<span style="color: #66cc66;">&#91;</span>CDATA<span style="color: #66cc66;">&#91;</span></span>
<span style="color: #000000;">			import spark.components.supportClasses.SkinnableTextBase;</span>
&nbsp;
<span style="color: #000000;">			/**</span>
<span style="color: #000000;">			 * If true, the CharacterCountDown will look something like <span style="color: #ff0000;">&quot;123&quot;</span>.</span>
<span style="color: #000000;">			 * If false, the CharacterCountDown will look something like <span style="color: #ff0000;">&quot;123 characters left&quot;</span>.</span>
<span style="color: #000000;">			 * </span>
<span style="color: #000000;">			 * @default true</span>
<span style="color: #000000;">			 */</span>
<span style="color: #000000;">			public var onlyNumbers:Boolean = true;</span>
&nbsp;
<span style="color: #000000;">			<span style="color: #66cc66;">&#91;</span>Bindable<span style="color: #66cc66;">&#93;</span> private var _target:SkinnableTextBase;</span>
&nbsp;
<span style="color: #000000;">			/**</span>
<span style="color: #000000;">			 * Set the component that this CharacterCountDown instance will watch.</span>
<span style="color: #000000;">			 */</span>
<span style="color: #000000;">			public function set target<span style="color: #66cc66;">&#40;</span> value:SkinnableTextBase <span style="color: #66cc66;">&#41;</span>:void <span style="color: #66cc66;">&#123;</span></span>
<span style="color: #000000;">				_target = value;</span>
<span style="color: #000000;">				if<span style="color: #66cc66;">&#40;</span> _target != null <span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span></span>
<span style="color: #000000;">					_target.addEventListener<span style="color: #66cc66;">&#40;</span> KeyboardEvent.KEY_UP, handleKeyUp <span style="color: #66cc66;">&#41;</span>;</span>
<span style="color: #000000;">				<span style="color: #66cc66;">&#125;</span></span>
<span style="color: #000000;">			<span style="color: #66cc66;">&#125;</span></span>
&nbsp;
<span style="color: #000000;">			public function get target<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:SkinnableTextBase <span style="color: #66cc66;">&#123;</span></span>
<span style="color: #000000;">				return _target;</span>
<span style="color: #000000;">			<span style="color: #66cc66;">&#125;</span></span>
&nbsp;
<span style="color: #000000;">			public function reset<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:void <span style="color: #66cc66;">&#123;</span></span>
<span style="color: #000000;">				this.text = <span style="color: #ff0000;">&quot;&quot;</span>;</span>
<span style="color: #000000;">			<span style="color: #66cc66;">&#125;</span></span>
&nbsp;
<span style="color: #000000;">			private function handleKeyUp<span style="color: #66cc66;">&#40;</span> e:KeyboardEvent <span style="color: #66cc66;">&#41;</span>:void <span style="color: #66cc66;">&#123;</span></span>
<span style="color: #000000;">				var characters_left:int = <span style="color: #66cc66;">&#40;</span>target.maxChars - target.text.length<span style="color: #66cc66;">&#41;</span>;</span>
<span style="color: #000000;">				this.text = String<span style="color: #66cc66;">&#40;</span> characters_left <span style="color: #66cc66;">&#41;</span>;</span>
<span style="color: #000000;">				if<span style="color: #66cc66;">&#40;</span> !onlyNumbers <span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span></span>
<span style="color: #000000;">					this.text += <span style="color: #ff0000;">&quot; character&quot;</span> + <span style="color: #66cc66;">&#40;</span> characters_left != <span style="color: #cc66cc;">1</span> ? <span style="color: #ff0000;">'s'</span> : <span style="color: #ff0000;">''</span> <span style="color: #66cc66;">&#41;</span> + <span style="color: #ff0000;">&quot; left&quot;</span>; </span>
<span style="color: #000000;">				<span style="color: #66cc66;">&#125;</span></span>
<span style="color: #000000;">			<span style="color: #66cc66;">&#125;</span></span>
&nbsp;
<span style="color: #000000;">			/**</span>
<span style="color: #000000;">			 * Causes the CharacterCountDown to stop watching any previously assigned target. </span>
<span style="color: #000000;">			 */</span>
<span style="color: #000000;">			public function dispose<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:void <span style="color: #66cc66;">&#123;</span></span>
<span style="color: #000000;">				if<span style="color: #66cc66;">&#40;</span> _target != null <span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span></span>
<span style="color: #000000;">					_target.removeEventListener<span style="color: #66cc66;">&#40;</span> KeyboardEvent.KEY_UP, handleKeyUp <span style="color: #66cc66;">&#41;</span>;</span>
<span style="color: #000000;">					_target = null;</span>
<span style="color: #000000;">				<span style="color: #66cc66;">&#125;</span></span>
<span style="color: #000000;">			<span style="color: #66cc66;">&#125;</span></span>
&nbsp;
<span style="color: #000000;">		<span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#93;</span><span style="color: #7400FF;">&gt;</span></span>
	<span style="color: #000000;"><span style="color: #7400FF;">&lt;/fx:Script</span><span style="color: #7400FF;">&gt;</span></span>
<span style="color: #000000;"><span style="color: #7400FF;">&lt;/s:Label</span><span style="color: #7400FF;">&gt;</span></span></pre></td></tr></table></div>

<p>If you have a better way to solve this problem or you want to improve the CharacterCountDown component write it up and let me know by linking to it in the comments.</p>
]]></content:encoded>
			<wfw:commentRss>http://ianserlin.com/index.php/2009/11/27/displaying-the-remaining-characters-available-for-a-flex-4-textinput-or-textarea/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>ActionScript 3 Custom Event Base Class</title>
		<link>http://ianserlin.com/index.php/2009/11/02/actionscript-3-custom-event-base-class/</link>
		<comments>http://ianserlin.com/index.php/2009/11/02/actionscript-3-custom-event-base-class/#comments</comments>
		<pubDate>Mon, 02 Nov 2009 11:08:29 +0000</pubDate>
		<dc:creator>Ian Serlin</dc:creator>
				<category><![CDATA[Actionscript 3]]></category>
		<category><![CDATA[Adobe Flex]]></category>
		<category><![CDATA[problem solution]]></category>
		<category><![CDATA[events]]></category>
		<category><![CDATA[metadata]]></category>
		<category><![CDATA[swiz]]></category>

		<guid isPermaLink="false">http://ianserlin.com/?p=44</guid>
		<description><![CDATA[I still see a steady stream of  questions on Flex and ActionScript discussion boards related to effectively using custom events. I can tell you from many hours of experience that custom events are the fundamental basis for transmitting information in any mildly complex Flex/AS3 project and whether they&#8217;re Notifications in PureMVC or the wiring for [...]]]></description>
			<content:encoded><![CDATA[<p>I still see a steady stream of  questions on Flex and ActionScript discussion boards related to effectively using custom events. I can tell you from many hours of experience that custom events are the fundamental basis for transmitting information in any mildly complex Flex/AS3 project and whether they&#8217;re Notifications in <a title="PureMVC AS3 Framework" href="http://puremvc.org" target="_blank">PureMVC</a> or the wiring for <a title="Mate Flex Framework" href="http://mate.asfusion.com/" target="_blank">Mate</a> or simply vanilla using something like <a title="Brutally simple micro-architecture for Rich Internet Application development with Adobe Flex" href="http://swizframework.org/" target="_blank">Swiz</a> (my favorite) and you should be using them.</p>
<h2>Problem</h2>
<p>You&#8217;ve heard about custom events in AS3 but don&#8217;t really understand them or are interested in best practice uses for them.</p>
<h2>Solution</h2>
<p>Typically the most common need for a true custom event is to transmit some other piece of information along with the actual event itself, to do this you&#8217;ll need a simple extension to the base class.</p>
<h3>_Event.as</h3>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
</pre></td><td class="code"><pre class="actionscript3" style="font-family:monospace;"><span style="color: #9900cc; font-weight: bold;">package</span> events <span style="color: #000000;">&#123;</span>
&nbsp;
	<span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.events</span>.<span style="color: #004993;">Event</span>;
&nbsp;
	<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #9900cc; font-weight: bold;">class</span> _Event extends <span style="color: #004993;">Event</span> <span style="color: #000000;">&#123;</span>
&nbsp;
		<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #6699cc; font-weight: bold;">var</span> <span style="color: #004993;">data</span><span style="color: #000000; font-weight: bold;">:*</span>;
&nbsp;
		<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> _Event<span style="color: #000000;">&#40;</span><span style="color: #004993;">type</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">String</span>=<span style="color: #990000;">&quot;&quot;</span>, someData<span style="color: #000000; font-weight: bold;">:*</span>=<span style="color: #0033ff; font-weight: bold;">null</span>, <span style="color: #004993;">bubbles</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Boolean</span>=<span style="color: #0033ff; font-weight: bold;">true</span>, <span style="color: #004993;">cancelable</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Boolean</span>=<span style="color: #0033ff; font-weight: bold;">false</span><span style="color: #000000;">&#41;</span>
		<span style="color: #000000;">&#123;</span>
			<span style="color: #0033ff; font-weight: bold;">super</span><span style="color: #000000;">&#40;</span><span style="color: #004993;">type</span>, <span style="color: #004993;">bubbles</span>, <span style="color: #004993;">cancelable</span><span style="color: #000000;">&#41;</span>;
			<span style="color: #0033ff; font-weight: bold;">this</span>.<span style="color: #004993;">data</span> = someData;
		<span style="color: #000000;">&#125;</span>
&nbsp;
		override <span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> <span style="color: #004993;">clone</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> <span style="color: #000000; font-weight: bold;">:</span> <span style="color: #004993;">Event</span>
		<span style="color: #000000;">&#123;</span>
			<span style="color: #0033ff; font-weight: bold;">return</span> <span style="color: #0033ff; font-weight: bold;">new</span> _Event<span style="color: #000000;">&#40;</span><span style="color: #004993;">type</span>, <span style="color: #004993;">data</span>, <span style="color: #004993;">bubbles</span>, <span style="color: #004993;">cancelable</span><span style="color: #000000;">&#41;</span>;
		<span style="color: #000000;">&#125;</span>
	<span style="color: #000000;">&#125;</span>
<span style="color: #000000;">&#125;</span></pre></td></tr></table></div>

<p>Stuff the data in the event when you fire it off and retrieve or modify it in your listeners. You should be creating a separate child class or each main category of events your application is defining. For instance if you were dealing with muting/unmuting your entire application you might create an AudioEvent class or if you were communicating with a server to gather user information you might create a UserEvent class and a ServerEvent class. In each of your child classes put your &#8220;public static const EVENT_TYPE:String = &#8216;eventType&#8217;;&#8221; declarations related to that particular type of event. Doing this forces you to think about how to best separate the different concerns influencing the behavior of your application.</p>
<p>If you want stricter compile-time type checking just add typed getter methods that wrap the data property to your child event classes.</p>
<p>To declare that your MXML component dispatches a certain custom event in your MXML file so you get compile-time code hinting:</p>

<div class="wp_syntax"><div class="code"><pre class="mxml" style="font-family:monospace;"><span style="color: #000000;"><span style="color: #7400FF;">&lt;mx:Metadata</span><span style="color: #7400FF;">&gt;</span></span>
     [Event(name=&quot;cancelled&quot;, type=&quot;events.FormEvent&quot;)]
<span style="color: #000000;"><span style="color: #7400FF;">&lt;/mx:Metadata</span><span style="color: #7400FF;">&gt;</span></span></pre></div></div>

<p>To declare that your ActionScript class dispatches a certain custom event, in-between your package declaration and your class declaration:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript3" style="font-family:monospace;"><span style="color: #000000;">&#91;</span><span style="color: #004993;">Event</span><span style="color: #000000;">&#40;</span><span style="color: #004993;">name</span>=<span style="color: #990000;">&quot;createScheduleComplete&quot;</span>, <span style="color: #004993;">type</span>=<span style="color: #990000;">&quot;events.ScheduleEvent&quot;</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#93;</span></pre></div></div>

<p>That&#8217;s your basic custom event primer, hopefully straightforward enough to get you pointed in the right direction should you just be joining the Flash/Flex community. I hope to do a post about unleashing the power of events with <a title="Brutally simple micro-architecture for Rich Internet Application development with Adobe Flex" href="http://swizframework.org/" target="_blank">Swiz</a> in the near future, but if you have other cool uses for custom events or think I&#8217;m doing something terribly wrong, write it up and let me know in the comments!</p>
]]></content:encoded>
			<wfw:commentRss>http://ianserlin.com/index.php/2009/11/02/actionscript-3-custom-event-base-class/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Drawing gradient backgrounds in ActionScript 3 and Flex 3</title>
		<link>http://ianserlin.com/index.php/2009/08/22/drawing-gradient-backgrounds-in-actionscript-3-and-flex-3/</link>
		<comments>http://ianserlin.com/index.php/2009/08/22/drawing-gradient-backgrounds-in-actionscript-3-and-flex-3/#comments</comments>
		<pubDate>Sat, 22 Aug 2009 16:16:12 +0000</pubDate>
		<dc:creator>Ian Serlin</dc:creator>
				<category><![CDATA[Actionscript 3]]></category>
		<category><![CDATA[Adobe Flex]]></category>
		<category><![CDATA[problem solution]]></category>
		<category><![CDATA[background]]></category>
		<category><![CDATA[drawing]]></category>
		<category><![CDATA[gradient]]></category>
		<category><![CDATA[graphics]]></category>

		<guid isPermaLink="false">http://ianserlin.com/?p=57</guid>
		<description><![CDATA[Flex 4 provides an awesome new declarative way to easily create display gradients, but Flex 3 did not. There are many times a simple gradient can go a long way in terms of improving the user&#8217;s perception of your user interface whether its to add a bit of depth in the background or clearly delineate [...]]]></description>
			<content:encoded><![CDATA[<p>Flex 4 provides an awesome new declarative way to easily create display gradients, but Flex 3 did not. There are many times a simple gradient can go a long way in terms of improving the user&#8217;s perception of your user interface whether its to add a bit of depth in the background or clearly delineate between actions and content.</p>
<h2>Problem</h2>
<p>You want to easily draw gradients in your AS3 or MXML UI components.</p>
<h2>Solution</h2>
<p>A while back I wrote this tiny graphics utility class to draw gradients because there was no way in hell I was going to embed images all over my application. </p>
<h3>GraphicUtils.as</h3>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>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
</pre></td><td class="code"><pre class="actionscript3" style="font-family:monospace;"><span style="color: #9900cc; font-weight: bold;">package</span> utils <span style="color: #000000;">&#123;</span>
	<span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.display</span>.<span style="color: #004993;">GradientType</span>;
	<span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.display</span>.<span style="color: #004993;">Graphics</span>;
	<span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.display</span>.<span style="color: #004993;">SpreadMethod</span>;
	<span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.geom</span>.<span style="color: #004993;">Matrix</span>;
&nbsp;
	<span style="color: #0033ff; font-weight: bold;">import</span> mx.utils.GraphicsUtil;
&nbsp;
	<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #9900cc; font-weight: bold;">class</span> GraphicsUtil extends mx.utils.GraphicsUtil
	<span style="color: #000000;">&#123;</span>
		<span style="color: #0033ff; font-weight: bold;">public</span> static <span style="color: #339966; font-weight: bold;">function</span> drawGradientBackground<span style="color: #000000;">&#40;</span> <span style="color: #004993;">graphics</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Graphics</span>, <span style="color: #004993;">colors</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Array</span>, <span style="color: #004993;">width</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Number</span>, <span style="color: #004993;">height</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Number</span>, fillType<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">String</span>, cornerRadius<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">uint</span> <span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span> <span style="color: #000000;">&#123;</span>
			<span style="color: #004993;">graphics</span>.<span style="color: #004993;">clear</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>;
			<span style="color: #6699cc; font-weight: bold;">var</span> <span style="color: #004993;">alphas</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Array</span> = <span style="color: #000000;">&#91;</span><span style="color: #000000; font-weight:bold;">1</span>, <span style="color: #000000; font-weight:bold;">1</span><span style="color: #000000;">&#93;</span>;
			<span style="color: #6699cc; font-weight: bold;">var</span> <span style="color: #004993;">ratios</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Array</span> = <span style="color: #000000;">&#91;</span>0x11, 0xFF<span style="color: #000000;">&#93;</span>;
			<span style="color: #6699cc; font-weight: bold;">var</span> <span style="color: #004993;">matrix</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Matrix</span> = <span style="color: #0033ff; font-weight: bold;">new</span> <span style="color: #004993;">Matrix</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>;
			<span style="color: #004993;">matrix</span>.<span style="color: #004993;">createGradientBox</span><span style="color: #000000;">&#40;</span> <span style="color: #004993;">width</span>, <span style="color: #004993;">height</span>, <span style="color: #004993;">Math</span>.<span style="color: #004993;">PI</span> <span style="color: #000000; font-weight: bold;">/</span> <span style="color: #000000; font-weight:bold;">2</span>, <span style="color: #000000; font-weight:bold;">0</span>, <span style="color: #000000; font-weight:bold;">0</span><span style="color: #000000;">&#41;</span>;
			<span style="color: #6699cc; font-weight: bold;">var</span> spreadMethod<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">String</span> = <span style="color: #004993;">SpreadMethod</span>.<span style="color: #004993;">PAD</span>;
			<span style="color: #004993;">graphics</span>.<span style="color: #004993;">beginGradientFill</span><span style="color: #000000;">&#40;</span>fillType, <span style="color: #004993;">colors</span>, <span style="color: #004993;">alphas</span>, <span style="color: #004993;">ratios</span>, <span style="color: #004993;">matrix</span>, spreadMethod<span style="color: #000000;">&#41;</span>;  
			<span style="color: #004993;">graphics</span>.<span style="color: #004993;">drawRoundRect</span><span style="color: #000000;">&#40;</span> <span style="color: #000000; font-weight:bold;">0</span>, <span style="color: #000000; font-weight:bold;">0</span>, <span style="color: #004993;">width</span>, <span style="color: #004993;">height</span>, cornerRadius, cornerRadius <span style="color: #000000;">&#41;</span>;
		<span style="color: #000000;">&#125;</span>
&nbsp;
		<span style="color: #0033ff; font-weight: bold;">public</span> static <span style="color: #339966; font-weight: bold;">function</span> drawLinearGradientBackground<span style="color: #000000;">&#40;</span> <span style="color: #004993;">graphics</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Graphics</span>, <span style="color: #004993;">colors</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Array</span>, <span style="color: #004993;">width</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Number</span>, <span style="color: #004993;">height</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Number</span>, cornerRadius<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">uint</span> <span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span> <span style="color: #000000;">&#123;</span>
			drawGradientBackground<span style="color: #000000;">&#40;</span> <span style="color: #004993;">graphics</span>, <span style="color: #004993;">colors</span>, <span style="color: #004993;">width</span>, <span style="color: #004993;">height</span>, <span style="color: #004993;">GradientType</span>.<span style="color: #004993;">LINEAR</span>, cornerRadius <span style="color: #000000;">&#41;</span>;
		<span style="color: #000000;">&#125;</span>
&nbsp;
		<span style="color: #0033ff; font-weight: bold;">public</span> static <span style="color: #339966; font-weight: bold;">function</span> drawRadialGradientBackground<span style="color: #000000;">&#40;</span> <span style="color: #004993;">graphics</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Graphics</span>, <span style="color: #004993;">colors</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Array</span>, <span style="color: #004993;">width</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Number</span>, <span style="color: #004993;">height</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Number</span>, cornerRadius<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">uint</span> <span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span> <span style="color: #000000;">&#123;</span>
			drawGradientBackground<span style="color: #000000;">&#40;</span> <span style="color: #004993;">graphics</span>, <span style="color: #004993;">colors</span>, <span style="color: #004993;">width</span>, <span style="color: #004993;">height</span>, <span style="color: #004993;">GradientType</span>.<span style="color: #004993;">RADIAL</span>, cornerRadius <span style="color: #000000;">&#41;</span>;
		<span style="color: #000000;">&#125;</span>
	<span style="color: #000000;">&#125;</span>
<span style="color: #000000;">&#125;</span></pre></td></tr></table></div>

<p>It&#8217;s pretty straightforward, just override the updateDisplayList function in the component you want to draw the gradient in and pass in the component&#8217;s graphics property and your gradient parameters like so:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code"><pre class="actionscript3" style="font-family:monospace;">override <span style="color: #0033ff; font-weight: bold;">protected</span> <span style="color: #339966; font-weight: bold;">function</span> updateDisplayList<span style="color: #000000;">&#40;</span>unscaledWidth<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Number</span>, unscaledHeight<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Number</span><span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span> <span style="color: #000000;">&#123;</span>
     <span style="color: #0033ff; font-weight: bold;">super</span>.updateDisplayList<span style="color: #000000;">&#40;</span> unscaledWidth, unscaledHeight <span style="color: #000000;">&#41;</span>;
     <span style="color: #009900;">// draw a gradient background in the video screen</span>
     GraphicsUtil.drawLinearGradientBackground<span style="color: #000000;">&#40;</span> <span style="color: #0033ff; font-weight: bold;">this</span>.<span style="color: #004993;">graphics</span>, <span style="color: #000000;">&#91;</span>0x101010,0x000000<span style="color: #000000;">&#93;</span>, unscaledWidth, unscaledHeight, <span style="color: #0033ff; font-weight: bold;">this</span>.<span style="color: #004993;">getStyle</span><span style="color: #000000;">&#40;</span><span style="color: #990000;">&quot;cornerRadius&quot;</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#41;</span>;
<span style="color: #000000;">&#125;</span></pre></td></tr></table></div>

<p>It draws linear gradients from top to bottom or radial gradients but could easily be extended to support more gradient types if needed. By the way, I wonder why Adobe chose to make the default linear gradient direction left-to-right in Flex 4&#8230; yeah, because they want you to know how cool the rotation property is.</p>
<p>If you&#8217;ve got your own kick ass gradient drawing utilities or you turned my GraphicUtils class into something kick ass let me know in the comments!</p>
]]></content:encoded>
			<wfw:commentRss>http://ianserlin.com/index.php/2009/08/22/drawing-gradient-backgrounds-in-actionscript-3-and-flex-3/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

