I developed a simple Flex 4 application targeting AIR for Android. For this application, I used Flex to build a somewhat smaller version of a previous application that uses XML data to display a list Phoenix traffic cameras locations and images. The images are updated on an set interval and locations are selected from a list of freeways and intersections for each traffic camera.
Initially, I built the application in Flash, but ran into some issues and annoyances with creating a proper list that worked with the Multitouch events for capturing user gestures on multitouch devices like Android.
The Flex 4 list has support for TouchEvent. However, it’s still difficult to differentiate between the different TouchEvent’s being fired (TouchEvent.TOUCH_BEGIN, TouchEvent.TOUCH_MOVE, TouchEvent.TOUCH_END, TouchEvent.TAP). As a result, the list has a tendency to select items while scrolling the list.
Here are some screen shots of the application running on my NexusOne:
The Flex preloader was replaced with a simple splash screen graphic.
Simple list of freeways.
Once you select a freeway, you see list of camera locations for that freeway.
Selecting a camera takes displays the live camera image accompanied by two still images for direction.
This was my first run at doing Android and I can see some potential. Deploying AIR application from Flex 4 to your Android device is pretty easy, though nothing like the experience publishing from Flash CS5. The applications tend to be a little robust, hopefully this will be resolved with the release of the Halo components which are designed specifically for mobile devices.
To build your own AIR for Android applications, you need an Android device running Android 2.2 which supports Flash Player 10.1 and AIR. you also need to sign up for the AIR for Android Prerelease program. There are some good example applications with code starting to appear, including a scrolling list. Here are the posts I referenced used building this application:
Flex 4 List Scrolling on Android with Flash Player 10.1
“VoiceNotes for Android”: Sample App using Flex, AIR, and the Microphone API
AIR on Android: TweetrApp Video walk-through
Employee Directory Sample Application Using Flex and AIR for Android – Updated for Froyo
Flex 4 Application Handling Touch Events on Android with Flash Player 10.1
- Mister
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=ea2c0ce1-6d29-4a27-b680-848f9c046997)
AS3: Button with Text and Basic Styling
It’s been a while since I had the opportunity to work on a pure AS3 project. I recently had a need for a simple AS3 button that displays text and decided to customize the SimpleButton control. As I quickly discovered, the SimpleButton control isn’t really setup to support text or a lot of other features, and hacking these features into it doesn’t make much sense. So I built a quick little class that emulates the behavior of SimpleButton but could display text and offer a few other features for styling the button dynamically.
SimpleButtonProject.as
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
{
import com.components.CustomButton;
import flash.display.Sprite;
import flash.events.MouseEvent;
[SWF( width = '200', height = '200', backgroundColor = '#FFFFFF', frameRate = '20')]
public class SimpleButtonProject extends Sprite
{
private var button:CustomButton;
public function SimpleButtonProject()
{
button = new CustomButton("Welcome");
button.x = 0;
button.addEventListener(MouseEvent.CLICK, handleMouseClick);
addChild(button);
}
private function handleMouseClick(event:MouseEvent):void
{
button.label = "Clicked"
/*
// remove the button and mark it for garbage collection
button.removeEventListener(MouseEvent.CLICK, handleMouseClick);
this.removeChild(button);
button = null;
*/
}
}
}
CustomButton.as
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
{
import flash.display.Shape;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.TextFormatAlign;
public class CustomButton extends Sprite
{
// ---- Properties -----
protected var __button:CustomSimpleButton;
protected var __txtFormat:TextFormat;
protected var __txtField:TextField;
protected var __background:Shape;
protected var __hitarea:Sprite;
protected var _label:String = "";
protected var _font:String = "Arial";
protected var _fontSize:int = 12;
protected var _fontColor:uint = 0x000000;
protected var _upColor:uint = 0xFFCC00;
protected var _overColor:uint = 0xCCFF00;
protected var _downColor:uint = 0x00CCFF;
protected var _buttonWidth:int;
protected var _buttonHeight:int;
protected var _buttonStrokeColor:int = 0x000000;
public function get label():String
{
return _label;
}
public function set label(value:String):void
{
_label = value;
updateDisplayList();
}
public function get buttonStrokeColor():uint
{
return _buttonStrokeColor;
}
public function set buttonStrokeColor(value:uint):void
{
_buttonStrokeColor = value;
updateDisplayList();
}
public function get font():String
{
return _font;
}
public function set font(value:String):void
{
_font = value;
updateDisplayList();
}
public function get fontSize():int
{
return _fontSize;
}
public function set fontSize(value:int):void
{
_fontSize= value;
updateDisplayList();
}
public function get fontColor():uint
{
return _fontColor;
}
public function set fontColor(value:uint):void
{
_fontColor= value;
updateDisplayList();
}
public function get upColor():uint
{
return _upColor;
}
public function set upColor(value:uint):void
{
_upColor = value;
updateDisplayList();
}
public function get overColor():uint
{
return _overColor;
}
public function set overColor(value:uint):void
{
_overColor = value;
}
public function get downColor():uint
{
return _downColor;
}
public function set downColor(value:uint):void
{
_downColor = value;
}
// ---- Constructor -----
public function CustomButton(label:String = "", w:int = 80, h:int = 22)
{
super();
if(label != "") this.label = label;
this.addEventListener(Event.REMOVED_FROM_STAGE, destroy);
_buttonWidth = w;
_buttonHeight = h;
createChildren();
updateDisplayList();
}
// ---- Public Methods -----
public function destroy(event:Event = null):void
{
this.removeEventListener(Event.REMOVED_FROM_STAGE, destroy);
if(__background) {
__background.graphics.clear();
__background = null;
}
if(__hitarea){
__hitarea.removeEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
__hitarea.removeEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
__hitarea.removeEventListener(MouseEvent.MOUSE_UP, onMouseOver);
__hitarea.removeEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
__hitarea.graphics.clear();
__hitarea = null;
}
if(__txtField) {
__txtField.text = "";
__txtField = null;
__txtFormat = null;
}
}
// ---- Protected Methods -----
protected function createChildren():void
{
if(!__background) {
__background = new Shape();
addChild(__background);
}
if(!__txtField) {
__txtField = new TextField();
__txtField.selectable = false
addChild(__txtField);
}
if(!__hitarea) {
__hitarea = new Sprite();
__hitarea.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
__hitarea.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
__hitarea.addEventListener(MouseEvent.MOUSE_UP, onMouseOver);
__hitarea.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
addChild(__hitarea);
}
}
protected function drawButtonBackground(color:uint):void
{
if(__background){
__background.graphics.beginFill(color);
__background.graphics.lineStyle(1, buttonStrokeColor);
__background.graphics.drawRect(0, 0, _buttonWidth, _buttonHeight);
__background.graphics.endFill();
}
}
protected function updateDisplayList():void
{
if(__txtField){
__txtFormat = new TextFormat(font, fontSize, fontColor, false, null, null, null, null, TextFormatAlign.CENTER);
__txtField.width = _buttonWidth;
__txtField.defaultTextFormat = __txtFormat;
__txtField.text = _label;
__txtField.y = (_buttonHeight - __txtField.textHeight)/2;
}
if(__background) {
drawButtonBackground(upColor);
}
if(__hitarea){
__hitarea.graphics.beginFill(0x000000, 0);
__hitarea.graphics.drawRect(0, 0, _buttonWidth, _buttonHeight);
__hitarea.graphics.endFill();
}
}
protected function onMouseOver(e:Event):void
{
e.stopPropagation();
drawButtonBackground(overColor);
}
protected function onMouseDown(e:Event):void
{
e.stopPropagation();
drawButtonBackground(downColor);
}
protected function onMouseUp(e:Event):void
{
e.stopPropagation();
drawButtonBackground(overColor);
}
protected function onMouseOut(e:Event):void
{
e.stopPropagation();
drawButtonBackground(upColor);
}
}
}
So there you have it, a very simple button that displays text and has a few other features. I realize its not so simple ( # lines of code), but I added a lot of public properties to change the style and label dynamically, as well as logic for garbage collection. If you don’t need those extra features, you can easily be customize it to fit any your needs.
-Mister