Last post, I covered a quick overview of where VideoFill came from and why I ended up creating it. This post focuses more on what VideoFill is and what it can do - again at an overview/descriptive level (the next post will start focusing on some working examples, and code, I promise!). Experienced Degrafa/Flex users will find this post covers things at a very basic level. People new to Degrafa should find it easy to understand (at least in concept).

What are the key classes?

There are two main classes that need to be used to get VideoFill working: VideoFill and VideoStream. VideoStream is the "player" class that provides video content to one or more VideoFills and VideoFill is the actual fill type that is used like a regular Degrafa fill.

Attaching a VideoFill to a Geometry to be filled

VideoFill is a Degrafa paint object (just like a Degrafa SolidFill or LinearGradientFill, etc.) which means that if you are using it in mxml, you simply define it in markup for use - as a nested tag like so:

In this example, the RoundedRectangle tag could be any Geometry item (a Geometry object is basically any Degrafa "shape" definition object like a rectangle, circle, polygon, path etc.).

Alternatively, you simply reference it via its id property if the VideoFill tag itself is not nested. For example, when you're using a VideoFill that was defined eslewhere in mxml and the same fill is being shared for use in one or more other Geometry objects, you would do it like:

So, one example of re-using the earlier defined VideoFill might be like this:

Defining a VideoFill instance

VideoFill has similar properties to other Degrafa fill types such as LinearGradientFill or VectorFill etc. Of note are the following:

• coordinateType - one of "absolute","relative","ratio"
• x,y, width and height (values have different meanings for different coordinateType )
• targetSetting - one of "none","matchTargetBounds","matchTargetBoundsMaintainAspectRatio","centerToTarget"
• repeatX,repeatY - one of "none","repeat" or "stretch"
• transform - an optional Degrafa transform
• alpha - an alpha setting to apply to the fill (may have performance implications if over-used)
• insetAgainstStroke - whether or not to inset the video fill by half the target"s stroke width

There are other properties, but these are the main ones. Some of these settings cause other settings to be ignored, others work together to create different results. Some also work with slightly different "rules" compared to their equivalent in other fill classes (such as repeatX and repeatY). I"ll go into more detail about these as I work through a series of examples over the coming days.

VideoStream as a source

VideoFill needs a VideoStream source to work. A VideoStream is the source of the visual content displayed in a VideoFill and is the class that handles the loading or streaming of the external video content.

One VideoStream can "supply" visual content as a source to many different VideoFills (each of which can have  different settings that result in the fill being treated differently compared to other VideoFill instances that are using the same VideoStream for their content).

VideoStream is a class that encapsulates the connection to external video content locations and the streaming of video content itself. It then also makes the content available to Degrafa in a form that VideoFill can use as a fill. As you would expect, a VideoStream has a bunch of videoplayer-like properties and methods, some of which are listed below:

• url - the location of the video content
• loadingLocation (a LoadingLocation handles crossdomain permissions and is a way of making urls relative to a specific location, which could be a streaming video application or assets hosted on a foreign domain).
• playheadTime - the time-based position in the video content
• pixelMargin - the pixel padding to insert around the video content (this can be used for spacing when the fill is repeated and is required under some circumstances to prevent color bleeding at the edge of the video content
• debugMode - whether to show error messages in the fill or not
• forceUpdates - whether to force content propertyChange events for every update of the video frame: causes the degrafa composition to redraw each frame (not normally needed)
• bytesLoaded and bytesTotal - loading progress for progressive (http) video content
• muted - whether the player has audio muted or not
• autoPlay - whether playing starts automatically
• autoLoop - whether playing repeats after a video has reached the end
• volume - audio volume
• detectLetterBox - whether or not to attempt to detect the content as an internal Rectangle within the video. There are related properties and events if this is enabled.

VideoStream has a whole bunch of events which make it easy to use with mxml binding to hook it up to regular flex components and get it working quickly with controls and the expected player control methods like play(), pause(), rewind().

The properties like playheadTime or volume are able to be hooked up via binding to something like an HSlider in Flex, so it"s easy to make your video content have player controls. In the next post, I"ll cover off a sample application for VideoFill showing how to hook things up to basic player controls and start looking at how the various options on VideoFill give you different fill effects.