Fun with Degrafa Repeaters

– December 21, 2008

Here’s an example using Repeaters with Degrafa – good device, will be used more later.

This little example came about because a client wanted to display a spinning icon over the VideoDisplay when the video is buffering. I thought to myself, “Self, you could do this the easy way by rotating a png or something lame like that. Or, you could do it the geek way by writing a custom Flex component using Degrafa.” Yeah, hard choice. :)

The settings for the GeometryRepeater, PropertyModifiers, fills etc. are hardly obvious. It takes a lot of tweaking. That’s why I added the Sliders so that I could rapidly check settings to get the look that I wanted. Or better yet, just let my client play with this until they see what they want and then send me the settings.

Then I thought it would be cool to automate the changes to the sliders so that you could sit back and just watch them change randomly. That’s what took the longest because I found myself just staring, like I was hypnotized, at the screen as the settings changed.

Then I thought, damn, I wish I could save these settings and then load them up again or share them. So I added the get current settings and apply these settings buttons. Now you can copy/paste a settings group into a comment – below – and let other people see what you came up with. One of my favorites is:

wheel.spokesCount=54,
wheel.rectangleWidth=23,
wheel.rectangleHeight=200,
wheel.rectangleCornerRadius=8,
wheel.spinRate=27,
wheel.xOffset=0,
wheel.yOffset=120,
wheel.centerX=0,
wheel.centerY=100,
wheel.innerGradientColor=16711935,
wheel.outerGradientColor=6,
wheel.gradientAngle=90

Just remove the existing text in the TextArea and paste those settings in and hit apply these settings button.

Overlapping
Occasionally you’ll see the overlap of the repeated rectangles. It isn’t a problem with Degrapha. It’s just that not all combinations of values make since.

Spinning
The apparent spinning of the wheel is created by changing the gradient alpha of the fills. It works by creating an array of alpha values that start at 1 and decrease down to 0.5 at the midpoint of the array. Then the values climb back up to 1 at the end of the array. That way there is no hard edge in the gradients between 1 and 0.5.

To create the spinning effect I just pop the last element of the array and push it to the beginning of the array on each tic of the Timer.

More on Degrafa
Here’s the video tutorial by Juan Sanchez that I watched to learn how Repeaters work with Degrafa.

Greg Dove

Posted December 21, 2008 at 2:26 AM

That looks awesome and I love the idea of getting the client to configure the settings.

Very mesmerizing, like you say. It's fantastic to see what people are doing with Degrafa.

Not sure if its relevant in this example – the current effect is already very nice, but with degrafa you can also apply a transform to the fill itself. The fill follows the geometry's (roundedrectangle in this case) transform, but can also have its own transform that gets applied on top of that. Fill transforms default to a registration point at the center of the fill target's bounds, so skewing, rotating and scaling the gradient fill iself would take place around the center of the rectangle by default. Not sure if that would be interesting or not… like you say, some of this stuff can be hard to visualize.

FYI there were also a couple of relevant changes property names in the latest Degrafa swc drop, beta3.1: in PropertyModifier 'offset' is now 'modifier' and 'offsetOperator' is 'modifierOperator'.