This is an AIR application I built for an assignment in the course Interactive Systems at the university. This video demonstrates all features like touch guestures and filtering. Since I don’t own a touchscreen, this is only a “fake” touch video. I’d love to try this out on a real touchscreen.
[flashvideo file=wp-content/uploads/2010/06/DSCF2190-384kbps.flv /]Im Rahmen meines Studiums habe ich für den Kurs Interaktive Systeme eine AIR-Anwendung für eine Videothek geschrieben. Das Video demonstriert alle Features wie z.B. die Touch-Gesten. Da ich selbst keinen Touchscreen besitze handelt es sich bei dem Video nur um ein “fake”. Würde die Anwendung aber zu gerne mal auf einem echten Touchscreen testen..
In the last part I gave five improvements to the charts that are shown in the WordPress.com Stats plugin. I ended with the weekly visits chart, so now I conclude with improvements for the monthly visits chart and presenting the idea of putting all the three into one chart. Continue reading →
WordPress.com Stats is the most used statistic plugin for wordpress (with over 1.5 mio downloads so far). It offers a very simple way of collecting anonymous visit statistics and has a nice backend that lets you explore the data using line charts and tables. I keep using this plugin since the very beginning of this blog and I must admit that I’m looking at it every day. But in doing so I recently started getting bugged of the charts. This post series shows ten ways for improving them. Continue reading →
There are a lot of nice text features in the new flash text layout framework but obviosly there is still one important feature missing: Hyphenation. Until today, there is no native hyphenation support in the flashplayer. I decided to fill this gap by porting the Hyphenator.js library by Mathias Nater to ActionScript. In this post I’ll demonstrate text hyphenation in flash. Continue reading →
A very simple rule in visualizations is to never map scalar data to circle radii. Humans do better in comparing relative areas, so if you want to map data to a shape, you have to map it to it’s area. The rule is that simple that normally it’s not worth a blog post. But as I’m currently reading the book “Visualizing Data” by Ben Fry I was very surprised to notice, that shown examples are continuously breaking this rule.
The operative point in this case is data integrity, which means to tell the truth about the data you’re displaying. Showing all shapes in it’s true relative dimension is a fundamental law in data integrity. A book about data visualization isn’t allowed to miss this rule.
So, to fill this little post with some graphics, I made two simple illustrations. Both containing a set of circles that represents the data set [6.25, 12.5, 25, 50, 100, 200]. Each circle should look like as twice as large as the circle to its left.
These values were mapped to the circle radii
As you see above, especially the step from 100 to 200 looks not like its only the double value. As this brings in a quadratic error, the bigger the values, the bigger is the error. The next illustration show the same data set with corrected circle radii:
These values were mapped to the circle areas
To make It even more comfortable I’m going to publish this super exclusive actionscript snippet that helps you mapping data to a circle radii:
/**
* @param v The value to map
* @param dmin Minimum value in data set
* @param dmax maximum value in data set
* @param rmin circle radius for minimum data value
* @param rmax circle radius for maximum data value
*/function mapRadius(v:Number, dmin:Number, dmax:Number, rmin:Number, rmax:Number):Number{var areaMin:Number = rmin * rmin *Math.PI;
var areaMax:Number = rmax * rmax *Math.PI;
var area:Number = (v - dmin)/(dmax - dmin)*(areaMax - areaMin) + areaMin;
returnMath.sqrt(area /Math.PI);
}
The last days I worked on a visualization experiment that shows the geographic locations of blog page requests on a world map. Furthermore, the visualization should be animated over time, so one can replay past events or just view the current live data. The last thing I added was an indicator for night and day phases in the world. Here you can see a little preview video showing the current results…
I recently had the problem to store a flash animation into a video file. I first tried some tools I found in the net, but they all run into problems because my flash movie doesn’t integrate the MovieClip timeline. Tools like swf2avi are stopping the conversion after the first frame, because they’re thinking it’s the only frame. One way round is make let your movie extend the MovieClip class instead of the Sprite and to integrate the timeline in your animation. But this starts to get very difficult if you’re making heavy use of the timers and tweening engines.
The first thing you need to do, is to add a new event listener to the stage’s ENTER_FRAME event.
Inside this event listener you have to check if the current frame is one of those you want to capture. It makes a lot of sense to limit the number of frames regarding to your requirements as all images will be stored uncompressed to your RAM, which might lead to problems if you capture too many frames at once. To capture a single frame you simply create a new BitmapData instance and draw the stage onto it. Since you don’t need transparent images for most video purposes, you set the third constructor parameter to false and define a background color as you like. Finally you store the frame in an array.
Now that we stored all frames we wait till the movie finishes. The next thing to do is to compress the images. You can use the PNGEncoder class of the as3corelib. There is no way to save images directly to your harddrive via flash, so we need to go a way round using an http connection and a little php script on our local web server.
privatefunction exportBitmaps():void{var j:uint = _bitmaps.length;
for(var i:uint = 0; i < j; i++){// encoding the image as pngvar pngStream:ByteArray = PNGEncoder.encode(_bitmaps[i] as BitmapData);
// setup a simple http connection to the php scriptvar header:URLRequestHeader = new URLRequestHeader("Content-type", "application/octet-stream");
var urlReq:URLRequest = new URLRequest("http://localhost/saveImage.php?name=frame_"+i+".png");
urlReq.requestHeaders.push(header);
urlReq.method = URLRequestMethod.POST;
urlReq.data = pngStream;
// send out the datanew URLLoader(urlReq);
}}
The php script is very simple, as it just puts the http post data into a new file on your harddisc.
Now you got a nice set of images and you're ready to convert them into a video file in your favorite format. You can do this with a lot of free tools, I chose VirtualDub, for instance. That's all..
Polygons play a major role in a lot of visualization applications. Beside of the possibility of drawing polygons, there is neither an explicit presentation of polygon data nor are common polygon operations supported in ActionScript. As far as I know there is no simple solution available that solves the following geometrical problems for simple 2D polygons, so I wrote one. Continue reading →
Easing-Funktionen werden verwendet, um sanftere Bewegungsabläufe in Tweens zu erzeugen1. Die Funktionen berechnen in Abhängigkeit von der verstrichenen Zeit t, dem Startwert s, der gewünschten Wertänderung c und der Gesamtdauer der Animation d einen neuen Wert für den Ort eines Objektes. Natürlich können Easing-Funktionen auch für alle ander Arten von zeitlichen Wertänderungen benutzt werden, wie beispielsweise zur Rotation von Objekten oder zur Änderung einer Lautstärke.
function easing(t:Number, s:Number, c:Number, d:Number):Number{// calculate new valuereturn value;
}
Rober Penner hat eine ganze Reihe von Easing-Funktionen gesammelt, die mitlerweile in vielen Animations-Frameworks für ActionScript oder JavaScript integriert sind.
Natürlich sind Beispielanimationen gut geeignet, um dazu finden sich auch schon ausführliche Beispiele im Internet. Ein anderer Weg zur Visualisierung von Easing-Funktionen ist die einfache Darstellung in einem Funktionsgraph.
Dazu gibt es unter janitor61.com eine schöne Übersicht der Funktionsgraphen im PDF-Format:
Quelle: http://www.janitor61.com/?p=24
Bei der näheren Betrachtung dieser Darstellung haben mich folgende Punkte gestört:
Da sowohl die Achsen als auch die Funktionsgraphen in schwarz gezeichnet wurden, kann man sie schwer auseinanderhalten. So geht beispielsweise aus der Abbildung der Funktion Circ.easeOut nicht hervor, wo der Funktionsgraph endet.
Die Graphen können nur schwer miteinander verglichen werden, da die einzelnen Typen (easeIn, easeOut, easeInOut) in der Darstellung nicht über- oder nebeneinander stehen.
Die vollständige Umrahmung der Koordinatensysteme (aka. “Chart Junk”2) stört bei der Betrachtung der Diagramme.
Die folgende Visualisierung verbessert die angesprochenen Punkte:
verbesserte Visualisierung
Die Darstellung wurde in ActionScript3 erzeugt, daher gibt soll an dieser Stelle auch auf die interaktive Version verwiesen werden.