Arc Shaped Gauges and Other Animated Reveal Effects

This KB article will cover how to make "arc" gauges that reveal in the shape of an arc. It contains information describing a few methods, and even has working example dsn files. NOTE: All artwork is authored in Photoshop and/or Illustrator (with Photoshop being the quickest path forward since you are already in the right tool to use Altia PhotoProto moving forward). You generally do not create the arc gauge artwork/shapes in Altia Design.

CAUTION: Not all targets support the Mask object, however there is a chance that it could supported at a later date, depending upon the target (and the date of this writing vs. the current date).

For the version that uses a Mask object, see the example dsn below:**

The mask is divided between the left and right part, and two helper Clip objects are added so the right part is only displayed over the right half of the circle, and left half is only displayed over the left side of the circle. The advantage of using a Mask object is that the "revealed part" could be anything – for example the circle with blue-green gradient as displayed below. There is no way how to make such animation without the Mask object.



However, when there is no need for fancy revealed layer, and only gauge with one color needs to be displayed, the Mask object could be omitted.

For the version that does NOT use a Mask object, see the example dsn below:**

The principle is the same, but instead of rotating half-circles in a mask layer, those half-circles are already filled with orange color and in the size they should be:


The hardest part with this method is to make sure the rotated half-circles are properly aligned. TIP: You can create helper rectangles which are bigger than the circle, and place one rectangle into the rotated group and one outside. After rotating the group, visually check if both rectangles are aligned, and optionally move the group one pixel around to make sure the rectangle is still on the very same spot. Optionally, you can define more steps in the animation – not only 0° and 180°, but also 90° and 270°. After the rotation animation is defined, both "animation helper/guide rectangles" can be safely deleted. NOTE: the rotated images have to be one pixel bigger on each side to prevent the ugly anti-aliasing on the edges. You can play it safe by adding a 2 pixel pad. Do this easily in Photoshop with settings as shown below:


Alternative Block-Reveal Method:

Finally, it's worth mentioning that there is another method that could work if the previous 2 methods did not work for your situation. For this method, you have the "end cap" or "leader" image rotating around the arc shape, and then you just show/hide smaller "segment blocks" as separate images from the end cap image, as it rotates to pass over them. This will make the end cap/edge image animated, while the "fill" segments simply show up after they have been passed over by the end cap image, causing the gauge to "fill" as it moves. See below for an example of this method:


Block-Reveal method with no need for rotation:

If your gauge is just a series of blocks/ticks, you might not need anything rotating on top of it as the "leading edge" described above. In this case, please see this example dsn where there is just a series of Deck objects holding a tick image. The example has 3 cards per deck for 3 colors per tick, but it could be made simpler with just 2 cards if you did not need multiple colors.


For some additional examples of these types of effects, please see the video on the Mask object below:


Thanks! Leave a comment if you come up with your own cool methods to make custom-shaped reveal animations.

Have more questions? Submit a request


Please sign in to leave a comment.