Off-center Radial Fill Effect
You may have noticed cool-looking, shiny ball shapes that pop-up now and again on Visio Guy. They have an attractive offset-radial fill effect, like the balls in the image on the left.
If you’ve played with Visio’s Fill Format dialog, you’ll know that good ol’ Fill Pattern Number 40 will give you a nice-looking radial fill, but there doesn’t seem to be a setting for getting it to be off-center. Well (once again) Visio Guy is here to show you how to work some black magic!
Computer-graphics and Design-theory Blurb
It seems that in computer-land, or at least Windows-land, there is a semi-standard that says; “The light source comes from the top-left”. Just look at your standard drop-shadows, and the borders on your windows and buttons: they’re dark on the right and bottom, and light on the top and left. I think that’s why the 3D balls look so much better when the “spotlight” is offset. The centered fill just doesn’t seem natural.
Fool the Gradient
The trick to getting this done in Visio is to make the actual shape bigger than the shape that we see. The circle is essentially a smaller window onto a bigger centered-radial-fill. In the shape below, I’ve combined a short diagonal line with a circle, then applied Fill Pattern 40, with a black fill color and a white pattern color:
That looks OK, but the tick-mark is distracting. Also, the alignment box (the green-handled rectangle) is bigger than the circle. This makes it hard to resize the circle to a size that we care about.
Fool the Alignment Box
To make this shape perfect, we need to do accomplish two things:
- Make the alignment box match the circle exactly
- Hide the tick-mark
So let’s enter Tutorial Mode now and get this done in a step-by-step manner. First, we need to draw a circle and a line, as shown below:
Make sure that the line is inside the alignment box of the circle. We’ll tweak it later, so that we can get our offset fill effect!
Now that we’ve got our two shapes, we need to combine them. That means they’ll be one single shape. Inside the ShapeSheet, we’ll see two Geometry sections: one for the line, and one for the circle. To combine the shapes, simply select them both, the choose: Shape > Operations > Combine from the menu, as shown here:
click to view larger image
If you choose the Line or Pencil tool from the Drawing toolbar, you’ll be able to move the vertices of the line segment. But if you move the vertices outside of the circle, the alignment box will grow. This is not what we want, so we need to perform one more trick, using the ShapeSheet.
Select your new Circle-Line shape and choose Window > Show ShapeSheet from the menu. Look for the Protection section and change the value in the cell: LockCalcWH to 1:
If you don’t see the Protection section, choose View > Sections from the menu and check Protection to make it visible.
Now we’ve locked down the alignment box. If you grab a vertex with the pencil tool and move it outside of the circle, the alignment box won’t grow any more! Task 1 is now complete!
Now we need to make it pretty. Just select your shape and choose: Format > Fill from the menu. Pull down the Pattern drop-down and go way to the bottom, where you’ll find pattern number 40. You’ll have something like this:
Grab that pencil tool and move the line’s end around to change the lighting effect!
Hide the Line
So the line is still visible and needs to go away. We could simply give the shape a No Line pattern, but that will get rid of the circle’s outline as well. The best bet is to go back into the ShapeSheet and set the GeometryN.NoLine cell to 1.
When you combined the line and the circle together, you created a shape with a single ShapeSheet that contains two Geometry sections. The line section will then be either Geometry1 or Geometry2. The line will be the section that has MoveTo and LineTo rows in it. Find this section.
Once you’ve located the line’s Geometry section, just set the NoLine cell to 1. This will turn off the line’s visibility, and pretty-much completes the shape! If you select the shape with the pencil tool, you’ll still be able to see the vertex and move it around.
Control the Line
If you want the highlight to stay in the same place, then we’re done. But if you want to be able to move it around without having to get the pencil tool every time, then read on!
We can add a control handle to the shape to control the position of the highlight. A control handle is a little yellow diamond that looks like this:
We’ll hook the end-point of the line to the position of the control handle, so that we can easily reposition the light source, whenever we want!
To add the control handle, open the ShapeSheet for your ball, and choose Insert > Section from the menu. Check Controls and click OK. You should see something like this:
click to view larger image
Note the yellow highlights: these are the formulas you’ll have to change. In this case, the line-segment is Geometry2. I’ve renamed the newly-added control handle to “SpotLight”. If you change the formulas in your shape to match those in the yellow boxes, you’ll have a finely-polished (*ahem*), user-configurable, 3D ball Visio shape!
Orbiting a Guide Point
If you drag out a guide point from the upper-left corner, where the rulers meet, then you can do something interesting. You can glue the control handle from your shiny new ball shape to the guide point. The end effect is to create a Sun. As you drag the shape around, the control handle will stay glued to the guide point. Even if you duplicate the ball, the handle will stay glued! This can make for some interesting effects:
Bounding Box Oddities
Another thing that you might notice is that when your mouse is near the hidden line segment, the cursor will change to “there’s a shape under me that you can select” mode, even though the line is hidden. Note the mouse-pointer with the “move-me” cross:
I’m not sure that this is desirable behavior. Perhaps the MS Visio guys ought to log this as a bug an issue. This also effects the selecting of the shape. If you do a net-select, you’ll need to drag the selection rectangle around the circle and the control handle – you have to get it all in order to select the shape. I guess it’s easier just to click it!
When you paste the shape into other apps, you might get an object that is as big as the circle-plus-hidden-line as well. When pasting into MS Word 2003, the Visio object was larger than the circle. If I pasted as a metafile or a bitmap, the result was a “tightly-enclosed” circle. Excel is a bit more clever, apparently: it gets it right for all three. You get a tightly-enclosed ball whether you paste as a Visio object, a metafile, or a bitmap.
Well, we hope you’ve had fun with this tutorial, and learned a bit more about creating Visio shapes. You’ve learned about the Combine operation, adding control handles to shapes, and hiding geometry via the NoLine cell. We’re eager to hear the clever ways in which you’ll surely use this knowledge, so let us know!