Archive for January, 2009

Flex 3D Degrafa Earth Globe with 2D World Map Plane

That Degrafa Globe sparkled some interest from the Degrafa community, so I’ve decided to make quick updates the other day:

1) country regions are now interactive on the globe, just mouse over a country;

2) select a country with a mouse click;

3) there is a new 2D source world map plane with a slight X-axis rotation;

4) new map color scheme with different strokes and fill colors for the up, down and selected country states;

5) country tooltips display was added too, although it’s in French;

Click on the screenshot below to see it in action.

flex3ddegrafaglobesmall

V.2 will see some Away3D HoverCamera action to orbit the globe on mouse move and clicks, English tooltips for countries with ISO 3166 2-letter country code for region ids, and hopefully some open-source Degrafa world map and globe code to share.

Some cool 3D stuff and Degrafa Maps coming soon

I am going to put my multimedia experiments and updates to media players and flickr mashups on hold to repackage and publish some really cool 3D stuff and interactive maps I’ve done with OpenFlux, Away3d Tweener, and Degrafa.

randomthumb

Flickorama 3D Update and Camera Work

Inspired by the PlexiGlass (OpenFlux 3D) example that opened easy to use Element Flow-like capabilities to Flex applications, I created Flickorama mashup last year to explore public photos from Flickr.

You can read about it in my outdated by now Flickorama update post or see an independent Flickorama review by Eric Miraglia on his Impressive Pixel blog.

A lot has changed in Flickorama since then. The added camera work with pan, tilt and zoom features provided by the tucked in Away3D engine, along with the added keyboard navigation make it a breeze now to flip through a stack of photos. I also added new Random view layout option and integrated my Flickr Flipbook, but that deserves a separate post.

Random3DView Demo and List3D

The only reason I am rambling about those updates because while digging through openflux plexiglass trunk code I’ve tried different layouts and cameras, ended up adding a couple of my own and making some tweaks to existing cameras and layouts for improved interaction and user experience.random3dviewthumb

Now, I have not seen any updates to the openflux library recently, and I am not sure about openflux roadmap or future development work, although I really like the separation of model, view, layout and 3D perspective that this library provides.

However, if you have an application that requires similar 3D list view display, I created a Random3DView demo that demonstrates the setup behind Flickorama 3D photo viewer. You can view Random3DView source code and the resulting camera and layout work in the updated Flickorama 3D mashup.

While working on Random3DView I realized that there must be many applications that could benefit from a simple List3D view component that taps into Away3d capabilities with OpenFlux Plexiglass or some other MVC framework overlayed, yet hidden and nicely encapsulated for simple List 3D data binding and rendering.

So, I’ve decided to do some refactoring on my Random3DView code and see if I can create a reusable List3D component that will make it very easy for anyone to put together a Flex application like Flickorama, backed by the powerful Away3D engine with some Tweener animation and different layouts, in minutes. Stay tuned for updates.

Degrafa Maps and Globe

degrafamapthumb

Some Degrafa world maps in various projections and mapping to 3D globe with Flex 3D are coming in the next few weeks too.

You can see some early demos of my Degrafa maps here. Some nights and weekends were spent on converting blank SVG maps of the world to make those interactive maps with selectable regions and countries in Flex. I am currently rethinking how those maps are configured and loaded.

You can see a production version of my Degrafa mapping technology used in a Beer Hunter application on destinationbeer.com.

Degrafa Globe alpha

This Flex 3D Earth demo and my poking in Away3D lately gave me some ideas on creating a rotating Degrafa Globe that I am planning to enable and get it to work with my degrafa map, zoom in, tooltips and all the 3d camera rotation and tilt effects.

So, check back for some demos and new open source List3D and Map3D components soon.

Simple Flex Video Player

Since I am on the media playa’ streak this week, I figured I might as well clean up and publish my Simple Flex Video Player.

It’s been sitting in my lab for a few months now (Hint: check out my right side bar links). I just did not have the time lately to polish and publish it.

This Video Player Flex component has similar look and feel of my Flex Music player and wraps the VideoDisplay control with some video resize and skinning options.

Here is a sample “Little Toy Gun” video by Honey Honey. Click on the video screenshot to play it. Drag the slider thumb to seek video.

littletoygun

The video player skin and resize controls are located in the bottom right corner.

It’s amazing how simple it is to add some quick and yet visually appealing animation effects with Tweener. I am also looking forward to find some free time to check out and compare Tweener with Grant Skinner’s new GTween library.

If you like that default Shadow UI skin I’ve used for this player, you can download it from scalenine.com

Source Code and Example

You can view VideoPlayer component source and download it for further customizations. Feel free to use it in your Flex applications as long as you give me some credit for the grunt UI work and all the video playback wiring.

BTW, those are original icons I’ve designed with Microangelo. I find pixel plugging exercise very relaxing in the late hours :)

Here is an example of how to embed my Video Player component in your Flex application:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 	xmlns:rf="com.randomFractals.media.controls.*"
 	layout="vertical"	
	width="100%" height="100%"  
	color="#FFFFFF">
 
	<mx:Style source="/assets/skins/shadow.css" />
 
	<mx:VBox>
		<rf:VideoPlayer id="player" autoPlay="true" 
			url="video/Honey_Honey_-_Little_Toy_Gun.flv" />				
	</mx:VBox>
 
</mx:Application>

Just upload your sample video and give Video Player an flv url for video playback. That’s it!

I have not looked into live streaming for this one. So, no guarantees there, but do let me know if you try it.

YouTube’s Chromeless Video Player and Data API hook up is the next good step for this player to search and play some vids. I’ll probably wire it to YouTube in v.2.

For now you can embed your vids or load them from your server.

And, yes. You can follow me on Twitter. If you watched the whole video and use Twitter you’ll get the joke.

Flex MusicPlayer v.2 with MusicVisualizer

I fixed some bugs and added new features to my Flex Music Player example.

New Features

  1. - View Modes: Normal and Large. I plan to add Full Screen in v.3.
  2. – Skins menu with Obsidian and Jukebox player skins as a follow up example to my previous Flex application CSS skinning post
  3. - MusicVisualizer container component that you can use with or without my Music Player control
  4. - Alternative SmoothSpectrum visualization created by Thibault Imbert

MusicPlayer v.2 with MusicVisualizer

Here is Flex Music Player v.2 with Jukebox UI skin in Large view mode with Music Visualizer set to Smooth Spectrum, playing 15 Step:

flexmusicplayer2

Interacting with Music Visualizations

Click on the visualization to swap it.

Move your mouse over music visualization to change colors.

You can also change MusicPlayer’s mini visualization in the bottom left corner to alternate between wave, line and bars. This one is from Ben Stucki.

The skin swap and view mode toggle buttons are located in the bottom right corner of the Music Player.

Source Code Updates

View source and let me know if you run into problems or what new features you’d like to see added in v.3.

I refactored the original Visualizr and Smooth Spectrum code to tweak them for my needs and converted them to custom UIComponents for easy inclusion in Flex mxml views.

You can grab them individually or use my Music Visualizer component (com.randomFractals.media.controls.MusicVisualizer).

I also cleaned up my music player code (com.randomFractals.media.controls.MusicPlayer) and added comments.

Usage Example

Here is an example of embedding MusicVisualizer and MusicPlayer in your application:

<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns:rf="com.randomFractals.media.controls.*"	
	width="100%" height="100%" 
	color="#FFFFFF" backgroundAlpha="0"  
	horizontalAlign="center" 
	verticalAlign="middle" 
	creationComplete="initPlayer(event);">
<!-- 
... action script code from below...
-->
    <mx:VBox id="musicBox"
        verticalGap="0"   
        horizontalAlign="center"
        verticalAlign="middle">
 
     <rf:MusicVisualizer id="musicVis"  
         width="{musicPlayer.width}" height="400"
         backgroundColor="#212121" />
 
     <rf:MusicPlayer id="musicPlayer"
resize="{musicVis.height = (musicPlayer.width - musicPlayer.width/3)}" 
         width="422" height="110" autoPlay="true" />
 
    </mx:VBox>

The AS code to initialize MusicPlayer and  load sample tracks is very simple, thanks to the Playr control library:

            
            import com.nocreativity.playr.*;
 
            private var playList:PlaylistManager;
 
            private function initPlayer(event:Event):void
            {
                // create a sample playlist
                playList = new PlaylistManager();
 
                // add sample tracks
                playList.addTrack(
                    createTrack('Radiohead',
                        'In Rainbows',
                        '15 Step',
                        'assets/music/15_Step.mp3', 228) );
 
                // add more tracks here
 
                // load playlist
                musicPlayer.playlist = playList;
            }
 
            private function createTrack(artist:String, album:String,
                title:String, file:String, seconds:uint):PlayrTrack
            {
                var track:PlayrTrack = new PlayrTrack();
                track.artist = artist;
                track.album = album;
                track.title = title;
                track.file = file;
                track.totalSeconds = seconds;
                return track;
            }

Treemap History

treemapsBen Shneiderman’s Treemaps for space-constrained visualization of hierarchies is probably the most comprehensive catalog of treemap usage in desktop applications and on the web, with some historical notes how the notion of treemap came about and evolved over the years.

Circular treemaps are my favorite. I think they are perfect for visualizing people from your social web circle.

Would not it be much easier to explore your LinkedIn connections and their connections with this treemap, rather than sift through paginated lists?

I expect an increased usage of treemap visualizations in the coming years as we pile up more data, form connections, use online services for sharing, and service providers open up their apis for developers to foster social web innovation beyond the basic tagging features, paginated lists, image galleries and strips.