Control Component Set 1 Components

The CCS1 set of components provides a number of 'controls' that one might find on a retro 1970s science fiction control board. The component set includes everything from old video arcade joysticks and buttons to analog and digital meters, all complete with LED lights and an old fashion poll meter. One reservation I have to all the components is that while the font face and a few other colors for each component can be customized, the main visual bits of the components cannot be configured. In all cases, something dominant remains grey, and these components aren't easily skinnable unless you break into their structure yourself.

BJC Analog meter (adds 4K to your movie)
A round meter with a needle to point at the values, the analog meter component looks a lot like the speedometer out of your car, minus the little numbers marking each separator. The meter is fairly configurable. For example, you can configure how many separators show up on the meter, how far the 'red' (BJC calls this the 'alert') extends, the font face, whether it should display the current value of the needle, whether the whole meter should display a title, a callback when the needle reaches the 'alert' area, and the color of the font, background, and 'alert'. On top of that, the meter generally looks good.

However, the meter is more of a presentation gadget rather than a UI gadget. You cannot, for example, click on the meter to set the needle. In fact, if you want the needle to move at all, you have to create an interface yourself and use actionscript to invoke the component's setValue( ) method if you want the needle to go to a particular value. Further, although you can configure the font face, background color, and alert color, you cannot control the text's size, style, weight, or decoration, and the meter's needle and outer edge are always grey, which may not work with your movie's design.

BJC Button (adds 4K)
The round button component looks like the button you'd find on a video game in an arcade, complete with a title showing on the right side of the button. You can configure the colors and font face, as well as what text, if any, shows up in the title to the right of the text. Perhaps most interesting is the 'mode' of the button, which can be either 'push' or 'on/off'. In the latter mode, the button stays down when you've pushed it once, and it returns to the up state when you push it again.

You cannot configure the font's size, style, weight, or decoration, nor can you decide where the text will appear. If you want the button to display text, it must always be on the right side of the button. It is possible to change the background/outline color of the button, but you cannot change the color of the button itself, so your button will always be light grey while in the up state and dark grey while pressed. The callback is invoked whenever the button is pressed, including each time the button is pressed 'on' or 'off' in on/off mode. Consequently, the 'on/off' mode is relatively useless unless you code a way of handling the difference between the 'on' click and the 'off' click. Since that logic is already present in the component's code, why should the user have to reduplicate that logic to get different actions for the 'on/off' clicks? It would be nice if the button invoked one callback when the button is pressed 'on' and another when it is pressed 'off'.

BJC Digital Meter (8K)
This component is the digital counterpart of the analog meter. The component is a rectangle (with rounded corners) that shows a number value in an LED sort of display area. Underneath the LED is a bar similar to a 'loading progress' bar which displays the same value as is displayed in the LED. A title can be displayed underneath the digital meter too. As with the analog meter, the best part of the component is that you can define the 'alert' range and a callback which is invoked when the meter enters that 'alert' range.

As with the analog meter, however, the digital meter is a presentation component rather than a UI element. The user cannot, for example, click on the meter to bring the value up to a certain point. If you want the meter to display anything at all, you have to create some interface yourself and use actionscript to invoke the meter's setValue( ) method to bring the meter to a certain value. The outline color of the meter is configurable, as well as the colors that show up in the bar under the LED, but the rest of the component, including the LED, remains grey. You can change the font of the title, but the font of the LED is unconfigurable and remains a large, italic, blocky type face that doesn't really resemble too much the numbers you'd see in a real LED, e.g. the blinking '12:00' on your VCR. This limits the use of the component only to those contexts whose design allows such colors and typeface.

BJC Joystick (4K)
The BJC joystick is just that: a joystick just like you'd find on a video game arcade. The user can click on the joystick knob and drag it around. If you set a callback, the joystick will continuously call the callback and send the joystick's cartesian or polar coordinates to the callback function. Additionally, one can invoke various getter methods to squeeze even more use out of the joystick. I think this component is generally useful as it allows a fair level of information to be easily gleaned from the position of the joystick.

BJC LED (4K)
This component is simply a little LED light, the kind you'd find on a scoreboard. The light can be set to 'on' or 'off', or to blink on and off at a specified speed. The only unfortunate aspect is that telling the LED to do any of these activities requires that you use actionscript to invoke the component's custom methods. Also, the 'color' parameter in the properties inspector doesn't seem to do anything to the LED Although the constructor attempts to set the LED's color to the value specified by the 'color' parameter in the properties inspector, the LED seems unaffected by this. Further, invoking any of the component's required methods requires that you specify a color as an argument. It would be nice, in the event that the user did not pass a color as an argument, that the method would default to the color specified by the 'color' parameter in the properties inspector.

BJC Poll Meter (4K)
The poll meter is just what its name indicates, namely, a poll meter. The meter takes the form of a rectangle screen which fills in some color for the value of the 'polls', whatever those polls may be. You can define an 'alert' domain, the color to be displayed when the polls are in this 'alert' range, and a callback function to be invoked when the polls reach the 'alert' range. Also, the poll can be set to run automatically or manually.

As with the other CCS1 meters, this one is more of a presentation component, used for presenting values, than a UI. The user cannot, for example, click on the poll meter to set the polls to a particular level. If you want to set the poll meter to any particular value, you have to create an interface yourself and use actionscript to invoke the component's addValue( ) method.

BJC Slider (4K)
The slider is a switch that can be slid back and forth in a track, the kind of thing you might find in the 'levels' of a rock band's mixing board. The sliding mechanism is highly configurable. For example, you can define how many 'steps' are in the slider's track. If you set the steps to 3, as you drag the thumb it will snap to 3 positions in the track. You can set the number of marks in the track too, as well as the range of values to be represented by the slider. The actual value of the slider thumb's position can be displayed, and it can be sent to a callback function whenever the user releases the thumb. I find this component generally useful because its sliding mechanism is so configurable, and the slider's value is easily accessible via the callback function.

BJC Switch (4K)
The BJC Switch is a nice component that functions as a 2 or 3 position switch. By default, the switch has an up, middle, and down position, but you can set it to function with only up/on and down/off positions. Some text can be displayed to the right of the switch for each of these positions, and you can set the switch to start at any position. A callback can be assigned which is invoked whenever the user releases the switch. The usability of the switch is very intuitive: you simply click the switch, hold down the mouse, and drag it up or down to the position you desire.

BJC Wheel (8K)
This component is simply a knob or wheel which can be rotated, much like the round volume knobs you might find on the old tape decks in your car. Just as with the slider, you can define how many 'steps' should apply to the knob's rotation, and you can set the number of marks around the outside of the knob. The range of numbers represented by the knob's rotation are customizable, and the value of the knob can be sent to a callback function whenever the user releases the knob. A title can be displayed beneath the knob.

How you rotate the wheel, however, is highly unintuitive and even confusing for a few moments. To rotate the knob, you drag the mouse up and down. If you drag the mouse down, the knob rotates to the right (i.e. it increases the value), and if you drag the mouse up, the knob rotates to the left (i.e. it decreases the value). On the one hand, the most intuitive way to rotate the knob would be to drag the mouse around in a circle rather than drag the mouse up and down. At first, the knob acts a bit strange until you realize that it's up/down movement rather than rotational movement that turns the knob. Admittedly, allowing the knob to be turned with rotational movement of the mouse would require some clever coding, but if it can be done with the joystick, it can be done with the wheel. On the other hand, it may not be all that obvious to many that the up/down motion should be inverted like an aircraft's controls, and this is simply because moving the mouse up/down to rotate the wheel isn't entirely natural. To some it may seem in fact more natural to move the mouse up to increase the knob's value and more natural to move the mouse down to decrease the knob's value, but this is not the way the component is set up. Once you figure it out, it's not too odd, but it is certainly confusing for the first little bit.