29 April 2008
Summer in Silicon Valley
Categories:
360 Flex
I will be speaking at the 360|Flex conference coming this summer to San Jose, CA - Aug 17-20, 2008. My topic is entitled: "High Definition and Flex - Hands On" - This session covers the tools and workflows you need to produce and stream great HD video in the Flash player and Flex. Topics will include a hands-on look at cameras and lighting, recording formats, and pitfalls when working with high definition footage. Also see Flash Media Server 3 in action, and how to exploit it's H.264 streaming in Flex. Finally, get a look at how to leverage tools like Adobe After Effects to add cool Flex friendly effects, and the best compression encoder settings for producing super lightweight HD files.
This will be my first time in San Jose, so it should be an experience. Register here if you would like to attend THE BEST Flex conference in the world. Hope to see everyone there.
-Christopher Keeler
25 April 2008
drawing and skinning with Degrafa
Categories:
Degrafa
Flex
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
