Advertisement
  1. Code
  2. ActionScript
Code

Display Data With Funky Animated Needle Gauges

by
Difficulty:IntermediateLanguages:

Creating appealing data visualization has always been one of Flash's key features. It allows you to achieve eye candy results with real dynamic data; be it in a preloader, a game, or an office presentation.

This simple tutorial will show you how to build a needle gauge meter. You'll learn how to apply a "gloss" effect, communicate with XML, and apply a tween engine to rotations.

Step 1: Folder Setup

Create three files: gauge.fla, gauge.xml, and Main.as.

Step 2: XML Structure

Open gauge.xml. This file will contain the data that populates the meters; edit them however you like based on the following structure:

Value is a percentage and so should be between 0 and 100. The description will be displayed on the corresponding gauge.

Step 3: Stage Settings

Open gauge.fla and change the settings as shown below.

Step 4: Create the Gauge Movie Clip

Create a new symbol, name it gauge_mc and set the Class to Gauge.

Step 5: Background Settings

Next, create a circle as shown below:

This will form the gauge's insides, so name this layer "background".

Step 6: Add a Surrounding Stroke

Add a stroke using the ink bottle tool (shortcut: S) with the following settings:

(Click on the background circle to apply the stroke.)

Step 7: Create a Frame with Gradient Effects

Switch to the Selection tool, click the stroke to select it, and press Modify > Shape > Convert Lines to Fills. Now, copy the fill and paste it in a new layer, created above the existing layer, called "frame". Add two new gradient strokes, each one pixel thick. One goes on the inside of the frame, the other goes on the outside.

Step 8: Draw the Pin

Create a new layer, name it "needle pin" and in the center make a small gray circle with a thick black outline:

Step 9: Draw the Needle

Create a new layer underneath the pin's and name it "needle". Draw a line, convert the line to a fill and convert this fill to a symbol (called needle_mc).

You need to move both the registration point and the rotation point of this new symbol to the center of the bottom of the line. To move the registration point, double-click the needle to edit, then drag the fill until the registration point is in the correct place. To move the rotation point, go back to editing the gauge_mc symbol, then use the Free Transform tool (shortcut: Q) to double-click the little circle. This will snap it to the registration point of the needle.

Step 10: Draw the Marker's Ring

Create a new layer beneath the needle's named "markers". Draw a circle, smaller than the frame, with a thick black stroke and no fill.

Step 11: Create a Star

On another new layer, select the PolyStar tool, and use it to create a ten-sided star, centered on the needle. We'll use this to create the little markers around the ring.

Step 12: Connect the Star's Points to the Center

On the markers layer, draw thin lines from the needle to each point of the star. This way, you know that they are evenly spaced.

Step 13: Create an Inner Circle for Cropping

Create a circle even smaller than the marker ring, then select the lines inside this circle and press delete to erase them all.

Step 14: Further Crops

Erase the inner circle, the outer markers and the bottom section of the marker ring, as highlighted below:

Step 15: Label the Markers

Label the markers: the first as 0, the middle one as 50, and the last as 100.

Step 16: Make the Glassy and Glossy Effects

Create a new layer on top of all the others named "glass" and another one above that named "gloss".

In the glass layer, draw a white circle the size of the background. Click Window > Color and give it a radial gradient fill, where both colors are white but one has a 20% alpha and the other has a 5% alpha.

In the gloss layer, create two white circles with gradient alphas that go from 70% to 30%. Use the Selection tool to squeeze their shapes to the ones shown below:

Step 17: Add a Description Label

Create another new layer named "label" and add a text field with "label_txt" as its instance name. Don't forget to embed the font!

Step 18: Add a Value Label

Add a new layer named "value" and add a text field with "value_txt" as its instance name. Again, don't forget to embed the fonts. I'm using a font called LCDDot, which you can find in the zip file.

Step 19: Correcting the Needle's Rotation Point

Right now, the needle is pointing at the 50% mark. We need it to be pointing at 0% when it starts, so double-click "needle_mc", select the fill and rotate it to -143º. This will give us the offset we need.

Step 20: Set the Document Class

Make sure nothing is selected, then in the Properties panel, type Main into the Class box to set Main.as as your document class. Now open it.

Step 21: Import Classes

We will be using GreenSock's tweening engine, TweenMax. You can download it here: http://blog.greensock.com/tweenmax/

Import the necessary classes for Main.as:

Step 22: Write the Main Constructor

This code should go after "import com.greensock.events.TweenEvent;" but before the last "}". The Main() function will be the first function run when the SWF loads.

Step 23: Make the Gauge Move

Put this code before the last two "}" in your file. This function will be run when the XML has loaded.

Step 24: Make the Numbers Change

Again, insert this before the last two "}" in your code. This function is run repeatedly as the needle is tweened (rotated).

Step 25: Check Out the Full Code

Confused about where any of the code should go? Check it out here.

Step 26: Finish Up

Now all you need is to head back to gauge.fla, and in the first frame add a background and a title:

Conclusion

As you can see, it's easier than it looks. Take your time and expand upon the concept: make a preloader, a bandwidth meter, whatever you like. Hope you enjoyed this tutorial, thanks for reading!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.