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.