gpAS3Library – Part 2: The Shape Class

The gpAS3Library is a set of Flash AS3 utilities that I use when creating my Flash applications.

In Part 0, I discussed the gpUrlLoader class – This class will load image, swf, text, xml, html, stylesheet, json, and sound files.

In Part 2 of the gpAS3Libary, I will discuss the gpShapes class. This class is the basis for much of the UI that I create in my Flash applications.

Loading XML data Using the gpUrlLoader Class

The key concept of the gpAS3Library is that all UI in the Flash application is dynamically created using values that are stored in an XML file. When I originally developed the gpShapes AS2 class, creating a shape required an XMList as an input parameter. But when I converted this class to AS3, I decided to change this class to require an object – although I still load the shape values via XML and then convert it to an object using the gpConfig class.

As an example, the following XML configuration file is used with a photo gallery that I created.

<config>
	<pLayout>
		<pStyles cType="page" bgColor="0x202020" />
		<pStyles cType="thumbCntnr" position="bottom" nW="580" nH="65" vMargin="10" corners="6,6,6,6" bgColor="0x202020,0x3F3F3F"  borderSize="2" borderColor="0xFFFFFF" />
		<pStyles cType="nav" nW="16" nH="16" shape_type="arrow" bgColor="0x999999" bgColorHover="0x4E6698" borderSize="1" borderColor="0xFFFFFF" borderColorHover="0xFFFFFF" />
		<pStyles cType="thumbs" borderSize="2" borderColorHover="0xFFFFFF" borderColorSelected="0xFF6600" vMargin="4" hMargin="4" />
		<pStyles cType="large" borderSize="2" borderColor="0xFFFFFF" transTypeIn="Fade" transTypeOut="Photo,PixelDissolve" />
		<pStyles cType="title" showTitle="true" position="top" vMargin="10" fontColor="0xFFFFFF" tProperties="autoSize:center" tFormat="font:Arial,bold:true,align:center,color:0xFFFFFF,size:12" />
	</pLayout>
</config>

I use the gpUrlLoader class to load the XML file. I then convert it to an object using the gpConfig class.

?View Code ACTIONSCRIPT
var config:gpConfig;
var xml:gpUrlLoader = new gpUrlLoader();
xml.addEventListener(Event.COMPLETE, xmlLoaded);
xml.init('config.xml', 'xml');
 
function xmlLoaded(e:Event):void {
        var xmlData:XML = xml.getXML();
        config = new gpConfig(xmlData);
}

I can then create the shape by first converting the shape’s attributes to an object using gpConfig’s getChildByAttribObject.

?View Code ACTIONSCRIPT
var tCntnrConfig:Object = config.getChildByAttribObject('pLayout', 'pStyles', 'cType', 'thumbCntnr');
var tc:gpShapes = new gpShapes();
tc.createShape(tCntnrConfig);
addChild(tc);
tc.x = 100;
tc.y = 300;

A Basic Shape

To define a shape, the shape_type, width, height, and color should be provided.

<pStyles cType="shape1" nW="200" nH="100" shape_type="rectangle" bgColor="0xFF6600" />

nW: The width of the shape.

nH: The height of the shape.

shape_type: The type of shape. If a shape_type is not provided, the gpShapes class will create a rectangle by default.

bgColor: The background color (hexadecimal).

Curved Corners

<pStyles cType="shape2" nW="200" nH="100" shape_type="rectangle" corners="7,7,7,7" bgColor="0x410B0B" />
<pStyles cType="shape3" nW="200" nH="100" shape_type="rectangle" corners="0,8,8,8" bgColor="0x66FF00" />

If the shape_type is “rectangle”, you can supply a comma-delimited value for the amount of curve for each corner (clockwise, starting with the top left). In the shape3 example above, I have defined a shape with where the top left corner is not curved, but the other corners have a curve amount of 8.

Gradients

<pStyles cType="shape4" nW="200" nH="100" shape_type="rectangle" bgColor="0x66FF00,0x410B0B" />
<pStyles cType="shape5" nW="100" shape_type="circle" bgColor="0x66FF00,0x410B0B" fill_type="radial" />
<pStyles cType="shape6" nW="200" nH="100" shape_type="ellipse" bgColor="0x0066FD,0x8BC785,0x275043" gradient_rotation="45" />

To create a gradient, provide a comma-delimited list of hexadecimal values for the bgColor option. The gradient fill is linear by default. To create a radial gradient add a fill_type option. If the fill_type is linear, you can also rotate the gradient using the gradient_rotation option (in degrees).

Borders

<pStyles cType="shape1" nW="200" nH="100" shape_type="rectangle" borderSize="1"  borderColor="0x66FF00" />
<pStyles cType="shape2" nW="100" shape_type="halfCircle" bgColor="0x000066" borderSize="2" borderColor="0x66FF00" />

To create a border around the shape, you must provide the borderSize and borderColor options. As you can see in “shape1” above, you can create a shape with a border only by not providing a bgColor option.

Drop Shadow

<pStyles cType="shape1" nW="200" nH="100" shape_type="rectangle" bgColor="0xFF6600" dropShadow="true" />
<pStyles cType="shape2" nW="200" nH="100" shape_type="rectangle" corners="7,7,7,7" bgColor="0x410B0B" dropShadow="blurX:20,blurY:20" />
<pStyles cType="shape3" nW="200" nH="100" shape_type="rectangle" corners="0,8,8,8" bgColor="0x66FF00" dropShadow="distance:21,blurX:10,blurY:10" />
<pStyles cType="shape4" nW="100" shape_type="circle" bgColor="0x202020" dropShadow="blurX:7,blurY:7,angle:270,color:0x410B0B" />

To create a drop shadow, you can either set the dropShadow option to true or provide specific DropShadowFilter options. When providing specific filter options, separate each option with a comma and separate the filter name with the filter value with a colon.

If you set the dropShadow option to true, the shape will be created with the following dropShadowFilter options:

distance: 5
angle: 45
alpha: 1
blurX: 5
blurY: 5
strength: 1
quality: 3
inner: false
knockout: false
hideObject: false

gpShapes Shape Types

The gpShapes class will presently create a limited number of shapes. I plan to add more in the future.

  • rectangle (or square)
  • circle
  • halfCircle
  • ellipse
  • triangle
  • rightTriangle
  • diamond
  • arrow
  • pause
  • checkMark

In addition to the shape_types listed above, when I converted the gpShapes class to AS3, I added a polygon option that I adapted from code that I found here.

To create a polygon, you simply provide the number of segments (and an optional rotation). So if I want to create a pentagon or octagon:

<pStyles cType="shape13" nW="100" segments="5" rotation="0" shape_type="polygon" bgColor="0xCC0000" />
<pStyles cType="shape14" nW="100" segments="8" rotation="0" shape_type="polygon" bgColor="0xCC0000" />

Note: When the shape_type is defined as a polygon, circle, or halfCircle, the only that should be defined is the width (nW). The width will be used as the radius.

Well that’s it. You can view demos of the gpShapes class on my demo section. You can download the gpShapes as part of the gpAS3Library stored on GitHub.

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks