Documentation for the BGX Vertical Gauge Component (Flash MX 2004) Version 1.1.3.0 5/8/2004


Overview

Introduction

The BGX Vertical Gauge Component allows easy visualization of dynamic values such as temperature, pressure, speed or other data. Just drop the component from the components panel onto the stage and set the basic layout options via the Components Inspector or the Properties Inspector. Usually the actual gauge value would be set via ActionScript based on whatever you want to display.

The BGX Vertical Gauge Component also comes with an example of how to use custom skins. Just start from this example file and replace the skin elements with your own to quickly create your own look and feel.

back to top

Deployment

After installing the BGX Vertical Gauge extension the component will be available from the components panel within Flash MX 2004.

back to top

Reference

Inspectable Properties (= Properties that appear in the Component Inspector)

Property Value (defaults in bold) Description
baseValue
Number
Default: 0
 Specifies the value on the gauge from which the gradient will be shown. E.g. if the gaugeValue is 30 and the baseValue is 0 the gradient will be shown from 0 - 30.
gaugeHeight
Number > 0
Default: 200
 The height of the overall gauge in pixels.
gaugeValue

Number
Default: 30

 Specifies the value on the gauge to which the gradient will be shown. E.g. if the gaugeValue is 30 and the baseValue is 0 the gradient will be shown from 0 - 30.
gaugeWidth
Number > 0
Default: 15
 The width of the gauge in pixels.
gaugeX
Number
Default: 25
 Specifies the left edge of the gauge bar that displays the gradient relative to the left edge of the components bounding box.
gradientClip

String identifying the linkage name of a movieclip.
Default: BgxVG_GradientRedYellowBlue

Specifies the gradient movieclip that will be used. Via the Component Inspector build in gradients can be selected from a drop down list, custom clips can be assigned via ActionScript.
markerStep
Number > 0
Default: 10

The step in values for which markers shall be drawn. E.g. if minVal = 0, maxVal = 40 and markerStep = 20, markers are drawn for 0, 20, 40.

Note that markers are drawn from top to bottom and if the multiples of markerStep do not produce a value that matches minVal no marker will be drawn at the bottom of the gauge. E.g. if the maxVal = 30, minVal = 0 and markerStep = 20, markers are only drawn for 10 and 30. As the nect step (-10) is below minVal it will not be shown.

markerX
Number
Default: 20
 Specifies the left edge of the marker bars relative to the left edge of the components bounding box.
maxVal
Number
Default: 50

The maximum value to display on the gauge.

Note that maxValue does not restrict the maximum value of gaugeValue. It governs only the display.
minVal
Number
Default: -50

The minimum value to display on the gauge.

Note that minValue does not restrict the minimum value of gaugeValue. It governs only the display.
showMarkers

Boolean
Default: true

 Flasg to indicate wether markers shall be displayed.

back to top

Mapping of the inspectable properties to the component

Mapping

reference overview    back to top

Property settings examples

Example 1

The following default values have been changed:

  • gaugeHeight: 210
  • gaugeWidth: 5
  • gradientClip: BgxVG_GradientBlueWhite
  • minVal: -20

Example 2

The following default values have been changed:

  • gaugeHeight: 100
  • gaugeValue: 46
  • gaugeWidth: 120
  • gradientClip: BgxVG_GradientGreenWhite
  • markerStep: 15
  • maxVal: 75
  • minVal: 0
Example 2

 

Example 3

The following default value have been changed:

  • baseValue: -30

 

Example 3

reference overview    back to top

Skinning properties

The following properties can be used to assign custom skin elements. Simply create a movie clip, give it a linkage name and then assign that linkage name to the gauge element you want. Ideally the custom clips should correspond to the built-in skin elements as shown:

Skin Elements

Property Value (defaults in bold) Description
backdropClip
String
Default: bgxVG_Backdrop
 The linkage name of the movie clip that should be used for the gauge backdrop.
gradientClip
String
Default: BgxVG_GradientRedYellowBlue
 The linkage name of the movie clip that should be used for the gauge gradient.
markerClip

String
Default: bgxVG_MarkerLine

 The linkage name of the movie clip that should be used for the marker.
markerLabelClip
String
Default: bgxVG_MarkerLabelClip
 The linkage name of the movie clip that should be used for the marker label.

 

 

 

Example

instanceBgxVG.backdropClip = "CustomVG_Backdrop";
instanceBgxVG.gradientClip = "CustomVG_GradientRedYellowBlue";
instanceBgxVG.markerClip = "CustomVG_MarkerLine";
instanceBgxVG.markerLabelClip = "CustomVG_MarkerLabelClip";

reference overview    back to top

Live preview

The BGX Vertical Gauge Component supports live preview, that means all property changes that are made via the Properties Inspector or the Components Inspector are immediately visible within Flash. However when the component is first dragged onto the stage or when the component's bounding box is resized the gradient is shown as a whole, not just the section between the current base and gauge value.

This behaviour is by design to allow the preview of the gradient as a whole. As soon as any property is changed the component will appear as at runtime.

reference overview    back to top

© 2004 Bernhard Gaul