Share:

" /> Visio Guy » Off-center Radial Fill Effect
Home » Development, Shapes, ShapeSheet

Off-center Radial Fill Effect

Submitted by on August 30, 2007 – 4:13 am | | 21516 views 12 Comments

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:

Off-center Fill with Bad Algn Box

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:

  1. Make the alignment box match the circle exactly
  2. 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:

Circle and Line

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:

Radial Fill Combine.png

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:

LockCalcWH

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!

Out-of-box Geometry

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:

Various Off-center Radial Fills

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:

Control-handle Light Source

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:

SpotLight Control Handle

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:

Balls Glued to Guide Point

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:

Strange Cursor Highlighting

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!

Off-center Radial Fill Effect (25.07 KB) - 882

12 Comments »

  • Stanley says:

    Hi,

    Great website. Great tutorial on fill effects, but I am confused on one point.

    When I go to ShapeSheet (I hadn’t even know about this), I get different sections. Sometimes I see protection, and sometimes I don’t. There seem to be more than one type of ShapeSheet.

    Thanks.

    Stanley

  • Visio Guy says:

    Hi Stanley,

    Sometimes sections can be hidden, via View > Section in the ShapeSheet window.

    Some shapes have sections that others don’t, due to slight differences in shapes. For instance, 1D shapes (like connectors) have a “1-D Transform” section that other shapes don’t have. And groups often don’t have any Geometry sections.

    Also, a developer can add User-defined rows, Shape Data fields, Actions (right-click menu items), Smart Tags, Scratch rows, etc. to a shape, which will change the visible sections in the ShapeSheet.

    So view options, shape type, and developer-customization can all have an effect on how the ShapeSheet appears.

    Cheers,

    – Chris

  • Stanley says:

    Hi Visio Guy,

    Thank you for your reply.

    Actually, shortly after I left my comment, I noticed that the sections that I got depended upon whether or not any object was selected. When I had the ball selected, I got the ShapeSheet shown in your tutorial. When I had nothing selected, I got a different ShapeSheet.

    Great tutorial. I intend to spend much time studying your website. It is a real contribution to knowledge.

    Stanley

  • [...] Can You Put on a Visio Shape?, Release the Power of Visio Custom Line Patterns, VB Visio Drawing, Off-center Radial Fill Effect, SmartShape Tutorial: Fading [...]

  • [...] also suspected that the cool shading effects might require my complicated, yet attractive Off-center Radial Fill Effect [...]

  • Pierre says:

    Wonderfull, I was looking since long time, how to do it, now I got solution, many thanks.

    I have another question, is it possible to distribute shape or line in round ?, mean’s to have a good repartition around a circle, like a clock by example ?.

    Many thanks

    Pierre

  • Visio Guy says:

    Hi Pierre,

    There is some VBA code for arranging shapes in a circular pattern on this site: http://visio.mvps.org/VBA.htm

    Just search for “Polar Array”.

    If you are able to work with VBA code, this might help you.

  • Pierre says:

    Thanks,

    I work a little bit with VBA, but principaly with excel, I will try with Visio, we will see….

    But anyways,

    Thanks.

    Regards

    Pierre

  • [...] here for another great article from the VisioGuy – A great article about offset gradient fills. No Comments – Leave a [...]

  • nashwaan says:

    Thanks Chris. Another great article : )

    In case anyone wants to have the control moves the *center* of the highlight directly, then the following formulas will do:

    Controls.SpotLight.X = SETATREF(Geometry2.X2,SETATREFEVAL((SETATREFEXPR(Width*0.5)-Width*0.5)*2+
    IF(SETATREFEXPR(Width*0.5)>Width*0.5,Width,0)),TRUE)+SETATREFEXPR(Width*0.5)

    Controls.SpotLight.Y = SETATREF(Geometry2.Y2,SETATREFEVAL((SETATREFEXPR(Height*0.5)-Height*0.5)*2+
    IF(SETATREFEXPR(Height*0.5)>Height*0.5,Height,0)),TRUE)+SETATREFEXPR(Height*0.5)

    Yousuf.

  • Visio Guy says:

    Awesome tip, Yousuf, thanks!

    I think that this could be done without SETF/SETATREF functions, but I’d have to set down and think about it for awhile :)

Leave a comment!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.

*