2008 began with on a great note for CIM. For the last few months a group of developers here, myself included, have been trying to be a little more vocal and public about the stuff we do and how we do it. I have done it on this blog a bit with entries on how we adopted Flex to build the next generation of video experiences on Comcast.net. But as of this Jan 1, CIM officially has developer blogs (applauuaseeee). The Flash team’s blog is available at http://teamcim.comcast.net/team/flash. Stay tuned as we start talking about the Fan, which I think is one of the most complex Flex applications out there, as well as our in-house tools that we are going to release under open source.
Suggestions are welcome either as comments on this post or the one at Flash Team Blog
I am Tumbling …
A few months back I was introduced to something called Tumblr by Mat, a friend and fellow developer at Comcast Interactive Media. For the uninitiated, Tumblr is a microblogging platform, kind of like twitter except you aren’t posting what exactly you are doing but rather links, photos, videos etc with minimal to none commentary . Here is a how wikipedia defines Tumblelogging:
A tumblelog (or tlog) is a variation of a blog that favors short-form, mixed-media posts over the longer editorial posts frequently associated with blogging. Common post formats found on tumblelogs include links, photos, quotes, dialogues, and video. Unlike blogs, this format is frequently used to share the author’s creations, discoveries, or experiences without providing much (or any) commentary.
source: http://en.wikipedia.org/wiki/Tumblr
The first time I saw it, I didnt really care for it. My blog is a pretty good outlet for most of my thoughts and ideas. I love posting code and observations and seeing comment on the posts. I didnt really get microblogging at all. However, its something I have slipped into slowly and steadily in the last few months, starting with being a little more regular on Twitter and now Tumblr.
So what got me into Tumblr? Instant photo-posts from my iphone was one. Tumblr (at least the service at http://www.tumblr.com) gives you an email address to send photos to that instantly (or with some acceptable delay) get on your tumblelog. However now that I have started using it, I find posting quotes or excerpts and images from blogs/websites most interesting. None of these ever justified a complete blog post, but are definitely Tumble-worthy.
I havent seen Tumblr on any of the blogs I visit so I am not sure how many people use it, but its something I would recommend a try at least. Its fun ;).
Link: http://arpit.tumblr.com
Free Utility Class: ImageSlicer
I have been looking for a way to easily get bitmaps of segments of images for a while now but never really found anything. I needed this for example in my last Papervision3d example where I wanted to slice an image and use the slices individually as textures on different surfaces. Since I happened to have 14 free hours recently on my flight back from India and had gotten my hands on the airline charger for my macbook (thanks Sam and Pranav), I ended up writing this quick utility class. The class is really easy to use: all you have to do is create an instance of the class passing it the number of rows and columns to cut the image into. Then, calling the getSlice function passing it a row and column index returns the bitmap representing that segment of the image.
[AS]
var slicer:ImageSlicer= new ImageSlicer(image, 5,6);
var bmp:BitmapData = slicer.getSlice(1,1);
[/AS]
Note that any DisplayObject can be passed to this class, so you could just as easily slice a dynamically drawn Sprite or, in Flex, any UI component and then grab slices of it. This also has a lot of potential for creating interesting transitions or effects.
The class uses the ‘AS3 Data Structures For Game Developers’ package by Michael Baczynski, specifically the Array2 class (and the Collection interface it implements). The package is pretty impressive and something I plan on using a lot more in future projects that require complicated data structures. The Array2 class is fairly simple but really handy for representing 2 dimensional arrays (matrices).
An example of this class can be seen here. Use the first two text input fields to specify the number of rows and columns to slice the image into and the next two to grab any slice in that matrix. (You will have to explicitly click ‘Slice’ and then ‘Show’ separately). The source of the example can be seen here
Seamless panoramas powered by Papervision3D and Flickr
Continuing with my experiments with Papervision3D, today I was looking more into creating the Qucktime VR like panoramas. There are quite a number of well done panoramas but all of them require custom cropped images etc. What I really wanted to do was to just have them be generated off images in my Flickr account. Of course this is unrealistic a bit since the way panoramas work requires the two edges of the photo being viewed to merge seamlessly with each other. This way there is a sense of continuity. However, I took some ‘creative license’ and the result is below.
Creating Panoramas the right way:
There is an excellent tutorial on how to create simple Panoramas the right way here. The idea is simple. Create 6 photographs of a location and map each of them on the different planes of a cube. Then set a Free Camera in the middle of the cube and then use the mouseX/mouseY properties to change the camera’s rotation about the X and Y axis.
The direction I wanted to take was to load an image from Flickr and then chop it up into 4 equal sizes, and then use them as textures on my cube. I realized pretty early on that there was no way I could enable looking up/down since I couldnt take any part of the image as surfaces for those planes, so I restricted the motion to only the X-axis.
Loading an image from Flickr, taking bitmap snapshots at quarter intervals each only 1/4 of the width of the photo (thank you flickr.com/crossdomain.xml) for each surface and then mapping to the surfaces was really easy and I was pretty much done soon. It looked okay-ish but there was one big issue: As I mapped the images to planes 1,2,3 and 4 (left, front, right, back) successively, the edge between plane 4 and 1 killed the look since they did not merge seamlessly. I was about to shrug and walk away (after all this was just to get more familiar with P3D), when I had an idea. I was already taking snapshots of the images loaded in, it wouldnt be that hard to take another set of snapshots that were flipped on the Y axis (ie mirror images). Then, I mapped the original 4 pieces to just 2 planes (say left and front surfaces of the cube). The edge of the front plane then connected with its own mirror image, and the mirror images were mapped to the remaining 2 surfaces. This way there were no disjointed segments butting against each other.
[SWF]http://www.arpitonline.com/blog/swf/flickr/Main.swf, 500, 600 [/SWF]
I’ll make another post on my mirrored image generator next but in the meanwhile check it out and let me know what you think.
P.S: It took me another 30 minutes to fix a bug when I put the swf on my server, since Loaders dont check crossdomain.xml by default. Arghhh !
Adobe open-sources Remoting and Data Services !!
I am so excited, I better post this before I pass out ;). Christophe Coenraets just announced on his blog that Adobe just open sourced the Flash/Flex Remoting and Messaging services under the name BlazeDS. What does this mean? Well remember all those multi-user real-time applications that Adobe demoed selling their Flex Data Services? Well now you can build ’em for free (well, as long as you can host the app on some J2EE server).
Oh, and since AMF is a published spec now, Adobe can release the code for the Flex RPC packages (which I hope is part of the developer goodies Adobe has been promising for today).
CardStack: This aint no Coverflow
I finally got around to playing a bit with Papervision3D, the open source 3D library for Flash,today. I have to say its been a lot of fun and its surprisingly easy to use. I was looking for some interface that I could build using what I was learning. The ITunes Coverflow seemed a good place to start but considering how many implementations of that I am seeing on the web, I couldn’t really bring myself to write a new one. So I started monkeying around with camera motion etc and finally reached a point I was pretty happy with, at least for day one.
The idea behind CardStack was to recreate to some extent the real world shelf. When the user clicks on an element on the shelf, it moves out of the shelf and can be interacted with.
This is just my first stab at this and there will be a lot more changes before I pack it into any sort of code I can share with the community. At the very least I can put in keyboard navigation and some reflection to make it a little more interesting.
http://www.arpitonline.com/blog/swf/cardstack.swf
Please let me know if there is something I can add to this to give it a little more zing.
Adobe.com: Left anchored design is fashionable again?
By now pretty much everyone into adobe technologies knows the adobe.com site design changed today. Most of the blogs I have read have said it looks great and I do like the look for the most part. What I dont get is why the site is anchored to the left. There used to be a time when that was how sites looked, but that used to be mostly since most users were on 800×600 resolution so you designed your site to that width. In the new world where 1024px is the more standard width, forget the fact that most adobe product users are designers with much bigger and wider monitors, the left anchored design seems an interesting choice. Adobe’s previously launched XD site also had the content anchored to the left with user comments on the right. Maybe adobe.com will go that route too, recycling the white space for user comments or something?
Coming to a Flex App near you: 100,000 Videos
The Fan, Comcast Interactive Media’s Flex based video application, is soon about to reach a pretty big milestone: 100,000 video clips in the library. And while sites like YouTube may boast a much bigger library, the content on The Fan is all premium content from cable TV networks. So just for kicks, I took a couple of hours on Friday and built a quick blog badge to show the number of videos on the Fan right at any point.
http://www.arpitonline.com/blog/swf/fanbadge.swf
You can embed the badge by copy+paste-ing the following html:
[html]
http://www.arpitonline.com/blog/swf/fanbadge.swf
[/html]
Clicking on the play button will launch the Fan. Unfortunately the Fan is only Comcast High Speed Cable Internet subscribers so you will be prompted to log in.
As an application, big things are happening in the Fan using some unique Flex features. More on that on a later post. And of course my shameless plug: If you are interested in working on the Flex and Flash team for Comcast Interactive media drop me a line at mathur.arpit [at] gmail dot com.
Ice cube predicts demise of Flash !
This one is funny: I followed this link off of Ryan Stewart‘s blog to NewTeeVee with a video on Ice Cube promoting UVNTV, which is being advertised as an internet TV experience complete with a channel lineup etc built on Silverlight. I love it when Ice Cube basically forecasts the demise of Flash (‘Flash is outta here’): hey man, if he says it, it must be true ;). The interview later has them saying that they got a better video quality using the windows codecs but seeing some of the really cool high def video around even before the Moviestar release of the Flash Player kind of makes me doubt that. Anyway, the video is a fun watch if nothing else than to see celebrities talk about server-side code, CDNs and of course, Silverlight ;).
http://images.video.msn.com/flash/soapbox1_1.swf
Video: Ice Cube's UVNTV.com goes live with Microsoft Silverlight
How do you pass time on a 14 hour flight ?
So I am leaving for India in a couple of weeks to visit family and friends. Its always a fun trip and the time I am least connected with programming and all things on the web, which is a good thing since almost all the other times I am waaaay too into it. However the flight to and from is long, about 14 hours or so (and thanks to the Boeing 777s, direct without stops to refuel) and as you can imagine, really boring. So this year I want to ask the blogosphere: how the heck do I pass the time? Usually I code a bit till my battery runs out (3 hours) and then I unsuccessfully try to read a book or something. This year I am thinking I should maybe buy a PSP or something.
Anyone have any good ideas?
Code Zen 