Degrafa: Declarative Graphics Framework

Degrafa Blog

Get Degrafa Now

Posts Tagged ‘graphics’

Lights, Camera, Action: VideoFill

Sunday, November 1st, 2009

Greg Dove, a Degrafa core team member, and the creator of Degrafa’s VectorFill, has broken new ground with another new Degrafa paint object, VideoFill.

There have been a couple of sneak previews of VideoFill over the past few months; Juan showed a quick preview at 360|Flex earlier this year and Greg showed a quick demo at FlashCamp in New Zealand as recently as September. Well, no more ’sneaks’ (apart from this one!), it’s finally going to be available from beta 3.2.

You won’t believe all the things you can do with this, suffice to say that it makes some video effects that could be difficult to achieve – even in the Flash authoring tool – very easy to code in Flex with Degrafa.

To be honest, we don’t know what you will do with VideoFill. We can see it being used in creating custom players for specific video content or for specific vector/clipping effects for video -this is quite practical and quick to do with VideoFill. And yes…it can be used for skinning if absolutely required (’absolutely’? yeah we can’t think of when that would be either….but hey, we’ll let someone else tell you not to do it!).

A screen capture from the Avatar trailer being used as a VideoFill

A screen capture from the Avatar trailer being used as a VideoFill

Under the hood, to make VideoFill work, a complete new custom video player class was written from the ground up, designed for the purpose of supporting the way that VideoFill does its magic internally within Degrafa. VideoFill does require data access permission to work with the bitmapData of the video, but that is quite straightforward if you load from a domain under your control. It handles both progressive download video and also has support for rtmp streaming video content. Greg is also planning to add in support for the Camera object to round things out in terms of capabilities/support so that it’s easy to add live webcam content as a fill.

Back in the realm of regular paint classes in Degrafa, VideoFill is an ITransformablePaint object, which means you can spin, skew, scale and move a VideoFilll inside its target Geometry object using Degrafa’s Transforms…all while the video is happily playing! Watch out for more VideoFill information and tutorials after additional exciting beta 3.2 announcements in the coming days. We’ll add an official VideoFill sample to the Degrafa samples page as soon as beta 3.2 is released…for now you can whet your appetite on this one.

Randomly Generated Art

Monday, February 11th, 2008

Degrafa RGA

The other day I came across Chad Udell’s post about his KulerCreator and it got me thinking. Degrafa could easily be used to create random generated art, especially since so many of the Degrafa object properties are bindable. I grabbed Tweener (which I had never used before) and applied it to a few different shapes and their properties.

I used two circles and set tweens on their size dimensions, as well as some of the gradient fill properties, which creates some interesting effects. There’s a polygon in there and I set tweens to each one of it’s four points. Finally, I threw a bird shape in there drawn with SVG path data. It took no time at all to put this together and the results are interesting. Most importantly, it was easy and was done using MXML markup.

Things could get really interesting with some physics, random colors, filters, easing, etc.

See the results

Creating Skins with Degrafa

Thursday, July 12th, 2007

Degrafa not only gives you the ability to draw graphical shapes and objects, but it also allows you to use anything you can create with it as a skin for any component in Flex. Here’s is a simple example of a Button using graphics drawn with Degrafa as skins:

Like the basic shape example, these skins are comprised of shapes, fills and strokes. The only difference is that separate MXML files have been created for the different skin states of the Button. For example, the code for the UpSkin.mxml file used in this example looks like this (not including MXML for Fills and Strokes):




    

    

     

    



After a skin is created for each Button state we can assign the skins to a Button inside an Application just like any other skin, like this:




This simple example offers a small glimpse at what is possible and as the framework continues to grow, skinning will definitely be one of our focuses.