Home > Degrafa, Flex > Degrafa Tutorial – Multiple Targets and Transforms

Degrafa Tutorial – Multiple Targets and Transforms

December 16, 2008

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

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!

Categories: Degrafa, Flex Tags: , , ,
  1. December 24, 2008 at 4:38 am

    Hi,
    Very interesting stuff. But I have some difficulties scripting Degrafa BezierSplines (from actionscript). I want to create some randomized curves through some (generated) points. With a the polyline geometry it allready works. Example can be viewed at http://labs.cv-q.com/utopia_line/
    Perhaps if it’s possible to have a scripted example?
    Greetings,
    Koen

    • December 24, 2008 at 8:09 am

      I’m working on a demo on dynamic knot assignment. During this process, the Degrafa team noted a problem and fixed it, so you might want to update your code from SVN.

      regards,

      – jim

  2. December 27, 2008 at 3:21 pm

    Hi Jim,
    Thanks for the suggestion. I’ve update my Degrafa source code, and it seemed not “hanging” any more. With data-assignment with BezierSpline.points (array) I didn’t get any result. Then tried passing a string to the BezierSpline.data variable and there it was, the spline was nicely drawn through the randomized knots.
    Greetings,
    Koen

  1. No trackbacks yet.
Comments are closed.
%d bloggers like this: