Flex Jukebox using Degrafa
drawing and skinning with Degrafa
So recently I finished a project creating a music jukebox for a touchscreen and I used Flex to build it since most of the code snippets for the functionality were freely available throughout the web. When the task of skinning the player came up, I turned to this new open source project that I had heard about at 360|Flex conference in Atlanta called Degrafa. So what is Degrafa? It basically allows you to draw within the Flex environment using MXML tags and is a lot easier (and much less code) than using the graphics library (i.e. moveTo, lineTo) in Actionscript. In my jukebox example source code, I use these two different approaches and you can actually see the difference in the amount of code. I used Degrafa to skin all the buttons and the volume slider, and the Actionscript graphics library is used in the carousel tooltips. The button skinning was in fact the easiest part of Degrafa, and made the whole process really smooth and simple to understand. Adding some great color fade effects like the Animated Color effect written by Darron Schall, which is posted in the Degrafa samples are really easy implement with Degrafa as well. Another really cool part about Degrafa is that it can read SVG path data to draw complex shapes. So you may be asking yourself, "What the heck is SVG path data, and how do I make it?" Well, I asked that same question when Juan Sanchez from the Degrafa team told me the same thing. It goes like this: Say you have a complex shape like a logo that you want to use in the project, (like the Dattoli logo in the jukebox) but you don't want to mess with a bitmap image due to scaling, alpha, whatever. What you can do is import the logo into a vector program like Adobe Illustrator, move it to the top left corner of the document, and use the Trace Outlines command. Illustrator will automatically create vector paths for each shape within the logo. Next you just Save As and select SVG as the file type, when you click Save another dialog box come up and Illustrator has a "Show SVG Code" button. Click this, and tada...Instant SVG code for your logo! Just cut and paste the "data" string into a Degrafa Polygon and Flex will draw this vector shape. Cool. Need to colorize it on fly? No problem, just apply a few fill color dynamically in Flex, and it all just works. Overall, a lot of hard work and some really smart people are involved with this open source project, so you should check it out at http://www.degrafa.com and give it a try. As for the music jukebox project, I have posted a sample and the source code if anyone is interested in looking at the techniques used. Thanks goes out to Ben Stucki for creating the bad ass ID3 reader component, and Lars van Meurs for creating the carousel component, which I modified somewhat from his original code.
-Christopher Keeler
You are not logged in, so your subscription status for this entry is unknown. You can
login or register here.
