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:
https://altia.zendesk.com/attachments/token/g9tXUnvdhsFx86j2vXOgG8sKi/?name=gauge_360.zip**

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.

mask_image1.jpg

 

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:
https://altia.zendesk.com/attachments/token/wZGA417JUlMC7Qe5W4SRfC8RO/?name=gauge_360_nomask.zip**

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:

mask_image2.jpg

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 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:

https://altia.zendesk.com/attachments/token/IviEvgKN6wuiUNr2gaNSiJmun/?name=arc_needle_reveal_blocks.zip

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

https://altia.zendesk.com/entries/108777496--Video-15-min-The-Mask-Object

 

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

0 Comments

Please sign in to leave a comment.