gpAS3Library – Part 2a: gpColorSchemes

When I converted the gpShapes class from AS2 to AS3, I wanted to be able to create shapes with web 2.0 type color schemes, but I did not want to hand code each color scheme in an XML file every time that I wanted to use one. So I created the gpColorSchemes class by duplicating a set of web 2.0 styles that I have in Photoshop. The gpColorSchemes contains 34 preset color schemes that can be used with any Flash/ActionScript application. I named this post Part 2a because I created this class to be used with the gpShapes class (Part 2), but the gpColorSchemes class can be used separately from the gpShapes class.

Using gpColorSchemes With gpShapes

As stated in previous posts, the gpAS3Library uses XML data to dynamically create all UI within a Flash/ActionScript application.

The gpShapes class provides a number of options to create shapes within an application (see gpShapes). To use the gpColorSchemes class with the gpShapes class, simply remove the bgColor, borderColor, and borderSize options from the XML attributes and replace them with color scheme preset name of your choice.

<pStyles cType="shape1" nW="200" nH="100" shape_type="rectangle" corners="7,7,7,7" colorSchemeName="gpLimeGreen4" />
<pStyles cType="shape2" nW="200" shape_type="circle" colorSchemeName="gpPink3" colorSchemeReverse="true" />

colorSchemeName: The preset name of the of color scheme. I named these rather arbitrarily, but I tried to include the primary color and the number of gradient colors within the name. So gpPink3 has 3 hues of pink.

colorSchemeReverse: This option will tell the gpColorSchemes class to reverse the order in which the gradient is drawn.

Using the gpColorSchemes class separately

To use the gpColorSchemes class without the gpShapes class, instantiate the class using the color scheme name and the reverse option:

import flash.display.Sprite;
import com.grasshopper.utils.*;
 
var cScheme:gpColorSchemes = new gpColorSchemes('gpDarkGrey4', false);
var colorScheme:Object = cScheme.getColorScheme();

The getColorScheme method returns an object:

bgColor: The background color (or background multiple colors).
brdrColor: The border color.
brdrSize: The border size.
cAlphas: Fill alphas for each color (an array).
ratio: The gradient ratios.

Once I have these values, I can then create a shape:

var sp:Sprite = new Sprite();
addChild(sp);
sp.x = 100;
sp.y = 100;
 
var matrix = new Matrix();
matrix.createGradientBox(100, 50, Math.PI/2, 0, 0);
 
sp.graphics.beginGradientFill(GradientType.LINEAR, colorScheme.bgColor, colorScheme.cAlphas, colorScheme.ratio, matrix);
sp.graphics.lineStyle(colorScheme.brdrSize, colorScheme.brdrColor, 1.0);
sp.graphics.drawRect(0, 0, 100, 50);

That’s it. the gpColorSchemes class is fairly simple to use. You can download it as part of the gpAS3Library that is stored on GitHub. You can view a demo (and view each color scheme) on the demo section.