Spark Path Sound Visualizer

Flex 4 SDK final is out. It’s time to update and post some early Flex 4 prototypes I’ve built with Beta 1 and 2 last year.

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:

Read the rest of this entry »

Some Degrafa Love

Here is a fun short piece I did last summer when Degrafa SuperShape came out:

Degrafa ShapeUp Music Viz

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

Closing the Flex SVG Loop

Here is how my Shapes and Strokes creation looks like in Flex SVG Explorer (second sample in the Load SVG File dropdown):

shapesandstrokessmall

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.

Degrafa SVG Painter

I’ve encountered a temporary roadblock in wiring up Object Handles with SVG Viewer API in Flex SVG Explorer to enable shape selections. Will work on it next week.

Degrafa SVG Painter (v. 0.1)

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

Degrafa SVG Painter 01

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:

Degrafa SVG Painter: SVG Code View

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.

From Day 1 of Flex SVG Explorer Dev and Research

I meant to post this yesterday, but ran out of time.

Flex SVG Explorer Preview

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

flexsvgexplorer01small

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.