Here is a simple Spark Path Sound Visualizer I put together to check out new Spark Path primitive:

Spark Path Sound Visualizer

spark.primitives.Path graphic element was introduced in Flex 4 as part of new FXG and MXML graphics components for displaying vector-based graphics.

Spark Path is a handy view primitive for drawing shapes, maps, charts, or sound visualizations as in this example. Although, I do wish it exposed its PathSegmentsCollection and PathSegment types for manipulating path data dynamically via ActionScript. More on this after the fold:

The only workaround I found for updating Path segments without assigning data string property and string parsing on every frame was by updating mx_internal graphicsPath variable directly. GraphicsPath performs all the drawing operations for this new Spark Path component, and this approach seems to work, but I am not a big fan or supporter of the custom little known mx_internal namespace interface.

Besides, I am still scratching my head why the whole spark.primitives.pathSegments package with all the path segment types was scraped after Flex SDK Beta 1 and folded into spark.primitives.Path component with private access to the segments collection and now inner PathSegment type classes. Since Flex SDK is open source, you can view current spark.primitives.Path code here.

I think it would be very useful to have direct access to the Path segments collection via ActionScript and be able to create Path segments on the fly for dynamic drawing applications. If you feel the same way, please vote for this feature in the next Flex 4 SDK patch/update release here: http://bugs.adobe.com/jira/browse/SDK-25843

You can view and download updated Spark Path Sound Visualizer demo code with the mx_internal graphicsPath solution here.

The original version built with Flex 4 SDK Beta 1 can be found here. It’s messy, but you should be able to grasp the difference.

Related Posts

• No Related Post

Degrafa ShapeUp Music Viz

You can view all 100 lines of code that make those shapes pulse here.

Related Posts

• From Day 1 of Flex SVG Explorer Dev and Research
• Flex Music Player Example
• 2008 Presidential Candidates Campaign Finances

Obviously some strokes got lost in translation there, but I am still very happy with the outcome considering my initial goals for the two prototypes.

What does it all mean?

Basically, it means that by using two different Flex SVG libraries (SVG Viewer API and Degrafa) I’ve closed the full cycle SVG manipulation loop in Flex:

1) Create new SVG-based graphic with Degrafa SVG Painter and export it to SVG markup;

2) Load the created SVG document in Flex SVG Explorer using SVG Viewer API for further inspection and manipulation.

Now I can take a little breather, wait for the two libraries to improve, and slowly work on adding shape templates, object handles and other tools for creating and editing of SVG graphics in Flex.

Perhaps I should combine the two tools into one, or just wait till SVG to Degrafa converter and API comes out. Then I could just stick with Degrafa for loading and manipulating SVG. Some utility classes or toString methods to get SVG element markup of Degrafa objects would be nice too . Maybe I’ve missed it in the current codebase.

Related Posts

• Degrafa SVG Painter
• From Day 1 of Flex SVG Explorer Dev and Research

Degrafa SVG Painter (v. 0.1)

Here is another Flex SVG application I started this week: Degrafa SVG Painter.

It’s very basic and a little slow for creating sophisticated drawings, but I was able to create the painting above.

I call this one “Shapes and Strokes” :)

SVG Code View

Besides the main Paint Canvas, there is also an SVG code view in Degrafa Painter that displays the resulting SVG drawing code you can save for later use in other SVG tools:

Click on the screenshots above to see the first rev. of Degrafa SVG Painter.

Source Code Details

This one is obviously done with Degrafa, demoing its dynamic drawing features.

The main Canvas uses the Surface UI component, but the Stroke Preview, Line Cap and Line Join buttons in the stroke control bar are done with the lightweight GeometryComposition object.

That gorgeous Photoshop Express-like UI theme is called Kingnare, created by Jin Xin.

Related Posts

• Closing the Flex SVG Loop

Flex SVG Explorer Preview

Here is a preview of Flex SVG Explorer I started the other day:

I’ve decided to start this personal Flex project to explore available SVG import/export options and related APIs in Flex.

The idea came to me after checking out some SVG designer tools like InkSpace, Amaya, and Sketsa and finding out that people still think SVG can’t be loaded into a Flex app and made interactive since the stock SWFLoader does not support SVG animation, scripting, or interactivity with the imported SVG image graphics.

Current and Planned Flex SVG Explorer Features

The current version doesn’t not have much to offer yet, but that depends on what you expect to see from one day of work.

I’ve layed out the main canvas with a zoom slider, added SVG text display, and created a toolbox section with SVG document tree and tabs for future property display and editing options. All in one day of work. There is no SVG file upload or url box yet, but you can preview sample graphics by selecting them from the combo box in the Toolbox.

Eventually, I’d like to fill the Toolbox with some SVG document display options, like referenced images, links, SVG element usage statistics, styles and attributes editor grids, but you should see the general direction there already. I am also planning to add SVG markup code highlighting.

Currently, I am working on getting shape selections done. Once that is in a lot of editing and painting options will be available to create new SVG graphics or edit existing ones.

Flex SVG Explorer UI Theme

I picked the Undefined Flex UI Theme from scalenine.com theme gallery, although it’s just a temporary theme before I find time to create a unique look and feel and Flex SVG logo.

Sample SVG Graphics

The sample SVG graphics are from openclipart.com.

SVG Loading API

Well, turns out you can load SVG files and make them interactive with SVG Viewer, and no, I am not talking about Adobe SVG Viewer IE plugin this time.

SVG Viewer API from com.zavoo.labs just got moved to Google code in December. This library is a jewel find that fills the existing gap of loading SVG graphics in Flex and interacting with the loaded graphics elements. Until the rumored SVG to Degrafa  Converter tool and hopefully some converter API comes out, I don’t think there is a better choice for loading SVG graphics in Flex, if you are looking to do more than just display a static image.

Jamming SVG with Flex?

Now, I’d love to sign up for a conference to do a session on “Jamming SVG with Flex” and present some of my experiments with Degrafa, SVG Viewer API, SVG-based painting in Flex, along with practical data visualization components using Blank SVG maps of the world and Away3D to push an envelope on SVG usage in Flex and truly scalable GeoWeb.

Anyone interested?

My preference would be FITC conference in Chicago, but I am open to other conference suggestions and locations, if they cover the travel and stay cost.

Related Posts

• Some Degrafa Love
• Closing the Flex SVG Loop
• Back to SVG and a cup of Java ME
• Some cool 3D stuff and Degrafa Maps coming soon
• 2008 Presidential Candidates Campaign Finances

Turns out SVG Tiny is the only standard that is supported by most mobile phones to do any decent UI design work for mobile devices. By now all major browsers including WebKit and the clones with their mobile versions support SVG, which is a good choice for mobile devices due to the varying screen sizes, limited bandwidth and memory.

So, I’ve decided to get back to SVG and a cup of Java ME, even though I am still planning to do some Flex dev work.

To refresh my memory on how things work in SVG and speed up UI design I’ll be using Flex with some open source SVG frameworks for prototyping since I am very comfortable in this development environment. Besides, Java ME graphics api is not much different from the core Flash graphics api and should be easy to port to.

After a brief time of setting up my new mobile Java dev. environment, checking out all the emulators, and getting some code moving things, I can tell that I have not missed much in 5 years as far as Java and SVG goes.

A few years ago, I’ve built a full-blown data visualization library in SVG for a corporate portal dashboard solution. This was done back in the days when not many folks knew about SVG, Adobe just released and still supported their IE SVG Viewer browser plugin, and Java portals, XML and XSL were the hottest technologies to use for web apps.

Many things have changed in web application development over the years. Open-source software, virtualization, cloud computing, mobile web, REST, and component-based frameworks are the new norm now.

It’s good to finally see SVG gaining momentum and becoming a standard that is supported and used in web applications and on mobile devices. I think slowly but surely SVG will replace raster images for most web graphics and mobile app UI design needs, as well as enable true scalable GeoWeb that’s beyond raster image tiles backbone.

Expect more posts on Flex, SVG, GeoWeb and mobile Java from now on.

In the meantime, here is a quick Degrafa Tetris game (with source) I hacked last weekend for fun. I came across Mozilla SVG Tetris and just could not resist the temptation.  Tetris running in MS-DOS on UKNC was the first computer game I’ve played back in 1988. And yes, I know Turbo Pascal too, in case you wonder. It was the first programming language most Soviet Computer Science students mastered back then.

Look where we are now.

Related Posts

• From Day 1 of Flex SVG Explorer Dev and Research
• Some cool 3D stuff and Degrafa Maps coming soon
• Flick Flip Book Light
• Interactive BitmapData Perlin Noise Explorer
• Noise Test

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.

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.

Related Posts

• Some cool 3D stuff and Degrafa Maps coming soon

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.

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

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.

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.

Related Posts

• Flickorama update
• Flickorama – OpenFlux PlexiGlass Flickr Mashup
• Flex 3D Degrafa Earth Globe with 2D World Map Plane
• From Day 1 of Flex SVG Explorer Dev and Research
• Back to SVG and a cup of Java ME

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.

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.

Related Posts

• No Related Post

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:

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;
            }

Related Posts

• Flex Music Player Example
• Simple Flex Music Player