Learn Something Every Day is a brilliant project. Every day the folks at Young put out a new fun fact skit that amuses me a lot. Though I do look at their site on an almost daily base and even subscribed to their feed, I was wondering if their might be a somehow ubiquitous way to integrate these little units of mental candy into an everyday.
That's why they can now be streamed to a Chumby.
The final widget
After all this widget is nothing too fancy. It simply reads the LSED feed and creates some sort of slideshow displaying ten fact skits, one after the other. Beyond just watching and enjoying it you can also skip through the slides by clicking them.
Please, feel free to throw the widget on your chumby, dash, android or whatever. It is listed here in the free widget section of chumby.com.
For your own pleasure and convenience, the widget and all the source files can also be downloaded here:
But as some of you might be interested in playing with the widget to create their own, let me walk you through some of the modifications that had to be made.
Cobbling the widget
Basically the widget I created is a quick-n-dirty modification of the Sample RSS widget provided from the official chumby wiki. Essentially all magic worth highlighting is bundled in two methods that are displayed below. But let me explain the tricky parts...
First this widget is written in Actionscript 2, which is a somehow old way to steer flash movies. Unfortunately flash doesn't allow your widgets in general to load external ressources without the need of a little effort. To load external ressources, I had to put a crossdomain file and a little php file to proxy the feed as well as the images to the chumby.
After creating the proxy, essentially one method needed adjustment - loadItem(). Lines 5 to 11 show how an XML based feed is being traversed to distill the adress of the images. The the previously loaded image will be removed from the stage which brought up a very strange problem about removing movieclips. You can see the solution to it in lines 19 and 20. Finally a new clip will be created dynamically (see dynamic referencing in line 14) and loaded into the widget via a common MovieClipLoader. Once the image is loaded it will be tweened and adjusted to the widget and equipped with the skipping feature.
Here are the important code parts for reference:
1: function loadItem(item)
2: {
3: g_currentItem = item;
4: //dig in feed for image
5: var xmlData = new XML(item.firstValueOfType('content:encoded'));
6: xmlData.ignoreWhite = true;
7: var url = "";
8: for (i = 0; i < xmlData.childNodes.length; i++)
9: for (j = 0; j < xmlData.childNodes[i].childNodes.length; j++)
10: if(xmlData.childNodes[i].childNodes[j].attributes.src != undefined)
11: url = xmlData.childNodes[i].childNodes[j].attributes.src;
12: //fade out and get rid of the previous LSED image
13: var loader_mc:MovieClip =
14: _root["loader_mc"+(g_itemIndex - 1 < 0 ? g_items.length - 1 : g_itemIndex - 1)];
15: var alphaTweenHIDE:Tween =
16: new Tween(loader_mc, "_alpha", Regular.easeOut , 100, 0, 6, true);
17: alphaTweenHIDE.onMotionFinished = function()
18: {
19: if(loader_mc.getDepth() >= 1048575 || loader_mc.getDepth() <= 0 )
20: loader_mc.swapDepths(2000);
21: loader_mc.removeMovieClip();
22: };
23: //load new LSED image
24: var container:MovieClip =
25: createEmptyMovieClip("loader_mc"+g_itemIndex, getNextHighestDepth());
26: mcLoader.loadClip(makeURL(proxy+url),container);
27: }
28: function onLoadInit(mc: MovieClip)
29: {
30: var alphaTweenSHOW:Tween = new Tween(mc, "_x", Strong.easeOut , -330, 0, 3, true);
31: mc._yscale = 50;
32: mc._xscale = 50;
33: mc.onPress = function() { nextItem(); };
34: }
No comments.