Pimp your Flex app using WSBackgroundPixelSkin
UPDATE 07/10/07: The source code has been updated. Check out the “WSPatternStyleGenerator” to simplify the creation of its CSS patterns, too.
WSBackgroundPixelSkin is a free Flex component for creating patterns within Flex containers such as Application, Canvas, HBox, VBox, Form etc. It based on pure CSS and ActionScript without any images. It creates pretty patterns using the powerful BitmapData classes of Flex.
For determining complex patterns I’ve written a small Flex app, which loads images reading colors based on its pixels and prints this pattern as CSS code. Let me know if there anyone out there who is interested in this app. Then I’ll publish it including source, too.
Note: Programmatic skins used to extends mx.skins.Border or mx.skins.ProgrammaticSkin classes, but in this case WSBackgroundPixelSkin needs the addChild() method for adding instances of DisplayObjects and therefore it extends the UIComponent.
Screen shot
Instructions
Code snippets for using WSBackgroundPixelSkin
-
//
-
// [1] Define the style properties of your pattern as follow:
-
// This example describes a simple pattern based
-
// on blue and white columns
-
<mx:Style>
-
.bg
-
{
-
// point WSBackgroundPixelSkin as a borderSkin
-
borderSkin: ClassReference("skins.WSBackgroundPixelSkin");
-
// define a pixelbased pattern
-
// which uses the indexes of the bgColors array below
-
bgPattern: "001010001",
-
"001010001";
-
// bgColors defines color using by its pattern definition
-
bgColors: #3399CC, #FFF;
-
// measure of all pixels,
-
// the default value is 1
-
bgPixelMeasure: 12;
-
//
-
background-color: #3399CC;
-
}
-
</mx:Style>
-
//
-
// [2] Point the pixel based style to a container, e.g. Canvas:
-
<mx:Canvas id="standardCanvas"
-
styleName="bg" />
-
//
-
// That’s all
Example (incl. source code)
Have a look on these examples including the source code. Feel free to use it, WSBackgroundPixelSkin is open source licensed under the Mozilla Public License 1.1.
Have fun!
That’s dope! Unfortunately, it suffers from serious window resizing draw slowness. Perhaps it can be optimized though. Thanks or making it open source.
I can’t work out how I would go about creating my own patterns – the CSS looks scary!
Could you explain the process of creating a pattern?
Nice work.
@Brett: The core class named “WSBackgroundPixelSkin” has been optimized. Check it out
@Stefan, it looks too scary for me, too
But don’t worry about these patterns. I’ve created a Flex based tool, which loads pixel based wallpaper images (e.g. from http://www.k10k.net/pixelpatterns/) and creates patterns in well formatted CSS for using WSBackgroundPixelSkin. I’m going to publish this tool as soon as possible (incl. source)
-sectore
Sector,
Very nice…I’ll certainly want to take a look at your tool when it it’s ready. Thanks!
What do you think about this solution http://tearaway-tea.com/blog/2007/10/17/pimp-your-flex-app-using-flex-pattern-background/ ?