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

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

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

If you are still looking for one, see my new Flex Music Player:

I added support for multiple tracks with the Prev./Next track buttons and a couple of sample tracks, enabled track scrubbing (just click on the track), replaced the playback component with the Playr, and added the music Visualizr from Ronny Welter. View source is enabled on this one, although it’s a little messy, but should give you a good head start.

I am planning to do a more extensive example with playlist management provided by the Playr, cleaned-up source code, and a sample of pulling music from last.fm soon.

Related Posts

• Some Degrafa Love
• Flex MusicPlayer v.2 with MusicVisualizer
• Simple Flex Music Player

(Click on the visualization to change color channels)

Doesn’t it look like a crowd dancing in the club? Well, close enough. Here is the real deal:

Related Posts

• Interactive BitmapData Perlin Noise Explorer
• Treemap History
• Another hit…
• Noise Test
• Simple Flex Music Player

While I am looking for a new gig, I’ll try to revive this blog by remixing and publishing some old toys I’ve prototyped to get my Flex chops together.

Here is the one that did not make the cut for that internal AIR Flair presentation. I had to play that jungle Bamboo Banga beat in WMP11.

(Click on the image to play and download sample code)

That’s my take on simple mp3 player in Flex. Click on that visualization to see some bars jump.

Most of the heavy lifting is done by the components from the flex community listed below.

Under the hood:

Obsidian Flex UI skin from scalenine.com gallery to give this player some polished look and feel.

nl.fxc.controls.MP3Player.as class from labs.flexcoders.nl for the audio playback control with minor changes to expose some properties and events to the main view controls. Why reinvent the wheel :)

Music Visualization is provided by the excellent Audio Visualization component by Ben Stucki.

I created the main mxml view, layout and custom icons. All in all about two pages of code and a couple of days to prototype it and publish.

Now, this music player is intentionally very basic and only plays one sample.mp3 track from the /assets/music folder.

If you are looking for a more versatile Flex music player that’s scriptable and supports playlists, I’d suggest you grab the latest Flex xml mp3 player which is an excellent port of the well known XSPF Web Music Player to Flex.

Related Posts

• Flex MusicPlayer v.2 with MusicVisualizer
• Flex Music Player Example
• Perlin Noise Music Vis