I just released a new project, called by Erick uigfx, that I have introduced in my previous post (in french).
So : it’s a Flex4 primitives’s library, which allows you to extend standard graphics primitives. It’s also one (and more soon) Fireworks extension to accelerate and improve the workflow between designer and developer.
The existence of this library have just this idea: improve the work processes between teams around a Flex4 project.

uigfx library

ExclusionRect

Draw a rectangle with rounded corners (« radius » property), with a rounded rectangular punch optional.
The roundness of the inner rectangle is defined by « innerRadius » property.
Constraints of the inner rectangle are defined with « innerTop », « innerBottom, « innerLeft » and « innerRight » properties.
Sample :

<uigfx:ExclusionRect
    radius="10"
    innerRadius="30"
    top="0" left="0" right="0" bottom="0"
    innerTop="0" innerBottom="20" innerLeft="0" innerRight="20">

    <uigfx:fill>
        <s:LinearGradient rotation="90">
            <s:GradientEntry color="#212121" ratio="0" />
            <s:GradientEntry color="#313131" ratio="1"/>
        </s:LinearGradient>
    </uigfx:fill>

    <uigfx:filters>
        <s:DropShadowFilter color="#000000" inner="true"
            distance="1" blurX="4" blurY="4"
            quality="3" alpha="0.8" />
    </uigfx:filters>

</uigfx:ExclusionRect>

Result :

PointsPath

This primitive allows you to draw a path, based on a list of points(ConstraintPoint).
Additionally, you can set a roundness to your primitive using the « radius » property

A PointsPath can be defined as « not closed » : in this case you can use the « closedPath » property and set it to false :

<uigfx:PointsPath radius="60" closedPath="false">
   ...
</uigfx:PointsPath>

Using constraint point

The ConstraintPoint class defines a point with constraints values (left, horizontalCenter, right; and top, verticalCenter, bottom)

<uigfx:ConstraintPoint top="0" horizontalCenter="0" />

Every single value can be expressed as a percentage, setting « valuesInPercent » property to « true » (by default, all values are expressed in pixel) :

<uigfx:ConstraintPoint valuesInPercent="true" top="10" horizontalCenter="-25" />

Sample

Draw a five branch star, with a rounded contour (« radius » property), and constraints points vector :

<uigfx:PointsPath
    radius="60" width="100%" height="100%"
    horizontalCenter="0" verticalCenter="0">

    <uigfx:points>
        <uigfx:ConstraintPoint top="0" horizontalCenter="0" />
        <uigfx:ConstraintPoint horizontalCenter="25" verticalCenter="-25"/>
        <uigfx:ConstraintPoint right="0" verticalCenter="-25" />
        <uigfx:ConstraintPoint horizontalCenter="40" verticalCenter="25" />
        <uigfx:ConstraintPoint right="40" bottom="0" />
        <uigfx:ConstraintPoint horizontalCenter="0" verticalCenter="40" />
        <uigfx:ConstraintPoint left="40" bottom="0" />
        <uigfx:ConstraintPoint horizontalCenter="-40" verticalCenter="25" />
        <uigfx:ConstraintPoint left="0" verticalCenter="-25" />
        <uigfx:ConstraintPoint horizontalCenter="-25" verticalCenter="-25" />
    </uigfx:points>

    <uigfx:fill>
        <s:SolidColor color="#353535" />
    </uigfx:fill>

    <uigfx:filters>
        <s:DropShadowFilter color="#000000" inner="true" distance="1"
            blurX="4" blurY="4"
            quality="3" alpha="0.8" />
    </uigfx:filters>

</uigfx:PointsPath>

Result :

ComplexPointsPath

This primitive allows you to draw a path with one or more contours, defined by ComplexConstraintPoint points.

Define a complex point

The ComplexConstraintPoint class defines a vector with a constraint position, and the position of its bezier curves list.

The position of bezier curves is defined by vertical and horizontal offsets as below :

In mxml :

<uigfx:ComplexConstraintPoint
    horizontalCenter="-48" verticalCenter="-59"
    nextAnchorOffsetX="-2" nextAnchorOffsetY="4"
    prevAnchorOffsetX="7" prevAnchorOffsetY="-6" />

Just like the ConstraintPoint, all values can be expressed in percentage :

<uigfx:ComplexConstraintPoint
    valuesInPercent="true"
    top="10" horizontalCenter="-25"
    nextAnchorOffsetX="-2" nextAnchorOffsetY="4"
    prevAnchorOffsetX="7" prevAnchorOffsetY="-6" />

Single contour

Draw a path with a complex contour :

<uigfx:ComplexPointsPath top="0" bottom="0" left="0" right="0" >
    <uigfx:points>
        <uigfx:ComplexConstraintPoint left="0" prevAnchorOffsetX="4.59" top="36" prevAnchorOffsetY="5.36" />
        <uigfx:ComplexConstraintPoint left="0" bottom="0" />
        <uigfx:ComplexConstraintPoint horizontalCenter="-35" bottom="0" />
        <uigfx:ComplexConstraintPoint horizontalCenter="-23" bottom="18" />
        <uigfx:ComplexConstraintPoint horizontalCenter="3" bottom="2" />
        <uigfx:ComplexConstraintPoint horizontalCenter="2" bottom="0" />
        <uigfx:ComplexConstraintPoint right="0" bottom="0" />
        <uigfx:ComplexConstraintPoint right="0" top="0" />
        <uigfx:ComplexConstraintPoint left="34" nextAnchorOffsetX="6.07" top="0" nextAnchorOffsetY="4.56" />
        <uigfx:ComplexConstraintPoint left="44" top="20" nextAnchorOffsetY="13.81" prevAnchorOffsetY="-8.18" />
        <uigfx:ComplexConstraintPoint left="19" nextAnchorOffsetX="-7.6" prevAnchorOffsetX="13.81" top="45" />
    </uigfx:points>

    <uigfx:stroke>
        <s:SolidColorStroke color="#ffffff" weight="1" />
    </uigfx:stroke>

    <uigfx:fill>
        <s:LinearGradient rotation="90">
            <s:GradientEntry color="#333333" ratio="0" alpha="1"/>
            <s:GradientEntry color="#212121" ratio="1" alpha="1"/>
        </s:LinearGradient>
    </uigfx:fill>

    <uigfx:filters>
        <s:GlowFilter color="#000000" blurX="12" blurY="12" alpha="0.65"/>
    </uigfx:filters>
</uigfx:ComplexPointsPath>

result :

Multiples contours

Draw a path with multiples contours.
Each Contour object defines a part of the path. Basically, it’s used to process pathfinding, such as union or exclusion.
Each contour is defined on a Contour object, through the « contours » collection property. Like PointsPath, a Contour can be defined as unclosed, using « closedContour » property :

<uigfx:ComplexPointsPath top="0" bottom="0" left="0" right="0" >
    <uigfx:contours>
        <uigfx:Contour closedContour="false">
            <uigfx:points>
            ...

Below a complete sample code :

<uigfx:ComplexPointsPath top="0" bottom="0" left="0" right="0" >
    <uigfx:contours>
        <uigfx:Contour>
            <uigfx:points>
                <uigfx:ComplexConstraintPoint left="0" prevAnchorOffsetX="4.59" top="36" prevAnchorOffsetY="5.36" />
                <uigfx:ComplexConstraintPoint left="0" bottom="0" />
                <uigfx:ComplexConstraintPoint horizontalCenter="-35" bottom="0" />
                <uigfx:ComplexConstraintPoint horizontalCenter="-23" bottom="18" />
                <uigfx:ComplexConstraintPoint horizontalCenter="3" bottom="2" />
                <uigfx:ComplexConstraintPoint horizontalCenter="2" bottom="0" />
                <uigfx:ComplexConstraintPoint right="0" bottom="0" />
                <uigfx:ComplexConstraintPoint right="0" top="0" />
                <uigfx:ComplexConstraintPoint left="34" nextAnchorOffsetX="6.07" top="0" nextAnchorOffsetY="4.56" />
                <uigfx:ComplexConstraintPoint left="44" top="20" nextAnchorOffsetY="13.81" prevAnchorOffsetY="-8.18" />
                <uigfx:ComplexConstraintPoint left="19" nextAnchorOffsetX="-7.6" prevAnchorOffsetX="13.81" top="45" />
            </uigfx:points>
        </uigfx:Contour>
        <uigfx:Contour>
            <uigfx:points>
                <uigfx:ComplexConstraintPoint right="96" top="18" />
                <uigfx:ComplexConstraintPoint right="68" top="9" />
                <uigfx:ComplexConstraintPoint right="59" top="37" />
                <uigfx:ComplexConstraintPoint right="87" top="46" />
            </uigfx:points>
        </uigfx:Contour>
        <uigfx:Contour>
            <uigfx:points>
                <uigfx:ComplexConstraintPoint right="49" bottom="28" nextAnchorOffsetY="-11.87" prevAnchorOffsetY="11.87" />
                <uigfx:ComplexConstraintPoint right="28" nextAnchorOffsetX="11.87" prevAnchorOffsetX="-11.87" bottom="49" />
                <uigfx:ComplexConstraintPoint right="6" bottom="28" nextAnchorOffsetY="11.87" prevAnchorOffsetY="-11.87" />
                <uigfx:ComplexConstraintPoint right="28" nextAnchorOffsetX="-11.87" prevAnchorOffsetX="11.87" bottom="6" />
            </uigfx:points>
        </uigfx:Contour>
    </uigfx:contours>

    <uigfx:stroke>
        <s:SolidColorStroke color="#ffffff" weight="2" />
    </uigfx:stroke>

    <uigfx:fill>
        <s:LinearGradient rotation="90">
            <s:GradientEntry color="#333333" ratio="0" alpha="1"/>
            <s:GradientEntry color="#212121" ratio="1" alpha="1"/>
        </s:LinearGradient>
    </uigfx:fill>

    <uigfx:filters>
       <s:GlowFilter color="#000000" blurX="12" blurY="12" alpha="0.65"/>
    </uigfx:filters>
</uigfx:ComplexPointsPath>

Result :

An Extension for Fireworks

This library would not be complete without an export tools for Fireworks. Have a complex primitive is good, but how to find all the points and bezier curves without a headache? It’s the goal of this extension!

At this moment the exporter is able to :

• exports all paths and rectangles
• exports strokes
• exports fills (solid color and gradient)
• exports filters (gaussian blur, glow, drop shadow)

But for now, this exporter can’t :

• exports text

Installation

Simply download the extension (uigfx.mxp), and double click on it to launch the Extension Manager. The installation is automatic. Now, open Fireworks, and open the primitives exporter panel in « Window > uigfx« .

How to use this extension

• Make your design
• Generate and place rules
  You’ill need 4 vertical rules and 4 horizontal rules to determine all constraints positions of each vector point. You can click on the « generate rules button », to put the rules around your selection (you need to select one or more objects). Move the rules, in order to have all vectors in the good area, like below :
  
• Export
  Click on the export button to export all selections. The exporter follows rules placement to determine vectors positions. If there’s no selection, all layers are exported. Of course, you will have to provide a name for the output file and a directory to save it in.
  Finally, an mxml file, containing a Spark Skin with all uigfx primitives, will be created. And voila !

This project is hosted on google code.

---

Par Fabien, Mardi 9 février 2010 à 12:40
Nos projets, [Dev] Flash / Flex / AIR...

Tags: Flex, graphics, primitives, skin, Spark, uigfx

---