Degrafa Tutorial – Multiple Targets and Transforms

One of the many features I like about Degrafa is the ability to draw the same object in multiple targets.  Let’s take our friendly arrow spline from the introduction to spline series.  If an arrow is worth drawing once, we know the design team will eventually want to draw multiple arrows 🙂

This is a beginner tutorial on how to draw into multiple targets and add a simple rotation transform.  You should understand how to setup a Flex project and work with Degrafa.  Since this example works with splines, you will also need at least Degrafa Beta 3.

If you followed the introudction to splines series, you noticed that the ‘target’ that Degrafa draws objects into was actually an array.  This allows multiple targets to be specified for the same drawing.   Give the following code a try,

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
   xmlns="http://www.degrafa.com/2007"
   layout="absolute" >

<LinearGradientFill id="myFill">
  <GradientStop color="#666"/>
  <GradientStop color="#FFF"/>
</LinearGradientFill>

<BezierSpline id="mySpline"
 graphicsTarget="{[target1, target2,
 target3, target4]}"
 verticalCenter="0" horizontalCenter="0"
 data="20,10 20,30 10,30 30,50 50,30 40,30 40,10"
 fill="{myFill}"
 autoClose="true"
 tension="5">

 <stroke>
   <SolidStroke weight="2" color="#000"/>
 </stroke> 

 <transform>
   <RotateTransform registrationPoint="center"
   angle="{rotateSlider.value}"/>
 </transform>

</BezierSpline>

<mx:Canvas width="500" height="500" >
 <mx:Canvas id="target1" width="250" height="250"
   borderColor="#CCCCCC" borderStyle="solid" />
 <mx:Canvas id="target2" width="250" height="250"
   borderColor="#CCCCCC" borderStyle="solid"
   x="250" y="0" />
 <mx:Canvas id="target3" width="250" height="250"
   borderColor="#CCCCCC" borderStyle="solid"
   x="0" y="250" />
 <mx:Canvas id="target4" width="250" height="250"
   borderColor="#CCCCCC" borderStyle="solid"
   x="250" y="250"/>

 <mx:HSlider id="rotateSlider"
   x="170"
   y="260"
   minimum="0"
   maximum="90"
   liveDragging="true"
   value="0" />
 </mx:Canvas>
</mx:Application>

In comparing this to the original spline example, notice that four separate targets are specified,

graphicsTarget="{[target1, target2, target3, target4]}"

A slider has been added whose value is bound to the angle property of a rotation transform,

<transform>
   <RotateTransform registrationPoint="center"
   angle="{rotateSlider.value}"/>
 </transform>

Since the transform is applied inside the BezierSpline tag, it is applied to the spline drawn into each individual target. As the transform is modified, the modification is propagated to all targets without any direct action on your part.

Notice that the original arrow is drawn pointing downward. The following screen shot shows how all four arrows are modified by the slider (some of the screen space was cropped to save space here).

Degrafa Spline - Multiple Targets and a Transform

That’s all you need to do to draw multiple copies of the same item and manipulate all of the targets with a single transform. Experiment and have fun!