wu-media lab http://wu-media.com Mon, 15 Jun 2009 13:43:58 +0000 http://wordpress.org/?v=2.7.1 en hourly 1 Android - Events the easy (AS3) way http://wu-media.com/2009/06/android-events-the-easy-as3-way/ http://wu-media.com/2009/06/android-events-the-easy-as3-way/#comments Tue, 09 Jun 2009 17:50:29 +0000 admin http://wu-media.com/?p=128 I like the EventDispatcher class from ActionScript 3 so I decided to write one for Java.
Usage

1
2
3
4
5
6
7

foo.addEventListener("MyEvent", new EventListener() {
    public void run(Event event) {
        // remove the listener if no longer needed
        event.target.removeEventlistener(event.type, this);
        // do stuff
    }
}

Now your class can either extend EventDispatcherImp or implement EventDispatcher and you’re ready to dispatch events.

Via inheritance

1
2
3

import com.wumedia.events.EventDispatcher.EventDispatcherImpl;
public class Dispatcher extends EventDispatcherImpl {
}

Via composition

1
2
3
4
5
6

import com.wumedia.events.EventDispatcher.EventDispatcherImpl;
public class Dispatcher implements EventDispatcher {
    public Dispatcher() {
        _dispatcher = new EventDispatcherImpl(this);
    }
}

Here are the 3 required classes,
The Event

1
2
3
4
5
6
7
8

package com.wumedia.events;
public class Event {	
	public String type;
	public EventDispatcher target;	
	public Event(String type) {
		this.type = type;
	}
}

The Listener

1
2
3
4

package com.wumedia.events;
public abstract interface EventListener {
	public void run(Event event);
}

The Dispatcher

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

package com.wumedia.events;
 
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Iterator;
 
public interface EventDispatcher {
 
	/**
	 * Register an event listener
	 * @param type		String the name of the event to listen to
	 * @param listener	EventListener the listener
	 */
	public void addEventListener(String type, EventListener listener);
	/**
	 * Unregister an event listener
	 * @param type		String the name of the event registered to
	 * @param listener	EventListener the listener
	 */
	public void removeEventlistener(String type, EventListener listener);
	/**
	 * Remomve all listeners
	 */
	public void removeAllListeners();
	/**
	 * Dispatch an Event
	 * @param event	Event
	 */
	public void dispatchEvent(Event event) ;
	/**
	 * Query to see if there are any listeners registered to a certain event name
	 * @param type	String the event name to query
	 * @return	boolean
	 */
	public boolean willTrigger(String type);
 
 
	public class EventDispatcherImpl implements EventDispatcher {
		protected HashMap<string , ArrayList<EventListener>> _listenersMap;
		protected EventDispatcher _eventTarget;
 
		/**
		 * Constructor - intended for inheritance
		 */
		public EventDispatcherImpl() {
			removeAllListeners();
		}
 
		/**
		 * Constructor - intended for composition
		 * @param eventTarget EventListener to use as the event target in the Event sent
		 */
		public EventDispatcherImpl(EventDispatcher eventTarget) {
			_eventTarget = eventTarget;
		}
 
		public void addEventListener(String type, EventListener listener) {
			removeEventlistener(type, listener);
			ArrayList<eventlistener> listeners = _listenersMap.get(type);
			if ( listeners == null ) {
				listeners = new ArrayList</eventlistener><eventlistener>();
				_listenersMap.put(type, listeners);
			}
			listeners.add(listener);
		}
 
		public void removeEventlistener(String type, EventListener listener) {
			ArrayList</eventlistener><eventlistener> listeners = (ArrayList</eventlistener><eventlistener>) _listenersMap.get(type);
			if ( listeners != null ) {
				Iterator</eventlistener><eventlistener> items = listeners.iterator();
		        while( items.hasNext() ) {
		            if ( (EventListener) items.next() == listener ) {
		            	items.remove();
		            	return;
		            }
		        }
		        if ( listeners.isEmpty() ) {
		        	_listenersMap.remove(type);
		        }
			}
		}
 
		public void removeAllListeners() {
			_listenersMap = new HashMap<string , ArrayList<EventListener>>();
		}
 
		public void dispatchEvent(Event event) {
			ArrayList<eventlistener> listeners = (ArrayList</eventlistener><eventlistener>) _listenersMap.get(event.type);
			if ( listeners != null ) {
				event.target = _eventTarget != null ? _eventTarget : this;
				Iterator</eventlistener><eventlistener> items = listeners.iterator();
		        while( items.hasNext() ) {
		            ( (EventListener) items.next() ).run(event);
		        }
			}
		}
 
		public boolean willTrigger(String type) {
			ArrayList</eventlistener><eventlistener> listeners = (ArrayList</eventlistener><eventlistener>) _listenersMap.get(type);
			return listeners == null || listeners.isEmpty();
		}
	}
}
 
 
 
 
 
</eventlistener></string></eventlistener></string>
]]> http://wu-media.com/2009/06/android-events-the-easy-as3-way/feed/ Android ImageLoader - load images sequencially in the background http://wu-media.com/2009/06/android-imageloader-load-images-sequencially-in-the-background/ http://wu-media.com/2009/06/android-imageloader-load-images-sequencially-in-the-background/#comments Mon, 08 Jun 2009 21:47:53 +0000 admin http://wu-media.com/?p=110 A few days ago I started to learn android… and it’s been a fairly smooth transition from flash. Although I have to say, as flash developers we’re just spoiled. We take for granted all the background stuff flash does for us to make coding that much easier.

One of those things is Loading images. in flash we have the Loader class which makes loading images very easy.

1
2

var loader:Loader = new Loader();
loader.load(new URLRequest("myimage.jpg"));

In java/android it takes a few more lines

1
2
3
4
5
6
7

HttpURLConnection conn = (HttpURLConnection) new URL("myimage.jpg").openConnection();
conn.setDoInput(true);
conn.connect();
InputStream inStream = conn.getInputStream();
Bitmap bitmap = BitmapFactory.decodeStream(inStream);
inStream.close();
conn.disconnect();

The code above runs in the same thread so you’ll lock up your UI until the image has finish loading. Adding the Threading code adds quite a bit more code. So I decided to create an ImageLoader class to make my life just a little easier. Now I can load an image to an ImageView with one line of code.

1

ImageLoader.getInstance().load(myImageView, "myimage.jpg", true);

The last parameter tells the ImageLoader class to cache that the bitmap.

The ImageLoader class loads images sequentially so you don’t slow your mobile device down to a crawl. To cancel Loading simply call clearQueue() and to clear the cache call clearCache()

Here’s the class

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

package com.wumedia.net;
 
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.URL;
import java.util.HashMap;
import java.util.Iterator;
import java.util.LinkedList;
import java.util.Queue;
 
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Handler;
import android.widget.ImageView;
 
public class ImageLoader {
	static private ImageLoader _instance;
	static public ImageLoader getInstance() {
		if (_instance == null) {
			_instance = new ImageLoader();
		}
		return _instance;
	}
 
	private HashMap<string , Bitmap> _urlToBitmap;
	private Queue<group> _queue;
	private DownloadThread _thread;
	private Bitmap _missing;
	private boolean _busy;
 
    /**
     * Constructor
     */
	private ImageLoader () {
		_urlToBitmap = new HashMap<string , Bitmap>();
		_queue = new LinkedList<group>();
		_busy = false;
	}
 
	public Bitmap get(String url) {
		return _urlToBitmap.get(url);
	}
 
	public void load(ImageView image, String url) {
		load(image, url, false);
	}
 
	public void load(ImageView image, String url, boolean cache) {
		if (_urlToBitmap.get(url) != null) {
			if(image!=null) {
				image.setImageBitmap(_urlToBitmap.get(url));
			}
		} else {
			image.setImageBitmap(null);
			queue(image, url, cache);
		}
	}
 
	public void queue(ImageView image, String url, boolean cache) {
		Iterator</group><group> it = _queue.iterator();
		if (image!=null) {
			while (it.hasNext()) {
				if (it.next().image.equals(image)) {
					it.remove();
					break;
				}
			}
		} else if (url!=null) {
			while (it.hasNext()) {
				if (it.next().url.equals(url)) {
					it.remove();
					break;
				}
			}
		}
		_queue.add(new Group(image, url, null, cache));
		loadNext();
	}
 
	public void clearQueue() {
		_queue = new LinkedList</group><group>();
	}
 
	public void clearCache() {
		_urlToBitmap = new HashMap<string , Bitmap>();
	}
 
	public void cancel() {
		clearQueue();
		if ( _thread != null ) {
			_thread.disconnect();
			_thread = null;
		}
	}
 
	public void setMissingBitmap(Bitmap bitmap) {
		_missing = bitmap;
	}
 
	private void loadNext() {
		Iterator<group> it = _queue.iterator();
		if (!_busy && it.hasNext() ) {
			_busy = true;
			Group group = it.next();
			it.remove();
			// double check image availability
			if (_urlToBitmap.get(group.url) != null) {
				if (group.image!=null) {
					group.image.setImageBitmap(_urlToBitmap.get(group.url));
				}
				_busy = false;
				loadNext();
			} else {
				_thread = new DownloadThread(group);
				_thread.start();
			}
		}
	}
 
	private void onLoad() {
		if (_thread != null) {
			Group group = _thread.group;
			if (group.bitmap != null) {
				if (group.cache) {
					_urlToBitmap.put(group.url, group.bitmap);
				}
				if (group.image != null) {
					group.image.setImageBitmap(group.bitmap);
				}
			} else if (_missing != null) {
				if (group.image != null) {
					group.image.setImageBitmap(_missing);
				}
			}
		}
		_thread = null;
		_busy = false;
		loadNext();
	}
 
	private class Group {
		public Group(ImageView image, String url, Bitmap bitmap, boolean cache) {
			this.image = image;
			this.url = url;
			this.bitmap = bitmap;
			this.cache = cache;
		}
		public ImageView image;
		public String url;
		public Bitmap bitmap;
		public boolean cache;
 
	}
 
	private class DownloadThread extends Thread {
		final Handler threadHandler = new Handler();
	    final Runnable threadCallback = new Runnable() {
	        public void run() {
	        	onLoad();
	        }
	    };
		private HttpURLConnection _conn;
		public Group group;
		public DownloadThread(Group group) {
			this.group = group;
		}
 
		@Override
		public void run() {
			InputStream inStream = null;
			_conn = null;
			try {
				_conn = (HttpURLConnection) new URL(group.url).openConnection();
				_conn.setDoInput(true);
				_conn.connect();
				inStream = _conn.getInputStream();
				group.bitmap = BitmapFactory.decodeStream(inStream);
				inStream.close();
				_conn.disconnect();
				inStream = null;
				_conn = null;
			} catch (Exception ex) {
				// nothing
			}
			if (inStream != null) {
				try {
					inStream.close();
				} catch (Exception ex) {}
			}
			disconnect();
			inStream = null;
			_conn = null;
			threadHandler.post(threadCallback);
		}
 
		public void disconnect() {
			if (_conn != null) {
				_conn.disconnect();
			}
		}
	}
}
 
 
</group></string></group></string></group></string>
]]> http://wu-media.com/2009/06/android-imageloader-load-images-sequencially-in-the-background/feed/ Google Wave http://wu-media.com/2009/05/google-wave/ http://wu-media.com/2009/05/google-wave/#comments Sun, 31 May 2009 22:50:01 +0000 admin http://wu-media.com/?p=108 “Google Wave is a new tool for communication and collaboration on the web, coming later this year.”

but words don’t do it justice. You should watch the video for various demo of wave. I can see myself using my email, calendar and documents tools less and less… and eventually I can see wave replacing them for good. (if everybody gives up control to the all mighty google that is :))
If there is something it doesn’t do, you can extend it by writing your own server bot or client side widget that will.

If you haven’t checked out Google Wave, you should at http://wave.google.com/

]]> http://wu-media.com/2009/05/google-wave/feed/ Extracting vector from SWFs, writing and now drawing with them http://wu-media.com/2009/05/extracting-vector-from-swfs-writing-and-now-drawing-with-them/ http://wu-media.com/2009/05/extracting-vector-from-swfs-writing-and-now-drawing-with-them/#comments Tue, 26 May 2009 21:13:51 +0000 admin http://wu-media.com/?p=84 ******************** Update: ********************

There’s now a google project for this: code.google.com/p/swfvector. I’m going to be updating this so there might be some changes to the how the whole thing works.

I had a lot of positive feedback for my last project that lets you extract font glyphs out of a swf and write text using the flash drawing API or one of the popular 3D engines.

Now, this update fixes a couple of bugs and also adds support for any vector shape on the stage or the library.

Demo:

Get Adobe Flash player

The syntax is very similar to the the old DynamicText class. The main difference is that for Text, you need to define a fill type and for vectors, the fill type is ignored because vector shapes have their own fill types.

for Vector Shapes

1
2
3
4

// extract shape from swf
VectorShapes.extractFromLibrary(_loader.data, ["woman", "snowman"], VectorShapes.METHOD_CONTINUOUS_POINTS);
// draw shape
VectorShapes.draw(graphics, "woman");

for Vector Text

1
2
3
4
5

// extract font data from swf
VectorText.extractFont(root.loaderInfo.bytes);
// draw text
graphics.beginFill(0x0000);
VectorText.write(graphics, "_Arial", 16, 16, 0, "Hello World", 10, 10);


IMPORTANT
There are two methods to parse and draw vectors. METHOD_CONTINUOUS_POINTS & METHOD_REGULAR.
METHOD_CONTINUOUS_POINTS (the default method) parses shapes while trying to keep the points continuous. This is the best way but it does not support flat shapes (more on that later)

METHOD_REGULAR parses the data as it is saved in the swf. This supports all vector shapes but is slower in both parsing and rendering.

For best performance and to get data that is easier to work with. Use METHOD_CONTINUOUS_POINTS , but your vector shapes must not be flat. What do I mean by flat? Flat is when you collapse everything into one layer in flash and keep hitting CTRL+B until all groups are killed and everything is merged. The flash then saves this in a very compact way which makes it difficult to break out (more on that later), Anyway, this flatten shape takes a lot more passes to render and it also create a data set that is not that friendly to work with.

The best way to create your vector data is to have each individual shape grouped so that they don’t cut into each other. In the included source, the snowman symbol is the right way and the circles symbol is the wrong way.

ok. more,
This is straight out of the SWF file specs:
“Most vector formats allow only one fill and line style per path. The SWF file format extends
this concept by allowing each edge to have its own line and fill style. This can have
unpredictable results when fill styles change in the middle of a path.”

This is why i have two methods to parse the data. METHOD_CONTINUOUS_POINTS actually does it wrong, because it ignores the two fill style per edge thing. two fills per edges is never used if the shapes don’t intersect. So even though METHOD_CONTINUOUS_POINTS is wrong, it is the preferred and default method.
Another thing worth mentioning is that the flash drawing API DOES NOT support two fill per edge. instead flash saves the shapes as triangles with one common point, I’m using 0,0. It then draws these triangles erasing it’s 0,0 tail by drawing over it again. that’s the short version anyway, the whole version is a lot more complicated and i’m too lazy to go into it.

Source code: code.google.com/p/swfvector

]]> http://wu-media.com/2009/05/extracting-vector-from-swfs-writing-and-now-drawing-with-them/feed/ SWF file specifications http://wu-media.com/2009/05/swf-file-specifications/ http://wu-media.com/2009/05/swf-file-specifications/#comments Mon, 11 May 2009 14:01:59 +0000 admin http://wu-media.com/?p=81 If you’re interested in parsing or building your own SWF files.

here’s the file specification from Adobe,

http://www.adobe.com/devnet/swf/

]]> http://wu-media.com/2009/05/swf-file-specifications/feed/ Extracting font glyphs from SWF and Drawing with them http://wu-media.com/2009/05/extracting-font-glyphs-from-swf-and-drawing-with-them/ http://wu-media.com/2009/05/extracting-font-glyphs-from-swf-and-drawing-with-them/#comments Fri, 08 May 2009 22:32:42 +0000 admin http://wu-media.com/?p=19 UPDATE: please use newer and improved version at http://wu-media.com/2009/05/extracting-vector-from-swfs-writing-and-now-drawing-with-them/

Drawing text in flash using font glyph information is definitely not new. five3D does it, PV3D uses the five3D files to do it. and Michael Baczynski also did it.

So what’s so different with my approach?

I extract the font glyphs from your SWFs, so you don’t need to go through the extra step of creating a Class that has a bunch of arrays describing your font. You can now embed fonts just as you normally would, and the best part is… you can use the same fonts with regular TextFields which lowers your overall file size.

SWF files store fonts as a bunch of ShapeRecords the same way it does with graphics youd draw on the Stage in the Flash IDE. These ShapeRecords are composed of a bunched of lineTo, moveTo, curveTo and styles instructions. For fonts we only need the first three. since we’ll be doing they styling in code when we’re about to draw text our text.

Now that we’ve extracted these ShapeRecords. I’ve created a DynamicText class that draws on a Graphics target. This target can be

  1. the graphics property of a DisplayObject
  2. the graphics3D property of a Shape3D in five3D
  3. the graphics property of a VectorShape3D in PV3D

Sample code:

1
2
3
4
5
6
7

// extract font information from swf bytes
DynamicText.extractFontInformation(root.loaderInfo.bytes, true);
// set the style
graphics.beginGradientFill(GradientType.LINEAR, [0xff4400, 0x0], [1, 1], [0x00, 0xff], m);
// draw the ext
DynamicText.write(graphics, "Futura Md BT", 20, 20, 0, "Hello World");
graphics.endFill();

Flash DisplayObject.graphics draw sample:

Get Adobe Flash player


Noticed the gradient fill? because we’re using the flash drawing API, we can use beginFill, beginBitmapFill and beginGradientFill when drawing to a DisplayObject.

The DynamicText class has the following features,

  1. Kerning and Leading that use the same values as photoshop which makes it easier to match text styles to comps
  2. TextBlock alignment of TL, T, TR, L, C, R, BL, B, and BR. TLC, LC and BLC provides centering of the text within the text block
  3. Ability to align the text either using it’s baseline or it’s top or bottom edges. baseline alignment provides more accurate alignment, as the text starts from it’s baseline which also happens to be its zero point.

The same code can be use to draw on five3D and PV3D!

five3D Shape3D.graphics3D draw sample:

Get Adobe Flash player

PV3D VectorShape3D.graphics draw sample:

Get Adobe Flash player

Currently, It only works with fonts that were transcoded with the flash IDE. you can still embed the fonts with the [Embed] tag, as long as it’s from a SWF that was published with the flash IDE. embedding TTF directly with the [Embed] tags breaks my parser for some reason.

Source code: Download

]]> http://wu-media.com/2009/05/extracting-font-glyphs-from-swf-and-drawing-with-them/feed/ Hello world! http://wu-media.com/2009/05/hello-world/ http://wu-media.com/2009/05/hello-world/#comments Wed, 06 May 2009 00:56:19 +0000 admin http://wu-media.com/lab/?p=1 Welcome. I will use this space to post some experiments I do in my free time.

]]> http://wu-media.com/2009/05/hello-world/feed/