How Complex Can You Get With Degrafa? Very.

Jul 27, 2007

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:

<Geometry:Path
data="M-118.774 81.262C-118.774 81.262 -119.323 83.078
-120.092 82.779C-120.86 82.481 -119.977 31.675 -140.043
26.801C-140.043 26.801 -120.82 25.937 -118.774 81.262z">
	<Geometry:Fill>
		<SolidFill color="#ffffff"/>
	</Geometry:Fill>
	<Geometry:Stroke>
		<SolidStroke alpha=".25" color="#000000"/>
	</Geometry:Stroke>
</Geometry:Path>

<Geometry:Path
data="M-91.284 123.59C-91.284 123.59 -89.648 124.55
-90.118 125.227C-90.589 125.904 -139.763 113.102
-149.218 131.459C-149.218 131.459 -145.539 112.572
-91.284 123.59z">
	<Geometry:Fill>
		<SolidFill color="#ffffff"/>
	</Geometry:Fill>
	<Geometry:Stroke>
		<SolidStroke alpha=".25" color="#000000"/>
	</Geometry:Stroke>
</Geometry:Path>

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.

15 Comments, Comment or Ping

kan

very good..
where download source code??

Jul 31st, 2007
ppai

Is there something that can be downloaded to try it out.

Aug 24th, 2007
Leen Toelen

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

Sep 6th, 2007
jason

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.

Sep 7th, 2007
Stormpetrel

Hi

Any date for the beta release ?

Sep 17th, 2007
jason

@ 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

Sep 26th, 2007
Jon

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.

Oct 1st, 2007
jason

@ 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.

Oct 1st, 2007
Dominique

Hi Jason

Any news about the beta ?

Cheers, Dominique

Oct 30th, 2007
sagar

wow great man but i want the source code to download and try it out
pls give it

Nov 14th, 2007
Greg

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.

Dec 29th, 2007
jason

@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

Dec 29th, 2007
vinay

cool stuff.
I wanna do experiment with it. can u provide the source code?

Jan 18th, 2008
jason

@VINAY

http://code.google.com/p/degrafa/

cheers

-jason

Jan 18th, 2008
Greg Dove

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!)

Mar 5th, 2008

degrafa