Why Degrafa is so COOL Part 2 : Repeaters and RotateTransforms

Part 2: Rotate transform an image .

this is a part of the sample app in my recent post (viewable here)

code below .. some explanations ..

1. a BitmapFill that uses a source propery of the selected image.

2. a geoGroup (GeometryGroup) to create it as a Sprite inside our surface.

3. a RegularRectangle that will be filled with the image.

4. a RotateTransform with a property of registrationPoint as "Center" in order to make the image (rectengle) rotate around it's center

 <!-- the image of the air craft's group -->
    <degrafa:GeometryGroup id="plane">
     
     <degrafa:RegularRectangle  width="120" height="45" fill="{fillPlane}" x="65" y="100">
    
      <degrafa:transform>
       
        <degrafa:RotateTransform  id="transform" registrationPoint="center" angle="0"/>
       
      </degrafa:transform>
     </degrafa:RegularRectangle>
     
    </degrafa:GeometryGroup> 

private function onAngleChanged(event:Event):void
{
TweenMax.to(transform2,1.5,{angle:idSlider.value});

}

Why Degrafa is so COOL Part 1 : Repeaters and RotateTransforms

on these few parts im gonna show why degrafa is cool , showing a few features that i created in a sample app (viewable below)

the first part:
How can we create the small rectengles arranged in a circle ?

Well before u dive in to the code , there are a few basics stuff to understand ...

1. First we need a geoComp (GeometryComposition) , a geoComp using its graphics target property , will draw its "children" to the UI Comp specified , in our case to the canvas.

2. now we need some shapes to rotate and repeater .. (NOTE:that you can also apply transformations to a geoComp not just to a geo shape , that comes handy when u have a geoGroup that can't be transformed ,but you can wrap stuff with a geoComp and transform it , a sample of that will come on the next post )

3. on line 4 we create the repeater that will repeat its children (the rect)

4. on line 6 we create a rect and position it (it will be the first rect)

5.on line 12 - 15 , we apply a rotate transform to the rect , inside the rotate transform we "mark" a center position , that position will be the center of the circle that the shape will move on , for example without any repeaters , if we only had 1 rect + a rotate transform , setting a value of 90 to the angle prop of the transform will cause the rect to "twist" 90 degrees around the center point defined on the rotateTransform tag. another use of the tranform can be applied if we dont set it as a X and Y position , we set the registrationPoint prop on the transform , and then the shape being transformed will actually move around itself

6. on line 24 we defined a modifier , what basically happens is that the repeaters creates N rects with our transform , on the modifier config we simply tell it to increase the angle of the transform on every new instance of the rectengle to get the effect ...

<degrafa:GeometryComposition id="topToolBar"
graphicsTarget="{[canvasTopWatches]}">
<!--mark that the following geo will be repeated-->
<degrafa:GeometryRepeater count="16">
<!--the rectengle that we will repeat-->
<degrafa:RegularRectangle
height="2" width="12" x="0"
y="{canvasTopWatches.height + canvasTopWatches.y }"
stroke="{strokeSolidWhite}">
<!--using transform we can control various
properties of each repeated shape-->
<degrafa:transform>
<!--a rotate transform will mark a center point
that all transform will move around it -->
<degrafa:RotateTransform
angle="0"
id="Rtransform"
centerX="{(canvasTopWatches.width / 2) }"
centerY="{canvasTopWatches.height + canvasTopWatches.y }"/>
</degrafa:transform>
</degrafa:RegularRectangle>
<!-- using a modifier we increase the transform by 22.5 degrees
for each rectengle -->
<degrafa:modifiers>
<degrafa:PropertyModifier targets="{[Rtransform]}" property="angle" modifier="22.5" modifierOperator="add" />
</degrafa:modifiers>
</degrafa:GeometryRepeater>