How Complex Can You Get With Degrafa? Very.
So far, some of the examples of the drawing capabilities of Degrafa have been relatively simple in order to stress key concepts and features. We think it’s important that users of the framework are in no way limited in what they can create and as we progress with Degrafa we will try to put together complex examples of the capabilities when ever possible.
In this case we’ve taken an SVG from here and ported it over to Degrafa in under 1900 lines of MXML (minus some line breaks). Also, we added the ability to change the color of the tiger’s eyes just as a quick example of affecting the graphic dynamically. Here’s the sample:
Click here to open this example in a larger window.
Drawing with SVG Path Data
This tiger is drawn using shorthand path data that maps directly to SVG path data in that they are the same. However, you are not limited to that drawing method. The SVG path data for this example was copied and pasted into the Degrafa markup. Here’s an example of how one whisker is drawn, including Fills and Strokes:
Each shape is drawn as a Path and uses short hand markup for moveTo, cubicBezierTo and positioning. With this method you can create objects similar to the way SVGs are drawn and you can get very detailed. Once the objects are drawn, you are free to manipulate them as you see fit.
In the short term we’d like to integrate the ability for someone to create artwork in Illustrator, export it as an SVG, and then bring it right into Flex via Degrafa to leverage the benefits of having a dynamic graphic versus a static one.
July 31st, 2007 at 11:09 pm
very good..
where download source code??
August 24th, 2007 at 3:50 am
Is there something that can be downloaded to try it out.
September 6th, 2007 at 5:17 am
Hi,
a very nice example for degrafa would be something like http://www.interactivemaps.org/examples/drill_down/.
None of this can be done quite easily using flex right now.
Regards,
Leen
September 7th, 2007 at 10:55 pm
Leen,
That is something we have tried, and it’s quite easy in Flex with this type of framework. What we are trying to focus on right now is getting a first beta version complete. Once that is out, we’ll get back to really cool samples like you’ve linked to.
Thanks for your visit.
September 17th, 2007 at 8:07 pm
Hi
Any date for the beta release ?
September 26th, 2007 at 12:43 am
@ Stormpetrel,
We are hoping to have a beta release around the end of Oct. At that time we will contact you and ask if you would like to participate.
Cheers
Jason
October 1st, 2007 at 9:39 am
That’s looking awesome. Does this library happen to be part of the Aviary toolkit? Either that or some of their demos used the same tiger.
I’m looking for a way to use SVG data in an application I’m developing that allows users to create their own ‘composites,’ consisting of text, images, etc.
I’d love to test out the library when it’s available. Feel free to email me anytime if you have a need for testers.
October 1st, 2007 at 12:47 pm
@ Jon,
Degrafa is in no way related to Aviary. The tiger is the famous cubic curve test when reading complex svg path data.
Complex composition is part of what Degrafa has to offer. We’ll be in touch when the beta is ready.
October 30th, 2007 at 11:37 pm
Hi Jason
Any news about the beta ?
Cheers, Dominique
November 14th, 2007 at 3:05 am
wow great man but i want the source code to download and try it out
pls give it
December 29th, 2007 at 3:01 am
Hey, I can’t believe it. I’ve just found your site and this example is quite similar to something I’ve been working on. I’m a flash dev (more of a coder than a designer), I haven’t tried flex yet. I wrote an svg to actionscript convertor in php and have been using the svg tiger as a test case as well. I haven’t implemented everything in svg conversion yet, just the path commands and the styles – the tiger renders well. I think the difference is that my approach currently converts the cubic beziers to sequences of quadratic beziers etc, although all that is easily configurable. The broad scope of what you’re doing here seems impressive. I really need to give flex a try.
December 29th, 2007 at 11:08 am
@Greg,
Thanks for your visit.
Any rendering in Flash boils down to 3 essential commands moveTo, lineTo and curveTo. That’s it. That is all we have. So although we allow a Cubic Bézier to be specified; underneath deep in the bowls of the framework we split it into curveTo commands. A curveTo is in essence a Quadratic Bézier curve i.e. a start point, a control point and an end point. Everything rendered is broken down into these 3 commands. The goal overall for us is to hide the complexities from the end user and make available things they could not easily do otherwise.
Contact one of us via the team section if you interested in being part of this effort.
cheers
jason
January 18th, 2008 at 12:56 am
cool stuff.
I wanna do experiment with it. can u provide the source code?
January 18th, 2008 at 1:48 am
@VINAY
http://code.google.com/p/degrafa/
cheers
-jason
March 5th, 2008 at 5:25 pm
Following up from my earlier post, I finally had a chance to download and install the flex builder trial and play with it today.
I have an svg translator that is targeted towards actionscript and had a quick shot at implementing some degrafa mxml output, based on what little I understand of how flex works. I had a look at the tiger example mxml above and some other snippets from the degrafa samples.. the definitions – fills & strokes etc – seemed to be centralized in other examples so that’s what I did.
I got the tiger translating fully automated to degrafa markup. There’s an example here (the only thing I changed was the Surface’s verticalCenter and HorizontalCenter attributes (by instinct, lol). Those were the only changes I had to make after the paste into Flexbuilder. I even figured out to make view source work! (but not how to switch off debugging when publishing I think)
http://linearticulator.com/files/linearticulator/degrafademo/degrafaTest.html
That example has all the cubic beziers downconverted to quadratics. Which is obviously not necessary with degrafa…so I will make that an option.
I see you guys are working on an AIR version which is great, I’m not seeking to compete directly with that, I am hoping to implement degrafa output as one of a number of options for different code format outputs – you can see some actionscript2 animations generated from svg sources at the home page of the linearticulator.com site. I’d be keen to talk to someone on the core team about a few things…things that I can do correctly when I output actionscript code but can’t see how to do in degrafa markup. e.g. skew transforms on gradients. (I see Transform is listed as ‘coming soon’ so perhaps that’s the reason although I may have overlooked something too!)
August 11th, 2008 at 10:44 pm
cool work man!
August 18th, 2008 at 3:08 am
Hi,
I didn’t find any answer PPAI’s question. Could one download the flex source code inclusive zoom option of the tige example?(http://www.degrafa.com/wp-content/source/swf/EyeOfTheTiger.swf)
October 26th, 2008 at 12:02 am
Hi,
It is really very nice . I did a similar example here
http://subeesh.wordpress.com/2008/10/25/butterfly-in-flex-degrafa/